feat: ecosystem layout

src/components/SearchBar.tsx

@@ -0,0 +1,7 @@
+export const SearchBar = () => {
+  return (
+    <form>
+      <input type='text' placeholder='Search...' />
+    </form>
+  );
+};

src/components/Table.tsx

@@ -0,0 +1,28 @@
+import { useData } from '~/hooks';
+
+export const Table = () => {
+  const { ecosystemData } = useData();
+  return (
+    <table>
+      <tr>
+        <th>Chain</th>
+        <th>Chain ID</th>
+        <th>Native token</th>
+        <th>TVL - L1</th>
+        <th>Type</th>
+      </tr>
+
+      {ecosystemData?.chains.map((data, index) => {
+        return (
+          <tr key={index}>
+            <td>{data.name}</td>
+            <td>{data.id}</td>
+            <td>{data.nativeToken}</td>
+            <td>{data.tvl}</td>
+            <td>{data.type}</td>
+          </tr>
+        );
+      })}
+    </table>
+  );
+};

src/components/TitleBanner.tsx

@@ -0,0 +1,10 @@
+export const TitleBanner = () => {
+  return (
+    <div>
+      <span>zkSync Ecosystem</span>
+      <div>
+        <span>Gas Price: 10 wei · ERC-20 Transfer: $10</span>
+      </div>
+    </div>
+  );
+};

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 (
+    <div>
+      {tvl.map((data, index) => (
+        <div key={index}>
+          <span>{data.token}</span>
+          <span>{data.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};

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';

src/containers/Dashboard/index.tsx

@@ -0,0 +1,15 @@
+import { SearchBar, Table } from '~/components';
+
+const Dashboard = () => {
+  return (
+    <div>
+      <div>
+        <h1>Chain list</h1>
+        <SearchBar />
+      </div>
+      <Table />
+    </div>
+  );
+};
+
+export default Dashboard;

src/containers/Landing/index.tsx

@@ -1,19 +1,22 @@
 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 (
     <LandingContainer>
-      <h1 data-testid='boilerplate-title'>Web3 React Boilerplate</h1>
+      <TitleBanner />
+      <LockedAssets />
+      <Dashboard />
     </LandingContainer>
   );
 };
 
 const LandingContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
-  height: `calc(100vh - ${SURROUND_HEIGHT}rem - ${DISCLAIMER_HEIGHT}rem)`,
   padding: '0 8rem',
   alignItems: 'center',
   justifyContent: 'center',

src/containers/LockedAssets/index.tsx

@@ -0,0 +1,17 @@
+import { TotalValueLocked } from '~/components';
+import { useData } from '~/hooks';
+
+export const LockedAssets = () => {
+  const { ecosystemData } = useData();
+
+  return (
+    <div>
+      {ecosystemData && (
+        <>
+          <h2>Locked assets in shared bridge: {ecosystemData.total}</h2>
+          <TotalValueLocked tvl={ecosystemData.tvl} />
+        </>
+      )}
+    </div>
+  );
+};

src/containers/index.ts

@@ -2,3 +2,4 @@ export * from './Footer';
 export * from './Header';
 export * from './Layout';
 export * from './Landing';
+export * from './Dashboard';

src/data/ecosystemMockData.json

@@ -50,6 +50,7 @@
       "type": "Validium"
     }
   ],
+  "total": 7000000,
   "tvl": [
     {
       "token": "ETH",

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;
   }[];