-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #796 from alleslabs/feat/depositor-list
feat: depositor list
- Loading branch information
Showing
10 changed files
with
216 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
src/lib/pages/proposal-details/components/DepositAmounts.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { Flex, Text } from "@chakra-ui/react"; | ||
|
|
||
| import { TokenImageRender } from "lib/components/token"; | ||
| import type { ProposalDeposit } from "lib/types"; | ||
| import { formatUTokenWithPrecision, getTokenLabel } from "lib/utils"; | ||
|
|
||
| interface DepositAmountsProps { | ||
| deposit: ProposalDeposit; | ||
| } | ||
|
|
||
| export const DepositAmounts = ({ deposit }: DepositAmountsProps) => ( | ||
| <div> | ||
| {deposit.amount.map((token) => ( | ||
| <Flex key={token.denom} alignItems="center" gap={2}> | ||
| <Text variant="body2"> | ||
| <Text as="span" fontWeight={700} mr={1}> | ||
| {formatUTokenWithPrecision( | ||
| token.amount, | ||
| token.precision ?? 0, | ||
| true, | ||
| 2 | ||
| )} | ||
| </Text> | ||
| {getTokenLabel(token.denom, token.symbol)} | ||
| </Text> | ||
| <TokenImageRender logo={token.logo} /> | ||
| </Flex> | ||
| ))} | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
...details/components/vote-details/deposit-period/depositors-table/DepositorsTableHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { GridProps } from "@chakra-ui/react"; | ||
| import { Grid } from "@chakra-ui/react"; | ||
|
|
||
| import { TableHeader } from "lib/components/table"; | ||
|
|
||
| interface DepositorsTableHeaderProps { | ||
| templateColumns: GridProps["templateColumns"]; | ||
| } | ||
|
|
||
| export const DepositorsTableHeader = ({ | ||
| templateColumns, | ||
| }: DepositorsTableHeaderProps) => ( | ||
| <Grid templateColumns={templateColumns} minW="min-content"> | ||
| <TableHeader>Depositor</TableHeader> | ||
| <TableHeader>Transaction Hash</TableHeader> | ||
| <TableHeader>Timestamp</TableHeader> | ||
| <TableHeader textAlign="right">Deposited Amount</TableHeader> | ||
| </Grid> | ||
| ); |
52 changes: 52 additions & 0 deletions
52
...al-details/components/vote-details/deposit-period/depositors-table/DepositorsTableRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Flex, Grid, Text } from "@chakra-ui/react"; | ||
|
|
||
| import { DepositAmounts } from "../../../DepositAmounts"; | ||
| import { ExplorerLink } from "lib/components/ExplorerLink"; | ||
| import { TableRow } from "lib/components/table"; | ||
| import type { ProposalDeposit } from "lib/types"; | ||
| import { dateFromNow, formatUTC } from "lib/utils"; | ||
|
|
||
| interface DepositorsTableRowProps { | ||
| proposalDeposit: ProposalDeposit; | ||
| templateColumns: string; | ||
| } | ||
|
|
||
| export const DepositorsTableRow = ({ | ||
| proposalDeposit, | ||
| templateColumns, | ||
| }: DepositorsTableRowProps) => ( | ||
| <Grid templateColumns={templateColumns} minW="min-content"> | ||
| <TableRow> | ||
| <ExplorerLink type="user_address" value={proposalDeposit.depositor} /> | ||
| </TableRow> | ||
| <TableRow> | ||
| {proposalDeposit.txHash ? ( | ||
| <ExplorerLink | ||
| type="tx_hash" | ||
| value={proposalDeposit.txHash.toUpperCase()} | ||
| /> | ||
| ) : ( | ||
| <Text variant="body3" textColor="text.dark"> | ||
| N/A | ||
| </Text> | ||
| )} | ||
| </TableRow> | ||
| <TableRow> | ||
| {proposalDeposit.timestamp ? ( | ||
| <Flex direction="column"> | ||
| <Text variant="body3">{formatUTC(proposalDeposit.timestamp)}</Text> | ||
| <Text variant="body3" color="text.dark" mt="2px"> | ||
| ({dateFromNow(proposalDeposit.timestamp)}) | ||
| </Text> | ||
| </Flex> | ||
| ) : ( | ||
| <Text variant="body3" color="text.dark"> | ||
| N/A | ||
| </Text> | ||
| )} | ||
| </TableRow> | ||
| <TableRow justifyContent="flex-end"> | ||
| <DepositAmounts deposit={proposalDeposit} /> | ||
| </TableRow> | ||
| </Grid> | ||
| ); |
31 changes: 31 additions & 0 deletions
31
.../pages/proposal-details/components/vote-details/deposit-period/depositors-table/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { TableContainer } from "@chakra-ui/react"; | ||
|
|
||
| import { EmptyState } from "lib/components/state"; | ||
| import type { ProposalDeposit } from "lib/types"; | ||
|
|
||
| import { DepositorsTableHeader } from "./DepositorsTableHeader"; | ||
| import { DepositorsTableRow } from "./DepositorsTableRow"; | ||
|
|
||
| interface DepositorsTableProps { | ||
| depositors: ProposalDeposit[]; | ||
| } | ||
|
|
||
| const templateColumns = `1.5fr 1.5fr 2fr 1fr`; | ||
|
|
||
| export const DepositorsTable = ({ depositors }: DepositorsTableProps) => { | ||
| if (depositors.length === 0) | ||
| return <EmptyState message="The proposal has no depositors yet." />; | ||
|
|
||
| return ( | ||
| <TableContainer> | ||
| <DepositorsTableHeader templateColumns={templateColumns} /> | ||
| {depositors.map((each) => ( | ||
| <DepositorsTableRow | ||
| key={each.depositor} | ||
| proposalDeposit={each} | ||
| templateColumns={templateColumns} | ||
| /> | ||
| ))} | ||
| </TableContainer> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters