feat: multi chain support (#42)

* feat: add coinbase wallet and baseGoerli network support

* add faucet

* update contract address

* hide non-american while in base network

* change base contract address

* update contract address

---------

Co-authored-by: alpers <[email protected]>

packages/app-config/src/abi/index.ts

@@ -1,4 +1,6 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './zCloakSBT';
+export * from './op-sbt';
+export * from './base-sbt';
+export * from './utils';

packages/app-config/src/abi/zCloakSBT.ts → packages/app-config/src/abi/op-sbt.ts

@@ -1,7 +1,7 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export const zCloakSBTAbi = [
+export const opSbtAbi = [
   {
     inputs: [{ internalType: 'address[]', name: '_trustedVerifiers', type: 'address[]' }],
     stateMutability: 'nonpayable',

packages/app-config/src/abi/utils.ts

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { baseGoerli, optimismGoerli } from '@credential/react-components';
+
+import { baseSbtAbi } from './base-sbt';
+import { opSbtAbi } from './op-sbt';
+
+export function getAbi(chainId?: number) {
+  switch (chainId) {
+    case optimismGoerli.id:
+      return opSbtAbi;
+    case baseGoerli.id:
+      return baseSbtAbi;
+    default:
+      return undefined;
+  }
+}

packages/app-config/src/contract.ts

@@ -1,14 +1,33 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { optimismGoerli } from '@credential/react-components';
+import { HexString } from '@zcloak/crypto/types';
+
+import { baseGoerli, optimismGoerli } from '@credential/react-components';
 
 import { isRelease } from './isRelease';
 
+interface CONTRACT_CONFIG {
+  [key: number]: HexString;
+}
+
 export const ZKSBT_ADDRESS = isRelease
   ? '0x08f1a8Eeb39E861FcC78812fd1C79291cd3f88A7'
   : '0x1addc21e939b93e9337f8A663F62a64583b62233';
 
+const optimismGoerliConfig = isRelease
+  ? '0x08f1a8Eeb39E861FcC78812fd1C79291cd3f88A7'
+  : '0x1addc21e939b93e9337f8A663F62a64583b62233';
+
+const baseGoerliConfig = isRelease
+  ? '0x1F042d47ddFd675A47F0aB2b99bea4Bb1d078032'
+  : '0x1603bAdff8e39749D8f33dbDd234C5dab10313Dd';
+
+export const CONTRACTS_CONFIG: CONTRACT_CONFIG = {
+  [optimismGoerli.id]: optimismGoerliConfig,
+  [baseGoerli.id]: baseGoerliConfig
+};
+
 export const ZKSBT_CHAIN_ID = isRelease ? optimismGoerli.id : optimismGoerli.id;
 export const VERIFIER_ADDRESS = '0xC2BADDbf6DCeDA9b68638a9de84063c1E0ee4350';
 
@@ -17,4 +36,7 @@ export const ZKSBT_CTYPE = isRelease
   : '0x0faa3462b6d45be3ce01dc570d8465035f68f516610b267a7b01d9b895d04351';
 
 export const ETHERSCAN_URL = 'https://goerli-optimism.etherscan.io/tx';
+export const BASESCAN_URL = 'https://goerli.basescan.org/tx/';
+
+export const ZONIC_URL = 'https://testnet.zonic.app/profile/';
 export const OPENSEA_URL = 'https://testnets.opensea.io';

packages/app-config/src/icons/IconCoinbase.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import IconCoinbaseSvg from '../assets/icon_coinbase.svg';
+
+function IconCoinbase(props: SvgIconProps) {
+  return <SvgIcon component={IconCoinbaseSvg} fontSize='inherit' viewBox='0 0 24 24' {...props} />;
+}
+
+export default React.memo(IconCoinbase);

packages/app-config/src/icons/IconNetwork.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import IconNetworkSvg from '../assets/icon_network.svg';
+
+function IconNetwork(props: SvgIconProps) {
+  return <SvgIcon component={IconNetworkSvg} fontSize='inherit' viewBox='0 0 18 18' {...props} />;
+}
+
+export default React.memo(IconNetwork);

packages/app-config/src/icons/IconTestnet.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import IconTestnetSvg from '../assets/icon_testnet.svg';
+
+function IconTestnet(props: SvgIconProps) {
+  return <SvgIcon component={IconTestnetSvg} fontSize='inherit' viewBox='0 0 20 20' {...props} />;
+}
+
+export default React.memo(IconTestnet);

packages/app-config/src/icons/LogoMetamask.tsx

@@ -0,0 +1,18 @@
+// Copyright 2021-2023 zcloak authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// generate by buildAssets.js
+
+import type { SvgIconProps } from '@mui/material';
+
+import React from 'react';
+
+import { SvgIcon } from '@credential/react-components';
+
+import LogoMetamaskSvg from '../assets/logo_metamask.svg';
+
+function LogoMetamask(props: SvgIconProps) {
+  return <SvgIcon component={LogoMetamaskSvg} fontSize='inherit' viewBox='0 0 18.739 17.352' {...props} />;
+}
+
+export default React.memo(LogoMetamask);

packages/app-config/src/icons/index.tsx

@@ -9,6 +9,7 @@ export { default as IconAttester } from './IconAttester';
 export { default as IconCard } from './IconCard';
 export { default as IconChaintool } from './IconChaintool';
 export { default as IconClaimer } from './IconClaimer';
+export { default as IconCoinbase } from './IconCoinbase';
 export { default as IconCopy } from './IconCopy';
 export { default as IconCorwn } from './IconCorwn';
 export { default as IconCreate } from './IconCreate';
@@ -33,6 +34,7 @@ export { default as IconLogoZkid } from './IconLogoZkid';
 export { default as IconLogout } from './IconLogout';
 export { default as IconMessage } from './IconMessage';
 export { default as IconMyctype } from './IconMyctype';
+export { default as IconNetwork } from './IconNetwork';
 export { default as IconNewMessage } from './IconNewMessage';
 export { default as IconNewTask } from './IconNewTask';
 export { default as IconOpensea } from './IconOpensea';
@@ -45,6 +47,8 @@ export { default as IconSlider } from './IconSlider';
 export { default as IconStar } from './IconStar';
 export { default as IconSuccess } from './IconSuccess';
 export { default as IconTask } from './IconTask';
+export { default as IconTestnet } from './IconTestnet';
 export { default as IconTips } from './IconTips';
 export { default as IconTwitter } from './IconTwitter';
 export { default as IconZkid } from './IconZkid';
+export { default as LogoMetamask } from './LogoMetamask';

packages/app-config/src/zk/chaintool.ts

@@ -894,8 +894,7 @@ begin
     outputs: [
       ['American', 'American'],
       ['Non-American', 'Non-American']
-    ],
-    getPublicInput
+    ]
   }
 ];
 

packages/page-did/src/eth-bind/Step1.tsx

@@ -1,25 +1,21 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback } from 'react';
+import { useCallback, useContext } from 'react';
 
