bugfix: web3modal opening delay (#1008)

fix web3modal opening delay

ui/address/contract/ContractConnectWallet.tsx

@@ -8,13 +8,16 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 
 const ContractConnectWallet = () => {
-  const { open } = useWeb3Modal();
+  const { open, isOpen } = useWeb3Modal();
   const { address, isDisconnected } = useAccount();
   const { disconnect } = useDisconnect();
   const isMobile = useIsMobile();
+  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
 
-  const handleConnect = React.useCallback(() => {
-    open();
+  const handleConnect = React.useCallback(async() => {
+    setIsModalOpening(true);
+    await open();
+    setIsModalOpening(false);
   }, [ open ]);
 
   const handleDisconnect = React.useCallback(() => {
@@ -26,7 +29,16 @@ const ContractConnectWallet = () => {
       return (
         <>
           <span>Disconnected</span>
-          <Button ml={ 3 } onClick={ handleConnect } size="sm" variant="outline">Connect wallet</Button>
+          <Button
+            ml={ 3 }
+            onClick={ handleConnect }
+            size="sm"
+            variant="outline"
+            isLoading={ isModalOpening || isOpen }
+            loadingText="Connect wallet"
+          >
+              Connect wallet
+          </Button>
         </>
       );
     }

ui/shared/Web3ModalProvider.tsx

@@ -1,5 +1,6 @@
 import { useColorModeValue, useToken } from '@chakra-ui/react';
-import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
+import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
+import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
 import { Web3Modal } from '@web3modal/react';
 import React from 'react';
 import type { Chain } from 'wagmi';
@@ -41,7 +42,11 @@ const getConfig = () => {
     const chains = [ currentChain ];
 
     const { publicClient } = configureChains(chains, [
-      w3mProvider({ projectId: appConfig.walletConnect.projectId || '' }),
+      jsonRpcProvider({
+        rpc: () => ({
+          http: appConfig.network.rpcUrl || '',
+        }),
+      }),
     ]);
     const wagmiConfig = createConfig({
       autoConnect: true,