joelamouche · antoine-dowgo · 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,20 +2,26 @@
   "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",
+    "@metamask/detect-provider": "^2.0.0",
+    "@metamask/providers": "^10.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.38",
-    "@types/react": "^18.0.10",
     "@types/react-dom": "^18.0.5",
+    "antd": "^4.24.8",
+    "axios": "^1.2.1",
     "ethers": "^5.6.8",
-    "react": "^18.1.0",
+    "jquery": "^3.6.1",
+    "react": "^18.2.0",
     "react-dom": "^18.1.0",
+    "react-jazzicon": "^1.0.4",
+    "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.28",
+    "@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,51 @@
-.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: 20px;
 }
 
-.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: 40px;
+  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: 100px;
+}
+
+.ant-layout-content {
+  min-height: 100vh;
+}
+
+/* Notifications */
+.ant-notification-notice-message {
+  background-color: #191922 !important;
+  color: #969696 !important;
+}
+.ant-notification-notice-close-x {
+  color: #969696;
 }
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,28 +1,108 @@
-import React from "react";
+import React, { useEffect, useReducer } from "react";
+import { Routes, Route, Navigate, Link } from "react-router-dom";
+
+import OldInvest from "./pages/invest/Invest";
+
+import { Layout, notification, Space } from "antd";
+
+import DowgoLogo from "./assets/icons/dowgo-logo.png";
+
 import "./App.css";
-import ConnectMetaMask from "./components/ConnectMetaMask";
-import DaiBalance from "./components/DaiBalance";
-import { Address } from "./types/types";
-import { providers } from "ethers";
+import { appReducer } from "./reducers/appReducer";
+import AppContext, { initialAppState } from "./context/AppContext";
+import DowgoMenu from "./components/Menu/DowgoMenu";
+import { Content } from "antd/lib/layout/layout";
+import { DowgoFooter } from "./Footer";
+import { fetchAndSaveProvider } from "./actions/metamask/fetchAndSaveProvider";
+import { fetchAndSaveAccountAndChainId } from "./actions/metamask/fetchAndSaveAccountAndChainId";
+import { fetchAndSaveContractAddresses } from "./actions/api/fetchAndSaveContractAddresses";
+import { fetchAndSaveContractInformations } from "./actions/contracts/fetchAndSaveContractInformations";
+import WithdrawPage from "./pages/withdraw/WithdrawPage";
+import FundsPage from "./pages/funds/FundsPage";
+import Invest from "./pages/home/home";
+import { fetchAndSaveStockPortfolio } from "./actions/api/fetchAndSaveStockPortfolio";
+import MyPortfolioPage from "./pages/my-portfolio/MyPortfolioPage";
+import { ALLOWED_NETWORKS } from "./constants";
+import { ChainId } from "./types/types";
 
 function App() {
-  const [provider, setProvider] = React.useState<providers.Web3Provider|undefined>(undefined);
-  const [currentAccount, setCurrentAccount] = React.useState<Address>("0x");
+  const { Header } = Layout;
+
+  const [state, dispatch] = useReducer(appReducer, initialAppState);
+
+  const [api, contextHolder] = notification.useNotification();
+
+  // CONNECT TO METAMASK
+
+  // detect MM at the start of the Dapp
+  useEffect(() => {
+    fetchAndSaveProvider(dispatch);
+  }, []);
+
+  // detect chain id and account
+  useEffect(() => {
+    if (state.provider) {
+      fetchAndSaveAccountAndChainId(dispatch, state);
+    }
+  }, [state.provider]);
+
+  //After we have the chainId, get addresses, only if we are on an authorized network
+  useEffect(() => {
+    if (state.chainId && ALLOWED_NETWORKS.includes(ChainId[state.chainId])) {
+      fetchAndSaveContractAddresses(dispatch, state);
+    }
+  }, [state.chainId]);
+
+  //After we have the addresses, get contract info
+  useEffect(() => {
+    if (state.contractAddresses) {
+      fetchAndSaveContractInformations(dispatch, state);
+    }
+  }, [state.contractAddresses]);
+
+  // Finally, get stock portfolio info
+  useEffect(() => {
+    if (state.allowance && state.stockPortfolio == undefined) {
+      fetchAndSaveStockPortfolio(dispatch);
+    }
+  }, [state.allowance]);
 
   return (
-    <div className="App">
-      <header className="App-header">
-        {ConnectMetaMask(
-          provider,
-          setProvider,
-          currentAccount,
-          setCurrentAccount
-        )}
-        {DaiBalance(
-          provider,
-          currentAccount
-        )}
-      </header>
+    <div>
+      <Layout>
+        <AppContext.Provider value={{ state, dispatch, notificationApi: api }}>
+          <Header className="app-header">
+            {<DowgoMenu />}
+            <div className="dowgo-logo-container">
+              <Link to="/">
+                <img
+                  src={DowgoLogo}
+                  alt="dowgo-logo"
+                  className="dowgo-logo-menu"
+                />
+              </Link>
+            </div>
+          </Header>
+          <Content style={{ minHeight: "115vh" }}>
+            {/* For tx toast notifications */}
+            {contextHolder}
+            <Routes>
+              {/* {state.currentAccount !== "0x" ? (
+              <Route path="/" element={<Navigate to="/profile" />} />
+            ) : (
+              <Route path="/" element={<DowgoDApp />} />
+            )} */}
+              <Route path="/" element={<Invest />} />
+              <Route path="/invest" element={<Invest />} />
+              <Route path="/dowgo-funds" element={<FundsPage />} />
+              <Route path="/my-portfolio" element={<MyPortfolioPage />} />
+              <Route path="/withdraw" element={<WithdrawPage />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </Content>
+          <DowgoFooter />
+        </AppContext.Provider>
+      </Layout>
     </div>
   );
 }

diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -0,0 +1,40 @@
+import { Footer } from "antd/lib/layout/layout";
+import EtherscanLogo from "./assets/icons/etherscan-icon.png";
+import { smallIconStyle } from "./styles/iconStyle";
+import { white } from "./styles/colors";
+import { regularWhiteWord } from "./styles/textStyles";
+import { ReactComponent as HelpIcon } from "./assets/icons/help-circle-icon.svg";
+
+export const DowgoFooter = () => {
+  return (
+    <Footer
+      style={{
+        display: "flex",
+        alignItems: "center",
+        height: "90px",
+        width: "100%",
+        justifyContent: "flex-end",
+      }}
+    >
+      <span
+        style={{
+          left: 0,
+          position: "relative",
+        }}
+      >
+        <img src={EtherscanLogo} alt="etherscan-logo" style={smallIconStyle} />
+      </span>
+      <span
+        style={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "flex-end",
+        }}
+      >
+        <HelpIcon style={smallIconStyle} />
+        <span style={{ ...regularWhiteWord, marginLeft: "10px" }}>Help</span>
+        <span style={{ ...regularWhiteWord, marginLeft: "24px" }}>Docs</span>
+      </span>
+    </Footer>
+  );
+};