switch to ConnectKit

package.json

@@ -31,10 +31,9 @@
     "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^1.0.0",
-    "@web3modal/ethereum": "^2.1.1",
-    "@web3modal/react": "^2.1.1",
     "axios": "^1.2.0",
     "classnames": "^2.3.2",
+    "connectkit": "^1.1.3",
     "date-fns": "^2.29.3",
     "decimal.js": "^10.4.2",
     "dom-confetti": "^0.2.2",
@@ -68,7 +67,7 @@
     "slugify": "^1.6.5",
     "swr": "^1.3.0",
     "urql": "^3.0.3",
-    "wagmi": "^0.11.4",
+    "wagmi": "^0.10.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {

src/@utils/wallet.ts

@@ -1,41 +1,18 @@
 import { LoggerInstance } from '@oceanprotocol/lib'
-import {
+import { createClient, erc20ABI } from 'wagmi'
-  EthereumClient,
-  modalConnectors,
-  walletConnectProvider
-} from '@web3modal/ethereum'
-import { configureChains, createClient, erc20ABI } from 'wagmi'
 import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
-import { publicProvider } from 'wagmi/providers/public'
-import { infuraProvider } from 'wagmi/providers/infura'
 import { ethers } from 'ethers'
 import { formatEther } from 'ethers/lib/utils'
+import { getDefaultClient } from 'connectkit'
 
 // Wagmi client
-export const { chains, provider } = configureChains(
+export const wagmiClient = createClient(
-  [mainnet, polygon, bsc, goerli, polygonMumbai],
+  getDefaultClient({
-  [
-    walletConnectProvider({
-      projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
-    }),
-    infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID }),
-    publicProvider()
-  ]
-)
-
-export const wagmiClient = createClient({
-  autoConnect: true,
-  connectors: modalConnectors({
     appName: 'Ocean Market',
-    version: '2',
+    infuraId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID,
-    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+    chains: [mainnet, polygon, bsc, goerli, polygonMumbai]
-    chains
+  })
-  }),
+)
-  provider
-})
-
-// Web3Modal Ethereum Client
-export const ethereumClient = new EthereumClient(wagmiClient, chains)
 
 export function accountTruncate(account: string): string {
   if (!account || account === '') return

src/components/Header/Wallet/Account.tsx

@@ -4,26 +4,25 @@ import { accountTruncate } from '@utils/wallet'
 // import Loader from '@shared/atoms/Loader'
 import styles from './Account.module.css'
 import Avatar from '@shared/atoms/Avatar'
-import { useAccount, useProvider, useEnsName, useEnsAvatar } from 'wagmi'
+import { useAccount, useEnsName, useEnsAvatar } from 'wagmi'
-import { useWeb3Modal } from '@web3modal/react'
+import { useModal } from 'connectkit'
 
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
-  // const provider = useProvider()
   const { address: accountId } = useAccount()
   const { data: accountEns } = useEnsName({ address: accountId, chainId: 1 })
   const { data: accountEnsAvatar } = useEnsAvatar({
     address: accountId,
     chainId: 1
   })
-  const { open } = useWeb3Modal()
+  const { setOpen } = useModal()
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in
     e.preventDefault()
 
-    await open()
+    setOpen(true)
   }
 
   // return

src/components/Header/Wallet/Details.tsx

@@ -5,18 +5,17 @@ import Button from '@shared/atoms/Button'
 import AddToken from '@shared/AddToken'
 import Conversion from '@shared/Price/Conversion'
 import { getOceanConfig } from '@utils/ocean'
-import { useNetwork, useProvider, useDisconnect, useAccount } from 'wagmi'
+import { useNetwork, useDisconnect, useAccount } from 'wagmi'
+import { useModal } from 'connectkit'
 import styles from './Details.module.css'
 import useBalance from '@hooks/useBalance'
-import { useWeb3Modal } from '@web3modal/react'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
 
 export default function Details(): ReactElement {
   const { chain } = useNetwork()
-  const { connector: activeConnector, isConnected } = useAccount()
+  const { connector: activeConnector } = useAccount()
-  const { open: openWeb3Modal } = useWeb3Modal()
+  const { setOpen } = useModal()
   const { disconnect } = useDisconnect()
-  const provider = useProvider()
   const { balance } = useBalance()
   const { networkData } = useNetworkMetadata()
   const { locale } = useUserPreferences()
@@ -78,7 +77,7 @@ export default function Details(): ReactElement {
             )}
           </div>
           <p>
-            <Button style="text" size="small" onClick={() => openWeb3Modal()}>
+            <Button style="text" size="small" onClick={() => setOpen(true)}>
               Switch Wallet
             </Button>
             <Button

src/pages/_app.tsx

@@ -11,38 +11,44 @@ import '../stylesGlobal/styles.css'
 import Decimal from 'decimal.js'
 import MarketMetadataProvider from '@context/MarketMetadata'
 import { WagmiConfig } from 'wagmi'
-import { Web3Modal } from '@web3modal/react'
+import { ConnectKitProvider } from 'connectkit'
-import { wagmiClient, ethereumClient } from '@utils/wallet'
+import { wagmiClient } from '@utils/wallet'
 import Web3LegacyProvider from '@context/Web3Legacy'
 
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
   Decimal.set({ rounding: 1 })
