add walletconnect support

package.json

@@ -37,7 +37,7 @@
     "react-useportal": "^1.0.14",
     "styled-components": "^5.3.1",
     "use-nft": "^0.10.1",
-    "use-wallet": "^0.12.3"
+    "use-wallet": "^0.13.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

src/components/WalletModal.tsx

@@ -42,7 +42,6 @@ const ConnectedWalletInfoHeading = styled.h4`
 
 const WalletProviderIcon = styled.img`
   width: 24px;
-  height: 24px;
 `;
 
 const DisconnectWalletButton = styled(Button)`
@@ -98,9 +97,7 @@ export default ({ isOpen, close }: Props) => {
       setIsChangingWallets(false);
     }
 
-    if (!isOpen) {
-      setHasError(false);
-    }
+    setHasError(false);
   }, [isOpen]);
 
   useEffect(() => {

src/constants/networks.ts

@@ -0,0 +1,10 @@
+export const SUPPORTED_NETWORKS = {
+  mainnet: 1,
+  matic: 137,
+  fantom: 250,
+  arbitrum: 42161,
+  ropsten: 3,
+  rinkeby: 4,
+  goerli: 5,
+  mumbai: 80001,
+};

src/constants/rpc.ts

@@ -1,12 +1,28 @@
-if (!import.meta.env.REACT_APP_ETHEREUM_RPC_URL) {
-  throw new Error('must set REACT_APP_ETHEREUM_RPC_URL environment variable');
-}
-
-if (!import.meta.env.REACT_APP_RINKEBY_RPC_URL) {
-  throw new Error('must set REACT_APP_RINKEBY_RPC_URL environment variable');
-}
+import { SUPPORTED_NETWORKS } from './networks';
 
 export const RPC_URLS: Record<string, string> = {
-  1: String(import.meta.env.REACT_APP_ETHEREUM_RPC_URL ?? ''),
-  4: String(import.meta.env.REACT_APP_RINKEBY_RPC_URL ?? ''),
+  [SUPPORTED_NETWORKS.mainnet]: String(
+    import.meta.env.REACT_APP_ETHEREUM_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.matic]: String(
+    import.meta.env.REACT_APP_POLYGON_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.fantom]: String(
+    import.meta.env.REACT_APP_FANTOM_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.arbitrum]: String(
+    import.meta.env.REACT_APP_ARBITRUM_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.rinkeby]: String(
+    import.meta.env.REACT_APP_RINKEBY_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.ropsten]: String(
+    import.meta.env.REACT_APP_ROPSTEN_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.goerli]: String(
+    import.meta.env.REACT_APP_GOERLI_RPC_URL ?? ''
+  ),
+  [SUPPORTED_NETWORKS.mumbai]: String(
+    import.meta.env.REACT_APP_MUMBAI_RPC_URL ?? ''
+  ),
 };

src/constants/wallets.ts

@@ -1,4 +1,5 @@
 import metaMaskIconUrl from '../assets/images/metamask.png';
+import walletConnectIconUrl from '../assets/images/walletconnect.png';
 
 interface WalletInfo {
   name: string;
@@ -14,4 +15,10 @@ export const SUPPORTED_WALLETS: Record<string, WalletInfo> = {
     iconURL: metaMaskIconUrl,
     description: 'Easy-to-use browser extension.',
   },
+  walletconnect: {
+    name: 'WalletConnect',
+    connector: 'walletconnect',
+    iconURL: walletConnectIconUrl,
+    description: 'Connect to wallets with QR code scanning or deep linking.',
+  },
 };

src/index.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
 import App from './App';
+import './polyfills';
 
 render(
   <StrictMode>

src/polyfills.ts

@@ -0,0 +1,9 @@
+import { Buffer } from 'buffer';
+
+if (window.global === undefined) {
+  window.global = window;
+}
+
+if (window.Buffer === undefined) {
+  window.Buffer = Buffer;
+}

src/providers/WalletProvider.tsx

@@ -1,9 +1,18 @@
 import { UseWalletProvider } from 'use-wallet';
+import { RPC_URLS } from '../constants/rpc';
 
 interface Props {
   children: React.ReactNode;
 }
 
 export default ({ children }: Props) => (
-  <UseWalletProvider>{children}</UseWalletProvider>
+  <UseWalletProvider
+    connectors={{
+      walletconnect: {
+        rpc: RPC_URLS,
+      },
+    }}
+  >
+    {children}
+  </UseWalletProvider>
 );

vite.config.ts

@@ -8,5 +8,11 @@ export default defineConfig({
     outDir: './build',
     sourcemap: true,
     manifest: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  define: {
+    'process.env': {},
   },
 });

yarn.lock

@@ -9796,10 +9796,10 @@ use-ssr@^1.0.22:
   resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.24.tgz#213a3df58f5ab9268e6fe1a57ad0a9de91e514d1"
   integrity sha512-0MFps7ezL57/3o0yl4CvrHLlp9z20n1rQZV/lSRz7if+TUoM6POU1XdOvEjIgjgKeIhTEye1U0khrIYWCTWw4g==
 
-use-wallet@^0.12.3:
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/use-wallet/-/use-wallet-0.12.3.tgz#7f5fda322414be30283255207ae4a75f7b4509f0"
-  integrity sha512-36Z4gXv8SmiJNEmkAJmSWi0HneYYBQP39RQDgQUxvm9OJmq+KPait+8NiJgLCkkxScrdDme8vCZ3OKyynVDZOA==
+use-wallet@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/use-wallet/-/use-wallet-0.13.1.tgz#5239d5163c235681c0440557ceb238290bc2e757"
+  integrity sha512-BMjKTOSIdhH/ouPTwNoVIWMIdLHK8rPdn8ERcqpV6ZcUvXni8eC2pvD2Ntk3ym6WPEmCI/xrv9hX849ak+aHug==
   dependencies:
     "@aragon/provided-connector" "^6.0.8"
     "@typescript-eslint/parser" "^4.1.0"