DopeyCode/technikoin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Compare commits

base: DopeyCode:3ecfaa3908381adc0df83197648aa4d285476cf7
Branches Tags
DopeyCode:master
...
compare: DopeyCode:master
Branches Tags
DopeyCode:master

10 Commits
3ecfaa3908 ... master

Author SHA1 Message Date
StockiP
31d671855b revert change
Some checks are pending
Deploy Now / deploy-now (push) Waiting to run
Details
2022-11-21 19:56:06 +01:00
StockiP
42de6d0453 trying out different ROUTER_ADDRESS 2022-11-21 19:52:16 +01:00
StockiP
7793f39d7c Changed router address to hopefully new contract 2022-11-21 17:55:42 +01:00
StockiP
264707d843 Fixed one small typo that broke the build - added the provisional router / smart contract address. 2022-11-05 19:44:58 +01:00
Daniel Wieser
90ef498adb Merge pull request #3 from kenan96/Exchange-Inputs-and-Balance 
Exchange inputs and balance
 2022-11-05 15:31:20 +01:00
Daniel Wieser
0ad0e0331b Merge pull request #2 from kenan96/Web3Logic 
Web3 logic
 2022-11-05 15:30:33 +01:00
Daniel
32f20782a6 Update App.js 2022-11-05 15:29:16 +01:00
Daniel
83c846ae8a Update AmountOut.js 2022-11-05 15:26:09 +01:00
Daniel
b172fc84a5 Update AmountIn.js 2022-11-05 15:26:07 +01:00
Daniel
da3c8798be Finish Exchange.js 2022-11-05 15:24:19 +01:00
6 changed files with 265 additions and 205 deletions
Expand all files Collapse all files

4
packages/react-app/src/App.js vendored
View File

