feat: integrate collectibles, ref LEA-1426

Author: pete-watters

apps/mobile/ios/Podfile.lock

@@ -250,7 +250,7 @@ PODS:
     - ExpoModulesCore
   - ExpoLocalAuthentication (14.0.1):
     - ExpoModulesCore
-  - ExpoModulesCore (1.12.20):
+  - ExpoModulesCore (1.12.26):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1804,7 +1804,7 @@ DEPENDENCIES:
   - "ExpoKeepAwake (from `../../../node_modules/.pnpm/expo-keep-awake@13.0.2_expo@51.0.26/node_modules/expo-keep-awake/ios`)"
   - "ExpoLinearGradient (from `../../../node_modules/.pnpm/expo-linear-gradient@13.0.2_expo@51.0.26/node_modules/expo-linear-gradient/ios`)"
   - "ExpoLocalAuthentication (from `../../../node_modules/.pnpm/expo-local-authentication@14.0.1_expo@51.0.26/node_modules/expo-local-authentication/ios`)"
-  - "ExpoModulesCore (from `../../../node_modules/.pnpm/expo-modules-core@1.12.20/node_modules/expo-modules-core`)"
+  - "ExpoModulesCore (from `../../../node_modules/.pnpm/expo-modules-core@1.12.26/node_modules/expo-modules-core`)"
   - "ExpoSecureStore (from `../../../node_modules/.pnpm/expo-secure-store@13.0.2_patch_hash=b2753e05d2293ca1584f223c366d82904c6efe44d9efd76d610b7080fe816754_expo@51.0.26/node_modules/expo-secure-store/ios`)"
   - "ExpoSharing (from `../../../node_modules/.pnpm/expo-sharing@12.0.1_expo@51.0.26/node_modules/expo-sharing/ios`)"
   - "ExpoSquircleView (from `../../../node_modules/.pnpm/expo-squircle-view@1.1.0_expo@51.0.26_react-native@0.74.1_@babel+core@7.24.6_@babel+pre_29058e40f55c91b6ad73a602246f895b/node_modules/expo-squircle-view/ios`)"
@@ -1965,7 +1965,7 @@ EXTERNAL SOURCES:
   ExpoLocalAuthentication:
     :path: "../../../node_modules/.pnpm/expo-local-authentication@14.0.1_expo@51.0.26/node_modules/expo-local-authentication/ios"
   ExpoModulesCore:
-    :path: "../../../node_modules/.pnpm/expo-modules-core@1.12.20/node_modules/expo-modules-core"
+    :path: "../../../node_modules/.pnpm/expo-modules-core@1.12.26/node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../../../node_modules/.pnpm/expo-secure-store@13.0.2_patch_hash=b2753e05d2293ca1584f223c366d82904c6efe44d9efd76d610b7080fe816754_expo@51.0.26/node_modules/expo-secure-store/ios"
   ExpoSharing:
@@ -2123,37 +2123,37 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
-  EXApplication: c08200c34daca7af7fd76ac4b9d606077410e8ad
-  EXConstants: 409690fbfd5afea964e5e9d6c4eb2c2b59222c59
+  EXApplication: ec862905fdab3a15bf6bd8ca1a99df7fc02d7762
+  EXConstants: 89d35611505a8ce02550e64e43cd05565da35f9a
   EXJSONUtils: 30c17fd9cc364d722c0946a550dfbf1be92ef6a4
