Skip to content

Commit 19e3518

Browse files
onmaxonmax
committed
Add multisig announcement modal
1 parent 3730c95 commit 19e3518

7 files changed

Lines changed: 223 additions & 4 deletions

File tree

‎src/assets/multisig-announcement.webp‎

93.8 KB
Loading

‎src/assets/multisig-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/modals/MultisigAnnouncementModal.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<Modal ref="modal$">
3+
<PageBody class="grid-layout">
4+
<div class="content-column">
5+
<img src="@/assets/multisig-logo.svg" alt="Multisig" class="logo">
6+
<h1 class="nq-h1">{{ $t('Check out Nimiq Multisig Wallets') }}</h1>
7+
<p class="nq-text">
8+
{{ $t('Share wallets with family, friends, and business partners.') }}
9+
</p>
10+
<i18n
11+
tag="p"
12+
path="Read all about it in this {blog_post} or get right into it."
13+
class="nq-text secondary"
14+
>
15+
<template #blog_post>
16+
<a href="https://www.nimiq.com/blog/" target="_blank" rel="noopener">{{ $t('blog post') }}</a>
17+
</template>
18+
</i18n>
19+
<div class="flex-grow"></div>
20+
<button class="nq-button light-blue" @click="visitMultisig" @mousedown.prevent>
21+
{{ $t('VISIT MULTISIG.NIMIQ.COM') }}
22+
</button>
23+
<a class="nq-link" @click="close">{{ $t('Skip') }} <span class="chevron">›</span></a>
24+
</div>
25+
<div class="image-column">
26+
<img src="@/assets/multisig-announcement.webp" alt="Multisig App" class="hero-image">
27+
</div>
28+
</PageBody>
29+
</Modal>
30+
</template>
31+
32+
<script lang="ts">
33+
import { defineComponent, ref } from '@vue/composition-api';
34+
import { PageBody } from '@nimiq/vue-components';
35+
import Modal from './Modal.vue';
36+
import { MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY } from '../../lib/Constants';
37+
38+
export default defineComponent({
39+
setup() {
40+
const modal$ = ref<Modal>(null);
41+
42+
function visitMultisig() {
43+
window.open('https://multisig.nimiq.com', '_blank', 'noopener,noreferrer');
44+
close();
45+
}
46+
47+
function close() {
48+
window.localStorage.setItem(MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY, 'true');
49+
modal$.value!.forceClose();
50+
}
51+
52+
return { modal$, visitMultisig, close };
53+
},
54+
components: { Modal, PageBody },
55+
});
56+
</script>
57+
58+
<style lang="scss" scoped>
59+
.modal {
60+
::v-deep .small-page {
61+
width: 91rem;
62+
max-height: 51.2rem;
63+
background: white;
64+
overflow: hidden;
65+
}
66+
67+
::v-deep .close-button {
68+
display: none;
69+
}
70+
}
71+
72+
.page-body {
73+
&.grid-layout {
74+
display: grid;
75+
grid-template-columns: 0.55fr 0.45fr;
76+
gap: 0;
77+
padding: 0;
78+
height: 100%;
79+
grid-template-rows: minmax(0, 1fr);
80+
}
81+
}
82+
83+
.content-column {
84+
display: flex;
85+
flex-direction: column;
86+
align-items: center;
87+
text-align: center;
88+
padding: 8rem 2rem 4rem;
89+
min-height: 0;
90+
}
91+
92+
.image-column {
93+
display: flex;
94+
align-items: flex-start;
95+
justify-content: flex-start;
96+
overflow: hidden;
97+
position: relative;
98+
min-height: 0;
99+
}
100+
101+
.hero-image {
102+
width: auto;
103+
height: 100%;
104+
max-height: 100%;
105+
object-fit: cover;
106+
object-position: left top;
107+
transform: translateY(3.2rem);
108+
}
109+
110+
.logo {
111+
width: 9.6rem;
112+
height: 9.6rem;
113+
margin-bottom: 3rem;
114+
}
115+
116+
.nq-h1 {
117+
margin: 0 0 2rem;
118+
color: var(--nimiq-blue);
119+
text-wrap: balance;
120+
}
121+
122+
.nq-text {
123+
color: var(--nimiq-blue);
124+
margin: 0 0 1.5rem;
125+
max-width: 30ch;
126+
text-wrap: pretty;
127+
}
128+
129+
.secondary {
130+
color: var(--text-60);
131+
margin-bottom: 2rem;
132+
133+
a {
134+
color: var(--text-60);
135+
text-decoration: underline;
136+
}
137+
}
138+
139+
.nq-link {
140+
font-weight: 600;
141+
font-size: var(--small-size);
142+
color: var(--text-60);
143+
margin-bottom: -1.5rem;
144+
cursor: pointer;
145+
146+
.chevron {
147+
font-size: 1.25em;
148+
}
149+
}
150+
151+
.nq-button {
152+
align-self: stretch;
153+
}
154+
155+
@media (max-width: 768px) {
156+
.modal {
157+
::v-deep .small-page {
158+
width: 52.5rem;
159+
max-height: none;
160+
}
161+
}
162+
163+
.page-body {
164+
&.grid-layout {
165+
grid-template-columns: 1fr;
166+
height: auto;
167+
}
168+
}
169+
170+
.image-column {
171+
display: none !important;
172+
}
173+
174+
.content-column {
175+
padding: 6rem 2rem 4rem;
176+
}
177+
}
178+
</style>

