ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update extra information on DEX page

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-03-25 15:21:01 +03:00
parent 5b067f50f0
commit ef129af5ad
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
3 changed files with 80 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "ghost-dao-interface",
"private": true,
"version": "0.6.8",
"version": "0.6.9",
"type": "module",
"scripts": {
"dev": "vite",

50
src/containers/Dex/PoolContainer.jsx
View File

@ -131,7 +131,35 @@ const PoolContainer = ({
}
}
}, [addressBottom, balanceTop, balanceBottom, amountTop, amountBottom, tokenAddresses, pairReserves])
}, [addressBottom, balanceTop, balanceBottom, amountTop, amountBottom, tokenAddresses, pairReserves]);
const poolShares = useMemo(() => {
const hundred = new DecimalBigNumber(1n, 2);
if (lpTotalSupply?._value == 0n) {
return { currentShares: lpTotalSupply, nextShares: lpTotalSupply };
}
const currentShares = lpBalance.div(lpTotalSupply).div(hundred);
const nextShares = (lpBalance.add(estimatedAmountOut)).div(lpTotalSupply).div(hundred);
return { currentShares, nextShares };
}, [lpBalance, lpTotalSupply, estimatedAmountOut]);
const poolPrices = useMemo(() => {
const amountIn = addressTop.toUpperCase() === tokenAddresses.token0.toUpperCase()
? pairReserves.reserve0
: pairReserves.reserve1;
const amountOut = addressBottom.toUpperCase() === tokenAddresses.token1.toUpperCase()
? pairReserves.reserve1
: pairReserves.reserve0;
let priceIn = "0";
let priceOut = "0";
if (amountIn?._value > 0n) priceIn = (amountOut.div(amountIn)).toString();
if (amountOut?._value > 0n) priceOut = (amountIn.div(amountOut)).toString();
return { priceIn , priceOut }
}, [addressTop, addressBottom, balanceTop, tokenAddresses, pairReserves]);
const addLiquidityInner = async () => {
setIsPending(true);
@ -218,7 +246,7 @@ const PoolContainer = ({
}
arrowOnClick={onSwap}
/>
{!isSmallScreen && <Box
<Box
m="10px 0"
display="flex"
flexDirection="column"
@ -229,18 +257,22 @@ const PoolContainer = ({
style={{ fontSize: "12px", color: theme.colors.gray[40] }}
>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Current Balance:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatNumber(lpBalance, formatDecimals)} LP</Typography>
<Typography fontSize="12px" lineHeight="15px">Current:</Typography>
<Typography fontSize="12px" lineHeight="15px">{!isSmallScreen ? `1 ${tokenNameTop} = ` : ""}{formatCurrency(poolPrices.priceIn, formatDecimals, tokenNameBottom)}</Typography>
</Box>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Total Supply:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatNumber(lpTotalSupply, formatDecimals)} LP</Typography>
<Typography fontSize="12px" lineHeight="15px">Current:</Typography>
<Typography fontSize="12px" lineHeight="15px">{!isSmallScreen ? `1 ${tokenNameBottom} = ` : ""}{formatCurrency(poolPrices.priceOut, formatDecimals, tokenNameTop)}</Typography>
</Box>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Extra Balance:</Typography>
<Typography fontSize="12px" lineHeight="15px">~{formatNumber(estimatedAmountOut, formatDecimals)} LP</Typography>
<Typography fontSize="12px" lineHeight="15px">Current Pool Share:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatNumber(poolShares.currentShares, formatDecimals)}%</Typography>
</Box>
</Box>}
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Next Pool Share:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatNumber(poolShares.nextShares, formatDecimals)}%</Typography>
</Box>
</Box>
<TokenAllowanceGuard
spendAmount={new DecimalBigNumber(amountTop, balanceTop._decimals)}
tokenName={tokenNameTop}

51
src/containers/Dex/SwapContainer.jsx
View File

