WalletConnect v2 (#224)

.circleci/config.yml

@@ -6,14 +6,14 @@ orbs:
 jobs:
   test:
     docker:
-      - image: cimg/node:16.13.0
+      - image: cimg/node:18.16.0
     steps:
       - checkout
       - run: yarn
       - run: yarn test
   lint:
     docker:
-      - image: cimg/node:16.13.0
+      - image: cimg/node:18.16.0
     steps:
       - checkout
       - run: yarn

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v18.16.0

README.md

@@ -15,7 +15,73 @@ yarn add @impact-market/utils
 
 See docs for further details. Use `yarn docs` to generate docs and open index.html at docs folder.
 
-If you use this within react native, please install and add `import '@ethersproject/shims';` at App.{jsx,tsx}.
+An example using Next.js, web3modal and wagmi
+
+```javascript
+// _app.tsx
+import type { AppProps } from 'next/app';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/react';
+import { celo } from '@wagmi/chains';
+
+const projectId = '<walletconnect-project-id>';
+
+const { chains, publicClient } = configureChains(
+    [celo],
+    [jsonRpcProvider({ rpc: chain => ({ http: chain.rpcUrls.default.http[0] }) })]
+);
+
+const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors: w3mConnectors({ projectId, version: 2, chains }),
+    publicClient,
+});
+
+const ethereumClient = new EthereumClient(wagmiConfig, chains);
+
+function MyApp({ Component, pageProps }: AppProps) {
+    return (
+        <>
+            <WagmiConfig config={wagmiConfig}>
+                <Component {...pageProps} />
+            </WagmiConfig>
+            <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
+        </>
+    );
+}
+
+export default MyApp;
+```
+
+```javascript
+// index.tsx
+import React from 'react';
+import { ImpactProvider } from '@impact-market/utils/ImpactProvider';
+import { useAccount, useNetwork, useWalletClient } from 'wagmi';
+
+function App() {
+    const { address } = useAccount();
+    const { data: signer } = useWalletClient();
+    const { chain } = useNetwork();
+
+    return (
+        <ImpactProvider
+            jsonRpc={chain?.rpcUrls.public.http[0] ||  'https://alfajores-forno.celo-testnet.org'}
+            signer={signer ?? null}
+            address={address ?? null}
+            networkId={chain?.id || 44787}
+        >
+            {/** something */}
+        </ImpactProvider>
+    );
+}
+
+export default App;
+```
+
+If you use this within react-native, please install and add `import '@ethersproject/shims';` at App.{jsx,tsx}.
 It is required by ethers.
 
 ## Development
@@ -32,11 +98,11 @@ The second part will be running the `example/` create-react-app that's linked to
 
 ```bash
 # (in another tab)
-cd example
-yarn start # runs create-react-app dev server
+cd example-web
+yarn dev
 ```
 
-Now, anytime you make a change to your library in `src/` or to the example app's `example/src`, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
+Now, anytime you make a change to your library in `src/` or to the example app's `example-web/src`, the wxample app will live-reload your local dev server so you can iterate on your component in real-time.
 
 ## create-react-library
 

example-web/package.json

@@ -8,25 +8,30 @@
         "start": "next start",
         "lint": "next lint"
     },
+    "engines": {
+        "node": ">=18"
+    },
     "dependencies": {
-        "@celo/contractkit": "3.2.0",
-        "@celo/react-celo": "4.2.1",
-        "@celo/utils": "3.2.0",
         "@impact-market/utils": "link:..",
-        "@sentry/nextjs": "^7.36.0",
+        "@sentry/nextjs": "7.36.0",
+        "@wagmi/core": "1.3.2",
         "@walletconnect/client": "1.8.0",
+        "@web3modal/ethereum": "2.6.1",
+        "@web3modal/react": "2.6.1",
         "ethers": "5.7.2",
         "next": "12.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "web3": "1.3.6"
+        "viem": "1.2.1",
+        "wagmi": "1.3.2",
+        "@walletconnect/encoding": "1.0.2"
     },
     "devDependencies": {
         "@types/node": "18.8.5",
         "@types/react": "18.0.21",
         "@types/react-dom": "18.0.6",
         "eslint": "8.25.0",
         "eslint-config-next": "12.3.1",
-        "typescript": "4.8.4"
+        "typescript": "4.9.5"
     }
 }

example-web/pages/_app.tsx

@@ -1,83 +1,55 @@
-import '@celo/react-celo/lib/styles.css';
 import type { AppProps } from 'next/app';
