Initial work on CrtHoldersTab.tsx

packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.tsx

@@ -1,19 +1,41 @@
+import { useMemo } from 'react'
+
+import { useGetCreatorTokenHoldersQuery } from '@/api/queries/__generated__/creatorTokens.generated'
+import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated'
 import { HoldersTable } from '@/components/_crt/HoldersTable/HoldersTable'
 
-export const CrtHoldersTab = () => {
-  return (
-    <HoldersTable
-      data={[
-        {
-          memberId: '1',
-          transferable: 1000,
-          allocation: 100,
-          total: 1000,
-          vested: 0,
+type CrtHoldersTabProps = {
+  token: FullCreatorTokenFragment
+}
+
+export const CrtHoldersTab = ({ token }: CrtHoldersTabProps) => {
+  const { data } = useGetCreatorTokenHoldersQuery({
+    variables: {
+      where: {
+        token: {
+          id_eq: token.id,
         },
-      ]}
-      isLoading={true}
-      currentMemberId="1"
-    />
+      },
+    },
+  })
+
+  const mappedData = useMemo(
+    () =>
+      data?.tokenAccounts
+        ? data.tokenAccounts.map((holder) => ({
+            member: holder.member,
+            transferable: +holder.totalAmount - +(holder.stakedAmount ?? 0),
+            allocation: Math.round((+holder.totalAmount / +token.totalSupply) * 100),
+            total: +holder.totalAmount,
+            vested: +(
+              holder.vestingSchedules.find(
+                (vesting) => vesting.vestingSource.__typename === 'InitialIssuanceVestingSource'
+              )?.totalVestingAmount ?? 0
+            ),
+          }))
+        : [],
+    [data?.tokenAccounts, token.totalSupply]
   )
+
+  return <HoldersTable data={mappedData} isLoading={true} currentMemberId="1" />
 }