first aproach refactor

src/App.tsx

@@ -12,7 +12,6 @@ import AppNavigator from './AppNavigator'
 import {initApp} from './legacy/actions'
 import {isAppInitializedSelector} from './legacy/selectors'
 import {SelectedWalletMetaProvider, SelectedWalletProvider} from './SelectedWallet'
-import {SendProvider} from './Send/Context/SendContext'
 import {StorageProvider} from './Storage'
 
 enableScreens()
@@ -63,9 +62,7 @@ const App = () => {
         <StorageProvider>
           <SelectedWalletMetaProvider>
             <SelectedWalletProvider>
-              <SendProvider>
-                <AppNavigator />
-              </SendProvider>
+              <AppNavigator />
             </SelectedWalletProvider>
           </SelectedWalletMetaProvider>
         </StorageProvider>

src/Send/AssetSelectorScreen/AssetSelectorScreen.tsx

@@ -42,9 +42,8 @@ export const AssetSelectorScreen = ({balance}: Props) => {
   const sortedBalance: Array<[TokenId, Quantity]> = useMemo(
     () =>
       Object.entries(balance)
-        .sort(
-          ([, quantityA]: [TokenId, Quantity], [, quantityB]: [TokenId, Quantity]) =>
-            parseInt(quantityB) - parseInt(quantityA),
+        .sort(([, quantityA]: [TokenId, Quantity], [, quantityB]: [TokenId, Quantity]) =>
+          new BigNumber(quantityA).isGreaterThan(new BigNumber(quantityB)) ? -1 : 1,
         )
         .sort(([tokenId]: [TokenId, Quantity]) => (tokenId === defaultAsset.identifier ? -1 : 1)), // default first
     [balance, defaultAsset.identifier],
@@ -73,7 +72,7 @@ export const AssetSelectorScreen = ({balance}: Props) => {
               wallet={wallet}
               key={tokenId}
               tokenId={tokenId}
-              amount={new BigNumber(quantity)}
+              quantity={quantity}
               onPress={(tokenId) => {
                 setSendAll(false)
                 setSelectedTokenIdentifier(tokenId)
@@ -106,11 +105,12 @@ export const AssetSelectorScreen = ({balance}: Props) => {
 type AssetSelectorItemProps = {
   wallet: YoroiWallet
   tokenId: TokenId
-  amount: BigNumber
+  quantity: Quantity
   onPress: (tokenId: TokenId) => void
   matcher: string
 }
-const AssetSelectorItem = ({wallet, tokenId, amount, onPress, matcher}: AssetSelectorItemProps) => {
+
+const AssetSelectorItem = ({wallet, tokenId, quantity, onPress, matcher}: AssetSelectorItemProps) => {
   const strings = useStrings()
   const tokenInfo = useTokenInfo({wallet, tokenId})
 
@@ -133,7 +133,7 @@ const AssetSelectorItem = ({wallet, tokenId, amount, onPress, matcher}: AssetSel
         </View>
 
         <View style={{flex: 1, alignItems: 'flex-end', padding: 4}}>
-          <Text style={{color: COLORS.DARK_TEXT}}>{formatTokenAmount(amount, tokenInfo, 15)}</Text>
+          <Text style={{color: COLORS.DARK_TEXT}}>{formatTokenAmount(new BigNumber(quantity), tokenInfo, 15)}</Text>
         </View>
       </View>
     </TouchableOpacity>

src/Send/ConfirmScreen/ConfirmScreen.stories.tsx

@@ -1,6 +1,5 @@
 import {NavigationRouteContext} from '@react-navigation/native'
 import {storiesOf} from '@storybook/react-native'
-import BigNumber from 'bignumber.js'
 import React from 'react'
 
 import {balance, mockWallet} from '../../../storybook'
@@ -13,14 +12,15 @@ storiesOf('ConfirmScreen', module).add('Default', () => {
     key: 'key',
     name: 'name',
     params: {
-      defaultAssetAmount: new BigNumber('1111111111'),
-      balanceAfterTx: new BigNumber('10'),
+      defaultAssetAmount: '1111111111',
+      balanceAfterTx: '10',
       address: 'address_123123123',
-      availableAmount: new BigNumber('1111111100'),
-      fee: new BigNumber('1'),
-      tokens: balance,
+      availableAmount: '1111111100',
+      fee: '1',
+      selectedTokens: balance,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       yoroiUnsignedTx: null as any,
+      easyConfirmDecryptKey: '1234567',
     } as Params,
   }
 

src/Send/ConfirmScreen/ConfirmScreen.tsx

@@ -19,12 +19,12 @@ import {useSendContext} from '../Context/SendContext'
 
 export type Params = {
   yoroiUnsignedTx: YoroiUnsignedTx
-  defaultAssetAmount: BigNumber
+  defaultAssetAmount: Quantity
   address: string
-  balanceAfterTx: BigNumber
-  availableAmount: BigNumber
-  fee: BigNumber
-  tokens: YoroiAmounts
+  balanceAfterTx: Quantity
+  availableAmount: Quantity
+  fee: Quantity
+  selectedTokens: YoroiAmounts
   easyConfirmDecryptKey: string
 }
 
@@ -34,23 +34,23 @@ const isParams = (params?: Params | object | undefined): params is Params => {
     'yoroiUnsignedTx' in params &&
     typeof params.yoroiUnsignedTx === 'object' &&
     'defaultAssetAmount' in params &&
-    params.defaultAssetAmount instanceof BigNumber &&
+    typeof params.defaultAssetAmount === 'string' &&
     'address' in params &&
     typeof params.address === 'string' &&
     'balanceAfterTx' in params &&
-    params.balanceAfterTx instanceof BigNumber &&
+    typeof params.balanceAfterTx === 'string' &&
     'availableAmount' in params &&
-    params.availableAmount instanceof BigNumber &&
+    typeof params.availableAmount === 'string' &&
     'fee' in params &&
-    params.fee instanceof BigNumber &&
-    'tokens' in params &&
-    typeof params.tokens === 'object'
+    typeof params.fee === 'string' &&
+    'selectedTokens' in params &&
+    typeof params.selectedTokens === 'object'
   )
 }
 
 export const ConfirmScreen = () => {
   const strings = useStrings()
-  const {defaultAssetAmount, address, balanceAfterTx, availableAmount, fee, tokens, yoroiUnsignedTx} =
+  const {defaultAssetAmount, address, balanceAfterTx, availableAmount, fee, selectedTokens, yoroiUnsignedTx} =
     useParams(isParams)
   const {resetToTxHistory} = useWalletNavigation()
   const wallet = useSelectedWallet()
@@ -78,18 +78,18 @@ export const ConfirmScreen = () => {
 
         <Banner
           label={strings.availableFunds}
-          text={formatTokenWithText(availableAmount, getDefaultAssetByNetworkId(wallet.networkId))}
+          text={formatTokenWithText(new BigNumber(availableAmount), getDefaultAssetByNetworkId(wallet.networkId))}
           boldText
         />
 
         <ScrollView style={styles.container} contentContainerStyle={{padding: 16}}>
           <Text small>
-            {strings.fees}: {formatTokenWithSymbol(fee, getDefaultAssetByNetworkId(wallet.networkId))}
+            {strings.fees}: {formatTokenWithSymbol(new BigNumber(fee), getDefaultAssetByNetworkId(wallet.networkId))}
           </Text>
 
           <Text small>
             {strings.balanceAfterTx}:{' '}
-            {formatTokenWithSymbol(balanceAfterTx, getDefaultAssetByNetworkId(wallet.networkId))}
+            {formatTokenWithSymbol(new BigNumber(balanceAfterTx), getDefaultAssetByNetworkId(wallet.networkId))}
           </Text>
 
           <Spacer height={16} />
@@ -101,10 +101,10 @@ export const ConfirmScreen = () => {
 
           <Text>{strings.total}</Text>
           <Text style={styles.amount}>
-            {formatTokenWithSymbol(defaultAssetAmount, getDefaultAssetByNetworkId(wallet.networkId))}
+            {formatTokenWithSymbol(new BigNumber(defaultAssetAmount), getDefaultAssetByNetworkId(wallet.networkId))}
           </Text>
 
-          {Object.entries(tokens).map((entry) => (
+          {Object.entries(selectedTokens).map((entry) => (
             <Boundary key={entry[0]}>
               <Entry tokenEntry={entry} />
             </Boundary>
@@ -143,9 +143,8 @@ export const ConfirmScreen = () => {
 const Entry = ({tokenEntry: [tokenId, quantity]}: {tokenEntry: [TokenId, Quantity]}) => {
   const wallet = useSelectedWallet()
   const tokenInfo = useTokenInfo({wallet, tokenId})
-  const amount = new BigNumber(quantity)
 
-  return <Text style={styles.amount}>{formatTokenWithText(amount, tokenInfo)}</Text>
+  return <Text style={styles.amount}>{formatTokenWithText(new BigNumber(quantity), tokenInfo)}</Text>
 }
 
 const Actions = (props: ViewProps) => <View {...props} style={{padding: 16}} />

src/Send/Context/SendContext.tsx

@@ -1,22 +1,35 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {createContext, useContext} from 'react'
 
-import {TokenId} from '../../yoroi-wallets/types'
+import {getDefaultAssetByNetworkId} from '../../legacy/config'
+import {YoroiWallet} from '../../yoroi-wallets'
+import {TokenId, YoroiAmounts} from '../../yoroi-wallets/types'
 
 const SendContext = createContext<undefined | SendContext>(undefined)
-export const SendProvider: React.FC = ({children}) => {
-  const [selectedTokenIdentifier, setSelectedTokenIdentifier] = useState<TokenId>('default')
+export const SendProvider: React.FC<SendContextProvider> = ({children, balance, wallet}) => {
+  const defaultTokenId = getDefaultAssetByNetworkId(wallet.networkId).identifier
+
+  const [selectedTokenIdentifier, setSelectedTokenIdentifier] = useState<TokenId>(defaultTokenId)
   const [sendAll, setSendAll] = useState(false)
   const [receivers, setReceivers] = useState<Array<string>>([])
   const [amount, setAmount] = useState('')
 
+  const addReceiver = (receiver) => setReceivers([...receivers, receiver])
+
   const clear = () => {
     setSendAll(false)
     setReceivers([])
     setAmount('')
   }
 
-  const addReceiver = (receiver) => [...receivers, receiver]
+  if (!balance[selectedTokenIdentifier]) {
+    setSelectedTokenIdentifier(defaultTokenId)
+    clear()
+  }
+
+  useEffect(() => {
+    clear()
+  }, [wallet])
 
   return (
     <SendContext.Provider
@@ -54,5 +67,10 @@ type SendContext = {
   amount: string
   setAmount: (amount: string) => void
   clear: () => void
-  addReceiver: (receiver: string) => Array<string>
+  addReceiver: (receiver: string) => void
+}
+
+type SendContextProvider = {
+  balance: YoroiAmounts
+  wallet: YoroiWallet
 }

src/Send/SendScreen/BalanceAfterTransaction.tsx

@@ -8,15 +8,18 @@ import {useTokenInfo} from '../../hooks'
 import {formatTokenWithSymbol} from '../../legacy/format'
 import {tokenBalanceSelector} from '../../legacy/selectors'
 import {useSelectedWallet} from '../../SelectedWallet'
+import {Quantity} from '../../yoroi-wallets/types'
 import {useStrings} from './strings'
 
-export const BalanceAfterTransaction = ({balanceAfter}: {balanceAfter: BigNumber | null}) => {
+export const BalanceAfterTransaction = ({balanceAfter}: {balanceAfter: Quantity | null}) => {
   const strings = useStrings()
   const tokenBalance = useSelector(tokenBalanceSelector)
   const wallet = useSelectedWallet()
   const tokenInfo = useTokenInfo({wallet, tokenId: tokenBalance.getDefaultId()})
 
-  const value = balanceAfter ? formatTokenWithSymbol(balanceAfter, tokenInfo) : strings.balanceAfterNotAvailable
+  const value = balanceAfter
+    ? formatTokenWithSymbol(new BigNumber(balanceAfter), tokenInfo)
+    : strings.balanceAfterNotAvailable
 
   return (
     <Text style={styles.info}>

src/Send/SendScreen/Fee.tsx

@@ -6,14 +6,15 @@ import {Text} from '../../components'
 import {getDefaultAssetByNetworkId} from '../../legacy/config'
 import {formatTokenWithSymbol} from '../../legacy/format'
 import {useSelectedWallet} from '../../SelectedWallet'
+import {Quantity} from '../../yoroi-wallets/types'
 import {useStrings} from './strings'
 
-export const Fee = ({fee}: {fee: BigNumber | null}) => {
+export const Fee = ({fee}: {fee: Quantity | null}) => {
   const strings = useStrings()
   const wallet = useSelectedWallet()
   const defaultAsset = getDefaultAssetByNetworkId(wallet.networkId)
 
-  const value = fee ? formatTokenWithSymbol(fee, defaultAsset) : strings.feeNotAvailable
+  const value = fee ? formatTokenWithSymbol(new BigNumber(fee), defaultAsset) : strings.feeNotAvailable
 
   return (
     <Text style={styles.info}>

src/Send/SendScreen/SendScreen.tsx

@@ -2,7 +2,7 @@ import {useNetInfo} from '@react-native-community/netinfo'
 import {useNavigation} from '@react-navigation/native'
 import {BigNumber} from 'bignumber.js'
 import _ from 'lodash'
-import React from 'react'
+import React, {useState} from 'react'
 import {useIntl} from 'react-intl'
 import {ActivityIndicator, Image, ScrollView, StyleSheet, View} from 'react-native'
 import {TouchableOpacity} from 'react-native-gesture-handler'
@@ -22,7 +22,8 @@ import {
 import {useSelectedWallet} from '../../SelectedWallet'
 import {COLORS} from '../../theme'
 import {UtxoAutoRefresher} from '../../UtxoAutoRefresher'
-import {YoroiAmounts, YoroiUnsignedTx} from '../../yoroi-wallets/types'
+import {Quantity, YoroiAmounts, YoroiUnsignedTx} from '../../yoroi-wallets/types'
+import {Amounts, Quantities} from '../../yoroi-wallets/utils'
 import {parseAmountDecimal} from '../../yoroi-wallets/utils/parsing'
 import type {
   AddressValidationErrors,
@@ -55,18 +56,22 @@ export const SendScreen = () => {
 
   const {selectedTokenIdentifier, sendAll, setSendAll, receivers, amount, addReceiver, setAmount} = useSendContext()
 
-  const defaultAssetAvailableAmount = new BigNumber(balance[defaultAsset.identifier] || '0')
-  const selectedAssetAvailableAmount = new BigNumber(balance[selectedTokenIdentifier] || '0')
+  const defaultAssetAvailableAmount = balance[defaultAsset.identifier]
+  const selectedAssetAvailableAmount = balance[selectedTokenIdentifier]
 
-  const [address, setAddress] = React.useState('')
-  const [addressErrors, setAddressErrors] = React.useState<AddressValidationErrors>({addressIsRequired: true})
-  const [amountErrors, setAmountErrors] = React.useState<AmountValidationErrors>({amountIsRequired: true})
-  const [balanceErrors, setBalanceErrors] = React.useState<BalanceValidationErrors>({})
-  const [balanceAfter, setBalanceAfter] = React.useState<BigNumber | null>(null)
-  const [yoroiUnsignedTx, setYoroiUnsignedTx] = React.useState<null | YoroiUnsignedTx>(null)
-  const [fee, setFee] = React.useState<BigNumber | null>(null)
-  const [recomputing, setRecomputing] = React.useState(false)
-  const [showSendAllWarning, setShowSendAllWarning] = React.useState(false)
+  if (!selectedAssetAvailableAmount) {
+    throw new Error('Invalid token')
+  }
+
+  const [address, setAddress] = useState('')
+  const [addressErrors, setAddressErrors] = useState<AddressValidationErrors>({addressIsRequired: true})
+  const [amountErrors, setAmountErrors] = useState<AmountValidationErrors>({amountIsRequired: true})
+  const [balanceErrors, setBalanceErrors] = useState<BalanceValidationErrors>({})
+  const [balanceAfter, setBalanceAfter] = useState<Quantity | null>(null)
+  const [yoroiUnsignedTx, setYoroiUnsignedTx] = useState<null | YoroiUnsignedTx>(null)
+  const [fee, setFee] = useState<Quantity | null>(null)
+  const [recomputing, setRecomputing] = useState(false)
+  const [showSendAllWarning, setShowSendAllWarning] = useState(false)
 
   const tokenInfo = useTokenInfo({wallet, tokenId: selectedTokenIdentifier})
   const assetDenomination = truncateWithEllipsis(getAssetDenominationOrId(tokenInfo), 20)
@@ -138,14 +143,14 @@ export const SendScreen = () => {
   const handleConfirm = async () => {
     if (!isValid || recomputing || !yoroiUnsignedTx) return
 
-    const defaultAssetAmount = tokenInfo.isDefault
-      ? parseAmountDecimal(amount, tokenInfo)
+    const defaultAssetAmount: Quantity = tokenInfo.isDefault
+      ? (parseAmountDecimal(amount, tokenInfo).toString() as Quantity)
       : // note: inside this if balanceAfter shouldn't be null
-        defaultAssetAvailableAmount.minus(balanceAfter ?? 0)
+        Quantities.diff(defaultAssetAvailableAmount, balanceAfter ?? '0')
 
-    const tokens: YoroiAmounts = tokenInfo.isDefault
+    const selectedTokens: YoroiAmounts = tokenInfo.isDefault
       ? sendAll
-        ? Object.fromEntries(Object.entries(balance).filter((entry) => entry[0] !== defaultAsset.identifier))
+        ? Amounts.remove(balance, [defaultAsset.identifier])
         : {}
       : {
           [selectedTokenIdentifier]: balance[selectedTokenIdentifier],
@@ -167,7 +172,7 @@ export const SendScreen = () => {
             balanceAfterTx: balanceAfter,
             utxos,
             fee,
-            tokens,
+            selectedTokens,
           },
         },
       },
@@ -226,7 +231,11 @@ export const SendScreen = () => {
             right={<Image source={require('../../assets/img/arrow_down_fill.png')} />}
             editable={false}
             label={strings.asset}
-            value={`${assetDenomination}: ${formatTokenAmount(selectedAssetAvailableAmount, tokenInfo, 15)}`}
+            value={`${assetDenomination}: ${formatTokenAmount(
+              new BigNumber(selectedAssetAvailableAmount),
+              tokenInfo,
+              15,
+            )}`}
             autoComplete={false}
           />
         </TouchableOpacity>