Release to prod

.github/workflows/create-asana-attachment.yaml

@@ -13,6 +13,8 @@ jobs:
         with:
           asana-secret: ${{ secrets.ASANA_SECRET }}
           allowed-projects: |
-            1201812548509877
+            1207145524635866
+            1207160002492686
+            1204161964711931
       - name: Log output status
-        run: echo "Status is ${{ steps.postAttachment.outputs.status }}"
+        run: echo "Status is ${{ steps.postAttachment.outputs.status }}"

.gitignore

@@ -22,4 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.env
+.env
+
+# IntelijIDEA
+.idea

Dockerfile.dev

@@ -0,0 +1,18 @@
+FROM node:16-alpine
+
+WORKDIR /app
+
+COPY package*.json yarn.lock ./ 
+RUN apk add --no-cache yarn
+
+RUN apk add --no-cache python3
+ENV PYTHON=/usr/bin/python3
+
+RUN apk add --no-cache make g++
+
+RUN yarn install
+COPY . ./
+
+EXPOSE 3001
+
+CMD ["yarn", "start"]

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@blocto/dappauth": "^2.1.0",
     "@blocto/fcl": "^1.0.0-alpha.1",
-    "@blocto/sdk": "^0.9.0-beta.3",
+    "@blocto/sdk": "^0.10.2",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.4",
     "@emotion/react": "^11",

src/components/EvmChainSelect.tsx

@@ -1,14 +1,5 @@
-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 React from "react";
+import { Select } from "@chakra-ui/react";
 import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
 import { supportedChains, bloctoSDK, useEthereum } from "../services/evm";
 
@@ -21,70 +12,31 @@ const supportedTestnetChains = supportedChains.filter(
 
 const EvmChainSelect: React.FC = ({}): ReactJSXElement => {
   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="200px">
-        {chainName}
-      </MenuButton>
-      <MenuList>
-        <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>
+    <Select
+      width="200px"
+      value={currentChainId || ""}
+      onChange={(e) => {
+        bloctoSDK.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: e.target.value }],
+        });
+      }}
+    >
+      <option disabled>Testnet</option>
+      {supportedTestnetChains.map(({ name, chainId }) => (
+        <option key={chainId} value={chainId}>
+          {name}
+        </option>
+      ))}
+      <option disabled>Mainnet</option>
+      {supportedMainnetChains.map(({ name, chainId }) => (
+        <option key={chainId} value={chainId}>
+          {name}
+        </option>
+      ))}
+    </Select>
   );
 };
 

src/components/EvmEditor.tsx

@@ -28,6 +28,7 @@ import EvmSignEditor from "./EvmEditors/EvmSignEditor";
 import EvmUserOpEditor from "./EvmEditors/EvmUserOpEditor";
 import EvmSendEditor from "./EvmEditors/EvmSendEditor";
 import EvmContractEditor from "./EvmEditors/EvmContractEditor";
+import EvmBatchTxEditor from "./EvmEditors/EvmBatchTxEditor";
 import type { EthereumTypes } from "@blocto/sdk";
 import { bloctoSDK, useEthereum, supportedChains, web3 } from "../services/evm";
 import ReactJson from "react-json-view";
