CP-13209: Add health score, safety checks & zero LTV handling

packages/core-mobile/app/new/features/approval/components/SpendLimits/SpendLimitOptions.tsx

@@ -129,7 +129,10 @@ export const SpendLimitOptions = ({
   )
 
   return (
-    <DropdownMenu onPressAction={onPressAction} groups={menuItems}>
+    <DropdownMenu
+      onPressAction={onPressAction}
+      groups={menuItems}
+      style={{ flexDirection: 'row', alignItems: 'center' }}>
       <View
         style={{
           flexDirection: 'row',
@@ -139,22 +142,14 @@ export const SpendLimitOptions = ({
           variant="body1"
           numberOfLines={1}
           sx={{
-            ...sharedValueStyle,
-            flexGrow: 1,
-            width: '45%',
-            textAlign: 'right'
+            ...sharedValueStyle
           }}>
-          {displayValue}
+          {displayValue} {token.symbol}
         </Text>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Text variant="body1" sx={sharedValueStyle}>
-            {' ' + token.symbol}
-          </Text>
-          <Icons.Navigation.ChevronRight
-            color={colors.$textSecondary}
-            style={{ marginRight: -8 }}
-          />
-        </View>
+        <Icons.Navigation.ChevronRight
+          color={colors.$textSecondary}
+          style={{ marginRight: -8 }}
+        />
       </View>
     </DropdownMenu>
   )

packages/core-mobile/app/new/features/defiMarket/abis/benqiComptroller.ts

@@ -159,5 +159,36 @@ export const BENQI_COMPTROLLER_ABI = [
     payable: false,
     stateMutability: 'view',
     type: 'function'
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'qToken',
+        type: 'address'
+      }
+    ],
+    name: 'markets',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: 'isListed',
+        type: 'bool'
+      },
+      {
+        internalType: 'uint256',
+        name: 'collateralFactorMantissa',
+        type: 'uint256'
+      },
+      {
+        internalType: 'bool',
+        name: 'isQied',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function'
   }
 ] as const

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

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
 import { Icons, Image, Text, useTheme, View } from '@avalabs/k2-alpine'
-import { TouchableOpacity } from 'react-native-gesture-handler'
 import { DropdownGroup, DropdownMenu } from 'common/components/DropdownMenu'
 import { MarketName, MarketNames } from '../types'
 import { useSelectedBorrowProtocol } from '../hooks/useBorrowProtocol'
@@ -50,32 +49,33 @@ export const BorrowProtocolSelector = (): React.JSX.Element => {
     <View sx={{ flexDirection: 'row', alignItems: 'center' }}>
       <Text variant="heading2">Borrow on </Text>
       <DropdownMenu groups={dropdownGroups} onPressAction={handlePressAction}>
-        <TouchableOpacity>
-          <View
-            sx={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              backgroundColor: '$surfaceSecondary',
-              paddingVertical: 6,
-              paddingLeft: 8,
-              paddingRight: 4,
-              borderRadius: 20,
-              gap: 6
-            }}>
-            <Image
-              source={PROTOCOL_LOGOS[selectedProtocol]}
-              style={{ width: 28, height: 28, borderRadius: 14 }}
-            />
-            <Text variant="heading2">
-              {PROTOCOL_DISPLAY_NAMES[selectedProtocol]}
-            </Text>
-            <Icons.Navigation.ExpandMore
-              width={24}
-              height={24}
-              color={theme.colors.$textSecondary}
-            />
-          </View>
-        </TouchableOpacity>
+        <View
+          sx={{
+            marginTop: -4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: '$surfaceSecondary',
+            paddingTop: 6,
+            paddingBottom: 2,
+            paddingLeft: 8,
+            paddingRight: 6,
+            borderRadius: 100,
+            gap: 6
+          }}>
+          <Image
+            source={PROTOCOL_LOGOS[selectedProtocol]}
+            style={{ width: 27, height: 27, borderRadius: 14, marginTop: -4 }}
+          />
+          <Text variant="heading2">
+            {PROTOCOL_DISPLAY_NAMES[selectedProtocol]}
+          </Text>
+          <Icons.Navigation.ExpandMore
+            style={{ marginTop: -2 }}
+            width={24}
+            height={24}
+            color={theme.colors.$textSecondary}
+          />
+        </View>
       </DropdownMenu>
     </View>
   )

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from '@avalabs/k2-alpine'
+import { useTheme, View } from '@avalabs/k2-alpine'
 import { DefiMarket } from '../types'
 import { DefiAssetLogo } from './DefiAssetLogo'
 import { DefiMarketLogo } from './DefiMarketLogo'
@@ -8,30 +8,38 @@ export const DefiMarketAssetLogo = ({
   market,
   logoWidth = 62,
   networkLogoWidth = 20,
-  overwrappingWidth = 20
+  overwrappingWidth = 20,
+  borderColor: borderColorProp
 }: {
   market: DefiMarket
   logoWidth?: number
   networkLogoWidth?: number
   overwrappingWidth?: number
+  borderColor?: string
 }): JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
+  const borderColor = borderColorProp ?? colors.$surfaceSecondary
+
   return (
     <View sx={{ flexDirection: 'row', alignItems: 'center' }}>
       <DefiAssetLogo asset={market.asset} width={logoWidth} />
       <View
         sx={{
-          marginLeft: -overwrappingWidth,
-          borderWidth: 2,
-          borderRadius: logoWidth / 2,
-          borderColor: '$surfaceSecondary'
+          marginLeft: -overwrappingWidth
         }}>
         <DefiMarketLogo
           marketName={market.marketName}
           networkLogoUri={market.network.logoUri}
-          width={logoWidth}
+          width={logoWidth + BORDER_WIDTH * 2}
           networkLogoWidth={networkLogoWidth}
+          borderColor={borderColor}
+          borderWidth={BORDER_WIDTH}
         />
       </View>
     </View>
   )
 }
