@unisat/wallet-state 1.0.4 → 1.1.0

package/src/ui-hooks/useFeeRateBarLogic.ts

@@ -0,0 +1,303 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useI18n, useWallet } from '../context'
+import { useChain, useFeeRateBar, useUpdateFeeRateBar } from '../hooks'
+import { useAsyncEffect } from '../utils/ui-utils'
+
+enum FeeRateType {
+  SLOW,
+  AVG,
+  FAST,
+  CUSTOM,
+}
+
+interface FeeOption {
+  type?: FeeRateType
+  title: string
+  desc?: string
+  feeRate: number
+}
+
+const translationKeys = {
+  [FeeRateType.SLOW]: { type: FeeRateType.SLOW, title: 'slow', desc: 'feerate_slow_desc' },
+  [FeeRateType.AVG]: { type: FeeRateType.AVG, title: 'avg', desc: 'feerate_avg_desc' },
+  [FeeRateType.FAST]: { type: FeeRateType.FAST, title: 'fast', desc: 'feerate_fast_desc' },
+} as const
+
+const MAX_FEE_RATE = 10000
+const DEFAULT_FEE_RATE = 1
+const AVG_OPTION_INDEX = 1
+
+// Fee rate display rules:
+// if (Fast = Avg = Slow) -> show Fast time (30s) for all
+// if (Fast = Avg) -> show Fast time (30s) for both
+// if (Avg = Slow) -> show Avg time (1.5m) for both
+
+function getFractalFeeDesc(
+  index: FeeRateType,
+  fastRate: number,
+  avgRate: number,
+  slowRate: number,
+  t: (key: string) => string
+): string {
+  const { FAST, AVG, SLOW } = FeeRateType
+
+  // All rates are equal
+  if (fastRate === avgRate && avgRate === slowRate) {
+    return t('feerate_fast_desc_fb')
+  }
+
+  // Fast equals Avg
+  if (fastRate === avgRate) {
+    return index === SLOW ? t('feerate_slow_desc_fb') : t('feerate_fast_desc_fb')
+  }
+
+  // Avg equals Slow
+  if (avgRate === slowRate && (index === AVG || index === SLOW)) {
+    return t('feerate_avg_desc_fb')
+  }
+
+  // Default descriptions
+  const descriptions = {
+    [FAST]: 'feerate_fast_desc_fb',
+    [AVG]: 'feerate_avg_desc_fb',
+    [SLOW]: 'feerate_slow_desc_fb',
+  }
+
+  return t(descriptions[index] || '')
+}
+
+function formatFeeRateTextKey(
+  list: FeeOption[],
+  isFractal: boolean,
+  supportLowFeeMode: boolean,
+  t: (key: string) => string
+): FeeOption[] {
+  const { FAST, AVG, SLOW } = FeeRateType
+  const fastRate = list[FAST]?.feeRate ?? 0
+  const avgRate = list[AVG]?.feeRate ?? 0
+  const slowRate = list[SLOW]?.feeRate ?? 0
+
+  return list.map((option, index) => {
+    const keys = translationKeys[index as FeeRateType]
+    if (!keys) return option
+
+    let title = t(keys.title)
+    let desc = t(keys.desc)
+
+    if (isFractal) {
+      desc = getFractalFeeDesc(index, fastRate, avgRate, slowRate, t)
+    } else {
+      if (fastRate === slowRate) {
+        desc = t('feerate_fast_desc')
+      }
+
+      if (supportLowFeeMode) {
+        if (index === SLOW) {
+          title = t('feerate_sub1_title')
+          desc = ''
+        }
+      }
+    }
+
+    return {
+      ...option,
+      title,
+      desc,
+    }
+  })
+}
+
+export function useFeeRateBarLogic({ readonly }: { readonly?: boolean }) {
+  const wallet = useWallet()
+  const [feeOptions, setFeeOptions] = useState<FeeOption[]>([])
+  const feeRateBarState = useFeeRateBar()
+  const updateFeeRateBar = useUpdateFeeRateBar()
+  const feeRateInputVal = feeRateBarState.feeRateInputVal
+  const feeOptionIndex = feeRateBarState.feeOptionIndex
+  const showCustomInput = feeRateBarState.showCustomInput
+  const feeRate = feeRateBarState.feeRate
+  const { t, isSpecialLocale } = useI18n()
+  const chain = useChain()
+  const isFractal = chain.isFractal
+  const fontSize = useMemo(() => (isSpecialLocale ? 'xxxs' : 'xxs'), [isSpecialLocale])
+
+  const [showLowFeeModeTipsPopover, setShowLowFeeModeTipsPopover] = useState(false)
+
+  const supportLowFeeMode = chain.enableLowFeeMode ?? false
+
+  useAsyncEffect(async () => {
+    const feeSummary = await wallet.getFeeSummary()
+
+    if (supportLowFeeMode) {
+      const lowFeeSummary = await wallet.getLowFeeSummary()
+      feeSummary.list[0] = lowFeeSummary.list[1]
+
+      // try use slow fee rate if it's lower than 1 sat/vB
+      if (feeSummary.list[0].feeRate > 1) {
+        feeSummary.list[0] = lowFeeSummary.list[0]
+      }
+
+      // ensure slow fee rate is below 1 sat/vB
+      if (feeSummary.list[0].feeRate > 1) {
+        feeSummary.list[0].feeRate = 0.1
+      }
+    }
+
+    const translatedList = formatFeeRateTextKey(feeSummary.list, isFractal, supportLowFeeMode, t)
+    const options = readonly
+      ? translatedList
+      : [...translatedList, { type: FeeRateType.CUSTOM, title: t('custom'), feeRate: 0 }]
+
+    setFeeOptions(options)
+  }, [wallet, isFractal, t, supportLowFeeMode, readonly])
+
+  // Memoize default value to avoid repeated calculations
+  const defaultFeeRate = useMemo(
+    () => feeOptions[AVG_OPTION_INDEX]?.feeRate ?? DEFAULT_FEE_RATE,
+    [feeOptions]
+  )
+
+  useEffect(() => {
+    let val = defaultFeeRate
+    if (feeOptionIndex === FeeRateType.CUSTOM) {
+      val = parseFloat(feeRateInputVal) || 0
+    } else if (feeOptions.length > 0) {
+      val = feeOptions[feeOptionIndex]?.feeRate ?? defaultFeeRate
+    }
+
+    if (val.toString() == feeRate.toString()) {
+      return
+    }
+
+    if (val === feeRate) {
+      return
+    }
+
+    updateFeeRateBar({ feeRate: val })
+  }, [feeOptions, feeOptionIndex, feeRateInputVal, defaultFeeRate, feeRate])
+
+  const adjustFeeRateInput = useCallback(
+    (inputVal: string) => {
+      // When user manually changes the input, check if we need to switch to CUSTOM
+      const shouldSwitchToCustom = feeOptionIndex !== FeeRateType.CUSTOM && feeOptions.length > 0
+      const selectedOption = feeOptions[feeOptionIndex]
+
+      // If currently on SLOW/AVG/FAST and user changes the value, switch to CUSTOM
+      if (shouldSwitchToCustom && selectedOption) {
+        const currentValue = selectedOption.feeRate.toString()
+        if (inputVal !== currentValue) {
+          updateFeeRateBar({
+            feeRateInputVal: inputVal,
+            feeOptionIndex: FeeRateType.CUSTOM,
+          })
+          return
+        }
+      }
+
+      // Allow empty input
+      if (inputVal === '') {
+        updateFeeRateBar({ feeRateInputVal: '' })
+        return
+      }
+
+      const val = parseFloat(inputVal)
+
+      // Check if input is a valid number
+      if (isNaN(val)) {
+        updateFeeRateBar({ feeRateInputVal: '' })
+        return
+      }
+
+      // Allow intermediate input like "0" or "0." for typing "0.1"
+      if (inputVal === '0' || inputVal.endsWith('.')) {
+        updateFeeRateBar({ feeRateInputVal: inputVal })
+        return
+      }
+
+      // Validate and constrain the value
+      if (val <= 0) {
+        updateFeeRateBar({ feeRateInputVal: defaultFeeRate.toString() })
+      } else if (val > MAX_FEE_RATE) {
+        updateFeeRateBar({ feeRateInputVal: MAX_FEE_RATE.toString() })
+      } else if (val < 1 && supportLowFeeMode == false) {
+        updateFeeRateBar({ feeRateInputVal: '1' })
+      } else if (val < 0.1) {
+        updateFeeRateBar({ feeRateInputVal: '0.1' })
+      } else {
+        updateFeeRateBar({ feeRateInputVal: inputVal })
+      }
+    },
+    [defaultFeeRate, updateFeeRateBar, feeOptionIndex, feeOptions, supportLowFeeMode]
+  )
+
+  const isCustomOption = useCallback((option: FeeOption) => option.type === FeeRateType.CUSTOM, [t])
+
+  const toggleLowFeeRate = useCallback(async () => {
+    const selectedOption = feeOptions[FeeRateType.SLOW]
+    updateFeeRateBar({
+      feeOptionIndex: FeeRateType.SLOW,
+      showCustomInput: true,
+      feeRateInputVal: selectedOption.feeRate.toString(),
+    })
+  }, [feeOptions, updateFeeRateBar, feeRateInputVal])
+
+  const setFeeOptionIndex = useCallback(
+    async (index: number) => {
+      const selectedOption = feeOptions[index]
+      if (supportLowFeeMode && index === FeeRateType.SLOW) {
+        const acceptLowFeeMode = await wallet.getAcceptLowFeeMode()
+        if (acceptLowFeeMode === false) {
+          setShowLowFeeModeTipsPopover(true)
+          return
+        }
+      }
+      if (index !== FeeRateType.CUSTOM && selectedOption) {
+        // When clicking on SLOW/AVG/FAST, show input and fill with the corresponding value
+        updateFeeRateBar({
+          feeOptionIndex: index,
+          showCustomInput: true,
+          feeRateInputVal: selectedOption.feeRate.toString(),
+        })
+      } else if (index === FeeRateType.CUSTOM) {
+        // When clicking on CUSTOM, show input with current custom value or empty
+        updateFeeRateBar({
+          feeOptionIndex: index,
+          showCustomInput: true,
+        })
+      }
+    },
+    [feeOptions, updateFeeRateBar]
+  )
+
+  const toggleCustomInput = useCallback(
+    (show: boolean) => {
+      updateFeeRateBar({ showCustomInput: show })
+    },
+    [updateFeeRateBar]
+  )
+
+  const isSub1FeeOptionOn = useMemo(() => {
+    if (supportLowFeeMode && feeOptionIndex === FeeRateType.SLOW) {
+      return true
+    }
+    return false
+  }, [feeOptionIndex, supportLowFeeMode])
+
+  return {
+    feeOptions,
+    feeOptionIndex,
+    setFeeOptionIndex,
+    feeRateInputVal,
+    adjustFeeRateInput,
+    isCustomOption,
+    fontSize,
+    isSpecialLocale,
+    toggleLowFeeRate,
+    showCustomInput: readonly ? false : showCustomInput,
+    toggleCustomInput,
+    supportLowFeeMode,
+    showLowFeeModeTipsPopover,
+    setShowLowFeeModeTipsPopover,
+    isSub1FeeOptionOn,
+  }
+}

