refactor: replace AppKit with RainbowKit for wallet connection

apps/app/app/content.tsx

@@ -4,12 +4,11 @@ import {Box, Divider, Grid, Stack, Typography} from '@mui/material'
 import {toCurrency} from '@phala/lib'
 import phaIcon from '@phala/ui/icons/asset/pha.png'
 import vphaIcon from '@phala/ui/icons/asset/vpha.png'
-import {useAppKitAccount, useAppKitNetwork} from '@reown/appkit/react'
 import Decimal from 'decimal.js'
 import {useCallback, useMemo} from 'react'
 import {erc20Abi, formatUnits} from 'viem'
 import {mainnet} from 'viem/chains'
-import {useReadContract} from 'wagmi'
+import {useConnection, useReadContract} from 'wagmi'
 
 import AssetCard from '@/components/asset-card'
 import PortfolioSummary from '@/components/portfolio-summary'
@@ -22,12 +21,10 @@ import {
 } from '@/config'
 import {useRewardRate, useSharePrice, useTotalAssets} from '@/hooks/staking'
 import {useAddTokenToWallet} from '@/hooks/use-add-token-to-wallet'
-import {phalaNetwork, toAddress} from '@/lib/wagmi'
+import {phalaNetwork} from '@/lib/wagmi'
 
 export default function HomeContent() {
-  const {address: rawAddress, isConnected} = useAppKitAccount()
-  const {chainId} = useAppKitNetwork()
-  const address = toAddress(rawAddress)
+  const {address, isConnected, chainId} = useConnection()
   const sharePrice = useSharePrice()
   const totalAssets = useTotalAssets()
   const rewardRate = useRewardRate()

apps/app/components/claim-assets.tsx

@@ -23,21 +23,24 @@ import {decodeAddress} from '@polkadot/keyring'
 import Identicon from '@polkadot/react-identicon'
 import type {Signer} from '@polkadot/types/types'
 import {stringToHex, u8aToHex} from '@polkadot/util'
-import {useAppKitAccount} from '@reown/appkit/react'
 import Decimal from 'decimal.js'
 import {useAtom, useSetAtom} from 'jotai'
 import Image from 'next/image'
 import {useSnackbar} from 'notistack'
 import {useEffect, useMemo, useState} from 'react'
 import type {Hex} from 'viem'
-import {useWaitForTransactionReceipt, useWriteContract} from 'wagmi'
+import {
+  useConnection,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from 'wagmi'
 
 import khalaClaimerAbi from '@/assets/khala_claimer_abi'
 import phalaClaimerAbi from '@/assets/phala_claimer_abi'
-import AppKitButton from '@/components/app-kit-button'
 import ChainBadge from '@/components/chain-badge'
 import Property from '@/components/property'
 import SwitchChainButton from '@/components/switch-chain-button'
+import WalletButton from '@/components/wallet-button'
 import {
   explorerUrl,
   KHALA_CLAIMER_CONTRACT_ADDRESS,
@@ -51,8 +54,6 @@ import {
   useClaimStatus,
 } from '@/hooks/khala-assets'
 import {useSharePrice} from '@/hooks/staking'
-import {useAutoSwitchChain} from '@/hooks/use-auto-switch-chain'
-import {toAddress} from '@/lib/wagmi'
 import {walletDialogOpenAtom} from '@/store/ui'
 
 const Steps = () => {
@@ -130,10 +131,8 @@ const ClaimAssets = ({chain}: {chain: ChainType}) => {
   const [checkAddress, setCheckAddress] = useState<string | undefined>(
     undefined,
   )
-  useAutoSwitchChain()
   const sharePrice = useSharePrice()
-  const {address: rawEthAddress} = useAppKitAccount()
-  const ethAddress = toAddress(rawEthAddress)
+  const {address: ethAddress} = useConnection()
   const [polkadotAccount] = useAtom(polkadotAccountAtom)
   const address = checkAddress ?? polkadotAccount?.address
   const {data} = useAssetsQuery(address, chain)
@@ -629,7 +628,7 @@ const ClaimAssets = ({chain}: {chain: ChainType}) => {
                   justifyContent="space-between"
                 >
                   <Typography variant="subtitle1">Ethereum wallet</Typography>
-                  <AppKitButton />
+                  <WalletButton />
                 </Box>
 
                 <Box component="form" onSubmit={handleSubmit}>

apps/app/components/portfolio-summary.tsx

@@ -11,16 +11,13 @@ import {
   Typography,
 } from '@mui/material'
 import {toCurrency, toPercentage} from '@phala/lib'
-import phaIcon from '@phala/ui/icons/asset/pha.png'
 import vphaIcon from '@phala/ui/icons/asset/vpha.png'
-import {useAppKit, useAppKitNetwork} from '@reown/appkit/react'
+import {ConnectButton} from '@rainbow-me/rainbowkit'
 import Decimal from 'decimal.js'
 import Image from 'next/image'
 import type {FC} from 'react'
 import {formatUnits} from 'viem'
 
-import {ethChain} from '@/config'
-
 interface PortfolioSummaryProps {
   totalPhaValue: Decimal | null
   totalStakedVpha: bigint | null
@@ -36,13 +33,6 @@ const PortfolioSummary: FC<PortfolioSummaryProps> = ({
   stakingApr,
   isConnected,
 }) => {
-  const {open} = useAppKit()
-  const {chainId, switchNetwork} = useAppKitNetwork()
-
-  const isWrongNetwork = isConnected && chainId !== ethChain.id
-
-  const showOverlay = !isConnected || isWrongNetwork
-
   return (
     <Paper
       sx={(theme) => ({
@@ -53,7 +43,7 @@ const PortfolioSummary: FC<PortfolioSummaryProps> = ({
         overflow: 'hidden',
       })}
     >
-      {showOverlay && (
+      {!isConnected && (
         <Box
           sx={{
             position: 'absolute',
@@ -68,18 +58,15 @@ const PortfolioSummary: FC<PortfolioSummaryProps> = ({
         >
           <Stack alignItems="center" spacing={1}>
             <Typography variant="body2" color="common.white">
-              {isWrongNetwork
-                ? 'Please switch to Ethereum Mainnet'
-                : 'Connect wallet to view portfolio'}
+              Connect wallet to view portfolio
             </Typography>
-            <Button
-              variant="contained"
-              onClick={() =>
-                isWrongNetwork ? switchNetwork(ethChain) : open()
-              }
-            >
-              {isWrongNetwork ? 'Switch Network' : 'Connect Wallet'}
-            </Button>
+            <ConnectButton.Custom>
+              {({openConnectModal}) => (
+                <Button variant="contained" onClick={openConnectModal}>
+                  Connect Wallet
+                </Button>
+              )}
+            </ConnectButton.Custom>
           </Stack>
         </Box>
       )}

apps/app/components/switch-chain-button.tsx

@@ -1,20 +1,16 @@
 'use client'
 
 import {Button} from '@mui/material'
-import {
-  useAppKit,
-  useAppKitAccount,
-  useAppKitNetwork,
-} from '@reown/appkit/react'
+import {ConnectButton} from '@rainbow-me/rainbowkit'
 import {useEffect, useState} from 'react'
+import {useConnection, useSwitchChain} from 'wagmi'
 
 import {ethChain} from '@/config'
 
 const SwitchChainButton = ({children}: {children: React.ReactNode}) => {
   const [isMounted, setIsMounted] = useState(false)
-  const {isConnected} = useAppKitAccount()
-  const {chainId, switchNetwork} = useAppKitNetwork()
-  const {open} = useAppKit()
+  const {isConnected, chainId} = useConnection()
+  const {mutate: switchChain} = useSwitchChain()
 
   useEffect(() => {
     setIsMounted(true)
@@ -27,9 +23,18 @@ const SwitchChainButton = ({children}: {children: React.ReactNode}) => {
 
   if (!isConnected) {
     return (
-      <Button fullWidth size="large" variant="contained" onClick={() => open()}>
-        Connect Wallet
-      </Button>
+      <ConnectButton.Custom>
+        {({openConnectModal}) => (
+          <Button
+            fullWidth
+            size="large"
+            variant="contained"
+            onClick={openConnectModal}
+          >
+            Connect Wallet
+          </Button>
+        )}
+      </ConnectButton.Custom>
     )
   }
 
@@ -40,7 +45,7 @@ const SwitchChainButton = ({children}: {children: React.ReactNode}) => {
         size="large"
         color="warning"
         variant="contained"
-        onClick={() => switchNetwork(ethChain)}
+        onClick={() => switchChain({chainId: ethChain.id})}
       >
         Switch to {ethChain.name}
       </Button>

apps/app/components/top-bar/index.tsx

@@ -26,7 +26,7 @@ import {usePathname} from 'next/navigation'
 import {type FC, useState} from 'react'
 
 import phalaLogo from '@/assets/phala_logo.svg'
-import AppKitButton from '@/components/app-kit-button'
+import WalletButton from '@/components/wallet-button'
 
 const navItems = [
   {label: 'Portfolio', href: '/', external: false},
@@ -202,7 +202,7 @@ const TopBar: FC = () => {
           )}
 
           <Box sx={{ml: isMobile ? 'auto' : 2}}>
-            <AppKitButton />
+            <WalletButton />
           </Box>
         </Toolbar>
       </AppBar>

apps/app/components/wallet-button.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import {Button} from '@mui/material'
+import {ConnectButton} from '@rainbow-me/rainbowkit'
+import {useConnection} from 'wagmi'
+
+export default function WalletButton() {
+  const {isConnected} = useConnection()
+
+  if (isConnected) {
+    return <ConnectButton showBalance={false} chainStatus="none" />
+  }
+
+  return (
+    <ConnectButton.Custom>
+      {({openConnectModal, mounted}) => (
+        <div
+          {...(!mounted && {
+            'aria-hidden': true,
+            style: {
+              opacity: 0,
+              pointerEvents: 'none',
+              userSelect: 'none',
+            },
+          })}
+        >
+          <Button size="small" variant="contained" onClick={openConnectModal}>
+            Connect Wallet
+          </Button>
+        </div>
+      )}
+    </ConnectButton.Custom>
+  )
+}

apps/app/components/web3-provider.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import '@rainbow-me/rainbowkit/styles.css'
+
+import {darkTheme, RainbowKitProvider} from '@rainbow-me/rainbowkit'
 import {
   QueryCache,
   QueryClient,
@@ -8,8 +11,7 @@ import {
 import {type ReactNode, useState} from 'react'
 import {cookieToInitialState, WagmiProvider} from 'wagmi'
 
-// Import to ensure AppKit is initialized
-import {wagmiAdapter} from '@/lib/wagmi'
+import {wagmiConfig} from '@/lib/wagmi'
 
 export const Web3Provider = ({
   children,
@@ -18,7 +20,7 @@ export const Web3Provider = ({
   children: ReactNode
   cookies: string | null
 }) => {
-  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig, cookies)
+  const initialState = cookieToInitialState(wagmiConfig, cookies)
 
   const [queryClient] = useState(
     () =>
@@ -32,11 +34,20 @@ export const Web3Provider = ({
   )
 
   return (
-    <WagmiProvider
-      config={wagmiAdapter.wagmiConfig}
-      initialState={initialState}
-    >
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          initialChain={wagmiConfig.chains[0]}
+          modalSize="compact"
+          theme={darkTheme({
+            accentColor: '#c5ff46',
+            accentColorForeground: 'black',
+            fontStack: 'system',
+          })}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
     </WagmiProvider>
   )
 }

apps/app/config.ts

@@ -1,4 +1,4 @@
-import {mainnet} from '@reown/appkit/networks'
+import {mainnet} from 'wagmi/chains'
 
 export const ethChain = mainnet
 export const explorerUrl = ethChain.blockExplorers.default.url

apps/app/hooks/use-add-token-to-wallet.ts

@@ -10,13 +10,13 @@ interface TokenInfo {
 }
 
 export function useAddTokenToWallet() {
-  const {switchChainAsync} = useSwitchChain()
-  const {watchAsset} = useWatchAsset()
+  const {mutateAsync: switchChain} = useSwitchChain()
+  const {mutate: watchAsset} = useWatchAsset()
 
   const addTokenToWallet = useCallback(
     async ({chainId, address, symbol, decimals = 18, image}: TokenInfo) => {
       try {
-        await switchChainAsync({chainId})
+        await switchChain({chainId})
       } catch (error) {
         console.error('Failed to switch network:', error)
         return false
@@ -38,20 +38,20 @@ export function useAddTokenToWallet() {
         return false
       }
     },
-    [switchChainAsync, watchAsset],
+    [switchChain, watchAsset],
   )
 
   const addNetwork = useCallback(
     async (chainId: number) => {
       try {
-        await switchChainAsync({chainId})
+        await switchChain({chainId})
         return true
       } catch (error) {
         console.error('Failed to add network to wallet:', error)
         return false
       }
     },
-    [switchChainAsync],
+    [switchChain],
   )
 
   return {addTokenToWallet, addNetwork}