diff --git a/package.json b/package.json index 8c024e0..798421a 100644 --- a/package.json +++ b/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", diff --git a/src/components/MemberTable/MemberProfile.tsx b/src/components/MemberTable/MemberProfile.tsx new file mode 100644 index 0000000..60ed58f --- /dev/null +++ b/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 ( + + + {profile?.name || profile?.ens || truncateAddress(address)} + + ); +}; diff --git a/src/components/MemberTable/MemberTable.styles.tsx b/src/components/MemberTable/MemberTable.styles.tsx new file mode 100644 index 0000000..8d8bd59 --- /dev/null +++ b/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; +`; diff --git a/src/components/MemberTable/MemberTable.tsx b/src/components/MemberTable/MemberTable.tsx new file mode 100644 index 0000000..0d29bca --- /dev/null +++ b/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(); + +const columns = [ + columnHelper.accessor("address", { + header: () => "Address", + cell: (info) => , + }), + columnHelper.accessor("yeet", { + header: () => "Yeet", + cell: (info) => {`${info.renderValue()}`}, + }), +]; + +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.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ))} + +
+ + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + +
+ ); +}; diff --git a/src/hooks/useOnboarder.tsx b/src/hooks/useOnboarder.tsx index a5b57fa..3518fc4 100644 --- a/src/hooks/useOnboarder.tsx +++ b/src/hooks/useOnboarder.tsx @@ -3,6 +3,7 @@ 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; @@ -10,6 +11,12 @@ type FetchShape = { 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; diff --git a/src/pages/Join.tsx b/src/pages/Join.tsx index 6c236e6..3e50bf8 100644 --- a/src/pages/Join.tsx +++ b/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 = () => { Connect Wallet First )} + + {shamanData?.received && } ); }; diff --git a/yarn.lock b/yarn.lock index 3053b1c..5cc5861 100644 --- a/yarn.lock +++ b/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/table-core@8.9.3": + 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"