-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add multiple account balances to dashboard (#47)
- Loading branch information
1 parent
a03e68e
commit 9f9c8db
Showing
9 changed files
with
215 additions
and
79 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 @@ | ||
| --- | ||
| '@smartcontractkit/operator-ui': minor | ||
| --- | ||
|
|
||
| Change the Account Balance section to accommodate multiple accounts on different chains. |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import * as React from 'react' | ||
| import { renderWithRouter, screen } from 'support/test-utils' | ||
| import { ChainAccountBalanceCard } from 'screens/Dashboard/ChainAccountBalanceCard' | ||
| import { EthKey } from 'types/generated/graphql' | ||
| import { buildETHKey } from 'support/factories/gql/fetchAccountBalances' | ||
| import { fromJuels } from 'utils/tokens/link' | ||
|
|
||
| const { findByText, queryByText } = screen | ||
|
|
||
| describe('ChainAccountBalanceCard', () => { | ||
| function renderComponent( | ||
| keys: Array<EthKey>, | ||
| chainID: string, | ||
| hideHeaderTitle: boolean, | ||
| ) { | ||
| renderWithRouter( | ||
| <ChainAccountBalanceCard | ||
| chainID={chainID} | ||
| keys={keys} | ||
| hideHeaderTitle={hideHeaderTitle} | ||
| />, | ||
| ) | ||
| } | ||
|
|
||
| it('renders the card with one address', async () => { | ||
| const key = buildETHKey() | ||
|
|
||
| renderComponent([key] as Array<EthKey>, '111', false) | ||
|
|
||
| expect(await findByText('Account Balances')).toBeInTheDocument() | ||
| expect(await findByText('Chain ID 111')).toBeInTheDocument() | ||
| expect(await findByText('Address')).toBeInTheDocument() | ||
| expect(await findByText('Native Token Balance')).toBeInTheDocument() | ||
| expect(await findByText('LINK Balance')).toBeInTheDocument() | ||
|
|
||
| expect(await findByText(key.address)).toBeInTheDocument() | ||
| expect(await findByText(key.ethBalance as string)).toBeInTheDocument() | ||
| expect( | ||
| await findByText(fromJuels(key.linkBalance as string)), | ||
| ).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders the card with two addresses', async () => { | ||
| const keys = [ | ||
| buildETHKey(), | ||
| buildETHKey({ | ||
| address: '0x0000000000000000000000000000000000000002', | ||
| linkBalance: '0.123', | ||
| ethBalance: '0.321', | ||
| }), | ||
| ] | ||
|
|
||
| renderComponent(keys as Array<EthKey>, '12345321', true) | ||
|
|
||
| expect(await queryByText('Account Balances')).toBeNull() | ||
| expect(await findByText('Chain ID 12345321')).toBeInTheDocument() | ||
|
|
||
| expect(await findByText(keys[0].address)).toBeInTheDocument() | ||
| expect(await findByText(keys[1].address)).toBeInTheDocument() | ||
| expect(await findByText(keys[0].ethBalance as string)).toBeInTheDocument() | ||
| expect(await findByText(keys[1].ethBalance as string)).toBeInTheDocument() | ||
| expect( | ||
| await findByText(fromJuels(keys[0].linkBalance as string)), | ||
| ).toBeInTheDocument() | ||
| expect( | ||
| await findByText(fromJuels(keys[1].linkBalance as string)), | ||
| ).toBeInTheDocument() | ||
| }) | ||
| }) |
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,83 @@ | ||
| import React from 'react' | ||
| import { EthKey } from 'types/generated/graphql' | ||
| import Grid from '@material-ui/core/Grid' | ||
| import { | ||
| DetailsCardItemTitle, | ||
| DetailsCardItemValue, | ||
| } from 'components/Cards/DetailsCard' | ||
| import { fromJuels } from 'utils/tokens/link' | ||
| import CardContent from '@material-ui/core/CardContent' | ||
| import CardHeader from '@material-ui/core/CardHeader' | ||
| import List from '@material-ui/core/List' | ||
| import ListItem from '@material-ui/core/ListItem' | ||
| import ListItemText from '@material-ui/core/ListItemText' | ||
| import Divider from '@material-ui/core/Divider' | ||
|
|
||
| export interface Props { | ||
| keys: Array<EthKey> | ||
| chainID: string | ||
| hideHeaderTitle: boolean | ||
| } | ||
| export const ChainAccountBalanceCard: React.FC<Props> = ({ | ||
| keys, | ||
| chainID, | ||
| hideHeaderTitle, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <CardHeader | ||
| title={!hideHeaderTitle && 'Account Balances'} | ||
| subheader={'Chain ID ' + chainID} | ||
| /> | ||
|
|
||
| <CardContent> | ||
| <List dense={false} disablePadding={true}> | ||
| {keys && | ||
| keys.map((key, i) => { | ||
| return ( | ||
| <> | ||
| <ListItem | ||
| disableGutters={true} | ||
| key={['acc-balance', chainID.toString(), i.toString()].join( | ||
| '-', | ||
| )} | ||
| > | ||
| <ListItemText | ||
| primary={ | ||
| <React.Fragment> | ||
| <Grid container spacing={16}> | ||
| <Grid item xs={12}> | ||
| <DetailsCardItemTitle title="Address" /> | ||
| <DetailsCardItemValue value={key.address} /> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <DetailsCardItemTitle title="Native Token Balance" /> | ||
| <DetailsCardItemValue | ||
| value={key.ethBalance || '--'} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <DetailsCardItemTitle title="LINK Balance" /> | ||
| <DetailsCardItemValue | ||
| value={ | ||
| key.linkBalance | ||
| ? fromJuels(key.linkBalance) | ||
| : '--' | ||
| } | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </React.Fragment> | ||
| } | ||
| ></ListItemText> | ||
| </ListItem> | ||
| {/* Don't show divider on the last element */} | ||
| {i + 1 < keys.length && <Divider />} | ||
| </> | ||
| ) | ||
| })} | ||
| </List> | ||
| </CardContent> | ||
| </> | ||
| ) | ||
| } |
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