feat: add mobile deprecation popup (#7177)

* feat: add mobile deprecation message

* style: polish text

packages/shared/components/popups/Index.svelte

@@ -51,6 +51,7 @@
     import LegalUpdate from './LegalUpdate.svelte'
     import SingleAccountGuide from './SingleAccountGuide.svelte'
     import NodeConfigOptions from './NodeConfigOptions.svelte'
+    import MobileDeprecation from './MobileDeprecation.svelte'
     import { mobile } from 'shared/lib/app'
     import { Platform } from 'shared/lib/platform'
 
@@ -83,6 +84,7 @@
         case 'video':
         case 'ledgerAppGuide':
         case 'ledgerConnectionGuide':
+        case 'mobileDeprecation':
             size = PopupSize.Large
             break
         case 'stakingManager':
@@ -142,6 +144,7 @@
         success: Success,
         singleAccountGuide: SingleAccountGuide,
         nodeConfigOptions: NodeConfigOptions,
+        mobileDeprecation: MobileDeprecation,
     }
 
     const onKey = (e) => {

packages/shared/components/popups/MobileDeprecation.svelte

@@ -0,0 +1,20 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import { closePopup } from '@lib/popup'
+    import { Icon, Button, Text } from 'shared/components'
+</script>
+
+<mobile-deprecation-popup class="flex flex-col text-center justify-between">
+    <div class="flex flex-row space-x-3 items-center justify-center">
+        <Icon icon="warning" classes="text-orange-500" />
+        <Text type="h4" classes="text-center capitalize">{localize('popups.mobileDeprecation.title')}</Text>
+    </div>
+    <Text type="p">{localize('popups.mobileDeprecation.body')}</Text>
+    <Button classes="w-full" onClick={closePopup}>{localize('actions.okIUnderstand')}</Button>
+</mobile-deprecation-popup>
+
+<style lang="scss">
+    mobile-deprecation-popup {
+        min-height: 80vh;
+    }
+</style>

packages/shared/lib/app.ts

@@ -170,3 +170,5 @@ export const isAndroid = writable<boolean>(false)
 
 export const getKeyboardTransitionSpeed = (isKeyboardOpened: boolean): number =>
     isKeyboardOpened ? (get(isAndroid) ? 200 : 400) : 250 // ms
+
+export const deprecationMessageDisplayed = writable<boolean>(false)

packages/shared/locales/en.json

@@ -935,6 +935,10 @@
             "title": "The way you use Firefly has changed",
             "body": "The content of each tab is now in the context of a single wallet. You can change the selected wallet from anywhere by using the switcher in the title bar.",
             "hint": "Can't find a wallet? Use the balance finder in the settings to discover previously used wallets."
+        },
+        "mobileDeprecation": {
+            "title": "Deprecation announcement",
+            "body": "This version of Firefly is deprecated. The IOTA Foundation focuses on enabling core protocol functions through its desktop wallet. To maintain your tokens, we recommend either using Firefly for desktop or a 3rd-party wallet, by importing a Stronghold backup or 24-words backup."
         }
     },
     "charts": {

packages/shared/routes/dashboard/Dashboard.svelte

@@ -21,7 +21,7 @@
     } from '@lib/participation/constants'
     import { activeProfile, isLedgerProfile, isSoftwareProfile, updateProfile } from '@lib/profile'
     import { Idle, Sidebar, MainMenu } from 'shared/components'
-    import { loggedIn, logout, mobile, sendParams } from 'shared/lib/app'
+    import { loggedIn, logout, mobile, sendParams, deprecationMessageDisplayed } from 'shared/lib/app'
     import { appSettings } from 'shared/lib/appSettings'
     import { isPollingLedgerDeviceStatus, pollLedgerDeviceStatus, stopPollingLedgerStatus } from 'shared/lib/ledger'
     import { ongoingSnapshot, openSnapshotPopup } from 'shared/lib/migration'
@@ -389,9 +389,9 @@
         pollLedgerDeviceStatus(false, LEDGER_STATUS_POLL_INTERVAL)
     }
 
-    $: showSingleAccountGuide = !$activeProfile?.hasFinishedSingleAccountGuide
-    $: if (!busy && $accountsLoaded && showSingleAccountGuide) {
-        openPopup({ type: 'singleAccountGuide', hideClose: true, overflow: true })
+    $: if (!busy && $accountsLoaded && !$deprecationMessageDisplayed) {
+        openPopup({ type: 'mobileDeprecation' })
+        $deprecationMessageDisplayed = true
     }
 </script>