-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(explorer): account page (#2238)
- Loading branch information
1 parent
e79c180
commit 872a0f1
Showing
10 changed files
with
317 additions
and
42 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@kadena/explorer": minor | ||
| --- | ||
|
|
||
| add the account page |
42 changes: 42 additions & 0 deletions
42
...c/components/compact-keys-table/compact-keys-table-desktop/compact-keys-table-desktop.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,42 @@ | ||
| import { | ||
| Cell, | ||
| Column, | ||
| Row, | ||
| Table, | ||
| TableBody, | ||
| TableHeader, | ||
| } from '@kadena/react-ui'; | ||
| import type { FC } from 'react'; | ||
| import React from 'react'; | ||
| import type { ICompactKeyTableProps } from '../compact-keys-table'; | ||
| import { tableClass } from './styles.css'; | ||
|
|
||
| const CompactTransactionsTableDesktop: FC<ICompactKeyTableProps> = ({ | ||
| keys, | ||
| }) => { | ||
| return ( | ||
| <Table aria-label="Keys table" isStriped className={tableClass}> | ||
| <TableHeader> | ||
| <Column width="10%">ChainId</Column> | ||
| <Column width="50%">Key</Column> | ||
| <Column width="40%">Predicate</Column> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {keys.map((key) => ( | ||
| <Row key={key.key + key.chainId}> | ||
| <Cell> | ||
| <span>{key.chainId}</span> | ||
| </Cell> | ||
| <Cell> | ||
| <span>{key.key}</span> | ||
| </Cell> | ||
| <Cell> | ||
| <span>{key.predicate}</span> | ||
| </Cell> | ||
| </Row> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| ); | ||
| }; | ||
| export default CompactTransactionsTableDesktop; |
14 changes: 14 additions & 0 deletions
14
.../apps/explorer/src/components/compact-keys-table/compact-keys-table-desktop/styles.css.ts
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,14 @@ | ||
| import { globalStyle, style } from '@vanilla-extract/css'; | ||
|
|
||
| export const tableClass = style({ | ||
| width: '100%', | ||
| }); | ||
|
|
||
| globalStyle(`${tableClass} td span`, { | ||
| display: 'block', | ||
| alignItems: 'center', | ||
| contain: 'inline-size', | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| whiteSpace: 'nowrap', | ||
| }); |
39 changes: 39 additions & 0 deletions
39
...src/components/compact-keys-table/compact-keys-table-mobile/compact-keys-table-mobile.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,39 @@ | ||
| import { | ||
| dataFieldClass, | ||
| dataFieldLinkClass, | ||
| headerClass, | ||
| rowClass, | ||
| sectionClass, | ||
| } from '@/components/compact-transactions-table/compact-transactions-table-mobile/styles.css'; | ||
| import { Text } from '@kadena/react-ui'; | ||
| import type { FC } from 'react'; | ||
| import React from 'react'; | ||
| import type { ICompactKeyTableProps } from '../compact-keys-table'; | ||
|
|
||
| const CompactTransactionsTableMobile: FC<ICompactKeyTableProps> = ({ | ||
| keys, | ||
| }) => { | ||
| return keys.map((key, index) => ( | ||
| <section key={index} className={sectionClass}> | ||
| <div className={rowClass}> | ||
| <span className={headerClass}>ChainId</span> | ||
| {key.chainId} | ||
| </div> | ||
| <div className={rowClass}> | ||
| <span className={headerClass}>Key</span> | ||
| <Text variant="code" className={dataFieldClass}> | ||
| {key.key} | ||
| </Text> | ||
| </div> | ||
| <div className={rowClass}> | ||
| <span className={headerClass}>Predicate</span> | ||
| <span className={dataFieldLinkClass}> | ||
| <Text variant="code" className={dataFieldClass}> | ||
| {key.predicate} | ||
| </Text> | ||
| </span> | ||
| </div> | ||
| </section> | ||
| )); | ||
| }; | ||
| export default CompactTransactionsTableMobile; |
29 changes: 29 additions & 0 deletions
29
packages/apps/explorer/src/components/compact-keys-table/compact-keys-table.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,29 @@ | ||
| import { Media } from '@/components/layout/media'; | ||
| import type { FC } from 'react'; | ||
| import React from 'react'; | ||
| import CompactKeysTableDesktop from './compact-keys-table-desktop/compact-keys-table-desktop'; | ||
| import CompactKeysTableMobile from './compact-keys-table-mobile/compact-keys-table-mobile'; | ||
|
|
||
| export interface IKeyProps { | ||
| chainId: string; | ||
| key: string; | ||
| predicate: string; | ||
| } | ||
|
|
||
| export interface ICompactKeyTableProps { | ||
| keys: IKeyProps[]; | ||
| } | ||
|
|
||
| const CompactKeysTable: FC<ICompactKeyTableProps> = ({ keys }) => { | ||
| return ( | ||
| <> | ||
| <Media lessThan="sm"> | ||
| <CompactKeysTableMobile keys={keys} /> | ||
| </Media> | ||
| <Media greaterThanOrEqual="sm"> | ||
| <CompactKeysTableDesktop keys={keys} /> | ||
| </Media> | ||
| </> | ||
| ); | ||
| }; | ||
| export default CompactKeysTable; |
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
15 changes: 15 additions & 0 deletions
15
packages/apps/explorer/src/components/mask-accountname/mask-accountname.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,15 @@ | ||
| import { maskValue } from '@kadena/react-ui'; | ||
| import type { FC } from 'react'; | ||
| import React from 'react'; | ||
|
|
||
| interface IProps { | ||
| value?: string; | ||
| } | ||
|
|
||
| const MaskedAccountName: FC<IProps> = ({ value }) => { | ||
| if (!value) return null; | ||
|
|
||
| return <span>{maskValue(value)}</span>; | ||
| }; | ||
|
|
||
| export default MaskedAccountName; |
25 changes: 25 additions & 0 deletions
25
packages/apps/explorer/src/graphql/queries/account.graph.ts
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,25 @@ | ||
| import { gql } from '@apollo/client'; | ||
| import type { DocumentNode } from 'graphql'; | ||
|
|
||
| export const block: DocumentNode = gql` | ||
| query account($accountName: String!) { | ||
| fungibleAccount(accountName: $accountName) { | ||
| accountName | ||
| totalBalance | ||
| chainAccounts { | ||
| chainId | ||
| guard { | ||
| keys | ||
| predicate | ||
| } | ||
| } | ||
| transactions { | ||
| edges { | ||
| node { | ||
| ...CoreTransactionFields | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `; |
76 changes: 76 additions & 0 deletions
76
packages/apps/explorer/src/pages/account/[accountName].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,76 @@ | ||
| import type { Transaction } from '@/__generated__/sdk'; | ||
| import { useAccountQuery } from '@/__generated__/sdk'; | ||
| import type { IKeyProps } from '@/components/compact-keys-table/compact-keys-table'; | ||
| import CompactKeysTable from '@/components/compact-keys-table/compact-keys-table'; | ||
| import CompactTransactionsTable from '@/components/compact-transactions-table/compact-transactions-table'; | ||
| import MaskedAccountName from '@/components/mask-accountname/mask-accountname'; | ||
| import { Heading, Stack } from '@kadena/react-ui'; | ||
| import { useRouter } from 'next/router'; | ||
| import type { FC } from 'react'; | ||
| import React, { useMemo } from 'react'; | ||
|
|
||
| const Account: FC = () => { | ||
| const router = useRouter(); | ||
|
|
||
| const { loading, data, error } = useAccountQuery({ | ||
| variables: { | ||
| accountName: router.query.accountName as string, | ||
| }, | ||
| skip: !router.query.accountName, | ||
| }); | ||
|
|
||
| const { fungibleAccount } = data ?? {}; | ||
|
|
||
| const keys: IKeyProps[] = useMemo(() => { | ||
| const innerKeys: IKeyProps[] = | ||
| fungibleAccount?.chainAccounts.reduce((acc: IKeyProps[], val) => { | ||
| const guardKeys: IKeyProps[] = val.guard.keys.map((key) => { | ||
| return { | ||
| key: key, | ||
| predicate: val.guard.predicate, | ||
| chainId: val.chainId, | ||
| }; | ||
| }); | ||
| return [...acc, ...guardKeys]; | ||
| }, []) ?? []; | ||
|
|
||
| return innerKeys.sort((a: IKeyProps, b: IKeyProps) => { | ||
| if (parseInt(a.chainId, 10) < parseInt(b.chainId, 10)) return -1; | ||
| if (parseInt(a.chainId, 10) > parseInt(b.chainId, 10)) return 1; | ||
| return 0; | ||
| }); | ||
| }, [fungibleAccount?.chainAccounts]); | ||
|
|
||
| return ( | ||
| <> | ||
| {loading && <div>Loading...</div>} | ||
| {error && <div>Error: {error.message}</div>} | ||
|
|
||
| <Stack margin="md"> | ||
| <Heading as="h5"> | ||
| {parseFloat(fungibleAccount?.totalBalance).toFixed(2)} KDA spread | ||
| across {fungibleAccount?.chainAccounts.length} Chains for account{' '} | ||
| <MaskedAccountName value={fungibleAccount?.accountName ?? ''} /> | ||
| </Heading> | ||
| </Stack> | ||
| {keys && <CompactKeysTable keys={keys} />} | ||
| <Stack | ||
| width="100%" | ||
| gap="md" | ||
| flexDirection={{ xs: 'column-reverse', md: 'row' }} | ||
| > | ||
| <Stack flex={1} flexDirection="column"> | ||
| {fungibleAccount?.transactions && ( | ||
| <CompactTransactionsTable | ||
| transactions={fungibleAccount?.transactions.edges.map( | ||
| (edge) => edge.node as Transaction, | ||
| )} | ||
| /> | ||
| )} | ||
| </Stack> | ||
| </Stack> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Account; |