US-1801: Native support for USDRIF token in the UI

src/components/Porfolio/PortfolioCard.tsx

@@ -27,8 +27,7 @@ const SelectedCard = ({
   icon?: string
   color?: string
 }) => {
-  const isRifToken =
-    icon?.toUpperCase() === 'RIF' || icon?.toUpperCase() === 'TRIF'
+  const isRifToken = ['RIF', 'TRIF'].includes(icon?.toUpperCase() || '')
   return (
     <View style={selectedCardStyles.container}>
       <View style={selectedCardStyles.primaryTextContainer}>
@@ -44,7 +43,11 @@ const SelectedCard = ({
         ) : null}
         <Typography
           type={'body1'}
-          style={selectedCardStyles.primaryText}
+          style={
+            primaryText.length > 4
+              ? selectedCardStyles.primaryTextLong
+              : selectedCardStyles.primaryText
+          }
           accessibilityLabel="symbol">
           {primaryText}
         </Typography>
@@ -153,6 +156,9 @@ const selectedCardStyles = StyleSheet.create({
     fontSize: 22,
     paddingTop: 3,
   }),
+  primaryTextLong: castStyle.text({
+    fontSize: 18,
+  }),
 })
 
 const nonSelectedCardStyles = StyleSheet.create({

src/core/setup.ts

@@ -14,6 +14,7 @@ import {
   chainTypesById,
   ChainTypesByIdType,
 } from 'shared/constants/chainConstants'
+import { USDRIF_TESTNET } from 'src/screens/home/TokenImage'
 
 import { getWalletSetting } from './config'
 
@@ -90,7 +91,8 @@ const defaultTestnetTokens: ITokenWithoutLogo[] = Object.keys(testnetContracts)
       usdBalance: 0,
     }
   })
-export const getDefaultTokens = (chainId: ChainTypesByIdType) =>
-  chainTypesById[chainId] === ChainTypeEnum.MAINNET
+export const getDefaultTokens = (chainId: ChainTypesByIdType) => {
+  return chainTypesById[chainId] === ChainTypeEnum.MAINNET
     ? defaultMainnetTokens
-    : defaultTestnetTokens
+    : [...defaultTestnetTokens, USDRIF_TESTNET]
+}

src/redux/slices/balancesSlice/index.ts

@@ -4,24 +4,32 @@ import {
   convertBtcToSatoshi,
 } from '@rsksmart/rif-wallet-bitcoin'
 import { ITokenWithBalance } from '@rsksmart/rif-wallet-services'
+import { BigNumber } from 'ethers'
+import { parseUnits } from 'ethers/lib/utils'
 
 import { balanceToDisplay, convertBalance } from 'lib/utils'
 
+import { resetSocketState } from 'store/shared/actions/resetSocketState'
 import {
   BalanceState,
   ITokenWithoutLogo,
   TokenBalanceObject,
 } from 'store/slices/balancesSlice/types'
