CP-7247: fix missing icons (network coins & bridge) (#922)

ava-labs · Sep 13, 2023 · ce77876 · ce77876
1 parent 8886fe4
commit ce77876
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx
@@ -7,6 +7,7 @@ import EthereumSvg from 'components/svg/Ethereum'
 import BitcoinSVG from 'components/svg/BitcoinSVG'
 import { TokenSymbol } from 'store/network'
 import { SvgUri } from 'react-native-svg'
+import { formatUriImageToPng, isContentfulImageUri } from 'utils/Contentful'
 import FastImage from 'react-native-fast-image'
 import AvaText from './AvaText'
 
@@ -91,15 +92,27 @@ const AvatarBase: FC<Props> = ({
       }
 
       if (logoUri?.endsWith('svg')) {
-        return (
-          <SvgUri
-            uri={logoUri}
-            style={style}
-            width={size}
-            height={size}
-            testID="avatar__logo_avatar"
-          />
-        )
+        if (isContentfulImageUri(logoUri)) {
+          return (
+            <FastImage
+              source={{
+                uri: formatUriImageToPng(logoUri, size)
+              }}
+              style={style}
+              testID="avatar__logo_avatar"
+            />
+          )
+        } else {
+          return (
+            <SvgUri
+              uri={logoUri}
+              style={style}
+              width={size}
+              height={size}
+              testID="avatar__logo_avatar"
+            />
+          )
+        }
       }
 
       // adding a white background by default

diff --git a/app/screens/shared/BridgeTransactionStatus.tsx b/app/screens/shared/BridgeTransactionStatus.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useLayoutEffect, useState } from 'react'
+import React, { FC, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useApplicationContext } from 'contexts/ApplicationContext'
 import AvaText from 'components/AvaText'
@@ -30,6 +30,7 @@ import TransactionToast, {
 import AvaButton from 'components/AvaButton'
 import AppNavigation from 'navigation/AppNavigation'
 import { usePostCapture } from 'hooks/usePosthogCapture'
+import { BITCOIN_NETWORK } from '@avalabs/chains-sdk'
 
 type Props = {
   txHash: string
@@ -43,9 +44,24 @@ const BridgeTransactionStatus: FC<Props> = ({ txHash, showHideButton }) => {
   const [bridgeTransaction, setBridgeTransaction] =
     useState<BridgeTransaction>()
 
-  const tokenInfo = useSelector(
+  const _tokenInfo = useSelector(
     selectTokenInfo(bridgeTransaction?.symbol ?? '')
   )
+
+  const tokenInfo = useMemo(() => {
+    if (_tokenInfo)
+      return { symbol: _tokenInfo.symbol, logoUri: _tokenInfo.logoUri }
+
+    if (bridgeTransaction?.symbol === BITCOIN_NETWORK.networkToken.symbol) {
+      return {
+        symbol: BITCOIN_NETWORK.networkToken.symbol,
+        logoUri: BITCOIN_NETWORK.networkToken.logoUri
+      }
+    }
+
+    return undefined
+  }, [_tokenInfo, bridgeTransaction])
+
   const { theme, appHook } = useApplicationContext()
   const { selectedCurrency, currencyFormatter } = appHook
   const { navigate, getParent, dispatch, setOptions } = useNavigation()

diff --git a/app/utils/Contentful.ts b/app/utils/Contentful.ts
@@ -5,8 +5,7 @@ export const formatUriImageToPng = (
   size: number,
   pixelRatio: number = PixelRatio.get()
 ) => {
-  const allowedUrl = 'https://images.ctfassets.net'
-  if (uri.startsWith(allowedUrl)) {
+  if (isContentfulImageUri(uri)) {
     const sizeInPixel = size * pixelRatio
 
     return uri?.endsWith('.svg')
@@ -15,3 +14,9 @@ export const formatUriImageToPng = (
   }
   return uri
 }
+
+export const isContentfulImageUri = (uri: string) => {
+  const allowedUrl = 'https://images.ctfassets.net'
+
+  return uri.startsWith(allowedUrl)
+}