zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: wallet dropdown

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-15 18:28:55 +08:00
parent f50e1c12bf
commit f5ac321b8b
1 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/layouts/components/NavBarWallet.vue
View File

@ -1,10 +1,29 @@
<script setup lang="ts">
import { useWalletStore } from '@/stores';
import {ref, computed} from 'vue'
const walletStore = useWalletStore();
walletStore.$subscribe((m, s) => {
console.log(m, s);
});
let showCopyToast = ref(0)
async function copyAdress(address: string){
try {
await navigator.clipboard.writeText(address);
showCopyToast.value = 1
setTimeout(()=>{
showCopyToast.value = 0
},1000)
/* Resolved - 文本被成功复制到剪贴板 */
} catch (err) {
showCopyToast.value = 2
setTimeout(()=>{
showCopyToast.value = 0
},1000)
}
}
const tipMsg = computed(()=> {
return showCopyToast.value === 2 ? {class: 'error', msg: 'Copy Error!'}: {class: 'success', msg: 'Copy Success!'}
})
</script>
<template>
@ -12,7 +31,9 @@ walletStore.$subscribe((m, s) => {
v-show="walletStore.currentAddress"
class="dropdown dropdown-hover dropdown-end"
>
<label tabindex="0" class="btn btn-sm m-1 lowercase">{{ walletStore.shortAddress }}</label>
<label tabindex="0" class="btn btn-sm m-1 lowercase">{{
walletStore.shortAddress
}}</label>
<div
tabindex="0"
class="dropdown-content menu shadow p-2 bg-base-100 rounded w-64 overflow-auto"
@ -24,9 +45,22 @@ walletStore.$subscribe((m, s) => {
<a
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
style="overflow-wrap: anywhere"
@click="copyAdress(walletStore.currentAddress)"
>
{{ walletStore.currentAddress }}
</a>
<div class="divider mt-1 mb-1"></div>
<RouterLink
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
to="/wallet/accounts"
>Accounts</RouterLink
>
<RouterLink
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
to="/wallet/portfolio"
>Portfolio</RouterLink
>
<div class="divider mt-1 mb-1"></div>
<a
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
@click="walletStore.disconnect()"
@ -34,6 +68,20 @@ walletStore.$subscribe((m, s) => {
>
</div>
</div>
<div class="toast" v-show="showCopyToast===1">
<div class="alert alert-success">
<div class="text-sm">
<span>{{ tipMsg.msg }}</span>
</div>
</div>
</div>
<div class="toast" v-show="showCopyToast===2">
<div class="alert alert-error">
<div class="text-sm">
<span>{{ tipMsg.msg }}</span>
</div>
</div>
</div>
</div>
<label
v-if="!walletStore?.currentAddress"