feature(governance): no funds warning

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: () => (
+              <View style={{...StyleSheet.absoluteFillObject, backgroundColor: colors.background}} />
+            ),
             tabBarStyle: {
               borderTopColor: colors.divider,
               borderTopWidth: 2 * StyleSheet.hairlineWidth,
-              backgroundColor: colors.background,
+
               // keyboardWillShow keyboardWillHiden dont work on android
               display: isKeyboardOpen ? 'none' : undefined,
             },

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 = () => {
           <Stack.Screen name="staking-gov-tx-success" component={SuccessTxScreen} options={txStatusOptions} />
 
           <Stack.Screen name="staking-gov-tx-failed" component={FailedTxScreen} options={txStatusOptions} />
+
+          <Stack.Screen
+            name="staking-gov-no-funds"
+            component={NoFundsScreen}
+            options={{title: strings.governanceCentreTitle}}
+          />
         </Stack.Navigator>
       </SafeArea>
     </GovernanceProvider>

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<Routes>()
@@ -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
 }

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',

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 (
+    <Svg width={255} height={192} viewBox="0 0 255 192" fill="none" {...props}>
+      <Path
+        d="M87.733 189.069l166.891-94.883M24.314 141.794l155.683-88.51M78.051 41.94l175.808 99.825M1.859 106.958l147.372 83.68"
+        stroke="#DCE0E9"
+        strokeWidth={0.5}
+      />
+
+      <Path
+        d="M152.124 1.12l5.297 3.038-3.684 5.556.175 51.072c.022 6.58-3.936 14.242-8.856 17.11l-32.848 19.173a111.404 111.404 0 01-.609 4.633 25.332 25.332 0 01-1.459 5.418l1.536-1.217-1.465 6.58-6.669 11.67-5.516-3.29a1.49 1.49 0 01-.34-.198 1.428 1.428 0 01-.404-1.859 23.34 23.34 0 001.908-5.039c.639-2.319-.704-5.751-1.823-8.035l-11.962 6.982-4.761 7.178-6.063-3.181c-2.208-.893-3.673-3.526-3.673-7.474l-.18-52.975c-.022-6.581 3.936-14.242 8.855-17.11L144.8 1.087c1.842-1.08 3.559-1.327 4.986-.866.805.228 1.588.53 2.339.9z"
+        fill="url(#paint0_linear_15646_35842)"
+      />
+
+      <Path
+        d="M160.346 11.255c0-6.58-4.023-9.597-8.932-6.729l-65.216 38.07c-4.92 2.868-8.877 10.53-8.856 17.11l.18 52.97c0 6.58 4.024 9.597 8.933 6.729l20.144-11.758a18.15 18.15 0 01-1.126 9.844 60.893 60.893 0 01-2.383 4.765 1.466 1.466 0 00.286 1.765 1.457 1.457 0 001.775.171c4.701-3.071 11.25-8.999 12.731-18.75.263-1.727.465-3.29.618-4.743l33.171-19.364c4.92-2.868 8.877-10.53 8.856-17.11l-.181-52.97z"
+        fill="#E8F4FF"
+      />
+
+      <Path
+        d="M136.989 47.765c0 2.676 2.142 3.508 4.786 1.86 2.643-1.649 4.785-5.154 4.785-7.83 0-2.675-2.142-3.508-4.785-1.859-2.644 1.648-4.786 5.154-4.786 7.83z"
+        fill="url(#paint1_linear_15646_35842)"
+      />
+
+      <Path
+        d="M98.017 72.075c0 2.675 2.142 3.508 4.785 1.86 2.643-1.65 4.785-5.155 4.785-7.83 0-2.676-2.142-3.508-4.785-1.86-2.643 1.649-4.785 5.154-4.785 7.83z"
+        fill="url(#paint2_linear_15646_35842)"
+      />
+
+      <Path
+        d="M133.34 72.008l-19.358 12.075c-1.183.737-2.151.362-2.151-.836 0-1.197.968-2.781 2.151-3.519l19.358-12.074c1.182-.739 2.15-.362 2.15.836 0 1.197-.968 2.78-2.15 3.518z"
+        fill="url(#paint3_linear_15646_35842)"
+      />
+
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_15646_35842"
+          x1={70.7276}
+          y1={124.154}
+          x2={157.421}
+          y2={124.154}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint1_linear_15646_35842"
+          x1={98.0167}
+          y1={84.4609}
+          x2={146.56}
+          y2={84.4609}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint2_linear_15646_35842"
+          x1={98.0167}
+          y1={84.4609}
+          x2={146.56}
+          y2={84.4609}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint3_linear_15646_35842"
+          x1={98.0167}
+          y1={84.4609}
+          x2={146.56}
+          y2={84.4609}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

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'

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) => {

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) => <SafeArea>{story()}</SafeArea>)
+  .add('Default', () => <NoFundsScreen />)

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<TxHistoryRouteNavigation>()
+  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 (
+    <SafeArea style={styles.root}>
+      <View style={styles.center}>
+        <NoFunds />
+
+        <Space height="lg" />
+
+        <Text style={styles.title}>{strings.noFunds}</Text>
+
+        <Space height="lg" />
+
+        <Button title={buttonText} textStyles={styles.button} shelleyTheme onPress={handleOnTryAgain} />
+      </View>
+    </SafeArea>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+
+  const styles = StyleSheet.create({
+    root: {
+      backgroundColor: color.bg_color_high,
+      ...atoms.flex_1,
+      ...atoms.p_xl,
+    },
+    center: {
+      ...atoms.flex_1,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+    },
+    title: {
+      ...atoms.heading_3_medium,
+      ...atoms.text_center,
+      maxWidth: 320,
+      color: color.gray_cmax,
+    },
+    button: {
+      ...atoms.px_xl,
+      ...atoms.py_lg,
+    },
+  })
+
+  return styles
+}

apps/wallet-mobile/src/features/Staking/Governance/useCases/NoFunds/index.ts

@@ -0,0 +1 @@
+export {NoFundsScreen} from './NoFundsScreen'

apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

@@ -173,9 +173,12 @@
   "components.governance.thisTransactionCanTakeAWhile": "This transaction can take a while!",
   "components.governance.total": "Total",
   "components.governance.transactionDetails": "Transaction details",
-  "components.governance.transactionFailed": "Transaction failed",
+  "components.governance.transactionFailed": "To participate in governance you need to have ADA in your wallet",
+  "components.governance.noFunds": "To participate in governance you need to have ADA in your wallet",
   "components.governance.transactionFailedDescription": "Your transaction has not been processed properly due to technical issues",
   "components.governance.tryAgain": "Try again",
+  "components.governance.buyAda": "Buy ada",
+  "components.governance.goToFaucet": "Go to tada faucet",
   "components.governance.txFees": "Transaction fee",
   "components.governance.withdrawWarningButton": "Participate on governance",
   "components.governance.withdrawWarningDescription": "To withdraw your rewards, you need to participate in the Cardano Governance. Your rewards will continue to accumulate, but you are only able to withdraw it once you join the Governance process.",