11<script setup>
22/** UI */
33import Button from " @/components/ui/Button.vue"
4- import Spinner from " @/components/ui/Spinner.vue"
5- import Tooltip from " @/components/ui/Tooltip.vue"
6- import { Dropdown , DropdownItem , DropdownDivider } from " @/components/ui/Dropdown"
4+ import { Dropdown , DropdownTitle , DropdownItem , DropdownDivider } from " @/components/ui/Dropdown"
75
86/** Services */
97import amp from " @/services/amp"
10- import { suggestChain , getAccounts , disconnect } from " @ /services/keplr "
8+ import { disconnect } from " ~ /services/wallet "
119import { arabica , mocha , mainnet } from " @/services/chains"
1210
13- /** API */
14- import { fetchAddressByHash } from " @/services/api/address"
15-
1611/** Store */
1712import { useAppStore } from " @/store/app"
1813import { useModalsStore } from " @/store/modals"
@@ -23,14 +18,13 @@ const notificationsStore = useNotificationsStore()
2318
2419const router = useRouter ()
2520
26- const isWalletAvailable = ref (false )
2721const isFetchingAccounts = ref (false )
2822
2923const { hostname } = useRequestURL ()
3024
3125switch (hostname) {
3226 case " celenium.io"
33- // case "dev.celenium.io":
27+ // case "dev.celenium.io":
3428 appStore .network = mainnet
3529 break
3630
@@ -44,58 +38,10 @@ switch (hostname) {
4438 default :
4539 appStore .network = arabica
4640 break
47-
48- }
49-
50- const getBalance = async () => {
51- const key = await window .keplr .getKey (appStore .network .chainId )
52-
53- if (key) {
54- const { data } = await fetchAddressByHash (key .bech32Address )
55-
56- if (data .value ? .balance ) {
57- appStore .balance = parseFloat (data .value .balance .spendable / 1_000_000 ) || 0
58- }
59- }
6041}
6142
62- onMounted (async () => {
63- isWalletAvailable .value = !! window .keplr
64- })
65-
6643const handleConnect = async () => {
67- try {
68- await suggestChain (appStore .network )
69-
70- isFetchingAccounts .value = true
71-
72- const accounts = await getAccounts (appStore .network )
73- if (accounts .length ) {
74- appStore .address = accounts[0 ].address
75- }
76-
77- getBalance ()
78-
79- isFetchingAccounts .value = false
80-
81- amp .log (" connect"
82- } catch (error) {
83- amp .log (" rejectConnect"
84-
85- switch (error .message ) {
86- case " Request rejected"
87- notificationsStore .create ({
88- notification: {
89- type: " info"
90- icon: " close"
91- title: " Request rejected"
92- description: " You canceled the Keplr wallet request"
93- autoDestroy: true ,
94- },
95- })
96- break
97- }
98- }
44+ modalsStore .open (" connect"
9945}
10046
10147const handleCopy = (target ) => {
@@ -111,6 +57,10 @@ const handleCopy = (target) => {
11157 })
11258}
11359
60+ const handleChangeWallet = () => {
61+ modalsStore .open (" connect"
62+ }
63+
11464const handleDisconnect = () => {
11565 disconnect ()
11666
@@ -131,32 +81,7 @@ const handleDisconnect = () => {
13181script >
13282
13383<template >
134- < Tooltip v- if = " isFetchingAccounts" = " end" >
135- < Button type= " secondary" = " small" >
136- < Spinner size= " 14" / >
137- Fetching
138- < / Button>
139-
140- < template #content>
141- < Flex direction= " column" = " end" = " 6" >
142- < Text > Receiving your accounts < / Text >
143- < Text color= " tertiary" = " 120" = " right" = " max-width: 200px" >
144- It' s stuck? Try disabling the connection through your wallet and refresh the page
145- </Text>
146- <Text color="tertiary" height="120" align="right" style="max-width: 200px">
147- Sometimes the wallet pop-up may hide behind the browser window
148- </Text>
149- </Flex>
150- </template>
151- </Tooltip>
152-
153- <Tooltip v-else-if="!isWalletAvailable" position="end">
154- <Button type="white" size="mini" disabled> Connect </Button>
155-
156- <template #content> Install Keplr Wallet before connection </template>
157- </Tooltip>
158-
159- <Button v-else-if="!appStore.address" @click="handleConnect" type="white" size="mini"> Connect </Button>
84+ <Button v-if =" !appStore.address" @click =" handleConnect" type =" white" size =" mini" Button >
16085
16186 <Dropdown v-else >
16287 <Button type =" secondary" size =" mini"
@@ -165,6 +90,7 @@ const handleDisconnect = () => {
16590 </Button >
16691
16792 <template #popup >
93+ <DropdownTitle style =" text-transform capitalize " DropdownTitle >
16894 <DropdownItem @click =" modalsStore.open('send')" DropdownItem >
16995 <DropdownItem @click =" modalsStore.open('pfb')" DropdownItem >
17096 <DropdownDivider />
@@ -178,6 +104,7 @@ const handleDisconnect = () => {
178104 <Text >Copy address</Text >
179105 </DropdownItem >
180106 <DropdownDivider />
107+ <DropdownItem @click =" handleChangeWallet" DropdownItem >
181108 <DropdownItem @click =" handleDisconnect" DropdownItem >
182109 </template >
183110 </Dropdown >
0 commit comments