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

Author: wa0x6e

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">

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;