feat: change iota icon in ledger tips (#7615)

* feat: update guide to install Ledger app catalog picture * feat: update icons in ledger guide --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Nov 2, 2023 · cec9303 · cec9303
1 parent f405fd2
commit cec9303
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 167 deletions.
diff --git a/packages/desktop/components/popups/LedgerAppGuidePopup.svelte b/packages/desktop/components/popups/LedgerAppGuidePopup.svelte
@@ -4,9 +4,10 @@
     import { LedgerAppName, ledgerAppName } from '@core/ledger'
     import { localize } from '@core/i18n'
     import { IllustrationEnum } from '@auxiliary/illustration'
+    import { Icon } from '@auxiliary/icon'
 
     let stepIndex = 0
-    const stepAnimations = [
+    const stepIlustrations = [
         IllustrationEnum.LedgerLiveUpdatedDesktop,
         IllustrationEnum.LedgerConnected2Desktop,
         $ledgerAppName === LedgerAppName.Shimmer
@@ -16,6 +17,14 @@
         IllustrationEnum.LedgerCloseLiveDesktop,
     ]
 
+    const stepIconWithIlustrations = [
+        undefined,
+        undefined,
+        undefined,
+        $ledgerAppName === LedgerAppName.Shimmer ? Icon.Shimmer : Icon.Iota,
+        undefined,
+    ]
+
     function changeIndex(increment: number): void {
         stepIndex += increment
     }
@@ -29,7 +38,12 @@
     {localize('popups.ledgerAppGuide.title', { values: { legacy: $ledgerAppName } })}
 </Text>
 <div class="w-full flex flex-row flex-wrap">
-    <LedgerAnimation illustration={stepAnimations[stepIndex]} classes="illustration-wrapper" bgClasses="top-6" />
+    <LedgerAnimation
+        illustration={stepIlustrations[stepIndex]}
+        iconNetwork={stepIconWithIlustrations[stepIndex]}
+        classes="illustration-wrapper"
+        bgClasses="top-6"
+    />
     <div class="w-full text-center my-9 px-10">
         <Text secondary>
             {localize(`popups.ledgerAppGuide.steps.${stepIndex}`, { values: { legacy: $ledgerAppName } })}

diff --git a/packages/desktop/components/popups/LedgerConnectionGuidePopup.svelte b/packages/desktop/components/popups/LedgerConnectionGuidePopup.svelte
@@ -4,16 +4,24 @@
     import { closePopup } from '@auxiliary/popup'
     import { localize } from '@core/i18n'
     import { IllustrationEnum } from '@auxiliary/illustration'
-    import { ledgerAppName } from '@core/ledger'
+    import { LedgerAppName, ledgerAppName } from '@core/ledger'
+    import { Icon } from '@auxiliary/icon'
 
     let stepIndex = 0
-    const stepAnimations = [
+    const stepIllustrations = [
         IllustrationEnum.LedgerBackgroundLiveDesktop,
         IllustrationEnum.LedgerPinDesktop,
         IllustrationEnum.LedgerOpenAppDesktop,
         IllustrationEnum.LedgerSupport,
     ]
 
+    const stepIconWithIlustrations = [
+        undefined,
+        undefined,
+        $ledgerAppName === LedgerAppName.Shimmer ? Icon.Shimmer : Icon.Iota,
+        undefined,
+    ]
+
     function changeIndex(increment: number): void {
         stepIndex += increment
     }
@@ -25,7 +33,12 @@
 
 <Text type={TextType.h4} classes="mb-6">{localize('popups.ledgerConnectionGuide.title')}</Text>
 <div class="w-full flex flex-row flex-wrap relative z-0">
-    <LedgerAnimation illustration={stepAnimations[stepIndex]} classes="illustration-wrapper" bgClasses="top-7" />
+    <LedgerAnimation
+        illustration={stepIllustrations[stepIndex]}
+        iconNetwork={stepIconWithIlustrations[stepIndex]}
+        classes="illustration-wrapper"
+        bgClasses="top-7"
+    />
     <div class="w-full text-center my-9 px-10 z-10">
         {#if typeof localize(`popups.ledgerConnectionGuide.steps.${stepIndex}`) === 'string'}
             <Text secondary classes="inline-block"

diff --git a/packages/shared/assets/illustrations/onboarding/ledger-install-apps-desktop.svg b/packages/shared/assets/illustrations/onboarding/ledger-install-apps-desktop.svg
diff --git a/packages/shared/assets/illustrations/onboarding/ledger-install-new-app-desktop.svg b/packages/shared/assets/illustrations/onboarding/ledger-install-new-app-desktop.svg