From db8b63a3f3140ddf0fa64e0dd534bdc224f777bc Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 30 Sep 2024 05:47:39 +0900
Subject: [PATCH] feat: load statement in delegation dashboard (#4892)

* feat: load statement in delegation dashboard

* feat: load user profiles for delegators

* fix: truncate too long delegator user name

* fix: grow div
---
 src/components/SpaceDelegatesCard.vue | 60 ++++++++++++++-------------
 src/views/SpaceDelegates.vue          | 10 ++++-
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/SpaceDelegatesCard.vue b/src/components/SpaceDelegatesCard.vue
index 73a13522d6f0..11e3699867ee 100644
--- a/src/components/SpaceDelegatesCard.vue
+++ b/src/components/SpaceDelegatesCard.vue
@@ -62,14 +62,38 @@ function handleDropdownAction(action: string) {
     class="flex h-full w-full flex-col justify-between rounded-xl border border-skin-border px-3 pb-3 pt-[12px] md:px-3 md:pb-3 md:pt-[12px]"
     @click="emit('clickUser')"
   >
-    <div class="flex w-full justify-between">
-      <div class="flex items-center text-left">
-        <AvatarUser :address="delegate.id" size="40" />
-        <div class="ml-3">
-          <div class="font-semibold text-skin-heading">
-            {{ getUsername(delegate.id, profiles[delegate.id]) }}
+    <div class="flex w-full">
+      <div class="flex items-center text-left gap-3 flex-auto min-w-0">
+        <AvatarUser :address="delegate.id" size="40" class="shrink-0" />
+        <div class="flex flex-col truncate grow">
+          <div class="flex truncate gap-1">
+            <div class="font-semibold text-skin-heading truncate flex-auto">
+              {{ getUsername(delegate.id, profiles[delegate.id]) }}
+            </div>
+            <BaseMenu
+              :items="dropdownItems"
+              @select="handleDropdownAction($event)"
+              @click.stop
+            >
+              <template #button>
+                <BaseButtonIcon class="-mr-[6px] !h-[24px]">
+                  <i-ho-dots-horizontal class="text-[17px]" />
+                </BaseButtonIcon>
+              </template>
+              <template #item="{ item }">
+                <div class="w-[170px] text-skin-link">
+                  <span class="flex items-center gap-1">
+                    {{ item.text }}
+                    <i-ho-external-link
+                      v-if="item.action === 'seeExplorer'"
+                      class="text-sm"
+                    />
+                  </span>
+                </div>
+              </template>
+            </BaseMenu>
           </div>
-          <div class="flex gap-[6px]">
+          <div class="flex gap-x-[6px] flex-wrap">
             <div
               v-tippy="{
                 content: `${formatNumber(
@@ -98,28 +122,6 @@ function handleDropdownAction(action: string) {
           </div>
         </div>
       </div>
-      <BaseMenu
-        :items="dropdownItems"
-        @select="handleDropdownAction($event)"
-        @click.stop
-      >
-        <template #button>
-          <BaseButtonIcon class="-mr-[6px] !h-[24px]">
-            <i-ho-dots-horizontal class="text-[17px]" />
-          </BaseButtonIcon>
-        </template>
-        <template #item="{ item }">
-          <div class="w-[170px] text-skin-link">
-            <span class="flex items-center gap-1">
-              {{ item.text }}
-              <i-ho-external-link
-                v-if="item.action === 'seeExplorer'"
-                class="text-sm"
-              />
-            </span>
-          </div>
-        </template>
-      </BaseMenu>
     </div>
 
     <div class="mt-3 h-[48px] cursor-pointer">
diff --git a/src/views/SpaceDelegates.vue b/src/views/SpaceDelegates.vue
index 29b7c1c580ec..8cfb0b8c8d60 100644
--- a/src/views/SpaceDelegates.vue
+++ b/src/views/SpaceDelegates.vue
@@ -23,14 +23,14 @@ const {
   hasDelegatesLoadFailed,
   hasDelegationPortal
 } = useDelegates(props.space);
-const { profiles } = useProfiles();
+const { profiles, loadProfiles } = useProfiles();
 const { modalAccountOpen } = useModal();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const { isFollowing } = useFollowSpace(props.space.id);
 const { web3Account } = useWeb3();
-const { getStatement } = useStatement();
+const { getStatement, loadStatements } = useStatement();
 
 const searchInput = ref((route.query.search as string) || '');
 const searchInputDebounced = refDebounced(searchInput, 300);
@@ -138,6 +138,12 @@ watch(matchFilter, () => {
   loadDelegates(matchFilter.value);
 });
 
+watch(delegates, delegates => {
+  const ids = delegates.map(d => d.id);
+  loadStatements(props.space.id, ids);
+  loadProfiles(ids);
+});
+
 onMounted(() => {
   if (!hasDelegationPortal) return;