convert - tokens vs UTXO screen

app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx

@@ -13,6 +13,7 @@ import { ConversionMode, ConvertScreen } from './ConvertScreen'
 import { ReceiveScreen } from './screens/ReceiveScreen'
 import { SendScreen } from './screens/SendScreen'
 import { TokenDetailScreen } from './screens/TokenDetailScreen'
+import { TokensVsUtxoScreen } from './screens/TokensVsUtxoScreen'
 
 export interface BalanceParamList {
   BalancesScreen: undefined
@@ -21,6 +22,7 @@ export interface BalanceParamList {
   TokenDetailScreen: { token: WalletToken }
   ConvertScreen: { mode: ConversionMode }
   BarCodeScanner: { onQrScanned: (value: string) => void }
+  TokenVsUtxoScreen: undefined
 
   [key: string]: undefined | object
 }
@@ -87,6 +89,14 @@ export function BalancesNavigator (): JSX.Element {
           headerBackTitleVisible: false
         }}
       />
+      <BalanceStack.Screen
+        name='TokensVsUtxo'
+        component={TokensVsUtxoScreen}
+        options={{
+          headerTitle: translate('screens/ConvertScreen', 'Tokens vs UTXO'),
+          headerBackTitleVisible: false
+        }}
+      />
     </BalanceStack.Navigator>
   )
 }

app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx

@@ -2,6 +2,7 @@ import { CTransactionSegWit, TransactionSegWit } from '@defichain/jellyfish-tran
 import { AddressToken } from '@defichain/whale-api-client/dist/api/address'
 import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
 import { MaterialIcons } from '@expo/vector-icons'
