add member table

package.json

@@ -19,6 +19,7 @@
     "@daohaus/tx-builder": "^0.1.29",
     "@daohaus/ui": "^0.1.29",
     "@daohaus/utils": "^0.1.29",
+    "@tanstack/react-table": "^8.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

src/components/MemberTable/MemberProfile.tsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { ParMd, ProfileAvatar } from "@daohaus/ui";
+import { truncateAddress } from "@daohaus/utils";
+import { useMemberProfile } from "../../hooks/useMemberProfile";
+
+const MemberBox = styled.div`
+  display: flex;
+  align-items: center;
+  .avatar {
+    margin-right: 1.25rem;
+  }
+`;
+
+export const MemberProfile = ({
+  address,
+  className,
+}: {
+  address: string;
+  className?: string;
+}) => {
+  const { profile } = useMemberProfile({ address });
+
+  return (
+    <MemberBox className={className}>
+      <ProfileAvatar
+        address={address}
+        image={profile?.image}
+        className="avatar"
+      />
+      <ParMd>{profile?.name || profile?.ens || truncateAddress(address)}</ParMd>
+    </MemberBox>
+  );
+};

src/components/MemberTable/MemberTable.styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { Theme } from "@daohaus/ui";
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  margin: 6rem;
+`;
+
+export const TableHead = styled.thead`
+  height: 6rem;
+  background-color: ${({ theme }: { theme: Theme }) => theme.secondary.step3};
+`;
+
+export const TableRow = styled.tr`
+  height: 5rem;
+  &:nth-child(odd) {
+    background-color: ${({ theme }: { theme: Theme }) => theme.secondary.step5};
+  }
+
+  &:nth-child(even) {
+    background-color: ${({ theme }: { theme: Theme }) => theme.secondary.step3};
+  }
+`;
+
+export const TableData = styled.td`
+  padding: 1rem;
+  text-align: center;
+`;

src/components/MemberTable/MemberTable.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+import { Bold, DataLg, H2, ParMd } from "@daohaus/ui";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+
+import { MemberProfile } from "./MemberProfile";
+
+import { Table, TableData, TableHead, TableRow } from "./MemberTable.styles";
+
+type Member = {
+  address: string;
+  yeet: string;
+};
+
+const columnHelper = createColumnHelper<Member>();
+
+const columns = [
+  columnHelper.accessor("address", {
+    header: () => "Address",
+    cell: (info) => <MemberProfile address={info.getValue()} />,
+  }),
+  columnHelper.accessor("yeet", {
+    header: () => "Yeet",
+    cell: (info) => <ParMd>{`${info.renderValue()}`}</ParMd>,
+  }),
+];
+
+export const MemberTable = ({ memberList }: { memberList: Member[] }) => {
+  // console.log("memberList table", memberList);
+
+  const [data] = React.useState(() => [...memberList]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <Table>
+      <TableHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th key={header.id}>
+                <DataLg>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </DataLg>
+              </th>
+            ))}
+          </tr>
+        ))}
+      </TableHead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <TableData key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableData>
+            ))}
+          </TableRow>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

src/hooks/useOnboarder.tsx

@@ -3,13 +3,20 @@ import OnboarderABI from '../abis/Onboarder.json';
 import { createContract } from '@daohaus/tx-builder';
 import { ValidNetwork, Keychain } from '@daohaus/keychain-utils';
 import { useQuery } from 'react-query';
+import { fromWei } from '@daohaus/utils';
 
 type FetchShape = {
   baal?: boolean;
   expiry?: boolean;
   token?: boolean;
   minTribute?: boolean;
   multiply?: boolean;
+  received?: boolean;
+};
+
+type Member = {
+  address: string;
+  yeet: string;
 };
 
 const fetchOnboarder = async ({
@@ -42,12 +49,24 @@ const fetchOnboarder = async ({
     const minTribute = fetchShape?.minTribute ? await shamanContract.minTribute() : null;
     const multiply = fetchShape?.minTribute ? await shamanContract.multiply() : null;
 
+    // ObReceived (index_topic_1 address contributorAddress, uint256 amount, uint256 isShares, address baal, address vault)
+    const logs = await shamanContract.queryFilter(
+      shamanContract.filters.ObReceived(null, null, null, null, null),
+      0
+    );
+    const received = logs.map((log)=> {
+      return {
+        address: log.args?.contributorAddress,
+        yeet: fromWei(log.args?.amount),
+      }
+    });
 
     return {
       baal,
       expiry: expiry.toString() as string,
       minTribute,
       multiply,
+      received: received as Member[],
     };
   } catch (error: any) {
     console.error(error);
@@ -64,6 +83,7 @@ export const useOnboarder = ({
     expiry: true,
     minTribute: true,
     multiply: true,
+    received: true,
   },
 }: {
   shamanAddress: string;

src/pages/Join.tsx

@@ -36,6 +36,7 @@ import { useETH } from "../hooks/useETH";
 import { useERC20 } from "../hooks/useERC20";
 import { ProgressSection } from "../components/ProgressSection";
 import { useSafeETH } from "../hooks/useSafeETH";
+import { MemberTable } from "../components/MemberTable/MemberTable";
 
 const StakeBox = styled.div`
   max-width: 70rem;
@@ -116,10 +117,11 @@ export const Join = () => {
     fetchShape: {
       expiry: true,
       minTribute: true,
+      multiply: true,
+      received: true,
     },
   });
 
-
   const {
     ethData: yeetBankData,
     isLoading: isYeetBankLoading,
@@ -264,6 +266,8 @@ export const Join = () => {
           <WarningText>Connect Wallet First</WarningText>
         )}
       </StakeBox>
+
+      {shamanData?.received && <MemberTable memberList={shamanData.received} />}
     </SingleColumnLayout>
   );
 };

yarn.lock

@@ -2607,6 +2607,18 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
+"@tanstack/react-table@^8.9.3":
+  version "8.9.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.9.3.tgz#03a52e9e15f65c82a8c697a445c42bfca0c5cfc4"
+  integrity sha512-Ng9rdm3JPoSCi6cVZvANsYnF+UoGVRxflMb270tVj0+LjeT/ZtZ9ckxF6oLPLcKesza6VKBqtdF9mQ+vaz24Aw==
+  dependencies:
+    "@tanstack/table-core" "8.9.3"
+
+"@tanstack/[email protected]":
+  version "8.9.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.9.3.tgz#991da6b015f6200fdc841c48048bee5e197f6a46"
+  integrity sha512-NpHZBoHTfqyJk0m/s/+CSuAiwtebhYK90mDuf5eylTvgViNOujiaOaxNDxJkQQAsVvHWZftUGAx1EfO1rkKtLg==
+
 "@types/bn.js@^5.1.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-5.1.1.tgz#b51e1b55920a4ca26e9285ff79936bbdec910682"