fix(ui): prevent the error of an already connected wallet

ton-connect · May 27, 2024 · b41996e · b41996e
1 parent 4a0e7f4
commit b41996e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 25 deletions.
diff --git a/packages/ui/src/app/utils/bridge.ts b/packages/ui/src/app/utils/bridge.ts
@@ -0,0 +1,18 @@
+import { PersonalizedWalletInfo } from 'src/app/models/personalized-wallet-info';
+import { isWalletInfoRemote } from '@tonconnect/sdk';
+
+export function getUniqueBridges(walletsList: PersonalizedWalletInfo[]): { bridgeUrl: string }[] {
+    const uniqueBridges = new Set(
+        walletsList.filter(isWalletInfoRemote).map(item => item.bridgeUrl)
+    );
+    return Array.from(uniqueBridges).map(bridgeUrl => ({ bridgeUrl }));
+}
+
+export function bridgesIsEqual(
+    left: { bridgeUrl: string }[] | null,
+    right: { bridgeUrl: string }[] | null
+): boolean {
+    const leftSet = new Set(left?.map(i => i.bridgeUrl));
+    const rightSet = new Set(right?.map(i => i.bridgeUrl));
+    return leftSet.size === rightSet.size && [...leftSet].every(value => rightSet.has(value));
+}
diff --git a/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx
@@ -80,15 +80,18 @@ export const DesktopConnectionModal: Component<DesktopConnectionProps> = props =
     onCleanup(unsubscribe);
 
     const generateUniversalLink = (): void => {
-        setUniversalLink(
-            connector.connect(
+        // TODO: prevent double generation of universal link later and remove try-catch
+        try {
+            const universalLink = connector.connect(
                 {
                     universalLink: props.wallet.universalLink,
                     bridgeUrl: props.wallet.bridgeUrl
                 },
                 props.additionalRequest
-            )
-        );
+            );
+
+            setUniversalLink(universalLink);
+        } catch (e) {}
     };
 
     createEffect(() => {
@@ -187,7 +190,7 @@ export const DesktopConnectionModal: Component<DesktopConnectionProps> = props =
                     translationKey="walletModal.desktopConnectionModal.scanQR"
                     translationValues={{ name: props.wallet.name }}
                 >
-                    Scan the QR code below with your phone’s or {props.wallet.name}’s camera
+                    Scan the QR code below with your phone’s or {props.wallet.name}’s camera
                 </H2Styled>
             </Show>
 
@@ -234,7 +237,7 @@ export const DesktopConnectionModal: Component<DesktopConnectionProps> = props =
                                 translationKey="walletModal.desktopConnectionModal.dontHaveExtension"
                                 translationValues={{ name: props.wallet.name }}
                             >
-                                Seems you don't have installed {props.wallet.name} browser extension
+                                Seems you don't have installed {props.wallet.name} browser extension
                             </BodyTextStyled>
                             <ButtonsContainerStyled>
                                 <Link href={props.wallet.aboutUrl} blank>

diff --git a/...s-modal/desltop-universal-modal/index.tsx → ...s-modal/desktop-universal-modal/index.tsx b/...s-modal/desltop-universal-modal/index.tsx → ...s-modal/desktop-universal-modal/index.tsx
@@ -1,10 +1,10 @@
 import { Component, createMemo, createSignal, For } from 'solid-js';
 import {
+    DesktopUniversalModalStyled,
+    H2AvailableWalletsStyled,
     H2Styled,
     QRCodeStyled,
-    H2AvailableWalletsStyled,
-    WalletsContainerStyled,
-    DesktopUniversalModalStyled
+    WalletsContainerStyled
 } from './style';
 import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonconnect/sdk';
 import { appState } from 'src/app/state/app.state';
@@ -14,6 +14,7 @@ import { PersonalizedWalletInfo } from 'src/app/models/personalized-wallet-info'
 import { IMG } from 'src/app/env/IMG';
 
 import { addReturnStrategy } from 'src/app/utils/url-strategy-helpers';
+import { bridgesIsEqual, getUniqueBridges } from 'src/app/utils/bridge';
 
 interface DesktopUniversalModalProps {
     additionalRequest: ConnectAdditionalRequest;
@@ -29,11 +30,9 @@ export const DesktopUniversalModal: Component<DesktopUniversalModalProps> = prop
     const [popupOpened, setPopupOpened] = createSignal(false);
     const connector = appState.connector;
 
-    const walletsBridges = () => [...new Set(props.walletsList
-        .filter(isWalletInfoRemote)
-        .map(item => item.bridgeUrl ))
-        .values()]
-        .map(bridgeUrl => ({ bridgeUrl }));
+    const walletsBridges = createMemo(() => getUniqueBridges(props.walletsList), null, {
+        equals: bridgesIsEqual
+    });
 
     setLastSelectedWalletInfo({ openMethod: 'qrcode' });
     const request = createMemo(() => connector.connect(walletsBridges(), props.additionalRequest));

diff --git a/...ts-modal/desltop-universal-modal/style.ts → ...ts-modal/desktop-universal-modal/style.ts b/...ts-modal/desltop-universal-modal/style.ts → ...ts-modal/desktop-universal-modal/style.ts
diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx
@@ -1,5 +1,5 @@
 import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonconnect/sdk';
-import { Component, createSignal, For, Show } from 'solid-js';
+import { Component, createMemo, createSignal, For, Show } from 'solid-js';
 import {
     AtWalletIcon,
     CopyLightIcon,
@@ -31,7 +31,8 @@ import { copyToClipboard } from 'src/app/utils/copy-to-clipboard';
 import { TonConnectUIError } from 'src/errors';
 import { MobileUniversalQR } from './mobile-universal-qr';
 import { Translation } from 'src/app/components/typography/Translation';
-import { addReturnStrategy, redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
+import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
+import { bridgesIsEqual, getUniqueBridges } from 'src/app/utils/bridge';
 
 interface MobileUniversalModalProps {
     walletsList: WalletInfo[];
@@ -51,15 +52,13 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
         props.walletsList.filter(w => supportsMobile(w) && w.appName !== AT_WALLET_APP_NAME);
     const shouldShowMoreButton = (): boolean => walletsList().length > 7;
 
-    const walletsBridges = () =>
-        [
-            ...new Set(
-                props.walletsList.filter(isWalletInfoRemote).map(item => item.bridgeUrl)
-            ).values()
-        ].map(bridgeUrl => ({ bridgeUrl }));
+    const walletsBridges = createMemo(() => getUniqueBridges(props.walletsList), null, {
+        equals: bridgesIsEqual
+    });
 
-    const getUniversalLink = (): string =>
-        connector.connect(walletsBridges(), props.additionalRequest);
+    const getUniversalLink = createMemo((): string =>
+        connector.connect(walletsBridges(), props.additionalRequest)
+    );
 
     setLastSelectedWalletInfo({ openMethod: 'universal-link' });
 

diff --git a/packages/ui/src/app/views/modals/wallets-modal/wallets-modal.tsx b/packages/ui/src/app/views/modals/wallets-modal/wallets-modal.tsx
@@ -33,7 +33,7 @@ import { DesktopConnectionModal } from 'src/app/views/modals/wallets-modal/deskt
 import { InfoModal } from 'src/app/views/modals/wallets-modal/info-modal';
 import { MobileConnectionModal } from 'src/app/views/modals/wallets-modal/mobile-connection-modal';
 import { MobileUniversalModal } from 'src/app/views/modals/wallets-modal/mobile-universal-modal';
-import { DesktopUniversalModal } from 'src/app/views/modals/wallets-modal/desltop-universal-modal';
+import { DesktopUniversalModal } from 'src/app/views/modals/wallets-modal/desktop-universal-modal';
 import { Dynamic } from 'solid-js/web';
 import { WalletsModalCloseReason } from 'src/models';