@ -97,7 +97,7 @@ const SwapContainer = ({
const zero = new DecimalBigNumber(0n, 0);
const raw = new DecimalBigNumber(amountTop, balanceTop._decimals);
const amountInRaw = new DecimalBigNumber(raw._value.toBigInt(), balanceTop._decimals);
const amountInWithFee = amountInRaw.mul(new DecimalBigNumber(997n, 3));
const amountInWithFee = amountInRaw.mul(new DecimalBigNumber(997n, 3)); // TODO: filter
const amountIn = addressTop.toUpperCase() === tokenAddresses.token0.toUpperCase() ? pairReserves.reserve0 : pairReserves.reserve1;
const amountOut = addressBottom.toUpperCase() === tokenAddresses.token1.toUpperCase() ? pairReserves.reserve1 : pairReserves.reserve0;
@ -105,21 +105,42 @@ const SwapContainer = ({
if (amountIn.eq(zero)) {
setCurrentPrice("");
} else {
setCurrentPrice(amountIn.div(amountOut).toString());
setCurrentPrice(amountOut.div(amountIn).toString());
}
if (amountIn.eq(zero) || amountInWithFee.eq(zero)) {
setAmountBottom("");
setNextPrice("");
} else {
const nominator = amountOut.mul(amountIn);
const nominator = amountOut.mul(amountInWithFee);
const denominator = amountIn.add(amountInWithFee);
const newAmountOut = nominator.div(denominator);
setAmountBottom(amountOut.sub(newAmountOut).toString());
setNextPrice(denominator.div(newAmountOut).toString())
const newReserve0 = amountIn.add(amountInWithFee);
const newReserve1 = amountOut.sub(newAmountOut);
const nextPrice = newReserve1.div(newReserve0);
setAmountBottom(newAmountOut.toString());
setNextPrice(nextPrice.toString());
}
}, [amountTop, addressTop, isWrapping, isUnwrapping]);
}, [addressBottom, amountTop, addressTop, isWrapping, isUnwrapping]);
const minReceived = useMemo(() => {
const decimals = 7;
const shares = Math.pow(10, decimals);
const one = BigInt(shares * 100);
const floatSlippage = slippage === "" ? 0 : parseFloat(slippage);
const bigIntSlippage = one - BigInt(Math.round(floatSlippage * shares));
const slippageDecimalBigNumber = new DecimalBigNumber(bigIntSlippage, 2);
const bigIntAmount = BigInt(Math.round(amountBottom * shares));
const amountDecimalBigNumber = new DecimalBigNumber(bigIntAmount, decimals);
const tmpResult = amountDecimalBigNumber.mul(slippageDecimalBigNumber);
const result = new DecimalBigNumber(tmpResult?._value, tmpResult?._decimals + decimals);
return result?.toString();
}, [amountBottom, amountBottom, slippage, balanceBottom]);
const buttonText = useMemo(() => {
let text = "Swap";
@ -215,7 +236,7 @@ const SwapContainer = ({
}
arrowOnClick={onSwap}
/>
{!isSmallScreen && <Box
<Box
m="10px 0"
display="flex"
flexDirection="column"
@ -226,18 +247,22 @@ const SwapContainer = ({
style={{ fontSize: "12px", color: theme.colors.gray[40] }}
>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Current price:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(currentPrice, formatDecimals, tokenNameTop)}</Typography>
<Typography fontSize="12px" lineHeight="15px">Current:</Typography>
<Typography fontSize="12px" lineHeight="15px">{!isSmallScreen ? `1 ${tokenNameTop} = ` : ""}{formatCurrency(currentPrice, formatDecimals, tokenNameBottom)}</Typography>
</Box>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Next price:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(nextPrice === "" ? currentPrice : nextPrice, formatDecimals, tokenNameTop)}</Typography>
<Typography fontSize="12px" lineHeight="15px">Next:</Typography>
<Typography fontSize="12px" lineHeight="15px">{!isSmallScreen ? `1 ${tokenNameTop} = ` : ""}{formatCurrency(nextPrice === "" ? currentPrice : nextPrice, formatDecimals, tokenNameBottom)}</Typography>
</Box>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Transaction deadline:</Typography>
<Typography fontSize="12px" lineHeight="15px">Min. Receive:</Typography>
<Typography fontSize="12px" lineHeight="15px">{formatCurrency(minReceived, formatDecimals, tokenNameBottom)}</Typography>
</Box>
<Box width="100%" display="flex" justifyContent="space-between">
<Typography fontSize="12px" lineHeight="15px">Tx. Deadline:</Typography>
<Typography fontSize="12px" lineHeight="15px">~{prettifySecondsInDays(secondsToWait)}</Typography>
</Box>
</Box>}
</Box>
<TokenAllowanceGuard
spendAmount={new DecimalBigNumber(amountTop, balanceTop._decimals)}
tokenName={tokenNameTop}