chore(wallet-mobile): add exmple of banner managed by banners package

Author: stackchain

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

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import {Animated, ViewStyle} from 'react-native'
+
+type Props = {
+  isVisible: boolean
+  children: React.ReactNode
+  duration?: number
+  style?: ViewStyle
+}
+
+export const DismissibleBanner = ({isVisible, children, style, duration = 300}: Props) => {
+  const fadeAnim = React.useRef(new Animated.Value(0)).current
+  const [shouldRender, setShouldRender] = React.useState(isVisible)
+
+  React.useEffect(() => {
+    if (isVisible) {
+      fadeAnim.setValue(0)
+      setShouldRender(true)
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+      }).start()
+    } else {
+      fadeAnim.setValue(1)
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+      }).start(() => setShouldRender(false))
+    }
+  }, [isVisible, fadeAnim, duration])
+
+  if (!shouldRender) return null
+
+  return <Animated.View style={{...style, opacity: fadeAnim}}>{children}</Animated.View>
+}

apps/wallet-mobile/src/features/Banners/common/should-show-drep-consider-delegating.test.ts

@@ -0,0 +1,26 @@
+import {time} from '../../../kernel/constants'
+import {shouldShowDRepConsiderDelegating} from './should-show-drep-consider-delegating'
+
+describe('shouldShowDRepConsiderDelegating', () => {
+  const moreThanOneMonthAgo = Date.now() - time.oneMonth - time.oneSecond
+  const lessThanOneSecondAgo = Date.now() - time.oneSecond
+
+  it.each`
+    isStaking | currentDRepIdHex | yoroiDRepIdHex | dismissedAt             | expected
+    ${true}   | ${'DE'}          | ${'AD'}        | ${moreThanOneMonthAgo}  | ${true}
+    ${false}  | ${'DE'}          | ${'AD'}        | ${moreThanOneMonthAgo}  | ${false}
+    ${true}   | ${'DE'}          | ${'AD'}        | ${lessThanOneSecondAgo} | ${false}
+    ${true}   | ${'AD'}          | ${'AD'}        | ${moreThanOneMonthAgo}  | ${false}
+  `(
+    'returns $expected when isStaking is $isStaking, currentDRepId is $currentDRepId, yoroiDRep is $yoroiDRepId, and dismissedAt is $dismissedAt',
+    ({isStaking, currentDRepIdHex, yoroiDRepIdHex, dismissedAt, expected}) => {
+      const result = shouldShowDRepConsiderDelegating({
+        isStaking,
+        currentDRepIdHex,
+        yoroiDRepIdHex,
+        dismissedAt,
+      })
+      expect(result).toBe(expected)
+    },
+  )
+})

apps/wallet-mobile/src/features/Banners/common/should-show-drep-consider-delegating.tsx

@@ -0,0 +1,17 @@
+import {time} from '../../../kernel/constants'
+
+export const shouldShowDRepConsiderDelegating = ({
+  isStaking,
+  currentDRepIdHex,
+  yoroiDRepIdHex,
+  dismissedAt,
+}: Readonly<{
+  isStaking: boolean
+  currentDRepIdHex: string
+  yoroiDRepIdHex: string
+  dismissedAt: number
+}>) => {
+  const isYoroiDRep = currentDRepIdHex === yoroiDRepIdHex
+  const hasBeenThirtyDays = dismissedAt + time.oneMonth < Date.now()
+  return !isYoroiDRep && hasBeenThirtyDays && isStaking
+}

apps/wallet-mobile/src/features/Banners/common/types.ts

@@ -0,0 +1,5 @@
+export enum BannerId {
+  DRepConsiderDelegating = 'drep-consider-delegating',
+}
+
+export type BannerStorageKey = `${BannerId}`

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

