From daa6edd3d7a018d0a3a085f1de4f39c809b47e04 Mon Sep 17 00:00:00 2001 From: Isacco Date: Tue, 12 Sep 2023 15:34:53 +0200 Subject: [PATCH] fix: mergeWallet function --- packages/beacon-ui/src/ui/alert/index.tsx | 76 +++++++++++++---------- packages/beacon-ui/src/utils/wallets.ts | 46 ++++++++++++-- 2 files changed, 83 insertions(+), 39 deletions(-) diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx index b34d5b5c0..74354d22a 100644 --- a/packages/beacon-ui/src/ui/alert/index.tsx +++ b/packages/beacon-ui/src/ui/alert/index.tsx @@ -33,6 +33,7 @@ import { arrangeTopWallets, MergedWallet, mergeWallets, + OSLink, parseWallets, Wallet } from 'src/utils/wallets' @@ -389,6 +390,41 @@ const openAlert = async (config: AlertConfig): Promise => { if (config.closeButtonCallback) config.closeButtonCallback() } + const handleNewTab = async (config: AlertConfig, wallet?: MergedWallet) => { + if(!wallet) { + return + } + + if (config.pairingPayload) { + // Noopener feature parameter cannot be used, because Chrome will open + // about:blank#blocked instead and it will no longer work. + const newTab = window.open('', '_blank') + + if (newTab) { + newTab.opener = null + } + + let link = '' + + if (wallet.supportedInteractionStandards?.includes('wallet_connect')) { + const uri = (await wcPayload)?.uri + if (uri) { + link = `${wallet.links[OSLink.WEB]}/wc?uri=${encodeURIComponent(uri)}` + } + } else { + const serializer = new Serializer() + const code = await serializer.serialize(await p2pPayload) + link = getTzip10Link(wallet.links[OSLink.WEB], code) + } + + if (newTab) { + newTab.location.href = link + } else { + window.open(link, '_blank', 'noopener') + } + } + } + const handleClickWallet = async (id: string) => { if (isLoading()) return @@ -409,35 +445,7 @@ const openAlert = async (config: AlertConfig): Promise => { wallet?.types.includes('ios') ) ) { - if (config.pairingPayload) { - // Noopener feature parameter cannot be used, because Chrome will open - // about:blank#blocked instead and it will no longer work. - const newTab = window.open('', '_blank') - - if (newTab) { - newTab.opener = null - } - - let link = '' - - if (wallet.supportedInteractionStandards?.includes('wallet_connect')) { - const uri = (await wcPayload)?.uri - if (uri) { - link = `${wallet.link}/wc?uri=${encodeURIComponent(uri)}` - } - } else { - const serializer = new Serializer() - const code = await serializer.serialize(await p2pPayload) - link = getTzip10Link(wallet.link, code) - } - - if (newTab) { - newTab.location.href = link - } else { - window.open(link, '_blank', 'noopener') - } - } - + handleNewTab(config, wallet) return } @@ -479,7 +487,7 @@ const openAlert = async (config: AlertConfig): Promise => { ? wallet.deepLink : isAndroid(window) ? 'tezos://' - : wallet.link, + : wallet.links[OSLink.IOS], code ) @@ -541,7 +549,7 @@ const openAlert = async (config: AlertConfig): Promise => { analytics()?.track('click', 'ui', 'install extension', { key: currentWallet()?.key }) setShowMoreContent(false) - window.open(currentWallet()?.link || '', '_blank', 'noopener') + window.open(currentWallet()?.links[OSLink.EXTENSION] || '', '_blank', 'noopener') } const handleClickOpenDesktopApp = async () => { @@ -560,7 +568,7 @@ const openAlert = async (config: AlertConfig): Promise => { analytics()?.track('click', 'ui', 'download desktop', { key: currentWallet()?.key }) setShowMoreContent(false) - window.open(currentWallet()?.link || '', '_blank', 'noopener') + window.open(currentWallet()?.links[OSLink.DESKTOP] || '', '_blank', 'noopener') } const hasExtension = () => @@ -610,14 +618,14 @@ const openAlert = async (config: AlertConfig): Promise => { {!isMobile() && isOnline && currentWallet()?.types.includes('web') && ( - window.open(currentWallet()?.link, '_blank', 'noopener') + handleNewTab(config, currentWallet()) } ]} /> diff --git a/packages/beacon-ui/src/utils/wallets.ts b/packages/beacon-ui/src/utils/wallets.ts index 7acaa9df1..da0f87dea 100644 --- a/packages/beacon-ui/src/utils/wallets.ts +++ b/packages/beacon-ui/src/utils/wallets.ts @@ -18,12 +18,19 @@ export interface MergedWallet { image: string descriptions: string[] types: string[] - link: string + links: string[] supportedInteractionStandards?: ('wallet_connect' | 'beacon')[] // 'wallet_connect' or 'beacon', tags?: string[] deepLink?: string } +export enum OSLink { + WEB, + IOS, + DESKTOP, + EXTENSION +} + export function parseWallets(wallets: Wallet[]): Wallet[] { return wallets.map((wallet) => { const tokens = ['Web', 'web', 'App', 'app', 'Mobile', 'mobile'] @@ -35,6 +42,26 @@ export function parseWallets(wallets: Wallet[]): Wallet[] { }) } +function setWallet(newWallet: MergedWallet, type: string, link: string) { + let choice: OSLink + + switch (type) { + case 'web': + choice = OSLink.WEB + break + case 'extension': + choice = OSLink.EXTENSION + break + case 'ios': + choice = OSLink.IOS + break + default: + choice = OSLink.DESKTOP + } + + newWallet.links[choice] = link; +} + export function arrangeTopWallets(arr: MergedWallet[], walletIds: string[]): MergedWallet[] { const idsToMoveToFront = walletIds.slice(0, 4) const itemsToMoveToFront = [] @@ -77,21 +104,30 @@ export function mergeWallets(wallets: Wallet[]): MergedWallet[] { const mergedWalletsNames = mergedWallets.map((_wallet) => _wallet.name) if (mergedWalletsNames.includes(wallet.name)) { const index = mergedWallets.findIndex((_wallet) => _wallet.name === wallet.name) - if (index < 0) console.error('There should be a wallet') - if (!mergedWallets[index].descriptions.includes(wallet.description)) + if (index < 0) { + console.error('There should be a wallet') + } + if (!mergedWallets[index].descriptions.includes(wallet.description)) { + setWallet(mergedWallets[index], wallet.type, wallet.link); mergedWallets[index].descriptions.push(wallet.description) + } mergedWallets[index].types.push(wallet.type) mergedWallets[index].deepLink = wallet.deepLink mergedWallets[index].firefoxId = wallet.key.includes('firefox') ? wallet.id : mergedWallets[index].firefoxId } else { - mergedWallets.push({ + const newWallet: MergedWallet = { ...wallet, descriptions: [wallet.description], + links: ['', '', '', ''], types: [wallet.type], firefoxId: wallet.key.includes('firefox') ? wallet.id : undefined - }) + } + + setWallet(newWallet, wallet.type, wallet.link); + + mergedWallets.push(newWallet) } } return mergedWallets