Merge pull request #52 from blocto/develop

Release 0.2.0

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@blocto/fcl": "^1.0.0-alpha.1",
-    "@blocto/sdk": "0.4.3",
+    "@blocto/sdk": "^0.5.0",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.4",
     "@emotion/react": "^11",

src/components/AptosEditor.tsx

@@ -14,6 +14,7 @@ import ScriptTypes, {
   PerInfo,
   PerScriptAbi,
 } from "../types/ScriptTypes";
+import type { AptosTypes } from "@blocto/sdk";
 import Editor from "./Editor";
 
 const typeKeys = Object.values(AptosArgTypes);
@@ -36,7 +37,7 @@ const formatTransactionArgs = (args: Arg[] | undefined) => {
           : currentValue.value;
     }
     return initial;
-  }, {});
+  }, {}) as AptosTypes.SignMessagePayload;
 };
 
 const AptosEditor = (): ReactJSXElement => {
@@ -55,7 +56,7 @@ const AptosEditor = (): ReactJSXElement => {
   }, []);
 
   const handleSignMessage = useCallback((args) => {
-    return new Promise<void>((resolve) => {
+    return new Promise<AptosTypes.SignMessageResponse>((resolve) => {
       const aptos = ChainServices[Chains.Aptos]?.bloctoSDK?.aptos;
       resolve(aptos.signMessage(formatTransactionArgs(args)));
     });
@@ -122,7 +123,7 @@ const AptosEditor = (): ReactJSXElement => {
       isTransactionsExtraSignersAvailable
       isSandboxDisabled
       defaultTab={ScriptTypes.CONTRACT}
-      disabledTabs={[ScriptTypes.TX]}
+      disabledTabs={[ScriptTypes.TX, ScriptTypes.USER_OPERATION]}
       tabsShouldLoadDefaultTemplate={[
         ScriptTypes.SCRIPT,
         ScriptTypes.CONTRACT,

src/components/Editor.tsx

@@ -55,6 +55,7 @@ const TabNames = [
   "Contract",
   "Sign Message",
   "Resource",
+  "User Operations",
 ];
 
 const isMainnet = process.env.REACT_APP_NETWORK === "mainnet";
@@ -65,10 +66,12 @@ interface EditorProps {
     shouldSign: boolean | undefined,
     signers: Array<{ privateKey: string; address: string }> | undefined,
     script: string,
-    method?: (...param: any[]) => Promise<any>
+    method?: (...param: any[]) => Promise<any>,
+    isUserOperation?: boolean
   ) => Promise<{
-    transactionId: string;
+    transactionId?: string;
     transaction?: any;
+    userOpHash?: string;
     subscribeFunc?: (callback: (transaction: any) => void) => () => void;
     isSealed?: (transaction: any) => boolean;
   }>;
@@ -214,7 +217,7 @@ const Editor: React.FC<EditorProps> = ({
             .catch((error) => {
               setError(error?.message || "Error: Signing message failed.");
             });
-        } else if (scriptType === ScriptTypes.TX) {
+        } else if (scriptType === ScriptTypes.TX && onSendTransactions) {
           onSendTransactions(
             args,
             shouldSign,
@@ -223,8 +226,39 @@ const Editor: React.FC<EditorProps> = ({
             methodRef.current
           )
             .then(({ transactionId, transaction, subscribeFunc, isSealed }) => {
-              setTxHash(transactionId);
-              setResponse(transaction);
+              if (transactionId) {
+                setTxHash(transactionId);
+                setResponse(transaction);
+              }
+
+              if (subscribeFunc && isSealed) {
+                const unsub = subscribeFunc((transaction: any) => {
+                  setResponse(transaction);
+                  if (isSealed(transaction)) {
+                    unsub();
+                  }
+                });
+              }
+            })
+            .catch((error) => {
+              setError(error?.message || "Error: Sending transaction failed.");
+            });
+        } else if (
+          scriptType === ScriptTypes.USER_OPERATION &&
+          onSendTransactions
+        ) {
+          onSendTransactions(
+            args,
+            shouldSign,
+            signers,
+            script,
+            methodRef.current,
+            true
+          )
+            .then(({ userOpHash, subscribeFunc, isSealed }) => {
+              if (userOpHash) {
+                setResult(userOpHash);
+              }
 
               if (subscribeFunc && isSealed) {
                 const unsub = subscribeFunc((transaction: any) => {

src/components/EvmEditor.tsx

@@ -5,6 +5,7 @@ import { Context } from "../context/Context";
 import * as ContractTemplates from "../scripts/evm/Contract";
 import * as SignMessageTemplates from "../scripts/evm/SignMessage";
 import * as TransactionsTemplates from "../scripts/evm/Transactions";
+import * as UserOperationsTemplates from "../scripts/evm/UserOperations";
 import { EvmChain } from "../types/ChainTypes";
 import ScriptTypes, { Arg, ArgTypes, PerInfo } from "../types/ScriptTypes";
 import Editor from "./Editor";
@@ -13,7 +14,7 @@ import EvmChainSelect from "./EvmChainSelect";
 const typeKeys = Object.values(ArgTypes);
 
 const FaucetUrls = {
-  [EvmChain.Ethereum]: "https://rinkeby-faucet.com/",
+  [EvmChain.Ethereum]: "https://goerlifaucet.com/",
   [EvmChain.Bsc]: "https://testnet.binance.org/faucet-smart",
   [EvmChain.Polygon]: "https://faucet.polygon.technology/",
   [EvmChain.Avalanche]: "https://faucet.avax-test.network/",
@@ -25,6 +26,7 @@ const MenuGroups = [
   { title: "Transactions", templates: TransactionsTemplates },
   { title: "Sign Message", templates: SignMessageTemplates },
   { title: "Contract", templates: ContractTemplates },
+  { title: "User Operations", templates: UserOperationsTemplates },
 ];
 
 const formatTransactionArgs = (args: Arg[] | undefined) => {
@@ -99,8 +101,13 @@ const EvmEditor = (): ReactJSXElement => {
       shouldSign: boolean | undefined,
       signers: Array<{ privateKey: string; address: string }> | undefined,
       script: string,
-      method?: (...param: any[]) => Promise<any>
-    ): Promise<{ transactionId: string; transaction: any }> => {
+      method?: (...param: any[]) => Promise<any>,
+      isUserOperation?: boolean
+    ): Promise<{
+      transactionId?: string;
+      transaction?: any;
+      userOpHash?: string;
+    }> => {
       return new Promise(async (resolve, reject) => {
         if (!method) {
           return reject(new Error("Error: Transaction method is missing."));
@@ -109,28 +116,48 @@ const EvmEditor = (): ReactJSXElement => {
         const address = await checkArgumentsAndAddress(args);
         const formattedArgs = formatTransactionArgs(args);
 
-        method(address, formattedArgs, chain)
-          .then((transaction) => {
-            resolve({
-              transactionId: transaction.transactionHash,
-              transaction,
-            });
-            toast({
-              title: "Transaction is Sealed",
-              status: "success",
-              isClosable: true,
-              duration: 1000,
-            });
-          })
-          .catch((error) => {
-            reject(error);
-            toast({
-              title: "Transaction failed",
-              status: "error",
-              isClosable: true,
-              duration: 1000,
-            });
-          });
+        !isUserOperation
+          ? method(address, formattedArgs, chain)
+              .then((transaction) => {
+                resolve({
+                  transactionId: transaction.transactionHash,
+                  transaction,
+                });
+                toast({
+                  title: "Transaction is Sealed",
+                  status: "success",
+                  isClosable: true,
+                  duration: 1000,
+                });
+              })
+              .catch((error) => {
+                reject(error);
+                toast({
+                  title: "Transaction failed",
+                  status: "error",
+                  isClosable: true,
+                  duration: 1000,
+                });
+              })
+          : method(address, formattedArgs, chain)
+              .then((userOpHash) => {
+                resolve({ userOpHash });
+                toast({
+                  title: "Transaction is Sealed",
+                  status: "success",
+                  isClosable: true,
+                  duration: 1000,
+                });
+              })
+              .catch((error) => {
+                reject(error);
+                toast({
+                  title: "Transaction failed",
+                  status: "error",
+                  isClosable: true,
+                  duration: 1000,
+                });
+              });
       });
     },
     [toast, checkArgumentsAndAddress, chain]
@@ -198,7 +225,11 @@ const EvmEditor = (): ReactJSXElement => {
       isSandboxDisabled
       shouldClearScript
       disabledTabs={[ScriptTypes.SCRIPT, ScriptTypes.RESOURCE]}
-      tabsShouldLoadDefaultTemplate={[ScriptTypes.SIGN, ScriptTypes.CONTRACT]}
+      tabsShouldLoadDefaultTemplate={[
+        ScriptTypes.SIGN,
+        ScriptTypes.CONTRACT,
+        ScriptTypes.USER_OPERATION,
+      ]}
       faucetUrl={(chain as EvmChain) ? FaucetUrls[chain as EvmChain] : ""}
     >
       <EvmChainSelect />

src/components/FlowEditor.tsx

@@ -210,7 +210,11 @@ const FlowEditor = (): ReactJSXElement => {
       onSendTransactions={handleSendTransactions}
       argTypes={typeKeys}
       isTransactionsExtraSignersAvailable
-      disabledTabs={[ScriptTypes.CONTRACT, ScriptTypes.RESOURCE]}
+      disabledTabs={[
+        ScriptTypes.CONTRACT,
+        ScriptTypes.RESOURCE,
+        ScriptTypes.USER_OPERATION,
+      ]}
       tabsShouldLoadDefaultTemplate={[ScriptTypes.SIGN]}
       onSendScript={handleSendScript}
       faucetUrl="https://testnet-faucet.onflow.org/fund-account"

src/components/SolanaEditor.tsx

@@ -142,6 +142,7 @@ const SolanaEditor = (): ReactJSXElement => {
         ScriptTypes.SCRIPT,
         ScriptTypes.SIGN,
         ScriptTypes.RESOURCE,
+        ScriptTypes.USER_OPERATION,
       ]}
       tabsShouldLoadDefaultTemplate={[ScriptTypes.CONTRACT]}
       faucetUrl="https://solfaucet.com/"