From 8476436370e2b6e6a5b9a206cdf09194593314ea Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Tue, 14 Nov 2023 09:12:02 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Shorten=20wallet=20address=20on?=
 =?UTF-8?q?=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/WalletHeader.vue               | 17 ++++++----
 pages/authz/index.vue                     | 23 ++++++++-----
 pages/nft-book-store/status/[classId].vue | 41 ++++++++++++++---------
 utils/cosmos.ts                           |  5 +++
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/components/WalletHeader.vue b/components/WalletHeader.vue
index 76754be2a..b93569503 100644
--- a/components/WalletHeader.vue
+++ b/components/WalletHeader.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="flex flex-wrap items-center gap-2">
     <template v-if="wallet">
-      <UButton
-        class="text-xs font-mono"
-        :label="wallet"
-        :to="portfolioURL"
-        variant="soft"
-        target="_blank"
-      />
+      <UTooltip :text="wallet">
+        <UButton
+          class="text-xs font-mono"
+          :label="shortenWalletAddress(wallet)"
+          :to="portfolioURL"
+          variant="soft"
+          target="_blank"
+        />
+      </UTooltip>
       <UButton
         label="Disconnect Wallet"
         icon="i-heroicons-arrow-left-on-rectangle"
@@ -30,6 +32,7 @@
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
 import { getPortfolioURL } from '~/utils'
+import { shortenWalletAddress } from '~/utils/cosmos'
 
 const store = useWalletStore()
 const { wallet } = storeToRefs(store)
diff --git a/pages/authz/index.vue b/pages/authz/index.vue
index 323481640..55d3ccefa 100644
--- a/pages/authz/index.vue
+++ b/pages/authz/index.vue
@@ -74,14 +74,17 @@
             :sort="{ column: 'expiration', direction: 'desc' }"
           >
             <template #wallet-data="{ row }">
-              <UButton
-                class="font-mono"
-                :label="row.wallet"
-                :to="getPortfolioURL(row.wallet)"
-                variant="link"
-                :padded="false"
-                target="_blank"
-              />
+              <UTooltip :text="row.wallet">
+                <UButton
+                  class="font-mono"
+                  :label="row.shortenWallet"
+                  :to="getPortfolioURL(row.wallet)"
+                  variant="link"
+                  :padded="false"
+                  size="xs"
+                  target="_blank"
+                />
+              </UTooltip>
             </template>
             <template #actions-data="{ row }">
               <div class="flex items-center gap-2">
@@ -134,7 +137,8 @@ import { useWalletStore } from '~/stores/wallet'
 import {
   getNFTAuthzGranterGrants,
   signGrantNFTSendAuthz,
-  signRevokeNFTSendAuthz
+  signRevokeNFTSendAuthz,
+  shortenWalletAddress
 } from '~/utils/cosmos'
 
 const walletStore = useWalletStore()
@@ -149,6 +153,7 @@ const isLoading = ref(false)
 
 const tableRows = computed(() => grants.value.map((grant: any) => ({
   wallet: grant.grantee,
+  shortenWallet: shortenWalletAddress(grant.grantee),
   expiration: new Date(grant.expiration.seconds.toNumber() * 1000)
 })))
 
diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
index c29db1924..fb35859e5 100644
--- a/pages/nft-book-store/status/[classId].vue
+++ b/pages/nft-book-store/status/[classId].vue
@@ -202,14 +202,17 @@
             />
           </template>
           <template #wallet-data="{ row }">
-            <UButton
-              class="font-mono"
-              :label="row.wallet"
-              :to="getPortfolioURL(row.wallet)"
-              variant="link"
-              :padded="false"
-              target="_blank"
-            />
+            <UTooltip :text="row.wallet">
+              <UButton
+                class="font-mono"
+                :label="row.shortenWallet"
+                :to="row.walletLink"
+                variant="link"
+                :padded="false"
+                size="xs"
+                target="_blank"
+              />
+            </UTooltip>
           </template>
           <template #status-data="{ row }">
             <UBadge
@@ -318,13 +321,16 @@
             :rows="moderatorWalletsTableRows"
           >
             <template #wallet-data="{ row }">
-              <UButton
-                class="font-mono"
-                :label="row.wallet"
-                :to="row.walletLink"
-                variant="link"
-                :padded="false"
-              />
+              <UTooltip :text="row.wallet">
+                <UButton
+                  class="font-mono"
+                  :label="row.shortenWallet"
+                  :to="row.walletLink"
+                  variant="link"
+                  :padded="false"
+                  size="xs"
+                />
+              </UTooltip>
             </template>
             <template #authz-data="{ row }">
               <UButton
@@ -496,7 +502,7 @@ import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useNftStore } from '~/stores/nft'
 import { useWalletStore } from '~/stores/wallet'
 import { getPortfolioURL } from '~/utils'
-import { getNFTAuthzGrants } from '~/utils/cosmos'
+import { getNFTAuthzGrants, shortenWalletAddress } from '~/utils/cosmos'
 
 const store = useWalletStore()
 const bookStoreApiStore = useBookStoreApiStore()
@@ -694,6 +700,8 @@ const ordersTableRows = computed(() => purchaseList.value?.map((p: any, index: n
   orderDate: p.formattedDate,
   shippingStatus: p.shippingStatus,
   wallet: p.wallet || '',
+  walletLink: getPortfolioURL(p.wallet),
+  shortenWallet: shortenWalletAddress(p.wallet),
   priceName: p.priceName,
   price: p.price || 0,
   message: p.message || '',
@@ -730,6 +738,7 @@ const moderatorWalletsTableRows = computed(() => moderatorWallets.value.map((wal
   return {
     index,
     wallet,
+    shortenWallet: shortenWalletAddress(wallet),
     walletLink: getPortfolioURL(wallet),
     isGranted,
     grantLabel: isGranted ? 'Granted' : 'Grant',
diff --git a/utils/cosmos.ts b/utils/cosmos.ts
index ea9534c1a..39faafc69 100644
--- a/utils/cosmos.ts
+++ b/utils/cosmos.ts
@@ -312,3 +312,8 @@ export async function signRevokeNFTSendAuthz (
   const res = await signingClient.revokeGenericGrant(address, grantee, '/cosmos.nft.v1beta1.MsgSend', { memo })
   return res
 }
+
+export function shortenWalletAddress (address: string) {
+  if (!address) { return '-' }
+  return `${address.slice(0, 10)}...${address.slice(-6)}`
+}