Merge pull request #76 from blocto/develop

Update prod

.env.example

@@ -1,2 +1,3 @@
 REACT_APP_DAPP_ID=
-REACT_APP_NETWORK=testnet
+REACT_APP_NETWORK=testnet
+REACT_APP_INFURA_KEY=

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@blocto/dappauth": "^2.1.0",
     "@blocto/fcl": "^1.0.0-alpha.1",
-    "@blocto/sdk": "^0.5.0",
+    "@blocto/sdk": "0.8.1-beta.0",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.4",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@onflow/types": "^1.0.0",
-    "@solana/buffer-layout": "^4.0.0",
-    "@solana/web3.js": "^1.36.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -20,9 +19,11 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "elliptic": "^6.5.4",
+    "eth-eip712-util": "^2.3.1",
     "framer-motion": "^4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
     "react-scripts": "4.0.3",
     "sha3": "^2.1.4",
     "typescript": "^4.5.4",
@@ -62,6 +63,7 @@
     "prettier": "^2.5.1"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "acorn": "npm:acorn-with-stage3"
   }
 }

src/components/AptosEditor.tsx

@@ -26,15 +26,36 @@ const MenuGroups = [
   { title: "Resource", templates: AptosResourceTemplate },
 ];
 
-const formatTransactionArgs = (args: Arg[] | undefined) => {
+const NUMBERS = [AptosArgTypes.U8, AptosArgTypes.U16, AptosArgTypes.U32];
+
+const formatArg = (type: AptosArgTypes, value: any): any => {
+  if (NUMBERS.includes(type)) {
+    return +value;
+  }
+
+  if (type === AptosArgTypes.Bool && value) {
+    return JSON.parse(value.toLowerCase());
+  }
+
+  if (
+    (type === AptosArgTypes.Array || type === AptosArgTypes.Object) &&
+    value
+  ) {
+    try {
+      return JSON.parse(value);
+    } catch (error) {}
+  }
+
+  return value;
+};
+
+const formatSigningArgs = (args: Arg[] | undefined) => {
   return args?.reduce((initial: { [key: string]: any }, currentValue: Arg) => {
     if (currentValue.name) {
-      initial[currentValue.name] =
-        currentValue.type === AptosArgTypes.Number
-          ? +currentValue.value
-          : currentValue.type === AptosArgTypes.Bool && currentValue.value
-          ? JSON.parse(currentValue.value.toLowerCase())
-          : currentValue.value;
+      initial[currentValue.name] = formatArg(
+        currentValue.type,
+        currentValue.value
+      );
     }
     return initial;
   }, {}) as AptosTypes.SignMessagePayload;
@@ -58,7 +79,7 @@ const AptosEditor = (): ReactJSXElement => {
   const handleSignMessage = useCallback((args) => {
     return new Promise<AptosTypes.SignMessageResponse>((resolve) => {
       const aptos = ChainServices[Chains.Aptos]?.bloctoSDK?.aptos;
-      resolve(aptos.signMessage(formatTransactionArgs(args)));
+      resolve(aptos.signMessage(formatSigningArgs(args)));
     });
   }, []);
 
@@ -69,8 +90,24 @@ const AptosEditor = (): ReactJSXElement => {
       method?: (...param: any[]) => Promise<any>
     ) => {
       return new Promise<string>((resolve, reject) => {
-        method?.(contractInfo, args)
-          .then((hash) => resolve(hash))
+        const typeArgs = args
+          ?.filter((arg: any) => arg.type === "type_arg")
+          .map((arg: any) => arg.value);
+        const normalArgs = args
+          ?.filter((arg: any) => arg.type !== "type_arg")
+          .map((arg: any) => formatArg(arg.type, arg.value));
+
+        const { moduleName, method: moduleMethod } = contractInfo;
+        const funcName = `${moduleName.value}::${moduleMethod.value}`;
+        const transaction = {
+          arguments: normalArgs,
+          function: funcName,
+          type: "entry_function_payload",
+          type_arguments: typeArgs,
+        };
+
+        method?.(transaction)
+          .then(({ hash }) => resolve(hash))
           .catch((error) => {
             reject(error);
             toast({
@@ -90,12 +127,43 @@ const AptosEditor = (): ReactJSXElement => {
       script: string,
       args?: Arg[],
       method?: (...param: any[]) => Promise<any>,
-      scriptInfo?: Record<string, PerInfo>,
+      scriptInfo?: Record<"bytecode", PerInfo>,
       scriptAbi?: Record<AptosScriptAbiKeys, PerScriptAbi>
     ) => {
       return new Promise<string>((resolve, reject) => {
-        method?.(scriptInfo, args, scriptAbi)
-          .then((hash) => resolve(hash))
+        const typeArgs = args
+          ?.filter((arg: any) => arg.type === "type_arg")
+          .map((arg: any) => arg.value);
+        const normalArgs = args
+          ?.filter((arg: any) => arg.type !== "type_arg")
+          .map((arg: any) => formatArg(arg.type, arg.value));
+
+        if (!scriptInfo || !scriptAbi) {
+          return reject("scriptInfo or scriptAbi is undefined");
+        }
+
+        const { bytecode } = scriptInfo;
+        const abi = Object.keys(scriptAbi).reduce<Record<string, any>>(
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          (initial, currentValue: AptosScriptAbiKeys) => {
+            initial[currentValue] = scriptAbi[currentValue].format
+              ? scriptAbi[currentValue].format?.(scriptAbi[currentValue].value)
+              : scriptAbi[currentValue].value;
+            return initial;
+          },
+          {}
+        );
+
+        const transaction = {
+          type: "script_payload",
+          code: { bytecode: bytecode.value, abi },
+          type_arguments: typeArgs,
+          arguments: normalArgs,
+        };
+
+        method?.(transaction)
+          .then(({ hash }) => resolve(hash))
           .catch((error) => {
             reject(error);
             toast({

src/components/EvmChainSelect.tsx

@@ -1,33 +1,88 @@
-import React, { useContext } from "react";
-import { Button, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuDivider,
+} from "@chakra-ui/react";
 import { ChevronDownIcon } from "@chakra-ui/icons";
-import { startCase } from "lodash";
 import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
-import { Context } from "../context/Context";
-import { EvmChain } from "../types/ChainTypes";
+import { supportedChains, bloctoSDK, useEthereum } from "../services/evm";
+
+const supportedMainnetChains = supportedChains.filter(
+  ({ environment }) => environment === "mainnet"
+);
+const supportedTestnetChains = supportedChains.filter(
+  ({ environment }) => environment === "testnet"
+);
 
 const EvmChainSelect: React.FC = ({}): ReactJSXElement => {
-  const { chain, switchChain } = useContext(Context);
+  const { chainId: currentChainId } = useEthereum();
+  const [chainName, setChainName] = useState(
+    supportedChains.find(({ chainId }) => chainId === currentChainId)?.name ||
+      "Ethereum Goerli"
+  );
+  useEffect(() => {
+    const chainName = supportedChains.find(
+      ({ chainId }) => chainId === currentChainId
+    )?.name;
+    if (chainName) {
+      setChainName(chainName);
+    }
+  }, [currentChainId]);
+
   return (
     <Menu>
-      <MenuButton as={Button} rightIcon={<ChevronDownIcon />} width="130px">
-        {startCase(chain)}
+      <MenuButton as={Button} rightIcon={<ChevronDownIcon />} width="200px">
+        {chainName}
       </MenuButton>
       <MenuList>
-        {Object.values(EvmChain).map((chain) => (
-          <MenuItem
-            key={chain}
-            pl={5}
-            color="gray.700"
-            onClick={() => {
-              if (switchChain) {
-                switchChain(chain);
-              }
-            }}
-          >
-            {startCase(chain)}
-          </MenuItem>
-        ))}
+        <MenuGroup title="Testnet">
+          {supportedTestnetChains.map(({ name, chainId }) => (
+            <MenuItem
+              key={chainId}
+              pl={5}
+              color="gray.700"
+              onClick={() => {
+                bloctoSDK.ethereum
+                  .request({
+                    method: "wallet_switchEthereumChain",
+                    params: [{ chainId }],
+                  })
+                  .then(() => {
+                    setChainName(name);
+                  });
+              }}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+        <MenuDivider />
+        <MenuGroup title="Mainnet">
+          {supportedMainnetChains.map(({ name, chainId }) => (
+            <MenuItem
+              key={chainId}
+              pl={5}
+              color="gray.700"
+              onClick={() => {
+                bloctoSDK.ethereum
+                  .request({
+                    method: "wallet_switchEthereumChain",
+                    params: [{ chainId }],
+                  })
+                  .then(() => {
+                    setChainName(name);
+                  });
+              }}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </MenuGroup>
       </MenuList>
     </Menu>
   );