chore: portfolio wire up

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+## Description / Change(s) / Related issue(s)
+
+##### Ticket
+
+YOMO-
+
+[!NOTE]
+Please create the ticket if missing it.

apps/wallet-mobile/.env

@@ -13,6 +13,9 @@ WALLET_1_NETWORK_ID=300
 WALLET_2_NETWORK_ID=300
 WALLET_2_MNEMONIC=abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon share
 
+WALLET_3_NETWORK_ID=300
+WALLET_3_MNEMONIC=typical evoke despair burger ripple venue assist shoot donate alter twice bomb glimpse asthma explain
+
 BANXA_TEST_WALLET=addr1qyfuspldlchc5kechfe5jzdrr9jms2s9w0tq4hggy9zgkhxssydveuc8xyx4zh27fwcmr62mraeezjwf24hzkyejwfmq7yptmd
 
 FRONTEND_FEE_ADDRESS_MAINNET=addr1q9ry6jfdgm0lcrtfpgwrgxg7qfahv80jlghhrthy6w8hmyjuw9ngccy937pm7yw0jjnxasm7hzxjrf8rzkqcj26788lqws5fke

apps/wallet-mobile/app.json

@@ -2,6 +2,10 @@
   "name": "yoroi",
   "displayName": "Yoroi",
   "expo": {
-    "plugins": ["sentry-expo"]
+    "name": "yoroi",
+    "slug": "yoroi",
+    "plugins": [
+      "sentry-expo"
+    ]
   }
-}
+}

apps/wallet-mobile/ios/Podfile.lock

@@ -29,6 +29,12 @@ PODS:
     - ExpoModulesCore
   - ExpoDevice (5.4.0):
     - ExpoModulesCore
+  - ExpoImage (1.3.0):
+    - ExpoModulesCore
+    - SDWebImage (~> 5.15.8)
+    - SDWebImageAVIFCoder (~> 0.10.0)
+    - SDWebImageSVGCoder (~> 1.7.0)
+    - SDWebImageWebPCoder (~> 0.11.0)
   - ExpoKeepAwake (12.0.1):
     - ExpoModulesCore
   - ExpoModulesCore (1.2.7):
@@ -48,7 +54,28 @@ PODS:
   - hermes-engine (0.71.14):
     - hermes-engine/Pre-built (= 0.71.14)
   - hermes-engine/Pre-built (0.71.14)
+  - libaom (3.0.0):
+    - libvmaf (>= 2.2.0)
+  - libavif (0.11.1):
+    - libavif/libaom (= 0.11.1)
+  - libavif/core (0.11.1)
+  - libavif/libaom (0.11.1):
+    - libaom (>= 2.0.0)
+    - libavif/core
   - libevent (2.1.12)
+  - libvmaf (2.3.1)
+  - libwebp (1.3.2):
+    - libwebp/demux (= 1.3.2)
+    - libwebp/mux (= 1.3.2)
+    - libwebp/sharpyuv (= 1.3.2)
+    - libwebp/webp (= 1.3.2)
+  - libwebp/demux (1.3.2):
+    - libwebp/webp
+  - libwebp/mux (1.3.2):
+    - libwebp/demux
+  - libwebp/sharpyuv (1.3.2)
+  - libwebp/webp (1.3.2):
+    - libwebp/sharpyuv
   - MMKV (1.3.3):
     - MMKVCore (~> 1.3.3)
   - MMKVCore (1.3.3)
@@ -492,6 +519,17 @@ PODS:
     - React-Core
   - RNSVG (13.8.0):
     - React-Core
+  - SDWebImage (5.15.8):
+    - SDWebImage/Core (= 5.15.8)
+  - SDWebImage/Core (5.15.8)
+  - SDWebImageAVIFCoder (0.10.1):
+    - libavif (>= 0.11.0)
+    - SDWebImage (~> 5.10)
+  - SDWebImageSVGCoder (1.7.0):
+    - SDWebImage/Core (~> 5.6)
+  - SDWebImageWebPCoder (0.11.0):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.15)
   - Sentry/HybridSDK (8.9.3):
     - SentryPrivate (= 8.9.3)
   - SentryPrivate (8.9.3)
@@ -517,6 +555,7 @@ DEPENDENCIES:
   - Expo (from `../../../node_modules/expo`)
   - ExpoBlur (from `../../../node_modules/expo-blur/ios`)
   - ExpoDevice (from `../../../node_modules/expo-device/ios`)