@@ -233,6 +234,7 @@ const EvmEditor = (): ReactJSXElement => {
             <Tab>User Operation</Tab>
             <Tab>Send</Tab>
             <Tab>Contract</Tab>
+            <Tab>Batch Transaction</Tab>
           </TabList>
           <TabPanels>
             <TabPanel>
@@ -254,12 +256,7 @@ const EvmEditor = (): ReactJSXElement => {
             </TabPanel>
             <TabPanel>
               <EvmSendEditor
-                setRequestObject={(params = []) =>
-                  setRequestObject({
-                    method: "eth_sendTransaction",
-                    params,
-                  })
-                }
+                setRequestObject={setRequestObject}
                 account={account}
               />
             </TabPanel>
@@ -271,6 +268,13 @@ const EvmEditor = (): ReactJSXElement => {
                 chainId={chainId}
               />
             </TabPanel>
+            <TabPanel>
+              <EvmBatchTxEditor
+                setRequestObject={setRequestObject}
+                account={account}
+                chainId={chainId}
+              />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </Flex>

src/components/EvmEditors/EvmBatchTxEditor.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState, Dispatch, SetStateAction } from "react";
+import {
+  Box,
+  Text,
+  Grid,
+  Flex,
+  IconButton,
+  Radio,
+  RadioGroup,
+  Button,
+} from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
+import type { EthereumTypes } from "@blocto/sdk";
+import EvmTxForm from "./EvmTxForm";
+import { web3 } from "../../services/evm";
+import erc721Abi from "../../contracts/abi/ERC721.json";
+
+interface EvmBatchTxEditorProps {
+  setRequestObject: Dispatch<
+    SetStateAction<EthereumTypes.EIP1193RequestPayload | undefined>
+  >;
+  account: string | null;
+  chainId: string | null;
+}
+
+const RevertOptionMap: Record<string, any> = {
+  false: false,
+  true: true,
+  unset: undefined,
+};
+
+const EvmBatchTxEditor = ({
+  setRequestObject,
+  account,
+  chainId,
+}: EvmBatchTxEditorProps): ReactJSXElement => {
+  const [revert, setRevert] = useState<string>("false");
+  const [txs, setTxs] = useState<any[]>();
+
+  useEffect(() => {
+    if (account) {
+      setRequestObject({
+        method: "wallet_sendMultiCallTransaction",
+        params: [
+          txs,
+          ...(RevertOptionMap[revert] !== undefined
+            ? [RevertOptionMap[revert]]
+            : []),
+        ],
+      });
+    }
+  }, [account, setRequestObject, revert, txs]);
+
+  const addTransfer = () => {
+    const obj = {
+      value: "0x1",
+      to: "0x85fD692D2a075908079261F5E351e7fE0267dB02",
+      from: account,
+    };
+    setTxs((state) => {
+      return [...(state || []), obj];
+    });
+  };
+
+  const mintNFT = () => {
+    // TODO: wait backend provide all evm chain contract address
+    const contractAddr = "0x6bDa27BB78833658D19049118b73eC7b07815C8A"; // only scroll testnet
+    const contract = new web3.eth.Contract(erc721Abi as any, contractAddr);
+    const obj = {
+      from: account,
+      to: contractAddr,
+      data: contract.methods.mint(account).encodeABI(),
+    };
+    setTxs((state) => {
+      return [...(state || []), obj];
+    });
+  };
+
+  const SwapToken = () => {
+    const obj = {
+      from: account,
+      to: "0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD",
+      data: "0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000066053af000000000000000000000000000000000000000000000000000000000000000020b000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000038d7ea4c680000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000038d7ea4c680000000000000000000000000000000000000000000000000000000b99e289c676500000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002bfff9976782d46cc05630d1f6ebab18b2324d6b140001f41f9840a85d5af5bf1d1762f925bdaddc4201f984000000000000000000000000000000000000000000",
+    };
+    setTxs((state) => {
+      return [...(state || []), obj];
+    });
+  };
+
+  const removeTransfer = (index: number) => {
+    setTxs((state) => {
+      if (Array.isArray(state) && state.length === 1) {
+        return [];
+      }
+      const newParam = [...(state || [])];
+      return newParam.splice(index, 1);
+    });
+  };
+  return (
+    <>
+      <Grid templateRows="repeat(4, min-content)" gap="10px">
+        <Box fontWeight="bold">Revert</Box>
+        <RadioGroup
+          value={revert}
+          onChange={(e) => {
+            setRevert(e);
+          }}
+        >
+          <Flex gap="15px">
+            {Object.keys(RevertOptionMap).map((key) => (
+              <Radio key={key} value={key}>
+                {key}
+              </Radio>
+            ))}
+          </Flex>
+        </RadioGroup>
+
+        <Grid
+          alignItems="center"
+          gap="10px"
+          gridAutoFlow="column"
+          justifyContent="left"
+        >
+          <Box fontWeight="bold">Transaction</Box>
+          <Button w="110px" onClick={addTransfer}>
+            Transfer
+          </Button>
+          {chainId === "0x8274f" && (
+            <Button w="110px" onClick={mintNFT}>
+              Mint NFT
+            </Button>
+          )}
+          {chainId === "0xaa36a7" && (
+            <Button w="110px" onClick={SwapToken}>
+              Swap
+            </Button>
+          )}
+        </Grid>
+        <Flex flexDir="column" mt={2} pl={4}>
+          {Array.isArray(txs) &&
+            txs?.length > 0 &&
+            txs?.map((value, i: number) => (
+              <Box key={i}>
+                <Flex alignItems="center">
+                  <Text fontWeight="bold" mb={2}>
+                    Transaction {i + 1}
+                  </Text>
+                  <IconButton
+                    ml={2}
+                    aria-label="Delete Arg"
+                    isRound
+                    icon={<CloseIcon />}
+                    size="xs"
+                    colorScheme="red"
+                    onClick={() => removeTransfer(i)}
+                  />
+                </Flex>
+                <Flex my="5px" alignItems="center">
+                  <EvmTxForm
+                    key={i}
+                    setTransactionObject={(updatedTxs) => {
+                      if (updatedTxs)
+                        setTxs((prev) => {
+                          const newTxs = [...(prev || [])];
+                          newTxs[i] = updatedTxs[0];
+                          return newTxs;
+                        });
+                    }}
+                    isCustom={true}
+                    account={account}
+                    customParams={value}
+                  />
+                </Flex>
+              </Box>
+            ))}
+        </Flex>
+      </Grid>
+    </>
+  );
+};
+
+export default EvmBatchTxEditor;