Address PR-135 feedbacks

components/PoolStats.tsx

@@ -109,6 +109,7 @@ const PoolStats: VFC<IntrinsicElements["div"] & PoolStatsProps> = (props) => {
 					<strong>Slippage:</strong>{" "}
 					{poolAction === "Add" && (
 						<span>
+							{"<= "}
 							{Balance.fromInput(tradeInput?.value, tradeAsset)
 								.increase(slippage)
 								.toBalance()}{" "}
@@ -117,6 +118,7 @@ const PoolStats: VFC<IntrinsicElements["div"] & PoolStatsProps> = (props) => {
 					)}
 					{poolAction === "Remove" && (
 						<span>
+							{">= "}
 							{Balance.fromInput(tradeInput?.value, tradeAsset)
 								.decrease(slippage)
 								.toBalance()}{" "}
@@ -133,10 +135,9 @@ const PoolStats: VFC<IntrinsicElements["div"] & PoolStatsProps> = (props) => {
 						title={
 							<div>
 								If the amount of <strong>{tradeAsset.symbol}</strong> used for
-								liquidity pool is{" "}
-								{poolAction === "Remove" ? "lesser" : "greater"} than Slippage
-								value, the transaction will not proceed. You can update your
-								preferred Slippage percentage under Settings.
+								liquidity pool is {poolAction === "Remove" ? "less" : "greater"}{" "}
+								than Slippage value, the transaction will fail. You can update
+								your preferred Slippage percentage under Settings.
 							</div>
 						}
 						arrow

components/SwapForm.tsx

@@ -6,7 +6,7 @@ import SubmitButton from "@/components/shared/SubmitButton";
 import { useSwap } from "@/providers/SwapProvider";
 import { useCENNZApi } from "@/providers/CENNZApiProvider";
 import { useCENNZWallet } from "@/providers/CENNZWalletProvider";
-import { Balance, getBuyAssetExtrinsic, signAndSendTx } from "@/utils";
+import { Balance, getSellAssetExtrinsic, signAndSendTx } from "@/utils";
 
 interface SwapFormProps {}
 
@@ -36,7 +36,7 @@ const SwapForm: FC<IntrinsicElements["form"] & SwapFormProps> = ({
 			if (!api) return;
 			setProgressStatus();
 
-			const extrinsic = getBuyAssetExtrinsic(
+			const extrinsic = getSellAssetExtrinsic(
 				api,
 				exchangeAsset.assetId,
 				Balance.fromInput(exValue, exchangeAsset),

components/SwapStats.tsx

@@ -10,8 +10,14 @@ import { useSwapExchangeRate, useSwapGasFee } from "@/hooks";
 interface SwapStatsProps {}
 
 const SwapStats: VFC<IntrinsicElements["div"] & SwapStatsProps> = (props) => {
-	const { exchangeInput, exchangeAsset, receiveAsset, slippage, txStatus } =
-		useSwap();
+	const {
+		exchangeInput,
+		exchangeAsset,
+		receiveAsset,
+		slippage,
+		txStatus,
+		receiveInput,
+	} = useSwap();
 
 	const { exchangeRate, updatingExchangeRate, updateExchangeRate } =
 		useSwapExchangeRate("1");
@@ -52,10 +58,11 @@ const SwapStats: VFC<IntrinsicElements["div"] & SwapStatsProps> = (props) => {
 				<li>
 					<strong>Slippage:</strong>{" "}
 					<span>
-						{Balance.fromInput(exchangeInput?.value, exchangeAsset)
-							.increase(slippage)
+						{">= "}
+						{Balance.fromInput(receiveInput?.value, exchangeAsset)
+							.decrease(slippage)
 							.toBalance()}{" "}
-						{exchangeAsset.symbol}
+						{receiveAsset.symbol}
 					</span>
 					<Tooltip
 						disableFocusListener
@@ -66,10 +73,9 @@ const SwapStats: VFC<IntrinsicElements["div"] & SwapStatsProps> = (props) => {
 						}
 						title={
 							<div>
-								If the amount of <strong>{exchangeAsset.symbol}</strong> used
-								for swapping is greater than Slippage value, the transaction
-								will not proceed. You can update your preferred Slippage
-								percentage under Settings.
+								If the amount of <strong>{receiveAsset.symbol}</strong> received
+								is less than Slippage value, the transaction will fail. You can
+								update your preferred Slippage percentage under Settings.
 							</div>
 						}
 						arrow

constants.ts

@@ -21,3 +21,15 @@ export const BRIDGE_RELAYER_URL: string =
 export const GA_ID: string = process.env.NEXT_PUBLIC_GA_ID;
 
 export const VERCEL_URL: string = process.env.NEXT_PUBLIC_VERCEL_URL;
+
+export const MAINNET_BRIDGE_CONTRACT: string =
+	"0xf7997B93437d5d2AC226f362EBF0573ce7a53930";
+
+export const KOVAN_BRIDGE_CONTRACT: string =
+	"0x6484A31Df401792c784cD93aAAb3E933B406DdB3";
+
+export const MAINNET_PEG_CONTRACT: string =
+	"0x76BAc85e1E82cd677faa2b3f00C4a2626C4c6E32";
+
+export const KOVAN_PEG_CONTRACT: string =
+	"0xa39E871e6e24f2d1Dd6AdA830538aBBE7b30F78F";

hooks/useSwapGasFee.ts

@@ -1,5 +1,5 @@
 import { useCENNZApi } from "@/providers/CENNZApiProvider";
-import { Balance, fetchGasFee, getBuyAssetExtrinsic } from "@/utils";
+import { Balance, fetchGasFee, getSellAssetExtrinsic } from "@/utils";
 import { useEffect, useState, useMemo, useCallback } from "react";
 import { useSwap } from "@/providers/SwapProvider";
 
@@ -16,7 +16,7 @@ export default function useSwapGasFee(): {
 	const extrinsic = useMemo(
 		() =>
 			!!api
-				? getBuyAssetExtrinsic(
+				? getSellAssetExtrinsic(
 						api,
 						exchangeAsset.assetId,
 						Balance.fromInput("1", exchangeAsset),

tests/fetchGasFee.test.ts

@@ -1,5 +1,5 @@
 import fetchGasFee from "@/utils/fetchGasFee";
-import getBuyAssetExtrinsic from "@/utils/getBuyAssetExtrinsic";
+import getSellAssetExtrinsic from "@/utils/getSellAssetExtrinsic";
 import { Balance } from "@/utils";
 
 const api = global.getCENNZApiForTest();
@@ -10,7 +10,7 @@ describe("fetchGasFee", () => {
 	it("returns expected result", async () => {
 		const gasFee = await fetchGasFee(
 			api,
-			getBuyAssetExtrinsic(
+			getSellAssetExtrinsic(
 				api,
 				cennzAsset.assetId,
 				Balance.fromInput("1", cennzAsset),

utils/ensureRelayerDepositDone.ts

@@ -33,7 +33,10 @@ export async function waitUntilDepositDone(
 						clearInterval(intervalId);
 						resolve(status);
 					})
-					.catch(reject);
+					.catch((error) => {
+						clearInterval(intervalId);
+						reject(error);
+					});
 			}, 1000);
 		});
 	};

utils/fetchBridgeDepositStatus.ts

@@ -10,17 +10,12 @@ export default async function fetchBridgeDepositStatus(
 ): Promise<BridgeStatus> {
 	const pegContract = getERC20PegContract<"ReadOnly">(provider);
 
-	const [bridgePaused, cennzActive, ethActive] = await Promise.all([
-		api.query.ethBridge.bridgePaused(),
+	const [cennzActive, ethActive] = await Promise.all([
 		api.query.erc20Peg.depositsActive(),
 		pegContract.depositsActive(),
 	]);
 
-	return (bridgePaused as any).isFalse &&
-		(cennzActive as any).isTrue &&
-		ethActive
-		? "Active"
-		: "Inactive";
+	return (cennzActive as any).isTrue && ethActive ? "Active" : "Inactive";
 }
 
 export async function ensureBridgeDepositActive(

utils/fetchSwapAssets.ts

@@ -1,6 +1,7 @@
 import { Api } from "@cennznet/api";
 import { CENNZAsset } from "@/types";
 import fetchCENNZAssets from "@/utils/fetchCENNZAssets";
+import { CPAY_ASSET_ID } from "@/constants";
 
 /**
  * Fetch and retuns array of CENNZnetAsset that are swapable
@@ -12,8 +13,8 @@ import fetchCENNZAssets from "@/utils/fetchCENNZAssets";
 export default async function fetchSwapAssets(api: Api): Promise<CENNZAsset[]> {
 	const assets = await fetchCENNZAssets(api);
 	const liquidityPredicates = await Promise.all(
-		assets.map(async ({ assetId, symbol }) => {
-			if (symbol === "CPAY") return true;
+		assets.map(async ({ assetId }) => {
+			if (assetId === CPAY_ASSET_ID) return true;
 			const totalLiquidity = await api.derive.cennzx.totalLiquidity(assetId);
 			return totalLiquidity?.toNumber() > 0;
 		})

utils/getBridgeContract.ts

@@ -1,5 +1,9 @@
 import { ethers } from "ethers";
-import { ETH_CHAIN_ID } from "@/constants";
+import {
+	ETH_CHAIN_ID,
+	MAINNET_BRIDGE_CONTRACT,
+	KOVAN_BRIDGE_CONTRACT,
+} from "@/constants";
 import CENNZnetBridge from "@/artifacts/CENNZnetBridge.json";
 
 type ContractType = "ReadOnly" | "OnBehalf";
@@ -15,9 +19,7 @@ export default function getBridgeContract<T extends ContractType>(
 	signer: ContractSigner<T>
 ): ethers.Contract {
 	const address =
-		ETH_CHAIN_ID === 1
-			? "0xf7997B93437d5d2AC226f362EBF0573ce7a53930"
-			: "0x6484A31Df401792c784cD93aAAb3E933B406DdB3";
+		ETH_CHAIN_ID === 1 ? MAINNET_BRIDGE_CONTRACT : KOVAN_BRIDGE_CONTRACT;
 
 	return new ethers.Contract(address, CENNZnetBridge, signer);
 }

utils/getERC20PegContract.ts

@@ -1,5 +1,9 @@
 import { ethers } from "ethers";
-import { ETH_CHAIN_ID } from "@/constants";
+import {
+	ETH_CHAIN_ID,
+	MAINNET_PEG_CONTRACT,
+	KOVAN_PEG_CONTRACT,
+} from "@/constants";
 import ERC20Peg from "@/artifacts/ERC20Peg.json";
 
 type ContractType = "ReadOnly" | "OnBehalf";
@@ -14,9 +18,7 @@ export default function getERC20PegContract<T extends ContractType>(
 	signer: ContractSigner<T>
 ): ethers.Contract {
 	const address =
-		ETH_CHAIN_ID === 1
-			? "0x76BAc85e1E82cd677faa2b3f00C4a2626C4c6E32"
-			: "0xa39E871e6e24f2d1Dd6AdA830538aBBE7b30F78F";
+		ETH_CHAIN_ID === 1 ? MAINNET_PEG_CONTRACT : KOVAN_PEG_CONTRACT;
 
 	return new ethers.Contract(address, ERC20Peg, signer);
 }

utils/getSellAssetExtrinsic.ts

@@ -0,0 +1,22 @@
+import { CENNZAsset } from "@/types";
+import { Api } from "@cennznet/api";
+import { SubmittableExtrinsic } from "@cennznet/api/types";
+import { Balance } from "@/utils";
+
+// TODO: Need test
+export default function getSellAssetExtrinsic(
+	api: Api,
+	exchangeAssetId: CENNZAsset["assetId"],
+	exchangeAssetValue: Balance,
+	receiveAssetId: CENNZAsset["assetId"],
+	receivedAssetValue: Balance,
+	slippage: number
+): SubmittableExtrinsic<"promise"> {
+	return api.tx.cennzx.sellAsset(
+		null,
+		exchangeAssetId,
+		receiveAssetId,
+		exchangeAssetValue.toFixed(0),
+		receivedAssetValue.decrease(slippage).toFixed(0)
+	);
+}

utils/index.ts

@@ -36,3 +36,4 @@ export { default as fetchDepositRelayerStatus } from "@/utils/fetchDepositRelaye
 export { default as ensureRelayerDepositDone } from "@/utils/ensureRelayerDepositDone";
 export { default as sendWithdrawEthereumRequest } from "@/utils/sendWithdrawEthereumRequest";
 export { default as trackPageView } from "@/utils/trackPageView";
+export { default as getSellAssetExtrinsic } from "@/utils/getSellAssetExtrinsic";

utils/waitUntil.ts

@@ -1,4 +1,6 @@
-export default async function waitUntil(time: number = 0): Promise<"timeout"> {
+export default async function waitUntil(
+	time: number = 1000
+): Promise<"timeout"> {
 	return new Promise((resolve) => {
 		setTimeout(() => {
 			resolve("timeout");