From 52df775a2928a67a3361768b5a2a6fb4aec6f8b6 Mon Sep 17 00:00:00 2001 From: jorbuedo Date: Mon, 22 Apr 2024 11:32:05 +0200 Subject: [PATCH 1/9] feature(pool-transition): Adds Pool transition modal and warnings (#3184) --- .../.storybook/storybook.requires.js | 2 + apps/wallet-mobile/package.json | 10 +- .../wallet-mobile/src/Dashboard/Dashboard.tsx | 98 ++++--- .../src/Dashboard/DashboardNavigator.tsx | 4 +- .../src/Staking/FailedTx/FailedTxImage.tsx | 47 ++++ .../FailedTx/FailedTxScreen.stories.tsx | 8 + .../src/Staking/FailedTx/FailedTxScreen.tsx | 131 ++++++++++ .../PoolTransitionModal.stories.tsx | 42 +++ .../PoolTransition/PoolTransitionModal.tsx | 241 ++++++++++++++++++ .../PoolTransition/PoolTransitionNotice.tsx | 90 +++++++ .../PoolTransition/usePoolTransition.tsx | 156 ++++++++++++ .../PoolTransition/usePoolTransitionModal.tsx | 24 ++ .../Staking/StakingCenter/StakingCenter.tsx | 8 +- apps/wallet-mobile/src/Staking/index.ts | 1 + .../wallet-mobile/src/TxHistory/TxHistory.tsx | 6 +- .../src/components/Icon/ArrowDown.tsx | 17 ++ .../src/components/Icon/index.ts | 2 + apps/wallet-mobile/src/features/Menu/Menu.tsx | 49 ++-- .../wallet-mobile/src/i18n/locales/en-US.json | 20 +- apps/wallet-mobile/src/navigation.tsx | 7 +- .../cardano/assetUtils/assetUtils.test.ts | 2 +- .../cardano/getMinAmounts.test.ts | 4 +- .../src/yoroi-wallets/utils/timeUtils.test.ts | 14 + .../src/yoroi-wallets/utils/timeUtils.ts | 17 ++ .../messages/src/Dashboard/Dashboard.json | 10 +- .../src/Dashboard/DashboardNavigator.json | 10 +- .../src/Staking/FailedTx/FailedTxScreen.json | 62 +++++ .../PoolTransition/usePoolTransition.json | 197 ++++++++++++++ .../Staking/StakingCenter/StakingCenter.json | 18 +- .../messages/src/TxHistory/TxHistory.json | 18 +- .../src/TxHistory/usePoolTransition.json | 197 ++++++++++++++ packages/swap/package.json | 4 +- yarn.lock | 79 +++--- 33 files changed, 1459 insertions(+), 136 deletions(-) create mode 100644 apps/wallet-mobile/src/Staking/FailedTx/FailedTxImage.tsx create mode 100644 apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.stories.tsx create mode 100644 apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx create mode 100644 apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.stories.tsx create mode 100644 apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx create mode 100644 apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionNotice.tsx create mode 100644 apps/wallet-mobile/src/Staking/PoolTransition/usePoolTransition.tsx create mode 100644 apps/wallet-mobile/src/Staking/PoolTransition/usePoolTransitionModal.tsx create mode 100644 apps/wallet-mobile/src/components/Icon/ArrowDown.tsx create mode 100644 apps/wallet-mobile/src/yoroi-wallets/utils/timeUtils.test.ts create mode 100644 apps/wallet-mobile/translations/messages/src/Staking/FailedTx/FailedTxScreen.json create mode 100644 apps/wallet-mobile/translations/messages/src/Staking/PoolTransition/usePoolTransition.json create mode 100644 apps/wallet-mobile/translations/messages/src/TxHistory/usePoolTransition.json diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js index 8d43d52f4b..f3a090b1da 100644 --- a/apps/wallet-mobile/.storybook/storybook.requires.js +++ b/apps/wallet-mobile/.storybook/storybook.requires.js @@ -254,7 +254,9 @@ const getStories = () => { "./src/Nfts/Nfts.stories.tsx": require("../src/Nfts/Nfts.stories.tsx"), "./src/Nfts/NoNftsScreen.stories.tsx": require("../src/Nfts/NoNftsScreen.stories.tsx"), "./src/Staking/DelegationConfirmation/DelegationConfirmation.stories.tsx": require("../src/Staking/DelegationConfirmation/DelegationConfirmation.stories.tsx"), + "./src/Staking/FailedTx/FailedTxScreen.stories.tsx": require("../src/Staking/FailedTx/FailedTxScreen.stories.tsx"), "./src/Staking/PoolDetails/PoolDetailScreen.stories.tsx": require("../src/Staking/PoolDetails/PoolDetailScreen.stories.tsx"), + "./src/Staking/PoolTransition/PoolTransitionModal.stories.tsx": require("../src/Staking/PoolTransition/PoolTransitionModal.stories.tsx"), "./src/Staking/PoolWarningModal/PoolWarningModal.stories.tsx": require("../src/Staking/PoolWarningModal/PoolWarningModal.stories.tsx"), "./src/Staking/StakingCenter/StakingCenter.stories.tsx": require("../src/Staking/StakingCenter/StakingCenter.stories.tsx"), "./src/TxHistory/AssetList/ActionsBanner.stories.tsx": require("../src/TxHistory/AssetList/ActionsBanner.stories.tsx"), diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json index c19605b760..311186f4ed 100644 --- a/apps/wallet-mobile/package.json +++ b/apps/wallet-mobile/package.json @@ -90,16 +90,16 @@ ] }, "dependencies": { - "@amplitude/analytics-react-native": "^1.3.1", + "@amplitude/analytics-react-native": "1.3.1", "@cardano-foundation/ledgerjs-hw-app-cardano": "^6.0.0", "@emurgo/cip14-js": "^3.0.1", "@emurgo/cip4-js": "1.0.7", - "@emurgo/cross-csl-core": "^4.2.0", - "@emurgo/cross-csl-mobile": "^4.2.0", + "@emurgo/cross-csl-core": "4.4.0", + "@emurgo/cross-csl-mobile": "4.4.0", "@emurgo/csl-mobile-bridge": "6.0.0-alpha.4", "@emurgo/react-native-blockies-svg": "^0.0.2", "@emurgo/react-native-hid": "^5.15.6", - "@emurgo/yoroi-lib": "0.15.1", + "@emurgo/yoroi-lib": "0.15.4-alpha.1", "@formatjs/intl-datetimeformat": "^6.7.0", "@formatjs/intl-getcanonicallocales": "^2.1.0", "@formatjs/intl-locale": "^3.2.1", @@ -214,7 +214,7 @@ "@babel/preset-react": "^7.16.7", "@babel/runtime": "^7.20.0", "@emurgo/cardano-serialization-lib-nodejs": "^9.1.4", - "@emurgo/cross-csl-nodejs": "^4.2.0", + "@emurgo/cross-csl-nodejs": "4.4.0", "@formatjs/cli": "^6.1.0", "@formatjs/ts-transformer": "^3.13.0", "@react-navigation/devtools": "^6.0.13", diff --git a/apps/wallet-mobile/src/Dashboard/Dashboard.tsx b/apps/wallet-mobile/src/Dashboard/Dashboard.tsx index 1c869f96ba..46ba5036a4 100644 --- a/apps/wallet-mobile/src/Dashboard/Dashboard.tsx +++ b/apps/wallet-mobile/src/Dashboard/Dashboard.tsx @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import {useNavigation} from '@react-navigation/native' +import {useTheme} from '@yoroi/theme' import BigNumber from 'bignumber.js' import React from 'react' import {defineMessages, useIntl} from 'react-intl' @@ -16,6 +17,8 @@ import {useSelectedWallet} from '../features/WalletManager/Context/SelectedWalle import globalMessages from '../i18n/global-messages' import {Modal} from '../legacy/Modal' import {useWalletNavigation} from '../navigation' +import {PoolTransitionNotice} from '../Staking/PoolTransition/PoolTransitionNotice' +import {usePoolTransition} from '../Staking/PoolTransition/usePoolTransition' import {isEmptyString} from '../utils/utils' import {getCardanoNetworkConfigById} from '../yoroi-wallets/cardano/networks' import {getCardanoBaseConfig} from '../yoroi-wallets/cardano/utils' @@ -34,9 +37,11 @@ import {UserSummary} from './UserSummary' import {WithdrawStakingRewards} from './WithdrawStakingRewards' export const Dashboard = () => { + const {styles} = useStyles() const intl = useIntl() const navigateTo = useNavigateTo() const governanceStrings = useGovernanceStrings() + const {isPoolRetiring} = usePoolTransition() const wallet = useSelectedWallet() const {isLoading: isSyncing, sync} = useSync(wallet) @@ -90,6 +95,12 @@ export const Dashboard = () => { > {stakingInfo?.status !== 'staked' && } + {isPoolRetiring && ( + + + + )} + @@ -169,8 +180,6 @@ const useNavigateTo = () => { } } -const Row = ({style, ...props}: ViewProps) => - const SyncErrorBanner = ({showRefresh}: {showRefresh: boolean}) => { const intl = useIntl() @@ -239,8 +248,6 @@ const EpochInfo = () => { ) } -const Actions = (props: ViewProps) => - const messages = defineMessages({ stakingCenterButton: { id: 'components.delegation.delegationnavigationbuttons.stakingCenterButton', @@ -248,36 +255,53 @@ const messages = defineMessages({ }, }) -const styles = StyleSheet.create({ - root: { - flex: 1, - }, - container: { - flexDirection: 'column', - flex: 1, - }, - scrollView: { - flex: 1, - backgroundColor: '#fff', - }, - contentContainer: { - paddingTop: 16, - paddingHorizontal: 16, - }, - row: { - flex: 1, - paddingVertical: 12, - }, - actions: { - flexDirection: 'row', - backgroundColor: '#fff', - padding: 16, - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - elevation: 1, - shadowOpacity: 0.06, - shadowColor: 'black', - shadowRadius: 6, - shadowOffset: {width: 0, height: -8}, - }, -}) +const useStyles = () => { + const {theme} = useTheme() + const {color} = theme + + const styles = StyleSheet.create({ + root: { + flex: 1, + }, + container: { + flexDirection: 'column', + flex: 1, + }, + scrollView: { + flex: 1, + backgroundColor: color.gray.min, + }, + contentContainer: { + paddingTop: 16, + paddingHorizontal: 16, + }, + row: { + flex: 1, + paddingVertical: 12, + }, + actions: { + flexDirection: 'row', + backgroundColor: color.gray.min, + padding: 16, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + elevation: 1, + shadowOpacity: 0.06, + shadowColor: color['black-static'], + shadowRadius: 6, + shadowOffset: {width: 0, height: -8}, + }, + }) + + return {styles} +} + +const Actions = (props: ViewProps) => { + const {styles} = useStyles() + return +} + +const Row = (props: ViewProps) => { + const {styles} = useStyles() + return +} diff --git a/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx b/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx index 06c599f736..d7ecc0ae43 100644 --- a/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx +++ b/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx @@ -9,7 +9,7 @@ import {SettingsButton} from '../components/Button' import {useGovernanceManagerMaker} from '../features/Staking/Governance' import {useSelectedWallet} from '../features/WalletManager/Context/SelectedWalletContext' import {DashboardRoutes, defaultStackNavigationOptions, useWalletNavigation} from '../navigation' -import {DelegationConfirmation} from '../Staking' +import {DelegationConfirmation, FailedTxScreen} from '../Staking' import {StakingCenter} from '../Staking/StakingCenter' import {useWalletName} from '../yoroi-wallets/hooks' import {Dashboard} from './Dashboard' @@ -46,6 +46,8 @@ export const DashboardNavigator = () => { component={DelegationConfirmation} options={{title: strings.title}} /> + + ) diff --git a/apps/wallet-mobile/src/Staking/FailedTx/FailedTxImage.tsx b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxImage.tsx new file mode 100644 index 0000000000..b63d5b8dd2 --- /dev/null +++ b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxImage.tsx @@ -0,0 +1,47 @@ +import * as React from 'react' +import Svg, {Defs, LinearGradient, Path, Stop, SvgProps} from 'react-native-svg' + +export const FailedTxImage = (props: SvgProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.stories.tsx b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.stories.tsx new file mode 100644 index 0000000000..21536f6847 --- /dev/null +++ b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.stories.tsx @@ -0,0 +1,8 @@ +import {storiesOf} from '@storybook/react-native' +import React from 'react' + +import {FailedTxScreen} from './FailedTxScreen' + +storiesOf('Staking/Failed Tx Screen', module).add('initial', () => { + return +}) diff --git a/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx new file mode 100644 index 0000000000..702d68f605 --- /dev/null +++ b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx @@ -0,0 +1,131 @@ +import {useNavigation} from '@react-navigation/native' +import {useTheme} from '@yoroi/theme' +import React from 'react' +import {defineMessages, useIntl} from 'react-intl' +import {StyleSheet, View} from 'react-native' + +import {Button, Spacer, Text} from '../../components' +import {Space} from '../../components/Space/Space' +import {FailedTxImage} from './FailedTxImage' + +export const FailedTxScreen = () => { + const strings = useStrings() + const styles = useStyles() + const navigateTo = useNavigateTo() + + return ( + + + + + + {strings.notEnoughFunds} + + {strings.noFundsToProcess} + + + +