+import { useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
@@ -124,7 +125,7 @@ function getDFIBalances (mode: ConversionMode, tokens: AddressToken[]): [source:
 }
 
 function ConversionIOCard (props: { style?: StyleProp<ViewStyle>, mode: 'input' | 'output', unit: string, current: string, balance: BigNumber, onChange?: (amount: string) => void }): JSX.Element {
-  const iconType = props.unit === 'UTXOS' ? '_UTXO' : 'DFI'
+  const iconType = props.unit === 'UTXO' ? '_UTXO' : 'DFI'
   const titlePrefix = props.mode === 'input' ? 'CONVERT' : 'TO'
   const title = `${translate('screens/Convert', titlePrefix)} ${props.unit}`
 
@@ -194,14 +195,18 @@ function ToggleModeButton (props: { onPress: () => void }): JSX.Element {
 }
 
 function TokenVsUtxosInfo (): JSX.Element {
+  const navigation = useNavigation()
   return (
     <TouchableOpacity
-      style={tailwind('flex-row p-4 my-3 items-center justify-center')} onPress={() => { /* TODO: token vs utxo explanation UI */
+      style={tailwind('flex-row px-4 py-2 mb-14 items-center justify-start')}
+      onPress={() => {
+        navigation.navigate('TokensVsUtxo')
       }}
+      testID='token_vs_utxo_info'
     >
-      <MaterialIcons name='info' size={24} color='gray' />
+      <MaterialIcons name='help' size={16} style={tailwind('text-primary')} />
       <Text
-        style={tailwind('ml-2')}
+        style={tailwind('ml-1 text-primary')}
       >{translate('screens/ConvertScreen', "Tokens vs UTXO, what's the difference?")}
       </Text>
     </TouchableOpacity>
@@ -212,7 +217,7 @@ function TokenVsUtxosInfo (): JSX.Element {
  * footer, UTXOS or Token DFI balance preview AFTER conversion
  */
 function PreviewConvResult (props: { unit: string, balance: BigNumber, testID: string }): JSX.Element {
-  const iconType = props.unit === 'UTXOS' ? '_UTXO' : 'DFI'
+  const iconType = props.unit === 'UTXO' ? '_UTXO' : 'DFI'
   const DFIIcon = getTokenIcon(iconType)
   return (
     <View style={tailwind('flex-row h-12 pl-4 pr-4 items-center')}>

app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.test.tsx

@@ -0,0 +1,13 @@
+import { fireEvent, render } from "@testing-library/react-native";
+import * as React from "react";
+import { TokensVsUtxoScreen } from "./TokensVsUtxoScreen";
+
+describe('tokens vs utxo screen', () => {
+	it('should render', async() => {
+		const component = (
+			<TokensVsUtxoScreen />
+		)
+		const rendered = render(component)
+		expect(rendered.toJSON()).toMatchSnapshot()
+	})
+})

app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.tsx

@@ -0,0 +1,67 @@
+import { MaterialIcons } from '@expo/vector-icons'
+import React from 'react'
+import { ScrollView, View } from 'react-native'
+import { Text } from '../../../../../components'
+import { translate } from '../../../../../translations'
+import { tailwind } from '../../../../../tailwind'
+import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
+
+export function TokensVsUtxoScreen (): JSX.Element {
+  return (
+    <ScrollView
+      testID='token_vs_utxo_screen' style={tailwind('bg-white h-full')}
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: 'space-between'
+      }}
+    >
+      <View style={tailwind('pt-6 px-4 border-b-2 border-gray-200')}>
+        <Text style={tailwind('text-black pb-6')}>
+          {translate('screens/TokensVsUtxoScreen', 'DFI exists in two forms – UTXO and token, which are interchangeable depending on the usage. You can easily convert between the two forms with the app.')}
+        </Text>
+        <Text style={tailwind('text-black pb-6')}>
+          {translate('screens/TokensVsUtxoScreen', 'UTXO DFI is the main form DFI and is used for core cryptocurrency purposes like send, receive and fees. DFI tokens are used for DeFi functions such as swaps and liquidity mining.')}
+        </Text>
+        <Text style={tailwind('text-black pb-4')}>
+          {translate('screens/TokensVsUtxoScreen', 'Your DFI balance includes both UTXO and tokens.')}
+        </Text>
+      </View>
+      <View style={tailwind('flex flex-row flex-grow self-stretch items-stretch')}>
+        <View style={tailwind('w-6/12 border-r-2 border-gray-200 px-4 py-5')}>
+          <ComparisonTitle tokenUnit='_UTXO' />
+          <ComparisonRow label='Core crypto services' />
+          <ComparisonRow label='Send to other wallets' />
+          <ComparisonRow label='Receive tokens' />
+          <ComparisonRow label='Service fees' />
+        </View>
+        <View style={tailwind('w-6/12 px-4 py-5')}>
+          <ComparisonTitle tokenUnit='DFI' />
+          <ComparisonRow label='DeFi services' />
+          <ComparisonRow label='Liquidity mining' />
+          <ComparisonRow label='Atomic Swaps' />
+        </View>
+      </View>
+    </ScrollView>
+  )
+}
+
+function ComparisonTitle (props: {tokenUnit: '_UTXO' | 'DFI'}): JSX.Element {
+  const TokenIcon = getTokenIcon(props.tokenUnit)
+  const label = props.tokenUnit === '_UTXO' ? 'DFI (UTXO)' : 'DFI (Token)'
+
+  return (
+    <View style={tailwind('flex flex-row items-center pb-5')}>
+      <TokenIcon width={24} height={24} style={tailwind('mr-2')} />
+      <Text style={tailwind('text-lg')}>{translate('screens/TokensVsUtxoScreen', label)}</Text>
+    </View>
+  )
+}
+
+function ComparisonRow (props: {label: string}): JSX.Element {
+  return (
+    <View style={tailwind('flex flex-row pb-2')}>
+      <MaterialIcons name='check' size={24} style={tailwind('text-green-500 mr-2')} />
+      <Text style={tailwind('text-sm font-medium')}>{translate('screens/TokensVsUtxoScreen', props.label)}</Text>
+    </View>
+  )
+}