feat: make a self-contained SPA using react-router-dom.

laina-defi · Aug 20, 2024 · bf3ff60 · bf3ff60
1 parent 906d326
commit bf3ff60
Show file tree

Hide file tree

Showing 18 changed files with 180 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "framer-motion": "^11.3.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.3.3"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import Nav from '@components/Nav';
+import BorrowPage from '@pages/borrow/BorrowPage';
+import LandingPage from '@pages/landing/LandingPage';
+import LendPage from '@pages/lend/LendPage';
+import LiquidatePage from '@pages/liquidate/LiquidatePage';
+
+const PageWrapper = () => (
+  <>
+    <Nav />
+    <main className="max-w-screen w-256">
+      <Outlet />
+    </main>
+  </>
+);
+
+const router = createBrowserRouter([
+  {
+    element: <PageWrapper />,
+    children: [
+      { path: '', element: <LandingPage /> },
+      { path: 'lend', element: <LendPage /> },
+      { path: 'borrow', element: <BorrowPage /> },
+      { path: 'liquidate', element: <LiquidatePage /> },
+    ],
+  },
+]);
+
+const App = () => {
+  return (
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
+  );
+};
+
+export default App;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
 
 export interface ButtonProps {
   onClick: () => void;
@@ -20,15 +21,15 @@ export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
 );
 
 export interface SelectLinkButtonProps {
-  href: string;
+  to: string;
   selected: boolean;
 }
 
-export const SelectLinkButton = ({ href, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
-  <a
+export const SelectLinkButton = ({ to, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
+  <Link
     className={`font-bold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
-    href={href}
+    to={to}
   >
     {children}
-  </a>
+  </Link>
 );
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,27 +1,26 @@
+import { Link, useLocation } from 'react-router-dom';
 import logo from '/public/laina_v3_shrinked.png';
 import { SelectButtonWrapper, SelectLinkButton } from './Button';
 
-interface NavProps {
-  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
-}
+export default function Nav() {
+  const { pathname } = useLocation();
 
-export default function Nav({ pathname }: NavProps) {
   return (
     <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
       <div>
-        <a href="/">
+        <Link to="/">
           <img src={logo.src} alt="logo" width={200} />
-        </a>
+        </Link>
       </div>
 
       <SelectButtonWrapper>
-        <SelectLinkButton href="/lend" selected={pathname === 'lend'}>
+        <SelectLinkButton to="/lend" selected={pathname === '/lend'}>
           Lend
         </SelectLinkButton>
-        <SelectLinkButton href="/borrow" selected={pathname === 'borrow'}>
+        <SelectLinkButton to="/borrow" selected={pathname === '/borrow'}>
           Borrow
         </SelectLinkButton>
-        <SelectLinkButton href="/liquidate" selected={pathname === 'liquidate'}>
+        <SelectLinkButton to="/liquidate" selected={pathname === '/liquidate'}>
           Liquidate
         </SelectLinkButton>
       </SelectButtonWrapper>

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,14 +2,11 @@
 import '@fontsource/inter';
 import '@fontsource/inter/600.css';
 
-import Nav from '../components/Nav';
-
 interface Props {
   title: string;
-  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
 }
 
-const { title, pathname } = Astro.props;
+const { title } = Astro.props;
 ---
 
 <!doctype html>
@@ -23,10 +20,7 @@ const { title, pathname } = Astro.props;
     <title>{title}</title>
   </head>
   <body class="font-sans bg-grey-light min-h-screen">
-    <Nav pathname={pathname} />
-    <main class="max-w-full w-256">
-      <slot />
-    </main>
+    <slot />
   </body>
 </html>
 <style is:global>

diff --git a/src/pages/[...path].astro b/src/pages/[...path].astro
@@ -0,0 +1,19 @@
+---
+import App from '../App.tsx';
+import Layout from '../layouts/Layout.astro';
+
+export function getStaticPaths() {
+  return [
+    { params: { path: undefined }, props: { title: 'Laina – DeFi made simple.' } },
+    { params: { path: 'lend' }, props: { title: 'Laina – Lend assets' } },
+    { params: { path: 'borrow' }, props: { title: 'Laina – Borrow assets' } },
+    { params: { path: 'liquidate' }, props: { title: 'Laina – Liquidate loans' } },
+  ];
+}
+
+const { title } = Astro.props;
+---
+
+<Layout title={title}>
+  <App client:only />
+</Layout>
diff --git a/src/pages/borrow.astro b/src/pages/borrow.astro
diff --git a/src/pages/borrow/BorrowPage.tsx b/src/pages/borrow/BorrowPage.tsx
@@ -0,0 +1,8 @@
+const BorrowPage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Borrow Assets</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default BorrowPage;
diff --git a/src/pages/index.astro b/src/pages/index.astro
diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
@@ -0,0 +1,8 @@
+const LandingPage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Landing page</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default LandingPage;
diff --git a/src/pages/lend.astro b/src/pages/lend.astro
diff --git a/src/pages/lend/LendPage.tsx b/src/pages/lend/LendPage.tsx
@@ -0,0 +1,29 @@
+import StellarIcon from '../../images/Stellar_Symbol.png';
+import USDCIcon from '../../images/usdc.svg';
+import { LendableAssetCard } from './LendableAssetCard';
+
+const currencies = [
+  {
+    name: 'USD Coin',
+    symbol: 'USDC',
+    icon: USDCIcon.src,
+  },
+  {
+    name: 'Stellar Lumen',
+    symbol: 'XLM',
+    icon: StellarIcon.src,
+  },
+];
+
+const LendPage = () => {
+  return (
+    <>
+      <h1 className="text-3xl font-bold mb-8">Lend Assets</h1>
+      {currencies.map(({ name, symbol, icon }) => (
+        <LendableAssetCard key={name} name={name} symbol={symbol} icon={icon} />
+      ))}
+    </>
+  );
+};
+
+export default LendPage;
diff --git a/src/components/LendableAssetCard.tsx → src/pages/lend/LendableAssetCard.tsx b/src/components/LendableAssetCard.tsx → src/pages/lend/LendableAssetCard.tsx
@@ -1,5 +1,5 @@
-import { Button } from './Button';
-import { Card } from './Card';
+import { Button } from '@components/Button';
+import { Card } from '@components/Card';
 
 export interface LendableAssetCardProps {
   name: string;

diff --git a/src/pages/liquidate.astro b/src/pages/liquidate.astro
diff --git a/src/pages/liquidate/LiquidatePage.tsx b/src/pages/liquidate/LiquidatePage.tsx
@@ -0,0 +1,8 @@
+const LiquidatePage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Available for Liquidation</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default LiquidatePage;
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,6 +3,12 @@
   "exclude": ["packages"],
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@images/*": ["src/images/*"],
+      "@components/*": ["src/components/*"],
+      "@pages/*": ["src/pages/*"]
+    }
   }
 }