Feature/holders tab (#47)

* fix: finished Holders tab on address page

* fix: add format for balance

src/components/tables/TransactionsTable.tsx

@@ -162,6 +162,8 @@ interface TransactionTableProps {
   noScrollTop?: boolean;
   step?: number;
   primaryKey?: string;
+  showPages?: boolean
+  textType?: string
 }
 
 export function TransactionsTable(props: TransactionTableProps) {
@@ -181,6 +183,8 @@ export function TransactionsTable(props: TransactionTableProps) {
     hideCounter,
     noScrollTop,
     minWidth = "1310px",
+    showPages = false,
+    textType = 'transcation'
   } = props;
 
   const _IsLoading = isLoading;
@@ -201,7 +205,7 @@ export function TransactionsTable(props: TransactionTableProps) {
       >
         {!hideCounter ? (
           <Text style={{ flex: "1 1 100%" }}>
-            <b>{Math.min(limit, data.length)}</b> transaction
+            <b>{Math.min(limit, data.length)}</b> {textType}
             {data.length !== 1 ? "s" : ""} shown
           </Text>
         ) : (
@@ -216,6 +220,7 @@ export function TransactionsTable(props: TransactionTableProps) {
             elements={data}
             noScrollTop={noScrollTop}
             property="block_number"
+            showPages={showPages}
           />
         )}
       </Box>

src/pages/AddressPage/AddressDetails.tsx

@@ -18,10 +18,10 @@ import { CircleQuestion } from "grommet-icons";
 import styled from "styled-components";
 
 export const StyledBox = styled(Box)`
-  transition: all .2s linear;
+  transition: all 0.2s linear;
   border-radius: 2px;
   padding-left: 5px;
-`
+`;
 interface AddressDetailsProps {
   address: string;
   contracts: AddressDetails | null;

src/pages/AddressPage/tabs/holders/HoldersTab.tsx

@@ -3,10 +3,13 @@ import React, { useEffect, useState } from "react";
 import { getERC20TokenHolders } from "src/api/client";
 import { IHoldersInfo, IUserERC721Assets } from "src/api/client.interface";
 import { TransactionsTable } from "src/components/tables/TransactionsTable";
-import { Address } from "src/components/ui";
+import { Address, TokenValue } from "src/components/ui";
+import { useERC1155Pool } from "src/hooks/ERC1155_Pool";
+import { useERC20Pool } from "src/hooks/ERC20_Pool";
+import { useERC721Pool } from "src/hooks/ERC721_Pool";
 import { Filter } from "src/types";
 
-const getColumns = (): ColumnConfig<IHoldersInfo>[] => {
+const getColumns = (id: string): ColumnConfig<IHoldersInfo>[] => {
   return [
     {
       property: "ownerAddres",
@@ -34,20 +37,7 @@ const getColumns = (): ColumnConfig<IHoldersInfo>[] => {
       ),
       render: (data) => (
         <Text size="small" style={{ width: "140px" }}> 
-          {data.balance}
-        </Text>
-      ),
-    },
-    {
-      property: "Updated",
-      header: (
-        <Text color="minorText" size="small" style={{ fontWeight: 300 }}>
-          Updated
-        </Text>
-      ),
-      render: (data) => (
-        <Text size="12px">
-          {data.lastUpdateBlockNumber ? data.lastUpdateBlockNumber : "—"}
+          <TokenValue value={data.balance} tokenAddress={id} /> 
         </Text>
       ),
     },
@@ -59,6 +49,16 @@ export function HoldersTab(props: {
   type: "erc20" | "erc721" | "erc1155";
   inventory?: IUserERC721Assets[];
 }) {
+
+  const erc20Map = useERC20Pool();
+  const erc721Map = useERC721Pool();
+  const erc1155Map = useERC1155Pool();
+
+  const holdersTotal =
+    erc20Map[props.id]?.holders ||
+    erc721Map[props.id]?.holders ||
+    erc1155Map[props.id]?.holders;
+ 
   const limitValue = localStorage.getItem("tableLimitValue");
 
   const initFilter: Partial<Filter> = {
@@ -128,14 +128,17 @@ export function HoldersTab(props: {
   return (
     <Box style={{ padding: "10px" }}>
       <TransactionsTable
-        columns={getColumns()}
+        columns={getColumns(props.id)}
         filter={filter}
+        hideCounter={false}
         setFilter={setFilter}
         limit={filter.limit || 10}
         data={holders}
-        totalElements={filter.limit || 10}
+        totalElements={+holdersTotal}
         noScrollTop
         minWidth="1266px"
+        showPages={true}
+        textType={'holder'} 
       />
     </Box>
   );