From f9100245f20c088f185a8d5a1922bc6a468d7a12 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Tue, 5 Nov 2024 11:50:46 +0100
Subject: [PATCH 01/14] feat: add members space page

---
 apps/ui/src/components/App/Nav.vue           |  20 ++++
 apps/ui/src/networks/offchain/api/index.ts   |  23 ++++
 apps/ui/src/networks/offchain/api/queries.ts |  15 +++
 apps/ui/src/networks/types.ts                |   5 +
 apps/ui/src/routes/common.ts                 |   6 +
 apps/ui/src/views/Space/Members.vue          | 120 +++++++++++++++++++
 6 files changed, 189 insertions(+)
 create mode 100644 apps/ui/src/views/Space/Members.vue

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index 2791f38fc..efeab399c 100644
--- a/apps/ui/src/components/App/Nav.vue
+++ b/apps/ui/src/components/App/Nav.vue
@@ -10,6 +10,7 @@ import IHCog from '~icons/heroicons-outline/cog';
 import IHGlobeAlt from '~icons/heroicons-outline/globe-alt';
 import IHGlobe from '~icons/heroicons-outline/globe-americas';
 import IHHome from '~icons/heroicons-outline/home';
+import IHIdentification from '~icons/heroicons-outline/identification';
 import IHLightningBolt from '~icons/heroicons-outline/lightning-bolt';
 import IHNewspaper from '~icons/heroicons-outline/newspaper';
 import IHStop from '~icons/heroicons-outline/stop';
@@ -63,6 +64,17 @@ const canSeeSettings = computed(() => {
 
     return admins.includes(web3.value.account.toLowerCase());
   }
+  return false;
+});
+
+const canSeeMembers = computed(() => {
+  const data = space.value?.additionalRawData;
+
+  return (
+    (data?.admins?.length ?? 0) > 0 ||
+    (data?.moderators?.length ?? 0) > 0 ||
+    (data?.members?.length ?? 0) > 0
+  );
 });
 
 const navigationConfig = computed<
@@ -81,6 +93,14 @@ const navigationConfig = computed<
       name: 'Leaderboard',
       icon: IHUserGroup
     },
