diff --git a/package-lock.json b/package-lock.json index da5a41bf3..f08993048 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4020,9 +4020,9 @@ } }, "node_modules/@portis/web3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz", - "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz", + "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==", "dependencies": { "ethereumjs-util": "5.2.0", "penpal": "3.0.7", @@ -12607,10 +12607,7 @@ "node_modules/jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", - "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "engines": { - "node": "*" - } + "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=" }, "node_modules/jsprim": { "version": "1.4.2", @@ -21920,9 +21917,9 @@ "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" }, "@portis/web3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz", - "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz", + "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==", "requires": { "ethereumjs-util": "5.2.0", "penpal": "3.0.7", @@ -31940,7 +31937,8 @@ "styled-jsx": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz", - "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==" + "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==", + "requires": {} }, "supports-color": { "version": "5.5.0", diff --git a/src/components/@shared/atoms/Tags.tsx b/src/components/@shared/atoms/Tags.tsx index 1a29a5f1d..7e6d9dc52 100644 --- a/src/components/@shared/atoms/Tags.tsx +++ b/src/components/@shared/atoms/Tags.tsx @@ -41,8 +41,8 @@ export default function Tags({ return (
- {tags?.map((tag) => ( - + {tags?.map((tag, i) => ( + ))} {shouldShowMore && ( {`+ ${items.length - max} more`} diff --git a/src/components/Asset/AssetActions/Trade/FormTrade.tsx b/src/components/Asset/AssetActions/Trade/FormTrade.tsx index f95750ffb..e6998a8c5 100644 --- a/src/components/Asset/AssetActions/Trade/FormTrade.tsx +++ b/src/components/Asset/AssetActions/Trade/FormTrade.tsx @@ -35,10 +35,10 @@ export default function FormTrade({ const { isAssetNetwork } = useAsset() const { debug } = useUserPreferences() const { appConfig } = useMarketMetadata() - const { poolInfo } = usePool() + const { poolInfo, fetchAllData } = usePool() + const [txId, setTxId] = useState() const [coinFrom, setCoinFrom] = useState('OCEAN') - const [maximumBaseToken, setMaximumBaseToken] = useState('0') const [maximumDt, setMaximumDt] = useState('0') const [isWarningAccepted, setIsWarningAccepted] = useState(false) @@ -105,6 +105,10 @@ export default function FormTrade({ tokenInOutMarket, amountsInOutMaxFee ) + + if (!tx) { + throw new Error('Failed to swap tokens!') + } } if (values.output === 'exactOut') { const tokenOutMarket: TokenInOutMarket = { @@ -139,8 +143,11 @@ export default function FormTrade({ tokenOutMarket, amountsOutMaxFee ) + if (!tx) { + throw new Error('Failed to swap tokens!') + } } - + await fetchAllData() setTxId(tx?.transactionHash) } catch (error) { LoggerInstance.error(error.message) @@ -152,8 +159,10 @@ export default function FormTrade({ { + onSubmit={async (values, { setFieldValue, setSubmitting, resetForm }) => { await handleTrade(values) + await setFieldValue('baseToken', '') + await setFieldValue('datatoken', '') resetForm() setSubmitting(false) }} @@ -167,6 +176,7 @@ export default function FormTrade({ setCoin={setCoinFrom} setMaximumBaseToken={setMaximumBaseToken} setMaximumDt={setMaximumDt} + isLoading={isSubmitting} /> ) : (
diff --git a/src/components/Asset/AssetActions/Trade/Swap.tsx b/src/components/Asset/AssetActions/Trade/Swap.tsx index 4f103a3d4..262951ce5 100644 --- a/src/components/Asset/AssetActions/Trade/Swap.tsx +++ b/src/components/Asset/AssetActions/Trade/Swap.tsx @@ -30,13 +30,15 @@ export default function Swap({ balance, setMaximumDt, setMaximumBaseToken, - setCoin + setCoin, + isLoading }: { asset: AssetExtended balance: PoolBalance setMaximumDt: (value: string) => void setMaximumBaseToken: (value: string) => void setCoin: (value: string) => void + isLoading: boolean }): ReactElement { const { isAssetNetwork } = useAsset() const { web3 } = useWeb3() @@ -69,92 +71,83 @@ export default function Swap({ const [lpSwapFee, setLpSwapFee] = useState() useEffect(() => { - if (!asset || !balance || !values?.type || !web3 || !appConfig) return + if (!asset || !balance || !values?.type || !web3 || !appConfig || !poolInfo) + return const poolInstance = new Pool(web3) async function calculateMaximum() { - const maxDtFromPool = - values.type === 'buy' - ? calcMaxExactIn(poolData.datatokenLiquidity) - : calcMaxExactOut(poolData.datatokenLiquidity) + const datatokenLiquidity = await poolInstance.getReserve( + poolData.id, + poolData.datatoken.address + ) + const baseTokenLiquidity = await poolInstance.getReserve( + poolData.id, + poolData.baseToken.address + ) + if (values.type === 'buy') { + const maxBaseTokenFromPool = calcMaxExactIn(baseTokenLiquidity) - const maxBaseTokenFromPool = - values.type === 'buy' - ? calcMaxExactOut(poolData.baseTokenLiquidity) - : calcMaxExactIn(poolData.baseTokenLiquidity) - - const amountDataToken = - values.type === 'buy' - ? maxDtFromPool - : new Decimal(balance.baseToken).greaterThan( - calcMaxExactIn(poolData.datatokenLiquidity) - ) - ? calcMaxExactIn(poolData.datatokenLiquidity) - : new Decimal(balance.datatoken) - - const amountBaseToken = - values.type === 'buy' - ? new Decimal(balance.baseToken).greaterThan( - calcMaxExactIn(poolData.baseTokenLiquidity) - ) - ? calcMaxExactIn(poolData.baseTokenLiquidity) - : new Decimal(balance.baseToken) - : maxBaseTokenFromPool - - try { - const maxBuyBaseToken: PoolPriceAndFees = - await poolInstance.getAmountOutExactIn( - asset.accessDetails.addressOrId, - poolInfo.datatokenAddress, - poolInfo.baseTokenAddress, - amountDataToken.toString(), - appConfig.consumeMarketPoolSwapFee - ) - - const maxBuyDt: PoolPriceAndFees = - await poolInstance.getAmountOutExactIn( - asset.accessDetails?.addressOrId, - poolInfo.baseTokenAddress, - poolInfo.datatokenAddress, - amountBaseToken.toString(), - appConfig.consumeMarketPoolSwapFee - ) - const maximumDt = - values.type === 'buy' - ? amountDataToken.greaterThan(new Decimal(maxBuyDt.tokenAmount)) - ? maxBuyDt.tokenAmount - : amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString() - : amountDataToken.greaterThan(new Decimal(balance.datatoken)) - ? balance.datatoken - : amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString() - - const maximumBaseToken = - values.type === 'sell' - ? amountBaseToken.greaterThan( - new Decimal(maxBuyBaseToken.tokenAmount) - ) - ? maxBuyBaseToken.tokenAmount - : amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString() - : amountBaseToken.greaterThan(new Decimal(balance.baseToken)) - ? balance.baseToken - : amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString() + const maxBaseTokens = maxBaseTokenFromPool.greaterThan( + new Decimal(balance.baseToken) + ) + ? balance.baseToken + : maxBaseTokenFromPool.toDecimalPlaces(MAX_DECIMALS).toString() + const maxDt = await poolInstance.getAmountOutExactIn( + asset.accessDetails?.addressOrId, + poolInfo.baseTokenAddress, + poolInfo.datatokenAddress, + maxBaseTokens.toString(), + appConfig.consumeMarketPoolSwapFee + ) + const maximumDt = new Decimal(maxDt.tokenAmount) + .toDecimalPlaces(MAX_DECIMALS) + .toString() setMaximumDt(maximumDt) - setMaximumBaseToken(maximumBaseToken) + setMaximumBaseToken(maxBaseTokens) setBaseTokenItem((prevState) => ({ ...prevState, - amount: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString(), - maxAmount: maximumBaseToken + amount: balance.baseToken, + maxAmount: maxBaseTokens })) setDtItem((prevState) => ({ ...prevState, - amount: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString(), + amount: datatokenLiquidity, maxAmount: maximumDt })) - } catch (error) { - LoggerInstance.error(error.message) + } else { + const maxDtFromPool = calcMaxExactIn(datatokenLiquidity) + const maxDatatokens = maxDtFromPool.greaterThan( + new Decimal(balance.datatoken) + ) + ? balance.datatoken + : maxDtFromPool.toDecimalPlaces(MAX_DECIMALS).toString() + + const maxBaseTokens = await poolInstance.getAmountOutExactIn( + asset.accessDetails?.addressOrId, + poolInfo?.datatokenAddress, + poolInfo?.baseTokenAddress, + maxDatatokens.toString(), + appConfig.consumeMarketPoolSwapFee + ) + const maximumBasetokens = new Decimal(maxBaseTokens.tokenAmount) + .toDecimalPlaces(MAX_DECIMALS) + .toString() + setMaximumDt(maxDatatokens) + setMaximumBaseToken(maximumBasetokens) + + setDtItem((prevState) => ({ + ...prevState, + amount: balance.datatoken, + maxAmount: maxDatatokens + })) + setBaseTokenItem((prevState) => ({ + ...prevState, + amount: baseTokenLiquidity, + maxAmount: maximumBasetokens + })) } } calculateMaximum() @@ -167,12 +160,11 @@ export default function Swap({ asset, web3, dtItem.token, + dtItem.amount, baseTokenItem.token, - poolInfo.liquidityProviderSwapFee, - poolInfo.datatokenAddress, - poolInfo.baseTokenAddress, + baseTokenItem.amount, appConfig, - appConfig.consumeMarketPoolSwapFee + poolInfo ]) const switchTokens = () => { @@ -321,7 +313,7 @@ export default function Swap({ @@ -329,7 +321,7 @@ export default function Swap({ className={styles.swapButton} style="text" onClick={switchTokens} - disabled={!isAssetNetwork} + disabled={!isAssetNetwork || isLoading} > @@ -337,7 +329,7 @@ export default function Swap({ @@ -351,7 +343,7 @@ export default function Swap({ tokenAmount={tokenAmount} spotPrice={spotPrice} /> - +
) } diff --git a/src/components/Asset/AssetActions/Trade/TradeInput.tsx b/src/components/Asset/AssetActions/Trade/TradeInput.tsx index 617fca89f..e3b01c7bd 100644 --- a/src/components/Asset/AssetActions/Trade/TradeInput.tsx +++ b/src/components/Asset/AssetActions/Trade/TradeInput.tsx @@ -38,7 +38,7 @@ export default function TradeInput({ const isTopField = (name === 'baseToken' && values.type === 'buy') || (name === 'datatoken' && values.type === 'sell') - const titleAvailable = isTopField ? `Balance` : `Available from pool` + const titleAvailable = isTopField ? `Your Balance` : `Pool Balance` const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive` return (