Show asset images in the asset balances list

Author: dguenther

package-lock.json

@@ -13,6 +13,7 @@ import {
   Modal,
 } from "@ui-kitten/components";
 import { StyleSheet } from "react-native";
+import { Image } from "expo-image";
 import { setStringAsync } from "expo-clipboard";
 import Animated, {
   useAnimatedScrollHandler,
@@ -270,6 +271,11 @@ export default function Balances() {
                     verified={
                       getIronAsset.data?.verification.status === "verified"
                     }
+                    image={
+                      getIronAsset.data?.verification.status === "verified"
+                        ? getIronAsset.data.verification.logoURI
+                        : undefined
+                    }
                   />
 
                   {/* Custom Assets */}
@@ -292,6 +298,11 @@ export default function Balances() {
                             : undefined,
                         )}
                         verified={asset?.verification.status === "verified"}
+                        image={
+                          asset?.verification.status === "verified"
+                            ? asset.verification.logoURI
+                            : undefined
+                        }
                       />
                     );
                   })}
@@ -329,15 +340,19 @@ function AssetRow({
   name,
   amount,
   verified,
+  image,
 }: {
   name: string;
   amount: string;
   verified: boolean;
+  image?: string;
 }) {
   return (
     <Card style={styles.assetCard}>
       <Layout style={styles.assetCardContent}>
-        <Layout style={styles.assetBadge} />
+        <Layout style={styles.assetBadge}>
+          <Image source={image} style={styles.assetBadge} />
+        </Layout>
         <Layout style={styles.assetInfo}>
           <Text category="s1">
             {name} {verified ? "(Verified)" : ""}

packages/mobile-app/app/(tabs)/index.tsx

@@ -17,7 +17,7 @@ export interface SerializedVerifiedAssetMetadata {
   updated_at: string;
   symbol: string;
   decimals?: number;
-  logo_uri?: string;
+  logoURI?: string;
   website?: string;
 }
 

packages/mobile-app/data/api/types.ts

@@ -1730,7 +1730,7 @@ export class WalletDb {
         updatedAt: new Date(),
         verified: !!serializedAsset.verified_metadata,
         decimals: serializedAsset.verified_metadata?.decimals ?? null,
-        logoURI: serializedAsset.verified_metadata?.logo_uri ?? null,
+        logoURI: serializedAsset.verified_metadata?.logoURI ?? null,
         supply: serializedAsset.supply ?? null,
         symbol: serializedAsset.verified_metadata?.symbol ?? null,
         website: serializedAsset.verified_metadata?.website ?? null,
@@ -1749,7 +1749,7 @@ export class WalletDb {
           updatedAt: new Date(),
           verified: !!serializedAsset.verified_metadata,
           decimals: serializedAsset.verified_metadata?.decimals ?? null,
-          logoURI: serializedAsset.verified_metadata?.logo_uri ?? null,
+          logoURI: serializedAsset.verified_metadata?.logoURI ?? null,
           supply: serializedAsset.supply ?? null,
           symbol: serializedAsset.verified_metadata?.symbol ?? null,
           website: serializedAsset.verified_metadata?.website ?? null,

packages/mobile-app/data/wallet/db.ts

@@ -25,6 +25,7 @@
     "expo-crypto": "~14.0.2",
     "expo-document-picker": "~13.0.3",
     "expo-font": "~13.0.3",
+    "expo-image": "~2.0.5",
     "expo-linear-gradient": "~14.0.2",
     "expo-linking": "~7.0.4",
     "expo-router": "~4.0.17",