Feat: support more wallets using reown

packages/app/package.json

@@ -27,13 +27,16 @@
     "@react-native-async-storage/async-storage": "^1.18.2",
     "@react-native-firebase/analytics": "16.7.0",
     "@react-native-firebase/app": "16.7.0",
+    "@reown/appkit": "^1.6.7",
+    "@reown/appkit-adapter-wagmi": "^1.6.7",
+    "@reown/appkit-wagmi-react-native": "^1.2.1",
     "@superfluid-finance/sdk-core": "^0.3.2",
+    "@tanstack/react-query": "^5.66.0",
     "@uniswap/router-sdk": "^1.9.3",
     "@uniswap/sdk-core": "^5.3.1",
     "@uniswap/smart-order-router": "^3.35.12",
     "@uniswap/v3-sdk": "^3.13.1",
     "@usedapp/core": "^1.2.10",
-    "@wagmi/core": "^1.4.5",
     "@walletconnect/modal-react-native": "^1.0.0-rc.9",
     "@web3-onboard/react": "^2.8.10",
     "@web3modal/ethereum": "^2.7.1",
@@ -72,8 +75,8 @@
     "react-router-dom": "^6.14.1",
     "react-router-native": "^6.14.1",
     "realm-web": "^2.0.0",
-    "viem": "^1.10.8",
-    "wagmi": "^1.4.5"
+    "viem": "^2.23.2",
+    "wagmi": "^2.14.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/app/src/App.tsx

@@ -14,55 +14,41 @@ import * as Routing from './routes/routing';
 import ActivityLogPage from './pages/ActivityLogPage';
 import { Providers } from './Providers';
 import DonatePage from './pages/DonatePage';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
-import { celo, mainnet } from 'wagmi/chains';
-import { publicProvider } from 'wagmi/providers/public';
-import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
+import { WagmiProvider } from 'wagmi';
+import { celo, mainnet, AppKitNetwork } from '@reown/appkit/networks'
 import { ApolloProvider } from '@apollo/client';
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createAppKit } from '@reown/appkit/react';
 import { Colors } from './utils/colors';
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 import { useCreateSubgraphApolloClient, useCreateMongoDbApolloClient } from './hooks/apollo';
 import { MongoDbApolloProvider } from './components/providers/MongoDbApolloProvider';
 
-function App(): JSX.Element {
-  const { publicClient, webSocketPublicClient } = configureChains(
-    [celo, mainnet],
-    [
-      publicProvider(),
-      jsonRpcProvider({
-        rpc: (chain) => {
-          if (chain.id === 42220) {
-            return {
-              http: 'https://rpc.ankr.com/celo',
-            };
-          }
-          return null;
-        },
-      }),
-    ]
-  );
+const queryClient = new QueryClient();
+const projectId = 'b1b7664bfba2f6ad5538aa7fa9a2404f'
+const metadata = {
+  name: 'GoodCollective',
+  description: 'GoodCollective is a platform for creating and supporting social good projects.',
+  url: 'https://www.gooddollar.org/',
+  icons: ['https://avatars.githubusercontent.com/u/179229932'],
+  redirect: {
+    native: 'YOUR_APP_SCHEME://',
+    universal: 'https://www.gooddollar.org/'
+  }
+}
 
-  const connectors = [
-    new MetaMaskConnector({
-      chains: [celo],
-    }),
-    new WalletConnectConnector({
-      chains: [celo],
-      options: {
-        projectId: 'f147afbc9ad50465eaedd3f56ad2ae87',
-      },
-    }),
-  ];
+const networks: [AppKitNetwork, AppKitNetwork] = [mainnet, celo];
+const wagmiAdapter = new WagmiAdapter({ networks, projectId })
 
-  const wagmiConfig = createConfig({
-    autoConnect: true,
-    connectors,
-    publicClient,
-    webSocketPublicClient,
-  });
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks,
+  projectId,
+  metadata,
+  defaultNetwork: celo,
+})
 