+  - ExpoImage (from `../../../node_modules/expo-image/ios`)
   - ExpoKeepAwake (from `../../../node_modules/expo-keep-awake/ios`)
   - ExpoModulesCore (from `../../../node_modules/expo-modules-core`)
   - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
@@ -592,10 +631,18 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - fmt
+    - libaom
+    - libavif
     - libevent
+    - libvmaf
+    - libwebp
     - MMKV
     - MMKVCore
     - MultiplatformBleAdapter
+    - SDWebImage
+    - SDWebImageAVIFCoder
+    - SDWebImageSVGCoder
+    - SDWebImageWebPCoder
     - Sentry
     - SentryPrivate
     - ZXingObjC
@@ -629,6 +676,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/expo-blur/ios"
   ExpoDevice:
     :path: "../../../node_modules/expo-device/ios"
+  ExpoImage:
+    :path: "../../../node_modules/expo-image/ios"
   ExpoKeepAwake:
     :path: "../../../node_modules/expo-keep-awake/ios"
   ExpoModulesCore:
@@ -772,7 +821,7 @@ SPEC CHECKSUMS:
   amplitude-react-native: 1ea3d5e1f80ccc357dd178c55c29e51c89f1cd11
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXBarCodeScanner: 8e23fae8d267dbef9f04817833a494200f1fce35
   EXCamera: 0fbfa338a3776af2722d626a3437abe33f708aad
@@ -783,14 +832,19 @@ SPEC CHECKSUMS:
   Expo: b7d2843b0a0027d0ce76121a63085764355a16ed
   ExpoBlur: e832d874bd94afc0645daddbd3162ec1ce172080
   ExpoDevice: 1c1b0c9cad96c292c1de73948649cfd654b2b3c0
+  ExpoImage: bf714e0101812ccbbd1a4fdbfd34905feeefd9f5
   ExpoKeepAwake: 69f5f627670d62318410392d03e0b5db0f85759a
   ExpoModulesCore: 653958063a301098b541ae4dfed1ac0b98db607b
   FBLazyVector: 12ea01e587c9594e7b144e1bfc86ac4d9ac28fde
   FBReactNativeSpec: faca7d16c37626ca5780a87adef703817722fe61
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: d7cc127932c89c53374452d6f93473f1970d8e88
+  libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
+  libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  libvmaf: 27f523f1e63c694d14d534cd0fddd2fab0ae8711
+  libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   MMKV: f902fb6719da13c2ab0965233d8963a59416f911
   MMKVCore: d26e4d3edd5cb8588c2569222cbd8be4231374e9
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
@@ -856,6 +910,10 @@ SPEC CHECKSUMS:
   RNSentry: f9e637773502a61c7b455c4ce65bc7008ce22a6e
   RNShare: 859ff710211285676b0bcedd156c12437ea1d564
   RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
+  SDWebImage: cb032eba469c54e0000e78bcb0a13cdde0a52798
+  SDWebImageAVIFCoder: 8348fef6d0ec69e129c66c9fe4d74fbfbf366112
+  SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
+  SDWebImageWebPCoder: 295a6573c512f54ad2dd58098e64e17dcf008499
   Sentry: 97161cac725da1ecbe77d1445bf8a61c1e5667f1
   SentryPrivate: 9a76def09fb08f9501997b8df946e8097947b94f
   Yoga: e71803b4c1fff832ccf9b92541e00f9b873119b9

apps/wallet-mobile/ios/yoroi.xcodeproj/project.pbxproj

@@ -986,7 +986,11 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -1055,7 +1059,11 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

apps/wallet-mobile/package.json

@@ -39,7 +39,7 @@
     "prestart": "sb-rn-get-stories",
     "start": "yarn react-native start --reset-cache --verbose",
     "storybook:watch": "sb-rn-watcher",
-    "test": "jest src --ci --bail --silent",
+    "test": "jest src --ci --bail --silent --maxWorkers=1",
     "tsc": "tsc --noEmit -p tsconfig.json",
     "tsc:cover": "yarn typescript-coverage-report -i '**/*.test.*' -i '**/*.stories*' -t html --threshold=100"
   },
@@ -151,6 +151,7 @@
     "expo-blur": "12.9.2",
     "expo-camera": "^13.2.1",
     "expo-device": "^5.4.0",
+    "expo-image": "1.3.0",
     "expo-status-bar": "~1.4.4",
     "immer": "^10.0.2",
     "jsc-android": "241213.1.0",

apps/wallet-mobile/src/AppNavigator.tsx

@@ -48,7 +48,7 @@ export const AppNavigator = () => {
   })
 
   const firstAction = useFirstAction()
