From 0d1a4c15bc53efdb105d00440b6759beba42f6ba Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 16 Jul 2024 16:51:06 -0300 Subject: [PATCH 1/7] 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; }[]; From 33b5e228f2739660031ef0ed82b9520915ffa2ec Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 16 Jul 2024 16:56:53 -0300 Subject: [PATCH 2/7] tests: remove boilerplate datatest --- cypress/e2e/spec.cy.ts | 1 - 1 file changed, 1 deletion(-) 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'); }); }); From 8b82fb8c802f9c604f20a582a40f7f0e333dc5bb Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 17 Jul 2024 11:22:48 -0300 Subject: [PATCH 3/7] fix: html tags --- src/components/Title.tsx | 11 +++++++++++ src/containers/Dashboard/index.tsx | 11 ++++++----- src/containers/Landing/index.tsx | 2 +- src/containers/LockedAssets/index.tsx | 7 ++++--- 4 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 src/components/Title.tsx 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/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx index 96b5855..113a271 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -1,14 +1,15 @@ import { SearchBar, Table } from '~/components'; +import { Title } from '~/components/Title'; const Dashboard = () => { return ( -
-
-

Chain list

+
+
+ <SearchBar /> - </div> + </header> <Table /> - </div> + </section> ); }; diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index 11feb44..a18a028 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -14,7 +14,7 @@ export const Landing = () => { ); }; -const LandingContainer = styled('div')({ +const LandingContainer = styled('main')({ display: 'flex', flexDirection: 'column', padding: '0 8rem', diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx index 6db0fd0..03e48c8 100644 --- a/src/containers/LockedAssets/index.tsx +++ b/src/containers/LockedAssets/index.tsx @@ -1,17 +1,18 @@ import { TotalValueLocked } from '~/components'; +import { Title } from '~/components/Title'; import { useData } from '~/hooks'; export const LockedAssets = () => { const { ecosystemData } = useData(); return ( - <div> + <section> {ecosystemData && ( <> - <h2>Locked assets in shared bridge: {ecosystemData.total}</h2> + <Title title={`Locked assets in shared bridge: ${ecosystemData.total}`} /> <TotalValueLocked tvl={ecosystemData.tvl} /> </> )} - </div> + </section> ); }; From 3e1f3a91d2b700986e734d8cc81f3598ec61ea8e Mon Sep 17 00:00:00 2001 From: TITI <162849030+0xtiti@users.noreply.github.com> Date: Wed, 17 Jul 2024 11:51:48 -0300 Subject: [PATCH 4/7] style: fix quotes Co-authored-by: Ardy <116569704+0xArdy@users.noreply.github.com> --- src/containers/Dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx index 113a271..19e13d5 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -5,7 +5,7 @@ const Dashboard = () => { return ( <section> <header> - <Title title={'Chain list'} /> + <Title title="Chain list" /> <SearchBar /> </header> <Table /> From 27e757118a37f11c652d7338387f9263ce5b20b2 Mon Sep 17 00:00:00 2001 From: TITI <162849030+0xtiti@users.noreply.github.com> Date: Wed, 17 Jul 2024 11:52:04 -0300 Subject: [PATCH 5/7] style: imports Co-authored-by: Ardy <116569704+0xArdy@users.noreply.github.com> --- src/containers/LockedAssets/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx index 03e48c8..c365ac0 100644 --- a/src/containers/LockedAssets/index.tsx +++ b/src/containers/LockedAssets/index.tsx @@ -1,5 +1,4 @@ -import { TotalValueLocked } from '~/components'; -import { Title } from '~/components/Title'; +import { TotalValueLocked, Title } from '~/components'; import { useData } from '~/hooks'; export const LockedAssets = () => { From c665412011481e6ded362baf6cc14e53e1183ab0 Mon Sep 17 00:00:00 2001 From: TITI <162849030+0xtiti@users.noreply.github.com> Date: Wed, 17 Jul 2024 11:52:16 -0300 Subject: [PATCH 6/7] style: imports Co-authored-by: Ardy <116569704+0xArdy@users.noreply.github.com> --- src/containers/Dashboard/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx index 19e13d5..e7fc3d1 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -1,5 +1,4 @@ -import { SearchBar, Table } from '~/components'; -import { Title } from '~/components/Title'; +import { SearchBar, Table, Title } from '~/components'; const Dashboard = () => { return ( From 6e39b9cd8433330bd96305756edc28f05a43a418 Mon Sep 17 00:00:00 2001 From: titix <titi@defi.sucks> Date: Wed, 17 Jul 2024 12:18:33 -0300 Subject: [PATCH 7/7] style: fix imports --- src/components/index.ts | 2 ++ src/containers/Dashboard/index.tsx | 6 ++---- src/containers/Landing/index.tsx | 5 ++--- src/containers/index.ts | 1 + src/utils/misc.ts | 0 5 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 src/utils/misc.ts diff --git a/src/components/index.ts b/src/components/index.ts index c99907e..e2912ee 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,3 +4,5 @@ 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 index e7fc3d1..2633f45 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -1,15 +1,13 @@ import { SearchBar, Table, Title } from '~/components'; -const Dashboard = () => { +export const Dashboard = () => { return ( <section> <header> - <Title title="Chain list" /> + <Title title='Chain list' /> <SearchBar /> </header> <Table /> </section> ); }; - -export default Dashboard; diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index a18a028..391e76a 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -1,8 +1,7 @@ import { styled } from '@mui/material/styles'; -import Dashboard from '../Dashboard'; -import { LockedAssets } from '../LockedAssets'; -import { TitleBanner } from '~/components/TitleBanner'; +import { Dashboard, LockedAssets } from '~/containers'; +import { TitleBanner } from '~/components'; export const Landing = () => { return ( diff --git a/src/containers/index.ts b/src/containers/index.ts index f8f6565..ac2a1af 100644 --- a/src/containers/index.ts +++ b/src/containers/index.ts @@ -3,3 +3,4 @@ export * from './Header'; export * from './Layout'; export * from './Landing'; export * from './Dashboard'; +export * from './LockedAssets'; diff --git a/src/utils/misc.ts b/src/utils/misc.ts new file mode 100644 index 0000000..e69de29