From 1d5e5867c2a0c81a0d6efa28913de22b4d130aaf Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Thu, 22 Aug 2024 17:29:47 +0200 Subject: [PATCH 1/3] feature(governance): no funds warning --- apps/wallet-mobile/src/WalletNavigator.tsx | 7 +- .../Governance/GovernanceNavigator.tsx | 7 + .../Staking/Governance/common/navigation.ts | 2 + .../Staking/Governance/common/strings.ts | 5 + .../Governance/illustrations/NoFunds.tsx | 125 ++++++ .../Staking/Governance/illustrations/index.ts | 1 + .../Governance/useCases/Home/HomeScreen.tsx | 4 +- .../NoFunds/NoFundsScreen.stories.tsx | 9 + .../useCases/NoFunds/NoFundsScreen.tsx | 62 +++ .../Governance/useCases/NoFunds/index.ts | 1 + .../src/kernel/i18n/locales/en-US.json | 3 +- .../messages/src/WalletNavigator.json | 96 ++--- .../PairedBalance/PairedBalance.json | 8 +- .../Staking/Governance/common/strings.json | 375 +++++++++--------- 14 files changed, 469 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..ecfc6c8823 100644 --- a/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts +++ b/apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts @@ -38,6 +38,7 @@ 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), withdrawWarningTitle: intl.formatMessage(messages.withdrawWarningTitle), @@ -193,6 +194,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', 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..6094cfacfd 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,8 @@ const NeverParticipatedInGovernanceVariant = () => { }) const createGovernanceTxMutation = useCreateGovernanceTx(wallet, { - useErrorBoundary: true, + useErrorBoundary: (error) => !(error instanceof NotEnoughMoneyToSendError), + onError: () => 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..94dae1023c --- /dev/null +++ b/apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/NoFundsScreen.tsx @@ -0,0 +1,62 @@ +import {useTheme} from '@yoroi/theme' +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Button, Text} from '../../../../../components' +import {SafeArea} from '../../../../../components/SafeArea' +import {Space} from '../../../../../components/Space/Space' +import {useNavigateTo, useStrings} from '../../common' +import {NoFunds} from '../../illustrations' + +export const NoFundsScreen = () => { + const strings = useStrings() + const navigate = useNavigateTo() + const styles = useStyles() + + const handleOnTryAgain = () => { + navigate.home() + } + + return ( + + + + + + + {strings.noFunds} + + + +