navbar 增加复制钱包地址按钮

This commit is contained in:
CounterFire2023 2024-07-17 13:35:12 +08:00
parent b29c4e55ba
commit 164d68a484

View File

@ -47,8 +47,11 @@
</div>
<div class="metaMask-login" v-if="!localWalletStore.address" @click="immuTableLogin">Login</div>
<div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
<div class="matamask">
<div class="metamask">
<div class="title">{{ localWalletStore.showAddress }}</div>
<svg @click="handleCopy" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
</svg>
</div>
<div class="menu" v-show="showMenu">
<div class="menu-item" @click="immuTableLogout">Logout</div>
@ -62,7 +65,8 @@
</template>
<script setup>
import { ref, reactive, onMounted, computed, watchEffect, getCurrentInstance, watch } from "vue";
import { ref, reactive, onMounted, computed, watchEffect, getCurrentInstance, watch, inject } from "vue";
const message = inject('$message')
const { proxy } = getCurrentInstance();
import { useAppStore } from "@/store/app";
import { hasMetamask } from "@/utils/chain.util";
@ -155,9 +159,9 @@ function click(event) {
//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();
const message = copied.value
? "Text copied!"
: "Click the button to copy text.";
// const message = copied.value
// ? "Text copied!"
// : "Click the button to copy text.";
@ -190,13 +194,14 @@ function handNavCurent(nav) {
function openThirdPartyLink(url) {
window.open(url, "_blank");
}
const handleCopy = () => {
const accountId = AppModule.accountId;
const handleCopy = (e) => {
e.stopPropagation();
const accountId = localWalletStore.address;
reset();
copyToClipboard(accountId).then(() => {
// if (copied.value) {
// message.success("Copy successful!");
// }
if (copied.value) {
message.success("address copied");
}
});
};
watchEffect(() => {
@ -594,6 +599,14 @@ onMounted( async () => {
a:hover {
background-color: #f5f5f5;
}
.metamask{
display: flex;
svg {
width: 24px;
height: 24px;
margin-left: 6px;
}
}
}
.immutable-cart {
color: #fff;