Skip to content

Commit d1109d4

Browse files
mraveuxmraveux
authored
Merge pull request #237 from nimiq/matheo/wip/issue-list-modal
WalletStatusModal - Display info about potential issues impacting the Wallet
2 parents b2660d2 + dc92cc0 commit d1109d4

File tree

17 files changed

+673
-19
lines changed

17 files changed

+673
-19
lines changed

‎src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030

3131
<UpdateNotification/>
3232

33+
<WalletStatusButton v-if="$config.showHelpButton"/>
34+
3335
<div v-if="!hasAccounts" class="loader flex-row">
3436
<LoadingSpinner/>
3537
</div>
@@ -51,6 +53,7 @@ import { useSwipes } from './composables/useSwipes';
5153
import { useNetworkStore } from './stores/Network';
5254
import { useConfig } from './composables/useConfig';
5355
import { ENV_MAIN } from './lib/Constants';
56+
import WalletStatusButton from './components/WalletStatusButton.vue';
5457
5558
export default defineComponent({
5659
name: 'app',
@@ -174,6 +177,7 @@ export default defineComponent({
174177
SwapNotification,
175178
UpdateNotification,
176179
LoadingSpinner,
180+
WalletStatusButton,
177181
},
178182
});
179183
</script>

‎src/components/WalletStatusButton.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<button @click="$router.push('/wallet-status')" class="wallet-status-button nq-button-pill">
3+
<CircledQuestionMark />
4+
<span>{{ $t('Help') }}</span>
5+
</button>
6+
</template>
7+
8+
<script lang="ts">
9+
import { defineComponent } from '@vue/composition-api';
10+
import CircledQuestionMark from './icons/CircledQuestionMark.vue';
11+
12+
export default defineComponent({
13+
props: {},
14+
components: {
15+
CircledQuestionMark,
16+
},
17+
});
18+
</script>
19+
20+
<style lang="scss" scoped>
21+
@import '../scss/variables.scss';
22+
23+
.wallet-status-button {
24+
height: 4.25rem;
25+
border-radius: 2.25rem;
26+
27+
position: absolute;
28+
bottom: 2rem;
29+
right: 2rem;
30+
31+
display: flex;
32+
flex-direction: row;
33+
align-items: center;
34+
35+
font-size: 2rem;
36+
37+
svg {
38+
margin-right: 1rem;
39+
}
40+
}
41+
42+
@media (max-width: $mobileBreakpoint) {
43+
.wallet-status-button {
44+
bottom: 11rem;
45+
}
46+
}
47+
48+
</style>

‎src/components/modals/WalletStatusModal.vue

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<template>
2+
<Modal v-bind="$attrs" v-on="$listeners" emitClose ref="$modal" @close="close">
3+
<PageHeader>
4+
{{ $t('We’re busy fixing the wallet but your NIM are safe') }}
5+
<p slot="more" class="nq-text nq-light-blue">
6+
{{ $t('The network and your NIM successfully migrated to Proof-of-Stake.'
7+
+ ' ' + 'The wallet is not fully up to speed yet but we’re getting there.') }}
8+
</p>
9+
</PageHeader>
10+
11+
<PageBody>
12+
<p class="nq-text">{{ $t('Please have patience while we fix:') }}</p>
13+
14+
<ul>
15+
<li>{{ $t('Syncing takes long and fails in certain cases.') }}</li>
16+
<li>{{ $t('The transaction history does not update correctly.') }}</li>
17+
<li>
18+
<span class="pill">{{ $t('Rare') }}</span>
19+
{{ $t('Problems with un-staking.') }}
20+
</li>
21+
<li>
22+
<span class="pill">{{ $t('Rare') }}</span>
23+
{{ $t('Incomplete balances being displayed.') }}
24+
</li>
25+
</ul>
26+
</PageBody>
27+
28+
<PageFooter>
29+
<i18n path="If in doubt, you can always check your balance at {nimiqWatchLink}" tag="p" class="nq-text">
30+
<template v-slot:nimiqWatchLink>
31+
<a href="https://nimiq.watch" target="_blank">
32+
nimiq.watch
33+
</a>
34+
</template>
35+
</i18n>
36+
37+
<i18n path="If you require further assistance, please reach out at {discordLink}"
38+
tag="p" class="nq-text">
39+
<template v-slot:discordLink>
40+
<a href="https://discord.gg/nimiq" target="_blank">
41+
discord.gg/nimiq
42+
</a>
43+
</template>
44+
</i18n>
45+
</PageFooter>
46+
</Modal>
47+
</template>
48+
49+
<script lang="ts">
50+
import { defineComponent, ref } from '@vue/composition-api';
51+
import { PageHeader, PageBody, PageFooter } from '@nimiq/vue-components';
52+
import Modal from './Modal.vue';
53+
54+
export default defineComponent({
55+
name: 'WelcomeStakingModal',
56+
setup() {
57+
const $modal = ref<Modal | null>(null);
58+
59+
async function close() {
60+
await $modal.value?.forceClose();
61+
}
62+
63+
return { $modal, close };
64+
},
65+
components: {
66+
Modal,
67+
PageHeader,
68+
PageBody,
69+
PageFooter,
70+
},
71+
});
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
@import '../../scss/functions.scss';
76+
@import '../../scss/variables.scss';
77+
78+
.modal {
79+
::v-deep .small-page {
80+
width: 63rem;
81+
min-height: 67rem;
82+
}
83+
}
84+
85+
.page-header {
86+
padding: 4rem 7rem;
87+
text-wrap: balance;
88+
89+
p {
90+
font-size: 2rem;
91+
font-weight: 600;
92+
margin-bottom: 0;
93+
}
94+
}
95+
96+
.page-body {
97+
display: flex;
98+
flex-direction: column;
99+
align-items: center;
100+
101+
ul {
102+
list-style-type: none;
103+
width: 100%;
104+
padding: 0;
105+
margin: 0;
106+
107+
border: 1px solid nimiq-blue(0.1);
108+
border-radius: 1.5rem;
109+
110+
font-size: 2rem;
111+
font-weight: 600;
112+
113+
li {
114+
padding: 1rem 1.5rem;
115+
border-bottom: 1px solid nimiq-blue(0.1);
116+
117+
.pill {
118+
--color: #{nimiq-blue(.6)};
119+
120+
color: var(--color);
121+
border: 1px solid var(--color);
122+
border-radius: 5rem;
123+
124+
font-size: 1.5rem;
125+
text-transform: uppercase;
126+
127+
padding: .2rem .8rem;
128+
margin-right: .5rem;
129+
}
130+
131+
&:last-child { border-bottom: none }
132+
}
133+
}
134+
}
135+
136+
.page-footer {
137+
display: flex;
138+
flex-direction: column;
139+
align-items: center;
140+
text-align: center;
141+
padding: 4rem;
142+
padding-top: 0;
143+
144+
p {
145+
&, a, a:visited {
146+
color: nimiq-blue(.6);
147+
}
148+
149+
&:first-child { font-weight: 600 }
150+
&:last-child { margin-bottom: 0 }
151+
}
152+
153+
a { text-decoration: underline }
154+
}
155+
156+
@media (max-width: $mobileBreakpoint) {
157+
.page-header {
158+
padding: 4rem 4.75rem;
159+
}
160+
}
161+
</style>

‎src/config/config.local.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
'/dns4/seed4.pos.nimiq-testnet.com/tcp/8443/wss',
1515
],
1616
disableNetworkInteraction: false,
17+
showHelpButton: true,
1718
faucetEndpoint: 'https://faucet.pos.nimiq-testnet.com',
1819
reportToSentry: false,
1920
enableBitcoin: true,

‎src/config/config.mainnet.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default {
2424
'/dns4/zenith.seed.nimiq.systems/tcp/443/wss',
2525
],
2626
disableNetworkInteraction: false,
27+
showHelpButton: true,
2728
faucetEndpoint: '',
2829
reportToSentry: true,
2930
enableBitcoin: true,

‎src/config/config.testnet.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
'/dns4/seed4.pos.nimiq-testnet.com/tcp/8443/wss',
1515
],
1616
disableNetworkInteraction: false,
17+
showHelpButton: true,
1718
faucetEndpoint: 'https://faucet.pos.nimiq-testnet.com',
1819
reportToSentry: true,
1920
enableBitcoin: true,

0 commit comments

Comments
 (0)