Add ResolverCard hover

app/src/components/ResolverCard.tsx

@@ -1,7 +1,9 @@
 import type { JSX } from "react";
+import { useState } from "react";
 import { Pressable, View } from "react-native";
 import { Typography } from "heroui-native";
 import type { Resolver } from "@/data/mock";
+import { MonoText } from "@/components/MonoText";
 
 interface ResolverCardProps {
   resolver: Resolver;
@@ -10,20 +12,25 @@ interface ResolverCardProps {
 }
 
 export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const borderClass = isSelected ? "border-accent" : isHovered ? "border-border-secondary" : "border-border";
+  const bgClass = isSelected ? "bg-accent/10" : "bg-surface-secondary";
+
   return (
     <Pressable
       onPress={onSelect}
-      className={`mb-1.5 rounded-xl border p-3 ${
-        isSelected ? "border-accent bg-accent/10" : "border-border bg-transparent"
-      }`}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      className={`mb-1.5 rounded-xl border p-3 ${borderClass} ${bgClass}`}
     >
       <View className="flex-row items-center justify-between">
         <Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
           {resolver.name}
         </Typography>
-        <Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
+        <MonoText weight="semibold" className={isSelected ? "text-accent" : undefined}>
           {resolver.fee}
-        </Typography>
+        </MonoText>
       </View>
       <Typography type="body-xs" color="muted" className="mt-0.5">
         {resolver.type} · {resolver.wins}% buyer-favorable