From 8d8f2e754a758df9a0297fcb0aab356a8ebaa461 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Wed, 10 Jul 2024 09:18:22 -0500
Subject: [PATCH] Links for wallets (#2265)

* Add links for wallets

* Change logic around support banner

Show non-supported banner regardless if user wallet is connected or not

* Fix TS errors
---
 .../src/components/SupportedBrowserBanner.tsx |  8 ++---
 .../src/utils/getSupportedBrowser.tsx         | 11 +++++++
 .../WalletProvider/WalletDialog.tsx           | 33 ++++++++++++++++---
 3 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 centrifuge-app/src/utils/getSupportedBrowser.tsx

diff --git a/centrifuge-app/src/components/SupportedBrowserBanner.tsx b/centrifuge-app/src/components/SupportedBrowserBanner.tsx
index f70476d3e9..a3869147d3 100644
--- a/centrifuge-app/src/components/SupportedBrowserBanner.tsx
+++ b/centrifuge-app/src/components/SupportedBrowserBanner.tsx
@@ -1,11 +1,11 @@
-import { useWallet } from '@centrifuge/centrifuge-react'
 import { Banner, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { getSupportedBrowser } from '../utils/getSupportedBrowser'
 
 export const SupportedBrowserBanner = () => {
-  const wallet = useWallet()
   const storageKey = 'browser-banner-seen'
-  const isSupported = navigator.userAgent.indexOf('Chrome') > -1
+  const browser = getSupportedBrowser()
+  const isSupported = browser !== 'unknown'
   const [isOpen, setIsOpen] = React.useState(false)
 
   React.useEffect(() => {
@@ -17,7 +17,7 @@ export const SupportedBrowserBanner = () => {
     setIsOpen(false)
   }
 
-  if (isSupported || !wallet.connectedNetwork) {
+  if (isSupported) {
     return null
   }
 
diff --git a/centrifuge-app/src/utils/getSupportedBrowser.tsx b/centrifuge-app/src/utils/getSupportedBrowser.tsx
new file mode 100644
index 0000000000..e2732a0c59
--- /dev/null
+++ b/centrifuge-app/src/utils/getSupportedBrowser.tsx
@@ -0,0 +1,11 @@
+// Function to detect the browser
+export const getSupportedBrowser = () => {
+  const userAgent = navigator.userAgent
+  if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
+    return 'chrome'
+  } else if (userAgent.includes('Firefox')) {
+    return 'firefox'
+  } else {
+    return 'unknown'
+  }
+}
diff --git a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx b/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx
index 3f1852c9fd..569c0622ed 100644
--- a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx
+++ b/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx
@@ -1,3 +1,4 @@
+import { getSupportedBrowser } from '@centrifuge/centrifuge-app/src/utils/getSupportedBrowser'
 import {
   Button,
   Card,
@@ -34,12 +35,36 @@ type Props = {
   showFinoa?: boolean
 }
 
+type WalletFn = {
+  installUrl: string
+  extensionName?: string
+}
+
 const title = {
   networks: 'Connect wallet',
   wallets: 'Connect wallet',
   accounts: 'Choose account',
 }
 
+const walletsList: { [key: string]: string } = {
+  talisman: 'talisman-wallet-extension',
+  'subwallet-js': 'subwallet',
+  'polkadot-js': 'polkadot-js-extension',
+  'fearless-wallet': 'fearless-wallet',
+  metamask: 'ether-metamask',
+}
+
+const getAdjustedInstallUrl = (wallet: WalletFn): string => {
+  const browser = getSupportedBrowser()
+  const { installUrl } = wallet
+  if (browser === 'firefox') {
+    const extensionName = wallet.extensionName ?? 'metamask'
+    return `https://addons.mozilla.org/en-US/firefox/addon/${walletsList[extensionName]}/`
+  } else {
+    return installUrl
+  }
+}
+
 export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, showTestNets, showFinoa }: Props) {
   const evmChains = Object.keys(allEvmChains)
     .filter((chainId) => (!showTestNets ? !(allEvmChains as any)[chainId].isTestnet : true))
@@ -198,8 +223,8 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh
               }
             >
               <Grid minColumnWidth={120} mt={3} gap={1}>
-                {shownWallets.map((wallet) =>
-                  wallet.installed ? (
+                {shownWallets.map((wallet) => {
+                  return wallet.installed ? (
                     <SelectButton
                       key={wallet.title}
                       logo={<Logo icon={wallet.logo.src} />}
@@ -221,7 +246,7 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh
                   ) : (
                     <SelectAnchor
                       key={wallet.title}
-                      href={wallet.installUrl}
+                      href={getAdjustedInstallUrl(wallet)}
                       logo={<Logo icon={wallet.logo.src} />}
                       iconRight={<IconDownload size="iconSmall" color="textPrimary" />}
                       muted={isMuted(selectedNetwork!)}
@@ -229,7 +254,7 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh
                       {wallet.title}
                     </SelectAnchor>
                   )
-                )}
+                })}
               </Grid>
             </SelectionStep>
           </>