feat: improve external navigation (#2127)

* chore: use href instead of on:click * fix: show popups that don't require login * feat: enhance navigation security * chore: move ToS & PP to login router view * enhancement: add confirmation flow in Transak redirects * chore: revert text --------- Co-authored-by: Jean Ribeiro <[email protected]>
bloomwalletio · Mar 14, 2024 · 1fd17bc · 1fd17bc
1 parent d68f4e9
commit 1fd17bc
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 99 deletions.
diff --git a/packages/desktop/components/popup/popups/ActivityDetailsPopup.svelte b/packages/desktop/components/popup/popups/ActivityDetailsPopup.svelte
@@ -10,7 +10,6 @@
         selectedAccountActivities,
     } from '@core/activity'
     import { getTransactionAssets } from '@core/activity/utils'
-    import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
     import { ExplorerEndpoint } from '@core/network'
     import { getDefaultExplorerUrl } from '@core/network/utils'
@@ -143,11 +142,7 @@
     >
         <div slot="description" class="flex">
             {#if explorerUrl && activity.transactionId}
-                <Link
-                    text={localize('general.viewOnExplorer')}
-                    external
-                    on:click={() => openUrlInBrowser(explorerUrl)}
-                />
+                <Link href={explorerUrl} text={localize('general.viewOnExplorer')} external />
             {:else if activity.transactionId}
                 <Link
                     text={truncateString(activity.transactionId, 12, 12)}

diff --git a/packages/desktop/components/popup/popups/ConfirmationPopup.svelte b/packages/desktop/components/popup/popups/ConfirmationPopup.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '@bloomwalletio/ui'
+    import { Alert, Text } from '@bloomwalletio/ui'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
     import { closePopup } from '@desktop/auxiliary/popup'
@@ -9,6 +9,7 @@
     export let variant: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary'
     export let title: string
     export let description: string = ''
+    export let text: string = ''
     export let alert: { variant?: 'success' | 'warning' | 'danger' | 'info'; text: string } | undefined = undefined
     export let backText: string = localize('actions.cancel')
     export let confirmText: string = localize('actions.confirm')
@@ -67,4 +68,7 @@
     {#if alert}
         <Alert {...alert} />
     {/if}
+    {#if text}
+        <Text class="break-all">{text}</Text>
+    {/if}
 </PopupTemplate>
diff --git a/packages/desktop/components/popup/popups/LegalUpdatePopup.svelte b/packages/desktop/components/popup/popups/LegalUpdatePopup.svelte
@@ -6,7 +6,6 @@
         TERMS_OF_SERVICE_VERSION,
         needsToAcceptLatestPrivacyPolicy,
         needsToAcceptLatestTermsOfService,
-        openUrlInBrowser,
     } from '@core/app'
     import { lastAcceptedPrivacyPolicy, lastAcceptedTermsOfService } from '@core/app/stores'
     import { localize } from '@core/i18n'
@@ -18,14 +17,6 @@
     const tos = needsToAcceptLatestTermsOfService()
     const privacyPolicy = needsToAcceptLatestPrivacyPolicy()
 
-    function onTermsOfServiceClick(): void {
-        openUrlInBrowser(TERMS_OF_SERVICE_URL)
-    }
-
-    function onPrivacyPolicyClick(): void {
-        openUrlInBrowser(PRIVACY_POLICY_URL)
-    }
-
     function onConfirmClick(): void {
         if (tos) {
             lastAcceptedTermsOfService.set(TERMS_OF_SERVICE_VERSION)
@@ -71,19 +62,9 @@
         <div slot="label" class="flex flex-col">
             <Text type="body2" fontWeight="medium">{localize('views.onboarding.welcome.legalAction')}</Text>
             <div class="flex">
-                <Link
-                    on:click={onPrivacyPolicyClick}
-                    text={localize('general.privacyPolicy')}
-                    textType="body2"
-                    external
-                />
+                <Link href={PRIVACY_POLICY_URL} text={localize('general.privacyPolicy')} textType="body2" external />
                 <Text type="body2" fontWeight="medium">&nbsp&&nbsp</Text>
-                <Link
-                    on:click={onTermsOfServiceClick}
-                    text={localize('general.termsOfService')}
-                    textType="body2"
-                    external
-                />
+                <Link href={TERMS_OF_SERVICE_URL} text={localize('general.termsOfService')} textType="body2" external />
             </div>
         </div>
     </Checkbox>

diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -141,14 +141,14 @@ export default class TransakManager implements ITransakManager {
         windows.transak.webContents.addListener('did-navigate-in-page', (_, url) => {
             const urlToBeMatched = TRANSAK_WIDGET_URL + '/googlepay'
             if (url.startsWith(urlToBeMatched)) {
-                void shell.openExternal(url)
+                windows.main.webContents.send('try-open-url-in-browser', url)
                 void windows.transak.loadURL(initialUrl)
             }
         })
 
         windows.transak.webContents.addListener('will-navigate', (event) => {
             event.preventDefault()
-            void shell.openExternal(event.url)
+            windows.main.webContents.send('try-open-url-in-browser', event.url)
         })
 
         return windows.transak

diff --git a/packages/desktop/lib/electron/processes/main.process.ts b/packages/desktop/lib/electron/processes/main.process.ts
@@ -233,11 +233,11 @@ export function createMainWindow(): BrowserWindow {
 
     /**
      * `will-navigate` is emitted whenever window.location is updated.
-     *  This happens e.g. when clicking on a link (<a href="www.iota.org").
-     *  The handler only allows navigation to an external browser.
+     *  Navigation to an external browser happens through open-external-url event.
+     *  For security reasons we prevent any navigation through this event.
      */
-    windows.main.webContents.on('will-navigate', (a, b) => {
-        tryOpenExternalUrl(a as unknown as Event, b)
+    windows.main.webContents.on('will-navigate', (e) => {
+        e.preventDefault()
     })
 
     windows.main.on('close', () => {

diff --git a/packages/desktop/lib/helpers.ts b/packages/desktop/lib/helpers.ts
@@ -69,10 +69,10 @@ export function registerMenuButtons(): void {
     })
     Platform.onEvent('menu-error-log', () => {
         closeDrawer()
-        openPopup({ id: PopupId.ErrorLog })
+        openPopup({ id: PopupId.ErrorLog }, false, false)
     })
     Platform.onEvent('menu-diagnostics', () => {
         closeDrawer()
-        openPopup({ id: PopupId.Diagnostics })
+        openPopup({ id: PopupId.Diagnostics }, false, false)
     })
 }
diff --git a/packages/desktop/views/dashboard/campaigns/components/CampaignHeader.svelte b/packages/desktop/views/dashboard/campaigns/components/CampaignHeader.svelte
@@ -116,11 +116,7 @@
                     <CampaignParticipantsPill {campaign} />
                     <CampaignRewardsPill {campaign} />
                 </div>
-                <Link
-                    text={truncateString(campaign.url, 30, 10)}
-                    external
-                    on:click={() => openUrlInBrowser(campaign.url)}
-                />
+                <Link href={campaign.url} text={truncateString(campaign.url, 30, 10)} external />
             </div>
         </div>
     </div>

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { openUrlInBrowser } from '@core/app/utils'
     import { Avatar, IconName, Link, Text } from '@bloomwalletio/ui'
     import { CoreTypes } from '@walletconnect/types'
     import { localize } from '@core/i18n'
@@ -22,7 +21,7 @@
         </Text>
         <div class="flex flex-row items-center gap-1">
             <DappVerificationIcon {verifiedState} />
-            <Link text={metadata?.url} on:click={() => openUrlInBrowser(metadata.url)} />
+            <Link href={metadata.url} text={metadata?.url} />
         </div>
     </div>
     {#if verifiedState && verifiedState !== DappVerification.Valid}

diff --git a/packages/desktop/views/login/LoginRouter.svelte b/packages/desktop/views/login/LoginRouter.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
-    import { Platform } from '@core/app'
+    import { Platform, needsToAcceptLatestPrivacyPolicy, needsToAcceptLatestTermsOfService } from '@core/app'
     import { LoginRoute, loginRoute } from '@core/router'
     import features from '@features/features'
     import { UpdateStrongholdRouterView } from '@views'
     import { LoadProfileView, LoginView, SelectProfileView } from './views'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
 
     $: if (features.analytics.loginRoute.enabled && $loginRoute)
         Platform.trackEvent('login-route', { route: $loginRoute })
+
+    if (needsToAcceptLatestPrivacyPolicy() || needsToAcceptLatestTermsOfService()) {
+        openPopup(
+            {
+                id: PopupId.LegalUpdate,
+                hideClose: true,
+                preventClose: true,
+            },
+            false,
+            false
+        )
+    }
 </script>
 
 {#if $loginRoute === LoginRoute.SelectProfile}

diff --git a/packages/desktop/views/login/views/LoginView.svelte b/packages/desktop/views/login/views/LoginView.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
     import { onDestroy, tick } from 'svelte'
     import { Alert, CloseButton, Error, Icon, IconName, PinInput, Text } from '@bloomwalletio/ui'
-    import {
-        Platform,
-        isLatestStrongholdVersion,
-        needsToAcceptLatestPrivacyPolicy,
-        needsToAcceptLatestTermsOfService,
-    } from '@core/app'
+    import { Platform, isLatestStrongholdVersion } from '@core/app'
     import { localize } from '@core/i18n'
     import { login, resetActiveProfile } from '@core/profile/actions'
     import { activeProfile } from '@core/profile/stores'
     import { loginRouter } from '@core/router'
-    import { PopupId, openPopup, popupState } from '@desktop/auxiliary/popup'
+    import { popupState } from '@desktop/auxiliary/popup'
     import { ProfileAvatarWithBadge } from '@ui'
     import LoggedOutLayout from '@views/components/LoggedOutLayout.svelte'
     import { ProfileType } from '@core/profile/enums'
@@ -32,14 +27,6 @@
     let maxAttemptsTimer: ReturnType<typeof setTimeout> = null
     let shakeTimeout: ReturnType<typeof setTimeout> = null
 
-    if (needsToAcceptLatestPrivacyPolicy() || needsToAcceptLatestTermsOfService()) {
-        openPopup({
-            id: PopupId.LegalUpdate,
-            hideClose: true,
-            preventClose: true,
-        })
-    }
-
     $: updateRequired =
         $activeProfile?.type === ProfileType.Software &&
         !isLatestStrongholdVersion($activeProfile?.strongholdVersion) &&

diff --git a/packages/desktop/views/login/views/SelectProfileView.svelte b/packages/desktop/views/login/views/SelectProfileView.svelte
@@ -2,19 +2,13 @@
     import { onMount } from 'svelte'
     import { Button, IconName } from '@bloomwalletio/ui'
     import { initialiseOnboardingProfile, onboardingProfile } from '@contexts/onboarding'
-    import {
-        AppContext,
-        isLatestStrongholdVersion,
-        needsToAcceptLatestPrivacyPolicy,
-        needsToAcceptLatestTermsOfService,
-    } from '@core/app'
+    import { AppContext, isLatestStrongholdVersion } from '@core/app'
     import { localize } from '@core/i18n'
     import { IPersistedProfile, ProfileType, removeProfileFolder } from '@core/profile'
     import { destroyProfileManager } from '@core/profile-manager/actions'
     import { loadPersistedProfileIntoActiveProfile, resetActiveProfile } from '@core/profile/actions'
     import { profiles } from '@core/profile/stores'
     import { loginRouter, routerManager } from '@core/router'
-    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import features from '@features/features'
     import { LoggedOutLayout } from '@views/components'
     import { OnboardingRouter, onboardingRouter } from '@views/onboarding'
@@ -31,14 +25,6 @@
         $routerManager.goToAppContext(AppContext.Onboarding)
     }
 
-    $: if (needsToAcceptLatestPrivacyPolicy() || needsToAcceptLatestTermsOfService()) {
-        openPopup({
-            id: PopupId.LegalUpdate,
-            hideClose: true,
-            preventClose: true,
-        })
-    }
-
     function updateRequiredForProfile(profile: IPersistedProfile): boolean {
         return (
             profile?.type === ProfileType.Software &&

diff --git a/packages/desktop/views/onboarding/views/WelcomeView.svelte b/packages/desktop/views/onboarding/views/WelcomeView.svelte
@@ -7,7 +7,6 @@
         TERMS_OF_SERVICE_VERSION,
     } from '@core/app/constants'
     import { lastAcceptedPrivacyPolicy, lastAcceptedTermsOfService } from '@core/app/stores'
-    import { openUrlInBrowser } from '@core/app/utils'
     import { localize } from '@core/i18n'
     import { Illustration } from '@ui'
     import { onboardingRouter } from '../onboarding-router'
@@ -16,14 +15,6 @@
     let termsAccepted: boolean = false
     let flash: boolean = false
 
-    function onTermsOfServiceClick(): void {
-        openUrlInBrowser(TERMS_OF_SERVICE_URL)
-    }
-
-    function onPrivacyPolicyClick(): void {
-        openUrlInBrowser(PRIVACY_POLICY_URL)
-    }
-
     function onContinueClick(): void {
         if (!termsAccepted) {
             flash = true
@@ -55,14 +46,10 @@
                     <div slot="label" class="flex flex-col">
                         <Text type="body2" fontWeight="medium">{localize('views.onboarding.welcome.legalAction')}</Text>
                         <div class="flex">
-                            <Link
-                                on:click={onPrivacyPolicyClick}
-                                text={localize('general.privacyPolicy')}
-                                textType="body2"
-                            />
+                            <Link href={PRIVACY_POLICY_URL} text={localize('general.privacyPolicy')} textType="body2" />
                             <Text type="body2" fontWeight="medium">&nbsp&&nbsp</Text>
                             <Link
-                                on:click={onTermsOfServiceClick}
+                                href={TERMS_OF_SERVICE_URL}
                                 text={localize('general.termsOfService')}
                                 textType="body2"
                             />

diff --git a/...reate-from-ledger/views/ledger-connection-guide/components/LedgerStillNotConnected.svelte b/...reate-from-ledger/views/ledger-connection-guide/components/LedgerStillNotConnected.svelte
@@ -2,14 +2,9 @@
     import { Avatar, IconName, Link, Text } from '@bloomwalletio/ui'
     import { LedgerIllustration } from '@ui'
     import { localize } from '@core/i18n'
-    import { openUrlInBrowser } from '@core/app'
 
-    const LEDGER_USB_TROUBLESHOOTING_URL: string =
+    const LEDGER_USB_TROUBLESHOOTING_URL =
         'https://support.ledger.com/hc/en-us/articles/115005165269-Fix-USB-connection-issues-with-Ledger-Live?support=true'
-
-    function onLinkClick(): void {
-        openUrlInBrowser(LEDGER_USB_TROUBLESHOOTING_URL)
-    }
 </script>
 
 <div class="flex flex-row justify-center items-center">
@@ -18,9 +13,9 @@
     </Text>
     &nbsp;
     <Link
+        href={LEDGER_USB_TROUBLESHOOTING_URL}
         text={localize('views.onboarding.createFromLedger.ledgerConnectionGuide.ledgerStillNotConnected.answer')}
         textType="body2"
-        on:click={onLinkClick}
         external
     />
 </div>

diff --git a/packages/shared/src/components/molecules/DappInfo.svelte b/packages/shared/src/components/molecules/DappInfo.svelte
@@ -4,7 +4,6 @@
     import { Avatar, Icon, IconName, Link, Text } from '@bloomwalletio/ui'
     import { DappVerificationPill } from '@ui'
     import { VERIFICATION_ICONS } from '@auxiliary/wallet-connect/constants/verification-icons.constant'
-    import { openUrlInBrowser } from '@core/app/utils'
 
     export let metadata: CoreTypes.Metadata
     export let verifiedState: DappVerification | undefined = undefined
@@ -30,7 +29,7 @@
                     <Icon name={icon} size="xs" textColor={color} />
                 {/if}
                 {#if showLink}
-                    <Link text={metadata?.url} on:click={() => openUrlInBrowser(metadata.url)} />
+                    <Link href={metadata.url} text={metadata.url} />
                 {:else}
                     <Text type="sm" textColor="secondary" truncate>
                         {metadata.url}

diff --git a/packages/shared/src/lib/core/app/utils/openUrlInBrowser.ts b/packages/shared/src/lib/core/app/utils/openUrlInBrowser.ts
@@ -30,7 +30,7 @@ export function openUrlInBrowser(targetUrl: string | undefined): void {
             id: PopupId.Confirmation,
             props: {
                 title: localize('popups.externalUrl.title'),
-                description: localize('popups.externalUrl.body', { values: { url: targetUrl } }),
+                text: localize('popups.externalUrl.body', { values: { url: targetUrl } }),
                 confirmText: localize('popups.externalUrl.action'),
                 onConfirm: () => {
                     openHttpsUrlsOnly(url.protocol, targetUrl)