Supply Liquidity

src/app/components/trade/LPPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import BigNumber from 'bignumber.js';
 import Nouislider from 'nouislider-react';
 import { useIconReact } from 'packages/icon-react';
 import { Flex, Box } from 'rebass/styled-components';
@@ -11,10 +12,11 @@ import Modal from 'app/components/Modal';
 import LiquiditySelect from 'app/components/trade/LiquiditySelect';
 import { Typography } from 'app/theme';
 import bnJs from 'bnJs';
-import { CURRENCYLIST } from 'constants/currency';
+import { CURRENCYLIST, SupportedPairs } from 'constants/currency';
 import { useLiquiditySupply } from 'store/liquidity/hooks';
 import { usePoolPair } from 'store/pool/hooks';
 import { useRatioValue } from 'store/ratio/hooks';
+import { useTransactionAdder } from 'store/transactions/hooks';
 import { useWalletBalanceValue } from 'store/wallet/hooks';
 
 import { SectionPanel, BrightPanel } from './utils';
@@ -37,14 +39,6 @@ export default function LPPanel() {
   const { account } = useIconReact();
   const walletBalance = useWalletBalanceValue();
   const liquiditySupply = useLiquiditySupply();
-  const sICXtotalSupply = liquiditySupply.sICXsupply?.toNumber() || 0;
-  const bnUSDtotalSsupply = liquiditySupply.bnUSDsupply?.toNumber() || 0;
-
-  const sICXbnUSDsupply = liquiditySupply.sICXbnUSDsupply?.toNumber() || 0;
-  const sICXbnUSDtotalSupply = liquiditySupply.sICXbnUSDtotalSupply?.toNumber() || 0;
-  const sICXbnUSDsupplyShare = (sICXbnUSDsupply / sICXbnUSDtotalSupply) * 100;
-  const sICXsupply = sICXtotalSupply * (sICXbnUSDsupplyShare / 100);
-  const bnUSDsupply = bnUSDtotalSsupply * (sICXbnUSDsupplyShare / 100);
 
   const [showSupplyConfirm, setShowSupplyConfirm] = React.useState(false);
 
@@ -58,22 +52,42 @@ export default function LPPanel() {
 
   const selectedPair = usePoolPair();
   const ratio = useRatioValue();
-  const sICXbnUSDratio = ratio.sICXbnUSDratio?.toNumber() || 0;
 
-  const [supplyInputAmount, setsupplyInputAmount] = React.useState('0');
+  const [supplyInputAmount, setSupplyInputAmount] = React.useState('0');
 
-  const [supplyOutputAmount, setsupplyOutputAmount] = React.useState('0');
+  const [supplyOutputAmount, setSupplyOutputAmount] = React.useState('0');
 
   const handleTypeInput = (val: string) => {
-    setsupplyInputAmount(val);
-    setsupplyOutputAmount((parseFloat(val) * sICXbnUSDratio).toFixed(2).toString());
+    setSupplyInputAmount(val);
+    let outputAmount = new BigNumber(val).multipliedBy(getRatioByPair());
+    if (outputAmount.isNaN()) outputAmount = new BigNumber(0);
+    setSupplyOutputAmount(outputAmount.toString());
+  };
+
+  const getRatioByPair = () => {
+    switch (selectedPair.pair) {
+      case SupportedPairs[0].pair: {
+        return ratio.sICXbnUSDratio;
+      }
+      case SupportedPairs[1].pair: {
+        return ratio.BALNbnUSDratio;
+      }
+      case SupportedPairs[2].pair: {
+        return ratio.sICXICXratio;
+      }
+    }
+    return 0;
   };
 
   const handleTypeOutput = (val: string) => {
-    setsupplyOutputAmount(val);
-    setsupplyInputAmount((parseFloat(val) / sICXbnUSDratio).toFixed(2).toString());
+    setSupplyOutputAmount(val);
+    let inputAmount = new BigNumber(val).multipliedBy(new BigNumber(1).dividedBy(getRatioByPair()));
+    if (inputAmount.isNaN()) inputAmount = new BigNumber(0);
+    setSupplyInputAmount(inputAmount.toString());
   };
 
+  const addTransaction = useTransactionAdder();
+
   const handleSupplyInputDepositConfirm = () => {
     if (!account) return;
     bnJs
@@ -82,6 +96,10 @@ export default function LPPanel() {
       .sICX.dexDeposit(parseFloat(supplyInputAmount))
       .then(res => {
         console.log('res', res);
+        addTransaction(
+          { hash: res.result },
+          { summary: `Supplied ${supplyInputAmount} ${selectedPair.baseCurrencyKey} to the DEX.` },
+        );
       })
       .catch(e => {
         console.error('error', e);
@@ -96,6 +114,10 @@ export default function LPPanel() {
       .bnUSD.dexDeposit(parseFloat(supplyOutputAmount))
       .then(res => {
         console.log('res', res);
+        addTransaction(
+          { hash: res.result },
+          { summary: `Deposited ${supplyOutputAmount} ${selectedPair.quoteCurrencyKey} to the DEX.` },
+        );
       })
       .catch(e => {
         console.error('error', e);
@@ -104,17 +126,62 @@ export default function LPPanel() {
 
   const handleSupplyConfirm = () => {
     if (!account) return;
-    bnJs
-      .eject({ account: account })
-      //.sICX.borrowAdd(newBorrowValue)
-      .Dex.dexSupplysICXbnUSD(parseFloat(supplyInputAmount), parseFloat(supplyOutputAmount))
-      .then(res => {
-        console.log('res', res);
-      })
-      .catch(e => {
-        console.error('error', e);
-      });
+    if (selectedPair.pair === SupportedPairs[2].pair) {
+      console.log('match pair = ', parseFloat(supplyInputAmount));
+      bnJs
+        .eject({ account: account })
+        .Dex.transferICX(parseFloat(supplyInputAmount))
+        .then(res => {
+          addTransaction(
+            { hash: res.result },
+            { summary: `Supplied ${supplyInputAmount} ${selectedPair.baseCurrencyKey} to the pool.` },
+          );
+        })
+        .catch(e => {
+          console.error('error', e);
+        });
+    } else {
+      bnJs
+        .eject({ account: account })
+        //.sICX.borrowAdd(newBorrowValue)
+        .Dex.dexSupplysICXbnUSD(parseFloat(supplyInputAmount), parseFloat(supplyOutputAmount))
+        .then(res => {
+          addTransaction(
+            { hash: res.result },
+            {
+              summary: `Supplied ${supplyInputAmount} ${selectedPair.baseCurrencyKey} ${supplyOutputAmount} ${selectedPair.quoteCurrencyKey} to the pool.`,
+            },
+          );
+        })
+        .catch(e => {
+          console.error('error', e);
+        });
+    }
+  };
+
+  const getSuppliedPairAmount = () => {
+    switch (selectedPair.pair) {
+      case SupportedPairs[0].pair: {
+        return {
+          base: liquiditySupply.sICXSuppliedPoolsICXbnUSD || 0,
+          quote: liquiditySupply.bnUSDSuppliedPoolsICXbnUSD || 0,
+        };
+      }
+      case SupportedPairs[1].pair: {
+        return {
+          base: liquiditySupply.BALNSuppliedPoolBALNbnUSD || 0,
+          quote: liquiditySupply.bnUSDSuppliedPoolBALNbnUSD || 0,
+        };
+      }
+      case SupportedPairs[2].pair: {
+        return { base: new BigNumber(2), quote: new BigNumber(2) };
+      }
+      default: {
+        return { base: new BigNumber(0), quote: new BigNumber(0) };
+      }
+    }
   };
+  const suppliedPairAmount = getSuppliedPairAmount();
 
   return (
     <>
@@ -192,8 +259,8 @@ export default function LPPanel() {
               <StyledDL>
                 <dt>Your supply</dt>
                 <dd>
-                  {sICXsupply.toFixed(2)} {selectedPair.baseCurrencyKey} / {bnUSDsupply.toFixed(2)}{' '}
-                  {selectedPair.quoteCurrencyKey}
+                  {suppliedPairAmount.base.toFixed(2)} {selectedPair.baseCurrencyKey} /{' '}
+                  {suppliedPairAmount.quote.toFixed(2)} {selectedPair.quoteCurrencyKey}
                 </dd>
               </StyledDL>
               <StyledDL>
@@ -205,8 +272,7 @@ export default function LPPanel() {
               <StyledDL>
                 <dt>Total supply</dt>
                 <dd>
-                  {sICXtotalSupply.toFixed(2)} {selectedPair.baseCurrencyKey} / {bnUSDtotalSsupply.toFixed(2)}{' '}
-                  {selectedPair.quoteCurrencyKey}
+                  {0} {selectedPair.baseCurrencyKey} / {0} {selectedPair.quoteCurrencyKey}
                 </dd>
               </StyledDL>
               <StyledDL>