package/src/ui-hooks/useInfiniteList.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+interface UseInfiniteListOptions<T> {
+  fetcher: (page: number, pageSize: number) => Promise<{ list: T[]; total: number }>
+  pageSize?: number
+  dependencies?: any[]
+}
+
+export function useInfiniteList<T>({
+  fetcher,
+  pageSize = 20,
+  dependencies = [],
+}: UseInfiniteListOptions<T>) {
+  const [data, setData] = useState<T[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, _setLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
+  const [page, _setPage] = useState(1)
+
+  const pageRef = useRef(1)
+  const loadingRef = useRef(false)
+
+  const setLoading = (v: boolean) => {
+    loadingRef.current = v
+    _setLoading(v)
+  }
+
+  const setPage = (v: number) => {
+    pageRef.current = v
+    _setPage(v)
+  }
+
+  const loadData = useCallback(
+    async (isRefresh = false) => {
+      if (loadingRef.current) return
+
+      loadingRef.current = true
+      setLoading(true)
+      try {
+        const pageToLoad = isRefresh ? 1 : pageRef.current
+        const { list, total } = await fetcher(pageToLoad, pageSize)
+
+        setTotal(total)
+        setData(prev => (isRefresh ? list : [...prev, ...list]))
+
+        const loadedCount = (pageToLoad - 1) * pageSize + list.length
+        setHasMore(loadedCount < total)
+
+        const nextPage = isRefresh ? 2 : pageToLoad + 1
+        pageRef.current = nextPage
+        setPage(nextPage)
+      } catch (e) {
+        console.error(e)
+      } finally {
+        loadingRef.current = false
+        setLoading(false)
+      }
+    },
+    [fetcher, pageSize]
+  )
+
+  const onRefresh = () => loadData(true)
+  const onLoadMore = () => {
+    if (hasMore && !loadingRef.current) loadData(false)
+  }
+
+  useEffect(() => {
+    // reset
+    setData([])
+    setPage(1)
+    setHasMore(true)
+
+    loadData(true)
+  }, dependencies)
+
+  return {
+    data,
+    total,
+    loading,
+    hasMore,
+    page,
+    onRefresh,
+    onLoadMore,
+  }
+}

package/src/ui-hooks/useInscriptionListLogic.ts

@@ -0,0 +1,68 @@
+import { Inscription } from '@unisat/wallet-shared'
+
+import { useEffect, useRef } from 'react'
+import {
+  OrdinalsAssetTabKey,
+  useChainType,
+  useCurrentAccount,
+  useNavigation,
+  useOrdinalsAssetTabKey,
+  useWallet,
+  useWallTabFocusRefresh,
+} from '..'
+import { useInfiniteList } from './useInfiniteList'
+
+export function useInscriptionListLogic() {
+  const nav = useNavigation()
+  const wallet = useWallet()
+  const currentAccount = useCurrentAccount()
+  const chainType = useChainType()
+
+  const {
+    data: items,
+    total,
+    loading,
+    hasMore,
+    onRefresh,
+    onLoadMore,
+  } = useInfiniteList<Inscription>({
+    fetcher: async (page, pageSize) => {
+      if (currentAccount.address === '') {
+        return { list: [], total: 0 }
+      }
+      const { list, total } = await wallet.getAllInscriptionList(
+        currentAccount.address,
+        page,
+        pageSize
+      )
+      return { list, total }
+    },
+    dependencies: [currentAccount.address, chainType],
+  })
+
+  const tabKey = useOrdinalsAssetTabKey()
+  const isFocus = tabKey === OrdinalsAssetTabKey.ALL
+  const lastRefreshTimeRef = useRef<number>(0)
+  const walletTabFocusRefresh = useWallTabFocusRefresh()
+  useEffect(() => {
+    if (!isFocus) return
+
+    // already refreshed → do nothing
+    const alreadyRefreshed = lastRefreshTimeRef.current === walletTabFocusRefresh
+    if (alreadyRefreshed) return
+
+    onRefresh()
+
+    // mark refreshed
+    lastRefreshTimeRef.current = walletTabFocusRefresh
+  }, [walletTabFocusRefresh, isFocus])
+
+  const onClickItem = (item: Inscription) => {
+    nav.navigate('OrdinalsInscriptionScreen', {
+      inscription: item,
+      inscriptionId: item.inscriptionId,
+    })
+  }
+
+  return { items, total, loading, hasMore, onRefresh, onLoadMore, onClickItem }
+}

package/src/ui-hooks/useLockTimePageLogic.ts

@@ -0,0 +1,43 @@
+import { getAutoLockTimes } from '@unisat/wallet-shared'
+import { useState } from 'react'
+import { useI18n, useNavigation, useTools, useWallet } from '../context'
+import { useAppDispatch, useAutoLockTimeId } from '../hooks'
+import { settingsActions } from '../reducers'
+
+export function useLockTimePageLogic() {
+  const { t } = useI18n()
+  const autoLockTimeId = useAutoLockTimeId()
+  const autoLockTimes = getAutoLockTimes(t)
+  const dispatch = useAppDispatch()
+  const wallet = useWallet()
+  const tools = useTools()
+  const [loading, setLoading] = useState(false)
+  const nav = useNavigation()
+
+  const handleSelectOption = async option => {
+    if (loading) return
+
+    setLoading(true)
+    try {
+      const lockTimeId = option.id
+      await wallet.setAutoLockTimeId(lockTimeId)
+      // @ts-ignore SAFE
+      dispatch(settingsActions.updateSettings({ autoLockTimeId: lockTimeId }))
+      tools.toastSuccess(`${t('the_auto_lock_time_has_been_changed_to')} ${option.label}`)
+
+      setTimeout(() => {
+        nav.goBack()
+      }, 300)
+    } catch (error) {
+      console.error('Failed to set lock time:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+  return {
+    autoLockTimeId,
+    autoLockTimes,
+    loading,
+    handleSelectOption,
+  }
+}

package/src/ui-hooks/useNotificationsLogic.ts

@@ -0,0 +1,115 @@
+import { AnnouncementLinkType, StoredNotification } from '@unisat/wallet-shared'
+import { useCallback, useEffect, useState } from 'react'
+import { useI18n, useNavigation, useTools, useWallet } from 'src/context'
+
+export function useUnreadNotificationsCount() {
+  const wallet = useWallet()
+  const [unreadCount, setUnreadCount] = useState(0)
+
+  useEffect(() => {
+    const updateUnreadCount = async () => {
+      const count = await wallet.getNotificationUnreadCount()
+      setUnreadCount(count)
+    }
+
+    updateUnreadCount()
+
+    // Poll every 3 seconds for unread count updates.
+    const interval = setInterval(updateUnreadCount, 3000)
+    return () => clearInterval(interval)
+  }, [wallet])
+
+  return unreadCount
+}
+
+export function useNotificationsLogic() {
+  const nav = useNavigation()
+  const wallet = useWallet()
+  const [notifications, setNotifications] = useState<StoredNotification[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchNotifications = useCallback(async () => {
+    try {
+      setLoading(true)
+      const data = await wallet.getNotifications()
+      setNotifications(data)
+    } catch (error) {
+      console.error('Failed to fetch notifications:', error)
+      setNotifications([])
+    } finally {
+      setLoading(false)
+    }
+  }, [wallet])
+
+  useEffect(() => {
+    fetchNotifications()
+  }, [fetchNotifications])
+
+  const handleReadNotification = useCallback(
+    async (id: string) => {
+      await wallet.readNotification(id)
+      // Update local state
+      setNotifications(prev => prev.map(n => (n.id === id ? { ...n, readAt: Date.now() } : n)))
+    },
+    [wallet]
+  )
+
+  const tools = useTools()
+  const { t } = useI18n()
+  const handleReadAll = useCallback(async () => {
+    await wallet.readAllNotifications()
+    // Update local state
+    const now = Date.now()
+    setNotifications(prev => prev.map(n => ({ ...n, readAt: now })))
+    tools.toastSuccess(t('all_marked_as_read'))
+  }, [wallet])
+
+  const handleDeleteNotification = useCallback(
+    async (id: string) => {
+      await wallet.deleteNotification(id)
+      // Update local state
+      setNotifications(prev => prev.filter(n => n.id !== id))
+    },
+    [wallet]
+  )
+
+  const unreadCount = notifications.filter(n => n.readAt === undefined).length
+
+  const handleCardClick = async (notification: StoredNotification) => {
+    if (notification.readAt === undefined) {
+      await handleReadNotification(notification.id)
+    }
+    if (notification.link) {
+      if (notification.linkType === AnnouncementLinkType.EXTERNAL_LINK) {
+        nav.navToUrl(notification.link, true)
+        return
+      }
+      nav.navToUrl(notification.link)
+    }
+  }
+  const formatTime = (timestamp: number) => {
+    const now = Date.now()
+    const diff = now - timestamp
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
+
+    if (minutes < 1) return t('just_now')
+    if (minutes < 60) return String(minutes) + ' ' + t('minutes_ago')
+    if (hours < 24) return String(hours) + ' ' + t('hours_ago')
+    if (days < 7) return String(days) + ' ' + t('days_ago')
+    return new Date(timestamp).toLocaleDateString()
+  }
+
+  return {
+    notifications,
+    loading,
+    unreadCount,
+    handleReadNotification,
+    handleReadAll,
+    handleDeleteNotification,
+    fetchNotifications,
+    handleCardClick,
+    formatTime,
+  }
+}