Merge pull request #61 from DistributedCollective/fit/tx-limits

reintroduced limits to trade, lend and borrow
DistributedCollective · Nov 20, 2020 · 4dfec2f · 4dfec2f
2 parents ace08d6 + 48ff95d
commit 4dfec2f
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 36 deletions.
diff --git a/src/app/containers/LendBorrowSovryn/BorrowingContainer/index.tsx b/src/app/containers/LendBorrowSovryn/BorrowingContainer/index.tsx
@@ -13,12 +13,13 @@ import { FieldGroup } from '../../../components/FieldGroup';
 import { AmountField } from '../../AmountField';
 import { AssetWalletBalance } from '../../../components/AssetWalletBalance';
 import { DummyField } from '../../../components/DummyField/Loadable';
-import { weiTo4 } from '../../../../utils/blockchain/math-helpers';
+import { weiTo4, weiToFixed } from '../../../../utils/blockchain/math-helpers';
 import { TradeButton } from '../../../components/TradeButton';
 import { SendTxProgress } from '../../../components/SendTxProgress';
-import { bignumber } from 'mathjs';
+import { bignumber, min } from 'mathjs';
 import { actions } from '../slice';
 import { useCanInteract } from '../../../hooks/useCanInteract';
+import { useLending_transactionLimit } from '../../../hooks/lending/useLending_transactionLimit';
 
 type Props = {
   currency: Asset;
@@ -79,12 +80,20 @@ const BorrowingContainer: React.FC<Props> = ({ currency }) => {
   );
 
   const { value: tokenBalance } = useAssetBalanceOf(tokenToCollarate);
+  const {
+    value: maxAmount,
+    loading: loadingLimit,
+  } = useLending_transactionLimit(currency, tokenToCollarate);
 
   const handleSubmitBorrow = () => {
     borrow();
   };
 
-  const valid = useIsAmountWithinLimits(collateralTokenSent, '1', tokenBalance);
+  const valid = useIsAmountWithinLimits(
+    collateralTokenSent,
+    '1',
+    maxAmount !== '0' ? min(maxAmount, tokenBalance) : tokenBalance,
+  );
 
   useEffect(() => {
     dispatch(actions.changeBorrowAmount(amount));
@@ -114,9 +123,20 @@ const BorrowingContainer: React.FC<Props> = ({ currency }) => {
           </FieldGroup>
         </div>
         <div className="col-8">
-          <FieldGroup label="Collateral amount">
+          <FieldGroup
+            label={
+              <>
+                Collateral amount{' '}
+                {maxAmount !== '0' && !loadingLimit && (
+                  <span className="text-muted">
+                    (Max: {weiTo4(maxAmount)} {tokenToCollarate})
+                  </span>
+                )}
+              </>
+            }
+          >
             <DummyField>
-              {weiTo4(collateralTokenSent)} {tokenToCollarate}
+              {weiToFixed(collateralTokenSent, 6)} {tokenToCollarate}
             </DummyField>
           </FieldGroup>
         </div>

diff --git a/src/app/containers/LendBorrowSovryn/LendingContainer/index.tsx b/src/app/containers/LendBorrowSovryn/LendingContainer/index.tsx
@@ -15,6 +15,7 @@ import { useLending_approveAndLend } from '../../../hooks/lending/useLending_app
 import { useLending_approveAndUnlend } from '../../../hooks/lending/useLending_approveAndUnlend';
 import { actions } from '../slice';
 import { useDispatch } from 'react-redux';
+import { min } from 'mathjs';
 
 type Props = {
   currency: Asset;
@@ -36,11 +37,15 @@ const LendingContainer: React.FC<Props> = ({ currency }) => {
     currency as Asset,
     useAccount(),
   );
+  const {
+    value: maxAmount,
+    loading: loadingLimit,
+  } = useLending_transactionLimit(currency, currency);
 
   const onMaxChange = (type: string) => {
     let amount = '0';
     if (type === 'Deposit') {
-      amount = userBalance;
+      amount = min(userBalance, maxAmount);
     } else if (type === 'Withdraw') {
       amount = depositedBalance;
     }
@@ -78,8 +83,6 @@ const LendingContainer: React.FC<Props> = ({ currency }) => {
     }
   }, [unlendTx.loading, unlend]);
 
-  const { value: maxAmount } = useLending_transactionLimit(currency, currency);
-
   const valid = useIsAmountWithinLimits(
     weiAmount,
     '1',
@@ -115,6 +118,7 @@ const LendingContainer: React.FC<Props> = ({ currency }) => {
       currency={currency}
       amountName="Deposit Amount"
       maxValue={maxAmount}
+      loadingLimit={loadingLimit}
     />
   );
 };

diff --git a/src/app/containers/LendBorrowSovryn/components/Amount/index.tsx b/src/app/containers/LendBorrowSovryn/components/Amount/index.tsx
@@ -13,6 +13,7 @@ type Props = {
   currency: string;
   minValue?: number | string;
   maxValue?: number | string;
+  loadingLimit?: boolean;
 };
 
 const Amount: React.FC<Props> = ({
@@ -23,27 +24,30 @@ const Amount: React.FC<Props> = ({
   onChangeAmount,
   amountValue,
   onMaxChange,
+  loadingLimit,
 }) => {
   return (
     <div className="d-flex flex-row justify-content-between mb-3">
       <div className="d-flex flex-grow-1 flex-column">
-        <FieldGroup label={amountName}>
+        <FieldGroup
+          label={
+            <>
+              {amountName}{' '}
+              {maxValue !== '0' && !loadingLimit && (
+                <span className="text-muted">
+                  (Max: {weiTo4(maxValue)} {currency})
+                </span>
+              )}
+            </>
+          }
+        >
           <AmountField
             onChange={onChangeAmount}
             value={amountValue}
             onMaxClicked={() => onMaxChange()}
           />
         </FieldGroup>
       </div>
-      {maxValue !== '0' && maxValue !== '' && (
-        <div className="d-flex flex-column min-max-btc p-3 align-items-center justify-content-center">
-          <div>Max:</div>
-          <div>
-            <span className="text-muted">{currency}</span>{' '}
-            <strong>{weiTo4(maxValue)}</strong>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

diff --git a/src/app/containers/LendBorrowSovryn/components/TabContainer/index.tsx b/src/app/containers/LendBorrowSovryn/components/TabContainer/index.tsx
@@ -20,6 +20,7 @@ type Props = {
   currency: Asset;
   amountName: string;
   maxValue: string;
+  loadingLimit: boolean;
   minValue?: string;
   amountValue: string;
   leftButton: string;
@@ -57,6 +58,7 @@ const TabContainer: React.FC<Props> = ({
   txState,
   onMaxChange,
   setBorrowAmount,
+  loadingLimit,
 }) => {
   const [currentButton, setCurrentButton] = useState(leftButton);
   return (
@@ -74,7 +76,8 @@ const TabContainer: React.FC<Props> = ({
         onMaxChange={() => onMaxChange(currentButton)}
         currency={currency}
         amountName={amountName}
-        maxValue={maxValue}
+        maxValue={currentButton === 'Deposit' ? maxValue : '0'}
+        loadingLimit={loadingLimit}
       />
       <AccountBalance
         title={currentButton}

diff --git a/src/app/containers/LiquidityRemoveContainer/index.tsx b/src/app/containers/LiquidityRemoveContainer/index.tsx
@@ -24,15 +24,15 @@ import { FieldGroup } from '../../components/FieldGroup';
 import { AmountField } from '../AmountField';
 import { TradeButton } from '../../components/TradeButton';
 import { useApproveAndRemoveLiquidity } from '../../hooks/amm/useApproveAndRemoveLiquidity';
-import { useCanInteract } from 'app/hooks/useCanInteract';
+import { useIsConnected } from '../../hooks/useAccount';
 
 interface Props {}
 
 export function LiquidityRemoveContainer(props: Props) {
-  const isConnected = useCanInteract();
+  const isConnected = useIsConnected();
   const tokens = liquidityPools.map(item => ({
     key: item.source,
-    label: item.tokenLabel,
+    label: `${item.tokenLabel} - Pool token`,
   }));
 
   const [sourceToken, setSourceToken] = useState(tokens[0].key);

diff --git a/src/app/containers/MarginTradeForm/index.tsx b/src/app/containers/MarginTradeForm/index.tsx
@@ -24,10 +24,12 @@ import { TradeButton } from '../../components/TradeButton';
 import { SendTxProgress } from '../../components/SendTxProgress';
 import { useApproveAndTrade } from '../../hooks/trading/useApproveAndTrade';
 import { useIsAmountWithinLimits } from '../../hooks/useIsAmountWithinLimits';
-import { weiTo18 } from '../../../utils/blockchain/math-helpers';
+import { weiTo18, weiTo4 } from '../../../utils/blockchain/math-helpers';
 import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
 import { AssetsDictionary } from '../../../utils/blockchain/assets-dictionary';
 import { useCanInteract } from 'app/hooks/useCanInteract';
+import { useLending_transactionLimit } from '../../hooks/lending/useLending_transactionLimit';
+import { min } from 'mathjs';
 
 const s = translations.marginTradeForm;
 
@@ -71,11 +73,19 @@ export function MarginTradeForm(props: Props) {
   );
 
   const { value: tokenBalance } = useAssetBalanceOf(collateral);
-  // const { value: maxAmount } = useLending_transactionLimit(
-  //   pair.getAssetForPosition(position),
-  //   collateral,
-  // );
-  const valid = useIsAmountWithinLimits(weiAmount, '1', tokenBalance);
+  const {
+    value: maxAmount,
+    loading: loadingLimit,
+  } = useLending_transactionLimit(
+    pair.getAssetForPosition(position),
+    collateral,
+  );
+
+  const valid = useIsAmountWithinLimits(
+    weiAmount,
+    '1',
+    maxAmount !== '0' ? min(tokenBalance, maxAmount) : tokenBalance,
+  );
 
   return (
     <>
@@ -122,7 +132,19 @@ export function MarginTradeForm(props: Props) {
             </FieldGroup>
           </div>
           <div className="col-6 pl-1">
-            <FieldGroup label={t(s.fields.amount)} labelColor={color}>
+            <FieldGroup
+              label={
+                <>
+                  {t(s.fields.amount)}{' '}
+                  {maxAmount !== '0' && !loadingLimit && (
+                    <span className="text-muted">
+                      (Max: {weiTo4(maxAmount)} {collateral})
+                    </span>
+                  )}
+                </>
+              }
+              labelColor={color}
+            >
               <AmountField
                 onChange={value => setAmount(value)}
                 onMaxClicked={() => setAmount(weiTo18(tokenBalance))}

diff --git a/src/app/containers/RepayPositionHandler/RepayPositionForm.tsx b/src/app/containers/RepayPositionHandler/RepayPositionForm.tsx
@@ -6,7 +6,7 @@
 
 import React, { useCallback, useState } from 'react';
 import { min, bignumber } from 'mathjs';
-import { useAccount } from '../../hooks/useAccount';
+import { useAccount, useIsConnected } from '../../hooks/useAccount';
 import { useIsAmountWithinLimits } from '../../hooks/useIsAmountWithinLimits';
 import { ActiveLoan } from '../../hooks/trading/useGetLoan';
 import { useWeiAmount } from '../../hooks/useWeiAmount';
@@ -20,14 +20,13 @@ import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
 import { weiTo18, weiTo4 } from '../../../utils/blockchain/math-helpers';
 import { DummyField } from '../../components/DummyField';
 import { useApproveAndCloseWithDeposit } from '../../hooks/trading/useApproveAndCloseWithDeposit';
-import { useCanInteract } from '../../hooks/useCanInteract';
 
 interface Props {
   loan: ActiveLoan;
 }
 
 export function RepayPositionForm({ loan }: Props) {
-  const canInteract = useCanInteract();
+  const canInteract = useIsConnected();
   const { asset } = AssetsDictionary.getByTokenContractAddress(loan.loanToken);
 
   const { value: balance } = useAssetBalanceOf(asset);

diff --git a/src/app/containers/SwapTradeForm/index.tsx b/src/app/containers/SwapTradeForm/index.tsx
@@ -168,7 +168,11 @@ export function SwapTradeForm(props: Props) {
           text={t(s.buttons.submit)}
           onClick={() => send()}
           disabled={
-            !isConnected || tx.loading || amount <= '0' || rateByPath <= '0'
+            !isConnected ||
+            tx.loading ||
+            amount <= '0' ||
+            rateByPath <= '0' ||
+            targetToken === sourceToken
           }
           loading={tx.loading}
           textColor={color}

diff --git a/src/store/global/events-store/slice.ts b/src/store/global/events-store/slice.ts
@@ -44,9 +44,6 @@ const slice = createSlice({
       >,
     ) {
       prepareEventDataState(state, payload);
-
-      console.log('got events', payload);
-
       const proxy =
         state[payload.address][payload.contractName][payload.eventName];