refactor(wallet-mobile): split banners responsability

Author: stackchain

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', () => (
+  <DelegateToYoroiDRepBanner isVisible onDismiss={action('onDismiss')} />
+))

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

@@ -1,6 +1,4 @@
-import {shouldShowDRep2UsOnStakingCenter, useBanner, useBanners} from '@yoroi/banners'
 import {useTheme} from '@yoroi/theme'
-import {Banners} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
@@ -9,30 +7,25 @@ import {Button} from '../../../../components/Button/Button'
 import {DismissibleView} from '../../../../components/DismissableView'
 import {Icon} from '../../../../components/Icon'
 import {Text} from '../../../../components/Text'
-import {yoroiDRepIdHex} from '../../../../kernel/constants'
-import {useStrings} from '../../common/strings'
+import {useStrings} from '../strings'
 
-export const ConsiderDelegatingToYoroiBanner = () => {
+type Props = {
+  isVisible: boolean
+  onDismiss: () => void
+}
+
+export const DelegateToYoroiDRepBanner = ({onDismiss, isVisible}: Props) => {
   const {styles, colors} = useStyles()
   const {title, description, cta} = useStrings()
-  const {manager} = useBanners<Banners.StorageKey>()
-  const {dismiss, dismissedAt} = useBanner({id: Banners.Id.DRep2UsStakingCenter, manager})
 
-  const handleOnClose = React.useCallback(() => dismiss(), [dismiss])
+  const handleOnDismiss = React.useCallback(() => onDismiss(), [onDismiss])
   const handleOnCta = React.useCallback(() => console.log('cta'), [])
 
-  const shouldShow = shouldShowDRep2UsOnStakingCenter({
-    yoroiDRepIdHex,
-    currentDRepIdHex: 'hi',
-    isStaking: true,
-    dismissedAt,
-  })
-
   return (
-    <DismissibleView isVisible={shouldShow}>
+    <DismissibleView isVisible={isVisible}>
       <LinearGradient start={{x: 1, y: 1}} end={{x: 0, y: 0}} colors={colors.gradient} style={styles.gradient}>
         <View style={styles.root}>
-          <TouchableOpacity onPress={handleOnClose} style={styles.closeButton}>
+          <TouchableOpacity onPress={handleOnDismiss} style={styles.dismiss}>
             <Icon.Close color={colors.icon} size={20} />
           </TouchableOpacity>
 
@@ -50,7 +43,7 @@ export const ConsiderDelegatingToYoroiBanner = () => {
 const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
-    closeButton: {
+    dismiss: {
       width: 20,
       height: 20,
       right: atoms.px_lg.paddingRight,

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

@@ -0,0 +1,22 @@
+import {shouldShowDRep2UsOnStakingCenter, useBanner} from '@yoroi/banners'
+import {Banners} from '@yoroi/types'
+import * as React from 'react'
+
+import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
+import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
+
+export const ConsiderDRepToUsStakingCenterBanner = () => {
+  const {
+    wallet: {bannersManager: manager},
+  } = useSelectedWallet()
+  const {dismiss, dismissedAt} = useBanner({id: Banners.Id.DRep2UsStakingCenter, manager})
+
+  const isVisible = shouldShowDRep2UsOnStakingCenter({
+    yoroiDRepIdHex: '1',
+    currentDRepIdHex: 'hi',
+    isStaking: true,
+    dismissedAt,
+  })
+
+  return <DelegateToYoroiDRepBanner onDismiss={dismiss} isVisible={isVisible} />
+}

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

@@ -0,0 +1,24 @@
+import {shouldShowDRep2UsOnTxHistory, useBanner} from '@yoroi/banners'
+import {Banners} from '@yoroi/types'
+import * as React from 'react'
+
+import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
+import {DelegateToYoroiDRepBanner} from '../common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner'
+
+export const ConsiderDRepToUsTxHistoryBanner = () => {
+  const {
+    wallet: {bannersManager: manager},
+  } = useSelectedWallet()
+  const {dismiss, dismissedAt} = useBanner({id: Banners.Id.DRep2UsTxHistory, manager})
+
+  const isVisible = shouldShowDRep2UsOnTxHistory({
+    yoroiDRepIdHex: '1',
+    currentDRepIdHex: 'hi',
+    isStaking: true,
+    dismissedAt,
+    ptBalance: 0n,
+    ptMinBalance: 0n,
+  })
+
+  return <DelegateToYoroiDRepBanner onDismiss={dismiss} isVisible={isVisible} />
+}

apps/wallet-mobile/src/features/Banners/useCases/ConsiderDelegatingToYoroiBanner/ConsiderDelegatingToYoroiBanner.stories.tsx

@@ -8,7 +8,6 @@ import {SafeAreaView} from 'react-native-safe-area-context'
 import {Button} from '../../components/Button/Button'
 import {Spacer} from '../../components/Spacer/Spacer'
 import {logger} from '../../kernel/logger/logger'
-import {ConsiderDelegatingToYoroiBanner} from '../Banners/useCases/ConsiderDelegatingToYoroiBanner/ConsiderDelegatingToYoroiBanner'
 import {useSelectedWallet} from '../WalletManager/common/hooks/useSelectedWallet'
 
 // --------------------------------------------------------------------------------------------------
@@ -44,9 +43,7 @@ export const Playground = () => {
 
       <Spacer height={20} />
 
-      <BannersProvider manager={bannersManager} key={refresh}>
-        <ConsiderDelegatingToYoroiBanner />
-      </BannersProvider>
+      <BannersProvider manager={bannersManager} key={refresh}></BannersProvider>
     </SafeAreaView>
   )
 }

apps/wallet-mobile/src/features/Dev/Playground.tsx

@@ -4,9 +4,10 @@ import * as CSL from '@emurgo/cross-csl-core'
 import {createSignedLedgerTxFromCbor, signRawTransaction} from '@emurgo/yoroi-lib'
 import {Datum} from '@emurgo/yoroi-lib/dist/internals/models'
 import {AppApi} from '@yoroi/api'
+import {bannersManagerMaker} from '@yoroi/banners'
 import {cardanoConfig, derivationConfig, protocolParamsPlaceholder} from '@yoroi/blockchains'
-import {isNonNullable} from '@yoroi/common'
-import {Api, App, Balance, HW, Network, Portfolio, Wallet} from '@yoroi/types'
+import {isNonNullable, observableStorageMaker} from '@yoroi/common'
+import {Api, App, Balance, Banners, HW, Network, Portfolio, Wallet} from '@yoroi/types'
 import {BigNumber} from 'bignumber.js'
 import {Buffer} from 'buffer'
 import {freeze} from 'immer'
@@ -89,6 +90,8 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
     private readonly transactionManager: TransactionManager
     private readonly memosManager: MemosManager
 
+    readonly bannersManager: Readonly<Banners.Manager<Banners.StorageKey>>
+
     readonly balanceManager: Readonly<Portfolio.Manager.Balance>
     readonly balance$: Observable<Portfolio.Event.BalanceManager>
     readonly portfolioPrimaryTokenInfo: Readonly<Portfolio.Token.Info>
@@ -158,6 +161,12 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
       // the calculation of locked deposit, since the cost can change
       const protocolParams = await networkManager.api.protocolParams()
 
+      const walletStorage = networkManager.rootStorage.join(`${id}/`)
+      const bannersStorage = observableStorageMaker<false, Banners.StorageKey>(walletStorage.join('banners/'))
+      const bannersManager = bannersManagerMaker<Banners.StorageKey>({
+        storage: bannersStorage,
+      })
+
       const wallet = new CardanoWallet({
         id,
         accountPubKeyHex,
@@ -170,6 +179,7 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
         portfolioPrimaryTokenInfo: primaryTokenInfo,
         accountVisual,
         protocolParams,
+        bannersManager,
       })
       if (!isYoroiWallet(wallet)) throwLoggedError('ShelleyWallet: build invalid wallet')
 
@@ -190,6 +200,7 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
       memosManager,
       balanceManager,
       accountManager,
+      bannersManager,
 
       portfolioPrimaryTokenInfo,
       protocolParams,
@@ -204,6 +215,7 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
       memosManager: MemosManager
       balanceManager: Readonly<Portfolio.Manager.Balance>
       accountManager: AccountManager
+      bannersManager: Readonly<Banners.Manager<Banners.StorageKey>>
 
       portfolioPrimaryTokenInfo: Readonly<Portfolio.Token.Info>
       protocolParams: Api.Cardano.ProtocolParams
@@ -222,6 +234,7 @@ export const makeCardanoWallet = (networkManager: Network.Manager, implementatio
       this.balance$ = balanceManager.observable$
       this.accountManager = accountManager
       this.portfolioPrimaryTokenInfo = portfolioPrimaryTokenInfo
+      this.bannersManager = bannersManager
 
       this.protocolParams = protocolParams
 

apps/wallet-mobile/src/yoroi-wallets/cardano/cardano-wallet.ts

@@ -79,6 +79,9 @@ export interface YoroiWallet {
   // account
   readonly accountVisual: number
 
+  // banners
+  readonly bannersManager: Readonly<Banners.Manager<Banners.StorageKey>>
+
   // sync
   resync(): Promise<void>
   clear(): Promise<void>
@@ -271,7 +274,3 @@ export namespace CardanoTypes {
 
 export {RegistrationStatus} from '@emurgo/yoroi-lib'
 export {NoOutputsError, NotEnoughMoneyToSendError} from '@emurgo/yoroi-lib/dist/errors'
-
-export interface WithBanners {
-  bannersManager: Banners.Manager<Banners.StorageKey>
-}

apps/wallet-mobile/src/yoroi-wallets/cardano/types.ts

@@ -87,6 +87,10 @@ const wallet: YoroiWallet = {
     lockedAsStorageCost: 0n,
     totalFromTxs: 0n,
   },
+  bannersManager: {
+    dismiss: noop,
+    dismissedAt: () => 0,
+  },
 
   isMainnet: true,
   portfolioPrimaryTokenInfo: primaryTokenInfoMainnet,