Merge pull request #274 from skalenetwork/upgrade-rainbowkit

Upgrade RainbowKit to v2.1.4
skalenetwork · Aug 13, 2024 · 000722f · 000722f
2 parents f846b1a + f71ebb7
commit 000722f
Show file tree

Hide file tree

Showing 18 changed files with 205 additions and 158 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skalenetwork/metaport",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "SKALE Metaport Widget",
   "keywords": [
     "skale",
@@ -75,17 +75,18 @@
     "vitest": "0.34.1"
   },
   "dependencies": {
-    "@mui/material": "^5.15.6",
-    "@mui/lab": "^5.0.0-alpha.162",
-    "@mui/icons-material": "^5.15.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@rainbow-me/rainbowkit": "^1.3.6",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/lab": "^5.0.0-alpha.162",
+    "@mui/material": "^5.15.6",
+    "@rainbow-me/rainbowkit": "^2.1.4",
     "@skalenetwork/ima-js": "2.0.2-develop.0",
+    "@tanstack/react-query": "^5.51.23",
     "coingecko-api-v3": "^0.0.29",
     "react-jazzicon": "^1.0.4",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "viem": "2.x",
+    "wagmi": "^2.12.5",
     "zustand": "^4.5.0"
   },
   "peerDependencies": {

diff --git a/skale-network b/skale-network
diff --git a/src/components/AddToken.tsx b/src/components/AddToken.tsx
@@ -22,7 +22,7 @@
  */
 
 import { useState } from 'react'
-import { useWalletClient, useSwitchNetwork } from 'wagmi'
+import { useWalletClient, useSwitchChain } from 'wagmi'
 import { MainnetChain, SChain } from '@skalenetwork/ima-js'
 
 import Button from '@mui/material/Button'
@@ -43,7 +43,7 @@ export default function AddToken(props: {
   const [loading, setLoading] = useState<boolean>(false)
 
   const { data: walletClient } = useWalletClient()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
 
   function getIconUrl(token: TokenData) {
     return `${ICONS_BASE_URL}${token.meta.symbol}.png`
@@ -73,7 +73,7 @@ export default function AddToken(props: {
       await enforceNetwork(
         chainId,
         walletClient,
-        switchNetworkAsync,
+        switchChainAsync,
         props.mpc.config.skaleNetwork,
         props.destChainName
       )

diff --git a/src/components/ChainApps.tsx b/src/components/ChainApps.tsx
@@ -67,54 +67,60 @@ export default function ChainApps(props: {
     <div className={cls(styles.sk__chainApps, cmn.mri10, cmn.flex, cmn.flexcv)}>
       <div className={cls(cmn.mtop10, cmn.mbott10)}>
         {show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)}
-        {appButtons.length > 4 && <Button
-          onClick={() => {
-            setShow(!show)
-          }}
-          size="small"
-          className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
-        >
-          <div
-            className={cls(
-              cmn.flex,
-              cmn.flexcv,
-              cmn.mri10,
-              [cmn.mleft5, size === 'sm'],
-              [cmn.mleft10, size === 'md'],
-              [cmn.mbott5, size === 'sm'],
-              [cmn.mtop5, size === 'sm'],
-              [cmn.mbott10, size === 'md'],
-              [cmn.mtop10, size === 'md']
-            )}
+        {appButtons.length > 4 && (
+          <Button
+            onClick={() => {
+              setShow(!show)
+            }}
+            size="small"
+            className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
           >
-            {show ? (
-              <RemoveCircleRoundedIcon className={cls(cmn.pPrim,
-                [styles.chainIconxs, size === 'sm'],
-                [styles.chainIconsm, size === 'md']
-              )} />
-            ) : (
-              <AddCircleRoundedIcon className={cls(cmn.pPrim,
-                [styles.chainIconxs, size === 'sm'],
-                [styles.chainIconsm, size === 'md']
-              )} />
-            )}
-
-            <p
+            <div
               className={cls(
-                cmn.p,
-                [cmn.p3, size === 'md'],
-                [cmn.p4, size === 'sm'],
-                cmn.pPrim,
-                cmn.p600,
-                cmn.mleft10
+                cmn.flex,
+                cmn.flexcv,
+                cmn.mri10,
+                [cmn.mleft5, size === 'sm'],
+                [cmn.mleft10, size === 'md'],
+                [cmn.mbott5, size === 'sm'],
+                [cmn.mtop5, size === 'sm'],
+                [cmn.mbott10, size === 'md'],
+                [cmn.mtop10, size === 'md']
               )}
             >
-              Show {show ? 'less' : 'more'} apps
-            </p>
-          </div>
-        </Button>}
-
+              {show ? (
+                <RemoveCircleRoundedIcon
+                  className={cls(
+                    cmn.pPrim,
+                    [styles.chainIconxs, size === 'sm'],
+                    [styles.chainIconsm, size === 'md']
+                  )}
+                />
+              ) : (
+                <AddCircleRoundedIcon
+                  className={cls(
+                    cmn.pPrim,
+                    [styles.chainIconxs, size === 'sm'],
+                    [styles.chainIconsm, size === 'md']
+                  )}
+                />
+              )}
 
+              <p
+                className={cls(
+                  cmn.p,
+                  [cmn.p3, size === 'md'],
+                  [cmn.p4, size === 'sm'],
+                  cmn.pPrim,
+                  cmn.p600,
+                  cmn.mleft10
+                )}
+              >
+                Show {show ? 'less' : 'more'} apps
+              </p>
+            </div>
+          </Button>
+        )}
       </div>
     </div>
   )

diff --git a/src/components/CommunityPool.tsx b/src/components/CommunityPool.tsx
@@ -23,7 +23,7 @@
 
 import React, { useEffect } from 'react'
 
-import { useAccount, useWalletClient, useSwitchNetwork } from 'wagmi'
+import { useAccount, useWalletClient, useSwitchChain } from 'wagmi'
 
 import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
@@ -57,7 +57,7 @@ import { Collapse } from '@mui/material'
 
 export default function CommunityPool() {
   const { data: walletClient } = useWalletClient()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
 
   const cpData = useCPStore((state) => state.cpData)
   const loading = useCPStore((state) => state.loading)
@@ -144,7 +144,7 @@ export default function CommunityPool() {
       chainName,
       cpData.balance,
       address,
-      switchNetworkAsync,
+      switchChainAsync,
       setLoading,
       setErrorMessage,
       async () => {
@@ -161,7 +161,7 @@ export default function CommunityPool() {
       chainName,
       amount,
       address,
-      switchNetworkAsync,
+      switchChainAsync,
       setLoading,
       setErrorMessage,
       async () => {

diff --git a/src/components/MetaportProvider.tsx b/src/components/MetaportProvider.tsx
@@ -22,14 +22,26 @@
 
 import { ReactElement, useEffect } from 'react'
 
-import { RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit'
-import { configureChains, createConfig, WagmiConfig } from 'wagmi'
+import {
+  RainbowKitProvider,
+  darkTheme,
+  lightTheme,
+  connectorsForWallets
+} from '@rainbow-me/rainbowkit'
+import { WagmiProvider, createConfig, http } from 'wagmi'
 import { mainnet, goerli, holesky } from 'wagmi/chains'
-import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
-import { connectorsForWallets } from '@rainbow-me/rainbowkit'
+import { GetChainsReturnType } from '@wagmi/core'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { PaletteMode } from '@mui/material'
 
-import { injectedWallet, metaMaskWallet, enkryptWallet } from '@rainbow-me/rainbowkit/wallets'
+import {
+  injectedWallet,
+  metaMaskWallet,
+  enkryptWallet,
+  coinbaseWallet,
+  rainbowWallet,
+  rabbyWallet
+} from '@rainbow-me/rainbowkit/wallets'
 
 import { MetaportConfig, ActionStateUpdate } from '../core/interfaces'
 
@@ -38,7 +50,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'
 
 import '@rainbow-me/rainbowkit/styles.css'
 
-import { constructWagmiChain, getWebSocketUrl } from '../core/wagmi_network'
+import { constructWagmiChain } from '../core/wagmi_network'
 
 import { getWidgetTheme, getMuiZIndex } from '../core/themes'
 
@@ -56,35 +68,39 @@ export default function MetaportProvider(props: {
   const skaleChains = props.config.chains.map((chain) =>
     constructWagmiChain(props.config.skaleNetwork, chain)
   )
-  const { chains, webSocketPublicClient } = configureChains(
-    [mainnet, goerli, holesky, ...skaleChains],
-    [
-      jsonRpcProvider({
-        rpc: (chain) => ({
-          http: chain.rpcUrls.default.http[0],
-          webSocket: getWebSocketUrl(chain, props.config.skaleNetwork)
-        })
-      })
-    ]
-  )
-
-  const wallets = [enkryptWallet({ chains }), injectedWallet({ chains })]
-
-  if (props.config.projectId) {
-    wallets.push(metaMaskWallet({ chains, projectId: props.config.projectId }))
-  }
 
-  const connectors = connectorsForWallets([
+  const connectors = connectorsForWallets(
+    [
+      {
+        groupName: 'Recommended wallets',
+        wallets: [
+          enkryptWallet,
+          injectedWallet,
+          metaMaskWallet,
+          coinbaseWallet,
+          rainbowWallet,
+          rabbyWallet
+        ]
+      }
+    ],
     {
-      groupName: 'Supported Wallets',
-      wallets: wallets
+      appName: 'SKALE Metaport',
+      projectId: props.config.projectId
     }
-  ])
+  )
 
+  const chains: GetChainsReturnType = [mainnet, goerli, holesky, ...skaleChains]
   const wagmiConfig = createConfig({
-    autoConnect: true,
+    chains,
     connectors,
-    publicClient: webSocketPublicClient
+    transports: {
+      [mainnet.id]: http(),
+      [goerli.id]: http(),
+      [holesky.id]: http(),
+      ...Object.fromEntries(
+        skaleChains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])])
+      )
+    }
   })
 
   const widgetTheme = getWidgetTheme(props.config.theme)
@@ -100,7 +116,10 @@ export default function MetaportProvider(props: {
 
   useEffect(() => {
     setOpen(props.config.openOnLoad)
-    window.addEventListener('metaport_actionStateUpdated', actionStateUpdated, false)
+    window.addEventListener('metaport_actionStateUpdated', actionStateUpdated as EventListener)
+    return () => {
+      window.removeEventListener('metaport_actionStateUpdated', actionStateUpdated as EventListener)
+    }
   }, [])
 
   useEffect(() => {
@@ -148,24 +167,26 @@ export default function MetaportProvider(props: {
 
   if (!metaportTheme) return <div></div>
 
+  const queryClient = new QueryClient()
+
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider
-        coolMode
-        appInfo={{
-          appName: 'SKALE Metaport',
-          learnMoreUrl: 'https://portal.skale.space/other/faq'
-        }}
-        showRecentTransactions={true}
-        chains={chains}
-        theme={widgetTheme.mode === 'dark' ? darkTheme() : lightTheme()}
-      >
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <div className={cls(themeCls, commonThemeCls, styles.metaport)}>{props.children}</div>
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          appInfo={{
+            appName: 'SKALE Metaport',
+            learnMoreUrl: 'https://portal.skale.space/other/faq'
+          }}
+          showRecentTransactions={true}
+          theme={widgetTheme.mode === 'dark' ? darkTheme() : lightTheme()}
+        >
+          <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+              <div className={cls(themeCls, commonThemeCls, styles.metaport)}>{props.children}</div>
+            </ThemeProvider>
+          </StyledEngineProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   )
 }
diff --git a/src/components/Stepper/SkStepper.tsx b/src/components/Stepper/SkStepper.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useWalletClient, useSwitchNetwork, useAccount } from 'wagmi'
+import { useWalletClient, useSwitchChain, useAccount } from 'wagmi'
 import { useAddRecentTransaction } from '@rainbow-me/rainbowkit'
 
 import Box from '@mui/material/Box'
@@ -29,7 +29,7 @@ import { SUCCESS_EMOJIS } from '../../core/constants'
 
 export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) {
   const { address } = useAccount()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
   const addRecentTransaction = useAddRecentTransaction()
 
   const { data: walletClient } = useWalletClient()
@@ -124,7 +124,7 @@ export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) {
                           color="primary"
                           size="medium"
                           className={cls(styles.btnAction, cmn.mtop5)}
-                          onClick={() => execute(address, switchNetworkAsync, walletClient)}
+                          onClick={() => execute(address, switchChainAsync, walletClient)}
                           disabled={!!actionDisabled}
                         >
                           {step.btnText}