a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract common component

This commit is contained in:
Willian Mitsuda 2022-02-19 06:17:40 -03:00
parent 88d0116d4e
commit ee0ea1a2e3
1 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/address/AddressTransactionResults.tsx
View File

@ -11,7 +11,7 @@ import { SelectionContext, useSelection } from "../useSelection";
import { useMultipleETHUSDOracle } from "../usePriceOracle"; import { useMultipleETHUSDOracle } from "../usePriceOracle";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
import { useParams, useSearchParams } from "react-router-dom"; import { useParams, useSearchParams } from "react-router-dom";
import { ChecksummedAddress } from "../types"; import { ChecksummedAddress, ProcessedTransaction } from "../types";
import { useContractsMetadata } from "../hooks"; import { useContractsMetadata } from "../hooks";
type AddressTransactionResultsProps = { type AddressTransactionResultsProps = {
@ -120,23 +120,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
return ( return (
<ContentFrame tabs> <ContentFrame tabs>
<div className="flex justify-between items-baseline py-3"> <NavBar address={address} page={page} controller={controller} />
<div className="text-sm text-gray-500">
{page === undefined ? (
<>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={address}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page?.[0]?.hash ?? ""}
nextHash={page?.[page.length - 1]?.hash ?? ""}
disabled={controller === undefined}
/>
</div>
<ResultHeader <ResultHeader
feeDisplay={feeDisplay} feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler} feeDisplayToggler={feeDisplayToggler}
@ -153,23 +137,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
metadatas={metadatas} metadatas={metadatas}
/> />
))} ))}
<div className="flex justify-between items-baseline py-3"> <NavBar address={address} page={page} controller={controller} />
<div className="text-sm text-gray-500">
{page === undefined ? (
<>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={address}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page?.[0]?.hash ?? ""}
nextHash={page?.[page.length - 1]?.hash ?? ""}
disabled={controller === undefined}
/>
</div>
</SelectionContext.Provider> </SelectionContext.Provider>
) : ( ) : (
<PendingResults /> <PendingResults />
@ -178,4 +146,30 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
); );
}; };
type NavBarProps = {
address: ChecksummedAddress;
page: ProcessedTransaction[] | undefined;
controller: SearchController | undefined;
};
const NavBar: React.FC<NavBarProps> = ({ address, page, controller }) => (
<div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500">
{page === undefined ? (
<>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={address}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page?.[0]?.hash ?? ""}
nextHash={page?.[page.length - 1]?.hash ?? ""}
disabled={controller === undefined}
/>
</div>
);
export default AddressTransactionResults; export default AddressTransactionResults;