diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index e9e7f2a..029c8bb 100644 --- a/cypress/e2e/spec.cy.ts +++ b/cypress/e2e/spec.cy.ts @@ -1,6 +1,5 @@ describe('Renders every component', () => { it('Renders App component', () => { cy.visit('/'); - cy.getByTestId('boilerplate-title').should('exist'); }); }); 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/Title.tsx b/src/components/Title.tsx new file mode 100644 index 0000000..fb11d57 --- /dev/null +++ b/src/components/Title.tsx @@ -0,0 +1,11 @@ +interface TitleProps { + title: string; +} + +export const Title = ({ title }: TitleProps) => { + return ( + <> +

{title}

+ + ); +}; 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..e2912ee 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,8 @@ export * from './Theme'; export * from './Disclaimer'; export * from './CustomHead'; +export * from './Table'; +export * from './SearchBar'; +export * from './TotalValueLocked'; +export * from './Title'; +export * from './TitleBanner'; diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx new file mode 100644 index 0000000..2633f45 --- /dev/null +++ b/src/containers/Dashboard/index.tsx @@ -0,0 +1,13 @@ +import { SearchBar, Table, Title } from '~/components'; + +export const Dashboard = () => { + return ( +
+
+ + <SearchBar /> + </header> + <Table /> + </section> + ); +}; diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index 7fe18b3..391e76a 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -1,19 +1,21 @@ import { styled } from '@mui/material/styles'; -import { DISCLAIMER_HEIGHT, SURROUND_HEIGHT } from '~/utils'; +import { Dashboard, LockedAssets } from '~/containers'; +import { TitleBanner } from '~/components'; export const Landing = () => { return ( <LandingContainer> - <h1 data-testid='boilerplate-title'>Web3 React Boilerplate</h1> + <TitleBanner /> + <LockedAssets /> + <Dashboard /> </LandingContainer> ); }; -const LandingContainer = styled('div')({ +const LandingContainer = styled('main')({ 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..c365ac0 --- /dev/null +++ b/src/containers/LockedAssets/index.tsx @@ -0,0 +1,17 @@ +import { TotalValueLocked, Title } from '~/components'; +import { useData } from '~/hooks'; + +export const LockedAssets = () => { + const { ecosystemData } = useData(); + + return ( + <section> + {ecosystemData && ( + <> + <Title title={`Locked assets in shared bridge: ${ecosystemData.total}`} /> + <TotalValueLocked tvl={ecosystemData.tvl} /> + </> + )} + </section> + ); +}; diff --git a/src/containers/index.ts b/src/containers/index.ts index 162e75c..ac2a1af 100644 --- a/src/containers/index.ts +++ b/src/containers/index.ts @@ -2,3 +2,5 @@ export * from './Footer'; export * from './Header'; export * from './Layout'; export * from './Landing'; +export * from './Dashboard'; +export * from './LockedAssets'; 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; }[]; diff --git a/src/utils/misc.ts b/src/utils/misc.ts new file mode 100644 index 0000000..e69de29