Merge branch 'develop' into fix/fix-nft-s-w-missing-metadata

# Conflicts:
#	src/NftDetails/NftDetails.tsx
#	src/NftDetails/NftDetailsImage.tsx
#	src/Nfts/ImageGallery/ImageGallery.tsx
#	src/components/TokenIcon/ModeratedNftIcon.tsx
#	src/components/TokenIcon/TokenIcon.tsx

.storybook/storybook.requires.js

@@ -83,6 +83,7 @@ const getStories = () => {
     "./src/components/Link/Link.stories.tsx": require("../src/components/Link/Link.stories.tsx"),
     "./src/components/LoadingOverlay/LoadingOverlay.stories.tsx": require("../src/components/LoadingOverlay/LoadingOverlay.stories.tsx"),
     "./src/components/Modal/Modal.stories.tsx": require("../src/components/Modal/Modal.stories.tsx"),
+    "./src/components/NftPreview/NftPreview.stories.tsx": require("../src/components/NftPreview/NftPreview.stories.tsx"),
     "./src/components/StandardModal/StandardModal.stories.tsx": require("../src/components/StandardModal/StandardModal.stories.tsx"),
     "./src/components/TextInput/TextInput.stories.tsx": require("../src/components/TextInput/TextInput.stories.tsx"),
     "./src/components/TokenIcon/ModeratedNftIcon.stories.tsx": require("../src/components/TokenIcon/ModeratedNftIcon.stories.tsx"),

.tool-versions

@@ -1,4 +1,4 @@
-nodejs 16.5.0
+nodejs 16.19.0
 rust 1.41.0
 java adoptopenjdk-8.0.292+10
 python 2.7.18

ios/Podfile.lock

@@ -340,8 +340,8 @@ PODS:
   - RNSentry (3.3.2):
     - React-Core
     - Sentry (= 7.10.1)
-  - RNSVG (7.2.1):
-    - React
+  - RNSVG (13.8.0):
+    - React-Core
   - RNVectorIcons (8.1.0):
     - React-Core
   - Sentry (7.10.1):
@@ -546,7 +546,7 @@ SPEC CHECKSUMS:
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: fa8275d5086566e22a26ddc385ab5772e7f9b1bd
-  FBReactNativeSpec: 82dc48a5c1de8caa2933fce4986a0927ad2391fe
+  FBReactNativeSpec: 09e71f626dc611ba6f450b2f19f1e2142282a53d
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
   Permission-BluetoothPeripheral: a408e2ba4b43e60c5a4b8b4d442bb8abc93394b2
@@ -601,7 +601,7 @@ SPEC CHECKSUMS:
   RNReanimated: c1b56d030d1616239861534d9adb531f8cffab68
   RNScreens: 3ba2198ca3179f77f6158425fc31ba3c90a0d49f
   RNSentry: f8c14c77e400a93331b38538f735c2538f8108a8
-  RNSVG: 6c8e8c6f9e5a0caf910dd25aa6e4216045426e1d
+  RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   Sentry: ddcd9fde63cfe7e9e2243da59d98daa382413e49
   Yoga: d1fc3575b8b68891ff5ef3c276daa855e841eb32

jestSetup.ts

@@ -22,7 +22,7 @@ jest.mock('@react-native-async-storage/async-storage', () =>
 jest.mock('react-native-keychain', () => ({
   resetGenericPassword: jest.fn(),
 }))
-jest.mock('react-native-blockies-svg', () => {})
+jest.mock('@emurgo/react-native-blockies-svg', () => {})
 
 jest.mock('react-native-reanimated', () => {
   const Reanimated = require('react-native-reanimated/mock')

package.json

@@ -85,6 +85,7 @@
     "@emurgo/cip14-js": "^3.0.1",
     "@emurgo/cip4-js": "1.0.7",
     "@emurgo/cross-csl-mobile": "^1.0.0",
+    "@emurgo/react-native-blockies-svg": "^0.0.2",
     "@emurgo/react-native-haskell-shelley": "4.0.0-beta.2",
     "@emurgo/react-native-hid": "^5.15.6",
     "@emurgo/yoroi-lib": "^0.3.2",
@@ -135,7 +136,6 @@
     "react-native": "0.64.4",
     "react-native-background-timer": "2.4.1",
     "react-native-ble-plx": "^2.0.3",
-    "react-native-blockies-svg": "git+https://github.com/Emurgo/react-native-blockies-svg",
     "react-native-bootsplash": "3.2.3",
     "react-native-camera": "^4.2.1",
     "react-native-config": "0.12.0",
@@ -158,7 +158,7 @@
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "3.1.0",
     "react-native-skeleton-placeholder": "^5.2.0",
-    "react-native-svg": "^7.2.0",
+    "react-native-svg": "13.8.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-vector-icons": "^8.1.0",
     "react-native-webview": "^11.25.0",

src/NftDetails/NftDetails.tsx

@@ -1,10 +1,11 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import React, {ReactNode, useState} from 'react'
 import {defineMessages, useIntl} from 'react-intl'
-import {Image, ImageSourcePropType, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 
 import {CopyButton, FadeIn, Icon, Link, Spacer, Text} from '../components'
+import {NftPreview} from '../components/NftPreview/NftPreview'
 import {Tab, TabPanel, TabPanels, Tabs} from '../components/Tabs'
 import {features} from '../features'
 import {NftRoutes} from '../navigation'
@@ -15,7 +16,6 @@ import {COLORS} from '../theme'
 import {isEmptyString} from '../utils'
 import {useNft} from '../yoroi-wallets'
 import {YoroiNft} from '../yoroi-wallets/types'
-import placeholderImage from './../assets/img/nft-placeholder.png'
 
 export const NftDetails = () => {
   const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
@@ -62,22 +62,9 @@ export const NftDetails = () => {
 
 const UnModeratedNftImage = ({nft}: {nft: YoroiNft}) => {
   const navigateTo = useNavigateTo()
-  const source = !isEmptyString(nft.logo) ? {uri: nft.logo} : placeholderImage
-  return <NftImage source={source} onPress={() => navigateTo.nftZoom(nft.id)} />
-}
-
-const NftImage = ({
-  source,
-  onPress,
-  disabled,
-}: {
-  source: ImageSourcePropType
-  onPress?: () => void
-  disabled?: boolean
-}) => {
   return (
-    <TouchableOpacity onPress={onPress} disabled={disabled} style={styles.imageWrapper}>
-      <Image source={source} style={styles.image} resizeMode="contain" />
+    <TouchableOpacity onPress={() => navigateTo.nftZoom(nft.id)} style={styles.imageWrapper}>
+      <NftPreview nft={nft} style={styles.image} height={380} />
     </TouchableOpacity>
   )
 }
@@ -88,20 +75,26 @@ const ModeratedNftImage = ({nft}: {nft: YoroiNft}) => {
   const {status} = useModeratedNftImage({wallet, fingerprint: nft.fingerprint})
   const canShowNft = status === 'approved' || status === 'consent'
 
+  if (!canShowNft) {
+    return (
+      <View style={styles.imageWrapper}>
+        <NftPreview nft={nft} style={styles.image} height={380} showPlaceholder />
+      </View>
+    )
+  }
+
   return (
-    <NftImage
-      source={canShowNft ? {uri: nft.logo} : placeholderImage}
-      onPress={() => navigateTo.nftZoom(nft.id)}
-      disabled={!canShowNft}
-    />
+    <TouchableOpacity onPress={() => navigateTo.nftZoom(nft.id)} style={styles.imageWrapper}>
+      <NftPreview nft={nft} style={styles.image} height={380} />
+    </TouchableOpacity>
   )
 }
 
 const MetadataRow = ({title, copyText, children}: {title: string; children: ReactNode; copyText?: string}) => {
   return (
     <View style={styles.rowContainer}>
       <View style={styles.rowTitleContainer}>
-        <Text>{title}</Text>
+        <Text style={styles.title}>{title}</Text>
 
         {copyText !== undefined ? <CopyButton value={copyText} /> : null}
       </View>
@@ -238,7 +231,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   image: {
-    height: 380,
     flexGrow: 1,
   },
   contentContainer: {
@@ -263,6 +255,9 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
   },
+  title: {
+    fontWeight: '500',
+  },
 })
 
 const messages = defineMessages({

src/NftDetails/NftDetailsImage.tsx

@@ -1,10 +1,10 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import React from 'react'
-import {Dimensions, Image, StyleSheet, View} from 'react-native'
+import {Dimensions, StyleSheet, View} from 'react-native'
 import ViewTransformer from 'react-native-easy-view-transformer'
 
-import placeholderImage from '../assets/img/nft-placeholder.png'
 import {FadeIn} from '../components'
+import {NftPreview} from '../components/NftPreview/NftPreview'
 import {NftRoutes} from '../navigation'
 import {useSelectedWallet} from '../SelectedWallet'
 import {useNft} from '../yoroi-wallets'
@@ -16,13 +16,12 @@ export const NftDetailsImage = () => {
 
   const dimensions = Dimensions.get('window')
   const imageSize = Math.min(dimensions.width, dimensions.height)
-  const source = nft.logo !== undefined ? {uri: nft.logo} : placeholderImage
 
   return (
     <FadeIn style={styles.container}>
       <ViewTransformer maxScale={3} minScale={1}>
         <View style={styles.contentContainer}>
-          <Image source={source} style={{height: imageSize, width: imageSize}} resizeMode="contain" />
+          <NftPreview nft={nft} width={imageSize} height={imageSize} />
         </View>
       </ViewTransformer>
     </FadeIn>

src/Nfts/ImageGallery/ImageGallery.tsx

@@ -1,10 +1,10 @@
 import {FlashList, FlashListProps} from '@shopify/flash-list'
 import React from 'react'
-import {Dimensions, GestureResponderEvent, Image, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Dimensions, GestureResponderEvent, StyleSheet, TouchableOpacity, View} from 'react-native'
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder'
 
-import placeholderImage from '../../assets/img/nft-placeholder.png'
 import {Icon, Spacer, Text} from '../../components'
+import {NftPreview} from '../../components/NftPreview/NftPreview'
 import {features} from '../../features'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {YoroiNft} from '../../yoroi-wallets/types'
@@ -47,16 +47,16 @@ interface ModeratedImageProps {
   nft: YoroiNft
 }
 
-const UnModeratedImage = ({onPress, nft: {logo, name}}: ModeratedImageProps) => {
+const UnModeratedImage = ({onPress, nft}: ModeratedImageProps) => {
   return (
     <TouchableOpacity onPress={onPress}>
-      {logo !== undefined ? <ApprovedNft text={name} uri={logo} /> : <PlaceholderNft text={name} />}
+      <ApprovedNft nft={nft} />
     </TouchableOpacity>
   )
 }
 
 const ModeratedImage = ({onPress, nft}: ModeratedImageProps) => {
-  const {thumbnail, name: text, fingerprint} = nft
+  const {name: text, fingerprint} = nft
   const wallet = useSelectedWallet()
   const {isError, status, isLoading} = useModeratedNftImage({wallet, fingerprint})
 
@@ -80,52 +80,67 @@ const ModeratedImage = ({onPress, nft}: ModeratedImageProps) => {
   if (isError) {
     return (
       <TouchableOpacity onPress={onPress}>
-        <BlockedNft text={text} />
+        <BlockedNft nft={nft} />
       </TouchableOpacity>
     )
   }
 
   return (
     <TouchableOpacity onPress={onPress}>
-      {thumbnail === undefined ? (
-        <PlaceholderNft text={text} />
-      ) : isImageApproved ? (
-        <ApprovedNft text={text} uri={thumbnail} />
+      {isImageApproved ? (
+        <ApprovedNft nft={nft} />
       ) : isImageWithConsent ? (
-        <RequiresConsentNft text={text} uri={thumbnail} />
+        <RequiresConsentNft nft={nft} />
       ) : isImageBlocked ? (
-        <BlockedNft text={text} />
+        <BlockedNft nft={nft} />
       ) : isPendingManualReview ? (
-        <ManualReviewNft text={text} />
+        <ManualReviewNft nft={nft} />
       ) : null}
     </TouchableOpacity>
   )
 }
 
-function BlockedNft({text}: {text: string}) {
-  return <PlaceholderNft text={text} />
+function BlockedNft({nft}: {nft: YoroiNft}) {
+  return <PlaceholderNft nft={nft} />
 }
 
-function ManualReviewNft({text}: {text: string}) {
-  return <PlaceholderNft text={text} />
-}
-
-function PlaceholderNft({text}: {text: string}) {
+function PlaceholderNft({nft}: {nft: YoroiNft}) {
   return (
     <View>
-      <Image source={placeholderImage} style={[styles.image, {width: IMAGE_SIZE, height: IMAGE_SIZE}]} />
+      <View style={styles.imageWrapper}>
+        <NftPreview
+          nft={nft}
+          showPlaceholder
+          width={IMAGE_SIZE}
+          height={IMAGE_SIZE}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      </View>
 
       <Spacer height={IMAGE_PADDING} />
 
-      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{text}</Text>
+      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{nft.name}</Text>
     </View>
   )
 }
-function RequiresConsentNft({uri, text}: {text: string; uri: string}) {
+
+function ManualReviewNft({nft}: {nft: YoroiNft}) {
+  return <PlaceholderNft nft={nft} />
+}
+
+function RequiresConsentNft({nft}: {nft: YoroiNft}) {
   return (
     <View>
       <View style={styles.imageWrapper}>
-        <Image source={{uri}} style={[styles.image, {width: IMAGE_SIZE, height: IMAGE_SIZE}]} blurRadius={20} />
+        <NftPreview
+          showThumbnail
+          nft={nft}
+          width={IMAGE_SIZE}
+          height={IMAGE_SIZE}
+          style={styles.image}
+          resizeMode="cover"
+        />
 
         <View style={styles.eyeWrapper}>
           <Icon.EyeOff size={20} color="#FFFFFF" />
@@ -134,19 +149,28 @@ function RequiresConsentNft({uri, text}: {text: string; uri: string}) {
 
       <Spacer height={IMAGE_PADDING} />
 
-      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{text}</Text>
+      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{nft.name}</Text>
     </View>
   )
 }
 
-function ApprovedNft({uri, text}: {text: string; uri: string}) {
+function ApprovedNft({nft}: {nft: YoroiNft}) {
   return (
     <View>
-      <Image source={{uri}} style={[styles.image, {width: IMAGE_SIZE, height: IMAGE_SIZE}]} />
+      <View style={styles.imageWrapper}>
+        <NftPreview
+          resizeMode="cover"
+          showThumbnail
+          nft={nft}
+          width={IMAGE_SIZE}
+          height={IMAGE_SIZE}
+          style={styles.image}
+        />
+      </View>
 
       <Spacer height={IMAGE_PADDING} />
 
-      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{text}</Text>
+      <Text style={[styles.text, {width: IMAGE_SIZE}]}>{nft.name}</Text>
     </View>
   )
 }
@@ -186,6 +210,8 @@ function SkeletonImagePlaceholder({text}: {text?: string}) {
 const styles = StyleSheet.create({
   imageWrapper: {
     position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 8,
   },
   eyeWrapper: {
     position: 'absolute',

src/Send/SendScreen/SendScreen.tsx

@@ -260,6 +260,6 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
   },
   indicator: {
-    marginTop: 26,
+    paddingVertical: 26,
   },
 })

src/components/Icon/Document.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export const Document = ({size = 40, color = 'black', backgroundColor = 'transparent'}: Props) => (
   <Svg width={size} height={size} viewBox="0 0 24 24">
-    <G transform={{scale: 1.25, translateX: -3, translateY: -3}}>
+    <G transform="scale(1.25) translateX(-3px) translateY(-3px)">
       <Rect
         id="document"
         stroke={color}

src/components/Icon/WalletAccount.tsx

@@ -1,6 +1,6 @@
+import Blockies from '@emurgo/react-native-blockies-svg'
 import React from 'react'
 import {StyleSheet, View, ViewStyle} from 'react-native'
-import Blockies from 'react-native-blockies-svg'
 import tinycolor from 'tinycolor2'
 
 import {COLORS as APP_COLORS} from '../../theme'