withdrawals counters

lib/api/resources.ts

@@ -43,7 +43,7 @@ import type { TransactionsResponseValidated, TransactionsResponsePending, Transa
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VisualizedContract } from 'types/api/visualization';
-import type { WithdrawalsResponse } from 'types/api/withdrawals';
+import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
 import type { ArrayElement } from 'types/utils';
 
 import appConfig from 'configs/app/config';
@@ -180,6 +180,9 @@ export const RESOURCES = {
     paginationFields: [ 'index' as const, 'items_count' as const ],
     filterFields: [],
   },
+  withdrawals_counters: {
+    path: '/api/v2/withdrawals/counters',
+  },
 
   // ADDRESSES
   addresses: {
@@ -569,6 +572,7 @@ Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
 Q extends 'visualize_sol2uml' ? VisualizedContract :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
 Q extends 'withdrawals' ? WithdrawalsResponse :
+Q extends 'withdrawals_counters' ? WithdrawalsCounters :
 Q extends 'l2_output_roots' ? L2OutputRootsResponse :
 Q extends 'l2_withdrawals' ? L2WithdrawalsResponse :
 Q extends 'l2_deposits' ? L2DepositsResponse :

mocks/withdrawals/withdrawals.ts

 export const data = {
   items: [
     {
-      amount: '192175',
+      amount: '192175000000000',
       block_number: 43242,
       index: 11688,
       receiver: {
@@ -15,7 +15,7 @@ export const data = {
       validator_index: 49622,
     },
     {
-      amount: '192175',
+      amount: '192175000000000',
       block_number: 43242,
       index: 11687,
       receiver: {
@@ -29,7 +29,7 @@ export const data = {
       validator_index: 49621,
     },
     {
-      amount: '182773',
+      amount: '182773000000000',
       block_number: 43242,
       index: 11686,
       receiver: {

types/api/withdrawals.ts

@@ -16,3 +16,8 @@ export type WithdrawalsItem = {
   timestamp: string;
   validator_index: number;
 }
+
+export type WithdrawalsCounters = {
+  withdrawal_count: string;
+  withdrawal_sum: string;
+}

ui/pages/Withdrawals.pw.tsx

@@ -8,6 +8,7 @@ import buildApiUrl from 'playwright/utils/buildApiUrl';
 import Withdrawals from './Withdrawals';
 
 const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
+const WITHDRAWALS_COUNTERS_API_URL = buildApiUrl('withdrawals_counters');
 
 test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
@@ -20,6 +21,11 @@ test('base view +@mobile', async({ mount, page }) => {
     body: JSON.stringify(withdrawalsData),
   }));
 
+  await page.route(WITHDRAWALS_COUNTERS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' }),
+  }));
+
   const component = await mount(
     <TestApp>
       <Withdrawals/>

ui/pages/Withdrawals.tsx

-import { Flex, Hide, Show } from '@chakra-ui/react';
+import { Flex, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import useApiQuery from 'lib/api/useApiQuery';
+import getCurrencyValue from 'lib/getCurrencyValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
@@ -18,6 +21,8 @@ const Withdrawals = () => {
     resourceName: 'withdrawals',
   });
 
+  const countersQuery = useApiQuery('withdrawals_counters');
+
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>{ data.items.map((item => <WithdrawalsListItem key={ item.index } item={ item } view="list"/>)) }</Show>
@@ -25,14 +30,43 @@ const Withdrawals = () => {
     </>
   ) : null;
 
-  const actionBar = isPaginationVisible ? (
+  const text = (() => {
+    if (countersQuery.isLoading) {
+      return (
+        <Skeleton
+          w={{ base: '100%', lg: '320px' }}
+          h="24px"
+          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+        />
+      );
+    }
+
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    const { valueStr } = getCurrencyValue({ value: countersQuery.data.withdrawal_sum });
+    return (
+      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
+        { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed and { valueStr } ETH withdrawn
+      </Text>
+    );
+  })();
+
+  const actionBar = (
+    <>
+      { (isMobile || !isPaginationVisible) && text }
+      { isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Flex alignItems="center" justifyContent="space-between" w="100%">
-        { !isMobile }
+            { !isMobile && text }
             <Pagination ml="auto" { ...pagination }/>
           </Flex>
         </ActionBar>
-  ) : null;
+      ) }
+    </>
+  );
 
   return (
     <Page>