chainhackers · nadyasav · Oct 18, 2023 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+.env
+
 # Logs
 logs
 *.log
@@ -35,6 +37,8 @@ out/
 # Docs
 docs/
 
+broadcast/
+
 # Dotenv file
 .env
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/frontend/package.json b/frontend/package.json
@@ -20,10 +20,15 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "^1.1.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
+    "axios": "^1.5.1",
     "classnames": "^2.3.2",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-transition-group": "^4.4.5",
+    "sort-by": "^1.2.0",
     "viem": "^1.15.4",
     "wagmi": "^1.4.3"
   },

diff --git a/frontend/public/assets/Logo.avif b/frontend/public/assets/Logo.avif
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,22 +1,17 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { PoolsPage } from 'Pages';
+import './index.scss';
 import '@rainbow-me/rainbowkit/styles.css';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import VersionInfo from './components/versionInfo/VersionInfo';
-import CreatePool from './components/createPool/CreatePool';
 
-function App() {
-  const versionGitTag = import.meta.env.VITE_REACT_APP_GIT_TAG;
-  const gitDate = import.meta.env.VITE_REACT_APP_GIT_DATE;
-
-  console.log('VITE_REACT_APP_GIT_TAG - ', versionGitTag);
-  console.log('VITE_REACT_APP_GIT_DATE - ', gitDate);
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <PoolsPage poolsType={'All Pools'} />,
+  },
+]);
 
