diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js index ded414611..a2e73c87d 100644 --- a/packages/frontend/src/app/validator/[hash]/Validator.js +++ b/packages/frontend/src/app/validator/[hash]/Validator.js @@ -17,6 +17,7 @@ import { ValidatorCard } from '../../../components/validators' import { CircleIcon } from '../../../components/ui/icons' import { RateTooltip } from '../../../components/ui/Tooltips' import { networks } from '../../../constants/networks' +import { WithdrawalsList } from '../../../components/transfers' import './ValidatorPage.scss' import { Badge, @@ -428,7 +429,7 @@ function Validator ({ hash }) { Proposed Blocks Transactions - Withdrawals + Withdrawals {!withdrawals.error - ? !withdrawals.loading - ? <> - : - : } + ?
+ {!withdrawals.loading + ? + : + } +
+ : + } + + {withdrawals.data?.resultSet && +
+ paginationHandler(setWithdrawals, pagination.selected)} + pageCount={Math.ceil(withdrawals.data?.pagination?.total / pageSize) || 1} + forcePage={currentPage} + pageRangeDisplayed={0} + /> +
+ }
diff --git a/packages/frontend/src/components/transfers/TransfersList.js b/packages/frontend/src/components/transfers/TransfersList.js index 483f07547..b31d10cf8 100644 --- a/packages/frontend/src/components/transfers/TransfersList.js +++ b/packages/frontend/src/components/transfers/TransfersList.js @@ -1,21 +1,22 @@ import TransfersListItem from './TransfersListItem' +import { EmptyListMessage } from '../ui/lists' import './TransfersList.scss' function TransfersList ({ transfers = [], identityId }) { return ( -
- {transfers.map((transfer, key) => - - )} +
+ {transfers.map((transfer, key) => + + )} - {transfers.length === 0 && -
There are no transfers yet.
- } -
+ {transfers.length === 0 && + There are no transfers yet. + } +
) } diff --git a/packages/frontend/src/components/transfers/index.js b/packages/frontend/src/components/transfers/index.js new file mode 100644 index 000000000..e0ade9b52 --- /dev/null +++ b/packages/frontend/src/components/transfers/index.js @@ -0,0 +1,7 @@ +import WithdrawalsList from './withdrawals/WithdrawalsList' +import TransfersList from './TransfersList' + +export { + TransfersList, + WithdrawalsList +} diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js new file mode 100644 index 000000000..15bddcfd0 --- /dev/null +++ b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js @@ -0,0 +1,49 @@ +import WithdrawalsListItem from './WithdrawalsListItem' +import { EmptyListMessage } from '../../ui/lists' +import { Grid, GridItem } from '@chakra-ui/react' +import './WithdrawalsList.scss' + +function WithdrawalsList ({ withdrawals = [], headerStyles = 'default' }) { + const headerExtraClass = { + default: '', + light: 'BlocksList__ColumnTitles--Light' + } + + return ( +
+ + + Timestamp + + + Tx hash + + + Address + + + Document + + + Amount + + + Status + + + + {withdrawals.map((withdrawal, key) => + + )} + + {withdrawals.length === 0 && + There are no transfers yet. + } +
+ ) +} + +export default WithdrawalsList diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.scss b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.scss new file mode 100644 index 000000000..9caf5e9f7 --- /dev/null +++ b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.scss @@ -0,0 +1,26 @@ +@use '../../../styles/mixins.scss'; +@use './variables' as withdrawals; +@import '../../../styles/variables.scss'; + +.WithdrawalsList { + container-type: inline-size; + + &__ColumnTitles { + @include mixins.defListTitles; + @include withdrawals.Columns(); + } + + &__ColumnTitle { + @include withdrawals.Column(); + + &:last-child { + text-align: right; + } + } + + &__Column { + &--Address { + + } + } +} diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js new file mode 100644 index 000000000..915323ca2 --- /dev/null +++ b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js @@ -0,0 +1,46 @@ +import { Grid, GridItem } from '@chakra-ui/react' +import { ArrowCornerIcon } from '../../ui/icons' +import { Identifier, Credits } from '../../data' +import './WithdrawalsListItem.scss' + +function WithdrawalsListItem ({ withdrawal }) { + // temp + if (!withdrawal?.recipient) withdrawal.recipient = '376neLp6VAHDRvEFUG5ZR1tuevHynCGB3Scjaa8BodG7' + + return ( +
+ + + {new Date(withdrawal.timestamp).toLocaleString()} + + + + {withdrawal.txHash} + + + + {withdrawal?.recipient && + + + {withdrawal.recipient} + + } + + + + - + + + + {withdrawal.amount} + + + + + + +
+ ) +} + +export default WithdrawalsListItem diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss new file mode 100644 index 000000000..752aff0ca --- /dev/null +++ b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss @@ -0,0 +1,43 @@ +@use '../../../styles/mixins.scss'; +@use './variables' as withdrawals; +@import '../../../styles/variables.scss'; + +.WithdrawalsListItem { + @include mixins.DefListItem; + flex-wrap: wrap; + + &:hover { + cursor: default; + } + + &__Content { + @include withdrawals.Columns(); + } + + &__Column { + @include withdrawals.Column(); + font-size: 0.688rem; + + &--Timestamp { + font-size: 0.688rem; + } + + &--TxHash { + .Identifier { + font-size: 0.688rem; + } + } + + &--Address { + .Identifier { + font-size: 0.688rem; + } + + a { + display: flex; + align-items: center; + overflow: hidden; + } + } + } +} diff --git a/packages/frontend/src/components/transfers/withdrawals/_variables.scss b/packages/frontend/src/components/transfers/withdrawals/_variables.scss new file mode 100644 index 000000000..c4836782d --- /dev/null +++ b/packages/frontend/src/components/transfers/withdrawals/_variables.scss @@ -0,0 +1,44 @@ +@mixin Columns () { + display: grid; + gap: 16px; + grid-template-columns: 133px 70px 78px 78px 118px 18px; + + @container (max-width: 810px) { + grid-template-columns: 133px 70px 78px 78px 118px 18px; + } +} + +@mixin Column () { + display: flex; + align-items: center; + + &--Hash { + max-width: 600px; + } + + &--Sender { + max-width: 400px; + width: 100%; + } + + &--Type { + justify-content: flex-end; + white-space: nowrap; + } + + &--GasUsed { + width: 150px; + } + + @container (max-width: 810px) { + &--GasUsed { + display: none; + } + } + + @container (max-width: 430px) { + &--Sender { + display: none; + } + } +} \ No newline at end of file