@@ -0,0 +1,40 @@
+import {useBanner, useBanners} from '@yoroi/banners'
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {Button, Text, View} from 'react-native'
+
+import {yoroiDRepIdHex} from '../../../kernel/constants'
+import {DismissibleBanner} from '../common/DismissableBanner'
+import {shouldShowDRepConsiderDelegating} from '../common/should-show-drep-consider-delegating'
+import {BannerId, BannerStorageKey} from '../common/types'
+
+type Props = {
+  isStaking: boolean
+  currentDRepIdHex: string
+}
+
+export const ShowBannerDRepConsiderDelegating = ({isStaking, currentDRepIdHex}: Props) => {
+  const {
+    color: {gray_200},
+    atoms: {p_lg},
+  } = useTheme()
+  const {manager} = useBanners<BannerStorageKey>()
+  const {dismiss, dismissedAt} = useBanner({id: BannerId.DRepConsiderDelegating, manager})
+
+  const shouldShow = shouldShowDRepConsiderDelegating({
+    yoroiDRepIdHex,
+    currentDRepIdHex,
+    isStaking,
+    dismissedAt,
+  })
+
+  return (
+    <DismissibleBanner isVisible={shouldShow} style={{backgroundColor: gray_200, ...p_lg, borderRadius: 4}}>
+      <View>
+        <Text>Consider delegating to DREP</Text>
+
+        <Button onPress={() => dismiss()} title="Dismiss" />
+      </View>
+    </DismissibleBanner>
+  )
+}

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

@@ -1,9 +1,52 @@
+import {bannersManagerMaker, BannersProvider} from '@yoroi/banners'
+import {observableStorageMaker} from '@yoroi/common'
+import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {View} from 'react-native'
+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 {BannerId, BannerStorageKey} from '../Banners/common/types'
+import {ShowBannerDRepConsiderDelegating} from '../Banners/useCases/ShowBannerDRepConsiderDelegating'
+import {useSelectedWallet} from '../WalletManager/common/hooks/useSelectedWallet'
+
+// --------------------------------------------------------------------------------------------------
+// PINEED: this component can be replaced at anytime by anyone
 
-// Please, clean component after use
 export const Playground = () => {
-  return <View></View>
-}
+  const {
+    atoms: {pl_lg, pr_lg},
+  } = useTheme()
+  const {wallet} = useSelectedWallet()
+  const walletStorage = wallet.networkManager.rootStorage.join(`${wallet.id}/`)
+  const bannersStorage = observableStorageMaker<false, BannerStorageKey>(walletStorage.join('banners/'))
+  const bannersManager = bannersManagerMaker<BannerStorageKey>({
+    storage: bannersStorage,
+  })
+  const [refresh, setRefresh] = React.useState(0)
+
+  bannersStorage.onChange([BannerId.DRepConsiderDelegating], () => {
+    logger.debug(`BannersStorageKey ${BannerId.DRepConsiderDelegating}:`, {
+      dismissedAt: bannersManager.dismissedAt(BannerId.DRepConsiderDelegating),
+    })
+  })
 
-// const styles = StyleSheet.create({})
+  return (
+    <SafeAreaView edges={['top', 'left', 'right']} style={[pl_lg, pr_lg]}>
+      <Button
+        title="Reset"
+        onPress={() => {
+          bannersStorage.setItem(BannerId.DRepConsiderDelegating, '0')
+          setRefresh(() => refresh + 1)
+        }}
+      />
+
+      <Spacer height={20} />
+
+      <BannersProvider manager={bannersManager} key={refresh}>
+        <ShowBannerDRepConsiderDelegating isStaking={true} currentDRepIdHex="123" />
+      </BannersProvider>
+    </SafeAreaView>
+  )
+}

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": 241,
+      "line": 237,
       "column": 23,
-      "index": 7828
+      "index": 7685
     },
     "end": {
-      "line": 244,
+      "line": 240,
       "column": 3,
-      "index": 7961
+      "index": 7818
     }
   }
 ]

packages/banners/src/banners-manager.ts

@@ -5,8 +5,9 @@ import {freeze} from 'immer'
 export const bannersManagerMaker = <K extends string = string>({
   storage,
 }: Readonly<Banners.Config<K>>): Readonly<Banners.Manager<K>> => {
-  const dismiss = (id: K) =>
+  const dismiss = (id: K) => {
     storage.setItem(id, new Date().getTime().toString())
+  }
 
   const dismissedAt = (id: K) => {
     return toNumber(storage.getItem(id))