+
   return (
     <>
       <WagmiConfig client={wagmiClient}>
-        <Web3LegacyProvider>
+        <ConnectKitProvider
-          <MarketMetadataProvider>
+          options={{ initialChainId: 0 }}
-            <UrqlProvider>
+          customTheme={{
-              <UserPreferencesProvider>
+            '--ck-font-family': 'var(--font-family-base)',
-                <PricesProvider>
+            '--ck-border-radius': 'var(--border-radius)',
-                  <ConsentProvider>
+            '--ck-primary-button-border-radius': 'var(--border-radius)',
-                    <App>
+            '--ck-primary-button-color': 'var(--text-color)',
-                      <Component {...pageProps} />
+            '--ck-primary-button-background': 'var(--brand-grey-dimmed)',
-                    </App>
+            '--ck-secondary-button-border-radius': 'var(--border-radius)'
-                  </ConsentProvider>
+          }}
-                </PricesProvider>
+        >
-              </UserPreferencesProvider>
+          <Web3LegacyProvider>
-            </UrqlProvider>
+            <MarketMetadataProvider>
-          </MarketMetadataProvider>
+              <UrqlProvider>
-        </Web3LegacyProvider>
+                <UserPreferencesProvider>
+                  <PricesProvider>
+                    <ConsentProvider>
+                      <App>
+                        <Component {...pageProps} />
+                      </App>
+                    </ConsentProvider>
+                  </PricesProvider>
+                </UserPreferencesProvider>
+              </UrqlProvider>
+            </MarketMetadataProvider>
+          </Web3LegacyProvider>
+        </ConnectKitProvider>
       </WagmiConfig>
-
-      <Web3Modal
-        projectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
-        ethereumClient={ethereumClient}
-        themeColor="blackWhite"
-        themeBackground="themeColor"
-      />
     </>
   )
 }

src/stylesGlobal/_web3modal.css

@@ -1,151 +0,0 @@
-div.web3modal-modal-lightbox,
-div.walletconnect-qrcode__base {
-  background: var(--background-body-transparent);
-  backdrop-filter: blur(3px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  animation: fadeIn 0.2s ease-out backwards;
-}
-
-div.web3modal-modal-card {
-  border-radius: var(--border-radius);
-  padding: var(--spacer);
-  margin: var(--spacer) auto;
-  max-width: 100%;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 6px 15px 0 var(--box-shadow-color);
-  animation: moveUp 0.2s ease-out backwards;
-  grid-template-columns: 1fr;
-}
-
-div.web3modal-provider-wrapper {
-  border: 0;
-  border-bottom: 1px solid var(--border-color);
-  padding: 0;
-}
-
-div.web3modal-provider-wrapper:last-child {
-  border-bottom: 0;
-}
-
-div.web3modal-provider-container {
-  border-radius: 0;
-  padding: var(--spacer);
-}
-
-@media (min-width: 40rem) {
-  div.web3modal-modal-card {
-    grid-template-columns: 1fr 1fr;
-    max-width: var(--break-point--small);
-  }
-
-  div.web3modal-provider-wrapper {
-    border-bottom: 0;
-  }
-
-  div.web3modal-provider-wrapper:nth-child(1),
-  div.web3modal-provider-wrapper:nth-child(2) {
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  div.web3modal-provider-wrapper:nth-child(2n + 1) {
-    border-right: 1px solid var(--border-color);
-  }
-}
-
-div.web3modal-provider-icon {
-  filter: grayscale(1) contrast(150%);
-  transition: filter 0.2s ease-out;
-}
-
-div.web3modal-provider-wrapper:hover div.web3modal-provider-icon {
-  filter: none;
-}
-
-div.web3modal-provider-name {
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-bold);
-  font-family: var(--font-family-heading);
-}
-
-div.web3modal-provider-description {
-  font-size: var(--font-size-base);
-  margin-top: 0;
-}
-
-div.walletconnect-modal__base {
-  background: var(--background-body);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
-}
-
-div.walletconnect-modal__mobile__toggle {
-  width: 95%;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: var(--background-body);
-  border: 1px solid var(--border-color);
-}
-
-div.walletconnect-modal__mobile__toggle a {
-  color: var(--color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-small);
-  padding: calc(var(--spacer) / 12) var(--spacer);
-  white-space: nowrap;
-}
-
-div.walletconnect-modal__mobile__toggle_selector {
-  background: var(--font-color-heading);
-  color: var(--background-body);
-  border-color: var(--font-color-heading);
-  height: calc(100% - calc(var(--spacer) / 12));
-  top: calc(var(--spacer) / 24);
-}
-
-div.walletconnect-modal__header p {
-  color: var(--font-color-heading);
-}
-
-p.walletconnect-qrcode__text {
-  color: var(--color-secondary);
-}
-
-h3.walletconnect-modal__base__row__h3 {
-  font-size: var(--font-size-base);
-  color: var(--font-color-text);
-}
-
-svg.walletconnect-qrcode__image path:first-child {
-  fill: var(--background-body);
-}
-
-svg.walletconnect-qrcode__image path:last-child {
-  stroke: var(--font-color-heading);
-}
-
-#torusIframe {
-  z-index: 3;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes moveUp {
-  from {
-    transform: translate3d(0, 1rem, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}

src/stylesGlobal/styles.css

@@ -157,7 +157,6 @@ table th {
 
 @import '_code.css';
 @import '_toast.css';
-@import '_web3modal.css';
 
 /* prevent background scrolling */
 .ReactModal__Body--open {