joelamouche · Tris92 · Jun 3, 2022 · Jun 7, 2022 · Jun 13, 2022 · Jun 13, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 .DS_Store
 build
+.env
+/build
diff --git a/README.md b/README.md
@@ -1,11 +1,19 @@
 # web3-react-template
 
 Template to make a DApp with React, typescript and ethers.js.
+
 - Button to Connect to MetaMask
 - Display Account
 - Display Network
 - Display Dai Balance
 
 Made using the create-react-app typescript template, MetaMask recommandation to connect, ethers.js library and types generated by Typechain in a separate repo.
 
-To launch, run `npm run start`
+To launch, run `npm run start`
+
+## TODO
+
+- handle errors
+- only allow buy if allowance
+- sell
+- check non -zero
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "web3-react-template",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://dowgo.io",
   "dependencies": {
     "@metamask/detect-provider": "^1.2.0",
     "@metamask/providers": "^8.1.1",
@@ -12,10 +13,15 @@
     "@types/node": "^16.11.38",
     "@types/react": "^18.0.10",
     "@types/react-dom": "^18.0.5",
+    "antd": "^4.24.1",
+    "axios": "^1.2.1",
     "ethers": "^5.6.8",
+    "jquery": "^3.6.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "sass": "^1.56.0",
     "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },
@@ -24,7 +30,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "npx prettier -w ."
+    "lint": "npx prettier -w src && npx prettier -w public",
+    "predeploy": "npm run build",
+    "deploy": "echo 'dowgo.io' > ./build/CNAME && gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -52,5 +60,10 @@
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/joelamouche/web3-react-template/issues"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "gh-pages": "^4.0.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,17 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +34,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>dowgo interface</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -8,12 +8,12 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,41 @@
-.App {
+.app-container {
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.app-header {
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  padding: 0;
+  height: 100px;
+  margin-bottom: 200px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.dowgo-logo-container {
+  top: 0;
+  position: absolute;
+  z-index: 1000;
+  margin-left: 20px;
+  margin-top: 10px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.dowgo-logo-menu {
+  height: 80px;
+  width: auto;
 }
 
+
+
 .App-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+
+.ant-layout {
+  background: black !important;
+}
+
+.ant-layout-footer {
+  background: black !important;
+  height: 50vh;
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,9 +1,15 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import App from "./App";
+import ReactDOM from "react-dom";
 
 test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  // render(<App />);
+  // const linkElement = screen.getByText(/learn react/i);
+  // expect(linkElement).toBeInTheDocument();
+
+  // renders without crashing
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,30 +1,83 @@
-import React from "react";
-import "./App.css";
-import ConnectMetaMask from "./components/ConnectMetaMask";
-import DaiBalance from "./components/DaiBalance";
-import { Address } from "./types/types";
+import React, { useEffect  } from 'react';
+import {Routes, Route, Navigate} from "react-router-dom";
+
+import DowgoDApp from './pages/home/home';
+import Funds from './pages/funds/funds';
+import ConnectMetaMask from './components/ConnectMetaMask/ConnectMetaMask';
+import Profile from './pages/profile/profile';
+
+import { Layout } from "antd";
+import { EthAddress, ChainId, ContractAddresses} from "./types/types";
 import { providers } from "ethers";
 
-function App() {
-  const [provider, setProvider] = React.useState<providers.Web3Provider|undefined>(undefined);
-  const [currentAccount, setCurrentAccount] = React.useState<Address>("0x");
+//@ts-ignore
+import DowgoLogo from "./assets/header/dowgo-logo.png";
+
+import { getContractAddresses } from "./constants/contractAddresses";
+
+import "./App.css";
+
+function App () {
+
+  const { Header } = Layout;
+  const [currentAccount, setCurrentAccount] = React.useState<EthAddress>("0x");
+  const [provider, setProvider] = React.useState<
+    providers.Web3Provider | undefined
+  >(undefined);
+  const [chainId, setChainId] = React.useState<ChainId | undefined>(undefined);
+
+  // Contract addresses
+  const [contractAddresses, setContractAddresses] = React.useState<
+    ContractAddresses | undefined
+  >(undefined);
+  async function getAddresses(chainId: ChainId | undefined) {
+    if (chainId) {
+      let addresses = await getContractAddresses(chainId);
+      setContractAddresses(addresses);
+    }
+  }
+  useEffect(() => {
+    getAddresses(chainId);
+  }, [chainId]);
+
 
   return (
-    <div className="App">
-      <header className="App-header">
-        {ConnectMetaMask(
-          provider,
-          setProvider,
-          currentAccount,
-          setCurrentAccount
-        )}
-        {DaiBalance(
-          provider,
-          currentAccount
-        )}
-      </header>
+    <div>
+      <Layout>
+        <Header className="app-header">
+          {ConnectMetaMask(
+            provider,
+            setProvider,
+            currentAccount,
+            setCurrentAccount,
+            chainId,
+            setChainId
+          )}
+          <div className="dowgo-logo-container">
+            <a href="https://dowgo.io/" rel="noopener noreferrer">
+              <img 
+                src={DowgoLogo} 
+                alt="dowgo-logo" 
+                className="dowgo-logo-menu" 
+              />
+            </a>
+          </div>
+        </Header>
+
+        <Routes>
+          {currentAccount !== "0x"        
+            ? 
+            <Route path='/' element={<Navigate to='/profile' />} />     
+            : 
+            <Route path="/" element={<DowgoDApp />} /> 
+          }
+          <Route path="/profile" element={<Profile />} />
+          <Route path="/dowgo-funds" element={<Funds />} />
+          <Route path='*' element={<Navigate to='/' />} />
+        </Routes>
+      </Layout>
     </div>
-  );
+  )
 }
 
 export default App;
diff --git a/src/assets/balance/usdc.svg b/src/assets/balance/usdc.svg
diff --git a/src/assets/dowgo-funds/alpha.svg b/src/assets/dowgo-funds/alpha.svg
diff --git a/src/assets/header/dowgo-logo.png b/src/assets/header/dowgo-logo.png
diff --git a/src/assets/header/metamask.svg b/src/assets/header/metamask.svg