+function App(): JSX.Element {
   const subgraphApolloClient = useCreateSubgraphApolloClient();
   const mongoDbApolloClient = useCreateMongoDbApolloClient();
 
@@ -72,7 +58,8 @@ function App(): JSX.Element {
 
   return (
     <Providers>
-      <WagmiConfig config={wagmiConfig}>
+      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
         <ApolloProvider client={subgraphApolloClient}>
           <MongoDbApolloProvider client={mongoDbApolloClient}>
             <SafeAreaView style={styles.body}>
@@ -94,7 +81,8 @@ function App(): JSX.Element {
             </SafeAreaView>
           </MongoDbApolloProvider>
         </ApolloProvider>
-      </WagmiConfig>
+        </QueryClientProvider>
+      </WagmiProvider>
     </Providers>
   );
 }

packages/app/src/components/DonateComponent.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Image, View } from 'react-native';
 import { Box, HStack, Link, Text, useBreakpointValue, VStack } from 'native-base';
-import { useAccount, useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { useParams } from 'react-router-native';
 import Decimal from 'decimal.js';
-import { waitForTransaction } from '@wagmi/core';
+import { waitForTransactionReceipt } from '@wagmi/core';
+import { config } from './../config';
 import { TransactionReceipt } from 'viem';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
@@ -29,6 +30,7 @@ import FrequencySelector from './DonateFrequency';
 import NumberInput from './NumberInput';
 import { ApproveTokenImg, PhoneImg, StreamWarning, ThankYouImg } from '../assets';
 import { formatNumberWithCommas } from '../lib/formatFiatCurrency';
+type ConfigChainId = typeof config.chains[number]['id'];
 
 interface DonateComponentProps {
   collective: Collective;
@@ -167,7 +169,7 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
 
   const { isLargeDesktop } = useScreenSize();
   const { address } = useAccount();
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
 
   const [completeDonationModalVisible, setCompleteDonationModalVisible] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
@@ -319,8 +321,8 @@ const DonateComponent = ({ collective }: DonateComponentProps) => {
         }
         let txReceipt: TransactionReceipt | undefined;
         try {
-          txReceipt = await waitForTransaction({
-            chainId: chain?.id,
+          txReceipt = await waitForTransactionReceipt(config, {
+            chainId: chain?.id as ConfigChainId,
             confirmations: 1,
             hash: txHash,
             timeout: 1000 * 60 * 5,

packages/app/src/components/Header/ConnectWalletMenu.native.tsx

@@ -0,0 +1,25 @@
+import '@walletconnect/react-native-compat';  
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { AppKitButton } from '@reown/appkit-wagmi-react-native'
+
+export const ConnectWalletMenu = () => {
+  return (
+    <>
+      <TouchableOpacity>
+        <View style={styles.mobileButtonContentContainer}>
+        <AppKitButton />
+        </View>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  mobileButtonContentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    justifyContent: 'center',
+    width: '100%',
+  },
+});

packages/app/src/components/Header/ConnectWalletMenu.tsx

@@ -1,98 +1,25 @@
-import { useState } from 'react';
-import { Image, StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'react-native';
-import { useConnect } from 'wagmi';
-
-import { Colors } from '../../utils/colors';
-import { RotatingArrowIcon } from './RotatingArrowIcon';
-import { MetaMaskLogo, WalletConnectLogo, WalletConnectLogoWhite, WebIcon } from '../../assets';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useScreenSize } from '../../theme/hooks';
-
-const supportedConnectors = {
-  metaMask: 'MetaMask',
-  walletConnect: 'WalletConnect',
-};
-
 interface ConnectWalletMenuProps {
   dropdownOffset: { top: number; right?: number; left?: number };
 }
 
 export const ConnectWalletMenu = (props: ConnectWalletMenuProps) => {
   const { isDesktopView } = useScreenSize();
-  const { dropdownOffset } = props;
-  const { connect, connectors, isLoading, pendingConnector } = useConnect();
-
-  const [openDropdown, setOpenDropdown] = useState<boolean>(false);
-
-  function connectorLogo(name: string) {
-    switch (name) {
-      case supportedConnectors.metaMask:
-        return MetaMaskLogo;
-      case supportedConnectors.walletConnect:
-        return WalletConnectLogo;
-      default:
-        return WebIcon;
-    }
-  }
-
-  const onClickConnectWallet = () => {
-    if (isDesktopView) {
-      setOpenDropdown(!openDropdown);
-    } else {
-      const connector = connectors.find((conn) => conn.name === supportedConnectors.walletConnect);
-      if (connector && connector.ready) {
-        connect({ connector });
-      }
-    }
-  };
-
   return (
     <>
-      <TouchableOpacity style={styles.walletConnectButton} onPress={onClickConnectWallet}>
-        <View style={isDesktopView ? {} : styles.mobileButtonContentContainer}>
-          {!isDesktopView && (
-            <Image source={WalletConnectLogoWhite} resizeMode="contain" style={[styles.walletConnectorLogo]} />
-          )}
-          <Text style={styles.walletConnectButtonText}>Connect Wallet</Text>
-        </View>
-        {isDesktopView && <RotatingArrowIcon openDropdown={openDropdown} />}
+      <TouchableOpacity style={styles.walletConnectButton}>
+        <appkit-button />
+        {isDesktopView}
       </TouchableOpacity>
-      {openDropdown && (
-        <View style={[styles.dropdownContainer, dropdownOffset]}>
-          {connectors.map(
-            (connector, i) =>
-              (connector.ready || isLoading) && (
-                <View key={connector.id}>
-                  <TouchableOpacity
-                    style={styles.walletConnector}
-                    disabled={!connector.ready}
-                    onPress={() => connect({ connector })}>
-                    <Image
-                      source={connectorLogo(connector.name)}
-                      resizeMode="contain"
-                      style={[styles.walletConnectorLogo]}
-                    />
-                    <Text style={styles.walletConnectorText}>
-                      {connector.name}
-                      {isLoading && connector.id === pendingConnector?.id && ' (connecting)'}
-                    </Text>
-                  </TouchableOpacity>
-                  {i < connectors.length - 1 && <View style={styles.divider} />}
-                </View>
-              )
-          )}
-        </View>
-      )}
     </>
   );
 };
 
 const styles = StyleSheet.create({
   walletConnectButton: {
-    width: 240,
     maxWidth: '80%',
     height: 40,
-    backgroundColor: Colors.purple[200],
-    borderRadius: 12,
     marginRight: 10,
     paddingLeft: 15,
     paddingRight: 15,
@@ -101,51 +28,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
   },
-  walletConnectButtonText: {
-    fontSize: 16,
-    color: Colors.white,
-    fontWeight: 500,
-    textAlign: 'left',
-  } as unknown as TextStyle,
-  dropdownContainer: {
-    height: 'auto',
-    width: 240,
-    borderRadius: 12,
-    position: 'absolute',
-    backgroundColor: Colors.white,
-  },
-  walletConnector: {
-    width: '100%',
-    height: 40,
-    backgroundColor: 'transparent',
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 10,
-  },
-  walletConnectorLogo: {
-    height: 25,
-    width: 25,
-  },
-  walletConnectorText: {
-    fontSize: 16,
-    color: Colors.purple[200],
-    fontWeight: 500,
-    textAlign: 'left',
-    marginLeft: 10,
-  } as unknown as TextStyle,
-  divider: {
-    width: 220,
-    marginLeft: 10,
-    height: 1,
-    backgroundColor: Colors.gray[600],
-  },
-  mobileButtonContentContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    justifyContent: 'center',
-    width: '100%',
-  },
 });

packages/app/src/components/Header/ConnectedAccountDisplay.tsx

@@ -1,5 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useEnsName, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useEnsName, useAccount, useSwitchChain } from 'wagmi';
 import { InterRegular } from '../../utils/webFonts';
 import { formatAddress } from '../../lib/formatAddress';
 import { formatEns } from '../../lib/formatEns';
@@ -19,8 +19,8 @@ interface ConnectedAccountDisplayProps {
 export const ConnectedAccountDisplay = (props: ConnectedAccountDisplayProps) => {
   const { isDesktopResolution, address } = props;
 
-  const { chain } = useNetwork();
-  const { switchNetwork, isError, error } = useSwitchNetwork();
+  const { chain } = useAccount();
+  const { switchChain, isError, error } = useSwitchChain();
 
   const formatChainName = (chainName: string | undefined) => chainName?.replace(/\d+|\s/g, '') || '';
 
@@ -29,18 +29,18 @@ export const ConnectedAccountDisplay = (props: ConnectedAccountDisplayProps) =>
   const isUnsupportedNetwork = !(chainName && chainName.toUpperCase() in SupportedNetwork);
 
   const handleNetworkClick = () => {
-    if (isUnsupportedNetwork && switchNetwork) {
-      switchNetwork(SupportedNetwork.CELO);
+    if (isUnsupportedNetwork && switchChain) {
+      switchChain({chainId:SupportedNetwork.CELO});
       setChainName(formatChainName(chain?.name));
     }
   };
 
   useEffect(() => {
-    if (isUnsupportedNetwork && switchNetwork) {
+    if (isUnsupportedNetwork && switchChain) {
       setChainName(formatChainName(chain?.name));
-      switchNetwork(SupportedNetwork.CELO);
+      switchChain({chainId:SupportedNetwork.CELO});
     }
-  }, [isUnsupportedNetwork, switchNetwork, chain?.name]);
+  }, [isUnsupportedNetwork, switchChain, chain?.name]);
 
   useEffect(() => {
     if (!isError || !error?.message) return;