CP-13150: Fix bugs on inapp defi (#3506)

Author: onghwan

packages/core-mobile/app/new/common/components/ListScreen.tsx

@@ -321,7 +321,7 @@ export const ListScreen = <T,>({
       <Animated.View style={[animatedHeaderContainerStyle]}>
         <View
           style={{
-            paddingTop: renderHeader ? headerHeight + 16 : headerHeight,
+            paddingTop: headerHeight + 16,
             paddingBottom: renderHeader ? 12 : 0
           }}>
           <Animated.View

packages/core-mobile/app/new/features/defiMarket/components/RewardsBanner.tsx

@@ -28,18 +28,22 @@ export const RewardsBanner = ({
   const { totalRewardsFiat, rewards } = availableRewards
 
   const formattedTotalRewardsFiat = useMemo(() => {
-    if (exchangeRate !== undefined) {
-      const amountInCurrency = totalRewardsFiat.toNumber() * exchangeRate
-      if (amountInCurrency < MINIMUM_DISPLAY_AMOUNT) {
-        return `Less than ${formatCurrency({ amount: MINIMUM_DISPLAY_AMOUNT })}`
-      }
+    const baseAmount = totalRewardsFiat.toNumber()
+    const hasExchangeRate = exchangeRate !== undefined
+    const amountInCurrency = hasExchangeRate
+      ? baseAmount * exchangeRate
+      : baseAmount
 
-      return formatCurrency({
-        amount: amountInCurrency
-      })
+    if (amountInCurrency < MINIMUM_DISPLAY_AMOUNT) {
+      return `Less than ${formatCurrency({ amount: MINIMUM_DISPLAY_AMOUNT })}`
     }
+
+    if (hasExchangeRate) {
+      return formatCurrency({ amount: amountInCurrency })
+    }
+
     return rawFormatCurrency({
-      amount: totalRewardsFiat.toNumber(),
+      amount: amountInCurrency,
       currency: 'USD',
       boostSmallNumberPrecision: false
     })

packages/core-mobile/app/new/features/defiMarket/hooks/useDepositableTokens.ts

@@ -10,43 +10,51 @@ export const useDepositableTokens = (
   return useMemo(() => {
     const uniqueAssets = new Map<string, DefiAssetDetails>()
 
-    markets.forEach(market => {
-      const asset = market.asset
-      // Use contractAddress if available, otherwise use lowercase symbol
-      const key = asset.contractAddress ?? asset.symbol.toLowerCase()
-
-      // Only add if not already in map (keeps first occurrence)
-      if (!uniqueAssets.has(key)) {
-        uniqueAssets.set(key, asset)
-      }
-    })
-
-    return Array.from(uniqueAssets.values()).sort((a, b) => {
-      if (a.symbol.toLowerCase() === 'avax') return -1
-      if (b.symbol.toLowerCase() === 'avax') return 1
-
-      const tokenWithBalanceA = findMatchingTokenWithBalance(
-        a,
-        tokensWithBalance
-      )
-      const tokenWithBalanceB = findMatchingTokenWithBalance(
-        b,
-        tokensWithBalance
-      )
-
-      if (
-        tokenWithBalanceA?.balanceInCurrency &&
-        tokenWithBalanceB?.balanceInCurrency
-      ) {
-        return (
-          tokenWithBalanceB.balanceInCurrency -
-          tokenWithBalanceA.balanceInCurrency
-        )
-      }
-      if (tokenWithBalanceA?.balanceInCurrency) return -1
-      if (tokenWithBalanceB?.balanceInCurrency) return 1
-
-      return a.symbol.toLowerCase().localeCompare(b.symbol.toLowerCase())
-    })
+    markets
+      .filter(market => market.supplyCapReached === false)
+      .forEach(market => {
+        const asset = market.asset
+        const key = asset.contractAddress ?? asset.symbol.toLowerCase()
+
+        if (!uniqueAssets.has(key)) {
+          uniqueAssets.set(key, asset)
+        }
+      })
+
+    return Array.from(uniqueAssets.values()).sort((a, b) =>
+      sortByPriority(a, b, tokensWithBalance)
+    )
   }, [markets, tokensWithBalance])
 }
+
+const sortByPriority = (
+  a: DefiAssetDetails,
+  b: DefiAssetDetails,
+  tokensWithBalance: LocalTokenWithBalance[]
+): number => {
+  // AVAX always comes first
+  if (a.symbol.toLowerCase() === 'avax') return -1
+  if (b.symbol.toLowerCase() === 'avax') return 1
+
+  const tokenA = findMatchingTokenWithBalance(a, tokensWithBalance)
+  const tokenB = findMatchingTokenWithBalance(b, tokensWithBalance)
+
+  // Sort by fiat balance (descending)
+  if (tokenA?.balanceInCurrency && tokenB?.balanceInCurrency) {
+    return tokenB.balanceInCurrency - tokenA.balanceInCurrency
+  }
+  if (tokenA?.balanceInCurrency) return -1
+  if (tokenB?.balanceInCurrency) return 1
+
+  // Sort by token balance (descending)
+  if (tokenA?.balance !== undefined && tokenB?.balance !== undefined) {
+    if (tokenB.balance > tokenA.balance) return 1
+    if (tokenB.balance < tokenA.balance) return -1
+    return 0
+  }
+  if (tokenA?.balance !== undefined) return -1
+  if (tokenB?.balance !== undefined) return 1
+
+  // Sort alphabetically
+  return a.symbol.toLowerCase().localeCompare(b.symbol.toLowerCase())
+}

packages/core-mobile/app/new/features/defiMarket/screens/DepositDetailScreen.tsx

@@ -106,12 +106,11 @@ export function DepositDetailScreen(): JSX.Element {
         }}>
         <View
           sx={{
-            maxWidth: 280,
             flexDirection: 'row',
             gap: 12
           }}>
           {data.map((item, index) => (
-            <View key={index} sx={{ flex: 1 }}>
+            <View key={index} sx={{ flex: index === 2 ? 0.8 : 0.5 }}>
               <Text variant="heading5" sx={{ color: '$textPrimary' }}>
                 {item.value}
               </Text>

packages/core-mobile/app/new/features/defiMarket/screens/deposit/SelectAssetScreen.tsx

@@ -13,7 +13,6 @@ import { ErrorState } from 'common/components/ErrorState'
 import { useFormatCurrency } from 'common/hooks/useFormatCurrency'
 import { UNKNOWN_AMOUNT } from 'consts/amount'
 import { useRouter } from 'expo-router'
-import { useBuy } from 'features/meld/hooks/useBuy'
 import { useNavigateToSwap } from 'features/swap/hooks/useNavigateToSwap'
 import { AVAX_TOKEN_ID } from 'common/consts/swap'
 import useCChainNetwork from 'hooks/earn/useCChainNetwork'
@@ -46,7 +45,6 @@ export const SelectAssetScreen = (): JSX.Element => {
     theme: { colors }
   } = useTheme()
   const { formatCurrency } = useFormatCurrency()
-  const { navigateToBuy, isBuyable } = useBuy()
   const { navigateToSwap } = useNavigateToSwap()
   const [, setSelectedAsset] = useDepositSelectedAsset()
 
@@ -70,23 +68,11 @@ export const SelectAssetScreen = (): JSX.Element => {
             symbol: marketAsset.symbol
           }
         })
-      } else if (isBuyable(undefined, marketAsset.contractAddress)) {
-        navigateToBuy({
-          showAvaxWarning: true,
-          address: marketAsset.contractAddress
-        })
       } else {
         navigateToSwap(AVAX_TOKEN_ID, marketAsset.contractAddress)
       }
     },
-    [
-      navigate,
-      navigateToBuy,
-      isBuyable,
-      navigateToSwap,
-      cChainTokensWithBalance,
-      setSelectedAsset
-    ]
+    [navigate, navigateToSwap, cChainTokensWithBalance, setSelectedAsset]
   )
 
   const renderItem = useCallback(
@@ -134,7 +120,10 @@ export const SelectAssetScreen = (): JSX.Element => {
               type="secondary"
               size="small"
               onPress={() => handleSelectToken(item)}>
-              {tokenWithBalance?.balanceInCurrency ? 'Deposit' : 'Buy'}
+              {tokenWithBalance?.balance !== undefined &&
+              tokenWithBalance.balance > 0n
+                ? 'Deposit'
+                : 'Buy'}
             </Button>
           </View>
         </TouchableOpacity>