From 0d1a4c15bc53efdb105d00440b6759beba42f6ba Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 16 Jul 2024 16:51:06 -0300 Subject: [PATCH] feat: ecosystem layout --- src/components/SearchBar.tsx | 7 +++++++ src/components/Table.tsx | 28 +++++++++++++++++++++++++++ src/components/TitleBanner.tsx | 10 ++++++++++ src/components/TotalValueLocked.tsx | 21 ++++++++++++++++++++ src/components/index.ts | 3 +++ src/containers/Dashboard/index.tsx | 15 ++++++++++++++ src/containers/Landing/index.tsx | 9 ++++++--- src/containers/LockedAssets/index.tsx | 17 ++++++++++++++++ src/containers/index.ts | 1 + src/data/ecosystemMockData.json | 1 + src/types/Data.ts | 5 ++--- 11 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 src/components/SearchBar.tsx create mode 100644 src/components/Table.tsx create mode 100644 src/components/TitleBanner.tsx create mode 100644 src/components/TotalValueLocked.tsx create mode 100644 src/containers/Dashboard/index.tsx create mode 100644 src/containers/LockedAssets/index.tsx diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx new file mode 100644 index 0000000..cd1018e --- /dev/null +++ b/src/components/SearchBar.tsx @@ -0,0 +1,7 @@ +export const SearchBar = () => { + return ( +
+ +
+ ); +}; diff --git a/src/components/Table.tsx b/src/components/Table.tsx new file mode 100644 index 0000000..377796c --- /dev/null +++ b/src/components/Table.tsx @@ -0,0 +1,28 @@ +import { useData } from '~/hooks'; + +export const Table = () => { + const { ecosystemData } = useData(); + return ( + + + + + + + + + + {ecosystemData?.chains.map((data, index) => { + return ( + + + + + + + + ); + })} +
ChainChain IDNative tokenTVL - L1Type
{data.name}{data.id}{data.nativeToken}{data.tvl}{data.type}
+ ); +}; diff --git a/src/components/TitleBanner.tsx b/src/components/TitleBanner.tsx new file mode 100644 index 0000000..36a52f4 --- /dev/null +++ b/src/components/TitleBanner.tsx @@ -0,0 +1,10 @@ +export const TitleBanner = () => { + return ( +
+ zkSync Ecosystem +
+ Gas Price: 10 wei ยท ERC-20 Transfer: $10 +
+
+ ); +}; diff --git a/src/components/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx new file mode 100644 index 0000000..38b4fe1 --- /dev/null +++ b/src/components/TotalValueLocked.tsx @@ -0,0 +1,21 @@ +export interface TokenValueLocked { + token: string; + value: number; +} + +interface TotalValueLockedProps { + tvl: { [token: string]: number }[]; +} + +export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => { + return ( +
+ {tvl.map((data, index) => ( +
+ {data.token} + {data.value} +
+ ))} +
+ ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index a25d295..c99907e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,6 @@ export * from './Theme'; export * from './Disclaimer'; export * from './CustomHead'; +export * from './Table'; +export * from './SearchBar'; +export * from './TotalValueLocked'; diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx new file mode 100644 index 0000000..96b5855 --- /dev/null +++ b/src/containers/Dashboard/index.tsx @@ -0,0 +1,15 @@ +import { SearchBar, Table } from '~/components'; + +const Dashboard = () => { + return ( +
+
+

Chain list

+ +
+ + + ); +}; + +export default Dashboard; diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index 7fe18b3..11feb44 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -1,11 +1,15 @@ import { styled } from '@mui/material/styles'; -import { DISCLAIMER_HEIGHT, SURROUND_HEIGHT } from '~/utils'; +import Dashboard from '../Dashboard'; +import { LockedAssets } from '../LockedAssets'; +import { TitleBanner } from '~/components/TitleBanner'; export const Landing = () => { return ( -

Web3 React Boilerplate

+ + + ); }; @@ -13,7 +17,6 @@ export const Landing = () => { const LandingContainer = styled('div')({ display: 'flex', flexDirection: 'column', - height: `calc(100vh - ${SURROUND_HEIGHT}rem - ${DISCLAIMER_HEIGHT}rem)`, padding: '0 8rem', alignItems: 'center', justifyContent: 'center', diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx new file mode 100644 index 0000000..6db0fd0 --- /dev/null +++ b/src/containers/LockedAssets/index.tsx @@ -0,0 +1,17 @@ +import { TotalValueLocked } from '~/components'; +import { useData } from '~/hooks'; + +export const LockedAssets = () => { + const { ecosystemData } = useData(); + + return ( +
+ {ecosystemData && ( + <> +

Locked assets in shared bridge: {ecosystemData.total}

+ + + )} +
+ ); +}; diff --git a/src/containers/index.ts b/src/containers/index.ts index 162e75c..f8f6565 100644 --- a/src/containers/index.ts +++ b/src/containers/index.ts @@ -2,3 +2,4 @@ export * from './Footer'; export * from './Header'; export * from './Layout'; export * from './Landing'; +export * from './Dashboard'; diff --git a/src/data/ecosystemMockData.json b/src/data/ecosystemMockData.json index f738e79..c701642 100644 --- a/src/data/ecosystemMockData.json +++ b/src/data/ecosystemMockData.json @@ -50,6 +50,7 @@ "type": "Validium" } ], + "total": 7000000, "tvl": [ { "token": "ETH", diff --git a/src/types/Data.ts b/src/types/Data.ts index d18071e..edce979 100644 --- a/src/types/Data.ts +++ b/src/types/Data.ts @@ -35,14 +35,13 @@ export interface EcosystemChainData { name: string; id: number; nativeToken: string; - tvl: { - [token: string]: number; - }; + tvl: number; type: string; } export interface EcosystemData { chains: EcosystemChainData[]; + total: number; tvl: { [token: string]: number; }[];