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

UI fixes #30

Merged
merged 10 commits into from
Nov 22, 2021
2 changes: 1 addition & 1 deletion packages/react-app/src/components/Address.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function Address(props) {
}

let text;
if (props.onChange) {
if (props.onChange && props.enableEdit) {
text = (
<Text editable={{ onChange: props.onChange }} copyable={{ text: address }}>
<a
Expand Down
22 changes: 22 additions & 0 deletions packages/react-app/src/helpers/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { ethers } from "ethers";
import { ERC20ABI } from "../constants";

export async function getTokenData(tokenContractAddress, signer) {
try {
const tokenContract = new ethers.Contract(tokenContractAddress, ERC20ABI, signer);
const name = await tokenContract.name();
const symbol = await tokenContract.symbol();
return { name, symbol };
} catch (err) {
console.log(err);
return { name: null, symbol: null };
}
}

export async function checkAllowance(tokenContractAddress, signer, spender) {
const userAddress = await signer.getAddress();
const tokenContract = new ethers.Contract(tokenContractAddress, ERC20ABI, signer);
const allowance = await tokenContract.allowance(userAddress, spender);
const decimals = await tokenContract.decimals();
return ethers.utils.formatUnits(allowance, decimals);
}
19 changes: 14 additions & 5 deletions packages/react-app/src/views/SwapList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,20 @@ export default function SwapList({
let tempIds = [];
if (readContracts?.MoonSwap) {
swaps = await readContracts.MoonSwap.getActiveSwaps();

console.log("swaps", swaps);
swaps.forEach(swap => {
temp.push(utils.keccak256(swap));
tempIds.push(swap.toNumber());
});
console.log("viewswap ", swaps, temp);
console.log("viewswap ", swaps);
console.log("tempIds ", tempIds);
console.log("before sorting tempIds", tempIds);

tempIds = tempIds.sort((a, b) => b - a);
tempIds.map((id, index) => {
temp.push(utils.keccak256(swaps.find(swap => swap.toNumber() === id)));
});
console.log("temp ", temp);

setActiveSwaps(temp);
setSwapIds(tempIds);
}
Expand All @@ -60,6 +68,7 @@ export default function SwapList({
<List
bordered
dataSource={activeSwaps}
pagination={{ pageSize: 10 }}
renderItem={(item, index) => (
<List.Item>
<div
Expand All @@ -69,9 +78,9 @@ export default function SwapList({
}}
>
<SwapItem
index={swapIds[index]}
index={swapIds[activeSwaps.indexOf(item)]}
onClick={() => {
history.push(`/swap/${swapIds[index]}`);
history.push(`/swap/${swapIds[activeSwaps.indexOf(item)]}`);
}}
hash={item}
localProvider={localProvider}
Expand Down
140 changes: 101 additions & 39 deletions packages/react-app/src/views/TokenSwap.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { useState, useEffect } from "react";
import { Address, Balance, ClaimFees, AddressInput } from "../components";
import externalContracts from "../contracts/external_contracts";
import { useParams, useHistory, Link } from "react-router-dom";
import { checkAllowance, getTokenData } from "../helpers/utils";
const { Step } = Steps;

const ERC20ABI = externalContracts[1].contracts.UNI.abi;
Expand All @@ -29,30 +30,44 @@ export default function TokenSwap({
const [readyToSwap, setReadyToSwap] = useState();
const [addressIn, setAddressIn] = useState();
const [addressOut, setAddressOut] = useState(address);
const [token, setTokenOut] = useState();
const [numTokensOut, setNumTokensOut] = useState();
const [commitSwapId, setCommitSwapId] = useState();
const [activeSwaps, setActiveSwaps] = useState();
const [tokenInAddress, setTokenInAddress] = useState();
const [tokenOutAddress, setTokenOutAddress] = useState();
const [swapValueIn, setSwapValueIn] = useState();
const [swapValueOut, setSwapValueOut] = useState();
const [swapStep, setSwapStep] = useState();
const [swapComplete, setSwapComplete] = useState();

const [tokenInContract, setTokenInContract] = useState();
const [tokenOutContract, setTokenOutContract] = useState();
const [swapData, setSwapData] = useState();

const [tokenInMetadata, setTokenInMetadata] = useState();
const [tokenOutMetadata, setTokenOutMetadata] = useState();

const [notFound, setNotFound] = useState(false);

useEffect(() => {
if (id) {
console.log("id: ", id);
setReadyToSwap(true);
setCommitSwapId(id);

getSwapData(id);
}
}, [id, readContracts]);

useEffect(() => {
async function exec() {
if (swapData) {
const tokenInData = await getTokenData(swapData.inToken, userSigner);
const tokenOutData = await getTokenData(swapData.outToken, userSigner);
setTokenInMetadata(tokenInData);
setTokenOutMetadata(tokenOutData);
}
}

exec();
}, [swapData]);

useEffect(() => {
if (window.location.href.endsWith("/swap")) {
setSwapStep(0);
Expand All @@ -63,6 +78,17 @@ export default function TokenSwap({
}
}, []);

useEffect(() => {
async function exec() {
const tokenInData = await getTokenData(tokenInAddress, userSigner);
console.log("tokenInData", tokenInData);
const tokenOutData = await getTokenData(tokenOutAddress, userSigner);
setTokenInMetadata(tokenInData);
setTokenOutMetadata(tokenOutData);
}
exec();
}, [tokenInAddress, tokenOutAddress]);

const getSwapData = async id => {
if (readContracts && readContracts.MoonSwap) {
const swapData = await readContracts.MoonSwap.swaps(id);
Expand All @@ -72,15 +98,11 @@ export default function TokenSwap({
}
setNumTokensOut(swapData.tokensOut.toNumber());
setTokenOutAddress(swapData.outToken.toString());
setSwapData(swapData);
console.log("swapData: ", swapData);
}
};

const getTokenDetails = async ({ token }) => {
const decimals = await readContracts[token].decimals;
return { decimals };
};

const getLatestSwapId = async () => {
let swaps = null;
if (readContracts?.MoonSwap) {
Expand All @@ -100,9 +122,7 @@ export default function TokenSwap({
await res.wait(1);
};

const createNewSwap = async ({ tokenIn, swapValueIn, tokenOut, swapValueOut }) => {
setTokenInAddress(tokenIn);
setTokenOutAddress(tokenOut);
const createNewSwap = async () => {
if (!isWalletConnected) {
return notification.error({
message: "Access request failed",
Expand All @@ -113,24 +133,20 @@ export default function TokenSwap({

const signer = userSigner;

console.log("signer", signer);
const inContract = new ethers.Contract(tokenInAddress, ERC20ABI, signer);

const inContract = new ethers.Contract(tokenIn, ERC20ABI, signer);
const outContract = new ethers.Contract(tokenOut, ERC20ABI, signer);
const currentAllowance = await checkAllowance(tokenInAddress, signer, readContracts.MoonSwap.address);

console.log("inContract", inContract);

setTokenInContract(inContract);
setTokenOutContract(outContract);

// Approve the token allowance
await approveTokenAllowance({
maxApproval: swapValueIn,
tokenInContract: inContract,
});
if (currentAllowance < ethers.utils.formatEther(swapValueIn)) {
// Approve the token allowance
await approveTokenAllowance({
maxApproval: swapValueIn,
tokenInContract: inContract,
});
}

const result = tx(
writeContracts.MoonSwap.createNewSwap(tokenIn, tokenOut, swapValueIn, swapValueOut, addressOut),
writeContracts.MoonSwap.createNewSwap(tokenInAddress, tokenOutAddress, swapValueIn, swapValueOut, addressOut),
(update, error) => {
console.log("result check ", update, error);
if (update && (update.status === "confirmed" || update.status === 1)) {
Expand Down Expand Up @@ -158,7 +174,11 @@ export default function TokenSwap({
const signer = userSigner;
const outContract = new ethers.Contract(tokenOutAddress, ERC20ABI, signer);

await approveTokenAllowance({ maxApproval: tokenOut.toString(), tokenInContract: outContract });
const currentAllowance = await checkAllowance(tokenOutAddress, signer, readContracts.MoonSwap.address);

if (currentAllowance < ethers.utils.formatEther(tokenOut)) {
await approveTokenAllowance({ maxApproval: tokenOut.toString(), tokenInContract: outContract });
}

const result = tx(writeContracts.MoonSwap.commitToSwap(currentSwapId, tokenOut), update => {
console.log("📡 Swap Complete:", update);
Expand Down Expand Up @@ -218,7 +238,6 @@ export default function TokenSwap({
<Button
onClick={() => {
setCommitSwapId(null);
setTokenOut(null);
setReadyToSwap(false);
setSwapStep(0);
}}
Expand All @@ -240,7 +259,7 @@ export default function TokenSwap({

<div style={{ margin: 8 }}>
{!readyToSwap && !swapComplete && (
<Form name="join_room" onFinish={createNewSwap}>
<Form name="create_new_swap" onFinish={createNewSwap}>
<div
style={{
border: "1px solid #cccccc",
Expand All @@ -259,15 +278,27 @@ export default function TokenSwap({
<AddressInput
autoFocus
ensProvider={mainnetProvider}
placeholder="Address"
placeholder="In party address"
address={addressIn}
onChange={setAddressIn}
/>
<Form.Item name="tokenIn">
<Input style={{ marginRight: 20, marginTop: 20 }} placeholder="Token Hash" />
<Input
value={tokenInAddress}
onChange={e => setTokenInAddress(e.target.value)}
style={{ marginRight: 0, marginTop: 20 }}
placeholder="In token contract address"
/>
{tokenInMetadata?.name && <span> {tokenInMetadata.name} </span>}
</Form.Item>
<Form.Item name="swapValueIn">
<Input style={{ marginRight: 20, marginTop: 20 }} placeholder="Token Amount" />
<Input
value={swapValueIn}
onChange={e => setSwapValueIn(e.target.value)}
style={{ marginRight: 20, marginTop: 20 }}
placeholder="Token Amount in wei"
/>
{tokenInMetadata?.symbol && <span> {tokenInMetadata.symbol} </span>}
</Form.Item>
</Col>
</Row>
Expand All @@ -290,15 +321,27 @@ export default function TokenSwap({
<AddressInput
autoFocus
ensProvider={mainnetProvider}
placeholder="Address"
placeholder="Out party address"
address={addressOut}
onChange={setAddressOut}
/>
<Form.Item name="tokenOut">
<Input style={{ marginRight: 20, marginTop: 20 }} placeholder="Token Hash" />
<Input
value={tokenOutAddress}
onChange={e => setTokenOutAddress(e.target.value)}
style={{ marginRight: 20, marginTop: 20 }}
placeholder="Out token contract address"
/>
{tokenOutMetadata?.name && <span>{tokenOutMetadata.name}</span>}
</Form.Item>
<Form.Item name="swapValueOut">
<Input style={{ marginRight: 20, marginTop: 20 }} placeholder="Token Amount" />
<Input
value={swapValueOut}
onChange={e => setSwapValueOut(e.target.value)}
style={{ marginRight: 20, marginTop: 20 }}
placeholder="Token Amount in wei"
/>
{tokenOutMetadata?.symbol && <span> {tokenOutMetadata.symbol} </span>}
</Form.Item>
</Col>
</Row>
Expand All @@ -311,8 +354,8 @@ export default function TokenSwap({
</Form>
)}
{notFound && <div>Swap already completed or inactive.</div>}
{!notFound && !swapComplete && readyToSwap && commitSwapId && numTokensOut && (
<Form name="join_room" onFinish={commitToSwap}>
{!notFound && !swapComplete && readyToSwap && commitSwapId && numTokensOut && swapData && (
<Form name="commit_swap_view" onFinish={commitToSwap}>
<div
style={{
border: "1px solid #cccccc",
Expand All @@ -328,8 +371,27 @@ export default function TokenSwap({
<Form.Item label="Swap Id" name="swapId">
<p>{commitSwapId}</p>
</Form.Item>
<Form.Item label="Token In" name="tokenIn">
<p>
{tokenInMetadata &&
(tokenInMetadata.symbol
? swapData.tokensIn.toNumber() + " " + tokenInMetadata.symbol + "(wei)"
: "Loading...")}
</p>
</Form.Item>
<Form.Item label="Token Out" name="tokenOut">
<p>{numTokensOut} </p>
<p>
{tokenOutMetadata &&
(tokenOutMetadata.symbol
? swapData.tokensOut.toNumber() + " " + tokenOutMetadata.symbol + "(wei)"
: "Loading...")}
</p>
</Form.Item>
<Form.Item label="Swapping from" name="inParty">
<Address address={swapData.inTokenParty} ensProvider={mainnetProvider} fontSize={18} />
</Form.Item>
<Form.Item label="Swapping to" name="inParty">
<Address address={swapData.outTokenParty} ensProvider={mainnetProvider} fontSize={18} />
</Form.Item>
</Col>
</Row>
Expand Down