diff --git a/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx b/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx
index 7a555b28a0..0692d9653e 100644
--- a/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx
+++ b/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
}}
/>
+
)
}
diff --git a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx
index f047046d39..ae38dc4e4e 100644
--- a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx
+++ b/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, 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 (
{ /* 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'
>
-
+
{translate('screens/ConvertScreen', "Tokens vs UTXO, what's the difference?")}
@@ -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 (
diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.test.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.test.tsx
new file mode 100644
index 0000000000..5601dfeb4a
--- /dev/null
+++ b/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 = (
+
+ )
+ const rendered = render(component)
+ expect(rendered.toJSON()).toMatchSnapshot()
+ })
+})
\ No newline at end of file
diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokensVsUtxoScreen.tsx
new file mode 100644
index 0000000000..2716df0835
--- /dev/null
+++ b/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 (
+
+
+
+ {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.')}
+
+
+ {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.')}
+
+
+ {translate('screens/TokensVsUtxoScreen', 'Your DFI balance includes both UTXO and tokens.')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function ComparisonTitle (props: {tokenUnit: '_UTXO' | 'DFI'}): JSX.Element {
+ const TokenIcon = getTokenIcon(props.tokenUnit)
+ const label = props.tokenUnit === '_UTXO' ? 'DFI (UTXO)' : 'DFI (Token)'
+
+ return (
+
+
+ {translate('screens/TokensVsUtxoScreen', label)}
+
+ )
+}
+
+function ComparisonRow (props: {label: string}): JSX.Element {
+ return (
+
+
+ {translate('screens/TokensVsUtxoScreen', props.label)}
+
+ )
+}
diff --git a/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokensVsUtxoScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokensVsUtxoScreen.test.tsx.snap
new file mode 100644
index 0000000000..a4a8d12443
--- /dev/null
+++ b/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokensVsUtxoScreen.test.tsx.snap
@@ -0,0 +1,511 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tokens vs utxo screen should render 1`] = `
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ Your DFI balance includes both UTXO and tokens.
+
+
+
+
+
+
+
+
+
+
+
+
+ DFI (UTXO)
+
+
+
+
+
+ Core crypto services
+
+
+
+
+
+ Send to other wallets
+
+
+
+
+
+ Receive tokens
+
+
+
+
+
+ Service fees
+
+
+
+
+
+
+
+
+
+
+
+
+ DFI (Token)
+
+
+
+
+
+ DeFi services
+
+
+
+
+
+ Liquidity mining
+
+
+
+
+
+ Atomic Swaps
+
+
+
+
+
+
+`;
diff --git a/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts b/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts
index f5600ee2bb..094659ceb9 100644
--- a/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts
+++ b/cypress/integration/functional/balances/convert/convert_account_to_utxos.spec.ts
@@ -49,4 +49,9 @@ context('wallet/balances/convert - accountToUtxos', () => {
cy.getByTestID('text_preview_input_desc').contains('DFI (UTXO)')
cy.getByTestID('text_preview_output_desc').contains('DFI (TOKEN)')
})
+
+ it('should be able to render token vs utxo screen', function () {
+ cy.getByTestID('token_vs_utxo_info').click()
+ cy.getByTestID('token_vs_utxo_screen').should('exist')
+ })
})
diff --git a/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts b/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts
index cf5d90a545..8214adf20c 100644
--- a/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts
+++ b/cypress/integration/functional/balances/convert/convert_utxos_to_account.spec.ts
@@ -47,4 +47,9 @@ context('wallet/balances/convert - utxosToAccount', () => {
cy.getByTestID('text_preview_input_desc').contains('DFI (TOKEN)')
cy.getByTestID('text_preview_output_desc').contains('DFI (UTXO)')
})
+
+ it('should be able to render token vs utxo screen', function () {
+ cy.getByTestID('token_vs_utxo_info').click()
+ cy.getByTestID('token_vs_utxo_screen').should('exist')
+ })
})