Initial upload withdrawals list

pshenmic · Nov 7, 2024 · 31596bd · 31596bd
1 parent b626581
commit 31596bd
Show file tree

Hide file tree

Showing 8 changed files with 249 additions and 17 deletions.
diff --git 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 }) {
               <TabList>
                 <Tab>Proposed Blocks</Tab>
                 <Tab>Transactions</Tab>
-                <Tab isDisabled>Withdrawals</Tab>
+                <Tab>Withdrawals</Tab>
               </TabList>
               <TabPanels style={{
                 display: 'flex',
@@ -482,10 +483,25 @@ function Validator ({ hash }) {
                 </TabPanel>
                 <TabPanel className={'ValidatorPage__ListContainer'}>
                   {!withdrawals.error
-                    ? !withdrawals.loading
-                        ? <></>
-                        : <LoadingList itemsCount={pageSize}/>
-                    : <ErrorMessageBlock/>}
+                    ? <div className={'ValidatorPage__List'}>
+                        {!withdrawals.loading
+                          ? <WithdrawalsList withdrawals={withdrawals?.data?.resultSet} headerStyles={'light'}/>
+                          : <LoadingList itemsCount={pageSize}/>
+                        }
+                      </div>
+                    : <ErrorMessageBlock/>
+                  }
+
+                  {withdrawals.data?.resultSet &&
+                    <div className={'ValidatorPage__ListPagination'}>
+                      <Pagination
+                        onPageChange={pagination => paginationHandler(setWithdrawals, pagination.selected)}
+                        pageCount={Math.ceil(withdrawals.data?.pagination?.total / pageSize) || 1}
+                        forcePage={currentPage}
+                        pageRangeDisplayed={0}
+                      />
+                    </div>
+                  }
                 </TabPanel>
               </TabPanels>
             </Tabs>

diff --git 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 (
-        <div className={'TransfersList'}>
-            {transfers.map((transfer, key) =>
-                <TransfersListItem
-                    key={key}
-                    transfer={transfer}
-                    identityId={identityId}
-                />
-            )}
+    <div className={'TransfersList'}>
+      {transfers.map((transfer, key) =>
+        <TransfersListItem
+          key={key}
+          transfer={transfer}
+          identityId={identityId}
+        />
+      )}
 
-            {transfers.length === 0 &&
-                <div className={'TransfersList__EmptyMessage'}>There are no transfers yet.</div>
-            }
-        </div>
+      {transfers.length === 0 &&
+        <EmptyListMessage>There are no transfers yet.</EmptyListMessage>
+      }
+    </div>
   )
 }
 

diff --git a/packages/frontend/src/components/transfers/index.js 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
@@ -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 (
+    <div className={'WithdrawalsList'}>
+      <Grid className={`WithdrawalsList__ColumnTitles ${headerExtraClass[headerStyles] || ''}`}>
+        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+          Timestamp
+        </GridItem>
+        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--Hash'}>
+          Tx hash
+        </GridItem>
+        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+          Address
+        </GridItem>
+        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+          Document
+        </GridItem>
+        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+          Amount
+        </GridItem>
+        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+          Status
+        </GridItem>
+      </Grid>
+
+      {withdrawals.map((withdrawal, key) =>
+        <WithdrawalsListItem
+          key={key}
+          withdrawal={withdrawal}
+        />
+      )}
+
+      {withdrawals.length === 0 &&
+        <EmptyListMessage>There are no transfers yet.</EmptyListMessage>
+      }
+    </div>
+  )
+}
+
+export default WithdrawalsList
diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.scss 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
@@ -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 (
+    <div className={'WithdrawalsListItem'}>
+      <Grid className={'WithdrawalsListItem__Content'}>
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Timestamp'}>
+          {new Date(withdrawal.timestamp).toLocaleString()}
+        </GridItem>
+
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--TxHash'}>
+          <Identifier styles={['highlight-both']}>{withdrawal.txHash}</Identifier>
+        </GridItem>
+
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Address'}>
+          {withdrawal?.recipient &&
+            <a href={withdrawal.recipient}>
+              <ArrowCornerIcon color={'brand.normal'} w={'10px'} h={'10px'} mr={'10px'}/>
+              <Identifier styles={['highlight-both']}>{withdrawal.recipient}</Identifier>
+            </a>
+          }
+        </GridItem>
+
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Document'}>
+          -
+        </GridItem>
+
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Amount'}>
+          <Credits>{withdrawal.amount}</Credits>
+        </GridItem>
+
+        <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Status'}>
+
+        </GridItem>
+      </Grid>
+    </div>
+  )
+}
+
+export default WithdrawalsListItem
diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss 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
@@ -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;
+    }
+  }
+}