-  return (
-    <div className='app'>
-      <ConnectButton />
-      <CreatePool />
-      {versionGitTag && gitDate && <VersionInfo version={versionGitTag} versionDate={gitDate} />}
-    </div>
-  );
+function App() {
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/frontend/src/components/dateCell/dateCell.tsx b/frontend/src/components/dateCell/dateCell.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { DateCellPropsI } from './dateCellProps';
+import { dateFromTimestamp } from 'Utils/dateFromTimestamp';
+
+export const DateCell: FC<DateCellPropsI> = ({ cellValue }) => {
+  const formattedDate = dateFromTimestamp(cellValue);
+  return <div>{formattedDate}</div>;
+};
diff --git a/frontend/src/components/dateCell/dateCellProps.ts b/frontend/src/components/dateCell/dateCellProps.ts
@@ -0,0 +1,3 @@
+export interface DateCellPropsI {
+  cellValue: number;
+}
diff --git a/frontend/src/components/dateCell/index.ts b/frontend/src/components/dateCell/index.ts
@@ -0,0 +1 @@
+export * from './dateCell';
diff --git a/frontend/src/components/header/Header.module.scss b/frontend/src/components/header/Header.module.scss
@@ -0,0 +1,29 @@
+.header {
+  display: flex;
+  padding: 24px;
+  align-items: center;
+  align-self: stretch;
+  background: #1b1b1f;
+  box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  nav {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: 96px;
+    margin-right: auto;
+    a {
+      padding: 8px;
+      border-radius: 4px;
+      background: var(--m-3-sys-dark-surface-container-high, #1b1b1f);
+      padding: 8px;
+      color: #c3c6cf;
+
+      &.active {
+        background-color: #292a2d;
+        color: #a3cddc;
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import styles from './Header.module.scss';
+import { Link, useLocation } from 'react-router-dom';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+export const Header: FC = () => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  return (
+    <header className={styles.header}>
+      <Link to={'/'}>
+        <img src='assets/Logo.avif' alt='' />
+      </Link>
+      <nav>
+        <Link className={currentPath === '/' ? styles.active : ''} to={'/'}>
+          Pools available
+        </Link>
+      </nav>
+      <ConnectButton />
+    </header>
+  );
+};
diff --git a/frontend/src/components/header/index.ts b/frontend/src/components/header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/frontend/src/components/icons/NavigateFirst/NavigateFirst.module.scss b/frontend/src/components/icons/NavigateFirst/NavigateFirst.module.scss
@@ -0,0 +1,8 @@
+.icon {
+  cursor: pointer;
+  &:hover {
+    path {
+      fill: #808080;
+    }
+  }
+}
diff --git a/frontend/src/components/icons/NavigateFirst/NavigateFirst.tsx b/frontend/src/components/icons/NavigateFirst/NavigateFirst.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import styles from './NavigateFirst.module.scss';
+
+export const NavigateFirst: FC = () => {
+  return (
+    <svg
+      className={styles.icon}
+      xmlns='http://www.w3.org/2000/svg'
+      width='40'
+      height='40'
+      viewBox='0 0 40 40'
+      fill='none'
+    >
+      <path
+        d='M25.9998 15.4115L21.4098 20.0015L25.9998 24.5915L24.5898 26.0015L18.5898 20.0015L24.5898 14.0015L25.9998 15.4115ZM15.5898 14.0015H13.5898V26.0015H15.5898V14.0015Z'
+        fill='#43474E'
+      />
+    </svg>
+  );
+};
diff --git a/frontend/src/components/icons/NavigateFirst/index.ts b/frontend/src/components/icons/NavigateFirst/index.ts
@@ -0,0 +1 @@
+export * from './NavigateFirst';
diff --git a/frontend/src/components/icons/NavigatePrevious/NavigatePrevious.module.scss b/frontend/src/components/icons/NavigatePrevious/NavigatePrevious.module.scss
@@ -0,0 +1,8 @@
+.icon {
+  cursor: pointer;
+  &:hover {
+    path {
+      fill: #808080;
+    }
+  }
+}
diff --git a/frontend/src/components/icons/NavigatePrevious/NavigatePrevious.tsx b/frontend/src/components/icons/NavigatePrevious/NavigatePrevious.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import styles from './NavigatePrevious.module.scss';
+
+export const NavigatePrevious: FC = () => {
+  return (
+    <svg
+      className={styles.icon}
+      xmlns='http://www.w3.org/2000/svg'
+      width='40'
+      height='40'
+      viewBox='0 0 40 40'
+      fill='none'
+    >
+      <path
+        d='M22.5898 14.0015L23.9998 15.4115L19.4198 20.0015L23.9998 24.5915L22.5898 26.0015L16.5898 20.0015L22.5898 14.0015Z'
+        fill='#43474E'
+      />
+    </svg>
+  );
+};
diff --git a/frontend/src/components/icons/NavigatePrevious/index.ts b/frontend/src/components/icons/NavigatePrevious/index.ts
@@ -0,0 +1 @@
+export * from './NavigatePrevious';
diff --git a/frontend/src/components/icons/index.ts b/frontend/src/components/icons/index.ts
@@ -0,0 +1,2 @@
+export * from './NavigateFirst';
+export * from './NavigatePrevious';
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -0,0 +1,4 @@
+export * from 'Components/table';
+export * from 'Components/pagination';
+export * from 'Components/header';
+export * from 'Components/dateCell';
diff --git a/frontend/src/components/pagination/Pagination.module.scss b/frontend/src/components/pagination/Pagination.module.scss
@@ -0,0 +1,29 @@
+.pagination {
+  display: flex;
+  gap: 24px;
+  padding: 16px 20px;
+  justify-content: flex-end;
+  align-items: center;
+  .rowsCount {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  .pages {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    span {
+      font-size: 16px;
+    }
+  }
+  .icons {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+
+    .rotateRight {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/frontend/src/components/pagination/Pagination.tsx b/frontend/src/components/pagination/Pagination.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import styles from './Pagination.module.scss';
+import { PaginationPropsI } from './PaginationPropsI';
+import { NavigateFirst, NavigatePrevious } from 'Components/icons';
+
+export const Pagination: FC<PaginationPropsI> = () => {
+  return (
+    <div className={styles.pagination}>
+      <div className={styles.rowsCount}>
+        <span className={styles.dimmedText}>Rows per page:</span>
+        {/* todo: add drop down menu */}
+        <span
+          style={{ padding: '6px 30px 6px 12px ', backgroundColor: '#292a2d', borderRadius: '8px' }}
+        >
+          10
+        </span>
+      </div>
+      <div className={styles.pages}>
+        {/* todo: display current page and pages length */}
+        <span>1</span>
+        <span>of</span>
+        <span>1</span>
+      </div>
+      <div className={styles.icons}>
+        <NavigateFirst />
+        <NavigatePrevious />
+        <div className={styles.rotateRight}>
+          <NavigatePrevious />
+        </div>
+        <div className={styles.rotateRight}>
+          <NavigateFirst />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/pagination/PaginationPropsI.ts b/frontend/src/components/pagination/PaginationPropsI.ts
@@ -0,0 +1 @@
+export interface PaginationPropsI {}
diff --git a/frontend/src/components/pagination/index.ts b/frontend/src/components/pagination/index.ts
@@ -0,0 +1 @@
+export * from './Pagination';
diff --git a/frontend/src/components/table/Table.module.scss b/frontend/src/components/table/Table.module.scss
@@ -0,0 +1,80 @@
+@mixin dimmedText {
+  color: #c3c6cf;
+  font-family: Noto Sans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.25px;
+}
+
+@mixin text {
+  color: #fff;
+  text-align: right;
+  font-family: Noto Sans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.25px;
+}
+
+.tableContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0 24px;
+  width: 100%;
+  border-radius: 16px;
+  background: #1b1b1f;
+  box-shadow:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3),
+    0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+
+    thead,
+    tbody {
+      padding: 24px;
+    }
+
+    thead {
+      tr {
+        border-bottom: 1px solid #a3cddc;
+      }
+    }
+    tbody {
+      tr:not(:last-child) {
+        border-bottom: 1px solid #43474e;
+      }
+    }
+
+    th {
+      border: none;
+      padding: 22px 8px 22px;
+      text-align: left;
+      @include dimmedText;
+    }
+    td {
+      border: none;
+      padding: 22px 8px;
+      @include dimmedText;
+    }
+
+    .center {
+      text-align: center;
+    }
+    .left {
+      text-align: left;
+    }
+    .right {
+      text-align: right;
+    }
+
+    .tableFooter {
+      display: flex;
+      width: 100%;
+    }
+  }
+}