feat: Optimize copy icon display and establish global copy store

package.json

@@ -75,6 +75,7 @@
     "prettier-plugin-tailwindcss": "^0.5.4",
     "rimraf": "^5.0.1",
     "sass": "^1.62.1",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.4",
     "vite": "^4.4.9",

src/components/Copy.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+import CopyIcon from '@/assets/icons/copy.svg'
+import { ClipboardStore } from '@/stores/ClipboardStore'
+
+const { text } = defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <CopyIcon
+    @click="ClipboardStore.copy(text)"
+    :class="
+      twMerge(
+        'hover:text-blue-primary cursor-pointer',
+        $attrs.class as string,
+        ClipboardStore.copiedText === text ? 'text-blue-primary' : 'text-gray-primary'
+      )
+    "
+  />
+</template>

src/components/LoadingIcon.vue

@@ -1,22 +1,8 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  class?: string
-}>()
-
+import { twMerge } from 'tailwind-merge'
+import LoadingIcon from '@/assets/icons/loading.svg'
 </script>
 
 <template>
-  <svg
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="['animate-spin h-5 w-5 text-white', props.class]"
-  >
-    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
-  </svg>
+  <LoadingIcon :class="twMerge('h-5 w-5 text-gray-primary', $attrs.class as string)" />
 </template>

src/pages/authorize/Inscribe.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import actions from '@/data/authorize-actions'
-import CopyIcon from '@/assets/icons/copy.svg'
+import Copy from '@/components/Copy.vue'
 import LoadingIcon from '@/components/LoadingIcon.vue'
 import { MetaidData } from '@/lib/actions/btc/inscribe'
 import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