‎src/hub.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ import router, { RouteName } from './router';
3434
import { useSettingsStore } from './stores/Settings';
3535
import { useFiatStore } from './stores/Fiat';
3636
import { useKycStore } from './stores/Kyc';
37-
import { WELCOME_MODAL_LOCALSTORAGE_KEY, WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY } from './lib/Constants';
37+
import {
38+
WELCOME_MODAL_LOCALSTORAGE_KEY,
39+
WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY,
40+
MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
41+
} from './lib/Constants';
3842
import { usePwaInstallPrompt } from './composables/usePwaInstallPrompt';
3943
import type { SetupSwapWithKycResult, SWAP_KYC_HANDLER_STORAGE_KEY } from './swap-kyc-handler'; // avoid bundling
4044
import type { RelayServerInfo } from './lib/usdc/OpenGSN';
@@ -400,13 +404,16 @@ export async function syncFromHub() {
400404
// Prompt for USDC activation, which then leads into the new welcome modal if not shown yet.
401405
router.push({ name: RouteName.UsdcActivation });
402406
} else {
403-
// Check if the WelcomeStakingModal should be shown
407+
const multisigModalAlreadyShown = window.localStorage.getItem(
408+
MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY,
409+
);
404410
const welcomeStakingModalAlreadyShown = window.localStorage.getItem(
405411
WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY,
406412
);
407413

408-
if (!welcomeStakingModalAlreadyShown) {
409-
// Show WelcomeStakingModal if not shown before
414+
if (!multisigModalAlreadyShown && areOptionalRedirectsAllowed(router.currentRoute)) {
415+
router.push({ name: RouteName.MultisigAnnouncement });
416+
} else if (!welcomeStakingModalAlreadyShown) {
410417
router.push({ name: RouteName.WelcomeStaking });
411418
}
412419
}

‎src/i18n/en.po‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,7 @@ msgstr ""
481481
msgid "Block explorer"
482482
msgstr ""
483483

484+
#: src/components/modals/MultisigAnnouncementModal.vue:14
484485
#: src/components/modals/PolygonActivationModal.vue:28
485486
msgid "blog post"
486487
msgstr ""
@@ -637,6 +638,12 @@ msgstr ""
637638
msgid "Changing validator"
638639
msgstr ""
639640

641+
#: src/components/modals/MultisigAnnouncementModal.vue:8
642+
msgid ""
643+
"Check out Nimiq\n"
644+
"Multisig Wallets"
645+
msgstr ""
646+
640647
#: src/components/modals/BtcActivationModal.vue:20
641648
#: src/components/modals/PolygonActivationModal.vue:97
642649
msgid "Check the new intro"
@@ -1990,6 +1997,10 @@ msgstr ""
19901997
msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
19911998
msgstr ""
19921999

2000+
#: src/components/modals/MultisigAnnouncementModal.vue:12
2001+
msgid "Read all about it in this {blog_post} or get right into it."
2002+
msgstr ""
2003+
19932004
#: src/components/layouts/AddressOverview.vue:212
19942005
#: src/components/MobileActionBar.vue:4
19952006
msgid "Receive"
@@ -2400,6 +2411,12 @@ msgid ""
24002411
"Optionally include an amount. "
24012412
msgstr ""
24022413

2414+
#: src/components/modals/MultisigAnnouncementModal.vue:10
2415+
msgid ""
2416+
"Share wallets with family, friends,\n"
2417+
"and business partners."
2418+
msgstr ""
2419+
24032420
#: src/components/modals/ReceiveModal.vue:8
24042421
#: src/components/modals/StablecoinReceiveModal.vue:16
24052422
msgid "Share your address with the sender."
@@ -2440,6 +2457,7 @@ msgid "Simulate EUR payment"
24402457
msgstr ""
24412458

24422459
#: src/components/modals/BtcActivationModal.vue:28
2460+
#: src/components/modals/MultisigAnnouncementModal.vue:21
24432461
#: src/components/modals/PolygonActivationModal.vue:46
24442462
msgid "Skip"
24452463
msgstr ""
@@ -3102,6 +3120,10 @@ msgstr ""
31023120
msgid "Vesting Contract"
31033121
msgstr ""
31043122

3123+
#: src/components/modals/MultisigAnnouncementModal.vue:19
3124+
msgid "VISIT MULTISIG.NIMIQ.COM"
3125+
msgstr ""
3126+
31053127
#: src/components/modals/BuyCryptoModal.vue:21
31063128
msgid "Wait for the swap to be set up."
31073129
msgstr ""

‎src/lib/Constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const OASIS_EUR_DETECTION_DELAY = 5; // minutes
4545
// original welcome screen was already shown.
4646
export const WELCOME_MODAL_LOCALSTORAGE_KEY = 'welcome-2-modal-shown';
4747
export const WELCOME_STAKING_MODAL_LOCALSTORAGE_KEY = 'welcome-staking-modal-shown';
48+
export const MULTISIG_ANNOUNCEMENT_MODAL_LOCALSTORAGE_KEY = 'multisig-announcement-modal-shown';
4849

4950
// Albatross
5051
// export const BATCH_LENGTH = 60;

‎src/router.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ const UsdtTransactionModal = () =>
7070
import(/* webpackChunkName: "usdt-transaction-modal" */ './components/modals/UsdtTransactionModal.vue');
7171
const UsdtAddedModal = () =>
7272
import(/* webpackChunkName: "usdt-added-modal" */ './components/modals/UsdtAddedModal.vue');
73+
const MultisigAnnouncementModal = () =>
74+
import(/* webpackChunkName: "multisig-announcement-modal" */ './components/modals/MultisigAnnouncementModal.vue');
7375

7476
// Swap Modals
7577
const SwapModal = () => import(/* webpackChunkName: "swap-modal" */ './components/swap/SwapModal.vue');
@@ -128,6 +130,7 @@ export enum RouteName {
128130
SendViaPolygonUri = 'send-via-polygon-uri',
129131
UsdtAdded = 'usdt-added',
130132
StablecoinSelection = 'stablecoin-selection',
133+
MultisigAnnouncement = 'multisig-announcement',
131134
Swap = 'swap',
132135
MoonpaySellInfo = 'moonpay-sell-info',
133136
Moonpay = 'moonpay',
@@ -377,6 +380,13 @@ const routes: RouteConfig[] = [{
377380
},
378381
name: RouteName.UsdtAdded,
379382
meta: { column: Columns.ACCOUNT },
383+
}, {
384+
path: '/multisig-announcement',
385+
components: {
386+
modal: MultisigAnnouncementModal,
387+
},
388+
name: RouteName.MultisigAnnouncement,
389+
meta: { column: Columns.ACCOUNT },
380390
}, {
381391
path: '/stablecoin-selection',
382392
components: {

0 commit comments

Comments
 (0)