Merge pull request #3 from decooio/support_arbitrum

Support arbitrum one

components/mint/MintStep1.tsx

@@ -5,6 +5,7 @@ import { formatW3BucketCapacity } from "@lib/utils";
 import classNames from "classnames";
 import React, { useEffect, useMemo } from "react";
 import { OnNext } from "./type";
+import { useNetwork } from "wagmi";
 
 export interface MintStep1Props {
   editions: BucketEdition[];
@@ -17,10 +18,12 @@ function fmtPrices(prices: BucketEdition["prices"]) {
 
 export const MintStep1 = React.memo((p: MintStep1Props) => {
   const { editions, onNext } = p;
+  const { chain } = useNetwork();
+  const chainId = chain && chain.id;
   const [mintData, updateMint] = useMintData();
   useEffect(() => {
     if (mintData.editionId === undefined && editions.length) {
-      updateMint({ editionId: editions[0].id, price: editions[0].prices[0] });
+      updateMint({ chainId: chainId, editionId: editions[0].id, price: editions[0].prices[0] });
     }
   }, [mintData, updateMint, editions]);
   const currentEditionId = mintData.editionId;
@@ -58,7 +61,7 @@ export const MintStep1 = React.memo((p: MintStep1Props) => {
                 }
               )}
               onClick={() => {
-                updateMint({ editionId: item.id, price: item.prices[0] });
+                updateMint({ chainId: chainId, editionId: item.id, price: item.prices[0] });
               }}
             />
             <span className=" whitespace-nowrap text-sm mt-2 font-light">{`${fmtPrices(

components/mint/MintStep2.tsx

@@ -298,7 +298,12 @@ export const MintStep2 = React.memo((p: MintStep2Props) => {
             axios
               .post<Res<GenIPNS>>(
                 genUrl("/auth/ipns/gen"),
-                { editionId: "" + mintData.editionId },
+                {
+                  bucketInfo: JSON.stringify({
+                    chainId: mintData.chainId,
+                    editionId: mintData.editionId 
+                  })
+                },
                 {
                   headers: { Authorization: `Bearer ${auth}` },
                 }

components/mint/MintStep3.tsx

@@ -20,7 +20,7 @@ import classNames from "classnames";
 import { ContractTransaction, ethers } from "ethers";
 import React, { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
-import { erc20ABI, useAccount, useSigner } from "wagmi";
+import { erc20ABI, useAccount, useNetwork, useSigner } from "wagmi";
 import { getContract } from "wagmi/actions";
 import { OnNext } from "./type";
 
@@ -53,6 +53,8 @@ export interface MintStep3Props {
 
 export const MintStep3 = React.memo((p: MintStep3Props) => {
   const { editions, onNext } = p;
+  const { chain } = useNetwork();
+  const chainId = chain && chain.id;
   const [mintData, updateMint] = useMintData();
   const currentEditionId = mintData.editionId;
   const currentEdition = useMemo(
@@ -201,14 +203,14 @@ export const MintStep3 = React.memo((p: MintStep3Props) => {
             data={[
               "W3Bucket NFT Token ID",
               mintData.tokenId,
-              bucketEtherscanUrl(mintData.tokenId),
+              bucketEtherscanUrl(chainId, mintData.tokenId),
             ]}
           />
           <TulpeText
             data={[
               "Mint TX ID",
               shortStr(mintData.mintTx, 9, 5),
-              etherscanTx(mintData.mintTx),
+              etherscanTx(chainId, mintData.mintTx),
             ]}
           />
           <TulpeText target="_self" data={["W3Bucket Identifier", bucketId, `/#/bucket/${bucketId}/${mintData.ipns}`]} />

components/modals/ConnectWallet.tsx

@@ -1,9 +1,12 @@
 import { IconMetaMask } from "@components/common/icons";
-import { SupportChain } from "@lib/config";
+import { SupportChain, SupportId2Chain } from "@lib/config";
 import { useOn } from "@lib/hooks/tools";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useConnect, useSwitchNetwork } from "wagmi";
+import { ethers } from "ethers";
+import detectEthereumProvider from "@metamask/detect-provider";
+import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
 import { Modal, ModalHead } from "./Modal";
 
 export const ConnectWallet = React.memo((p: { onClose: () => void }) => {
@@ -13,14 +16,29 @@ export const ConnectWallet = React.memo((p: { onClose: () => void }) => {
   const push = useNavigate()
   const onConnect = useOn(async () => {
     try {
+      const chainId = await (async () => {
+        const provider: any = await detectEthereumProvider();
+        if (provider && provider.isMetaMask) {
+          await provider.request({ method: "eth_requestAccounts" });
+          const web3Provider = new ethers.providers.Web3Provider(provider);
+          const signer = web3Provider.getSigner();
+          const id = await signer.getChainId();
+          if (SupportId2Chain.has(id)) return id;
+        }
+        console.warn(`Cannot get chainId from provider or unsupported chain, use ${SupportChain[0].id}`);
+        return SupportChain[0].id;
+      })();
+      const connector = new MetaMaskConnector({
+        chains: [SupportId2Chain.get(chainId)]
+      })
       console.info("data:", data);
       console.info("cts:", connectors);
       if ((!data || data.chain.unsupported) && switchNetworkAsync) {
-        await switchNetworkAsync(SupportChain[0].id);
+        await switchNetworkAsync(chainId);
       } else {
         await connectAsync({
-          chainId: SupportChain[0].id,
-          connector: connectors[0],
+          chainId: chainId,
+          connector: connector,
         });
       }
       push('/buckets')

components/pages/main/Buckets.tsx

@@ -18,12 +18,13 @@ import moment from "moment";
 import React, { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAsync } from "react-use";
-import { useAccount } from "wagmi";
+import { useAccount, useNetwork } from "wagmi";
 import { MainLayout } from "./MainLayout";
 import classnames from "classnames";
 
 const BucketCard = React.memo((p: { data: BucketDTO,className?:string }) => {
   const { data,className } = p;
+  const { chain } = useNetwork();
   const push = useNavigate();
   const capacityInGb = useMemo(
     () => data.maxStorageSize / 1024 / 1024 / 1024,
@@ -72,7 +73,7 @@ const BucketCard = React.memo((p: { data: BucketDTO,className?:string }) => {
         <a
           className=" text-blue-3"
           target="_blank"
-          href={etherscanAddress(W3Bucket_Adress)}
+          href={etherscanAddress(chain.id, W3Bucket_Adress)}
         >
           View NFT Contract
         </a>

components/pages/main/MainLayout.tsx

@@ -39,7 +39,6 @@ export const MainLayout = React.memo(
     const { menuId, children, ...props } = p;
     const { address: account } = useAccount();
     const { chain } = useNetwork();
-    const chainId = chain && chain.id;
     const isConnected = useConnected();
     const menus: Menu[] = useMemo(() => {
       return [
@@ -82,10 +81,10 @@ export const MainLayout = React.memo(
                 <div
                   className={classNames(
                     " ml-4 text-xs px-[0.39rem] py-[0.13rem] mb-[-0.42rem] text-white",
-                    chainId === 1 ? "bg-blue-2" : "bg-gray-11"
+                    IS_DEV || IS_TEST ? "bg-gray-11" : "bg-blue-2"
                   )}
                 >
-                  {chainId === 1 ? "Mainnet" : "Goerli"}
+                  {chain.name.replace(' ', '')}
                 </div>
               )}
             </div>