diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js index a13c413c2e..7929c921c7 100644 --- a/apps/wallet-mobile/.storybook/storybook.requires.js +++ b/apps/wallet-mobile/.storybook/storybook.requires.js @@ -102,6 +102,7 @@ const getStories = () => { "./src/features/Auth/OsLoginScreen/OsLoginScreen.stories.tsx": require("../src/features/Auth/OsLoginScreen/OsLoginScreen.stories.tsx"), "./src/features/Auth/PinInput/PinInput.stories.tsx": require("../src/features/Auth/PinInput/PinInput.stories.tsx"), "./src/features/Auth/PinLoginScreen/PinLoginScreen.stories.tsx": require("../src/features/Auth/PinLoginScreen/PinLoginScreen.stories.tsx"), + "./src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx": require("../src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx"), "./src/features/Claim/illustrations/Ilustrations.stories.tsx": require("../src/features/Claim/illustrations/Ilustrations.stories.tsx"), "./src/features/Claim/useCases/AskConfirmation.stories.tsx": require("../src/features/Claim/useCases/AskConfirmation.stories.tsx"), "./src/features/Claim/useCases/ShowSuccessScreen.stories.tsx": require("../src/features/Claim/useCases/ShowSuccessScreen.stories.tsx"), diff --git a/apps/wallet-mobile/src/features/Banners/common/DismissableBanner.tsx b/apps/wallet-mobile/src/components/DismissableView.tsx similarity index 87% rename from apps/wallet-mobile/src/features/Banners/common/DismissableBanner.tsx rename to apps/wallet-mobile/src/components/DismissableView.tsx index 0a8a95c036..7ec3c88170 100644 --- a/apps/wallet-mobile/src/features/Banners/common/DismissableBanner.tsx +++ b/apps/wallet-mobile/src/components/DismissableView.tsx @@ -5,10 +5,10 @@ type Props = { isVisible: boolean children: React.ReactNode duration?: number - style?: ViewStyle + style?: Exclude } -export const DismissibleBanner = ({isVisible, children, style, duration = 300}: Props) => { +export const DismissibleView = ({isVisible, children, style, duration = 300}: Props) => { const fadeAnim = React.useRef(new Animated.Value(0)).current const [shouldRender, setShouldRender] = React.useState(isVisible) diff --git a/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx b/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx new file mode 100644 index 0000000000..dc95579993 --- /dev/null +++ b/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx @@ -0,0 +1,9 @@ +import {action} from '@storybook/addon-actions' +import {storiesOf} from '@storybook/react-native' +import * as React from 'react' + +import {DelegateToYoroiDRepBanner} from './DelegateToYoroiDRepBanner' + +storiesOf('DelegateToYoroiDRepBanner', module).add('Initial', () => ( + +)) diff --git a/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.tsx b/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.tsx new file mode 100644 index 0000000000..c648448547 --- /dev/null +++ b/apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.tsx @@ -0,0 +1,128 @@ +import {GOVERNANCE_YOROI_DREP_ID_HEX, useDelegationCertificate} from '@yoroi/staking' +import {useTheme} from '@yoroi/theme' +import * as React from 'react' +import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' + +import {Button} from '../../../../components/Button/Button' +import {DismissibleView} from '../../../../components/DismissableView' +import {Icon} from '../../../../components/Icon' +import {Text} from '../../../../components/Text' +import {useCreateGovernanceTx} from '../../../../yoroi-wallets/hooks' +import {useGovernanceActions} from '../../../Staking/Governance/common/helpers' +import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet' +import {GovernanceBackground} from '../../illustrations/GovernanceBackground' +import {useStrings} from '../strings' + +type Props = { + isVisible: boolean + onDismiss?: () => void + style?: ViewStyle +} + +export const DelegateToYoroiDRepBanner = ({onDismiss, isVisible, style}: Props) => { + const {styles, colors} = useStyles() + const {title, description, cta} = useStrings() + const {wallet, meta} = useSelectedWallet() + + const {createCertificate: createDelegationCertificate} = useDelegationCertificate({ + useErrorBoundary: true, + }) + + const createGovernanceTxMutation = useCreateGovernanceTx(wallet, { + useErrorBoundary: true, + }) + + const governanceActions = useGovernanceActions() + + const handleDelegateToYoroi = React.useCallback(async () => { + const stakingKey = await wallet.getStakingKey() + + createDelegationCertificate( + {hash: GOVERNANCE_YOROI_DREP_ID_HEX, type: 'key', stakingKey}, + { + onSuccess: async (certificate) => { + const unsignedTx = await createGovernanceTxMutation.mutateAsync({ + certificates: [certificate], + addressMode: meta.addressMode, + }) + + governanceActions.handleDelegateAction({unsignedTx, hash: GOVERNANCE_YOROI_DREP_ID_HEX, type: 'key'}) + }, + }, + ) + }, [createDelegationCertificate, createGovernanceTxMutation, governanceActions, meta.addressMode, wallet]) + + return ( + + + + + + {onDismiss && ( + + + + )} + + {title} + + {description} + +