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

Author: stackchain

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,55 @@
+import {useBanner, useBanners} from '@yoroi/banners'
+import * as React from 'react'
+import {Animated, Button, Text} from 'react-native'
+
+import {yoroiDRepIdHex} from '../../../kernel/constants'
+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 {manager} = useBanners<BannerStorageKey>()
+  const {dismiss, dismissedAt} = useBanner({id: BannerId.DRepConsiderDelegating, manager})
+
+  const fadeAnim = React.useRef(new Animated.Value(1)).current
+  const [isFadingOut, setIsFadingOut] = React.useState(false)
+
+  const shouldShow = shouldShowDRepConsiderDelegating({
+    yoroiDRepIdHex,
+    currentDRepIdHex,
+    isStaking,
+    dismissedAt,
+  })
+
+  if (!shouldShow && !isFadingOut) {
+    return null
+  }
+
+  const handleDismiss = () => {
+    if (isFadingOut) return
+
+    setIsFadingOut(true)
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      dismiss()
+
+      fadeAnim.setValue(1)
+      setIsFadingOut(false)
+    })
+  }
+
+  return (
+    <Animated.View style={{opacity: fadeAnim}}>
+      <Text>Consider delegating to DREP {dismissedAt}</Text>
+
+      <Button onPress={handleDismiss} title="Dismiss" />
+    </Animated.View>
+  )
+}

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

@@ -1,9 +1,53 @@
+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 {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},
+    color: {el_primary_medium},
+  } = 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], () => {
+    console.log(`manager.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} />
+
+      <View style={{backgroundColor: el_primary_medium}}>
+        <BannersProvider manager={bannersManager} key={refresh}>
+          <ShowBannerDRepConsiderDelegating isStaking={true} currentDRepIdHex="123" />
+        </BannersProvider>
+      </View>
+    </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
     }
   }
 ]