-  EXManifests: c1fab4c3237675e7b0299ea8df0bcb14baca4f42
-  EXNotifications: 3d5a21d567df63efce497947c9106c80be3c6ba2
-  Expo: f3e39cddde295c79d206e972a59693cbb329ef46
-  expo-dev-client: d24806e84d072563b0a26537c22ec902443e77d6
-  expo-dev-launcher: 9ec4a77189b7ba5340c26399885887bec84e71f2
-  expo-dev-menu: 02f7aa39ee32f4730815cb5fe0c38d7bfda76ab7
-  expo-dev-menu-interface: be32c09f1e03833050f0ee290dcc86b3ad0e73e4
-  ExpoAsset: 9b7433ecc5f1b608ccbb823492e062bde944abd2
-  ExpoBlur: fa53f874e7b208bc3756d1bf07903c12e790beb1
-  ExpoClipboard: 23d203f5d4843699fbc45be1cc4fe1fbd811a6fa
-  ExpoCrypto: 156078f266bf28f80ecf5e2a9c3a0d6ffce07a1c
-  ExpoDevice: fc94f0e42ecdfd897e7590f2874fc64dfa7e9b1c
-  ExpoFileSystem: 80bfe850b1f9922c16905822ecbf97acd711dc51
-  ExpoFont: 690b76008be824e47907f200cb0764870108dfd1
-  ExpoHaptics: 5a3a88971af384255baf2504f38b41189cec6984
-  ExpoHead: 28ccee5977648d15f6a62b9a680a4bd169a1515b
-  ExpoImage: eab004b9363e388d3f6a118f18716de6dcfb8e8d
-  ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
-  ExpoLinearGradient: 8cec4a09426d8934c433e83cb36262d72c667fce
-  ExpoLocalAuthentication: 9e02a56a4cf9868f0052656a93d4c94101a42ed7
-  ExpoModulesCore: 5440e96a8ee014f4fd88e77264985fd0a65f5f8c
-  ExpoSecureStore: 060cebcb956b80ddae09821610ac1aa9e1ac74cd
-  ExpoSharing: 8db05dd85081219f75989a3db2c92fe5e9741033
-  ExpoSquircleView: ab74c87a366c8058b846a91de679331159cc64ae
-  ExpoSystemUI: d4f065a016cae6721b324eb659cdee4d4cf0cb26
-  ExpoWebBrowser: 7595ccac6938eb65b076385fd23d035db9ecdc8e
-  EXSplashScreen: d439ca817211886dc80a00f3761e3b6d861d7205
-  EXUpdatesInterface: 996527fd7d1a5d271eb523258d603f8f92038f24
+  EXManifests: ebb7f551c340c0d06f3ecd9ae662e418bf68417c
+  EXNotifications: 46d9ebe3f3691ec463f8fb8eeaa94ced14ec0b33
+  Expo: 647dd60db7a75898e3148258fb018b8fdb686291
+  expo-dev-client: a51c57c846b29c88fa5aaaf0cf3c8f6a59632715
+  expo-dev-launcher: 76e26b3cc3a0387593cf6211945d312e31020e75
+  expo-dev-menu: 20368c25e77af290f7b709d6f859a58327ad0d93
+  expo-dev-menu-interface: 540a154388e6ae7027b406827737e82b0d25da27
+  ExpoAsset: ddb6898965652c98e0ffb97830510d8486c233e3
+  ExpoBlur: d6023b4ccd20035624b60ae0bda541e65b9ece5c
+  ExpoClipboard: 243e22ff4161bbffcd3d2db469ae860ddc1156be
+  ExpoCrypto: c5c052d5f9f668c21975cb4caf072cec23c823fa
+  ExpoDevice: 84b3ed79df1234c17edfbf335f6ecf3c636f74de
+  ExpoFileSystem: 2988caaf68b7cb706e36d382829d99811d9d76a5
+  ExpoFont: 8b0bb99de4d164a7feca84a3f59739a9642bb335
+  ExpoHaptics: 9f47be324f691b6291c17c216189ab832d1a4d69
+  ExpoHead: 8065de5dccb2e1460110440f8b7d8733412f55d4
+  ExpoImage: eca6e116e264804be8fc0bb4ce3bae36a0e1d01c
+  ExpoKeepAwake: dd02e65d49f1cfd9194640028ae2857e536eb1c9
+  ExpoLinearGradient: 4c44b3803b441724874b232e6520b51ca6a50db1
+  ExpoLocalAuthentication: b94db59f55df95350223200c746b4ddf0cb7cfc0
+  ExpoModulesCore: 9ac73e2f60e0ea1d30137ca96cfc8c2aa34ef2b2
+  ExpoSecureStore: 6506992a9f53c94ea716c54d4a63144965945c2c
+  ExpoSharing: 5e6b6cbc0c232084b79ffa7243459f7dcdc5b1cb
+  ExpoSquircleView: 0f3abe8b83641f934ef6146db50edc391739b32c
+  ExpoSystemUI: 2072307375696c398a5d75633bdd5143fadc3d26
+  ExpoWebBrowser: cf10afe886891ab495877dada977fe6c269614a4
+  EXSplashScreen: 3bd6cae5aab5067f60b4e9a25c1d6c55e58629ce
+  EXUpdatesInterface: c3a9494c2173db6442c7d5ad4e5b984972760fd3
   FBLazyVector: 898d14d17bf19e2435cafd9ea2a1033efe445709
   Firebase: a64bf6a8546e6eab54f1c715cd6151f39d2329f4
   FirebaseAnalytics: bc9e565af9044ba8d6c6e4157e4edca8e5fdf7ec
