Add Multisig announcement modal

src/components/modals/MultisigAnnouncementModal.vue

@@ -0,0 +1,180 @@
+<template>
+    <Modal ref="modal$">
+        <PageBody class="grid-layout">
+            <div class="content-column">
+                <img src="@/assets/multisig-logo.svg" alt="Multisig" class="logo">
+                <h1 class="nq-h1">{{ $t('Check out Nimiq Multisig Wallets') }}</h1>
+                <p class="nq-text">
+                    {{ $t('Share wallets with family, friends, and business partners.') }}
+                </p>
+                <i18n
+                    tag="p"
+                    path="Read all about it in this {blog_post} or get right into it."
+                    class="nq-text secondary"
+                >
+                    <template #blog_post>
+                        <a href="https://www.nimiq.com/blog/multisig-shared-wallet/" target="_blank" rel="noopener">
+                            {{ $t('blog post') }}
+                        </a>
+                    </template>
+                </i18n>
+                <div class="flex-grow"></div>
+                <button class="nq-button light-blue" @click="visitMultisig" @mousedown.prevent>
+                    {{ $t('VISIT MULTISIG.NIMIQ.COM') }}
+                </button>
+                <a class="nq-link" @click="close">{{ $t('Skip') }} <span class="chevron">›</span></a>
+            </div>
+            <div class="image-column">
+                <img src="@/assets/multisig-announcement.webp" alt="Multisig App" class="hero-image">
+            </div>
+        </PageBody>
+    </Modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { PageBody } from '@nimiq/vue-components';
+import Modal from './Modal.vue';
+import { MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY } from '../../lib/Constants';
+
+export default defineComponent({
+    setup() {
+        const modal$ = ref<Modal>(null);
+
+        function visitMultisig() {
+            window.open('https://multisig.nimiq.com', '_blank', 'noopener,noreferrer');
+            close();
+        }
+
+        function close() {
+            window.localStorage.setItem(MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY, '1');
+            modal$.value!.forceClose();
+        }
+
+        return { modal$, visitMultisig, close };
+    },
+    components: { Modal, PageBody },
+});
+</script>
+
+<style lang="scss" scoped>
+.modal {
+    ::v-deep .small-page {
+        width: 91rem;
+        max-height: 51.2rem;
+        background: white;
+        overflow: hidden;
+    }
+
+    ::v-deep .close-button {
+        display: none;
+    }
+}
+
+.page-body {
+    &.grid-layout {
+        display: grid;
+        grid-template-columns: 0.55fr 0.45fr;
+        gap: 0;
+        padding: 0;
+        height: 100%;
+        grid-template-rows: minmax(0, 1fr);
+    }
+}
+
+.content-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 8rem 2rem 4rem;
+    min-height: 0;
+}
+
+.image-column {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    overflow: hidden;
+    position: relative;
+    min-height: 0;
+}
+
+.hero-image {
+    width: auto;
+    height: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: left top;
+    transform: translateY(3.2rem);
+}
+
+.logo {
+    width: 9.6rem;
+    height: 9.6rem;
+    margin-bottom: 3rem;
+}
+
+.nq-h1 {
+    margin: 0 0 2rem;
+    color: var(--nimiq-blue);
+    text-wrap: balance;
+}
+
+.nq-text {
+    color: var(--nimiq-blue);
+    margin: 0 0 1.5rem;
+    max-width: 30ch;
+    text-wrap: pretty;
+}
+
+.secondary {
+    color: var(--text-60);
+    margin-bottom: 2rem;
+
+    a {
+        color: var(--text-60);
+        text-decoration: underline;
+    }
+}
+
+.nq-link {
+    font-weight: 600;
+    font-size: var(--small-size);
+    color: var(--text-60);
+    margin-bottom: -1.5rem;
+    cursor: pointer;
+
+    .chevron {
+        font-size: 1.25em;
+    }
+}
+
+.nq-button {
+    align-self: stretch;
+}
+
+@media (max-width: 768px) {
+    .modal {
+        ::v-deep .small-page {
+            width: 52.5rem;
+            max-height: none;
+        }
+    }
+
+    .page-body {
+        &.grid-layout {
+            grid-template-columns: 1fr;
+            height: auto;
+        }
+    }
+
+    .image-column {
+        display: none !important;
+    }
+
+    .content-column {
+        padding: 6rem 2rem 4rem;
+    }
+}
+</style>

