From cdddb98004e80f81bff5a066e194cf038ff630f5 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:04:20 +0400
Subject: [PATCH 1/4] feat: load statement in delegation dashboard

---
 src/views/SpaceDelegates.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/SpaceDelegates.vue b/src/views/SpaceDelegates.vue
index 29b7c1c580ec..af10bbc4887e 100644
--- a/src/views/SpaceDelegates.vue
+++ b/src/views/SpaceDelegates.vue
@@ -30,7 +30,7 @@ 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,13 @@ watch(matchFilter, () => {
   loadDelegates(matchFilter.value);
 });
 
+watch(delegates, delegates => {
+  loadStatements(
+    props.space.id,
+    delegates.map(d => d.id)
+  );
+});
+
 onMounted(() => {
   if (!hasDelegationPortal) return;
 

From 639509ecd5c1575adc8f6bf4194b001c58c863aa Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:25:44 +0400
Subject: [PATCH 2/4] feat: load user profiles for delegators

---
 src/views/SpaceDelegates.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/views/SpaceDelegates.vue b/src/views/SpaceDelegates.vue
index af10bbc4887e..8cfb0b8c8d60 100644
--- a/src/views/SpaceDelegates.vue
+++ b/src/views/SpaceDelegates.vue
@@ -23,7 +23,7 @@ const {
   hasDelegatesLoadFailed,
   hasDelegationPortal
 } = useDelegates(props.space);
-const { profiles } = useProfiles();
+const { profiles, loadProfiles } = useProfiles();
 const { modalAccountOpen } = useModal();
 const route = useRoute();
 const router = useRouter();
@@ -139,10 +139,9 @@ watch(matchFilter, () => {
 });
 
 watch(delegates, delegates => {
-  loadStatements(
-    props.space.id,
-    delegates.map(d => d.id)
-  );
+  const ids = delegates.map(d => d.id);
+  loadStatements(props.space.id, ids);
+  loadProfiles(ids);
 });
 
 onMounted(() => {

From daf25c582a71c170f4184a726aeb4f1f26bbb66d Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:26:04 +0400
Subject: [PATCH 3/4] fix: truncate too long delegator user name

---
 src/components/SpaceDelegatesCard.vue | 60 ++++++++++++++-------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/SpaceDelegatesCard.vue b/src/components/SpaceDelegatesCard.vue
index 73a13522d6f0..49d664e6d36f 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">
+          <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">

From 7ada83ca2146ca6ba446edd6afde5be3023d7348 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:29:15 +0400
Subject: [PATCH 4/4] fix: grow div

---
 src/components/SpaceDelegatesCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SpaceDelegatesCard.vue b/src/components/SpaceDelegatesCard.vue
index 49d664e6d36f..11e3699867ee 100644
--- a/src/components/SpaceDelegatesCard.vue
+++ b/src/components/SpaceDelegatesCard.vue
@@ -65,7 +65,7 @@ function handleDropdownAction(action: string) {
     <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">
+        <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]) }}