@@ -2172,80 +2172,80 @@ SPEC CHECKSUMS:
   libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   lottie-ios: fcb5e73e17ba4c983140b7d21095c834b3087418
-  lottie-react-native: f851c0e235f171d99083c803f728f644be1dcf65
+  lottie-react-native: f26bf46e376a20620da39b1e74d9f0972bfeb0e8
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   PocketSVG: ca3bc53ea8d68336ba830c47b2e547790507b901
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
-  RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
+  RCT-Folly: 5dc73daec3476616d19e8a53f0156176f7b55461
   RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba
   RCTRequired: f49ea29cece52aee20db633ae7edc4b271435562
   RCTTypeSafety: a11979ff0570d230d74de9f604f7d19692157bc4
   React: 88794fad7f460349dbc9df8a274d95f37a009f5d
   React-callinvoker: 7a7023e34a55c89ea2aa62486bb3c1164ab0be0c
-  React-Codegen: af31a9323ce23988c255c9afd0ae9415ff894939
-  React-Core: 60075333bc22b5a793d3f62e207368b79bff2e64
-  React-CoreModules: 147c314d6b3b1e069c9ad64cbbbeba604854ff86
-  React-cxxreact: 5de27fd8bff4764acb2eac3ee66001e0e2b910e7
+  React-Codegen: 118828b0731a9ecf9021270b788f958f9ccb2e19
+  React-Core: 74cc07109071b230de904d394c2bf15b9f886bff
+  React-CoreModules: 8beb4863375aafeac52c49a3962b81d137577585
+  React-cxxreact: d0b0d575214ba236dff569e14dd4411ac82b3566
   React-debug: 6397f0baf751b40511d01e984b01467d7e6d8127
-  React-Fabric: 6fa475e16e0a37b38d462cec32b70fd5cf886305
-  React-FabricImage: 7e09b3704e3fa084b4d44b5b5ef6e2e3d3334ec0
+  React-Fabric: 37f29709a9caefd2a9fece6f695bc88a0af77f40
+  React-FabricImage: 9c3f6125b2f5908a2e7d0947cfb74022c1a0b294
   React-featureflags: 2eb79dd9df4095bff519379f2a4c915069e330bb
-  React-graphics: 82a482a3aa5d9659b74cdf2c8b57faf67eaa10fb
-  React-hermes: d93936b02de2fd7e67c11e92c16d4278a14d0134
-  React-ImageManager: ebb3c4812e2c5acba5a89728c2d77729471329ad
-  React-jserrorhandler: a08e0adcf1612900dde82b8bf8e93e7d2ad953b3
-  React-jsi: f46d09ee5079a4f3b637d30d0e59b8ea6470632c
-  React-jsiexecutor: e73579560957aa3ca9dc02ab90e163454279d48c
-  React-jsinspector: e8ba20dde269c7c1d45784b858fa1cf4383f0bbb
-  React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc
-  React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
-  React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
-  react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
-  react-native-keyboard-controller: 07a457e3a882f85591f98034e6fcc930df9a8865
-  react-native-safe-area-context: dcab599c527c2d7de2d76507a523d20a0b83823d
-  react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
-  react-native-webview: 05bae3a03a1e4f59568dfc05286c0ebf8954106c
+  React-graphics: d0b9a0a174fb86bfed50bf4fb7c835183a546ab5
+  React-hermes: 06e8316213d56ab914afb9a829763123fcfacf22
+  React-ImageManager: 821a1182139cc986598868d0e9a00b3a021feddb
+  React-jserrorhandler: 1dd2a75b24dd9a318ee88fa6792e98524879af24
+  React-jsi: e381545475da5ea77777e7b5513031a434ced04b
+  React-jsiexecutor: ce91dde1a61efd519a5ff7ac0f64b61a14217072
+  React-jsinspector: 627ac44b1d090fc6a8039b1df723677bc7d86fe4
+  React-jsitracing: dd0e541a34027b3ab668ad94cf268482ad6f82fb
+  React-logger: 6070f362a1657bb53335eb1fc903d3f49fd79842
+  React-Mapbuffer: 2c95cbabc3d75a17747452381e998c35208ea3ee
+  react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
+  react-native-keyboard-controller: 867585b84cc262a93f710fe8d2c81e171d74bea8
+  react-native-safe-area-context: 8c70551c8688cd584a53487aa1b9361e991a3b4a
+  react-native-view-shot: d1a701eb0719c6dccbd20b4bb43b1069f304cb70
+  react-native-webview: a4483a25c71098e407df1c1d9056ab907647d7c7
   React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
