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