update extra information on DEX page

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

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

src/containers/Dex/PoolContainer.jsx

@@ -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">Current:</Typography>
-                    <Typography fontSize="12px" lineHeight="15px">{formatNumber(lpBalance, formatDecimals)} LP</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">Current:</Typography>
-                    <Typography fontSize="12px" lineHeight="15px">{formatNumber(lpTotalSupply, formatDecimals)} LP</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">Current Pool Share:</Typography>
-                    <Typography fontSize="12px" lineHeight="15px">~{formatNumber(estimatedAmountOut, formatDecimals)} LP</Typography>
+                    <Typography fontSize="12px" lineHeight="15px">{formatNumber(poolShares.currentShares, formatDecimals)}%</Typography>
+                </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>
-            </Box>}
             <TokenAllowanceGuard
                 spendAmount={new DecimalBigNumber(amountTop, balanceTop._decimals)}
                 tokenName={tokenNameTop}

src/containers/Dex/SwapContainer.jsx

@@ -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());
+            const newReserve0 = amountIn.add(amountInWithFee);
-            setNextPrice(denominator.div(newAmountOut).toString())
+            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">Current:</Typography>
-                    <Typography fontSize="12px" lineHeight="15px">{formatCurrency(currentPrice, formatDecimals, tokenNameTop)}</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">Next:</Typography>
-                    <Typography fontSize="12px" lineHeight="15px">{formatCurrency(nextPrice === "" ? currentPrice : nextPrice, formatDecimals, tokenNameTop)}</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}