Skip to content
This repository was archived by the owner on Nov 14, 2025. It is now read-only.

Commit f46cf17

Browse files
kibotrelkibotrel
committed
feat: loading screen for withdraw and deposit
1 parent c8116e6 commit f46cf17

File tree

3 files changed

+315
-81
lines changed

3 files changed

+315
-81
lines changed

‎apps/front/src/components/Loader.vue‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<template>
2+
<svg
3+
version="1.1"
4+
xmlns="http://www.w3.org/2000/svg"
5+
xmlns:xlink="http://www.w3.org/1999/xlink"
6+
x="0px"
7+
y="0px"
8+
viewBox="0 0 1009.7 1009.7"
9+
xml:space="preserve"
10+
>
11+
<mask id="mask">
12+
<g>
13+
<polygon
14+
fill="#fff"
15+
points="196.4,344.6 283.7,344.6 219.8,583 396.1,583 230.8,823.3 283.1,659.5 111.4,659.5"
16+
/>
17+
</g>
18+
<g>
19+
<polygon
20+
fill="#fff"
21+
points="817.9,344.6 710.4,466.5 669,344.6 667.9,344.6 581.8,344.6 581.5,344.6 534.3,519.6 452.4,344.6
22+
371.5,344.6 318.3,541.6 404.8,541.6 421.9,477.8 500.4,645.8 506.9,659.5 582.7,659.5 583.3,659.5 631.3,480.6 677.1,601.9
23+
678.9,601.9 791.8,478.6 743.7,659.5 830.5,659.5 915,344.6 "
24+
/>
25+
</g>
26+
</mask>
27+
28+
<g mask="url(#mask)">
29+
<polygon
30+
class="yellow-fill fillAnimation"
31+
points="230.3,915.5 -95.4,915.5 -95.4,131.3 -95.4,131.3 "
32+
/>
33+
<rect x="984.6" y="131.3" class="st0" width="25.1" height="784.2" />
34+
</g>
35+
36+
<g mask="url(#mask)">
37+
<polygon
38+
class="white-fill fillAnimation"
39+
points="230.3,915.5 -95.4,915.5 -95.4,131.3 -95.4,131.3 "
40+
/>
41+
<rect x="984.6" y="131.3" class="st0" width="25.1" height="784.2" />
42+
</g>
43+
44+
<g mask="url(#mask)">
45+
<polygon
46+
class="yellow-fillBis fillAnimationBis"
47+
points="230.3,915.5 -95.4,915.5 -95.4,131.3 -95.4,131.3 "
48+
/>
49+
<rect x="984.6" y="131.3" class="st0" width="25.1" height="784.2" />
50+
</g>
51+
52+
<g mask="url(#mask)">
53+
<polygon
54+
class="white-fillBis fillAnimationBis"
55+
points="230.3,915.5 -95.4,915.5 -95.4,131.3 -95.4,131.3 "
56+
/>
57+
<rect x="984.6" y="131.3" class="st0" width="25.1" height="784.2" />
58+
</g>
59+
60+
<g>
61+
<g>
62+
<polygon
63+
class="white-stroke white-stroke1 strokeL"
64+
points="196.4,344.6 283.7,344.6 219.8,583 396.1,583 230.8,823.3 283.1,659.5 111.4,659.5"
65+
/>
66+
</g>
67+
<g>
68+
<polygon
69+
class="white-stroke white-stroke1 strokeNM"
70+
points="817.9,344.6 710.4,466.5 669,344.6 667.9,344.6 581.8,344.6 581.5,344.6 534.3,519.6 452.4,344.6
71+
371.5,344.6 318.3,541.6 404.8,541.6 421.9,477.8 500.4,645.8 506.9,659.5 582.7,659.5 583.3,659.5 631.3,480.6 677.1,601.9
72+
678.9,601.9 791.8,478.6 743.7,659.5 830.5,659.5 915,344.6 "
73+
/>
74+
</g>
75+
</g>
76+
<g>
77+
<g>
78+
<polygon
79+
class="yellow-stroke strokeL"
80+
points="196.4,344.6 283.7,344.6 219.8,583 396.1,583 230.8,823.3 283.1,659.5 111.4,659.5"
81+
/>
82+
</g>
83+
<g>
84+
<polygon
85+
class="yellow-stroke strokeNM"
86+
points="817.9,344.6 710.4,466.5 669,344.6 667.9,344.6 581.8,344.6 581.5,344.6 534.3,519.6 452.4,344.6
87+
371.5,344.6 318.3,541.6 404.8,541.6 421.9,477.8 500.4,645.8 506.9,659.5 582.7,659.5 583.3,659.5 631.3,480.6 677.1,601.9
88+
678.9,601.9 791.8,478.6 743.7,659.5 830.5,659.5 915,344.6 "
89+
/>
90+
</g>
91+
</g>
92+
93+
<g>
94+
<g>
95+
<polygon
96+
class="white-stroke white-stroke2 strokeL"
97+
points="196.4,344.6 283.7,344.6 219.8,583 396.1,583 230.8,823.3 283.1,659.5 111.4,659.5"
98+
/>
99+
</g>
100+
<g>
101+
<polygon
102+
class="white-stroke white-stroke2 strokeNM"
103+
points="817.9,344.6 710.4,466.5 669,344.6 667.9,344.6 581.8,344.6 581.5,344.6 534.3,519.6 452.4,344.6
104+
371.5,344.6 318.3,541.6 404.8,541.6 421.9,477.8 500.4,645.8 506.9,659.5 582.7,659.5 583.3,659.5 631.3,480.6 677.1,601.9
105+
678.9,601.9 791.8,478.6 743.7,659.5 830.5,659.5 915,344.6 "
106+
/>
107+
</g>
108+
</g>
109+
</svg>
110+
</template>
111+
112+
<script>
113+
export default { name: 'LnmLogoLoader' }
114+
</script>
115+
116+
<style scoped>
117+
.white-stroke {
118+
@apply stroke-yellow-400;
119+
120+
fill: none;
121+
stroke-width: 7px;
122+
stroke-miterlimit: 5;
123+
stroke-dasharray: 2700;
124+
animation: strokeWhite 1500ms cubic-bezier(0, 0.6, 0.51, 0.88) forwards;
125+
}
126+
127+
.strokeL {
128+
animation-duration: 5000ms;
129+
}
130+
131+
@keyframes strokeWhite {
132+
0% {
133+
stroke-dashoffset: 3000;
134+
}
135+
100% {
136+
stroke-dashoffset: 0;
137+
}
138+
}
139+
140+
.yellow-stroke {
141+
@apply stroke-white;
142+
143+
fill: none;
144+
stroke-width: 7px;
145+
stroke-miterlimit: 5;
146+
stroke-dasharray: 2700;
147+
animation: strokeWhite 1500ms cubic-bezier(0, 0.6, 0.51, 0.88) forwards;
148+
animation-delay: 0.3s;
149+
}
150+
151+
.white-stroke2 {
152+
animation-delay: 0.4s;
153+
}
154+
155+
@keyframes strokeWhite {
156+
0% {
157+
stroke-dashoffset: 3000;
158+
}
159+
100% {
160+
stroke-dashoffset: 0;
161+
}
162+
}
163+
164+
.fillAnimation {
165+
animation: fillAnimation 1s cubic-bezier(0, 0.6, 0.51, 0.88) backwards;
166+
}
167+
168+
.fillAnimationBis {
169+
animation: fillAnimation 2100ms ease-in-out 1s infinite;
170+
animation-direction: alternate-reverse;
171+
}
172+
173+
.yellow-fill {
174+
@apply stroke-white;
175+
stroke-miterlimit: 5;
176+
animation-delay: 1000ms;
177+
animation-fill-mode: backwards;
178+
}
179+
180+
.yellow-fillBis {
181+
@apply stroke-white;
182+
stroke-miterlimit: 5;
183+
animation-delay: 4100ms;
184+
animation-iteration-count: infinite;
185+
animation-direction: alternate;
186+
}
187+
188+
.white-fill {
189+
@apply stroke-yellow-400;
190+
animation-delay: 1200ms;
191+
animation-fill-mode: backwards;
192+
}
193+
194+
.white-fillBis {
195+
@apply stroke-yellow-400;
196+
animation-delay: 2200ms;
197+
animation-iteration-count: infinite;
198+
}
199+
200+
@keyframes fillAnimation {
201+
0% {
202+
stroke-width: 0px;
203+
}
204+
100% {
205+
stroke-width: 1710px;
206+
}
207+
}
208+
</style>

