Merge pull request #37 from Matth26/burner-remove-options

Burner remove options

examples/react-app/package.json

@@ -37,15 +37,15 @@
         "@graphql-codegen/typescript-graphql-request": "^5.0.0",
         "@graphql-codegen/typescript-operations": "^4.0.1",
         "@types/node": "^20.4.8",
-        "@types/react": "^18.0.37",
+        "@types/react": "^18.2.33",
         "@types/react-dom": "^18.0.11",
         "@typescript-eslint/eslint-plugin": "^5.59.0",
         "@typescript-eslint/parser": "^5.59.0",
         "@vitejs/plugin-react": "^4.0.0",
         "eslint": "^8.38.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
-        "typescript": "^5.0.2",
+        "typescript": "^5.0.3",
         "vite": "^4.3.9"
     }
 }

examples/react-app/src/App.css

@@ -40,3 +40,11 @@
 .read-the-docs {
     color: #888;
 }
+
+.error {
+    color: red;
+}
+
+.success {
+    color: green;
+}

examples/react-app/src/App.tsx

@@ -1,33 +1,91 @@
+import { useComponentValue } from "@latticexyz/react";
+import { EntityIndex } from "@latticexyz/recs";
+import { useEffect, useState } from "react";
 import "./App.css";
 import { useDojo } from "./DojoContext";
-import { useComponentValue } from "@latticexyz/react";
 import { Direction } from "./dojo/createSystemCalls";
