Bugfix/withdraw convert issues (#1291)

* fix: portfolio issues * fix: leveraged liquidity issues
notional-finance · Dec 9, 2024 · ba12204 · ba12204
1 parent 5fca013
commit ba12204
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 23 deletions.
diff --git a/packages/core-entities/src/models/views/YieldViews.ts b/packages/core-entities/src/models/views/YieldViews.ts
@@ -344,7 +344,8 @@ export const YieldViews = (self: Instance<typeof NetworkModel>) => {
         netAmount.unwrapVaultToken().neg()
       );
       apyData.organicAPY =
-        100 * market.getPrimeDebtRate(apyData.utilization) || 0;
+        100 * (market.getPrimeDebtRate(apyData.utilization) / RATE_PRECISION) ||
+        0;
       if (
         netAmount.token.tokenType === 'VaultDebt' &&
         netAmount.maturity === PRIME_CASH_VAULT_MATURITY &&

diff --git a/packages/features/portfolio/src/side-drawers/convert-asset.tsx b/packages/features/portfolio/src/side-drawers/convert-asset.tsx
@@ -13,7 +13,7 @@ import { useParams } from 'react-router';
 import { PortfolioParams } from '../portfolio-feature-shell';
 import { observer } from 'mobx-react-lite';
 
-const ConvertCollateral = () => {
+const ConvertCollateral = observer(() => {
   const params = useParams<PortfolioParams>();
   const context = useTradeContext('ConvertAsset');
   const { currencyInputRef } = useCurrencyInputRef();
@@ -60,7 +60,7 @@ const ConvertCollateral = () => {
       )}
     </DrawerTransition>
   );
-};
+});
 
 export const ConvertAsset = observer(() => {
   // This is here to set the trade context

diff --git a/packages/features/portfolio/src/side-drawers/cool-down-drawer.tsx b/packages/features/portfolio/src/side-drawers/cool-down-drawer.tsx
@@ -23,8 +23,9 @@ import {
   useWalletStore,
 } from '@notional-finance/notionable-hooks';
 import { SNOTEWeightedPool } from '@notional-finance/core-entities';
+import { observer } from 'mobx-react-lite';
 
-export const CoolDownDrawer = () => {
+export const CoolDownDrawer = observer(() => {
   const theme = useTheme();
   const account = useAccountDefinition(Network.mainnet);
   const { userWallet, submitTxn, transactionStatus, transactionHash } =
@@ -171,7 +172,7 @@ export const CoolDownDrawer = () => {
       </Button>
     </Box>
   );
-};
+});
 
 const ContentBox = styled(Box)(
   ({ theme }) => `

diff --git a/packages/features/portfolio/src/side-drawers/deleverage.tsx b/packages/features/portfolio/src/side-drawers/deleverage.tsx
@@ -6,8 +6,9 @@ import { defineMessage } from 'react-intl';
 import { Box, useTheme } from '@mui/material';
 import { useDeleverageLabels } from './hooks/use-deleverage-labels';
 import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
 
-export const Deleverage = () => {
+export const Deleverage = observer(() => {
   const theme = useTheme();
   useTradeContext('Deleverage');
   // This defines which input field is "controlling" the other
@@ -63,4 +64,4 @@ export const Deleverage = () => {
       </Box>
     </PortfolioSideDrawer>
   );
-};
+});
diff --git a/packages/features/portfolio/src/side-drawers/repay-debt.tsx b/packages/features/portfolio/src/side-drawers/repay-debt.tsx
@@ -10,8 +10,9 @@ import { useTradeContext } from '@notional-finance/notionable-hooks';
 import { useLocation, useParams } from 'react-router';
 import { PortfolioParams } from '@notional-finance/notionable-hooks';
 import { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
 
-export const RepayDebt = () => {
+export const RepayDebt = observer(() => {
   const context = useTradeContext('RepayDebt');
   const { category, sideDrawerKey } = useParams<PortfolioParams>();
   const { pathname } = useLocation();
@@ -34,7 +35,6 @@ export const RepayDebt = () => {
   return (
     <PortfolioSideDrawer requiredApprovalAmount={requiredApprovalAmount}>
       <PortfolioHoldingSelect
-        context={context}
         inputLabel={messages[PORTFOLIO_ACTIONS.REPAY_DEBT]['inputLabel']}
       />
       <DepositInput
@@ -49,4 +49,4 @@ export const RepayDebt = () => {
       />
     </PortfolioSideDrawer>
   );
-};
+});
diff --git a/packages/features/portfolio/src/side-drawers/withdraw.tsx b/packages/features/portfolio/src/side-drawers/withdraw.tsx
@@ -16,8 +16,9 @@ import { messages } from './messages';
 import { FormattedMessage } from 'react-intl';
 import { useEffect } from 'react';
 import { TableActionRowWarning } from '../components';
+import { observer } from 'mobx-react-lite';
 
-export const Withdraw = () => {
+export const Withdraw = observer(() => {
   const context = useTradeContext('Withdraw');
   const { category, sideDrawerKey } = useParams<PortfolioParams>();
   const { pathname } = useLocation();
@@ -44,7 +45,6 @@ export const Withdraw = () => {
     <PortfolioSideDrawer isWithdraw>
       <PortfolioHoldingSelect
         isWithdraw
-        context={context}
         inputLabel={messages[PORTFOLIO_ACTIONS.WITHDRAW]['inputLabelTwo']}
       />
       <DepositInput
@@ -69,4 +69,4 @@ export const Withdraw = () => {
       )}
     </PortfolioSideDrawer>
   );
-};
+});
diff --git a/packages/notionable/src/stores/trades/TradeModel.ts b/packages/notionable/src/stores/trades/TradeModel.ts
@@ -272,12 +272,16 @@ export const TradeModel = types
       category: Category,
       tradeType?: AllTradeTypes
     ) => {
+      if (category === 'Collateral' && self.collateral) return self.collateral;
+      if (category === 'Debt' && self.debt) return self.debt;
+      if (category === 'Deposit' && self.deposit) return self.deposit;
+
       if (availableTokens.length === 1) {
         return availableTokens[0];
       } else if (selectedToken === undefined) {
         return getDefaultTokens(availableTokens, category, tradeType);
       } else {
-        return availableTokens.find((t) => t.symbol === selectedToken);
+        return availableTokens.find((t) => t.id === selectedToken);
       }
     };
 
@@ -425,7 +429,10 @@ export const TradeModel = types
             };
           })
         );
-      } else if (self.tradeType === 'BorrowFixed') {
+      } else if (
+        self.tradeType === 'BorrowFixed' ||
+        self.tradeType === 'LeveragedNToken'
+      ) {
         self.debtOptions.replace(
           self.availableDebtTokens.map((t) => ({
             token: t,
@@ -549,6 +556,7 @@ export const TradeModel = types
         self.defaultLeverageRatio = l.defaultLeverageRatio;
         self.minLeverageRatio = l.minLeverageRatio;
         self.maxLeverageRatio = l.maxLeverageRatio;
+        // TODO: set the default leverage ratio here
       } else if (isLeveragedTrade(self.tradeType)) {
         const l = root()
           .getNetworkClient(self.selectedNetwork)
@@ -559,6 +567,8 @@ export const TradeModel = types
         self.defaultLeverageRatio = l.defaultLeverageRatio;
         self.minLeverageRatio = l.minLeverageRatio;
         self.maxLeverageRatio = l.maxLeverageRatio;
+        // TODO: set the default leverage ratio here
+        self.leverageRatio = l.defaultLeverageRatio;
       }
 
       setInitialComputedOptions();

diff --git a/packages/shared/trade/src/borrow-terms/borrow-terms.tsx b/packages/shared/trade/src/borrow-terms/borrow-terms.tsx
@@ -3,8 +3,9 @@ import { useBorrowTerms } from './use-borrow-terms';
 import { Box, Checkbox, styled, useTheme } from '@mui/material';
 import { NotionalTheme } from '@notional-finance/styles';
 import { useCurrentTradeContext } from '@notional-finance/notionable-hooks';
+import { observer } from 'mobx-react-lite';
 
-export const BorrowTerms = () => {
+export const BorrowTerms = observer(() => {
   const theme = useTheme();
   const trade = useCurrentTradeContext();
   const { debt } = trade?.selectedTokens || {};
@@ -79,7 +80,7 @@ export const BorrowTerms = () => {
       })}
     </div>
   );
-};
+});
 
 const BorrowTermsButton = styled(Box, {
   shouldForwardProp: (prop: string) => prop !== 'isSelected',

diff --git a/packages/shared/trade/src/portfolio-holding-select/portfolio-holding-select.tsx b/packages/shared/trade/src/portfolio-holding-select/portfolio-holding-select.tsx
@@ -2,34 +2,31 @@ import { AssetSelectDropdown } from '@notional-finance/mui';
 import { useCallback } from 'react';
 import { MessageDescriptor } from 'react-intl';
 import {
-  BaseTradeContext,
   usePrimeDebt,
   usePrimeCash,
   useCurrentNetworkAccount,
+  useCurrentTradeContext,
 } from '@notional-finance/notionable-hooks';
 import { useLocation, useParams, useNavigate } from 'react-router-dom';
 import { Box, useTheme } from '@mui/material';
 import { useAppStore } from '@notional-finance/notionable-hooks';
 
 interface PortfolioHoldingSelectProps {
-  context: BaseTradeContext;
   inputLabel: MessageDescriptor;
   isWithdraw?: boolean;
   errorMsg?: MessageDescriptor;
   tightMarginTop?: boolean;
 }
 
 export const PortfolioHoldingSelect = ({
-  context,
   inputLabel,
   tightMarginTop,
   isWithdraw,
 }: PortfolioHoldingSelectProps) => {
   const { baseCurrency } = useAppStore();
   const theme = useTheme();
-  const {
-    state: { collateral, debt, deposit },
-  } = context;
+  const trade = useCurrentTradeContext();
+  const { collateral, debt, deposit } = trade?.selectedTokens ?? {};
   const selectedToken = isWithdraw ? debt : collateral;
   const { pathname } = useLocation();
   const navigate = useNavigate();