feat: remove tutorial videos (#107)

* feat: remove tutorial videos

* feat: remove media-src

* feat: bring back media-src

Author: cpl121

packages/desktop/public/index.html

@@ -10,7 +10,7 @@
             connect-src 'self' https://*.iota.org https://*.iota.works https://*.iota.cafe https://raw.githubusercontent.com/iotaledger/firefly/main/packages/shared/lib/chrysalis.json https://raw.githubusercontent.com/iotaledger/participation-events/master/results/staking/ https://d36tzso9lqxl3c.cloudfront.net/results/staking/ https://iotatreasury.org/how-voting-works.html https://migrator-api.iota-alphanet.iotaledger.net;
             object-src 'none';
             style-src 'self' 'unsafe-inline';
-            media-src 'self' https://d17lo1ro77zjnd.cloudfront.net/firefly/videos/ledger_integration_v12.mp4"
+            media-src 'self'"
         />
 
         <link rel="icon" type="image/png" href="/favicon.png" />

packages/shared/components/OnboardingLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { Icon, ProgressFlow, Text } from 'shared/components'
-    import { ledgerMigrationProgresses, LEDGER_MIGRATION_VIDEO } from 'shared/lib/migration'
+    import { Icon, ProgressFlow } from 'shared/components'
+    import { ledgerMigrationProgresses } from 'shared/lib/migration'
     import { openPopup } from 'shared/lib/popup'
     import { Locale } from '@core/i18n'
 
@@ -12,13 +12,6 @@
     export let showLedgerVideoButton = false
 
     export let onBackClick = (): void => {}
-
-    function handleWatchVideoClick() {
-        openPopup({
-            type: 'video',
-            props: { video: LEDGER_MIGRATION_VIDEO, title: locale('views.setupLedger.videoGuide') },
-        })
-    }
 </script>
 
 <!-- https://github.com/sveltejs/svelte/issues/4546 -->
@@ -61,15 +54,6 @@
                 <ProgressFlow progress={$ledgerMigrationProgresses} />
             </div>
         {/if}
-        {#if showLedgerVideoButton}
-            <button
-                on:click={handleWatchVideoClick}
-                class="absolute top-6 right-6 px-8 py-2.5 text-blue-500 bg-transparent flex flex-row items-center justify-center border border-solid border-gray-300 dark:border-gray-700 rounded-xl"
-            >
-                <Icon icon="play" classes="text-blue-500 mr-2" />
-                <Text smaller overrideColor classes="text-blue-500">{locale('views.setupLedger.watchVideo')}</Text>
-            </button>
-        {/if}
     </div>
 </div>
 

packages/shared/lib/migration.ts

@@ -99,8 +99,6 @@ export const ledgerMigrationProgresses = derived(currentLedgerMigrationProgress,
     }))
 })
 
-export const LEDGER_MIGRATION_VIDEO = 'https://d17lo1ro77zjnd.cloudfront.net/firefly/videos/ledger_integration_v12.mp4'
-
 /*
  * Migration state
  */

packages/shared/locales/en.json

@@ -60,9 +60,7 @@
             "progress1": "Connect your Ledger",
             "progress2": "Generate address",
             "progress3": "Switch Ledger app",
-            "progress4": "Transfer funds",
-            "watchVideo": "Watch video guide",
-            "videoGuide": "Ledger migration video guide"
+            "progress4": "Transfer funds"
         },
         "ledgerInstallationGuide": {
             "title": "Have you installed the necessary Ledger apps?",
@@ -188,7 +186,7 @@
         },
         "legacyLedgerIntro": {
             "title": "Start your Ledger migration using IOTA Legacy Migration Tool",
-            "body1": "IOTA Legacy Migration Tool will help you to transfer your tokens to the new Sturdust network.",
+            "body1": "IOTA Legacy Migration Tool will help you to transfer your tokens to the new Stardust network.",
             "body2": "After the migration, you will be able to send and receive your tokens using your Ledger with Firefly."
         },
         "generateNewLedgerAddress": {

packages/shared/routes/setup/ledger/views/LegacyIntro.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { Button, OnboardingLayout, Text, Video } from 'shared/components'
-    import { initialiseMigrationListeners, LEDGER_MIGRATION_VIDEO } from 'shared/lib/migration'
+    import { Button, OnboardingLayout, Text, Animation, Illustration } from 'shared/components'
+    import { initialiseMigrationListeners } from 'shared/lib/migration'
     import { showAppNotification } from 'shared/lib/notifications'
     import { api, isBackgroundSyncing } from 'shared/lib/wallet'
     import { createEventDispatcher, onMount } from 'svelte'
@@ -47,10 +47,13 @@
     <div slot="leftpane__action">
         <Button classes="w-full" onClick={handleNextClick}>{locale('actions.continue')}</Button>
     </div>
-    <div
-        slot="rightpane"
-        class="w-full h-full px-32 flex flex-col flex-wrap justify-center items-center bg-gray-50 dark:bg-gray-900"
-    >
-        <Video video={LEDGER_MIGRATION_VIDEO} />
+    <!-- TODO: modify this temp animation -->
+    <div slot="rightpane" class="w-full h-full flex justify-center items-center bg-gray-50 dark:bg-gray-900">
+        <Animation
+            width="100%"
+            animation="ledger-bg-desktop"
+            classes="absolute z-0 transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        />
+        <Illustration width="100%" illustration="ledger-install-new-app-desktop" classes="z-0" />
     </div>
 </OnboardingLayout>