-  React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f
+  React-NativeModulesApple: 61b07ab32af3ea4910ba553932c0a779e853c082
   React-perflogger: 3d31e0d1e8ad891e43a09ac70b7b17a79773003a
   React-RCTActionSheet: c4a3a134f3434c9d7b0c1054f1a8cfed30c7a093
-  React-RCTAnimation: 0e5d15320eeece667fcceb6c785acf9a184e9da1
-  React-RCTAppDelegate: c4f6c0700b8950a8b18c2e004996eec1807d430a
-  React-RCTBlob: c46aaaee693d371a1c7cae2a8c8ee2aa7fbc1adb
-  React-RCTFabric: 0dbf28ce96c7f2843483e32a725a5b5793584ff3
-  React-RCTImage: a04dba5fcc823244f5822192c130ecf09623a57f
-  React-RCTLinking: 533bf13c745fcb2a0c14e0e49fd149586a7f0d14
-  React-RCTNetwork: a29e371e0d363d7b4c10ab907bc4d6ae610541e9
-  React-RCTSettings: 127813224780861d0d30ecda17a40d1dfebe7d73
-  React-RCTText: 8a823f245ecf82edb7569646e3c4d8041deb800a
-  React-RCTVibration: 46b5fae74e63f240f22f39de16ad6433da3b65d9
-  React-rendererdebug: 4653f8da6ab1d7b01af796bdf8ca47a927539e39
+  React-RCTAnimation: dab04683056694845eb7a9e283f4c63eec7fa633
+  React-RCTAppDelegate: 1785d42459138c45175b2fa18e86cd2aee829a93
+  React-RCTBlob: a0a8f6bfd8926bff0e2814ec3f8cd5514f2db243
+  React-RCTFabric: f69d856b74b6d385c4cf4bd128c330161ce18306
+  React-RCTImage: 51db983bcc5075fa9bf3e094e5c6c1f5b5575472
+  React-RCTLinking: 3430cd1023a5ac86a96ed6d4fbf7a8ed7b2e44d5
+  React-RCTNetwork: 52198f8a8c823639dcc8f6725ca5b360d66ea1a0
+  React-RCTSettings: c127440c2c538128f92fb45524e976e25cb69bd6
+  React-RCTText: 640b2d0bfb51d88d8a76c6a1a7ea1f94667bf231
+  React-RCTVibration: bd20c8156b649cd745c70db3341c409ae3b42821
+  React-rendererdebug: 16394ffe0d852967123b3b76a630233b90ec8e63
   React-rncore: 4f1e645acb5107bd4b4cf29eff17b04a7cd422f3
-  React-RuntimeApple: 013b606e743efb5ee14ef03c32379b78bfe74354
-  React-RuntimeCore: 7205be45a25713b5418bbf2db91ddfcca0761d8b
+  React-RuntimeApple: 97d0a5c655467c57b88076434427ec32413e7802
+  React-RuntimeCore: a55443ddb73e6666b441963d8951a16ba5cfc223
   React-runtimeexecutor: a278d4249921853d4a3f24e4d6e0ff30688f3c16
