feat: add deprecation disclaimer and popup (#8664)

* add disclaimer and popup

* update popup for shimmer network

* update contetn, allow external url and rename popup

---------

Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>

Author: evavirseda

packages/desktop/App.svelte

@@ -81,6 +81,7 @@
     void setupI18n({ fallbackLocale: 'en', initialLocale: $appSettings.language })
 
     onMount(async () => {
+        openPopup({ id: PopupId.AppDeprecation })
         features.analytics.appStart.enabled && Platform.trackEvent('app-start')
         await cleanupEmptyProfiles()
         checkAndMigrateProfiles()

packages/desktop/components/popups/AppDeprecationPopup.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { Button, Text, TextType, TextHint } from 'shared/components'
+    import { TextHintVariant } from 'shared/components/enums'
+    import { getEnabledNetworkFromFeatureFlags } from '@core/network'
+    import { NetworkId } from '@core/network/enums'
+
+    const NETWORK_ID = getEnabledNetworkFromFeatureFlags()
+
+    function onLinkClick(): void {
+        window.open('https://chrome.google.com/webstore/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija', '_blank')
+    }
+</script>
+
+{#if NETWORK_ID === [NetworkId.Shimmer] || NETWORK_ID === [NetworkId.ShimmerTestnet]}
+    <Text type={TextType.h5} classes="mb-5">Firefly Shimmer is no longer maintained</Text>
+    <div class="flex w-full flex-col space-y-6">
+        <div class="flex w-full flex-col space-y-4">
+            <TextHint
+                variant={TextHintVariant.Info}
+                text="Firefly Shimmer is no longer maintained or receiving updates"
+            />
+            <Text fontSize="15"
+                >Firefly Shimmer is no longer actively maintained by the IOTA Foundation. Please use it at your own
+                risk, as future issues or vulnerabilities may not be addressed.</Text
+            >
+        </div>
+    </div>
+{:else}
+    <Text type={TextType.h5} classes="mb-5">Switch to the new IOTA Wallet</Text>
+    <div class="flex w-full flex-col space-y-6">
+        <div class="flex w-full flex-col space-y-4">
+            <TextHint variant={TextHintVariant.Info} text="Firefly is no longer maintained or receiving updates" />
+            <Text fontSize="15"
+                >Firefly is no longer actively maintained by the IOTA Foundation and is no longer compatible with the
+                new IOTA Network.
+            </Text>
+            <Text fontSize="15">Please switch to our new IOTA Wallet browser extension.</Text>
+        </div>
+        <Button classes="w-full" onClick={onLinkClick}>Download New IOTA Wallet</Button>
+    </div>
+{/if}

packages/desktop/components/popups/Popup.svelte

@@ -58,6 +58,7 @@
     import PayoutDetailsPopup from './PayoutDetailsPopup.svelte'
     import VestingRewardsFinderPopup from './VestingRewardsFinderPopup.svelte'
     import WithdrawFromL2Popup from './WithdrawFromL2Popup.svelte'
+    import AppDeprecationPopup from './AppDeprecationPopup.svelte'
     import GetSeedPopup from './GetSeedPopup.svelte'
 
     export let id: PopupId
@@ -147,6 +148,7 @@
         [PopupId.PayoutDetails]: PayoutDetailsPopup,
         [PopupId.VestingRewardsFinder]: VestingRewardsFinderPopup,
         [PopupId.WithdrawFromL2]: WithdrawFromL2Popup,
+        [PopupId.AppDeprecation]: AppDeprecationPopup,
         [PopupId.GetSeedPopup]: GetSeedPopup,
     }
 

packages/desktop/views/dashboard/Dashboard.svelte

@@ -141,6 +141,21 @@
 
 <Idle />
 <div class="dashboard-wrapper flex flex-col w-full h-full">
+    {#if $activeProfile?.network?.id !== NetworkId.Shimmer || $activeProfile?.network?.id !== NetworkId.ShimmerTestnet}
+        <div
+            class=" bg-blue-100 dark:bg-gray-800 flex flex-row gap-1 items-center justify-center py-2 font-400 text-13 leading-160 text-center"
+        >
+            <span class=" text-gray-800 dark:text-white max-w-lg"
+                >Please switch to the new IOTA Wallet for continued support and updates.
+            </span>
+            <a
+                href="https://chromewebstore.google.com/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-blue-500 underline">Download here</a
+            >
+        </div>
+    {/if}
     <TopNavigation />
     <div class="flex flex-row flex-auto h-1">
         <Sidebar />

packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts

@@ -50,5 +50,6 @@ export enum PopupId {
     PayoutDetails = 'payoutDetails',
     VestingRewardsFinder = 'vestingRewardsFinder',
     WithdrawFromL2 = 'withdrawFromL2',
+    AppDeprecation = 'AppDeprecation',
     GetSeedPopup = 'getseed',
 }

packages/shared/lib/core/app/constants/external-allowed-links.constant.ts

@@ -23,4 +23,6 @@ export const externalAllowedLinks = [
 
     // Other
     'support.ledger.com',
+    // New extension wallet
+    'chromewebstore.google.com/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija',
 ]