fix: wallet connect stale storage issue (#151)

src/components/nav/ConnectButton.tsx

@@ -6,6 +6,7 @@ import { Identicon } from 'src/components/Identicon'
 import { SolidButton } from 'src/components/buttons/SolidButton'
 import { BalancesSummary } from 'src/components/nav/BalancesSummary'
 import { NetworkModal } from 'src/components/nav/NetworkModal'
+import { cleanupStaleWalletSessions } from 'src/config/wallets'
 import ClipboardDark from 'src/images/icons/clipboard-plus-dark.svg'
 import Clipboard from 'src/images/icons/clipboard-plus.svg'
 import CubeDark from 'src/images/icons/cube-dark.svg'
@@ -24,6 +25,11 @@ export function ConnectButton() {
   const { openConnectModal } = useConnectModal()
   const { disconnect } = useDisconnect()
 
+  const onClickConnect = () => {
+    cleanupStaleWalletSessions()
+    openConnectModal?.()
+  }
+
   const onClickCopy = async () => {
     if (!address) return
     await tryClipboardSet(address)
@@ -91,7 +97,7 @@ export function ConnectButton() {
               styles="sm:mr-3"
             />
           }
-          onClick={openConnectModal}
+          onClick={onClickConnect}
         >
           <div className="hidden sm:block">Connect</div>
         </SolidButton>

src/components/nav/NetworkModal.tsx

@@ -1,5 +1,6 @@
 import { toast } from 'react-toastify'
 import { ChainMetadata, allChains, chainIdToChain } from 'src/config/chains'
+import { cleanupStaleWalletSessions } from 'src/config/wallets'
 import { reset as accountReset } from 'src/features/accounts/accountSlice'
 import { reset as blockReset } from 'src/features/blocks/blockSlice'
 import { resetTokenPrices } from 'src/features/chart/tokenPriceSlice'
@@ -25,6 +26,7 @@ export function NetworkModal({ isOpen, close }: Props) {
     try {
       if (!switchNetworkAsync) throw new Error('switchNetworkAsync undefined')
       logger.debug('Resetting and switching to network', c.name)
+      cleanupStaleWalletSessions()
       await switchNetworkAsync(c.chainId)
       dispatch(blockReset())
       dispatch(accountReset())
@@ -38,9 +40,9 @@ export function NetworkModal({ isOpen, close }: Props) {
 
   return (
     <Modal isOpen={isOpen} close={close} title="Network details" width="max-w-md">
-      <div className="px-4 sm:px-6 w-full justify-between items-end inline-flex">
-        <div className="w-full py-3 sm:py-4 bg-gray-100 dark:bg-zinc-900 rounded-xl font-inter border border-gray-200 dark:border-zinc-800 flex-col justify-start items-center gap-4 inline-flex">
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+      <div className="inline-flex items-end justify-between w-full px-4 sm:px-6">
+        <div className="inline-flex flex-col items-center justify-start w-full gap-4 py-3 bg-gray-100 border border-gray-200 sm:py-4 dark:bg-zinc-900 rounded-xl font-inter dark:border-zinc-800">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Connected to:
             </div>
@@ -49,7 +51,7 @@ export function NetworkModal({ isOpen, close }: Props) {
             </div>
           </div>
           <div className="w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Block Number:
             </div>
@@ -58,7 +60,7 @@ export function NetworkModal({ isOpen, close }: Props) {
             </div>
           </div>
           <div className="w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Node Rpc Url:
             </div>
@@ -69,7 +71,7 @@ export function NetworkModal({ isOpen, close }: Props) {
         </div>
       </div>
       <div className="mt-4 sm:mt-6 w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-      <div className="py-4 sm:py-6 px-4 sm:px-6 w-full justify-start items-start gap-4 inline-flex font-inter">
+      <div className="inline-flex items-start justify-start w-full gap-4 px-4 py-4 sm:py-6 sm:px-6 font-inter">
         {allChains.map((c) => (
           <button
             onClick={() => switchToNetwork(c)}
@@ -97,27 +99,27 @@ export function NetworkModal({ isOpen, close }: Props) {
 }
 /*
         <div className="grow shrink basis-0 h-[50px] px-4 py-3 rounded-lg border border border border border-gray-950 justify-center items-center flex">
-          <div className="justify-start items-center gap-1 flex">
+          <div className="flex items-center justify-start gap-1">
             <div className="text-gray-950 text-[16px] font-semibold leading-relaxed">Baklava</div>
           </div>
         </div>
 
 
       <div className="relative flex flex-col items-center">
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Connected to:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Connected to:</div>
           <div className="w-48 ml-1 text-sm">{currentChain?.name || 'Unknown'}</div>
         </div>
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Block Number:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Block Number:</div>
           <div className="w-48 ml-1 text-sm">{latestBlock?.number || 'Unknown'}</div>
         </div>
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Node Rpc Url:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Node Rpc Url:</div>
           <div className="w-48 ml-1 text-sm">{shortenUrl(currentChain?.rpcUrl) || 'Unknown'}</div>
         </div>
         <HrDivider classes="my-6" />
-        <div className="flex items-center space-x-6 pb-2">
+        <div className="flex items-center pb-2 space-x-6">
           {allChains.map((c) => (
             <button
               onClick={() => switchToNetwork(c)}

src/config/wallets.ts

@@ -7,6 +7,7 @@ import {
 } from '@rainbow-me/rainbowkit/wallets'
 import { Valora } from 'src/config/celoWallets'
 import { config } from 'src/config/config'
+import { logger } from 'src/utils/logger'
 
 export function getWalletConnectors(chains: Chain[]) {
   const connectorConfig = {
@@ -24,3 +25,30 @@ export function getWalletConnectors(chains: Chain[]) {
     trustWallet(connectorConfig),
   ]
 }
+
+/**
+ * Remove wallet connect local storage data
+ * @dev We got into an issue where the walletconnect data was in a corrupted state
+ *      and causing issues with wallet connection. This will remove the data from
+ *      localStorage to clean up the state.
+ */
+export const cleanupStaleWalletSessions = () => {
+  logger.debug('Clearing wallet connect local storage data')
+  const wcStorageKeys = Object.keys(localStorage).filter(
+    (key) => key.startsWith('wc@') || key.startsWith('walletconnect')
+  )
+
+  logger.debug(`Found ${wcStorageKeys.length} wallet connect keys`)
+
+  wcStorageKeys.forEach((key) => {
+    try {
+      const item = localStorage.getItem(key)
+      if (!item) return
+
+      localStorage.removeItem(key)
+      logger.debug(`Removed wallet connect value for key: ${key}`)
+    } catch (error) {
+      logger.error(`Failed to remove wallet connect value for key: ${key}`, error)
+    }
+  })
+}