@@ -20,7 +20,6 @@ const props = defineProps<{
 
 const loading = ref(true)
 const error = ref<Error>()
-const pastedText = ref<string>()
 const commitCost = ref<number>(0)
 const revealCost = ref<number>(0)
 const commitTxHex = ref<string>()
@@ -62,11 +61,6 @@ actions.Inscribe.process({ ...props.params, options: { noBroadcast: true } })
   .finally(() => {
     loading.value = false
   })
-
-const copy = (txHex: string) => {
-  pastedText.value = txHex
-  navigator.clipboard.writeText(txHex)
-}
 </script>
 
 <template>
@@ -102,17 +96,11 @@ const copy = (txHex: string) => {
       </div>
       <div class="flex justify-between text-gray-500">
         <div class="label">CommitTx Hex</div>
-        <CopyIcon
-          @click="copy(commitTxHex!)"
-          :class="[pastedText === commitTxHex ? 'text-blue-500' : '', 'h-4 w-4 cursor-pointer hover:text-blue-500']"
-        />
+        <Copy :text="commitTxHex!" />
       </div>
       <div class="flex justify-between text-gray-500" v-for="(txHex, i) in revealTxsHex">
         <div class="label">{{ `RevealTx${i + 1} Hex` }}</div>
-        <CopyIcon
-          @click="copy(txHex!)"
-          :class="[pastedText === txHex ? 'text-blue-500' : '', 'h-4 w-4 cursor-pointer hover:text-blue-500']"
-        />
+        <Copy :text="txHex" />
       </div>
     </div>
   </div>

src/pages/nfts/SendNFT.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import Copy from '@/components/Copy.vue'
 import type { Psbt } from 'bitcoinjs-lib'
 import { BtcWallet } from '@/lib/wallets/btc'
 import { getMetaPin } from '@/queries/metaPin'
-import CopyIcon from '@/assets/icons/copy.svg'
 import { useQueryClient } from '@tanstack/vue-query'
 import { UTXO, getInscriptionUtxo } from '@/queries/utxos'
 import BTCRateList from '../wallet/components/BTCRateList.vue'
@@ -202,14 +202,14 @@ async function send() {
           <span>From</span>
           <span class="flex items-center gap-x-2">
             <span :title="address">{{ shortestAddress(address) }}</span>
-            <CopyIcon class="h-4 w-4 cursor-pointer hover:text-blue-500" />
+            <Copy :text="address" />
           </span>
         </div>
         <div class="flex items-center justify-between">
           <span>To</span>
           <span class="flex items-center gap-x-2">
             <span :title="recipient">{{ shortestAddress(recipient) }}</span>
-            <CopyIcon class="h-4 w-4 cursor-pointer hover:text-blue-500" />
+            <Copy :text="recipient" />
           </span>
         </div>
         <div class="flex items-center justify-between">

src/pages/wallet/SendBRC20.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import Copy from '@/components/Copy.vue'
 import type { Psbt } from 'bitcoinjs-lib'
 import { BtcWallet } from '@/lib/wallets/btc'
-import CopyIcon from '@/assets/icons/copy.svg'
 import { useRoute, useRouter } from 'vue-router'
 import { SymbolTicker } from '@/lib/asset-symbol'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -161,14 +161,14 @@ async function send() {
           <span>From</span>
           <span class="flex items-center gap-x-2">
             <span :title="address">{{ shortestAddress(address) }}</span>
-            <CopyIcon class="h-4 w-4 cursor-pointer hover:text-blue-500" />
+            <Copy :text="address" />
           </span>
         </div>
         <div class="flex items-center justify-between">
           <span>To</span>
           <span class="flex items-center gap-x-2">
             <span :title="recipient">{{ shortestAddress(recipient) }}</span>
-            <CopyIcon class="h-4 w-4 cursor-pointer hover:text-blue-500" />
+            <Copy :text="recipient" />
           </span>
         </div>
         <div class="flex items-center justify-between">

src/pages/wallet/components/TransactionResultModal.vue

@@ -2,10 +2,10 @@
 import { PropType } from 'vue'
 import { toTx } from '@/lib/helpers'
 import { useRouter } from 'vue-router'
+import Copy from '@/components/Copy.vue'
 import Modal from '@/components/Modal.vue'
 import { type Chain } from '@/lib/account'
 import { getBrowserHost } from '@/lib/host'
-import CopyIcon from '@/assets/icons/copy.svg'
 import { prettifyTokenBalance } from '@/lib/formatters'
 import SuccessIcon from '@/assets/icons/success.svg?url'
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid'
@@ -104,15 +104,15 @@ const toResultTx = async () => {
           <div class="label">From</div>
           <div class="text-xs flex gap-2">
             <div class="truncate w-48 cursor-pointer" :title="result.fromAddress">{{ result.fromAddress }}</div>
-            <CopyIcon class="h-4 w-4 cursor-pointer text-gray-primary hover:text-blue-500" />
+            <Copy :text="result.fromAddress" />
           </div>
         </div>
 
         <div class="flex justify-between">
           <div class="label">To</div>
           <div class="text-xs flex gap-2">
             <div class="truncate w-48 cursor-pointer" :title="result.toAdddress">{{ result.toAdddress }}</div>
-            <CopyIcon class="h-4 w-4 cursor-pointer text-gray-primary hover:text-blue-500" />
+            <Copy :text="result.toAdddress" />
           </div>
         </div>
 
@@ -122,7 +122,7 @@ const toResultTx = async () => {
             <div class="hover:underline truncate w-48 cursor-pointer" @click="toResultTx" :title="result.txId">
               {{ result.txId }}
             </div>
-            <CopyIcon class="h-4 w-4 cursor-pointer text-gray-primary hover:text-blue-500" />
+            <Copy :text="result.txId" />"
           </div>
         </div>
       </div>

src/stores/ClipboardStore.ts

@@ -0,0 +1,13 @@
+import { reactive } from 'vue'
+
+export const ClipboardStore = reactive({
+  copiedText: '',
+  copy: async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      ClipboardStore.copiedText = text
+    } catch (error) {
+      console.error('复制失败:', error)
+    }
+  },
+})

src/stores/nftTypeStore.ts

@@ -1,4 +1,4 @@
-import { reactive, watch } from 'vue'
+import { reactive } from 'vue'
 
 interface NFTType {
   id: number