Add banner to tx-history screen

Author: michaeljscript

apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.tsx

@@ -1,6 +1,6 @@
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 
 import {Button} from '../../../../components/Button/Button'
@@ -13,20 +13,22 @@ import {useStrings} from '../strings'
 type Props = {
   isVisible: boolean
   onDismiss: () => void
+  style?: ViewStyle
 }
 
-export const DelegateToYoroiDRepBanner = ({onDismiss, isVisible}: Props) => {
+export const DelegateToYoroiDRepBanner = ({onDismiss, isVisible, style}: Props) => {
   const {styles, colors} = useStyles()
   const {title, description, cta} = useStrings()
 
   const handleOnDismiss = React.useCallback(() => onDismiss(), [onDismiss])
   const handleOnCta = React.useCallback(() => console.log('cta'), [])
 
   return (
-    <DismissibleView isVisible={isVisible}>
+    <DismissibleView isVisible={isVisible} style={style}>
       <LinearGradient start={{x: 1, y: 1}} end={{x: 0, y: 0}} colors={colors.gradient} style={styles.gradient}>
         <View style={styles.root}>
           <GovernanceBackground style={styles.backgroundImage} />
+
           <TouchableOpacity onPress={handleOnDismiss} style={styles.dismiss}>
             <Icon.Close color={colors.icon} size={20} />
           </TouchableOpacity>

apps/wallet-mobile/src/features/Banners/illustrations/GovernanceBackground.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import Svg, {Defs, G, LinearGradient, Path, Stop} from 'react-native-svg'
 import {SVGProps} from 'react'
+import Svg, {Defs, G, LinearGradient, Path, Stop} from 'react-native-svg'
 
 export const GovernanceBackground = (props: SVGProps<SVGSVGElement>): JSX.Element => {
   return (

apps/wallet-mobile/src/features/Banners/useCases/ConsiderDRepToUsStakingCenterBanner.tsx

@@ -1,10 +1,10 @@
 import {shouldShowDRep2UsOnStakingCenter, useBanner} from '@yoroi/banners'
+import {GOVERNANCE_YOROI_DREP_ID_HEX} from '@yoroi/staking'
 import {Banners} from '@yoroi/types'
 import * as React from 'react'
 
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
-import {GOVERNANCE_YOROI_DREP_ID_HEX} from '@yoroi/staking'
 
 export const ConsiderDRepToUsStakingCenterBanner = () => {
   const {

apps/wallet-mobile/src/features/Banners/useCases/ConsiderDRepToUsTxHistoryBanner.tsx

@@ -1,25 +1,56 @@
 import {shouldShowDRep2UsOnTxHistory, useBanner} from '@yoroi/banners'
+import {GOVERNANCE_YOROI_DREP_ID_HEX, useStakingKeyState} from '@yoroi/staking'
+import {useTheme} from '@yoroi/theme'
 import {Banners} from '@yoroi/types'
 import * as React from 'react'
+import {StyleSheet} from 'react-native'
 
+import {useStakingInfo} from '../../../legacy/Dashboard/StakePoolInfos'
+import {useStakingKey} from '../../../yoroi-wallets/hooks'
+import {usePortfolioPrimaryBalance} from '../../Portfolio/common/hooks/usePortfolioPrimaryBalance'
+import {mapStakingKeyStateToGovernanceAction} from '../../Staking/Governance/common/helpers'
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
-import {GOVERNANCE_YOROI_DREP_ID_HEX} from '@yoroi/staking'
 
 export const ConsiderDRepToUsTxHistoryBanner = () => {
   const {
     wallet: {bannersManager: manager},
   } = useSelectedWallet()
   const {dismiss, dismissedAt} = useBanner({id: Banners.Id.DRep2UsTxHistory, manager})
+  const {styles} = useStyles()
+  const {wallet} = useSelectedWallet()
+  const stakingInfo = useStakingInfo(wallet, {suspense: true})
+  const hasStakingKeyRegistered = stakingInfo?.data?.status !== 'not-registered'
+  const stakingKeyHash = useStakingKey(wallet)
+
+  const {data: stakingStatus} = useStakingKeyState(stakingKeyHash, {
+    refetchOnMount: true,
+    suspense: true,
+  })
+
+  const action = stakingStatus ? mapStakingKeyStateToGovernanceAction(stakingStatus) : null
+  const ptDecimals = wallet?.portfolioPrimaryTokenInfo.decimals ?? 0
+  const balance = usePortfolioPrimaryBalance({wallet})
 
   const isVisible = shouldShowDRep2UsOnTxHistory({
     yoroiDRepIdHex: GOVERNANCE_YOROI_DREP_ID_HEX,
-    currentDRepIdHex: 'hi',
-    isStaking: true,
+    currentDRepIdHex: action?.kind === 'delegate' ? action.hash : '',
+    isStaking: hasStakingKeyRegistered,
     dismissedAt,
-    ptBalance: 0n,
-    ptMinBalance: 0n,
+    ptBalance: balance.quantity,
+    ptMinBalance: 5n * BigInt(ptDecimals),
+  })
+
+  return <DelegateToYoroiDRepBanner style={styles.root} onDismiss={dismiss} isVisible={isVisible} />
+}
+
+const useStyles = () => {
+  const {atoms} = useTheme()
+  const styles = StyleSheet.create({
+    root: {
+      ...atoms.px_lg,
+    },
   })
 
-  return <DelegateToYoroiDRepBanner onDismiss={dismiss} isVisible={isVisible} />
+  return {styles}
 }