fix: thorchain lending narrow down/disable related assets (#6915)

* fix: narrow down collateral assetIds * feat: disable related asset selection when isReadOnly * feat: narrow down repaymentAssetIds * feat: make things clearer --------- Co-authored-by: woody <[email protected]>
shapeshift · May 22, 2024 · 29b01f1 · 29b01f1
1 parent b72fe62
commit 29b01f1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 24 deletions.
diff --git a/src/components/AssetSelection/AssetSelection.tsx b/src/components/AssetSelection/AssetSelection.tsx
@@ -118,6 +118,7 @@ export const TradeAssetSelect: React.FC<TradeAssetSelectProps> = memo(props => {
         assetIds={assetIds}
         onChangeAsset={handleAssetChange}
         isLoading={isLoading}
+        isDisabled={Boolean(isReadOnly)}
         buttonProps={combinedButtonProps}
         onlyConnectedChains={onlyConnectedChains}
       />

diff --git a/src/components/AssetSelection/components/AssetChainDropdown/AssetChainDropdown.tsx b/src/components/AssetSelection/components/AssetChainDropdown/AssetChainDropdown.tsx
@@ -28,10 +28,20 @@ type AssetChainDropdownProps = {
   isLoading?: boolean
   isError?: boolean
   onlyConnectedChains: boolean
+  isDisabled?: boolean
 }
 
 export const AssetChainDropdown: React.FC<AssetChainDropdownProps> = memo(
-  ({ assetId, assetIds, onChangeAsset, buttonProps, isLoading, isError, onlyConnectedChains }) => {
+  ({
+    assetId,
+    assetIds,
+    buttonProps,
+    isDisabled,
+    isError,
+    isLoading,
+    onChangeAsset,
+    onlyConnectedChains,
+  }) => {
     const {
       state: { wallet },
     } = useWallet()
@@ -77,11 +87,11 @@ export const AssetChainDropdown: React.FC<AssetChainDropdownProps> = memo(
       [onChangeAsset],
     )
 
-    const isDisabled = useMemo(() => {
-      return filteredRelatedAssetIds.length <= 1 || isLoading || isError
-    }, [filteredRelatedAssetIds, isError, isLoading])
+    const isButtonDisabled = useMemo(() => {
+      return isDisabled || filteredRelatedAssetIds.length <= 1 || isLoading || isError
+    }, [filteredRelatedAssetIds.length, isDisabled, isError, isLoading])
 
-    const isTooltipDisabled = useMemo(() => {
+    const isTooltipExplainerDisabled = useMemo(() => {
       // only render the tooltip when there are no other related assets and we're not loading and not
       // errored
       return filteredRelatedAssetIds.length > 1 || isLoading || isError
@@ -95,8 +105,11 @@ export const AssetChainDropdown: React.FC<AssetChainDropdownProps> = memo(
 
     return (
       <Menu isLazy>
-        <Tooltip isDisabled={isTooltipDisabled} label={buttonTooltipText}>
-          <MenuButton as={Button} isDisabled={isDisabled} {...buttonProps}>
+        {/* If we do have related assets (or we're loading/errored), assume everything is happy. 
+            Else if there's no related assets for that asset, display a tooltip explaining "This asset is only available on <currentChain>  
+        */}
+        <Tooltip isDisabled={isTooltipExplainerDisabled} label={buttonTooltipText}>
+          <MenuButton as={Button} isDisabled={isButtonDisabled} {...buttonProps}>
             <AssetChainRow
               assetId={assetId}
               mainImplementationAssetId={assetId}

diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
@@ -108,8 +108,16 @@ export const BorrowInput = ({
   const translate = useTranslate()
   const history = useHistory()
 
-  const { data: borrowAssets, isLoading: isLendingSupportedAssetsLoading } =
+  const { data: borrowAssets, isLoading: isSupportedBorrowAssetsLoading } =
     useLendingSupportedAssets({ type: 'borrow' })
+  const borrowAssetIds = useMemo(() => {
+    return borrowAssets?.map(borrowAsset => borrowAsset.assetId) ?? []
+  }, [borrowAssets])
+  const { data: collateralAssets, isLoading: isSupportedCollateralAssetsLoading } =
+    useLendingSupportedAssets({ type: 'borrow' })
+  const collateralAssetIds = useMemo(() => {
+    return collateralAssets?.map(collateralAsset => collateralAsset.assetId) ?? []
+  }, [collateralAssets])
 
   const usePoolDataArgs = useMemo(() => ({ poolAssetId: collateralAssetId }), [collateralAssetId])
   const { data: poolData, isLoading: isPoolDataLoading } = usePoolDataQuery(usePoolDataArgs)
@@ -120,10 +128,6 @@ export const BorrowInput = ({
 
   const isThorchainLendingBorrowEnabled = useFeatureFlag('ThorchainLendingBorrow')
 
-  const borrowAssetIds = useMemo(() => {
-    return borrowAssets?.map(borrowAsset => borrowAsset.assetId) ?? []
-  }, [borrowAssets])
-
   const collateralAsset = useAppSelector(state => selectAssetById(state, collateralAssetId))
 
   useEffect(() => {
@@ -417,12 +421,13 @@ export const BorrowInput = ({
     return (
       <TradeAssetSelect
         assetId={collateralAssetId}
+        assetIds={collateralAssetIds}
         isReadOnly
-        isLoading={isLendingSupportedAssetsLoading}
+        isLoading={isSupportedCollateralAssetsLoading}
         onlyConnectedChains={true}
       />
     )
-  }, [collateralAssetId, isLendingSupportedAssetsLoading])
+  }, [collateralAssetId, collateralAssetIds, isSupportedCollateralAssetsLoading])
 
   const borrowAssetSelectComponent = useMemo(() => {
     return (
@@ -431,7 +436,7 @@ export const BorrowInput = ({
         assetIds={borrowAssetIds}
         onAssetClick={handleBorrowAssetClick}
         onAssetChange={setBorrowAsset}
-        isLoading={isLendingSupportedAssetsLoading}
+        isLoading={isSupportedBorrowAssetsLoading}
         onlyConnectedChains={true}
       />
     )
@@ -440,7 +445,7 @@ export const BorrowInput = ({
     borrowAssetIds,
     setBorrowAsset,
     handleBorrowAssetClick,
-    isLendingSupportedAssetsLoading,
+    isSupportedBorrowAssetsLoading,
   ])
 
   const quoteErrorTranslation = useMemo(() => {

diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
@@ -318,30 +318,35 @@ export const RepayInput = ({
 
   const swapIcon = useMemo(() => <ArrowDownIcon />, [])
 
-  const { data: lendingSupportedAssets, isLoading: isLendingSupportedAssetsLoading } =
+  const { data: supportedRepaymentAssets, isLoading: isSupportedRepaymentAssetsLoading } =
     useLendingSupportedAssets({ type: 'borrow' })
+  const repaymentAssetIds = useMemo(
+    () => supportedRepaymentAssets?.map(asset => asset.assetId) ?? [],
+    [supportedRepaymentAssets],
+  )
 
   useEffect(() => {
-    if (!(lendingSupportedAssets && collateralAsset)) return
+    if (!(supportedRepaymentAssets && collateralAsset)) return
     if (repaymentAsset) return
 
     setRepaymentAsset(collateralAsset)
-  }, [collateralAsset, lendingSupportedAssets, repaymentAsset, setRepaymentAsset])
+  }, [collateralAsset, supportedRepaymentAssets, repaymentAsset, setRepaymentAsset])
 
   const buyAssetSearch = useModal('buyAssetSearch')
 
   const handleRepaymentAssetClick = useCallback(() => {
     buyAssetSearch.open({
       onAssetClick: setRepaymentAsset,
       title: 'lending.repay',
-      assets: lendingSupportedAssets ?? [],
+      assets: supportedRepaymentAssets ?? [],
     })
-  }, [buyAssetSearch, lendingSupportedAssets, setRepaymentAsset])
+  }, [buyAssetSearch, supportedRepaymentAssets, setRepaymentAsset])
 
   const repaymentAssetSelectComponent = useMemo(() => {
     return (
       <TradeAssetSelect
         assetId={repaymentAsset?.assetId ?? ''}
+        assetIds={repaymentAssetIds}
         onAssetClick={handleRepaymentAssetClick}
         onAssetChange={setRepaymentAsset}
         // Users have the possibility to repay in any supported asset, not only their collateral/borrowed asset
@@ -350,18 +355,18 @@ export const RepayInput = ({
         onlyConnectedChains={true}
       />
     )
-  }, [setRepaymentAsset, handleRepaymentAssetClick, repaymentAsset?.assetId])
+  }, [repaymentAsset?.assetId, repaymentAssetIds, handleRepaymentAssetClick, setRepaymentAsset])
 
   const collateralAssetSelectComponent = useMemo(() => {
     return (
       <TradeAssetSelect
         assetId={collateralAssetId}
         isReadOnly
-        isLoading={isLendingSupportedAssetsLoading}
+        isLoading={isSupportedRepaymentAssetsLoading}
         onlyConnectedChains={true}
       />
     )
-  }, [collateralAssetId, isLendingSupportedAssetsLoading])
+  }, [collateralAssetId, isSupportedRepaymentAssetsLoading])
 
   const handleSeenNotice = useCallback(() => setSeenNotice(true), [])