+
+const BORDER_WIDTH = 2

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

@@ -8,21 +8,24 @@ type DefiMarketLogoProps = {
   networkLogoUri?: string
   width?: number
   networkLogoWidth?: number
+  borderWidth?: number
+  borderColor?: string
 }
 
 export const DefiMarketLogo = ({
   marketName,
   networkLogoUri,
   width = 36,
-  networkLogoWidth = 18
+  networkLogoWidth = 18,
+  borderWidth = 2,
+  borderColor: borderColorProp
 }: DefiMarketLogoProps): React.JSX.Element => {
   const {
     theme: { colors }
   } = useTheme()
-  const borderColor = colors.$surfaceSecondary
+  const borderColor = borderColorProp ?? colors.$surfaceSecondary
 
   const networkLogoInset = -4
-  const borderWidth = 2
 
   const isAave =
     marketName === MarketNames.aave || marketName.toLowerCase() === 'aave'
@@ -38,7 +41,10 @@ export const DefiMarketLogo = ({
         style={{
           width: width,
           height: width,
-          borderRadius: width / 2
+          borderRadius: width / 2,
+          borderWidth,
+          borderColor,
+          backgroundColor: borderColor
         }}
         testID={`protocol_logo__${marketName}`}
       />

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

@@ -3,23 +3,43 @@ import { Card, Text, useTheme, View } from '@avalabs/k2-alpine'
 import {
   formatHealthScore,
   getHealthRisk,
-  getHealthRiskColor
+  HealthRisk
 } from '../utils/healthRisk'
 
+const useScoreColor = (score: number | undefined): string => {
+  const { theme } = useTheme()
+  if (score === undefined || Number.isNaN(score)) {
+    return theme.colors.$textSecondary
+  }
+  const risk = getHealthRisk(score)
+  if (risk === HealthRisk.HIGH) return theme.colors.$textDanger
+  if (risk === HealthRisk.LOW) return theme.colors.$textSuccess
+  return theme.colors.$textPrimary
+}
+
 export const HealthScoreCard = ({
-  score
+  score,
+  currentScore
 }: {
   score: number | undefined
+  currentScore?: number | undefined
 }): JSX.Element => {
-  const { theme } = useTheme()
+  const projectedColor = useScoreColor(score)
+  const currentColor = useScoreColor(currentScore)
+
+  const formattedCurrent =
+    currentScore !== undefined && !Number.isNaN(currentScore)
+      ? formatHealthScore(currentScore, { fractionDigits: 2 })
+      : undefined
+  const formattedProjected =
+    score !== undefined
+      ? formatHealthScore(score, { fractionDigits: 2 })
+      : undefined
 
-  const color =
-    score === undefined || Number.isNaN(score)
-      ? theme.colors.$textSecondary
-      : getHealthRiskColor({
-          risk: getHealthRisk(score),
-          colors: theme.colors
-        })
+  const showTransition =
+    formattedCurrent !== undefined &&
+    formattedProjected !== undefined &&
+    formattedCurrent !== formattedProjected
 
   return (
     <Card sx={{ padding: 16 }}>
@@ -34,14 +54,31 @@ export const HealthScoreCard = ({
           Health score
         </Text>
         <View sx={{ flex: 1, alignItems: 'flex-end', gap: 2 }}>
-          <Text
-            variant="body1"
-            sx={{
-              color,
-              fontWeight: 500
-            }}>
-            {formatHealthScore(score, { fractionDigits: 2 })}
-          </Text>
+          {showTransition ? (
+            <View sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Text
+                variant="body1"
+                sx={{ color: currentColor, fontWeight: 500 }}>
+                {formattedCurrent}
+              </Text>
+              <Text
+                variant="body1"
+                sx={{ color: '$textSecondary', fontWeight: 500 }}>
+                →
+              </Text>
+              <Text
+                variant="body1"
+                sx={{ color: projectedColor, fontWeight: 500 }}>
+                {formattedProjected}
+              </Text>
+            </View>
+          ) : (
+            <Text
+              variant="body1"
+              sx={{ color: projectedColor, fontWeight: 500 }}>
+              {formattedProjected}
+            </Text>
+          )}
           <Text variant="caption" sx={{ color: '$textSecondary' }}>
             Liquidation at {'<'}1.0
           </Text>