@@ -1,8 +1,8 @@
import React from "react" import React from "react"
import { useEthers } from "@usedapp/core"; import { useEthers } from "@usedapp/core";
import { usePools } from "./hooks";
import styles from './styles'; import styles from './styles';
import { usePools } from "./hooks";
import { fhtLogo } from './assets'; import { fhtLogo } from './assets';
import { Exchange, Loader, WalletButton } from "./components"; import { Exchange, Loader, WalletButton } from "./components";
@@ -29,7 +29,7 @@ const App = () => {
<div className="green_gradient" /> <div className="green_gradient" />
<div className={styles.exchange}> <div className={styles.exchange}>
{account ? ( {account ? (
loading ? ( poolsLoading ? (
<Loader title="Loading pools, please wait!" /> <Loader title="Loading pools, please wait!" />
) : <Exchange pools = {pools}/> ) : <Exchange pools = {pools}/>
) : <Loader title="Please connect your wallet!"/>} ) : <Loader title="Please connect your wallet!"/>}

118
packages/react-app/src/components/AmountIn.js vendored
View File

@@ -1,69 +1,67 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { chevronDown } from "../assets"; // icon import { chevronDown } from "../assets";
import { useOnClickOutside } from "../utils"; //helps to close menu bar import { useOnClickOutside } from "../utils";
import styles from "../styles"; import styles from "../styles";
const AmountIn = () => { const AmountIn = ({ value, onChange, currencyValue, onSelect, currencies, isSwapping }) => {
const [showList, setShowList] = useState(false); const [showList, setShowList] = useState(false);
const [activeCurrency, setActiveCurrency] = useState("Select"); const [activeCurrency, setActiveCurrency] = useState("Select");
const ref = useRef() const ref = useRef()
useOnClickOutside(ref, () => setShowList(false)) useOnClickOutside(ref, () => setShowList(false))
useEffect(() => { useEffect(() => {
if (Object.keys(currencies).includes(currencyValue)) if (Object.keys(currencies).includes(currencyValue))
setActiveCurrency(currencies[currencyValue]); setActiveCurrency(currencies[currencyValue]);
else setActiveCurrency("Select"); else setActiveCurrency("Select");
}, [currencies, currencyValue]); }, [currencies, currencyValue]);
return( return (
<div className={styles.amountContainer}> <div className={styles.amountContainer}>
<input <input
placeholder="0.0" placeholder="0.0"
type="number" type="number"
value={value} value={value}
disabled={isSwapping} disabled={isSwapping}
onChange={(e) => typeof onChange === "function" && onChange(e.target.value)} onChange={(e) => typeof onChange === "function" && onChange(e.target.value)}
className={styles.amountInput} className={styles.amountInput}
/> />
<div className="relative" onClick={() => setShowList(!showList)}> <div className="relative" onClick={() => setShowList(!showList)}>
<button className={styles.currencyButton}> <button className={styles.currencyButton}>
{activeCurrency} {activeCurrency}
<img <img
src={chevronDown} src={chevronDown}
alt="cheveron-down" alt="cheveron-down"
className={`w-4 h-4 object-contain ml-2 ${ className={`w-4 h-4 object-contain ml-2 ${
showList ? "rotate-180" : "rotate-0" showList ? "rotate-180" : "rotate-0"
}`} }`}
/> />
</button> </button>
{showList && ( {showList && (
<ul ref={ref} className={styles.currencyList}> <ul ref={ref} className={styles.currencyList}>
{Object.entries(currencies).map(([token, tokenName], index) => ( {Object.entries(currencies).map(([token, tokenName], index) => (
<li <li
key={index} key={index}
className={`${styles.currencyListItem} ${ className={`${styles.currencyListItem} ${
activeCurrency === tokenName ? "bg-site-dim2" : "" activeCurrency === tokenName ? "bg-site-dim2" : ""
} cursor-pointer`} } cursor-pointer`}
onClick={() => { onClick={() => {
if (typeof onSelect === "function") onSelect(token); if (typeof onSelect === "function") onSelect(token);
setActiveCurrency(tokenName); setActiveCurrency(tokenName);
setShowList(false); setShowList(false);
}} }}
> >
{tokenName} {tokenName}
</li> </li>
))} ))}
</ul> </ul>
)} )}
</div>
</div> </div>
) </div>
} );
};
export default AmountIn;

100
packages/react-app/src/components/AmountOut.js vendored
View File

@@ -6,62 +6,62 @@ import { useAmountsOut, useOnClickOutside } from "../utils";
import styles from "../styles"; import styles from "../styles";
const AmountOut = ({ fromToken, toToken, amountIn, pairContract, currencyValue, onSelect, currencies }) => { const AmountOut = ({ fromToken, toToken, amountIn, pairContract, currencyValue, onSelect, currencies }) => {
const [showList, setShowList] = useState(false); const [showList, setShowList] = useState(false);
const [activeCurrency, setActiveCurrency] = useState("Select"); const [activeCurrency, setActiveCurrency] = useState("Select");
const ref = useRef() const ref = useRef()
const amountOut = useAmountsOut(pairContract, amountIn, fromToken, toToken) ?? 0; const amountOut = useAmountsOut(pairContract, amountIn, fromToken, toToken) ?? 0;
useOnClickOutside(ref, () => setShowList(false)) useOnClickOutside(ref, () => setShowList(false))
useEffect(() => { useEffect(() => {
if (Object.keys(currencies).includes(currencyValue)) { if (Object.keys(currencies).includes(currencyValue)) {
setActiveCurrency(currencies[currencyValue]); setActiveCurrency(currencies[currencyValue]);
} else { } else {
setActiveCurrency("Select") setActiveCurrency("Select")
} }
}, [currencyValue, currencies]); }, [currencyValue, currencies]);
return ( return (
<div className={styles.amountContainer}> <div className={styles.amountContainer}>
<input <input
placeholder="0.0" placeholder="0.0"
type="number" type="number"
value={formatUnits(amountOut)} value={formatUnits(amountOut)}
disabled className={styles.amountInput}
className={styles.amountInput} disabled
/> />
<div className="relative" onClick={() => setShowList(!showList)}> <div className="relative" onClick={() => setShowList(!showList)}>
<button className={styles.currencyButton}> <button className={styles.currencyButton}>
{activeCurrency} {activeCurrency}
<img <img
src={chevronDown} src={chevronDown}
alt="cheveron-down" alt="cheveron-down"
className={`w-4 h-4 object-contain ml-2 ${showList ? "rotate-180" : "rotate-0"}`} className={`w-4 h-4 object-contain ml-2 ${showList ? "rotate-180" : "rotate-0"}`}
/> />
</button> </button>
{showList && ( {showList && (
<ul ref={ref} className={styles.currencyList}> <ul ref={ref} className={styles.currencyList}>
{Object.entries(currencies).map(([token, tokenName], index) => ( {Object.entries(currencies).map(([token, tokenName], index) => (
<li <li
key={index} key={index}
className={styles.currencyListItem} className={styles.currencyListItem}
onClick={() => { onClick={() => {
if (typeof onSelect === "function") onSelect(token); if (typeof onSelect === "function") onSelect(token);
setActiveCurrency(tokenName); setActiveCurrency(tokenName);
setShowList(false); setShowList(false);
}} }}
> >
{tokenName} {tokenName}
</li> </li>
))} ))}
</ul> </ul>
)} )}
</div> </div>
</div> </div>
); );
}; };
export default AmountOut; export default AmountOut;

240
packages/react-app/src/components/Exchange.js vendored
View File

@@ -7,103 +7,161 @@ import { parseUnits } from "ethers/lib/utils";
import { getAvailableTokens, getCounterpartTokens, findPoolByTokens, isOperationPending, getFailureMessage, getSuccessMessage } from '../utils'; import { getAvailableTokens, getCounterpartTokens, findPoolByTokens, isOperationPending, getFailureMessage, getSuccessMessage } from '../utils';
import { ROUTER_ADDRESS } from "../config"; import { ROUTER_ADDRESS } from "../config";
import AmountIn from "./"; import AmountIn from "./AmountIn";
import AmountOut from "./"; import AmountOut from "./AmountOut";
import Balance from "./"; import Balance from "./Balance";
import styles from "../styles"; import styles from "../styles";
const Exchange = ({ pools }) => { const Exchange = ({ pools }) => {
const { account } = useEthers(); const { account } = useEthers();
const [fromValue, setFromValue] = useState("0"); const [fromValue, setFromValue] = useState("0");
const [fromToken, setFromToken] = useState(pools[0].token0Address); const [fromToken, setFromToken] = useState(pools[0].token0Address); // initialFromToken
const [toToken, setToToken] = useState(""); const [toToken, setToToken] = useState("");
const [resetState, setResetState] = useState(false) const [resetState, setResetState] = useState(false)
const fromValueBigNumber = parseUnits(fromValue || "0"); const fromValueBigNumber = parseUnits(fromValue || "0"); // converse the string to bigNumber
const availableTokens = getAvailableTokens(pools); //What tokens can we swap from? const availableTokens = getAvailableTokens(pools);
const counterpartTokens = getCounterpartTokens(pools, fromToken); //What tokens can we swap to? const counterpartTokens = getCounterpartTokens(pools, fromToken);
const pairAddress = findPoolByTokens(pools, fromToken, toToken)?.address ?? ""; //find a pair address ot that liquidity pair const pairAddress = findPoolByTokens(pools, fromToken, toToken)?.address ?? "";
//Get contract addresses const routerContract = new Contract(ROUTER_ADDRESS, abis.router02);
const routerContract = new Contract(ROUTER_ADDRESS, abis.router02); const fromTokenContract = new Contract(fromToken, ERC20.abi);
const fromTokenContract = new Contract(fromToken, ERC20.abi); const fromTokenBalance = useTokenBalance(fromToken, account);
const fromTokenBalance = useTokenBalance(fromToken, account); //Know balance of "from Token" const toTokenBalance = useTokenBalance(toToken, account);
const toTokenBalance = useTokenBalance(toToken, account); //Know balance of "to Token" const tokenAllowance = useTokenAllowance(fromToken, account, ROUTER_ADDRESS) || parseUnits("0");
const tokenAllowance = useTokenAllowance(fromToken, account, ROUTER_ADDRESS) || parseUnits("0"); const approvedNeeded = fromValueBigNumber.gt(tokenAllowance);
const approvedNeeded = fromValueBigNumber.gt(tokenAllowance); //We need to approve to make the swap const formValueIsGreaterThan0 = fromValueBigNumber.gt(parseUnits("0"));
const formValueIsGreaterThan0 = fromValueBigNumber.gt(parseUnits("0")); //has to be greater than 0 const hasEnoughBalance = fromValueBigNumber.lte(fromTokenBalance ?? parseUnits("0"));
const hasEnoughBalance = fromValueBigNumber.lte(fromTokenBalance ?? parseUnits("0")); //lte = lower than or equal to
const isApproving = isOperationPending(swapApproveState); // approve initiating a contract call (similar to use state) -> gives the state and the sender...
const isSwapping = isOperationPending(swapExecuteState); const { state: swapApproveState, send: swapApproveSend } =
useContractFunction(fromTokenContract, "approve", {
transactionName: "onApproveRequested",
gasLimitBufferPercentage: 10,
});
// swap initiating a contract call (similar to use state) -> gives the state and the sender...
const { state: swapExecuteState, send: swapExecuteSend } =
useContractFunction(routerContract, "swapExactTokensForTokens", {
transactionName: "swapExactTokensForTokens",
gasLimitBufferPercentage: 10,
});
const successMessage = getSuccessMessage(swapApproveState, swapExecuteState); const isApproving = isOperationPending(swapApproveState);
const failureMessage = getFailureMessage(swapApproveState, swapExecuteState); const isSwapping = isOperationPending(swapExecuteState);
const canApprove = !isApproving && approvedNeeded;
const canSwap = !approvedNeeded && !isSwapping && formValueIsGreaterThan0 && hasEnoughBalance;
return ( const successMessage = getSuccessMessage(swapApproveState, swapExecuteState);
<div className="flex flex-col w-full items-center"> const failureMessage = getFailureMessage(swapApproveState, swapExecuteState);
<div className="mb-8">
<AmountIn
value={fromValue}
onChange={onFromValueChange}
currencyValue={fromToken}
onSelect={onFromTokenChange}
currencies={availableTokens}
isSwapping={isSwapping && hasEnoughBalance}
/>
<Balance tokenBalance={fromTokenBalance} />
</div>
<div className="mb-8 w-[100%]">
<AmountOut
fromToken={fromToken}
toToken={toToken}
amountIn={fromValueBigNumber}
pairContract={pairAddress}
currencyValue={toToken}
onSelect={onToTokenChange}
currencies={counterpartTokens}
/>
<Balance tokenBalance={toTokenBalance} />
</div>
{approvedNeeded && !isSwapping ? (
<button
disabled={!canApprove}
onClick={onApproveRequested}
className={`${
canApprove
? "bg-site-pink text-white"
: "bg-site-dim2 text-site-dim2"
} ${styles.actionButton}`}
>
{isApproving ? "Approving..." : "Approve"}
</button>
) : (
<button
disabled={!canSwap}
onClick={onSwapRequested}
className={`${
canSwap ? "bg-site-pink text-white" : "bg-site-dim2 text-site-dim2"
} ${styles.actionButton}`}
>
{isSwapping
? "Swapping..."
: hasEnoughBalance
? "Swap"
: "Insufficient balance"}
</button>
)}
{failureMessage && !resetState ? (
<p className={styles.message}>{failureMessage}</p>
) : successMessage ? (
<p className={styles.message}>{successMessage}</p>
) : (
""
)}
</div>
);
}
export default Exchange; const onApproveRequested = () => {
swapApproveSend(ROUTER_ADDRESS, ethers.constants.MaxUint256);
};
// https://docs.uniswap.org/protocol/V2/reference/smart-contracts/router-02#swapexacttokensfortokens
const onSwapRequested = () => {
swapExecuteSend(
fromValueBigNumber,
0,
[fromToken, toToken],
account,
Math.floor(Date.now() / 1000) + 60 * 20
).then((_) => {
setFromValue("0");
});
};
const onFromValueChange = (value) => {
const trimmedValue = value.trim();
try {
trimmedValue && parseUnits(value);
setFromValue(value);
} catch (e) {}
};
const onFromTokenChange = (value) => {
setFromToken(value);
};
const onToTokenChange = (value) => {
setToToken(value);
};
useEffect(() => {
if(failureMessage || successMessage) {
setTimeout(() => {
setResetState(true)
setFromValue("0")
setToToken("")
}, 5000)
}
}, [failureMessage, successMessage])
return (
<div className="flex flex-col w-full items-center">
<div className="mb-8">
<AmountIn
value={fromValue}
onChange={onFromValueChange}
currencyValue={fromToken}
onSelect={onFromTokenChange}
currencies={availableTokens}
isSwapping={isSwapping && hasEnoughBalance}
/>
<Balance tokenBalance={fromTokenBalance} />
</div>
<div className="mb-8 w-[100%]">
<AmountOut
fromToken={fromToken}
toToken={toToken}
amountIn={fromValueBigNumber}
pairContract={pairAddress}
currencyValue={toToken}
onSelect={onToTokenChange}
currencies={counterpartTokens}
/>
<Balance tokenBalance={toTokenBalance} />
</div>
{approvedNeeded && !isSwapping ? (
<button
disabled={!canApprove}
onClick={onApproveRequested}
className={`${
canApprove
? "bg-site-pink text-white"
: "bg-site-dim2 text-site-dim2"
} ${styles.actionButton}`}
>
{isApproving ? "Approving..." : "Approve"}
</button>
) : (
<button
disabled={!canSwap}
onClick={onSwapRequested}
className={`${
canSwap ? "bg-site-pink text-white" : "bg-site-dim2 text-site-dim2"
} ${styles.actionButton}`}
>
{isSwapping
? "Swapping..."
: hasEnoughBalance
? "Swap"
: "Insufficient balance"}
</button>
)}
{failureMessage && !resetState ? (
<p className={styles.message}>{failureMessage}</p>
) : successMessage ? (
<p className={styles.message}>{successMessage}</p>
) : (
""
)}
</div>
);
};
export default Exchange;

6
packages/react-app/src/components/Loader.js vendored
View File

@@ -6,7 +6,11 @@ import {ethereumLogo2 } from "../assets";
const Loader = ({ title }) => { const Loader = ({ title }) => {
return ( return (
<div className={styles.loader}> <div className={styles.loader}>
<img src={ethereumLogo2} alt="Ethereum Logo" className={styles.loaderImg} /> <img
src={ethereumLogo2}
alt="Ethereum Logo"
className={styles.loaderImg}
/>
<p className={styles.loaderText}>{title}</p> <p className={styles.loaderText}>{title}</p>
</div> </div>

2
packages/react-app/src/config.js vendored
View File

@@ -1,6 +1,6 @@
import { Goerli } from "@usedapp/core"; import { Goerli } from "@usedapp/core";
export const ROUTER_ADDRESS = "[YOUR ADDRESS HERE]"; export const ROUTER_ADDRESS = "0x73135EBE79A1Af0D757a3F5218ED29c1Ff7F332B";
export const DAPP_CONFIG = { export const DAPP_CONFIG = {
readOnlyChainId: Goerli.chainId, readOnlyChainId: Goerli.chainId,