-  React-RuntimeHermes: 44c628568ce8feedc3acfbd48fc07b7f0f6d2731
-  React-runtimescheduler: e2152ed146b6a35c07386fc2ac4827b27e6aad12
-  React-utils: 3285151c9d1e3a28a9586571fc81d521678c196d
-  ReactCommon: f42444e384d82ab89184aed5d6f3142748b54768
-  RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
-  RNFBApp: 67229e8085ab427c935defad2a6c3fc57c7f656d
-  RNFBMessaging: e485940b19e3cff5eeb0f7f095d480576cbab505
-  RNGestureHandler: 2fb2c561d694d6a884850c8507c180a2cc2ed4e9
-  RNKeychain: bfe3d12bf4620fe488771c414530bf16e88f3678
-  RNLocalize: 06991b9c31e7a898a9fa6ddb204ce0f53a967248
-  RNReanimated: 2fa1e80272d7c5fa7e2eb13c4d224f99adb20aaa
-  RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
-  RNSVG: 43b64ed39c14ce830d840903774154ca0c1f27ec
+  React-RuntimeHermes: 6273f0755fef304453fc3c356b25abf17e915b83
+  React-runtimescheduler: 87b14969bb0b10538014fb8407d472f9904bc8cd
+  React-utils: 67574b07bff4429fd6c4d43a7fad8254d814ee20
+  ReactCommon: 64c64f4ae1f2debe3fab1800e00cb8466a4477b7
+  RNCAsyncStorage: aa75595c1aefa18f868452091fa0c411a516ce11
+  RNFBApp: 6ea10ef8a45c43cd75d580599484c0931e6c3683
+  RNFBMessaging: 10f37d2c5d9fe83e8f275322062803532faa4609
+  RNGestureHandler: d08fd9149ee9610bbc7e0a34c20b3ffe6a5801b3
+  RNKeychain: bbe2f6d5cc008920324acb49ef86ccc03d3b38e4
+  RNLocalize: 15463c4d79c7da45230064b4adcf5e9bb984667e
+  RNReanimated: ef92b79016903fe8346598eed1a150952715931d
+  RNScreens: a2d8a2555b4653d7a19706eb172f855657ac30d7
+  RNSVG: 0e7deccab0678200815104223aadd5ca734dd41d
   SDWebImage: 8a6b7b160b4d710e2a22b6900e25301075c34cb3
   SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
-  segment-analytics-react-native: 53785e35d44a0643beffa40eada68a4cbdf7292e
+  segment-analytics-react-native: 2d70adc118685be8be40cb0e0b76c48ac8c38f29
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  sovran-react-native: 5f02bd2d111ffe226d00c7b0435290eae6f10934
+  sovran-react-native: 33ad07c36db34b27a10a7ea2a0b06af4bcae8682
   Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
 
 PODFILE CHECKSUM: 1335b53efc7b068f7d36e7fd7794eb32b5151c61
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

apps/mobile/src/app/(home)/_layout.tsx

@@ -40,11 +40,16 @@ export default function StackLayout() {
       {/* Account */}
       <Stack.Screen name="account/[account]/index" options={{ header: () => <NakedHeader /> }} />
       <Stack.Screen name="account/[account]/activity" options={{ headerShown: false }} />
+      <Stack.Screen name="account/[account]/collectibles" options={{ headerShown: false }} />
       <Stack.Screen name="account/[account]/balances" options={{ headerShown: false }} />
       <Stack.Screen name="balances/index" options={{ headerShown: false }} />
 
       {/* Activity */}
       <Stack.Screen name="activity/index" options={{ headerShown: false }} />
+
+      {/* Collectibles */}
+      <Stack.Screen name="collectibles/index" options={{ headerShown: false }} />
+
       {/* Developer Console */}
       <Stack.Screen
         name="developer-console/index"

apps/mobile/src/app/(home)/account/[account]/account.layout.tsx

@@ -1,9 +1,11 @@
 import { Balance } from '@/components/balance/balance';
 import { PageLayout } from '@/components/page/page.layout';
 import { BalancesWidget } from '@/components/widgets/balances/balances-widget';
+import { CollectiblesWidget } from '@/components/widgets/collectibles/collectibles-widget';
 import { AccountBalances } from '@/features/balances/balances';
 import { useAccountAddresses } from '@/hooks/use-account-addresses';
 import { useAccountActivityQuery } from '@/queries/activity/account-activity.query';
+import { useAccountCollectibles } from '@/queries/collectibles/account-collectibles.query';
 import { AppRoutes } from '@/routes';
 import { Account } from '@/store/accounts/accounts';
 import { router } from 'expo-router';
@@ -21,7 +23,7 @@ interface AccountLayoutProps {
 export function AccountLayout({ account, balance }: AccountLayoutProps) {
   const accountAddresses = useAccountAddresses(account.fingerprint, account.accountIndex);
   const { data: activity, isLoading } = useAccountActivityQuery(accountAddresses);
-
+  const collectibles = useAccountCollectibles(account.fingerprint, account.accountIndex);
   return (
     <PageLayout>
       <AccountOverview
@@ -56,6 +58,17 @@ export function AccountLayout({ account, balance }: AccountLayoutProps) {
           }
         />
       )}
+      {collectibles && (
+        <CollectiblesWidget
+          collectibles={collectibles}
+          onPressHeader={() =>
+            router.navigate({
+              pathname: AppRoutes.AccountCollectibles,
+              params: { accountId: account.id, accountName: account.name },
+            })
+          }
+        />
+      )}
     </PageLayout>
   );
 }