-import { ZKSBT_CHAIN_ID } from '@credential/app-config';
-import { ButtonEnableMetamask, Stack, Typography, useNetwork, useSwitchNetwork } from '@credential/react-components';
+import { ConnectWallet, NotificationContext, Stack, Typography, useNetwork } from '@credential/react-components';
 
 const Step1: React.FC<{ next: () => void }> = ({ next }) => {
-  const { chain } = useNetwork();
-  const { switchNetworkAsync } = useSwitchNetwork();
-  const changeNetwork = useCallback(async () => {
-    if (chain?.id !== ZKSBT_CHAIN_ID) {
-      try {
-        switchNetworkAsync && (await switchNetworkAsync(ZKSBT_CHAIN_ID));
+  const { chain, chains } = useNetwork();
+  const { notifyError } = useContext(NotificationContext);
 
-        next();
-      } catch (error) {}
-    } else {
+  const changeNetwork = useCallback(() => {
+    if (chains.filter((_c) => _c.id === chain?.id).length) {
       next();
+    } else {
+      notifyError(new Error("Your wallet's current network is unsupported."));
     }
-  }, [switchNetworkAsync, chain, next]);
+  }, [chains, chain, next, notifyError]);
 
   return (
     <Stack mt={5} spacing={6}>
@@ -32,15 +28,9 @@ const Step1: React.FC<{ next: () => void }> = ({ next }) => {
       >
         Connect with your Ethereum address
       </Typography>
-      <ButtonEnableMetamask
-        disabled={!switchNetworkAsync}
-        onClick={changeNetwork}
-        onEnable={next}
-        size='large'
-        variant='contained'
-      >
+      <ConnectWallet onClick={changeNetwork} onEnable={next} size='large' variant='contained'>
         Connect Wallet
-      </ButtonEnableMetamask>
+      </ConnectWallet>
     </Stack>
   );
 };

packages/page-did/src/eth-bind/Step4.tsx

@@ -5,9 +5,9 @@ import { useCallback, useContext, useState } from 'react';
 
 import { HexString } from '@zcloak/crypto/types';
 
-import { zCloakSBTAbi, ZKSBT_ADDRESS, ZKSBT_CHAIN_ID } from '@credential/app-config';
-import { ButtonEnableMetamask, useAccount, useContractWrite } from '@credential/react-components';
+import { ConnectWallet, useAccount, useContractWrite, useNetwork } from '@credential/react-components';
 import { DidsContext } from '@credential/react-dids';
+import { useContractConfig } from '@credential/react-hooks';
 
 import SigItem from './SigItem';
 
@@ -19,13 +19,15 @@ const Step4: React.FC<{
 }> = ({ metaSig, onError, onPublish, zkSig }) => {
   const { did } = useContext(DidsContext);
   const { address } = useAccount();
+  const { chain } = useNetwork();
   const [loading, setLoading] = useState(false);
 
+  const { abi, toAddress } = useContractConfig(chain?.id);
+
   const { writeAsync } = useContractWrite({
-    abi: zCloakSBTAbi,
-    address: ZKSBT_ADDRESS,
+    abi,
+    address: toAddress,
     functionName: 'setBinding',
-    chainId: ZKSBT_CHAIN_ID,
     onError
   });
 
@@ -48,9 +50,9 @@ const Step4: React.FC<{
     <>
       <SigItem label='zkID Sig:' mb={2} mt={4} value={zkSig} />
       <SigItem label='Ethereum Address Sig:' mb={4} value={metaSig} />
-      <ButtonEnableMetamask fullWidth loading={loading} onClick={bind} size='large' variant='contained'>
+      <ConnectWallet fullWidth loading={loading} onClick={bind} size='large' variant='contained'>
         Publish
-      </ButtonEnableMetamask>
+      </ConnectWallet>
     </>
   );
 };