refactor+fix: ledger app name check (#2797)

* fix: InstallLedgerView icons * refactor: ledger app name check * fix: pr comments Co-authored-by: Jean Ribeiro <[email protected]> --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Sep 18, 2024 · 05f471d · 05f471d
1 parent 4155fb4
commit 05f471d
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 74 deletions.
diff --git a/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte b/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte
@@ -38,6 +38,7 @@
 
     const networkSearchMethod: { [key in StardustNetworkId]?: () => Promise<void> } = {
         [SupportedStardustNetworkId.Iota]: multiAddressSearch,
+        [SupportedStardustNetworkId.IotaTestnet]: multiAddressSearch,
         [SupportedStardustNetworkId.Shimmer]: singleAddressSearch,
         [SupportedStardustNetworkId.Testnet]: singleAddressSearch,
     }
@@ -163,7 +164,7 @@
     }}
 >
     <div class="flex flex-col overflow-hidden gap-5">
-        {#if network?.id === SupportedStardustNetworkId.Iota}
+        {#if network?.id === SupportedStardustNetworkId.Iota || network?.id === SupportedStardustNetworkId.IotaTestnet}
             <div class="flex gap-2">
                 <Toggle
                     label={localize('popups.walletFinder.singleAccountSearch')}

diff --git a/...ages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte b/...ages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte
@@ -1,31 +1,27 @@
 <script lang="ts">
     import { Button, IconName, Text } from '@bloomwalletio/ui'
     import { Animation, Illustration } from '@ui'
-    import { completeOnboardingProcess, isOnboardingLedgerProfile, onboardingProfile } from '@contexts/onboarding'
+    import { completeOnboardingProcess, isOnboardingLedgerProfile } from '@contexts/onboarding'
     import { localize } from '@core/i18n'
-    import { LedgerAppName, checkOrConnectLedger } from '@core/ledger'
+    import { checkOrConnectLedger } from '@core/ledger'
     import { profiles } from '@core/profile/stores'
     import { OnboardingLayout } from '@views/components'
     import SuccessSvg from '@views/onboarding/components/SuccessSvg.svelte'
     import { onboardingRouter } from '@views/onboarding/onboarding-router'
     import LoggedOutLayout from '@views/components/LoggedOutLayout.svelte'
     import features from '@features/features'
     import { login } from '@core/profile/actions'
-    import { SupportedStardustNetworkId } from '@core/network'
     import { handleError } from '@core/error/handlers'
     import { onMount } from 'svelte'
 
     const LOCALE_KEY = 'views.onboarding.completeOnboarding.finishOnboarding'
 
     let isAppSetup = false
 
-    $: appName =
-        $onboardingProfile?.network?.id === SupportedStardustNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
-
     async function onContinueClick(): Promise<void> {
         try {
             if ($isOnboardingLedgerProfile) {
-                await checkOrConnectLedger(appName)
+                await checkOrConnectLedger()
             }
             await completeOnboardingProcess()
             void login({ isFromOnboardingFlow: true })

diff --git a/packages/desktop/views/onboarding/views/create-from-ledger/views/ConnectLedgerView.svelte b/packages/desktop/views/onboarding/views/create-from-ledger/views/ConnectLedgerView.svelte
@@ -1,25 +1,18 @@
 <script lang="ts">
     import { Icon, IconName, Link, Avatar, Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import {
-        LedgerAppName,
-        LedgerConnectionState,
-        MINIMUM_SUPPORTED_LEDGER_APP_VERSION,
-        ledgerConnectionAppState,
-    } from '@core/ledger'
+    import { LedgerConnectionState, MINIMUM_SUPPORTED_LEDGER_APP_VERSION, ledgerConnectionAppState } from '@core/ledger'
     import { OnboardingLayout } from '@views/components'
     import { createFromLedgerRouter } from '..'
     import { CreateFromLedgerRoute } from '../create-from-ledger-route.enum'
-    import { onboardingProfile } from '@contexts/onboarding'
-    import { SupportedStardustNetworkId } from '@core/network'
     import { StepCard } from './components'
     import { LedgerIllustration } from '@ui'
+    import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
     $: isDisconnected = $ledgerConnectionAppState?.state === LedgerConnectionState.Disconnected
     $: isLocked = isDisconnected || $ledgerConnectionAppState?.state === LedgerConnectionState.Locked
     $: isOpen = $ledgerConnectionAppState?.state === LedgerConnectionState.AppOpen
-    $: appName =
-        $onboardingProfile?.network?.id === SupportedStardustNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
+    $: appName = getProfileLedgerAppName()
     $: isCorrectApp = $ledgerConnectionAppState?.app === appName
     $: isUnsupportedVersion = $ledgerConnectionAppState?.state === LedgerConnectionState.UnsupportedVersion
     $: minimumVersion = MINIMUM_SUPPORTED_LEDGER_APP_VERSION[appName]

diff --git a/packages/desktop/views/onboarding/views/create-from-ledger/views/InstallLedgerView.svelte b/packages/desktop/views/onboarding/views/create-from-ledger/views/InstallLedgerView.svelte
@@ -5,8 +5,9 @@
     import { OnboardingLayout } from '@views/components'
     import { onMount } from 'svelte'
     import { createFromLedgerRouter } from '../create-from-ledger-router'
-    import { onboardingProfile } from '@contexts/onboarding'
-    import { SupportedStardustNetworkId } from '@core/network/constants'
+    import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
+
+    const appName = getProfileLedgerAppName()
 
     function onContinueClick(): void {
         $createFromLedgerRouter.next()
@@ -17,6 +18,20 @@
         $createFromLedgerRouter.previous()
     }
 
+    const LEDGER_APP_ICON_DETAILS = {
+        [LedgerAppName.Iota]: {
+            iconName: IconName.Iota,
+            iconColor: '#ffffff',
+            backgroundColor: 'bg-black',
+        },
+        [LedgerAppName.Shimmer]: {
+            iconName: IconName.ShimmerLedger,
+            iconColor: 'neutral-1',
+            backgroundColor: 'bg-neutral-4',
+            textColor: 'neutral-4/95',
+        },
+    }
+
     onMount(() => {
         pollLedgerDeviceState()
     })
@@ -33,17 +48,11 @@
     }}
 >
     <content slot="content">
-        {#if $onboardingProfile?.network?.id === SupportedStardustNetworkId.Iota}
-            <icon-container class="bg-black">
-                <Icon name={IconName.Iota} size="lg" customColor="#ffffff" />
-            </icon-container>
-            <Text>{LedgerAppName.Iota}</Text>
-        {:else}
-            <icon-container class="bg-neutral-4">
-                <Icon name={IconName.ShimmerLedger} size="lg" customColor="neutral-1" />
-            </icon-container>
-            <Text customColor="neutral-4/95">{LedgerAppName.Shimmer}</Text>
-        {/if}
+        {@const { iconName, iconColor, backgroundColor, textColor } = LEDGER_APP_ICON_DETAILS[appName]}
+        <icon-container class={backgroundColor}>
+            <Icon name={iconName} size="lg" customColor={iconColor} />
+        </icon-container>
+        <Text customColor={textColor}>{appName}</Text>
     </content>
 </OnboardingLayout>
 

diff --git a/...ng/views/create-from-ledger/views/ledger-connection-guide/components/LedgerAppOpen.svelte b/...ng/views/create-from-ledger/views/ledger-connection-guide/components/LedgerAppOpen.svelte
@@ -3,16 +3,10 @@
     import { LedgerIllustration } from '@ui'
     import { localize } from '@core/i18n'
     import { LedgerAppName } from '@core/ledger'
-    import { get } from 'svelte/store'
-    import { onboardingProfile } from '@contexts/onboarding'
-    import { SupportedStardustNetworkId } from '@core/network'
+    import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
-    const ledgerAppName: LedgerAppName =
-        get(onboardingProfile)?.network?.id === SupportedStardustNetworkId.Iota
-            ? LedgerAppName.Iota
-            : LedgerAppName.Shimmer
-    const icon: IconName =
-        get(onboardingProfile)?.network?.id === SupportedStardustNetworkId.Iota ? IconName.Iota : IconName.Shimmer
+    const ledgerAppName = getProfileLedgerAppName()
+    const icon = ledgerAppName === LedgerAppName.Iota ? IconName.Iota : IconName.Shimmer
 </script>
 
 <Text type="body2" textColor="secondary" align="center">

diff --git a/packages/desktop/views/onboarding/views/restore-profile/views/BalanceFinderView.svelte b/packages/desktop/views/onboarding/views/restore-profile/views/BalanceFinderView.svelte
@@ -4,7 +4,7 @@
     import { IAccount } from '@core/account'
     import { DEFAULT_SYNC_OPTIONS } from '@core/account/constants'
     import { localize } from '@core/i18n'
-    import { LedgerAppName, checkOrConnectLedger, ledgerRaceConditionProtectionWrapper } from '@core/ledger'
+    import { checkOrConnectLedger, ledgerRaceConditionProtectionWrapper } from '@core/ledger'
     import { SupportedStardustNetworkId } from '@core/network/constants'
     import { NetworkId } from '@core/network/types'
     import { ProfileType } from '@core/profile'
@@ -37,6 +37,7 @@
 
     const networkSearchMethod: { [key in NetworkId]?: () => Promise<void> } = {
         [SupportedStardustNetworkId.Iota]: multiAddressSearch,
+        [SupportedStardustNetworkId.IotaTestnet]: multiAddressSearch,
         [SupportedStardustNetworkId.Shimmer]: singleAddressSearch,
         [SupportedStardustNetworkId.Testnet]: singleAddressSearch,
     }
@@ -133,9 +134,7 @@
 
     async function onFindBalancesClick(): Promise<void> {
         if (type === ProfileType.Ledger) {
-            await checkOrConnectLedger(
-                network?.id === SupportedStardustNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
-            )
+            await checkOrConnectLedger()
         }
         await findBalances()
     }

diff --git a/...c/lib/auxiliary/third-party/constants/network-name-to-stardust-network-id-map.constant.ts b/...c/lib/auxiliary/third-party/constants/network-name-to-stardust-network-id-map.constant.ts
@@ -2,6 +2,7 @@ import { SupportedStardustNetworkId, StardustNetworkName, StardustNetworkId } fr
 
 export const NETWORK_NAME_TO_STARDUST_NETWORK_ID_MAP: Record<string, StardustNetworkId> = {
     [SupportedStardustNetworkId.Iota]: SupportedStardustNetworkId.Iota,
+    [SupportedStardustNetworkId.IotaTestnet]: SupportedStardustNetworkId.IotaTestnet,
     iota: SupportedStardustNetworkId.Iota,
     [StardustNetworkName.Shimmer]: SupportedStardustNetworkId.Shimmer,
     [StardustNetworkName.Testnet]: SupportedStardustNetworkId.Testnet,

diff --git a/packages/shared/src/lib/core/ledger/actions/checkOrConnectLedger.ts b/packages/shared/src/lib/core/ledger/actions/checkOrConnectLedger.ts
@@ -1,14 +1,9 @@
 import { openProfileAuthPopup, ProfileAuthPopupId } from '../../../../../../desktop/lib/auxiliary/popup'
 import { get } from 'svelte/store'
 import { LedgerAppName, LedgerConnectionState, ledgerConnectionAppState } from '..'
-import { activeProfile } from '@core/profile/stores'
-import { SupportedNetworkId } from '@core/network/constants'
+import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
-export function checkOrConnectLedger(
-    ledgerAppName: LedgerAppName = get(activeProfile)?.network?.id === SupportedNetworkId.Iota
-        ? LedgerAppName.Iota
-        : LedgerAppName.Shimmer
-): Promise<void> {
+export function checkOrConnectLedger(ledgerAppName: LedgerAppName = getProfileLedgerAppName()): Promise<void> {
     const isCorrectApp = get(ledgerConnectionAppState)?.app === ledgerAppName
     const isOpen = get(ledgerConnectionAppState)?.state === LedgerConnectionState.AppOpen
     return new Promise((resolve, reject) => {

diff --git a/packages/shared/src/lib/core/ledger/utils/handleLedgerError.ts b/packages/shared/src/lib/core/ledger/utils/handleLedgerError.ts
@@ -13,12 +13,11 @@ import {
 } from '../../../../../../desktop/lib/auxiliary/popup'
 
 import { LEDGER_ERROR_LOCALES } from '../constants'
-import { LedgerAppName, LedgerError } from '../enums'
+import { LedgerError } from '../enums'
 import { deriveLedgerError } from '../helpers'
 import { checkOrConnectLedger, ledgerPreparedOutput, resetLedgerPreparedOutput } from '@core/ledger'
 import { sendOutput } from '@core/wallet'
-import { activeProfile } from '@core/profile/stores'
-import { SupportedNetworkId } from '@core/network/constants'
+import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
 export function handleLedgerError(err: unknown, resetConfirmationPropsOnDenial = true): void {
     const error = (err as IError)?.error ?? (err as string)
@@ -51,8 +50,7 @@ export function handleLedgerError(err: unknown, resetConfirmationPropsOnDenial =
      */
     const hadToEnableBlindSinging = popupType === ProfileAuthPopupId.EnableLedgerBlindSigning && wasDeniedByUser
     if (hadToEnableBlindSinging) {
-        const appName =
-            get(activeProfile)?.network?.id === SupportedNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
+        const appName = getProfileLedgerAppName()
         openProfileAuthPopup({
             id: ProfileAuthPopupId.EnableLedgerBlindSigning,
             props: {

diff --git a/packages/shared/src/lib/core/ledger/utils/isLedgerDeviceMatchingActiveProfile.ts b/packages/shared/src/lib/core/ledger/utils/isLedgerDeviceMatchingActiveProfile.ts
@@ -1,15 +1,11 @@
 import { getSelectedAccount } from '@core/account/stores'
 import { getProfileManager } from '@core/profile-manager/stores'
 
-import { LedgerAppName } from '../enums'
 import { isLedgerAppOpen } from './isLedgerAppOpen'
-import { activeProfile } from '@core/profile/stores'
-import { get } from 'svelte/store'
-import { SupportedNetworkId } from '@core/network'
+import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
 export async function isLedgerDeviceMatchingActiveProfile(): Promise<boolean | undefined> {
-    const appName =
-        get(activeProfile)?.network?.id === SupportedNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
+    const appName = getProfileLedgerAppName()
     if (isLedgerAppOpen(appName)) {
         try {
             const account = getSelectedAccount()

diff --git a/packages/shared/src/lib/core/network/utils/getNetworkIdFromOnboardingNetworkType.ts b/packages/shared/src/lib/core/network/utils/getNetworkIdFromOnboardingNetworkType.ts
@@ -11,6 +11,7 @@ export function getNetworkIdFromOnboardingNetworkType(
 
     const nameMap: { [key in OnboardingNetworkType]?: StardustNetworkId } = {
         [OnboardingNetworkType.Iota]: SupportedStardustNetworkId.Iota,
+        [OnboardingNetworkType.IotaTestnet]: SupportedStardustNetworkId.IotaTestnet,
         [OnboardingNetworkType.Shimmer]: SupportedStardustNetworkId.Shimmer,
         [OnboardingNetworkType.Testnet]: SupportedStardustNetworkId.Testnet,
     }

diff --git a/...ed/src/lib/core/profile-manager/actions/events-handlers/handleTransactionProgressEvent.ts b/...ed/src/lib/core/profile-manager/actions/events-handlers/handleTransactionProgressEvent.ts
@@ -1,9 +1,8 @@
 import { isOnboardingLedgerProfile } from '@contexts/onboarding'
 import { selectedAccountIndex } from '@core/account/stores'
-import { LedgerAppName } from '@core/ledger/enums'
 import { ledgerDeviceState, ledgerPreparedOutput, resetLedgerPreparedOutput } from '@core/ledger/stores'
 import { deconstructLedgerVerificationProps } from '@core/ledger/helpers'
-import { activeProfile, isActiveLedgerProfile } from '@core/profile/stores'
+import { isActiveLedgerProfile } from '@core/profile/stores'
 import {
     Event,
     PreparedTransactionEssenceHashProgress,
@@ -23,7 +22,7 @@ import { validateWalletApiEvent } from '../../utils'
 import { checkOrConnectLedger } from '@core/ledger/actions'
 import { handleError } from '@core/error/handlers'
 import { sendOutput } from '@core/wallet/actions'
-import { SupportedNetworkId } from '@core/network/constants'
+import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 
 export function handleTransactionProgressEvent(error: Error, event: Event): void {
     const walletEvent = validateWalletApiEvent<TransactionProgressWalletEvent>(
@@ -66,8 +65,7 @@ function openPopupIfVerificationNeeded(progress: TransactionProgress): void {
             },
         })
     } else if (type === TransactionProgressType.PreparedTransactionEssenceHash) {
-        const appName =
-            get(activeProfile)?.network?.id === SupportedNetworkId.Iota ? LedgerAppName.Iota : LedgerAppName.Shimmer
+        const appName = getProfileLedgerAppName()
         if (get(ledgerDeviceState)?.settings?.[appName]?.blindSigningEnabled) {
             openProfileAuthPopup({
                 id: ProfileAuthPopupId.VerifyLedgerTransaction,

diff --git a/packages/shared/src/lib/core/profile/actions/active-profile/checkActiveProfileAuth.ts b/packages/shared/src/lib/core/profile/actions/active-profile/checkActiveProfileAuth.ts
@@ -1,15 +1,11 @@
 import { checkOrConnectLedger } from '@core/ledger/actions'
 import { LedgerAppName } from '@core/ledger/enums'
-import { SupportedNetworkId } from '@core/network'
-import { activeProfile, isActiveLedgerProfile, isSoftwareProfile } from '@core/profile/stores'
+import { isActiveLedgerProfile, isSoftwareProfile } from '@core/profile/stores'
+import { getProfileLedgerAppName } from '@core/profile/actions/active-profile'
 import { checkOrUnlockStronghold } from '@core/stronghold/actions'
 import { get } from 'svelte/store'
 
-export async function checkActiveProfileAuth(
-    ledgerAppName: LedgerAppName = get(activeProfile)?.network?.id === SupportedNetworkId.Iota
-        ? LedgerAppName.Iota
-        : LedgerAppName.Shimmer
-): Promise<void> {
+export async function checkActiveProfileAuth(ledgerAppName: LedgerAppName = getProfileLedgerAppName()): Promise<void> {
     if (get(isSoftwareProfile)) {
         await checkOrUnlockStronghold()
     } else if (get(isActiveLedgerProfile)) {

diff --git a/packages/shared/src/lib/core/profile/actions/active-profile/getProfileLedgerAppName.ts b/packages/shared/src/lib/core/profile/actions/active-profile/getProfileLedgerAppName.ts
@@ -0,0 +1,23 @@
+import { IOnboardingProfile, onboardingProfile } from '@contexts/onboarding'
+import { LedgerAppName } from '@core/ledger'
+import { get } from 'svelte/store'
+import { SupportedStardustNetworkId } from '@core/network'
+import { IProfile } from '@core/profile/interfaces'
+import { activeProfile } from '@core/profile/stores'
+
+export function getProfileLedgerAppName(
+    profile: IProfile | Partial<IOnboardingProfile> = get(onboardingProfile) ?? get(activeProfile)
+): LedgerAppName {
+    const networkId = profile?.network?.id
+
+    switch (networkId) {
+        case SupportedStardustNetworkId.Iota:
+        case SupportedStardustNetworkId.IotaTestnet:
+            return LedgerAppName.Iota
+        case SupportedStardustNetworkId.Shimmer:
+        case SupportedStardustNetworkId.Testnet:
+            return LedgerAppName.Shimmer
+        default:
+            throw new Error(`Unsupported network id: ${networkId}`)
+    }
+}
diff --git a/packages/shared/src/lib/core/profile/actions/active-profile/index.ts b/packages/shared/src/lib/core/profile/actions/active-profile/index.ts
@@ -3,6 +3,7 @@ export * from './checkAndRemoveProfilePicture'
 export * from './checkAndInitializeActiveProfileNetwork'
 export * from './getBaseToken'
 export * from './getNetworkHrp'
+export * from './getProfileLedgerAppName'
 export * from './loadAccounts'
 export * from './loadPersistedProfileIntoActiveProfile'
 export * from './lockStronghold'