forked from hyperledger-cacti/cacti
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ledger-browser): refactor eth tokens page into accounts page
- This concludes refactoring of ethereum app, it should be fully usable with mostly same features as before. - Refactor completely ETH app token page into accounts page using MUI components. - Update materialized view in peristence plugin ethereum schema. - Use hyperledger favicon from local files and not from the URL. - Remove files and components that are not used anymore. - Remove unnecessary package dependencies. Depends on hyperledger-cacti#3237 Signed-off-by: Michal Bajer <michal.bajer@fujitsu.com>
- Loading branch information
Showing
50 changed files
with
1,210 additions
and
1,241 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
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
Binary file not shown.
52 changes: 52 additions & 0 deletions
52
...ger-browser/src/main/typescript/apps/eth/components/AccountERC20View/AccountERC20View.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 React from "react"; | ||
| import Box from "@mui/material/Box"; | ||
| import Typography from "@mui/material/Typography"; | ||
| import Divider from "@mui/material/Divider"; | ||
|
|
||
| import { TokenERC20 } from "../../../../common/supabase-types"; | ||
| import ERC20TokenList from "./ERC20TokenList"; | ||
| import ERC20TokenDetails from "./ERC20TokenDetails"; | ||
|
|
||
| export type AccountERC20ViewProps = { | ||
| accountAddress: string; | ||
| }; | ||
|
|
||
| export default function AccountERC20View({ | ||
| accountAddress, | ||
| }: AccountERC20ViewProps) { | ||
| const [selectedToken, setSelectedToken] = React.useState< | ||
| TokenERC20 | undefined | ||
| >(undefined); | ||
|
|
||
| const tokenDetailsId = selectedToken | ||
| ? `${selectedToken.token_address}-${selectedToken.account_address}` | ||
| : "token-not-selected"; | ||
|
|
||
| return ( | ||
| <Box> | ||
| <Typography variant="h5" color="secondary"> | ||
| ERC20 | ||
| </Typography> | ||
| <Box | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="space-around" | ||
| alignContent="center" | ||
| gap={5} | ||
| > | ||
| <Box flex={5}> | ||
| <ERC20TokenList | ||
| accountAddress={accountAddress} | ||
| onTokenSelected={(token) => setSelectedToken(token)} | ||
| /> | ||
| </Box> | ||
|
|
||
| <Divider orientation="vertical" flexItem /> | ||
|
|
||
| <Box flex={7}> | ||
| <ERC20TokenDetails key={tokenDetailsId} token={selectedToken} /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
93 changes: 93 additions & 0 deletions
93
...ser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20BalanceHistoryChart.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,93 @@ | ||
| import Chart from "react-apexcharts"; | ||
| import { useTheme } from "@mui/material"; | ||
|
|
||
| import { BalanceHistoryListData } from "./balanceHistory"; | ||
|
|
||
| export type ERC20BalanceHistoryChartProps = { | ||
| data: BalanceHistoryListData[]; | ||
| height?: string | number; | ||
| }; | ||
|
|
||
| export default function ERC20BalanceHistoryChart({ | ||
| data, | ||
| height, | ||
| }: ERC20BalanceHistoryChartProps) { | ||
| if (!data) { | ||
| return; | ||
| } | ||
|
|
||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <> | ||
| {/* Style overwrite for Apex Charts to use colors from the theme for toolbar buttons (right-top of the chart) */} | ||
| <style> | ||
| {` | ||
| .apexcharts-zoom-icon.apexcharts-selected svg { | ||
| fill: ${theme.palette.secondary.main} !important; | ||
| } | ||
| .apexcharts-pan-icon.apexcharts-selected svg { | ||
| stroke: ${theme.palette.secondary.main} !important; | ||
| } | ||
| `} | ||
| </style> | ||
|
|
||
| {/* Chart component */} | ||
| <Chart | ||
| options={{ | ||
| chart: { | ||
| type: "line", | ||
| zoom: { | ||
| enabled: true, | ||
| type: "x", | ||
| autoScaleYaxis: true, | ||
| }, | ||
| toolbar: { | ||
| autoSelected: "zoom", | ||
| tools: { | ||
| zoom: true, | ||
| zoomin: true, | ||
| zoomout: true, | ||
| pan: true, | ||
| reset: true, | ||
| }, | ||
| }, | ||
| }, | ||
| colors: [theme.palette.primary.main], | ||
| xaxis: { | ||
| type: "datetime", | ||
| categories: data?.map((txn) => new Date(txn.created_at).getTime()), | ||
| labels: { | ||
| format: "dd-MM-yyyy h:mm", | ||
| }, | ||
| }, | ||
| yaxis: { | ||
| title: { | ||
| text: "Balance", | ||
| }, | ||
| }, | ||
| stroke: { | ||
| curve: "stepline", | ||
| }, | ||
| markers: { | ||
| size: 6, | ||
| }, | ||
| tooltip: { | ||
| x: { | ||
| format: "dd-MM-yyyy h:mm:ss", | ||
| }, | ||
| }, | ||
| }} | ||
| series={[ | ||
| { | ||
| name: "Balance", | ||
| data: data.map((txn) => txn.balance), | ||
| }, | ||
| ]} | ||
| type="line" | ||
| height={height} | ||
| /> | ||
| </> | ||
| ); | ||
| } |
168 changes: 168 additions & 0 deletions
168
...ser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20BalanceHistoryTable.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,168 @@ | ||
| import * as React from "react"; | ||
| import { styled } from "@mui/material/styles"; | ||
| import Box from "@mui/material/Box"; | ||
| import Table from "@mui/material/Table"; | ||
| import TableBody from "@mui/material/TableBody"; | ||
| import TableCell from "@mui/material/TableCell"; | ||
| import TableContainer from "@mui/material/TableContainer"; | ||
| import TableFooter from "@mui/material/TableFooter"; | ||
| import TablePagination from "@mui/material/TablePagination"; | ||
| import TableRow from "@mui/material/TableRow"; | ||
| import Paper from "@mui/material/Paper"; | ||
| import TableHead from "@mui/material/TableHead"; | ||
| import Typography from "@mui/material/Typography"; | ||
| import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; | ||
| import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; | ||
|
|
||
| import { TokenHistoryItem20 } from "../../../../common/supabase-types"; | ||
| import ShortenedTypography from "../../../../components/ui/ShortenedTypography"; | ||
|
|
||
| const StyledHeaderCell = styled(TableCell)(({ theme }) => ({ | ||
| color: theme.palette.primary.main, | ||
| fontWeight: "bold", | ||
| })); | ||
|
|
||
| export type BalanceAmountTextProps = { | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| function PositiveBalanceAmountText({ children }: BalanceAmountTextProps) { | ||
| return ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="right" | ||
| alignItems="center" | ||
| > | ||
| <Typography color="green" fontWeight="bold"> | ||
| {children} | ||
| </Typography> | ||
| <ArrowDropUpIcon color="success" /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| function NegativeBalanceAmountText({ children }: BalanceAmountTextProps) { | ||
| return ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="right" | ||
| alignItems="center" | ||
| > | ||
| <Typography color="red" fontWeight="bold"> | ||
| {children} | ||
| </Typography> | ||
| <ArrowDropDownIcon color="error" /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export type ERC20BalanceHistoryTableProps = { | ||
| data: TokenHistoryItem20[]; | ||
| ownerAddress: string; | ||
| }; | ||
|
|
||
| function formatCreatedAtDate(createdAt: string) { | ||
| const date = new Date(createdAt); | ||
| return date.toUTCString(); | ||
| } | ||
|
|
||
| export default function ERC20BalanceHistoryTable({ | ||
| data, | ||
| ownerAddress, | ||
| }: ERC20BalanceHistoryTableProps) { | ||
| const [page, setPage] = React.useState(0); | ||
| const [rowsPerPage, setRowsPerPage] = React.useState(5); | ||
| const sortedData = [...data].sort((a, b) => | ||
| b.created_at.localeCompare(a.created_at), | ||
| ); | ||
|
|
||
| // Avoid a layout jump when reaching the last page with empty rows. | ||
| const emptyRows = | ||
| page > 0 ? Math.max(0, (1 + page) * rowsPerPage - sortedData.length) : 0; | ||
|
|
||
| return ( | ||
| <TableContainer | ||
| component={Paper} | ||
| sx={{ | ||
| minWidth: 500, | ||
| }} | ||
| > | ||
| <Table aria-label="erc20 token history for account"> | ||
| <TableHead> | ||
| <TableRow> | ||
| <StyledHeaderCell>Time</StyledHeaderCell> | ||
| <StyledHeaderCell>Hash</StyledHeaderCell> | ||
| <StyledHeaderCell>From/To</StyledHeaderCell> | ||
| <StyledHeaderCell align="right">Amount</StyledHeaderCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {(rowsPerPage > 0 | ||
| ? sortedData.slice( | ||
| page * rowsPerPage, | ||
| page * rowsPerPage + rowsPerPage, | ||
| ) | ||
| : sortedData | ||
| ).map((row) => { | ||
| const isReceiving = row.recipient === ownerAddress; | ||
|
|
||
| return ( | ||
| <TableRow key={row.transaction_hash}> | ||
| <TableCell>{formatCreatedAtDate(row.created_at)}</TableCell> | ||
| <TableCell> | ||
| <ShortenedTypography | ||
| text={row.transaction_hash} | ||
| minWidth={300} | ||
| /> | ||
| </TableCell> | ||
| <TableCell> | ||
| {isReceiving ? ( | ||
| <ShortenedTypography text={row.sender} minWidth={200} /> | ||
| ) : ( | ||
| <ShortenedTypography text={row.recipient} minWidth={200} /> | ||
| )} | ||
| </TableCell> | ||
| <TableCell align="right"> | ||
| {isReceiving ? ( | ||
| <PositiveBalanceAmountText> | ||
| {row.value} | ||
| </PositiveBalanceAmountText> | ||
| ) : ( | ||
| <NegativeBalanceAmountText> | ||
| -{row.value} | ||
| </NegativeBalanceAmountText> | ||
| )} | ||
| </TableCell> | ||
| </TableRow> | ||
| ); | ||
| })} | ||
| {emptyRows > 0 && ( | ||
| <TableRow style={{ height: 53 * emptyRows }}> | ||
| <TableCell colSpan={6} /> | ||
| </TableRow> | ||
| )} | ||
| </TableBody> | ||
| <TableFooter> | ||
| <TableRow> | ||
| <TablePagination | ||
| rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]} | ||
| colSpan={3} | ||
| count={sortedData.length} | ||
| rowsPerPage={rowsPerPage} | ||
| page={page} | ||
| onPageChange={(_event, newPage) => { | ||
| setPage(newPage); | ||
| }} | ||
| onRowsPerPageChange={(event) => { | ||
| setRowsPerPage(parseInt(event.target.value, 10)); | ||
| setPage(0); | ||
| }} | ||
| /> | ||
| </TableRow> | ||
| </TableFooter> | ||
| </Table> | ||
| </TableContainer> | ||
| ); | ||
| } |
Oops, something went wrong.