‎apps/front/src/modals/Deposit.vue‎

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,56 @@
22
<lnm-umbrel-modal>
33
<template #title>Deposit to LN Markets</template>
44
<template #content>
5-
<p class="mb-4 text-sm text-center sm:text-base">
6-
Select the amount to deposit using one of the options below.
7-
</p>
8-
<div class="flex justify-center">
9-
<lnm-umbrel-slider
10-
class="w-1/2"
11-
:min="1000"
12-
:max="maxDeposit"
13-
:value="parseInt(amount)"
14-
:step="(maxDeposit - 1000) / 1000"
15-
@update="amount = parseInt($event)"
16-
/>
5+
<div v-if="!waiting">
6+
<p class="mb-4 text-sm text-center sm:text-base">
7+
Select the amount to deposit using one of the options below.
8+
</p>
9+
<div class="flex justify-center">
10+
<lnm-umbrel-slider
11+
class="w-1/2"
12+
:min="1000"
13+
:max="maxDeposit"
14+
:value="parseInt(amount)"
15+
:step="(maxDeposit - 1000) / 1000"
16+
@update="amount = parseInt($event)"
17+
/>
18+
</div>
19+
<div class="flex justify-center mt-4">
20+
<lnm-umbrel-button class="mr-4" @click="amount = maxDeposit">
21+
Max
22+
</lnm-umbrel-button>
23+
<input
24+
v-model="amount"
25+
class="pr-2 w-1/2 text-sm text-right rounded border-2 border-gray-300 sm:w-auto"
26+
inputmode="decimal"
27+
placeholder="Amount"
28+
@keypress="isInteger($event)"
29+
/>
30+
<p class="mt-2 ml-1">sats</p>
31+
</div>
1732
</div>
18-
<div class="flex justify-center mt-4">
19-
<lnm-umbrel-button class="mr-4" @click="amount = maxDeposit">
20-
Max
21-
</lnm-umbrel-button>
22-
<input
23-
v-model="amount"
24-
class="pr-2 w-1/2 text-sm text-right rounded border-2 border-gray-300 sm:w-auto"
25-
inputmode="decimal"
26-
placeholder="Amount"
27-
@keypress="isInteger($event)"
28-
/>
29-
<p class="mt-2 ml-1">sats</p>
33+
<div v-else>
34+
<Loader class="mx-auto w-64 h-64" />
3035
</div>
3136
</template>
3237
<template #footer>
33-
<lnm-umbrel-button class="w-1/3 sm:w-1/4" @click="$emit('close')">
34-
Close
35-
</lnm-umbrel-button>
36-
<lnm-umbrel-button
37-
class="w-1/3 sm:w-1/4"
38-
color="green"
39-
:disabled="
40-
!amount || parseInt(amount) > maxDeposit || parseInt(amount) < 1000
41-
"
42-
:click="deposit"
43-
:click-params="amount"
44-
>
45-
Deposit
46-
</lnm-umbrel-button>
38+
<div v-if="!waiting" class="flex justify-around w-full">
39+
<lnm-umbrel-button class="w-1/3 sm:w-1/4" @click="$emit('close')">
40+
Close
41+
</lnm-umbrel-button>
42+
<lnm-umbrel-button
43+
class="w-1/3 sm:w-1/4"
44+
color="green"
45+
:disabled="
46+
!amount || parseInt(amount) > maxDeposit || parseInt(amount) < 1000
47+
"
48+
:click="deposit"
49+
:click-params="amount"
50+
>
51+
Deposit
52+
</lnm-umbrel-button>
53+
</div>
54+
<div v-else>Process deposit...</div>
4755
</template>
4856
</lnm-umbrel-modal>
4957
</template>
@@ -52,22 +60,28 @@
5260
import { computed, ref } from 'vue'
5361
import { useStore } from 'vuex'
5462
import { isInteger } from '@/plugins/utils.js'
63+
import Loader from '@/components/Loader.vue'
5564
5665
export default {
5766
name: 'ModalDeposit',
5867
emits: ['close'],
5968
setup() {
6069
const store = useStore()
61-
70+
const waiting = ref(false)
6271
return {
6372
maxDeposit: computed(() => store.getters['user/maxDeposit']),
6473
amount: ref(1000),
65-
deposit: (amount) => store.dispatch('user/deposit', parseInt(amount)),
74+
waiting,
75+
deposit: (amount) => {
76+
waiting.value = true
77+
store.dispatch('user/deposit', parseInt(amount))
78+
},
6679
}
6780
},
6881
6982
methods: {
7083
isInteger,
7184
},
85+
components: { Loader },
7286
}
7387
</script>

0 commit comments

Comments
 (0)