Merge pull request #17 from moonshotcollective/swap-list

Added Swap List
moonshotcollective · Oct 22, 2021 · 739932d · 739932d
2 parents 3a082dc + 4fc22da
commit 739932d
Show file tree

Hide file tree

Showing 14 changed files with 1,349 additions and 456 deletions.
diff --git a/packages/hardhat/hardhat.config.js b/packages/hardhat/hardhat.config.js
@@ -26,7 +26,7 @@ const { isAddress, getAddress, formatUnits, parseUnits } = utils;
 //
 // Select the network you want to deploy to here:
 //
-const defaultNetwork = "hardhat";
+const defaultNetwork = "rinkeby";
 
 const mainnetGwei = 21;
 
@@ -43,6 +43,16 @@ function mnemonic() {
   return "";
 }
 
+function getRpc(network) {
+  const infuraKey = process.env[`${network}_INFURA_KEY`] || null;
+
+  // Add environment variable NETWORK_RPC. For example RINKEBY_RPC
+
+  return process.env[`${network}_RPC`]
+    ? process.env[`${network}_RPC`]
+    : `https://${network}.infura.io/v3/${infuraKey}`;
+}
+
 module.exports = {
   defaultNetwork,
 
@@ -63,10 +73,11 @@ module.exports = {
       */
     },
 
-    // rinkeby: {
-    //   url: `https://rinkeby.infura.io/v3/${process.env.RINKEBY_INFURA_KEY}`,
-    //   accounts: [`${process.env.RINKEBY_DEPLOYER_PRIV_KEY}`],
-    // },
+    rinkeby: {
+      // url: `https://rinkeby.infura.io/v3/${process.env.RINKEBY_INFURA_KEY}`,
+      // accounts: [`${process.env.RINKEBY_DEPLOYER_PRIV_KEY}`],
+      url: getRpc("RINKEBY"),
+    },
     // kovan: {
     //   url: `https://rinkeby.infura.io/v3/${process.env.KOVAN_INFURA_KEY}`,
     //   accounts: [`${process.env.KOVAN_DEPLOYER_PRIV_KEY}`],
@@ -89,14 +100,14 @@ module.exports = {
     //   accounts: [`${process.env.XDAI_DEPLOYER_PRIV_KEY}`],
     // },
 
-    rinkeby: {
-      url: "https://rinkeby.infura.io/v3/460f40a260564ac4a4f4b3fffb032dad", // <---- YOUR INFURA ID! (or it won't work)
+    // rinkeby: {
+    //   url: "https://rinkeby.infura.io/v3/460f40a260564ac4a4f4b3fffb032dad", // <---- YOUR INFURA ID! (or it won't work)
 
-      //    url: "https://speedy-nodes-nyc.moralis.io/XXXXXXXXXXXXXXXXXXXXXXX/eth/rinkeby", // <---- YOUR MORALIS ID! (not limited to infura)
+    //   //    url: "https://speedy-nodes-nyc.moralis.io/XXXXXXXXXXXXXXXXXXXXXXX/eth/rinkeby", // <---- YOUR MORALIS ID! (not limited to infura)
 
-      accounts:
-        process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
-    },
+    //   accounts:
+    //     process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
+    // },
     mainnet: {
       url: "https://mainnet.infura.io/v3/460f40a260564ac4a4f4b3fffb032dad", // <---- YOUR INFURA ID! (or it won't work)
 

diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -4,7 +4,7 @@ import WalletLink from "walletlink";
 import { Alert, Button, Col, Menu, Row } from "antd";
 import "antd/dist/antd.css";
 import React, { useCallback, useEffect, useState } from "react";
-import { HomeOutlined, ContainerOutlined, QuestionCircleOutlined, DatabaseOutlined } from "@ant-design/icons";
+import { HomeOutlined, ContainerOutlined, InteractionOutlined } from "@ant-design/icons";
 import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
 import Web3Modal from "web3modal";
 import "./App.css";
@@ -22,7 +22,7 @@ import {
 import { useEventListener } from "eth-hooks/events/useEventListener";
 import { useExchangeEthPrice } from "eth-hooks/dapps/dex";
 // import Hints from "./Hints";
-import { ExampleUI, Hints, TokenSwap, ClaimFees } from "./views";
+import { TokenSwap, SwapList } from "./views";
 
 import { useContractConfig } from "./hooks";
 
@@ -55,7 +55,7 @@ const { ethers } = require("ethers");
 const targetNetwork = process.env.REACT_APP_NETWORK ? NETWORKS[process.env.REACT_APP_NETWORK] : NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)
 
 // 😬 Sorry for all the console logging
-const DEBUG = true;
+const DEBUG = false;
 const NETWORKCHECK = true;
 
 // 🛰 providers
@@ -453,54 +453,34 @@ function App(props) {
       <Header />
       <BrowserRouter>
         <Menu style={{ textAlign: "center" }} selectedKeys={[route]} mode="horizontal">
-          <Menu.Item key="/swap">
-            <Link
-              onClick={() => {
-                setRoute("/swap");
-              }}
-              to="/swap"
-            >
-              <HomeOutlined /> Home
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="/claimfees">
-            <Link
-              onClick={() => {
-                setRoute("/claimfees");
-              }}
-              to="/claimfees"
-            >
-              <DatabaseOutlined /> Claim Fees
-            </Link>
-          </Menu.Item>
           <Menu.Item key="/">
             <Link
               onClick={() => {
                 setRoute("/");
               }}
               to="/"
             >
-              <ContainerOutlined /> Contracts
+              <HomeOutlined /> Home
             </Link>
           </Menu.Item>
-          <Menu.Item key="/hints">
+          <Menu.Item key="/swap">
             <Link
               onClick={() => {
-                setRoute("/hints");
+                setRoute("/swap");
               }}
-              to="/hints"
+              to="/swap"
             >
-              <QuestionCircleOutlined /> Hints
+              <InteractionOutlined /> Swap
             </Link>
           </Menu.Item>
-          <Menu.Item key="/exampleui">
+          <Menu.Item key="/contracts">
             <Link
               onClick={() => {
-                setRoute("/exampleui");
+                setRoute("/contracts");
               }}
-              to="/exampleui"
+              to="/contracts"
             >
-              ExampleUI
+              <ContainerOutlined /> Contracts
             </Link>
           </Menu.Item>
           <Menu.Item key="/mainnetdai">
@@ -517,43 +497,7 @@ function App(props) {
 
         <Switch>
           <Route exact path="/">
-            <Contract
-              name="dGTC"
-              signer={userSigner}
-              provider={localProvider}
-              address={address}
-              blockExplorer={blockExplorer}
-              contractConfig={contractConfig}
-            />
-            <hr />
-            <Contract
-              name="dETH"
-              signer={userSigner}
-              provider={localProvider}
-              address={address}
-              blockExplorer={blockExplorer}
-              contractConfig={contractConfig}
-            />
-            <hr />
-            <Contract
-              name="MoonSwap"
-              signer={userSigner}
-              provider={localProvider}
-              address={address}
-              blockExplorer={blockExplorer}
-              contractConfig={contractConfig}
-            />
-          </Route>
-          <Route path="/hints">
-            <Hints
-              address={address}
-              yourLocalBalance={yourLocalBalance}
-              mainnetProvider={mainnetProvider}
-              price={price}
-            />
-          </Route>
-          <Route path="/exampleui">
-            <ExampleUI
+            <SwapList
               address={address}
               userSigner={userSigner}
               mainnetProvider={mainnetProvider}
@@ -565,9 +509,10 @@ function App(props) {
               readContracts={readContracts}
               purpose={purpose}
               setPurposeEvents={setPurposeEvents}
+              chainId={selectedChainId}
             />
           </Route>
-          <Route path="/swap">
+          <Route exact path="/swap">
             <TokenSwap
               address={address}
               userSigner={userSigner}
@@ -582,10 +527,11 @@ function App(props) {
               setPurposeEvents={setPurposeEvents}
               isWalletConnected={isWalletConnected}
               userSigner={userSigner}
+              chainId={selectedChainId}
             />
           </Route>
-          <Route path="/claimfees">
-            <ClaimFees
+          <Route path="/swap/:id">
+            <TokenSwap
               address={address}
               userSigner={userSigner}
               mainnetProvider={mainnetProvider}
@@ -597,9 +543,40 @@ function App(props) {
               readContracts={readContracts}
               purpose={purpose}
               setPurposeEvents={setPurposeEvents}
+              isWalletConnected={isWalletConnected}
+              userSigner={userSigner}
+              chainId={selectedChainId}
+            />
+          </Route>
+          <Route exact path="/contracts">
+            <Contract
+              name="dGTC"
+              signer={userSigner}
+              provider={localProvider}
+              address={address}
+              blockExplorer={blockExplorer}
+              contractConfig={contractConfig}
+            />
+            <hr />
+            <Contract
+              name="dETH"
+              signer={userSigner}
+              provider={localProvider}
+              address={address}
+              blockExplorer={blockExplorer}
+              contractConfig={contractConfig}
+            />
+            <hr />
+            <Contract
+              name="MoonSwap"
+              signer={userSigner}
+              provider={localProvider}
+              address={address}
+              blockExplorer={blockExplorer}
+              contractConfig={contractConfig}
             />
           </Route>
-          <Route path="/mainnetdai">
+          <Route exact path="/mainnetdai">
             <Contract
               name="DAI"
               customContract={mainnetContracts && mainnetContracts.contracts && mainnetContracts.contracts.DAI}

diff --git a/...es/react-app/src/components/ClaimFees.jsx → ...ges/react-app/src/components/SwapItem.jsx b/...es/react-app/src/components/ClaimFees.jsx → ...ges/react-app/src/components/SwapItem.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-import { Typography } from "antd";
+import { Typography, Button } from "antd";
 import { NETWORK } from "../constants";
 
-export default function ClaimFees({ hash, localProvider, chainId, ...props }) {
+export default function SwapItem({ onClick, hash, localProvider, chainId, ...props }) {
   const { currentTheme } = useThemeSwitcher();
   const [loading, updateLoading] = useState(true);
   const [txData, updateTxData] = useState({});
@@ -44,15 +44,12 @@ export default function ClaimFees({ hash, localProvider, chainId, ...props }) {
               href={`${explorer}tx/${hash}`}
               rel="noopener noreferrer"
             >
-              {hash.substr(0, 10)}
+              {hash}
             </a>
           </Typography.Text>
+          <Button onClick={onClick}>Commit Swap</Button>
         </div>
-        {loading ? (
-          <div style={{ fontStyle: "italic", color: "#efefef" }}>In Progress...</div>
-        ) : (
-          <div style={{ fontStyle: "normal", fontWeight: "bold", color: "green" }}>Completed</div>
-        )}
+        {loading ? <div style={{ fontStyle: "italic", color: "#efefef" }}>Loading...</div> : <button></button>}
       </div>
     </div>
   );

diff --git a/packages/react-app/src/components/index.js b/packages/react-app/src/components/index.js
@@ -17,4 +17,4 @@ export { default as Timeline } from "./Timeline";
 export { default as TokenBalance } from "./TokenBalance";
 export { default as Wallet } from "./Wallet";
 export { default as L2Bridge } from "./L2Bridge";
-export { default as ClaimFees } from "./ClaimFees";
+export { default as SwapItem } from "./SwapItem";