-import { EntityIndex } from "@latticexyz/recs";
 
 function App() {
     const {
         setup: {
             systemCalls: { spawn, move },
             components: { Moves, Position },
         },
-        account: { create, list, select, account, isDeploying, clear },
+        account: {
+            create,
+            list,
+            select,
+            account,
+            isDeploying,
+            clear,
+            copyToClipboard,
+            applyFromClipboard,
+        },
     } = useDojo();
 
+    const [clipboardStatus, setClipboardStatus] = useState({
+        message: "",
+        isError: false,
+    });
+
     // entity id - this example uses the account address as the entity id
     const entityId = account.address.toString();
 
     // get current component values
     const position = useComponentValue(Position, entityId as EntityIndex);
     const moves = useComponentValue(Moves, entityId as EntityIndex);
 
+    const handleRestoreBurners = async () => {
+        try {
+            await applyFromClipboard();
+            setClipboardStatus({
+                message: "Burners restored successfully!",
+                isError: false,
+            });
+        } catch (error) {
+            setClipboardStatus({
+                message: `Failed to restore burners from clipboard`,
+                isError: true,
+            });
+        }
+    };
+
+    useEffect(() => {
+        // Clear message after 3 seconds
+        if (clipboardStatus.message) {
+            const timer = setTimeout(() => {
+                setClipboardStatus({ message: "", isError: false });
+            }, 3000);
+
+            return () => clearTimeout(timer);
+        }
+    }, [clipboardStatus.message]);
+
     return (
         <>
             <button onClick={create}>
                 {isDeploying ? "deploying burner" : "create burner"}
             </button>
+            {list().length > 0 && (
+                <button onClick={async () => await copyToClipboard()}>
+                    Save Burners to Clipboard
+                </button>
+            )}
+            <button onClick={handleRestoreBurners}>
+                Restore Burners from Clipboard
+            </button>
+            {clipboardStatus.message && (
+                <div className={clipboardStatus.isError ? "error" : "success"}>
+                    {clipboardStatus.message}
+                </div>
+            )}
+
             <div className="card">
                 select signer:{" "}
-                <select onChange={(e) => select(e.target.value)}>
+                <select
+                    value={account ? account.address : ""}
+                    onChange={(e) => select(e.target.value)}
+                >
                     {list().map((account, index) => {
                         return (
                             <option value={account.address} key={index}>

examples/react-app/src/DojoContext.tsx

@@ -1,65 +1,95 @@
-import { createContext, ReactNode, useContext, useMemo } from "react";
-import { SetupResult } from "./dojo/setup";
-import { useBurner } from "@dojoengine/create-burner";
+import { BurnerProvider, useBurner } from "@dojoengine/create-burner";
+import { ReactNode, createContext, useContext, useMemo } from "react";
 import { Account, RpcProvider } from "starknet";
+import { SetupResult } from "./dojo/setup";
+
+interface DojoContextType extends SetupResult {
+    masterAccount: Account;
+}
 
-const DojoContext = createContext<SetupResult | null>(null);
+const DojoContext = createContext<DojoContextType | null>(null);
 
-type Props = {
+const requiredEnvs = [
+    "VITE_PUBLIC_MASTER_ADDRESS",
+    "VITE_PUBLIC_MASTER_PRIVATE_KEY",
+    "VITE_PUBLIC_ACCOUNT_CLASS_HASH",
+];
+
+for (const env of requiredEnvs) {
+    if (!import.meta.env[env]) {
+        throw new Error(`Environment variable ${env} is not set!`);
+    }
+}
+
+type DojoProviderProps = {
     children: ReactNode;
     value: SetupResult;
 };
 
-export const DojoProvider = ({ children, value }: Props) => {
+export const DojoProvider = ({ children, value }: DojoProviderProps) => {
     const currentValue = useContext(DojoContext);
     if (currentValue) throw new Error("DojoProvider can only be used once");
-    return (
-        <DojoContext.Provider value={value}>{children}</DojoContext.Provider>
-    );
-};
-
-export const useDojo = () => {
-    const value = useContext(DojoContext);
 
-    if (!value)
-        throw new Error(
-            "The `useDojo` hook must be used within a `DojoProvider`"
-        );
-
-    const provider = useMemo(
+    const rpcProvider = useMemo(
         () =>
             new RpcProvider({
-                nodeUrl: import.meta.env.VITE_PUBLIC_NODE_URL!,
+                nodeUrl:
+                    import.meta.env.VITE_PUBLIC_NODE_URL ||
+                    "http://localhost:5050",
             }),
         []
     );
 
-    //
-    // this can be substituted with a wallet provider
-    //
-    const masterAddress = import.meta.env.VITE_PUBLIC_MASTER_ADDRESS!;
-    const privateKey = import.meta.env.VITE_PUBLIC_MASTER_PRIVATE_KEY!;
+    const masterAddress = import.meta.env.VITE_PUBLIC_MASTER_ADDRESS;
+    const privateKey = import.meta.env.VITE_PUBLIC_MASTER_PRIVATE_KEY;
+    const accountClassHash = import.meta.env.VITE_PUBLIC_ACCOUNT_CLASS_HASH;
     const masterAccount = useMemo(
-        () => new Account(provider, masterAddress, privateKey),
-        [provider, masterAddress, privateKey]
+        () => new Account(rpcProvider, masterAddress, privateKey),
+        [rpcProvider, masterAddress, privateKey]
+    );
+
+    return (
+        <BurnerProvider
+            initOptions={{ masterAccount, accountClassHash, rpcProvider }}
+        >
+            <DojoContext.Provider value={{ ...value, masterAccount }}>
+                {children}
+            </DojoContext.Provider>
+        </BurnerProvider>
     );
+};
+
+export const useDojo = () => {
+    const contextValue = useContext(DojoContext);
+    if (!contextValue)
+        throw new Error(
+            "The `useDojo` hook must be used within a `DojoProvider`"
+        );
 
-    const { create, list, get, account, select, isDeploying, clear } =
-        useBurner({
-            masterAccount: masterAccount,
-            accountClassHash: import.meta.env.VITE_PUBLIC_ACCOUNT_CLASS_HASH!,
-        });
+    const {
+        create,
+        list,
+        get,
+        account,
+        select,
+        isDeploying,
+        clear,
+        copyToClipboard,
+        applyFromClipboard,
+    } = useBurner();
 
     return {
-        setup: value,
+        setup: contextValue,
         account: {
             create,
             list,
             get,
             select,
             clear,
-            account: account ? account : masterAccount,
+            account: account ?? contextValue.masterAccount,
             isDeploying,
+            copyToClipboard,
+            applyFromClipboard,
         },
     };
 };

packages/create-burner/package.json

@@ -27,7 +27,7 @@
         "@types/jest": "^29.5.0",
         "@types/js-cookie": "^3.0.3",
         "@types/node": "^18.15.11",
-        "@types/react": "^18.0.33",
+        "@types/react": "^18.2.33",
         "@types/react-dom": "^18.0.11",
         "@types/web": "^0.0.114",
         "bun-types": "^1.0.1",

packages/create-burner/src/context/burnerProvider.tsx

@@ -0,0 +1,20 @@
+import { ReactNode, createContext } from "react";
+import { BurnerManagerOptions } from "../types";
+
+export const BurnerContext = createContext<BurnerManagerOptions | null>(null);
+
+interface BurnerProviderProps {
+    children: ReactNode;
+    initOptions: BurnerManagerOptions;
+}
+
+export const BurnerProvider = ({
+    children,
+    initOptions,
+}: BurnerProviderProps): JSX.Element => {
+    return (
+        <BurnerContext.Provider value={initOptions}>
+            {children}
+        </BurnerContext.Provider>
+    );
+};

packages/create-burner/src/context/index.tsx

@@ -0,0 +1 @@
+export * from "./burnerProvider";