apps/mobile/src/app/(home)/account/[account]/balances.tsx

@@ -17,6 +17,7 @@ export default function BalancesScreen() {
   const { fingerprint, accountIndex } = deserializeAccountId(accountId);
 
   const { totalBalance } = useAccountBalance({ fingerprint, accountIndex });
+  // TODO LEA-1726: Handle loading and error states
   if (totalBalance.state !== 'success') return;
   return (
     <AnimatedHeaderScreenLayout

apps/mobile/src/app/(home)/account/[account]/collectibles.tsx

@@ -0,0 +1,36 @@
+import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
+import { CollectiblesLayout } from '@/components/widgets/collectibles/collectibles.layout';
+import { NetworkBadge } from '@/features/settings/network-badge';
+import { useAccountCollectibles } from '@/queries/collectibles/account-collectibles.query';
+import { deserializeAccountId } from '@/store/accounts/accounts';
+import { t } from '@lingui/macro';
+import { useLocalSearchParams } from 'expo-router';
+
+import { Text } from '@leather.io/ui/native';
+
+import { configureAccountParamsSchema } from './index';
+
+export default function CollectiblesScreen() {
+  const params = useLocalSearchParams();
+  const { accountId } = configureAccountParamsSchema.parse(params);
+  const { fingerprint, accountIndex } = deserializeAccountId(accountId);
+
+  const collectibles = useAccountCollectibles(fingerprint, accountIndex);
+
+  // TODO LEA-1726: Handle loading and error states
+  if (collectibles.state !== 'success') return null;
+
+  return (
+    <AnimatedHeaderScreenLayout
+      contentContainerStyles={{ paddingHorizontal: 0 }}
+      rightHeaderElement={<NetworkBadge />}
+      title={
+        <Text variant="label01" color="ink.text-primary">
+          {t({ id: 'collectibles.header_title', message: 'My collectibles' })}
+        </Text>
+      }
+    >
+      <CollectiblesLayout collectibles={collectibles.value} />
+    </AnimatedHeaderScreenLayout>
+  );
+}

apps/mobile/src/app/(home)/collectibles/index.tsx

@@ -0,0 +1,26 @@
+import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
+import { CollectiblesLayout } from '@/components/widgets/collectibles/collectibles.layout';
+import { NetworkBadge } from '@/features/settings/network-badge';
+import { useTotalCollectibles } from '@/queries/collectibles/account-collectibles.query';
+import { t } from '@lingui/macro';
+
+import { Text } from '@leather.io/ui/native';
+
+export default function CollectiblesScreen() {
+  const { value: collectibles, state } = useTotalCollectibles();
+  // TODO LEA-1726: Handle loading and error states
+  if (state !== 'success') return;
+  return (
+    <AnimatedHeaderScreenLayout
+      contentContainerStyles={{ paddingHorizontal: 0 }}
+      rightHeaderElement={<NetworkBadge />}
+      title={
+        <Text variant="label01" color="ink.text-primary">
+          {t({ id: 'collectibles.header_title', message: 'My collectibles' })}
+        </Text>
+      }
+    >
+      <CollectiblesLayout collectibles={collectibles} />
+    </AnimatedHeaderScreenLayout>
+  );
+}