-  const onReady = () => {
+  const onReady = React.useCallback(() => {
     if (isLoggedIn) return
 
     // try first OS auth before navigating to os login screen
@@ -69,12 +69,12 @@ export const AppNavigator = () => {
     } else {
       RNBootSplash.hide({fade: true})
     }
-  }
+  }, [authWithOs, firstAction, isLoggedIn])
 
-  const handleStateChange = () => {
+  const handleStateChange = React.useCallback(() => {
     const currentRouteName = navRef.current?.getCurrentRoute()?.name
     setRouteName(currentRouteName)
-  }
+  }, [])
 
   return (
     <NavigationContainer

apps/wallet-mobile/src/NftDetails/NftDetails.stories.tsx

@@ -2,9 +2,9 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 
 import {QueryProvider, RouteProvider} from '../../.storybook/decorators'
+import {MediaDetails} from '../features/Portfolio/common/MediaDetails/MediaDetails'
 import {SelectedWalletProvider} from '../features/WalletManager/Context'
 import {mocks, nft} from '../yoroi-wallets/mocks'
-import {NftDetails} from './NftDetails'
 
 storiesOf('NFT/Details', module)
   .add('Default', () => {
@@ -17,7 +17,7 @@ storiesOf('NFT/Details', module)
       <RouteProvider params={{id: nft.id}}>
         <QueryProvider>
           <SelectedWalletProvider wallet={loadedWallet}>
-            <NftDetails />
+            <MediaDetails />
           </SelectedWalletProvider>
         </QueryProvider>
       </RouteProvider>
@@ -33,7 +33,7 @@ storiesOf('NFT/Details', module)
       <RouteProvider params={{id: nft.id}}>
         <QueryProvider>
           <SelectedWalletProvider wallet={wallet}>
-            <NftDetails />
+            <MediaDetails />
           </SelectedWalletProvider>
         </QueryProvider>
       </RouteProvider>
@@ -49,7 +49,7 @@ storiesOf('NFT/Details', module)
       <RouteProvider params={{id: nft.id}}>
         <QueryProvider>
           <SelectedWalletProvider wallet={wallet}>
-            <NftDetails />
+            <MediaDetails />
           </SelectedWalletProvider>
         </QueryProvider>
       </RouteProvider>

apps/wallet-mobile/src/NftDetails/NftDetailsImage.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import {Dimensions, StyleSheet, View} from 'react-native'
+import {StyleSheet, useWindowDimensions, View} from 'react-native'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import ViewTransformer from 'react-native-easy-view-transformer'
 
 import {FadeIn} from '../components'
-import {NftPreview} from '../components/NftPreview'
+import {MediaPreview} from '../features/Portfolio/common/MediaPreview/MediaPreview'
 import {useSelectedWallet} from '../features/WalletManager/Context'
 import {useMetrics} from '../metrics/metricsManager'
 import {NftRoutes, useParams} from '../navigation'
 import {isEmptyString} from '../utils/utils'
-import {useNft} from '../yoroi-wallets/hooks'
 
 type Params = NftRoutes['nft-details']
 
@@ -21,20 +20,25 @@ const isParams = (params?: Params | object | undefined): params is Params => {
 export const NftDetailsImage = () => {
   const {id} = useParams<Params>(isParams)
   const wallet = useSelectedWallet()
-  const nft = useNft(wallet, {id})
-  const {track} = useMetrics()
+  const dimensions = useWindowDimensions()
+
+  // reading from the getter, there is no need to subscribe to changes
+  const [amount] = React.useState(wallet.balances.records.get(id))
 
+  const {track} = useMetrics()
   React.useEffect(() => {
-    if (!isEmptyString(nft?.id)) track.nftGalleryDetailsImageViewed()
-  }, [nft?.id, track])
+    track.nftGalleryDetailsImageViewed()
+  }, [track, id])
 
-  const dimensions = Dimensions.get('window')
+  // record can be gone when arriving here, need a state
+  // TODO: revisit + product definition (missing is gone state)
+  if (!amount) return null
 
   return (
     <FadeIn style={styles.container}>
       <ViewTransformer maxScale={3} minScale={1}>
         <View style={styles.contentContainer}>
-          <NftPreview nft={nft} width={dimensions.width} height={dimensions.height} zoom={1} contentFit="contain" />
+          <MediaPreview info={amount.info} width={dimensions.width} height={dimensions.height} contentFit="contain" />
         </View>
       </ViewTransformer>
     </FadeIn>