@@ -6,12 +6,14 @@ import Button from "@/components/ui/Button.vue"
66
77/** API */
88import { fetchEstimatedGas } from " @/services/api/gas"
9+ import { fetchAddressByHash } from " @/services/api/address"
910
1011/** Services */
1112import amp from " @/services/amp"
1213import { getNamespaceID } from " @/services/utils"
1314import { sendPayForBlob } from " @/services/keplr"
1415import { prepareBlob } from " @/services/utils/encode"
16+ import { suggestChain , getAccounts } from " @/services/keplr"
1517
1618/** Store */
1719import { useAppStore } from " @/store/app"
@@ -128,6 +130,49 @@ const handleUpload = (e, target) => {
128130 reader .readAsArrayBuffer (file)
129131}
130132
133+ const getBalance = async () => {
134+ const key = await window .keplr .getKey (appStore .network .chainId )
135+
136+ if (key) {
137+ const { data } = await fetchAddressByHash (key .bech32Address )
138+
139+ if (data .value ? .balance ) {
140+ appStore .balance = parseFloat (data .value .balance .spendable / 1_000_000 ) || 0
141+ }
142+ }
143+ }
144+
145+ const handleConnect = async () => {
146+ try {
147+ await suggestChain (appStore .network )
148+
149+ const accounts = await getAccounts (appStore .network )
150+ if (accounts .length ) {
151+ appStore .address = accounts[0 ].address
152+ }
153+
154+ getBalance ()
155+
156+ amp .log (" connect"
157+ } catch (error) {
158+ amp .log (" rejectConnect"
159+
160+ switch (error .message ) {
161+ case " Request rejected"
162+ notificationsStore .create ({
163+ notification: {
164+ type: " info"
165+ icon: " close"
166+ title: " Request rejected"
167+ description: " You canceled the Keplr wallet request"
168+ autoDestroy: true ,
169+ },
170+ })
171+ break
172+ }
173+ }
174+ }
175+
131176const handleContinue = async () => {
132177 let [data, decodableBlob, length] = prepareBlob (
133178 appStore .address ,
@@ -232,10 +277,17 @@ const handleContinue = async () => {
232277 < / Text >
233278 < / Text >
234279
235- < Text size= " 12" = " 500" = " tertiary" : selectable= " true" > {{ appStore .address }} < / Text >
280+ < Text v- if = " appStore.address" = " 12" = " 500" = " tertiary" : selectable= " true" >
281+ {{ appStore .address }}
282+ < / Text >
283+ < Text v- else size= " 12" = " 500" = " yellow" : selectable= " true" >
284+ Connect with your wallet to submit blob
285+ < / Text >
236286 < / Flex>
237287
238- < Flex direction= " column" = " between" : class = " $style.bg" >
288+ < div : class = " [$style.auth_line, appStore.address && $style.anim]" / >
289+
290+ < Flex direction= " column" = " between" : class = " [$style.bg, !appStore.address && $style.unauth]" >
239291 < Flex v- for = " i in 8" = " center" = " between" >
240292 < div
241293 v- for = " j in 50"
@@ -315,7 +367,8 @@ const handleContinue = async () => {
315367 < / Text >
316368 < / Flex>
317369
318- < Button @click= " handleContinue" = " secondary" = " small" : disabled= " !isReadyToContinue || isAwaiting" >
370+ < Button v- if = " !appStore.address" = " handleConnect" = " white" = " small" > Connect< / Button>
371+ < Button v- else @click= " handleContinue" = " secondary" = " small" : disabled= " !isReadyToContinue || isAwaiting" >
319372 {{ isAwaiting ? " Awaiting..." : " Continue"
320373 < / Button>
321374 < / Flex>
@@ -328,6 +381,7 @@ const handleContinue = async () => {
328381
329382 border- radius: 12px ;
330383 background: rgba (0 , 0 , 0 , 15 % );
384+ overflow: hidden;
331385
332386 padding: 16px ;
333387
@@ -346,6 +400,37 @@ const handleContinue = async () => {
346400 }
347401}
348402
403+ .auth_line {
404+ position: absolute;
405+ bottom: 1px ;
406+ left: 50 % ;
407+ right: 50 % ;
408+
409+ height: 1px ;
410+ background: linear- gradient (90deg , rgba (10 , 222 , 113 , 0 % ) 0 % , rgba (10 , 222 , 113 , 100 % ), rgba (10 , 222 , 113 , 0 % ) 100 % );
411+
412+ & .anim {
413+ animation: fadeout 1s ease;
414+ }
415+ }
416+
417+ @keyframes fadeout {
418+ 0 % {
419+ opacity: 0 ;
420+ }
421+
422+ 30 % {
423+ opacity: 1 ;
424+ }
425+
426+ 100 % {
427+ left: - 200px ;
428+ right: - 200px ;
429+
430+ opacity: 0 ;
431+ }
432+ }
433+
349434.bg {
350435 position: absolute;
351436
@@ -365,6 +450,12 @@ const handleContinue = async () => {
365450 animation: blink 3s ease infinite;
366451 animation- delay: var (-- delay);
367452 }
453+
454+ & .unauth {
455+ & .circle {
456+ background: var (-- op- 40 );
457+ }
458+ }
368459}
369460
370461@keyframes blink {
0 commit comments