+    ...(canSeeMembers.value
+      ? {
+          members: {
+            name: 'Members',
+            icon: IHIdentification
+          }
+        }
+      : undefined),
     ...(space.value?.delegations && space.value.delegations.length > 0
       ? {
           delegates: {
diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
index 8e81877d2..db883101e 100644
--- a/apps/ui/src/networks/offchain/api/index.ts
+++ b/apps/ui/src/networks/offchain/api/index.ts
@@ -40,6 +40,7 @@ import {
   RANKING_QUERY,
   SPACE_QUERY,
   SPACES_QUERY,
+  STATEMENTS_AND_USERS_QUERY,
   STATEMENTS_QUERY,
   STRATEGIES_QUERY,
   STRATEGY_QUERY,
@@ -765,6 +766,28 @@ export function createApi(
 
       return statements;
     },
+    loadStatementsAndUsers: async (
+      networkId: NetworkID,
+      spaceId: string,
+      userIds: string[]
+    ): Promise<{ statements: Statement[]; users: User[] }> => {
+      const { data } = await apollo.query({
+        query: STATEMENTS_AND_USERS_QUERY,
+        variables: {
+          where: {
+            delegate_in: userIds,
+            network: networkId,
+            space: spaceId
+          },
+          userIds
+        }
+      });
+
+      return {
+        statements: data.statements,
+        users: data.users
+      };
+    },
     loadStrategies: async () => {
       const { data } = await apollo.query({
         query: STRATEGIES_QUERY
diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
index 4b018bb86..51c8494a9 100644
--- a/apps/ui/src/networks/offchain/api/queries.ts
+++ b/apps/ui/src/networks/offchain/api/queries.ts
@@ -360,3 +360,18 @@ export const STRATEGY_QUERY = gql`
   }
   ${STRATEGY_FRAGMENT}
 `;
+
+export const STATEMENTS_AND_USERS_QUERY = gql`
+  query ($where: StatementsWhere, $userIds: [String!]) {
+    statements(where: $where) {
+      delegate
+      space
+      network
+      statement
+    }
+    users(where: { id_in: $userIds }) {
+      id
+      about
+    }
+  }
+`;
diff --git a/apps/ui/src/networks/types.ts b/apps/ui/src/networks/types.ts
index 78a67475d..12256f919 100644
--- a/apps/ui/src/networks/types.ts
+++ b/apps/ui/src/networks/types.ts
@@ -318,6 +318,11 @@ export type NetworkApi = {
     spaceId: string,
     userIds: string[]
   ): Promise<Statement[]>;
+  loadStatementsAndUsers(
+    networkId: NetworkID,
+    spaceId: string,
+    userIds: string[]
+  ): Promise<{ statements: Statement[]; users: User[] }>;
   loadStrategies(): Promise<StrategyTemplate[]>;
   loadStrategy(address: string): Promise<StrategyTemplate | null>;
 };
diff --git a/apps/ui/src/routes/common.ts b/apps/ui/src/routes/common.ts
index ac4d41067..6f7e4e662 100644
--- a/apps/ui/src/routes/common.ts
+++ b/apps/ui/src/routes/common.ts
@@ -6,6 +6,7 @@ import SpaceDelegates from '@/views/Space/Delegates.vue';
 import SpaceDiscussions from '@/views/Space/Discussions.vue';
 import SpaceEditor from '@/views/Space/Editor.vue';
 import SpaceLeaderboard from '@/views/Space/Leaderboard.vue';
+import SpaceMembers from '@/views/Space/Members.vue';
 import SpaceOverview from '@/views/Space/Overview.vue';
 import SpaceProposals from '@/views/Space/Proposals.vue';
 import SpaceSearch from '@/views/Space/Search.vue';
@@ -71,6 +72,11 @@ export const spaceChildrenRoutes: RouteRecordRaw[] = [
     name: 'space-leaderboard',
     component: SpaceLeaderboard
   },
+  {
+    path: 'members',
+    name: 'space-members',
+    component: SpaceMembers
+  },
   {
     path: 'profile/:user',
     name: 'space-user',
diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
new file mode 100644
index 000000000..fc35f622c
--- /dev/null
+++ b/apps/ui/src/views/Space/Members.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import removeMarkdown from 'remove-markdown';
+import { shorten } from '@/helpers/utils';
+import { getNetwork } from '@/networks';
+import { Space } from '@/types';
+
+const props = defineProps<{ space: Space }>();
+
+const { addNotification } = useUiStore();
+const { setTitle } = useTitle();
+
+const loaded = ref(false);
+const controller = ref<string>('');
+const statements = ref<Record<string, string>>({});
+const abouts = ref<Record<string, string>>({});
+const network = computed(() => getNetwork(props.space.network));
+
+const admins = props.space.additionalRawData?.admins || [];
+const moderators = props.space.additionalRawData?.moderators || [];
+const authors = props.space.additionalRawData?.members || [];
+
+async function loadMembersData() {
+  try {
+    controller.value = await network.value.helpers
+      .getSpaceController(props.space)
+      .then(c => c.toLowerCase());
+
+    const allUsers = [...admins, ...moderators, ...authors].map(u =>
+      u.toLowerCase()
+    );
+
+    if (!allUsers.length) return;
+
+    const { statements: userStatements, users } =
+      await network.value.api.loadStatementsAndUsers(
+        props.space.network,
+        props.space.id,
+        allUsers
+      );
+
+    statements.value = userStatements.reduce(
+      (acc, statement) => {
+        acc[statement.delegate.toLowerCase()] = statement.statement;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    abouts.value = users.reduce(
+      (acc, user) => {
+        acc[user.id.toLowerCase()] = user.about || '';
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    loaded.value = true;
+  } catch (e) {
+    addNotification('error', 'Failed to load members data.');
+    loaded.value = true;
+  }
+}
+watchEffect(() => setTitle(`Memebers - ${props.space.name}`));
+
+onMounted(loadMembersData);
+
+const roles = [
+  { data: admins, label: 'Admin(s)' },
+  { data: moderators, label: 'Moderator(s)' },
+  { data: authors, label: 'Authors(s)' }
+] as const;
+</script>
+
+<template>
+  <template v-for="role in roles" :key="role.label">
+    <UiLabel v-if="role.data?.length" :label="role.label" />
+    <div
+      v-for="(user, i) in role.data"
+      :key="`${role.label}-${i}`"
+      class="border-b flex space-x-1"
+    >
+      <div
+        class="flex items-center pl-4 py-3 gap-x-3 leading-[22px] min-w-[200px] truncate"
+      >
+        <UiStamp :id="user" :size="32" />
+        <AppLink
+          :to="{
+            name: 'space-user-statement',
+            params: { space: `${space.network}:${space.id}`, user: user }
+          }"
+          class="overflow-hidden"
+        >
+          <div
+            class="text-[17px] text-skin-heading truncate"
+            v-text="shorten(user)"
+          />
+          <div
+            v-if="user === controller"
+            class="rounded-full w-fit shrink-0 flex bg-orange-500 text-white"
+          >
+            <span class="text-sm leading-[10px] px-2 py-[4px]">
+              Controller
+            </span>
+          </div>
+        </AppLink>
+      </div>
+      <div
+        class="hidden sm:flex items-center grow text-[17px] overflow-hidden leading-[22px] text-skin-text"
+      >
+        <UiLoading v-if="!loaded" class="px-4 py-3 block" />
+        <span
+          v-else-if="statements[user] || abouts[user]"
+          class="line-clamp-2 max-h-[44px]"
+        >
+          {{ shorten(removeMarkdown(statements[user] || abouts[user]), 250) }}
+        </span>
+      </div>
+    </div>
+  </template>
+</template>

From d8738d39d3ac71c8bdf65462a1252758d0e37594 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 7 Nov 2024 17:32:47 +0100
Subject: [PATCH 02/14] Show Members even if only controller present

---
 apps/ui/src/components/App/Nav.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index efeab399c..b5f762f57 100644
--- a/apps/ui/src/components/App/Nav.vue
+++ b/apps/ui/src/components/App/Nav.vue
@@ -43,15 +43,17 @@ const space = computed(() =>
     : null
 );
 
-const isController = computedAsync(async () => {
-  if (!networkId.value || !space.value) return false;
-
-  const { account } = web3.value;
+const controller = computedAsync(async () => {
+  if (!networkId.value || !space.value) return null;
 
   const network = getNetwork(networkId.value);
-  const controller = await network.helpers.getSpaceController(space.value);
+  return await network.helpers.getSpaceController(space.value);
+});
+
+const isController = computed(() => {
+  const { account } = web3.value;
 
-  return compareAddresses(controller, account);
+  return compareAddresses(controller.value ?? '', account);
 });
 
 const canSeeSettings = computed(() => {
@@ -71,6 +73,7 @@ const canSeeMembers = computed(() => {
   const data = space.value?.additionalRawData;
 
   return (
+    controller.value ||
     (data?.admins?.length ?? 0) > 0 ||
     (data?.moderators?.length ?? 0) > 0 ||
     (data?.members?.length ?? 0) > 0

From 707bc7d8b497016bc3566405275eca1b96e1dfce Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 7 Nov 2024 18:00:56 +0100
Subject: [PATCH 03/14] Display names, remove label, load members at once

---
 apps/ui/src/views/Space/Members.vue | 95 +++++++++++++++--------------
 1 file changed, 49 insertions(+), 46 deletions(-)

diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
index fc35f622c..c90e2667e 100644
--- a/apps/ui/src/views/Space/Members.vue
+++ b/apps/ui/src/views/Space/Members.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import removeMarkdown from 'remove-markdown';
+import { getNames } from '@/helpers/stamp';
 import { shorten } from '@/helpers/utils';
 import { getNetwork } from '@/networks';
 import { Space } from '@/types';
@@ -10,7 +11,8 @@ const { addNotification } = useUiStore();
 const { setTitle } = useTitle();
 
 const loaded = ref(false);
-const controller = ref<string>('');
+const roles = ref<{ data: string[]; label: string }[]>([]);
+const names = ref<Record<string, string>>({});
 const statements = ref<Record<string, string>>({});
 const abouts = ref<Record<string, string>>({});
 const network = computed(() => getNetwork(props.space.network));
@@ -21,15 +23,15 @@ const authors = props.space.additionalRawData?.members || [];
 
 async function loadMembersData() {
   try {
-    controller.value = await network.value.helpers
+    const controller = await network.value.helpers
       .getSpaceController(props.space)
       .then(c => c.toLowerCase());
 
-    const allUsers = [...admins, ...moderators, ...authors].map(u =>
+    const allUsers = [controller, ...admins, ...moderators, ...authors].map(u =>
       u.toLowerCase()
     );
 
-    if (!allUsers.length) return;
+    names.value = await getNames(allUsers);
 
     const { statements: userStatements, users } =
       await network.value.api.loadStatementsAndUsers(
@@ -54,6 +56,13 @@ async function loadMembersData() {
       {} as Record<string, string>
     );
 
+    roles.value = [
+      { data: [controller], label: 'Controller' },
+      { data: admins, label: 'Admin(s)' },
+      { data: moderators, label: 'Moderator(s)' },
+      { data: authors, label: 'Authors(s)' }
+    ] as const;
+
     loaded.value = true;
   } catch (e) {
     addNotification('error', 'Failed to load members data.');
@@ -63,57 +72,51 @@ async function loadMembersData() {
 watchEffect(() => setTitle(`Memebers - ${props.space.name}`));
 
 onMounted(loadMembersData);
-
-const roles = [
-  { data: admins, label: 'Admin(s)' },
-  { data: moderators, label: 'Moderator(s)' },
-  { data: authors, label: 'Authors(s)' }
-] as const;
 </script>
 
 <template>
-  <template v-for="role in roles" :key="role.label">
+  <div v-if="!loaded" class="px-4 py-4 block">
+    <UiLoading class="block" />
+  </div>
+  <template v-for="role in roles" v-else :key="role.label">
     <UiLabel v-if="role.data?.length" :label="role.label" />
-    <div
-      v-for="(user, i) in role.data"
-      :key="`${role.label}-${i}`"
-      class="border-b flex space-x-1"
-    >
+    <div class="text-left table-fixed w-full">
       <div
-        class="flex items-center pl-4 py-3 gap-x-3 leading-[22px] min-w-[200px] truncate"
+        v-for="(user, i) in role.data"
+        :key="`${role.label}-${i}`"
+        class="border-b flex space-x-1"
       >
-        <UiStamp :id="user" :size="32" />
-        <AppLink
-          :to="{
-            name: 'space-user-statement',
-            params: { space: `${space.network}:${space.id}`, user: user }
-          }"
-          class="overflow-hidden"
+        <div
+          class="flex items-center pl-4 py-3 gap-x-3 leading-[22px] min-w-[220px] truncate"
         >
-          <div
-            class="text-[17px] text-skin-heading truncate"
-            v-text="shorten(user)"
-          />
-          <div
-            v-if="user === controller"
-            class="rounded-full w-fit shrink-0 flex bg-orange-500 text-white"
+          <UiStamp :id="user" :size="32" />
+          <AppLink
+            :to="{
+              name: 'space-user-statement',
+              params: { space: `${space.network}:${space.id}`, user: user }
+            }"
+            class="overflow-hidden"
           >
-            <span class="text-sm leading-[10px] px-2 py-[4px]">
-              Controller
-            </span>
-          </div>
-        </AppLink>
-      </div>
-      <div
-        class="hidden sm:flex items-center grow text-[17px] overflow-hidden leading-[22px] text-skin-text"
-      >
-        <UiLoading v-if="!loaded" class="px-4 py-3 block" />
-        <span
-          v-else-if="statements[user] || abouts[user]"
-          class="line-clamp-2 max-h-[44px]"
+            <h4
+              class="text-skin-link truncate"
+              v-text="names[user] || shorten(user)"
+            />
+            <h4
+              class="text-[17px] text-skin-text truncate"
+              v-text="shorten(user)"
+            />
+          </AppLink>
+        </div>
+        <div
+          class="hidden sm:flex items-center grow text-[17px] px-4 overflow-hidden leading-[22px] text-skin-text"
         >
-          {{ shorten(removeMarkdown(statements[user] || abouts[user]), 250) }}
-        </span>
+          <span
+            v-if="statements[user] || abouts[user]"
+            class="line-clamp-2 max-h-[44px]"
+          >
+            {{ shorten(removeMarkdown(statements[user] || abouts[user]), 250) }}
+          </span>
+        </div>
       </div>
     </div>
   </template>

From d5ca893000b0cf36b4b943c7a489a4669d5c902a Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 7 Nov 2024 18:17:19 +0100
Subject: [PATCH 04/14] Fix div

---
 apps/ui/src/views/Space/Members.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
index c90e2667e..da2cf8b63 100644
--- a/apps/ui/src/views/Space/Members.vue
+++ b/apps/ui/src/views/Space/Members.vue
@@ -101,7 +101,7 @@ onMounted(loadMembersData);
               class="text-skin-link truncate"
               v-text="names[user] || shorten(user)"
             />
-            <h4
+            <div
               class="text-[17px] text-skin-text truncate"
               v-text="shorten(user)"
             />

From cf5db05585467dddc3ae8b1b4bbaefb62f829776 Mon Sep 17 00:00:00 2001
From: Bartosz Pietrucha <pietrucha.bartosz@gmail.com>
Date: Thu, 7 Nov 2024 18:35:16 +0100
Subject: [PATCH 05/14] Fix typo in Members.vue

Co-authored-by: Less <bonustrack@users.noreply.github.com>
---
 apps/ui/src/views/Space/Members.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
index da2cf8b63..164908aac 100644
--- a/apps/ui/src/views/Space/Members.vue
+++ b/apps/ui/src/views/Space/Members.vue
@@ -69,7 +69,7 @@ async function loadMembersData() {
     loaded.value = true;
   }
 }
-watchEffect(() => setTitle(`Memebers - ${props.space.name}`));
+watchEffect(() => setTitle(`Members - ${props.space.name}`));
 
 onMounted(loadMembersData);
 </script>

From c0d131fd3162eb0e467d6cec98527382e4512b12 Mon Sep 17 00:00:00 2001
From: Bartosz Pietrucha <pietrucha.bartosz@gmail.com>
Date: Thu, 5 Dec 2024 09:14:29 +0100
Subject: [PATCH 06/14] Update apps/ui/src/networks/offchain/api/queries.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
---
 apps/ui/src/networks/offchain/api/queries.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
index 51c8494a9..4baa4671a 100644
--- a/apps/ui/src/networks/offchain/api/queries.ts
+++ b/apps/ui/src/networks/offchain/api/queries.ts
@@ -362,7 +362,7 @@ export const STRATEGY_QUERY = gql`
 `;
 
 export const STATEMENTS_AND_USERS_QUERY = gql`
-  query ($where: StatementsWhere, $userIds: [String!]) {
+  query ($statementsWhere: StatementsWhere, $userIds: [String!]) {
     statements(where: $where) {
       delegate
       space

From bb3c9ff2bfb4454f99e9b3c37f60fba5f28128c3 Mon Sep 17 00:00:00 2001
From: Bartosz Pietrucha <pietrucha.bartosz@gmail.com>
Date: Thu, 5 Dec 2024 09:15:28 +0100
Subject: [PATCH 07/14] Update apps/ui/src/components/App/Nav.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
---
 apps/ui/src/components/App/Nav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index b5f762f57..e9c7a3c8f 100644
--- a/apps/ui/src/components/App/Nav.vue
+++ b/apps/ui/src/components/App/Nav.vue
@@ -47,7 +47,7 @@ const controller = computedAsync(async () => {
   if (!networkId.value || !space.value) return null;
 
   const network = getNetwork(networkId.value);
-  return await network.helpers.getSpaceController(space.value);
+  return network.helpers.getSpaceController(space.value);
 });
 
 const isController = computed(() => {

From 7a28a5c191f44c4292d7e0ecbb57fb4fbcc82dfe Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 5 Dec 2024 09:29:49 +0100
Subject: [PATCH 08/14] Avoid calling method with fallback value

---
 apps/ui/src/components/App/Nav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index b5f762f57..7ce0271c9 100644
--- a/apps/ui/src/components/App/Nav.vue
+++ b/apps/ui/src/components/App/Nav.vue
@@ -53,7 +53,7 @@ const controller = computedAsync(async () => {
 const isController = computed(() => {
   const { account } = web3.value;
 
-  return compareAddresses(controller.value ?? '', account);
+  return controller.value && compareAddresses(controller.value, account);
 });
 
 const canSeeSettings = computed(() => {

From 96cfe73961d2a23628dd7bc5dec11344bbda48b9 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Fri, 6 Dec 2024 00:53:44 +0100
Subject: [PATCH 09/14] Improve navigation visibility rules

---
 apps/ui/src/components/App/Nav.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
index e5546c57c..2733762f0 100644
--- a/apps/ui/src/components/App/Nav.vue
+++ b/apps/ui/src/components/App/Nav.vue
@@ -2,7 +2,7 @@
 import { FunctionalComponent } from 'vue';
 import { SPACES_DISCUSSIONS } from '@/helpers/discourse';
 import { compareAddresses } from '@/helpers/utils';
-import { getNetwork } from '@/networks';
+import { getNetwork, offchainNetworks } from '@/networks';
 import IHAnnotation from '~icons/heroicons-outline/annotation';
 import IHBell from '~icons/heroicons-outline/bell';
 import IHCash from '~icons/heroicons-outline/cash';
@@ -72,6 +72,10 @@ const canSeeSettings = computed(() => {
 const canSeeMembers = computed(() => {
   const data = space.value?.additionalRawData;
 
+  if (!networkId.value || !offchainNetworks.includes(networkId.value)) {
+    return false;
+  }
+
   return (
     controller.value ||
     (data?.admins?.length ?? 0) > 0 ||

From 3daf35cb72f3d5b74621691391a5dc11a3ca6771 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Tue, 17 Dec 2024 14:21:48 +0100
Subject: [PATCH 10/14] Fix query param name

---
 apps/ui/src/networks/offchain/api/queries.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
index 133f1f3d2..63cce47c8 100644
--- a/apps/ui/src/networks/offchain/api/queries.ts
+++ b/apps/ui/src/networks/offchain/api/queries.ts
@@ -368,7 +368,7 @@ export const STRATEGY_QUERY = gql`
 
 export const STATEMENTS_AND_USERS_QUERY = gql`
   query ($statementsWhere: StatementsWhere, $userIds: [String!]) {
-    statements(where: $where) {
+    statements(where: $statementsWhere) {
       delegate
       space
       network

From 0cee0b75e1ac21913dd41a18416fd4bb880d218c Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Tue, 17 Dec 2024 14:35:19 +0100
Subject: [PATCH 11/14] Fix style warning

---
 apps/ui/src/views/Space/Members.vue | 82 +++++++++++++++--------------
 1 file changed, 43 insertions(+), 39 deletions(-)

diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
index 164908aac..267d72432 100644
--- a/apps/ui/src/views/Space/Members.vue
+++ b/apps/ui/src/views/Space/Members.vue
@@ -75,49 +75,53 @@ onMounted(loadMembersData);
 </script>
 
 <template>
-  <div v-if="!loaded" class="px-4 py-4 block">
-    <UiLoading class="block" />
-  </div>
-  <template v-for="role in roles" v-else :key="role.label">
-    <UiLabel v-if="role.data?.length" :label="role.label" />
-    <div class="text-left table-fixed w-full">
-      <div
-        v-for="(user, i) in role.data"
-        :key="`${role.label}-${i}`"
-        class="border-b flex space-x-1"
-      >
+  <div>
+    <div v-if="!loaded" class="px-4 py-4 block">
+      <UiLoading class="block" />
+    </div>
+    <template v-for="role in roles" v-else :key="role.label">
+      <UiLabel v-if="role.data?.length" :label="role.label" />
+      <div class="text-left table-fixed w-full">
         <div
-          class="flex items-center pl-4 py-3 gap-x-3 leading-[22px] min-w-[220px] truncate"
+          v-for="(user, i) in role.data"
+          :key="`${role.label}-${i}`"
+          class="border-b flex space-x-1"
         >
-          <UiStamp :id="user" :size="32" />
-          <AppLink
-            :to="{
-              name: 'space-user-statement',
-              params: { space: `${space.network}:${space.id}`, user: user }
-            }"
-            class="overflow-hidden"
+          <div
+            class="flex items-center pl-4 py-3 gap-x-3 leading-[22px] min-w-[220px] truncate"
           >
-            <h4
-              class="text-skin-link truncate"
-              v-text="names[user] || shorten(user)"
-            />
-            <div
-              class="text-[17px] text-skin-text truncate"
-              v-text="shorten(user)"
-            />
-          </AppLink>
-        </div>
-        <div
-          class="hidden sm:flex items-center grow text-[17px] px-4 overflow-hidden leading-[22px] text-skin-text"
-        >
-          <span
-            v-if="statements[user] || abouts[user]"
-            class="line-clamp-2 max-h-[44px]"
+            <UiStamp :id="user" :size="32" />
+            <AppLink
+              :to="{
+                name: 'space-user-statement',
+                params: { space: `${space.network}:${space.id}`, user: user }
+              }"
+              class="overflow-hidden"
+            >
+              <h4
+                class="text-skin-link truncate"
+                v-text="names[user] || shorten(user)"
+              />
+              <div
+                class="text-[17px] text-skin-text truncate"
+                v-text="shorten(user)"
+              />
+            </AppLink>
+          </div>
+          <div
+            class="hidden sm:flex items-center grow text-[17px] px-4 overflow-hidden leading-[22px] text-skin-text"
           >
-            {{ shorten(removeMarkdown(statements[user] || abouts[user]), 250) }}
-          </span>
+            <span
+              v-if="statements[user] || abouts[user]"
+              class="line-clamp-2 max-h-[44px]"
+            >
+              {{
+                shorten(removeMarkdown(statements[user] || abouts[user]), 250)
+              }}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-  </template>
+    </template>
+  </div>
 </template>

From 31fb757f588dc54331bd348d00c5f154d24a6184 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 2 Jan 2025 09:24:25 +0100
Subject: [PATCH 12/14] Fix var name

---
 apps/ui/src/networks/offchain/api/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
index 9d4dce28b..c7ccc9251 100644
--- a/apps/ui/src/networks/offchain/api/index.ts
+++ b/apps/ui/src/networks/offchain/api/index.ts
@@ -788,7 +788,7 @@ export function createApi(
       const { data } = await apollo.query({
         query: STATEMENTS_AND_USERS_QUERY,
         variables: {
-          where: {
+          statementsWhere: {
             delegate_in: userIds,
             network: networkId,
             space: spaceId

From 060e418eda17772446161ba8fabc6b3b1f948c60 Mon Sep 17 00:00:00 2001
From: bartosz-io <pietrucha.bartosz@gmail.com>
Date: Thu, 2 Jan 2025 10:10:48 +0100
Subject: [PATCH 13/14] Change the number of statements fetched

---
 apps/ui/src/networks/offchain/api/index.ts   | 1 +
 apps/ui/src/networks/offchain/api/queries.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
index c7ccc9251..492ad0dcf 100644
--- a/apps/ui/src/networks/offchain/api/index.ts
+++ b/apps/ui/src/networks/offchain/api/index.ts
@@ -788,6 +788,7 @@ export function createApi(
       const { data } = await apollo.query({
         query: STATEMENTS_AND_USERS_QUERY,
         variables: {
+          statementsFirst: 100,
           statementsWhere: {
             delegate_in: userIds,
             network: networkId,
diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
index 63cce47c8..87ec54f7a 100644
--- a/apps/ui/src/networks/offchain/api/queries.ts
+++ b/apps/ui/src/networks/offchain/api/queries.ts
@@ -367,8 +367,12 @@ export const STRATEGY_QUERY = gql`
 `;
 
 export const STATEMENTS_AND_USERS_QUERY = gql`
-  query ($statementsWhere: StatementsWhere, $userIds: [String!]) {
-    statements(where: $statementsWhere) {
+  query (
+    $statementsFirst: Int!
+    $statementsWhere: StatementsWhere
+    $userIds: [String!]
+  ) {
+    statements(first: $statementsFirst, where: $statementsWhere) {
       delegate
       space
       network

From 90fef44ea2cf4f24f6252b8e8785f9e7958f8ad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wiktor=20Tkaczy=C5=84ski?= <wiktor.tkaczynski@gmail.com>
Date: Mon, 6 Jan 2025 14:40:21 +0100
Subject: [PATCH 14/14] chore: add whitespace

---
 apps/ui/src/views/Space/Members.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/ui/src/views/Space/Members.vue b/apps/ui/src/views/Space/Members.vue
index 267d72432..ef53ca3aa 100644
--- a/apps/ui/src/views/Space/Members.vue
+++ b/apps/ui/src/views/Space/Members.vue
@@ -69,6 +69,7 @@ async function loadMembersData() {
     loaded.value = true;
   }
 }
+
 watchEffect(() => setTitle(`Members - ${props.space.name}`));
 
 onMounted(loadMembersData);