From 97921c6eb8c3c7a4657d67f1142c4105a3206fbc Mon Sep 17 00:00:00 2001 From: banklesss <105349292+banklesss@users.noreply.github.com> Date: Fri, 23 Aug 2024 19:09:05 +0200 Subject: [PATCH] feature(governance): no funds warning (#3554) --- apps/wallet-mobile/src/WalletNavigator.tsx | 7 +- .../Governance/GovernanceNavigator.tsx | 7 + .../Staking/Governance/common/navigation.ts | 2 + .../Staking/Governance/common/strings.ts | 15 + .../Governance/illustrations/NoFunds.tsx | 125 ++++++ .../Staking/Governance/illustrations/index.ts | 1 + .../Governance/useCases/Home/HomeScreen.tsx | 8 +- .../NoFunds/NoFundsScreen.stories.tsx | 9 + .../useCases/NoFunds/NoFundsScreen.tsx | 83 ++++ .../Governance/useCases/NoFunds/index.ts | 1 + .../src/kernel/i18n/locales/en-US.json | 5 +- .../messages/src/WalletNavigator.json | 96 ++--- .../PairedBalance/PairedBalance.json | 8 +- .../Staking/Governance/common/strings.json | 405 ++++++++++-------- 14 files changed, 536 insertions(+), 236 deletions(-) create mode 100644 apps/wallet-mobile/src/features/Staking/Governance/illustrations/NoFunds.tsx create mode 100644 apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.stories.tsx create mode 100644 apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.tsx create mode 100644 apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/index.ts diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index e5449ad5c6..4b64dc7397 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -14,7 +14,7 @@ import {TransferProvider} from '@yoroi/transfer' import {Swap} from '@yoroi/types' import React from 'react' import {defineMessages, useIntl} from 'react-intl' -import {Keyboard, Platform, StyleSheet} from 'react-native' +import {Keyboard, Platform, StyleSheet, View} from 'react-native' import {Icon, OfflineBanner} from './components' import {DiscoverNavigator} from './features/Discover' @@ -111,10 +111,13 @@ const WalletTabNavigator = () => { tabBarLabelStyle: styles.labelStyle, tabBarActiveTintColor: colors.active, tabBarInactiveTintColor: colors.inactive, + tabBarBackground: () => ( + + ), tabBarStyle: { borderTopColor: colors.divider, borderTopWidth: 2 * StyleSheet.hairlineWidth, - backgroundColor: colors.background, + // keyboardWillShow keyboardWillHiden dont work on android display: isKeyboardOpen ? 'none' : undefined, }, diff --git a/apps/wallet-mobile/src/features/Staking/Governance/GovernanceNavigator.tsx b/apps/wallet-mobile/src/features/Staking/Governance/GovernanceNavigator.tsx index 923a1bc7f0..af7c24890b 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/GovernanceNavigator.tsx +++ b/apps/wallet-mobile/src/features/Staking/Governance/GovernanceNavigator.tsx @@ -7,6 +7,7 @@ import {defaultStackNavigationOptions} from '../../../kernel/navigation' import {NetworkTag} from '../../Settings/ChangeNetwork/NetworkTag' import {NavigationStack, useGovernanceManagerMaker, useStrings} from './common' import {ChangeVoteScreen, ConfirmTxScreen, FailedTxScreen, HomeScreen, SuccessTxScreen} from './useCases' +import {NoFundsScreen} from './useCases/NoFunds/NoFundsScreen' const Stack = NavigationStack @@ -45,6 +46,12 @@ export const GovernanceNavigator = () => { + + diff --git a/apps/wallet-mobile/src/features/Staking/Governance/common/navigation.ts b/apps/wallet-mobile/src/features/Staking/Governance/common/navigation.ts index 437f772078..d9fe24ac46 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/common/navigation.ts +++ b/apps/wallet-mobile/src/features/Staking/Governance/common/navigation.ts @@ -18,6 +18,7 @@ export type Routes = { } 'staking-gov-tx-success'?: {navigateToStaking?: boolean; kind: GovernanceVote['kind']} 'staking-gov-tx-failed': undefined + 'staking-gov-no-funds': undefined } export const NavigationStack = createStackNavigator() @@ -30,5 +31,6 @@ export const useNavigateTo = () => { confirmTx: (params: Routes['staking-gov-confirm-tx']) => navigation.navigate('staking-gov-confirm-tx', params), txSuccess: (params?: Routes['staking-gov-tx-success']) => navigation.navigate('staking-gov-tx-success', params), txFailed: () => navigation.navigate('staking-gov-tx-failed'), + noFunds: () => navigation.navigate('staking-gov-no-funds'), }).current } diff --git a/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts b/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts index 7b478e681e..7931a0cdb7 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts +++ b/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts @@ -38,8 +38,11 @@ export const useStrings = () => { transactionDetails: intl.formatMessage(messages.transactionDetails), total: intl.formatMessage(messages.total), transactionFailed: intl.formatMessage(messages.transactionFailed), + noFunds: intl.formatMessage(messages.noFunds), transactionFailedDescription: intl.formatMessage(messages.transactionFailedDescription), tryAgain: intl.formatMessage(messages.tryAgain), + buyAda: intl.formatMessage(messages.buyAda), + goToFaucet: intl.formatMessage(messages.goToFaucet), withdrawWarningTitle: intl.formatMessage(messages.withdrawWarningTitle), withdrawWarningDescription: intl.formatMessage(messages.withdrawWarningDescription), withdrawWarningButton: intl.formatMessage(messages.withdrawWarningButton), @@ -193,6 +196,10 @@ const messages = defineMessages({ id: 'components.governance.transactionFailed', defaultMessage: '!!!Transaction failed', }, + noFunds: { + id: 'components.governance.noFunds', + defaultMessage: '!!!To participate in governance you need to have ADA in your wallet', + }, transactionFailedDescription: { id: 'components.governance.transactionFailedDescription', defaultMessage: '!!!Your transaction has not been processed properly due to technical issues', @@ -201,6 +208,14 @@ const messages = defineMessages({ id: 'components.governance.tryAgain', defaultMessage: '!!!Try again', }, + buyAda: { + id: 'components.governance.buyAda', + defaultMessage: '!!!Buy ada', + }, + goToFaucet: { + id: 'components.governance.goToFaucet', + defaultMessage: '!!!Go to tada faucet', + }, withdrawWarningTitle: { id: 'components.governance.withdrawWarningTitle', defaultMessage: '!!!Withdraw warning', diff --git a/apps/wallet-mobile/src/features/Staking/Governance/illustrations/NoFunds.tsx b/apps/wallet-mobile/src/features/Staking/Governance/illustrations/NoFunds.tsx new file mode 100644 index 0000000000..5dcf5da130 --- /dev/null +++ b/apps/wallet-mobile/src/features/Staking/Governance/illustrations/NoFunds.tsx @@ -0,0 +1,125 @@ +import * as React from 'react' +import Svg, {Defs, LinearGradient, Path, Stop, SvgProps} from 'react-native-svg' + +export const NoFunds = (props: SvgProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/wallet-mobile/src/features/Staking/Governance/illustrations/index.ts b/apps/wallet-mobile/src/features/Staking/Governance/illustrations/index.ts index f0e7e74b01..9ee728d435 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/illustrations/index.ts +++ b/apps/wallet-mobile/src/features/Staking/Governance/illustrations/index.ts @@ -1,3 +1,4 @@ export {BrokenImage} from './BrokenImage' export {GovernanceImage} from './GovernanceImage' +export {NoFunds} from './NoFunds' export {SuccessTxImage} from './SuccessTxImage' diff --git a/apps/wallet-mobile/src/features/Staking/Governance/useCases/Home/HomeScreen.tsx b/apps/wallet-mobile/src/features/Staking/Governance/useCases/Home/HomeScreen.tsx index c7afce2595..9be82f2308 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/useCases/Home/HomeScreen.tsx +++ b/apps/wallet-mobile/src/features/Staking/Governance/useCases/Home/HomeScreen.tsx @@ -1,3 +1,4 @@ +import {NotEnoughMoneyToSendError} from '@emurgo/yoroi-lib/dist/errors' import {useFocusEffect} from '@react-navigation/native' import {isNonNullable, isString} from '@yoroi/common' import { @@ -216,7 +217,12 @@ const NeverParticipatedInGovernanceVariant = () => { }) const createGovernanceTxMutation = useCreateGovernanceTx(wallet, { - useErrorBoundary: true, + useErrorBoundary: (error) => !(error instanceof NotEnoughMoneyToSendError), + onError: (error) => { + if (error instanceof NotEnoughMoneyToSendError) { + navigateTo.noFunds() + } + }, }) const openDRepIdModal = (onSubmit: (drepId: string) => void) => { diff --git a/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.stories.tsx b/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.stories.tsx new file mode 100644 index 0000000000..ff29da0db1 --- /dev/null +++ b/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.stories.tsx @@ -0,0 +1,9 @@ +import {storiesOf} from '@storybook/react-native' +import React from 'react' + +import {SafeArea} from '../../../../../components/SafeArea' +import {NoFundsScreen} from './NoFundsScreen' + +storiesOf('Governance/NoFundsScreen', module) + .addDecorator((story) => {story()}) + .add('Default', () => ) diff --git a/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.tsx b/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.tsx new file mode 100644 index 0000000000..7758c01455 --- /dev/null +++ b/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.tsx @@ -0,0 +1,83 @@ +import {useNavigation} from '@react-navigation/native' +import {useTheme} from '@yoroi/theme' +import {Chain} from '@yoroi/types' +import React from 'react' +import {Linking, StyleSheet, View} from 'react-native' + +import {Button, Text} from '../../../../../components' +import {SafeArea} from '../../../../../components/SafeArea' +import {Space} from '../../../../../components/Space/Space' +import {TxHistoryRouteNavigation} from '../../../../../kernel/navigation' +import {useWalletManager} from '../../../../WalletManager/context/WalletManagerProvider' +import {useStrings} from '../../common' +import {NoFunds} from '../../illustrations' + +export const NoFundsScreen = () => { + const strings = useStrings() + const navigation = useNavigation() + const styles = useStyles() + const { + selected: {network}, + } = useWalletManager() + + const handleOnTryAgain = () => { + if (network === Chain.Network.Sancho) { + Linking.openURL('https://sancho.network/faucet/') + return + } + + if (network === Chain.Network.Preprod) { + Linking.openURL('https://sancho.network/faucet/') + return + } + + navigation.navigate('exchange-create-order') + } + + const buttonText = network === Chain.Network.Mainnet ? strings.buyAda : strings.goToFaucet + + return ( + + + + + + + {strings.noFunds} + + + +