-import { Alfajores, CeloProvider, SupportedProviders } from '@celo/react-celo';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/react';
+import { celo } from '@wagmi/chains';
+
+const projectId = 'e14be5c27cfd796596686bdc6876e836';
+
+const { chains, publicClient } = configureChains(
+    [celo],
+    [jsonRpcProvider({ rpc: chain => ({ http: chain.rpcUrls.default.http[0] }) })]
+);
+
+const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors: w3mConnectors({ projectId, version: 2, chains }),
+    publicClient,
+});
+
+const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
 function MyApp({ Component, pageProps }: AppProps) {
     return (
-        <CeloProvider
-            defaultNetwork={Alfajores.name}
-            dapp={{
-                name: 'My awesome dApp',
-                description: 'My awesome description',
-                url: 'https://example.com',
-                icon: ''
-            }}
-            connectModal={{
-                providersOptions: {
-                    searchable: true,
-                    additionalWCWallets: [
-                        // see https://github.com/WalletConnect/walletconnect-registry/#schema for a schema example
-                        {
-                            app: {
-                                android: 'https://play.google.com/store/apps/details?id=com.impactmarket.mobile',
-                                browser: '',
-                                ios: 'https://apps.apple.com/app/impactmarket/id1530870911',
-                                linux: '',
-                                mac: '',
-                                windows: ''
-                            },
-                            chains: ['eip:42220'],
-                            description: 'Your future unlocked.',
-                            desktop: {
-                                native: 'libera://',
-                                universal: 'libera://'
-                            },
-                            homepage: 'https://impactmarket.com/',
-                            id: 'libera-wallet',
-                            logos: {
-                                lg: 'https://dxdwf61ltxjyn.cloudfront.net/eyJidWNrZXQiOiJpbXBhY3RtYXJrZXQtYXBwIiwia2V5IjoiTGliZXJhTG9nby5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjQwMCwiaGVpZ2h0Ijo0MDAsImZpdCI6Imluc2lkZSJ9fSwib3V0cHV0Rm9ybWF0IjoianBnIn0=',
-                                md: 'https://dxdwf61ltxjyn.cloudfront.net/eyJidWNrZXQiOiJpbXBhY3RtYXJrZXQtYXBwIiwia2V5IjoiTGliZXJhTG9nby5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjQwMCwiaGVpZ2h0Ijo0MDAsImZpdCI6Imluc2lkZSJ9fSwib3V0cHV0Rm9ybWF0IjoianBnIn0=',
-                                sm: 'https://dxdwf61ltxjyn.cloudfront.net/eyJidWNrZXQiOiJpbXBhY3RtYXJrZXQtYXBwIiwia2V5IjoiTGliZXJhTG9nby5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjQwMCwiaGVpZ2h0Ijo0MDAsImZpdCI6Imluc2lkZSJ9fSwib3V0cHV0Rm9ybWF0IjoianBnIn0='
-                            },
-                            metadata: {
-                                colors: {
-                                    primary: '#fff',
-                                    secondary: '#2E6AFF'
-                                },
-                                shortName: 'Libera'
-                            },
-                            mobile: {
-                                native: 'libera://',
-                                universal: 'libera://'
-                            },
-                            name: 'Libera',
-                            responsive: {
-                                browserFriendly: false,
-                                browserOnly: false,
-                                mobileFriendly: true,
-                                mobileOnly: true
-                            },
-                            // IMPORTANT
-                            // This is the version of WC. We only support version 1 at the moment.
-                            versions: ['1']
+        <>
+            <WagmiConfig config={wagmiConfig}>
+                <Component {...pageProps} />
+            </WagmiConfig>
+            <Web3Modal
+                projectId={projectId}
+                ethereumClient={ethereumClient}
+                // explorerRecommendedWalletIds={[
+                //     // metamask
+                //     'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
+                //     // valora
+                //     'd01c7758d741b363e637a817a09bcf579feae4db9f5bb16f599fdd1f66e2f974'
+                // ]}
+                mobileWallets={[
+                    {
+                        id: 'libera',
+                        name: 'Libera',
+                        links: {
+                            native: 'libera://',
+                            universal: 'https://liberawallet.com'
                         }
-                    ],
-                    // This option hides specific wallets from the default list
-                    hideFromDefaults: [
-                        SupportedProviders.PrivateKey,
-                        SupportedProviders.CeloTerminal,
-                        SupportedProviders.CeloWallet,
-                        SupportedProviders.CeloDance,
-                        SupportedProviders.Injected,
-                        SupportedProviders.Ledger,
-                        SupportedProviders.Steakwallet,
-                        SupportedProviders.CoinbaseWallet
-                    ]
-                }
-            }}
-        >
-            <Component {...pageProps} />
-        </CeloProvider>
+                    }
+                ]}
+                walletImages={{
+                    libera: 'https://imagedelivery.net/_aTEfDRm7z3tKgu9JhfeKA/9485d17f-c413-47fe-ebee-a876a9dc9100/lg'
+                }}
+            />
+        </>
     );
 }
 

example-web/pages/components/DaoHooks/VotingPower.tsx

@@ -1,24 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { hasPACTVotingPower } from '@impact-market/utils/pact';
-import { useProvider, useCelo } from '@celo/react-celo';
+import React from 'react';
+// import { hasPACTVotingPower } from '@impact-market/utils/pact';
+// import { useProvider, useCelo } from '@celo/react-celo';
 
-const VotingPower = () => {
-    const provider = useProvider();
-    const { address } = useCelo();
-    const [hasVotingPower, setHasVotingPower] = useState(false);
-
-    useEffect(() => {
-        if (address) {
-            hasPACTVotingPower(provider, 44787, address).then(has => setHasVotingPower(!!has));
-        }
-    }, [address, provider]);
+// TODO: to remove
 
-    return (
-        <div>
-            <h3>Voting Power</h3>
-            enough voting power to propose: {hasVotingPower.toString()}
-        </div>
-    );
+const VotingPower = () => {
+    return null;
 };
 
 export default VotingPower;

example-web/pages/components/DepositRedirect/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import WalletConnection from '../WalletConnection';
 import { useDepositRedirect } from '@impact-market/utils/useDepositRedirect';
-import { useCelo } from '@celo/react-celo';
+import { ImpactMarketContext } from '../../../context';
 
 function DepositRedirect() {
-    const { address } = useCelo();
+    const { address } = React.useContext(ImpactMarketContext);
     const { approve, deposit, userDeposits, donateInterest } = useDepositRedirect();
     const [amount, setAmount] = React.useState('');
 

example-web/pages/components/MicroCredit/UserLoans.tsx

@@ -1,10 +1,10 @@
-import { useCelo } from '@celo/react-celo';
 import { useMicroCredit } from '@impact-market/utils/useMicroCredit';
 import React, { useState } from 'react';
+import { useAccount } from 'wagmi';
 
 const UserLoans = () => {
     const { userLoans, claimLoan, approve, repayLoan, getActiveLoanId, loan } = useMicroCredit();
-    const { address } = useCelo();
+    const { address } = useAccount();
     const [amount, setAmount] = useState('0');
 
     const checkLoan = async () => {

example-web/pages/components/PACTMetrics/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { getPACTTradingMetrics, getPACTTVL, getUBILiquidity } from '@impact-market/utils/pact';
 import { StaticJsonRpcProvider } from '@ethersproject/providers';
-import { Mainnet } from '@celo/react-celo';
+import { celo } from '@wagmi/chains';
 
 const PACTMetrics = () => {
     const [pactTradingMetrics, setPactTradingMetrics] = React.useState<{
@@ -24,7 +24,7 @@ const PACTMetrics = () => {
 
     useEffect(() => {
         const loadPactPriceVolumeLiquidity = async () => {
-            const provider = new StaticJsonRpcProvider(Mainnet.rpcUrl);
+            const provider = new StaticJsonRpcProvider(celo.rpcUrls.default.http[0]);
             const { chainId } = await provider.getNetwork();
             const r = await getPACTTradingMetrics(chainId);
             const tvl = await getPACTTVL(provider, chainId);

example-web/pages/components/Signatures/index.tsx

@@ -5,7 +5,7 @@ import WalletConnection from '../WalletConnection';
 const Signatures = () => {
     const { signMessage, signTypedData } = useSignatures();
 
-    const handleSignature = () => signMessage('hello');
+    const handleSignature = () => signMessage('hello').then(console.log).catch(console.error);
 
     const handleSignTypedData = () => signTypedData('Proving my identity').then(console.log).catch(console.error);
 

example-web/pages/components/WalletConnection.tsx

@@ -1,23 +1,20 @@
-import { useCelo } from '@celo/react-celo';
+import { Web3Button } from '@web3modal/react'
 import React from 'react';
+import { useAccount } from 'wagmi';
 
 const WalletConnection = (props: { children: any; title?: string }) => {
     const { children, title } = props;
-    const { address, connect, destroy, initialised } = useCelo();
+    const { address } = useAccount();
 
-    if (!initialised) {
-        return <div>loading...</div>;
-    }
+    // if (!initialised) {
+    //     return <div>loading...</div>;
+    // }
 
     return (
         <div>
             {!!title && <h2>{title}</h2>}
             <div style={{ marginBottom: 32, marginTop: title ? 8 : 0 }}>
-                {!address ? (
-                    <button onClick={connect}>Connect wallet</button>
-                ) : (
-                    <button onClick={destroy}>Disconnect wallet</button>
-                )}
+                <Web3Button />
             </div>
             {address && (
                 <>