Add yoroi banner to staking dashboard

Author: michaeljscript

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

@@ -1,23 +1,50 @@
 import {shouldShowDRep2UsOnStakingCenter, useBanner} from '@yoroi/banners'
-import {GOVERNANCE_YOROI_DREP_ID_HEX} from '@yoroi/staking'
+import {GOVERNANCE_YOROI_DREP_ID_HEX, useStakingKeyState} from '@yoroi/staking'
 import {Banners} from '@yoroi/types'
 import * as React from 'react'
+import {StyleSheet} from 'react-native'
 
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
+import {useStakingInfo} from '../../../legacy/Dashboard/StakePoolInfos'
+import {useStakingKey} from '../../../yoroi-wallets/hooks'
+import {mapStakingKeyStateToGovernanceAction} from '../../Staking/Governance/common/helpers'
+import {useTheme} from '@yoroi/theme'
 
 export const ConsiderDRepToUsStakingCenterBanner = () => {
   const {
     wallet: {bannersManager: manager},
   } = useSelectedWallet()
   const {dismiss, dismissedAt} = useBanner({id: Banners.Id.DRep2UsStakingCenter, manager})
+  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 styles = useStyles()
+
+  const action = stakingStatus ? mapStakingKeyStateToGovernanceAction(stakingStatus) : null
 
   const isVisible = shouldShowDRep2UsOnStakingCenter({
     yoroiDRepIdHex: GOVERNANCE_YOROI_DREP_ID_HEX,
-    currentDRepIdHex: 'hi',
-    isStaking: true,
+    currentDRepIdHex: action?.kind === 'delegate' && action.type === 'key' ? action.hash : '',
+    isStaking: hasStakingKeyRegistered,
     dismissedAt,
   })
 
-  return <DelegateToYoroiDRepBanner onDismiss={dismiss} isVisible={isVisible} />
+  return <DelegateToYoroiDRepBanner style={styles.root} onDismiss={dismiss} isVisible={isVisible} />
+}
+
+const useStyles = () => {
+  const {atoms} = useTheme()
+  return StyleSheet.create({
+    root: {
+      ...atoms.pb_xl,
+    },
+  })
 }

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

@@ -12,6 +12,8 @@ import {mapStakingKeyStateToGovernanceAction} from '../../Staking/Governance/com
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
 
+const minBalanceToDisplayBanner = 5 // 5 ADA
+
 export const ConsiderDRepToUsTxHistoryBanner = () => {
   const {
     wallet: {bannersManager: manager},
@@ -38,7 +40,7 @@ export const ConsiderDRepToUsTxHistoryBanner = () => {
     isStaking: hasStakingKeyRegistered,
     dismissedAt,
     ptBalance: balance.quantity,
-    ptMinBalance: 5n * BigInt(ptDecimals),
+    ptMinBalance: BigInt(minBalanceToDisplayBanner) * BigInt(ptDecimals),
   })
 
   return <DelegateToYoroiDRepBanner style={styles.root} onDismiss={dismiss} isVisible={isVisible} />

apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx

@@ -38,6 +38,7 @@ import {NotDelegatedInfo} from './NotDelegatedInfo'
 import {StakePoolInfos, useStakingInfo} from './StakePoolInfos'
 import {UserSummary} from './UserSummary'
 import {useWithdrawStakingRewardsStrings, WithdrawStakingRewards} from './WithdrawStakingRewards/WithdrawStakingRewards'
+import {ConsiderDRepToUsStakingCenterBanner} from '../../features/Banners/useCases/ConsiderDRepToUsStakingCenterBanner'
 
 export const Dashboard = () => {
   const strings = useWithdrawStakingRewardsStrings()
@@ -101,6 +102,7 @@ export const Dashboard = () => {
             />
           }
         >
+          <ConsiderDRepToUsStakingCenterBanner />
           {stakingInfo?.status !== 'staked' && (
             <>
               <NotDelegatedInfo />

apps/wallet-mobile/translations/messages/src/legacy/Dashboard/Dashboard.json

@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Go to Staking Center",
     "file": "src/legacy/Dashboard/Dashboard.tsx",
     "start": {
-      "line": 237,
+      "line": 239,
       "column": 23,
-      "index": 7685
+      "index": 7855
     },
     "end": {
-      "line": 240,
+      "line": 242,
       "column": 3,
-      "index": 7818
+      "index": 7988
     }
   }
 ]