Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix mm provider detection #4

Open
wants to merge 96 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
96 commits
Select commit Hold shift + click to select a range
a86cb74
add dowgo balance and usdc allowance
antoine-dowgo Jun 3, 2022
c3a861a
add sell button
antoine-dowgo Jun 7, 2022
26a59e9
add button compo
antoine-dowgo Jun 13, 2022
277b8ac
add boostrap to navbar
antoine-dowgo Jun 13, 2022
ef054c5
view components for balance and buy sell
antoine-dowgo Jun 13, 2022
82e9f94
add approve modal
antoine-dowgo Jun 15, 2022
03d85ac
lint
antoine-dowgo Jun 15, 2022
e260851
adapt to usdc 5 digits
antoine-dowgo Oct 14, 2022
7f35249
more usdc decimal fixes
antoine-dowgo Oct 14, 2022
6c7381e
add transaction status
antoine-dowgo Oct 14, 2022
a9afb22
error handling and dwg info
antoine-dowgo Oct 14, 2022
3ee2458
fix function input and update info
antoine-dowgo Oct 14, 2022
e36144b
publish on dowgo.io
antoine-dowgo Oct 15, 2022
a650a55
adapt to mainnet deployement
antoine-dowgo Oct 17, 2022
ac59924
iterate on demo feedback
antoine-dowgo Oct 18, 2022
4a41071
Update index.html
oscar-dowgo Oct 18, 2022
04cd1c5
add detailed calculus
antoine-dowgo Oct 18, 2022
f427917
solved merge conflicts
antoine-dowgo Nov 2, 2022
72a7044
update ui with new alpha version
antoine-dowgo Dec 6, 2022
6920090
Merge pull request #11 from DOWGO/update-alpha-with-goerli
antoine-dowgo Dec 6, 2022
02d6b97
update addresses
antoine-dowgo Dec 6, 2022
966baf0
fetch latest deplyment for goerli
antoine-dowgo Dec 8, 2022
73e6cd6
homepage: modified UI of components and added new library antd
Tris92 Dec 9, 2022
e3c4b45
remove comment
antoine-dowgo Dec 12, 2022
b54c374
Merge pull request #13 from DOWGO/add-latest-deployment-api
antoine-dowgo Dec 13, 2022
9f00f67
fix contract addresses dependency
antoine-dowgo Dec 13, 2022
6198105
Merge pull request #15 from DOWGO/dev
antoine-dowgo Dec 13, 2022
8edf18f
sync with main and solve conflicts
antoine-dowgo Dec 13, 2022
bde5967
added react-router-dom to project including routing component in App.…
Tris92 Jan 23, 2023
a442fdf
Merge pull request #14 from DOWGO/tristan
oscar-dowgo Jan 23, 2023
080db73
dowgo.io
oscar-dowgo Jan 23, 2023
8563f2a
interface
oscar-dowgo Jan 23, 2023
c9000c2
interface
oscar-dowgo Jan 24, 2023
e1350fc
Add muted attribute
soukiassianb Feb 1, 2023
762b6a5
Improve layout + background
soukiassianb Feb 1, 2023
f25193b
Add top gradient as well
soukiassianb Feb 1, 2023
8420fc3
Rework home page layout to keep video centered despite min-width (to …
soukiassianb Feb 1, 2023
adb94d0
Add fixed padding instead of percent
soukiassianb Feb 1, 2023
1d11fc3
link variables from App to Profile
antoine-dowgo Feb 1, 2023
f9f0676
lint
antoine-dowgo Feb 1, 2023
17e009c
Add video and layout
soukiassianb Feb 1, 2023
07edbac
Merge pull request #21 from DOWGO/jlm-fix-connection
antoine-dowgo Feb 1, 2023
71f62ca
sync wit main
antoine-dowgo Feb 1, 2023
b875de2
Merge pull request #22 from DOWGO/ben-video-layout
antoine-dowgo Feb 1, 2023
1d0cf94
tagline
oscar-dowgo Feb 3, 2023
ca38a98
tag
oscar-dowgo Feb 3, 2023
84b89e4
tagline
oscar-dowgo Feb 3, 2023
e5ad763
tag
oscar-dowgo Feb 3, 2023
491dcfa
tag
oscar-dowgo Feb 4, 2023
9f8b9f4
added custom font + updated funds page and fixed the header logo link
Tris92 Feb 5, 2023
95ce4e6
Merge pull request #23 from Tris92/main
oscar-dowgo Feb 5, 2023
4f2ac5b
video
oscar-dowgo Feb 8, 2023
b6039bf
no banner
oscar-dowgo Feb 9, 2023
ea86f7e
lint
joelamouche Feb 20, 2023
83bc04f
add reducer and context for provider userAddress and chainId
antoine-dowgo Feb 20, 2023
a71e46c
created menu
antoine-dowgo Feb 23, 2023
16d1224
only add install metamask dropdown when needed
antoine-dowgo Feb 23, 2023
1366e37
finished trading interface, needs logic
antoine-dowgo Feb 27, 2023
5ae75f7
fix icons for usdt and dowgo
antoine-dowgo Feb 28, 2023
1aa78ec
fix video height
antoine-dowgo Feb 28, 2023
11cdd67
add Montserrat eevrywhere
antoine-dowgo Feb 28, 2023
67bd9b2
create footer interface
antoine-dowgo Feb 28, 2023
08dd575
move all metamask provider chain id accouhnt logic to action and call…
antoine-dowgo Mar 1, 2023
bad2545
move contract address logic to action and calls folders
antoine-dowgo Mar 1, 2023
1200872
move all the contract info logic to action reducer context flow
antoine-dowgo Mar 2, 2023
1cc56d7
fix reducer flow and moved useEffects to App lvl
antoine-dowgo Mar 2, 2023
8b5de82
Withdraw page display and logic
antoine-dowgo Mar 2, 2023
3927c74
cleanup logs and wait 6 blocks
antoine-dowgo Mar 3, 2023
1fc0292
add funds page interface
antoine-dowgo Mar 3, 2023
55e1893
add contract data to funds page
antoine-dowgo Mar 3, 2023
5f3c9cf
add MyPortfolio page
antoine-dowgo Mar 3, 2023
57ea47b
add currency dropdowns to trading interface
antoine-dowgo Mar 6, 2023
5e0965b
setup max values and inputs for trading interface
antoine-dowgo Mar 6, 2023
3896207
add approve buy and sell functions
antoine-dowgo Mar 7, 2023
0d05a79
add notification toaster
antoine-dowgo Mar 7, 2023
ed3f80f
rename HomeWIP
antoine-dowgo Mar 7, 2023
f62ae4c
fix
antoine-dowgo Mar 7, 2023
2df6092
try another fix
antoine-dowgo Mar 7, 2023
bf2e4e2
add fetchStockPortfolio
antoine-dowgo Mar 7, 2023
f70de95
fetch stock information when app loads
antoine-dowgo Mar 7, 2023
5d267a6
fix menu dropdown
antoine-dowgo Mar 8, 2023
5248c14
add bold selected menu item
antoine-dowgo Mar 8, 2023
88d4e29
log accounts
antoine-dowgo Mar 9, 2023
489faa4
load selected account
antoine-dowgo Mar 9, 2023
1aa2b50
ad details to fund page
antoine-dowgo Mar 9, 2023
64ce791
switch to sepolia
antoine-dowgo Mar 20, 2023
33662b4
fix max amount
antoine-dowgo Mar 20, 2023
f89aa75
Merge pull request #28 from DOWGO/beta-step-1
antoine-dowgo Mar 20, 2023
abac698
replace old invest page with new page
antoine-dowgo Mar 20, 2023
127fbfe
Merge pull request #32 from DOWGO/remove-old-invest-page
antoine-dowgo Mar 20, 2023
fb5fab1
update mm/detect-provider
antoine-dowgo Mar 20, 2023
058294a
use ts-ignore
antoine-dowgo Mar 20, 2023
19110a7
log different addresses
antoine-dowgo Mar 21, 2023
e89383b
add new acc getters
antoine-dowgo Mar 21, 2023
b3d8e03
change to eth_requestAccounts
antoine-dowgo Mar 21, 2023
06610dd
cleanup and updatee contract info on acc change
antoine-dowgo Mar 21, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules
.DS_Store
build
.env
/build
10 changes: 9 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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
13,275 changes: 8,364 additions & 4,911 deletions package-lock.json

Large diffs are not rendered by default.

23 changes: 18 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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": [
Expand Down Expand Up @@ -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"
}
}
Binary file modified public/favicon.ico
Binary file not shown.
14 changes: 12 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/
Expand All @@ -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>
Expand Down
Binary file added public/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/logo192.png
Binary file not shown.
Binary file removed public/logo512.png
Binary file not shown.
4 changes: 2 additions & 2 deletions public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
61 changes: 37 additions & 24 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -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;
}
12 changes: 9 additions & 3 deletions src/App.test.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
120 changes: 100 additions & 20 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Expand Down
40 changes: 40 additions & 0 deletions src/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading