Add config to package

Author: michaeljscript

apps/wallet-mobile/src/features/Settings/useCases/changeWalletSettings/ManageNotificationDisplayDuration/ManageNotificationDisplayDurationScreen.tsx

@@ -8,6 +8,8 @@ import {Button} from '../../../../../components/Button/Button'
 import {useFormatNumber} from '../../../../../kernel/i18n'
 import {parseNumber} from '@yoroi/common'
 import {useStrings} from './strings'
+import {useNotificationDisplaySettings} from '../Notifications/NotificationsDisplaySettings'
+import {useNotificationsConfig} from '@yoroi/notifications'
 
 type ManualChoice = {
   id: 'Manual'
@@ -32,21 +34,24 @@ const CHOICES: Readonly<Choice[]> = [
   {id: 'Manual'},
 ] as const
 
-const defaultChoice = CHOICES[1]
-
 export const ManageNotificationDisplayDurationScreen = ({}) => {
   const {styles, colors} = useStyles()
   const formatNumber = useFormatNumber()
+  const {data: config} = useNotificationsConfig()
 
   const strings = useStrings()
-  const [selectedChoiceId, setSelectedChoiceId] = React.useState<ChoiceKind>(defaultChoice.id)
+  const savedChoice = getChoiceByValue(config.displayDuration)
+  const [selectedChoiceId, setSelectedChoiceId] = React.useState<ChoiceKind>(savedChoice.id)
   const selectedChoice = getChoiceById(selectedChoiceId)
-  const [inputValue, setInputValue] = React.useState('')
+  const defaultInputValue = savedChoice.id === 'Manual' ? formatNumber(config.displayDuration) : ''
+  const [inputValue, setInputValue] = React.useState(defaultInputValue)
 
   const isSelectedChoiceManual = selectedChoiceId === 'Manual'
   const isInputEnabled = isSelectedChoiceManual
+  const isInputEmpty = inputValue === ''
   const hasError = isSelectedChoiceManual && !isInputValid(inputValue)
-  const isButtonDisabled = hasError || (isSelectedChoiceManual && inputValue === '')
+  const isButtonDisabled = hasError || (isSelectedChoiceManual && isInputEmpty)
+  const shouldDisplayError = !isInputEmpty && hasError
 
   const handleChoicePress = (id: ChoiceKind) => {
     setSelectedChoiceId(id)
@@ -94,7 +99,8 @@ export const ManageNotificationDisplayDurationScreen = ({}) => {
               keyboardType="numeric"
               selectionColor={colors.cursor}
               right={<Text style={styles.percentLabel}>{strings.seconds}</Text>}
-              error={hasError}
+              error={shouldDisplayError}
+              errorText={shouldDisplayError ? 'Hello' : undefined}
             />
           </View>
         </ScrollView>
@@ -205,6 +211,10 @@ const getChoiceById = (id: ChoiceKind): Choice => {
   return CHOICES.find((choice) => choice.id === id) ?? {id: 'Manual'}
 }
 
+const getChoiceByValue = (value: number): Choice => {
+  return CHOICES.find((choice) => choice.id !== 'Manual' && choice.value === value) ?? {id: 'Manual'}
+}
+
 const isInputValid = (text: string) => {
   const isNumeric = /^[0-9]*$/.test(text)
   const parsed = parseNumber(text)

apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

@@ -444,6 +444,7 @@
   "components.settings.collateral.initialCollateralInfoModalTitle": "Collateral creation",
   "components.settings.collateral.initialCollateralInfoModalText": "Collateral is mandatory when interacting with certain smart contracts on Cardano, which requires to make a 0 ADA transaction. ADA will only be deduced from your collateral if transaction validation fails.",
   "components.settings.collateral.initialCollateralInfoModalButton": "Add collateral",
+  "components.settings.notificationDisplayDuration.title": "Display duration",
   "components.settings.disableeasyconfirmationscreen.disableButton": "Disable",
   "components.settings.disableeasyconfirmationscreen.disableHeading": "By disabling this option, you will be able to spend your assets only with your master password.",
   "components.settings.disableeasyconfirmationscreen.title": "Disable easy confirmation",
@@ -490,6 +491,7 @@
   "components.settings.walletsettingscreen.walletType": "Wallet type:",
   "components.settings.walletsettingscreen.inAppNotifications": "In-app notifications",
   "components.settings.walletsettingscreen.allowNotifications": "Allow notifications",
+  "components.settings.walletsettingscreen.displayDuration": "Display duration",
   "components.settings.manageNotificationDisplayDuration.description": "Adjust the display duration of in-app notifications to suit your preferences.",
   "components.settings.manageNotificationDisplayDuration.apply": "Apply",
   "components.settings.manageNotificationDisplayDuration.displayDuration": "Display duration",

packages/notifications/src/notification-manager.ts

@@ -140,16 +140,14 @@ const eventsManagerMaker = ({
   return {events, unreadCounterByGroup$, newEvents$}
 }
 
+type ConfigManagerMakerOptions = {storage: App.Storage<true, string>}
 const configManagerMaker = ({
   storage,
-}: {
-  storage: App.Storage<true, string>
-}): Notifications.Manager['config'] => {
+}: ConfigManagerMakerOptions): Notifications.Manager['config'] => {
   return {
     read: async (): Promise<Notifications.Config> => {
-      return (
-        (await storage.getItem<ConfigStorageData>('config')) ?? defaultConfig
-      )
+      const value = await storage.getItem<Partial<ConfigStorageData>>('config')
+      return {...defaultConfig, value}
     },
     save: async (config: Notifications.Config): Promise<void> => {
       await storage.setItem('config', config)
@@ -174,6 +172,7 @@ const buildUnreadCounterDefaultValue = (): Map<Notifications.Group, number> => {
 }
 
 const defaultConfig: Notifications.Config = {
+  displayDuration: 4,
   [Notifications.Trigger.PrimaryTokenPriceChanged]: {
     notify: true,
     thresholdInPercent: 10,

packages/types/src/notifications/manager.ts

@@ -62,6 +62,7 @@ interface NotificationEventBase {
 }
 
 export type NotificationConfig = {
+  displayDuration: number
   [NotificationTrigger.PrimaryTokenPriceChanged]: {
     notify: boolean
     thresholdInPercent: number