src/components/staking/WelcomeStakingModal.vue

@@ -113,17 +113,30 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 import { PageHeader, PageBody, PageFooter } from '@nimiq/vue-components';
+import { useRouter, RouteName } from '@/router';
 import Modal from '../modals/Modal.vue';
-import { WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY } from '../../lib/Constants';
+import {
+    WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY,
+    MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
+} from '../../lib/Constants';
 
 export default defineComponent({
     name: 'WelcomeStakingModal',
     setup() {
         const $modal = ref<Modal | null>(null);
+        const router = useRouter();
 
         async function close() {
             window.localStorage.setItem(WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY, '1');
             await $modal.value?.forceClose();
+
+            const multisigModalAlreadyShown = window.localStorage.getItem(
+                MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
+            );
+
+            if (!multisigModalAlreadyShown) {
+                await router.push({ name: RouteName.MultisigAnnouncement });
+            }
         }
 
         return { $modal, close };

src/hub.ts

@@ -34,7 +34,11 @@ import router, { RouteName } from './router';
 import { useSettingsStore } from './stores/Settings';
 import { useFiatStore } from './stores/Fiat';
 import { useKycStore } from './stores/Kyc';
-import { WELCOME_MODAL_LOCALSTORAGE_KEY, WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY } from './lib/Constants';
+import {
+    WELCOME_MODAL_LOCALSTORAGE_KEY,
+    WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY,
+    MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
+} from './lib/Constants';
 import { usePwaInstallPrompt } from './composables/usePwaInstallPrompt';
 import type { SetupSwapWithKycResult, SWAP_KYC_HANDLER_STORAGE_KEY } from './swap-kyc-handler'; // avoid bundling
 import type { RelayServerInfo } from './lib/usdc/OpenGSN';
@@ -400,14 +404,17 @@ export async function syncFromHub() {
         // Prompt for USDC activation, which then leads into the new welcome modal if not shown yet.
         router.push({ name: RouteName.UsdcActivation });
     } else {
-        // Check if the WelcomeStakingModal should be shown
         const welcomeStakingModalAlreadyShown = window.localStorage.getItem(
             WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY,
         );
+        const multisigModalAlreadyShown = window.localStorage.getItem(
+            MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
+        );
 
         if (!welcomeStakingModalAlreadyShown) {
-            // Show WelcomeStakingModal if not shown before
             router.push({ name: RouteName.WelcomeStaking });
+        } else if (!multisigModalAlreadyShown) {
+            router.push({ name: RouteName.MultisigAnnouncement });
         }
     }
 }

src/i18n/de.po

@@ -6,12 +6,12 @@
 # Redexe <timo.niehoff@yahoo.de>, 2024
 # Sören Schwert <hello@soerenschwert.de>, 2024
 # Michael <jiggaaa20@gmail.com>, 2024
-# Michael Passias, 2025
 # Sven <sven@nimiq.com>, 2025
+# Michael Passias, 2025
 # 
 msgid ""
 msgstr ""
-"Last-Translator: Sven <sven@nimiq.com>, 2025\n"
+"Last-Translator: Michael Passias, 2025\n"
 "Language-Team: German (https://app.transifex.com/nimiq-foundation/teams/110181/de/)\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Language: de\n"
@@ -565,6 +565,7 @@ msgstr "Block #{height}"
 msgid "Block explorer"
 msgstr "Block Explorer"
 
+#: src/components/modals/MultisigAnnouncementModal.vue:16
 #: src/components/modals/PolygonActivationModal.vue:28
 msgid "blog post"
 msgstr "Blog Beitrag"
@@ -733,6 +734,10 @@ msgstr "Ändere deine Spracheinstellung."
 msgid "Changing validator"
 msgstr "Validator ändern"
 
+#: src/components/modals/MultisigAnnouncementModal.vue:6
+msgid "Check out Nimiq Multisig Wallets"
+msgstr "Probiere Nimiq-Multisig-Wallets aus."
+
 #: src/components/modals/BtcActivationModal.vue:20
 #: src/components/modals/PolygonActivationModal.vue:97
 msgid "Check the new intro"
@@ -2263,6 +2268,10 @@ msgstr ""
 "Lese mehr darüber ins unserem {blog_post} oder klicke unten für die neue "
 "Wallet Einführung."
 
+#: src/components/modals/MultisigAnnouncementModal.vue:12
+msgid "Read all about it in this {blog_post} or get right into it."
+msgstr "Lies alles darüber in diesem {blog_post} oder leg direkt los."
+
 #: src/components/staking/StakingInfoPage.vue:96
 msgid "ready for pay out"
 msgstr ""
@@ -2700,6 +2709,10 @@ msgstr ""
 "Teile den Link oder QR-Code mit dem Sender. \n"
 "Füge optional einen Betrag hinzu."
 
+#: src/components/modals/MultisigAnnouncementModal.vue:8
+msgid "Share wallets with family, friends, and business partners."
+msgstr "Teile Wallets mit Familie, Freunden und Geschäftspartnern."
+
 #: src/components/modals/ReceiveModal.vue:8
 #: src/components/modals/StablecoinReceiveModal.vue:16
 msgid "Share your address with the sender."
@@ -2739,6 +2752,7 @@ msgid "Simulate EUR payment"
 msgstr "EUR-Zahlung simulieren"
 
 #: src/components/modals/BtcActivationModal.vue:28
+#: src/components/modals/MultisigAnnouncementModal.vue:23
 #: src/components/modals/PolygonActivationModal.vue:46
 msgid "Skip"
 msgstr "Überspringen"
@@ -3493,6 +3507,10 @@ msgstr ""
 msgid "Vesting Contract"
 msgstr "Vesting-Vertrag"
 
+#: src/components/modals/MultisigAnnouncementModal.vue:21
+msgid "VISIT MULTISIG.NIMIQ.COM"
+msgstr "BESUCHE MULTISIG.NIMIQ.COM"
+
 #: src/components/modals/BuyCryptoModal.vue:21
 msgid "Wait for the swap to be set up."
 msgstr "Warte kurz, bis dein Tausch startklar ist."

src/i18n/en.po

@@ -505,6 +505,7 @@ msgstr ""
 msgid "Block explorer"
 msgstr ""
 
+#: src/components/modals/MultisigAnnouncementModal.vue:16
 #: src/components/modals/PolygonActivationModal.vue:28
 msgid "blog post"
 msgstr ""
@@ -661,6 +662,10 @@ msgstr ""
 msgid "Changing validator"
 msgstr ""
 
+#: src/components/modals/MultisigAnnouncementModal.vue:6
+msgid "Check out Nimiq Multisig Wallets"
+msgstr ""
+
 #: src/components/modals/BtcActivationModal.vue:20
 #: src/components/modals/PolygonActivationModal.vue:97
 msgid "Check the new intro"
@@ -2051,6 +2056,10 @@ msgstr ""
 msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
 msgstr ""
 
+#: src/components/modals/MultisigAnnouncementModal.vue:12
+msgid "Read all about it in this {blog_post} or get right into it."
+msgstr ""
+
 #: src/components/staking/StakingInfoPage.vue:96
 msgid "ready for pay out"
 msgstr ""
@@ -2469,6 +2478,10 @@ msgid ""
 "Optionally include an amount. "
 msgstr ""
 
+#: src/components/modals/MultisigAnnouncementModal.vue:8
+msgid "Share wallets with family, friends, and business partners."
+msgstr ""
+
 #: src/components/modals/ReceiveModal.vue:8
 #: src/components/modals/StablecoinReceiveModal.vue:16
 msgid "Share your address with the sender."
@@ -2509,6 +2522,7 @@ msgid "Simulate EUR payment"
 msgstr ""
 
 #: src/components/modals/BtcActivationModal.vue:28
+#: src/components/modals/MultisigAnnouncementModal.vue:23
 #: src/components/modals/PolygonActivationModal.vue:46
 msgid "Skip"
 msgstr ""
@@ -3184,6 +3198,10 @@ msgstr ""
 msgid "Vesting Contract"
 msgstr ""
 
+#: src/components/modals/MultisigAnnouncementModal.vue:21
+msgid "VISIT MULTISIG.NIMIQ.COM"
+msgstr ""
+
 #: src/components/modals/BuyCryptoModal.vue:21
 msgid "Wait for the swap to be set up."
 msgstr ""