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 (