wallet connect

package.json

@@ -40,6 +40,8 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
+    "@web3modal/ethereum": "^2.0.0-rc.2",
+    "@web3modal/react": "^2.0.0-rc.2",
     "ace-builds": "^1.14.0",
     "bignumber.js": "^9.1.0",
     "d3": "^7.6.1",
@@ -64,7 +66,8 @@
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",
     "react-scroll": "^1.8.7",
-    "use-font-face-observer": "^1.2.1"
+    "use-font-face-observer": "^1.2.1",
+    "wagmi": "^0.10.6"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "^1.28.0",

pages/_app.tsx

 import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import {
+  EthereumClient,
+  modalConnectors,
+  walletConnectProvider,
+} from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/react';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
+import type { Chain } from 'wagmi';
+import { configureChains, createClient, WagmiConfig } from 'wagmi';
 
 import appConfig from 'configs/app/config';
 import type { ResourceError } from 'lib/api/resources';
@@ -15,6 +23,39 @@ import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
+export const poa: Chain = {
+  id: 99,
+  name: 'POA',
+  network: 'poa',
+  nativeCurrency: {
+    decimals: 18,
+    name: 'POA',
+    symbol: 'POA',
+  },
+  rpcUrls: {
+    'default': { http: [ 'https://core.poa.network' ] },
+  },
+  blockExplorers: {
+    'default': { name: 'Blockscout', url: 'https://blockscout.com/poa/core' },
+  },
+};
+
+const chains = [ poa ];
+
+const PROJECT_ID = 'b4ed81be141093911032944632465175';
+// Wagmi client
+const { provider } = configureChains(chains, [
+  walletConnectProvider({ projectId: PROJECT_ID }),
+]);
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors: modalConnectors({ appName: 'web3Modal', chains }),
+  provider,
+});
+
+// Web3Modal Ethereum Client
+const ethereumClient = new EthereumClient(wagmiClient, chains);
+
 function MyApp({ Component, pageProps }: AppProps) {
   useConfigSentry();
   const [ queryClient ] = useState(() => new QueryClient({
@@ -61,7 +102,14 @@ function MyApp({ Component, pageProps }: AppProps) {
           <QueryClientProvider client={ queryClient }>
             <ScrollDirectionProvider>
               <SocketProvider url={ `${ appConfig.api.socket }${ appConfig.api.basePath }/socket/v2` }>
-                <Component { ...pageProps }/>
+                <WagmiConfig client={ wagmiClient }>
+                  <Component { ...pageProps }/>
+                </WagmiConfig>
+                <Web3Modal
+                  projectId={ PROJECT_ID }
+                  ethereumClient={ ethereumClient }
+                  themeZIndex={ 1200 }
+                />
               </SocketProvider>
             </ScrollDirectionProvider>
             <ReactQueryDevtools/>

ui/address/contract/ContractConnectWallet.tsx

+import { Alert, chakra, Link } from '@chakra-ui/react';
+import { useWeb3Modal } from '@web3modal/react';
+import React from 'react';
+import { useAccount, useDisconnect } from 'wagmi';
+
+import AddressIcon from 'ui/shared/address/AddressIcon';
+
+const ContractConnectWallet = () => {
+  const { isOpen, open } = useWeb3Modal();
+  const { address, isDisconnected } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const handleConnect = React.useCallback(() => {
+    open();
+  }, [ open ]);
+
+  const handleDisconnect = React.useCallback(() => {
+    disconnect();
+  }, [ disconnect ]);
+
+  const content = (() => {
+    if (isOpen) {
+      return <span>connecting...</span>;
+    }
+
+    if (isDisconnected || !address) {
+      return (
+        <>
+          <span>Disconnected.</span>
+          <Link ml={ 1 } onClick={ handleConnect }>Connect wallet</Link>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <span>Connected to </span>
+        <AddressIcon address={{ hash: address, is_contract: false }} mx={ 2 }/>
+        <chakra.span fontWeight={ 600 }>{ address }</chakra.span>
+        <Link ml={ 2 } onClick={ handleDisconnect }>Disconnect</Link>
+      </>
+    );
+  })();
+
+  return <Alert mb={ 6 } status={ address ? 'success' : 'warning' }>{ content }</Alert>;
+};
+
+export default ContractConnectWallet;

ui/address/contract/ContractWrite.tsx

@@ -9,6 +9,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import { useContractContext } from './context';
+import ContractConnectWallet from './ContractConnectWallet';
 import ContractMethodCallable from './ContractMethodCallable';
 
 interface Props {
@@ -68,7 +69,12 @@ const ContractWrite = ({ isProxy }: Props) => {
     return <ContentLoader/>;
   }
 
-  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+  return (
+    <>
+      <ContractConnectWallet/>
+      <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>
+    </>
+  );
 };
 
 export default ContractWrite;

ui/shared/address/AddressIcon.tsx

@@ -7,7 +7,7 @@ import type { AddressParam } from 'types/api/addressParams';
 import AddressContractIcon from 'ui/shared/address/AddressContractIcon';
 
 type Props = {
-  address: AddressParam;
+  address: Pick<AddressParam, 'hash' | 'is_contract'>;
   className?: string;
 }