-import { resetSocketState } from 'store/shared/actions/resetSocketState'
 import { AsyncThunkWithTypes } from 'store/store'
 
 export const getBalance = (
   token: ITokenWithBalance | BitcoinNetworkWithBIPRequest,
   price: number,
 ) => {
-  let tokenBalance = token.balance.toString()
+  let tokenBalance: BigNumber
   if ('satoshis' in token) {
-    tokenBalance = convertBtcToSatoshi(tokenBalance).toString()
+    tokenBalance = convertBtcToSatoshi(token.balance.toString())
+  } else {
+    try {
+      tokenBalance = BigNumber.from(token.balance)
+    } catch {
+      tokenBalance = parseUnits(token.balance, token.decimals)
+    }
   }
 
   let balance = balanceToDisplay(tokenBalance, token.decimals, 4)
@@ -46,13 +54,13 @@ export const addOrUpdateBalances = createAsyncThunk<
   try {
     const { usdPrices, settings } = thunkAPI.getState()
     const bitcoin = settings.bitcoin
-    const balances: TokenBalanceObject[] = payload.map(b => {
+    const balances: TokenBalanceObject[] = payload.map(t => {
       const { balance, usdBalance } = getBalance(
-        b,
-        usdPrices[b.contractAddress]?.price ?? 0,
+        t,
+        usdPrices[t.contractAddress]?.price ?? 0,
       )
       return {
-        ...b,
+        ...t,
         balance,
         usdBalance,
       }
@@ -77,6 +85,7 @@ export const addOrUpdateBalances = createAsyncThunk<
 
     thunkAPI.dispatch(addOrUpdateBalancesState(balances))
   } catch (err) {
+    console.warn('Error adding or updating balances', err)
     thunkAPI.rejectWithValue(err)
   }
 })

src/screens/home/TokenImage.tsx

@@ -10,6 +10,7 @@ import {
 
 import { FrownFaceIcon } from 'components/icons'
 import { sharedColors } from 'shared/constants'
+import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types'
 
 interface Props {
   symbol: string
@@ -65,6 +66,7 @@ export enum TokenSymbol {
   TRIF = 'tRIF',
   DOC = 'DOC',
   RDOC = 'RDOC',
+  USDRIF = 'USDRIF',
   RIFP = 'RIFP',
   BPRO = 'BPRO',
   RNS = 'RNS',
@@ -142,6 +144,8 @@ export const getTransparentIconSource = (
       return require('../../images/rif-white.png')
     case 'RDOC':
       return require('./../../images/rdoc-transparent.png')
+    case 'USDRIF':
+      return require('./../../images/usdrif-transparent.png')
     case 'BTCCB':
     case 'BTCT':
     case 'BTC':
@@ -168,6 +172,8 @@ export const getIconSource = (
       return require('@rsksmart/rsk-contract-metadata/images/doc.png')
     case 'RDOC':
       return require('./../../images/rdoc.png')
+    case 'USDRIF':
+      return require('./../../images/usdrif.png')
     case 'RIFP':
       return require('@rsksmart/rsk-contract-metadata/images/rifpro.png')
     case 'BPRO':
@@ -273,3 +279,12 @@ export const getIconSource = (
       return undefined
   }
 }
+
+export const USDRIF_TESTNET = {
+  decimals: 18,
+  name: 'RIF US Dollar',
+  symbol: 'USDRIF',
+  contractAddress: '0x8dbf326e12a9ff37ed6ddf75ada548c2640a6482',
+  balance: '0x00',
+  usdBalance: 0,
+} as ITokenWithoutLogo

src/subscriptions/rifSockets.ts

@@ -1,6 +1,7 @@
 import EventEmitter from 'eventemitter3'
 import { RIFWallet } from '@rsksmart/rif-wallet-core'
 import {
+  ITokenWithBalance,
   RifWalletServicesFetcher,
   RifWalletServicesSocket,
 } from '@rsksmart/rif-wallet-services'
@@ -95,12 +96,16 @@ export const rifSockets = ({
     }
 
     const defaultTokens = getDefaultTokens(chainId)
-    defaultTokens.forEach(t => {
+    const defaultTokensWithBalance = defaultTokens.map(t => {
       const tokenBalance = balances[t.contractAddress]
-      t.balance = tokenBalance?.balance ?? t.balance
-      t.usdBalance = tokenBalance?.usdBalance ?? t.usdBalance
+      return {
+        ...t,
+        logo: '', // remove warning
+        balance: tokenBalance?.balance ?? t.balance,
+        usdBalance: tokenBalance?.usdBalance ?? t.usdBalance,
+      } as ITokenWithBalance
     })
-    dispatch(addOrUpdateBalances(defaultTokens))
+    dispatch(addOrUpdateBalances(defaultTokensWithBalance))
 
     rifWalletServicesSocket.removeAllListeners()