Merge pull request #1491 from AmbireTech/fix/wc-connections-ssot

Bug/ WalletConnect two sources of truth for connections (localStorage and WC)
AmbireTech · Dec 7, 2023 · 17968a4 · 17968a4
2 parents d117a9c + 02d4b07
commit 17968a4
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 156 deletions.
diff --git a/src/components/Modals/UnsupportedDAppsModal/UnsupportedDAppsModal.js b/src/components/Modals/UnsupportedDAppsModal/UnsupportedDAppsModal.js
@@ -17,7 +17,7 @@ const UnsupportedDAppsModal = ({ connections, disconnect, advancedModeList, onCo
   }
 
   const handleContinue = () => {
-    onContinue([...advancedModeList, ...connections.map(({ session }) => session.peerMeta.url)])
+    onContinue([...advancedModeList, ...connections.map(({ peer }) => peer.metadata.url)])
     hideModal()
   }
 
@@ -48,21 +48,21 @@ const UnsupportedDAppsModal = ({ connections, disconnect, advancedModeList, onCo
       </div>
 
       <div className={styles.dappsList}>
-        {connections.map(({ session }, i) => (
+        {connections.map(({ peer }, i) => (
           <a
             className={styles.dapp}
             key={`dapp-${i}`}
-            href={session.peerMeta.url}
+            href={peer.metadata.url}
             target="_blank"
             rel="noreferrer"
           >
             <div
               className={styles.icon}
-              style={{ backgroundImage: `url(${session.peerMeta.icons[0]})` }}
+              style={{ backgroundImage: `url(${peer.metadata.icons[0]})` }}
             >
               <MdBrokenImage />
             </div>
-            <div className={styles.name}>{session.peerMeta.name}</div>
+            <div className={styles.name}>{peer.metadata.name}</div>
           </a>
         ))}
       </div>

diff --git a/src/components/Wallet/TopBar/DApps/DApps.js b/src/components/Wallet/TopBar/DApps/DApps.js
@@ -4,13 +4,12 @@ import { useHistory } from 'react-router-dom'
 import { checkClipboardPermission } from 'lib/permissions'
 import { canOpenInIframe } from 'lib/dappsUtils'
 
-import { DropDown, ToolTip, Button, Loading, Icon } from 'components/common'
+import { DropDown, Button, Loading, Icon } from 'components/common'
 import DropDownItem from 'components/common/DropDown/DropDownItem/DropDownItem'
 import DropDownItemSeparator from 'components/common/DropDown/DropDownItem/DropDownItemSeparator'
 
-import { MdOutlineWarning, MdBrokenImage } from 'react-icons/md'
+import { MdBrokenImage } from 'react-icons/md'
 import { FiHelpCircle } from 'react-icons/fi'
-import { AiOutlineDisconnect } from 'react-icons/ai'
 import { ReactComponent as WalletConnect } from 'resources/icons/wallet-connect.svg'
 import { ReactComponent as ConnectIcon } from './images/connect.svg'
 
@@ -42,8 +41,6 @@ const DApps = ({ connections, connect, disconnect, isWcConnecting }) => {
     )
   }, [connect, isClipboardGranted])
 
-  const isLegacyWC = ({ bridge }) => /https:\/\/bridge.walletconnect.org/g.test(bridge)
-
   const onConnectionClick = useCallback(
     async (url) => {
       const canOpen = await canOpenInIframe(url)
@@ -101,38 +98,22 @@ const DApps = ({ connections, connect, disconnect, isWcConnecting }) => {
         ) : null}
       </div>
       <div className={styles.dappList}>
-        {connections.map(({ session, isOffline, topic }) => (
+        {connections.map(({ topic, peer }) => (
           <DropDownItem className={styles.dappsItem} key={topic}>
             <div className={styles.icon}>
               <div
                 className={styles.iconOverlay}
                 style={{
                   backgroundImage: `url(${
-                    session.peerMeta.icons.filter((x) => !x.endsWith('favicon.ico'))[0]
+                    peer.metadata.icons.filter((x) => !x.endsWith('favicon.ico'))[0]
                   })`
                 }}
               />
               <MdBrokenImage />
             </div>
-            <span onClick={() => onConnectionClick(session.peerMeta.url)}>
+            <span onClick={() => onConnectionClick(peer.metadata.url)}>
               <div className={styles.details}>
-                {isLegacyWC(session) ? (
-                  <ToolTip
-                    className={styles.sessionWarning}
-                    label="dApp uses legacy WalletConnect bridge which is unreliable and often doesn't work. Please tell the dApp to update to the latest WalletConnect version."
-                  >
-                    <MdOutlineWarning />
-                  </ToolTip>
-                ) : null}
-                {isOffline ? (
-                  <ToolTip
-                    className={styles.sessionError}
-                    label="WalletConnect connection may be offline. Check again later. If this warning persist try to disconnect and connect WalletConnect."
-                  >
-                    <AiOutlineDisconnect />
-                  </ToolTip>
-                ) : null}
-                <div className={styles.name}>{session.peerMeta.name || 'Untitled dApp'}</div>
+                <div className={styles.name}>{peer.metadata.name || 'Untitled dApp'}</div>
               </div>
             </span>
             <DropDownItemSeparator />

diff --git a/src/components/Wallet/Wallet.js b/src/components/Wallet/Wallet.js
@@ -276,11 +276,11 @@ export default function Wallet(props) {
 
   useEffect(() => {
     const unsupported = props.connections.filter(
-      ({ session }) =>
-        session &&
-        session.peerMeta &&
-        unsupportedDApps.includes(session.peerMeta.url) &&
-        !advancedModeList.includes(session.peerMeta.url)
+      ({ peer }) =>
+        peer &&
+        peer.metadata &&
+        unsupportedDApps.includes(peer.metadata.url) &&
+        !advancedModeList.includes(peer.metadata.url)
     )
 
     if (unsupported.length)