✨ Add address copy feature (#215)

* ✨ Add address copy feature * 🎨 Improve style & format * 🧑‍💻 Use navigator.clipboard with fallback * 🧑‍💻 Use useClipboard API to copy address to clipboard * ✏️ Update components/AuthStateView.vue Co-authored-by: Ng Wing Tat, David <[email protected]> --------- Co-authored-by: William Chong <[email protected]> Co-authored-by: Ng Wing Tat, David <[email protected]>
likecoin · Nov 15, 2024 · e024b9a · e024b9a
1 parent b60b347
commit e024b9a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/components/AuthStateView.vue b/components/AuthStateView.vue
@@ -1,16 +1,28 @@
 <template>
   <div class="flex flex-col items-stretch gap-4">
     <template v-if="bookStoreApiStore.isAuthenticated">
-      <UTooltip :text="wallet">
-        <UButton
-          class="text-xs font-mono"
-          :label="shortenWalletAddress(wallet)"
-          :to="portfolioURL"
-          variant="soft"
-          block
-          target="_blank"
-        />
-      </UTooltip>
+      <div class="w-full flex items-center gap-[8px] justify-between">
+        <UTooltip class="flex w-full" :text="wallet">
+          <UButton
+            class="text-xs font-mono"
+            :label="shortenWalletAddress(wallet)"
+            :to="portfolioURL"
+            variant="soft"
+            block
+            target="_blank"
+          />
+        </UTooltip>
+        <UTooltip text="Copy address">
+          <UButton
+            icon="i-heroicons-document-duplicate"
+            size="sm"
+            square
+            variant="soft"
+            @click="onClickCopy"
+          />
+        </UTooltip>
+      </div>
+
       <UButton
         label="Sign out"
         icon="i-heroicons-arrow-left-on-rectangle"
@@ -38,7 +50,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
-import { getPortfolioURL } from '~/utils'
+import { getPortfolioURL, copyToClipboard } from '~/utils'
 import { shortenWalletAddress } from '~/utils/cosmos'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 
@@ -94,4 +106,8 @@ function onClickDisconnect () {
   disconnect()
   clearSession()
 }
+
+function onClickCopy () {
+  copyToClipboard(wallet.value)
+}
 </script>
diff --git a/utils/index.ts b/utils/index.ts
@@ -1,4 +1,5 @@
 import { stringify as csvStringify } from 'csv-stringify/sync'
+import { useClipboard } from '@vueuse/core'
 
 export function getIsTestnet () {
   const { IS_TESTNET } = useRuntimeConfig().public
@@ -190,3 +191,22 @@ export function convertChannelIdToLikerId (channelId: string) {
 export function convertLikerIdToChannelId (likerId: string) {
   return `@${likerId}`
 }
+
+export function copyToClipboard (text: string): void {
+  const toast = useToast()
+  const { copy } = useClipboard()
+
+  copy(text).then(() => {
+    toast.add({
+      icon: 'i-heroicons-clipboard',
+      title: 'Copied to clipboard',
+      timeout: 3000
+    })
+  }).catch(() => {
+    toast.add({
+      icon: 'i-heroicons-warning',
+      title: 'Failed to copy',
+      timeout: 3000
+    })
+  })
+}