@unisat/wallet-state 1.0.5 → 1.2.0

package/src/hooks/ui.ts

@@ -1,17 +1,14 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 
-import { ChainType } from '@unisat/wallet-types'
-import { Inscription } from '@unisat/wallet-shared'
+import { CHAINS_MAP, Inscription } from '@unisat/wallet-shared'
+import { AddressType, ChainType } from '@unisat/wallet-types'
 import { getAddressType } from '../utils/bitcoin-utils'
-import { AddressType } from '@unisat/wallet-types'
 
 import { AppState, AssetTabKey } from '..'
-import { useCurrentAccount, useCurrentAddress } from '../hooks/accounts'
+import { useCurrentAddress } from '../hooks/accounts'
 import { useAppDispatch, useAppSelector } from '../hooks/base'
-import { useChainType, useNetworkType } from '../hooks/settings'
+import { useChainType, useIconBaseUrl, useUnisatWebsite } from '../hooks/settings'
 import { uiActions } from '../reducers/ui'
-import { TypeChain } from '@unisat/wallet-shared'
-import { useLocation } from 'react-router-dom'
 export function useUIState(): AppState['ui'] {
   return useAppSelector(state => state.ui)
 }
@@ -36,6 +33,11 @@ export function useAlkanesAssetTabKey() {
   return uiState.alkanesAssetTabKey
 }
 
+export function useMoreAssetTabKey() {
+  const uiState = useUIState()
+  return uiState.moreAssetTabKey
+}
+
 export function useUiTxCreateScreen() {
   const uiState = useUIState()
   return uiState.uiTxCreateScreen
@@ -47,14 +49,112 @@ export function useUpdateUiTxCreateScreen() {
     toInfo,
     inputAmount,
     enableRBF,
-    feeRate,
   }: {
     toInfo?: { address: string; domain: string; inscription?: Inscription }
     inputAmount?: string
     enableRBF?: boolean
+  }) => {
+    dispatch(
+      (uiActions as any).updateTxCreateScreen({
+        toInfo,
+        inputAmount,
+        enableRBF,
+      })
+    )
+  }
+}
+
+export function useFeeRateBar() {
+  const uiState = useUIState()
+  return uiState.feeRateBar
+}
+
+export function useUpdateFeeRateBar() {
+  const dispatch = useAppDispatch()
+  return ({
+    feeRate,
+    feeRateInputVal,
+    enableLowFeeRate,
+    feeOptionIndex,
+    showCustomInput,
+  }: {
     feeRate?: number
+    feeRateInputVal?: string
+    enableLowFeeRate?: boolean
+    feeOptionIndex?: number
+    showCustomInput?: boolean
   }) => {
-    dispatch((uiActions as any).updateTxCreateScreen({ toInfo, inputAmount, enableRBF, feeRate }))
+    dispatch(
+      (uiActions as any).updateFeeRateBar({
+        feeRate,
+        feeRateInputVal,
+        enableLowFeeRate,
+        feeOptionIndex,
+        showCustomInput,
+      })
+    )
+  }
+}
+
+export function useResetFeeRateBar() {
+  const dispatch = useAppDispatch()
+  return () => {
+    dispatch((uiActions as any).resetFeeRateBar())
+  }
+}
+
+export function useAddressInput() {
+  const uiState = useUIState()
+  return uiState.addressInput
+}
+
+export function useUpdateAddressInput() {
+  const dispatch = useAppDispatch()
+  return ({ address, domain }: { address?: string; domain?: string }) => {
+    dispatch(
+      (uiActions as any).updateAddressInput({
+        address,
+        domain,
+      })
+    )
+  }
+}
+
+export function useResetAddressInput() {
+  const dispatch = useAppDispatch()
+  return () => {
+    dispatch((uiActions as any).resetAddressInput())
+  }
+}
+
+export function useAmountInput() {
+  const uiState = useUIState()
+  return uiState.amountInput
+}
+
+export function useUpdateAmountInput() {
+  const dispatch = useAppDispatch()
+  return ({ amount }: { amount?: string }) => {
+    dispatch(
+      (uiActions as any).updateAmountInput({
+        amount,
+      })
+    )
+  }
+}
+
+export function useResetAmountInput() {
+  const dispatch = useAppDispatch()
+  return () => {
+    dispatch((uiActions as any).resetAmountInput())
+  }
+}
+
+export function useResetTxState() {
+  const dispatch = useAppDispatch()
+  return () => {
+    dispatch((uiActions as any).resetTxCreateScreen())
+    dispatch((uiActions as any).resetFeeRateBar())
   }
 }
 
@@ -65,18 +165,32 @@ export function useResetUiTxCreateScreen() {
   }
 }
 
-export function useSupportedAssets() {
-  const chainType = useChainType()
-  const currentAddress = useCurrentAddress()
-  const networkType = useNetworkType()
-  const currentAccount = useCurrentAccount()
+export const useThrottle = (callback, delay, lastCallRef) => {
+  return useCallback(
+    (...args) => {
+      const now = Date.now()
+      if (now - lastCallRef.current > delay) {
+        lastCallRef.current = now
+        callback(...args)
+      }
+    },
+    [callback, delay, lastCallRef]
+  )
+}
 
+export function getSupportedAssets(chainType: ChainType, address: string) {
   const assetTabKeys: AssetTabKey[] = []
+
+  const chain = CHAINS_MAP[chainType]
+  const networkType = chain.networkType
+  const addressType = getAddressType(address, networkType)
+
   const assets = {
     ordinals: false,
     runes: false,
     CAT20: false,
     alkanes: false,
+    brc20Prog: false,
   }
 
   assets.ordinals = true
@@ -86,27 +200,35 @@ export function useSupportedAssets() {
   assetTabKeys.push(AssetTabKey.RUNES)
 
   if (
-    chainType === ChainType.FRACTAL_BITCOIN_MAINNET ||
-    chainType === ChainType.FRACTAL_BITCOIN_TESTNET
+    (chainType === ChainType.FRACTAL_BITCOIN_MAINNET ||
+      chainType === ChainType.FRACTAL_BITCOIN_TESTNET) &&
+    (addressType == AddressType.P2TR || addressType == AddressType.P2WPKH)
   ) {
-    const addressType = getAddressType(currentAddress, networkType)
-    if (addressType == AddressType.P2TR || addressType == AddressType.P2WPKH) {
-      assets.CAT20 = true
-      assetTabKeys.push(AssetTabKey.CAT)
-    }
+    assets.CAT20 = true
+    assetTabKeys.push(AssetTabKey.CAT)
   }
 
-  if (chainType === ChainType.BITCOIN_SIGNET || chainType === ChainType.BITCOIN_MAINNET) {
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.BITCOIN_SIGNET) {
     assets.alkanes = true
-    assetTabKeys.push(AssetTabKey.ALKANES)
+    assetTabKeys.push(AssetTabKey.MORE)
+  }
+
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.BITCOIN_SIGNET) {
+    assets.brc20Prog = true
   }
 
   return {
-    tabKeys: assetTabKeys,
     assets,
-    key: assetTabKeys.join(','),
+    tabKeys: assetTabKeys,
+    key: chainType + address + assetTabKeys.join(','),
   }
 }
+export function useSupportedAssets() {
+  const chainType = useChainType()
+  const currentAddress = useCurrentAddress()
+  const supportedAssets = getSupportedAssets(chainType, currentAddress)
+  return supportedAssets
+}
 
 export const useIsInExpandView = () => {
   // @ts-ignore
@@ -124,18 +246,100 @@ export const useIsInExpandView = () => {
   }, [window.innerWidth])
 }
 
-export const useUtxoTools = (chain: TypeChain) => {
-  const openUtxoTools = () => {
-    // @ts-ignore
-    window.open(`${chain.unisatUrl}/utxo?tab=all`)
+export function useWalletTopTabScreenState() {
+  const uiState = useUIState()
+  return uiState.walletTopTabScreen
+}
+
+export function useBRC20IconInfo(ticker: string) {
+  const baseUrl = useIconBaseUrl()
+  const iconUrl = `${baseUrl}/brc20/${ticker}`
+  const iconShortName = ticker.substring(0, 2)
+  const chainType = useChainType()
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.FRACTAL_BITCOIN_MAINNET) {
+    return { iconUrl, iconShortName }
   }
 
-  return {
-    openUtxoTools,
+  return { iconUrl: '', iconShortName }
+}
+
+export function useRunesIconInfo(spacedRune: string) {
+  const baseUrl = useIconBaseUrl()
+  const iconUrl = `${baseUrl}/runes/${spacedRune}`
+  const iconShortName = spacedRune.substring(0, 2)
+  const chainType = useChainType()
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.FRACTAL_BITCOIN_MAINNET) {
+    return { iconUrl, iconShortName }
   }
+
+  return { iconUrl: '', iconShortName }
 }
 
-export function useLocationState<T>() {
-  const { state } = useLocation()
-  return state as T
+export function useAlkanesIconInfo(name: string, alkaneid: string) {
+  const baseUrl = useIconBaseUrl()
+  const iconUrl = `${baseUrl}/alkanes/${name}/${alkaneid}`
+  const iconShortName = name.substring(0, 2)
+  const chainType = useChainType()
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.FRACTAL_BITCOIN_MAINNET) {
+    return { iconUrl, iconShortName }
+  }
+
+  return { iconUrl: '', iconShortName }
+}
+
+export function useCAT20IconInfo(name: string, tokenId: string) {
+  const baseUrl = useIconBaseUrl()
+  const iconUrl = `${baseUrl}/cat20/${name}/${tokenId}`
+  const iconShortName = name.substring(0, 2)
+  const chainType = useChainType()
+  if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.FRACTAL_BITCOIN_MAINNET) {
+    return { iconUrl, iconShortName }
+  }
+
+  return { iconUrl: '', iconShortName }
+}
+
+export function useBRC20MarketPlaceWebsite(ticker: string) {
+  const chainType = useChainType()
+  const unisatWebsite = useUnisatWebsite()
+  if (chainType === ChainType.BITCOIN_MAINNET) {
+    if (ticker.length == 6) {
+      return `${unisatWebsite}/market/brc20_prog?tick=${ticker}`
+    }
+  }
+  return `${unisatWebsite}/market/brc20?tick=${ticker}`
+}
+
+export function useRunesMarketUrl(ticker: string) {
+  const unisatWebsite = useUnisatWebsite()
+  return `${unisatWebsite}/runes/market?tick=${ticker}`
+}
+
+export function useAlkanesMarketPlaceWebsite(alkaneid: string) {
+  const unisatWebsite = useUnisatWebsite()
+  return `${unisatWebsite}/alkanes/market?tick=${alkaneid}`
+}
+
+export function useCAT20MarketPlaceWebsite(tokenId: string) {
+  const unisatWebsite = useUnisatWebsite()
+  return `${unisatWebsite}/dex/cat20/${tokenId}`
+}
+
+export function useRunesInscribeUrl(rune: string) {
+  const unisatWebsite = useUnisatWebsite()
+  const newUrl = `${unisatWebsite}/runes/inscribe?only=1&tab=mint&rune=${rune}`
+  return newUrl
+}
+
+export function useBalanceCardDetailExpanded() {
+  const uiState = useUIState()
+  return uiState.balanceDetailExpanded
+}
+
+export function useToggleBalanceCardDetailExpanded() {
+  const { balanceDetailExpanded } = useUIState()
+  const dispatch = useAppDispatch()
+  return useCallback(() => {
+    dispatch((uiActions as any).setBalanceDetailExpanded(!balanceDetailExpanded))
+  }, [dispatch, balanceDetailExpanded])
 }

package/src/index.ts

@@ -11,35 +11,44 @@ import keyrings from './reducers/keyrings'
 import settings from './reducers/settings'
 import transactions from './reducers/transactions'
 import ui from './reducers/ui'
+import browser from './reducers/browser'
 
 const PERSISTED_KEYS: string[] = ['ui', 'discovery']
-const store = configureStore({
-  reducer: {
-    accounts,
-    transactions,
-    settings,
-    global,
-    keyrings,
-    ui,
-    discovery,
-  },
-  middleware: getDefaultMiddleware =>
-    // @ts-ignore
-    getDefaultMiddleware({ thunk: true }).concat(save({ states: PERSISTED_KEYS, debounce: 1000 })),
-  preloadedState: load({ states: PERSISTED_KEYS, disableWarnings: true }),
-})
-
-store.dispatch(updateVersion())
-
-setupListeners(store.dispatch)
-
-export default store
-
-export type AppState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
+
+export function createAppStore() {
+  const store = configureStore({
+    reducer: {
+      accounts,
+      transactions,
+      settings,
+      global,
+      keyrings,
+      ui,
+      discovery,
+      browser,
+    },
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({ thunk: true }).concat(
+        save({ states: PERSISTED_KEYS, debounce: 1000 })
+      ),
+    preloadedState: load({ states: PERSISTED_KEYS, disableWarnings: true }),
+  })
+
+  store.dispatch(updateVersion())
+  setupListeners(store.dispatch)
+
+  return store
+}
+
+export type AppStore = ReturnType<typeof createAppStore>
+export type AppState = ReturnType<AppStore['getState']>
+export type AppDispatch = AppStore['dispatch']
 
 export * from './context'
 export * from './hooks'
 export * from './updater'
 export * from './reducers'
 export * from './types'
+export * from './ui-hooks'
+export { uiEventBus } from './utils/eventBus'
+export { useAsyncEffect } from './utils/ui-utils'

package/src/reducers/accounts.ts

@@ -1,3 +1,4 @@
+import { createSlice, Slice } from '@reduxjs/toolkit'
 import {
   Account,
   AddressSummary,
@@ -7,10 +8,19 @@ import {
   InscriptionSummary,
   TxHistoryItem,
 } from '@unisat/wallet-shared'
-import { createSlice, Slice } from '@reduxjs/toolkit'
 
 import { updateVersion } from '../actions/global'
 
+export interface Molels {
+  states: boolean
+}
+
+export interface MolelsPopover {
+  state: boolean
+  title: string
+  data: any
+}
+
 export interface AccountsState {
   accounts: Account[]
   current: Account
@@ -43,6 +53,8 @@ export interface AccountsState {
   appSummary: AppSummary
   inscriptionSummary: InscriptionSummary
   addressSummary: AddressSummary
+  model: Molels
+  molelsPopover: MolelsPopover
 }
 
 const initialAccount = {
@@ -84,6 +96,9 @@ export const initialState: AccountsState = {
     address: '',
     runesCount: 0,
   },
+
+  model: { states: false },
+  molelsPopover: { state: false, title: '', data: null },
 }
 
 const slice: Slice<AccountsState> = createSlice({
@@ -150,7 +165,7 @@ const slice: Slice<AccountsState> = createSlice({
     ) {
       const {
         payload: {
-          balance: { availableBalance, unavailableBalance, totalBalance },
+          balance: { availableBalance, unavailableBalance, totalBalance, chainType },
           address,
         },
       } = action
@@ -158,14 +173,19 @@ const slice: Slice<AccountsState> = createSlice({
         availableBalance: 0,
         unavailableBalance: 0,
         totalBalance: 0,
+        chainType,
       }
       state.balanceV2Map[address].availableBalance = availableBalance
       state.balanceV2Map[address].unavailableBalance = unavailableBalance
       state.balanceV2Map[address].totalBalance = totalBalance
+      state.balanceV2Map[address].chainType = chainType
     },
     setAddressSummary(state, action: { payload: any }) {
       state.addressSummary = action.payload
     },
+    setModelPopover(state, action: { payload: MolelsPopover }) {
+      state.molelsPopover = action.payload
+    },
     expireBalance(state) {
       const balance = state.balanceMap[state.current.address]
       if (balance) {

package/src/reducers/browser.ts

@@ -0,0 +1,223 @@
+import { createSlice, Slice } from '@reduxjs/toolkit'
+import { AppInfo } from '@unisat/wallet-shared'
+export enum WalletTabScreenTabKey {
+  ALL,
+  BRC20,
+}
+
+type suspensionType = {
+  suspensionIf: boolean
+  info: AppInfo | object | any
+  web: any
+}
+
+type wcars = {
+  if?: boolean
+  url: string
+}
+
+type guideListsType = {
+  id: number
+  title: string
+  content: string
+  img: string
+}
+
+export interface setSessionDateProps {
+  icon: string
+  name: string
+  origin: string
+}
+
+const wcarss: wcars = {
+  if: false,
+  url: '',
+}
+const riskIfs: boolean = false
+
+const suspensions: suspensionType = {
+  suspensionIf: false,
+  info: {},
+  web: '',
+}
+
+const collects: any = [
+  {
+    id: 4,
+    name: 'My favorites',
+    icon: 'collect_white',
+    list: null,
+  },
+]
+
+const yys: any = false
+
+const riseHeights: number = 100
+
+const ScanDatas: string = ''
+
+const historyLists: any = []
+
+const mnemonicAids: any = []
+
+const amountValues: string = null
+
+const guideLists: guideListsType[] = [
+  {
+    id: 1,
+    title: 'Welcome to UniSat',
+    content: 'Your trusted Bitcoin wallet with full support for Ordinals and Atomicals protocols.',
+    img: 'guide1',
+  },
+  {
+    id: 2,
+    title: 'Effortless Bitcoin Asset Management',
+    content: 'Easily switch between accounts and wallets for seamless asset management.',
+    img: 'guide2',
+  },
+  {
+    id: 3,
+    title: 'Discover Web3 on Bitcoin',
+    content: 'Let us guide you through the world of Bitcoin web3 with ease.',
+    img: 'guide3',
+  },
+]
+
+const popUps: boolean = false
+
+const setStatusBars: boolean = false
+
+const setSessionDates: setSessionDateProps = {
+  icon: '',
+  name: '',
+  origin: '',
+}
+
+const i18Classs: string = 'ru'
+
+const webViewLods: boolean = true
+
+export interface BrowserState {
+  walletTabScreen: {
+    tabKey: wcars
+    riskIf: boolean
+    collect: any
+    historyList: any
+    suspension: suspensionType
+    yy: any
+    riseHeight: number
+    ScanData: string
+    amountValue: string
+    guideList: guideListsType[]
+    popUp: boolean
+    setStatusBar: boolean
+    i18Class: string
+    setSessionDate: setSessionDateProps
+    webViewLod: boolean
+  }
+}
+
+export const initialState: BrowserState = {
+  walletTabScreen: {
+    tabKey: wcarss,
+    riskIf: riskIfs,
+    collect: collects,
+    historyList: historyLists,
+    suspension: suspensions,
+    yy: yys,
+    riseHeight: riseHeights,
+    ScanData: ScanDatas,
+    amountValue: amountValues,
+    guideList: guideLists,
+    popUp: popUps,
+    setStatusBar: setStatusBars,
+    i18Class: i18Classs,
+    setSessionDate: setSessionDates,
+    webViewLod: webViewLods,
+  },
+}
+const slice: Slice<BrowserState> = createSlice({
+  name: 'browser',
+  initialState,
+  reducers: {
+    reset(state) {
+      return initialState
+    },
+    updateWalletRisk(
+      state,
+      action: {
+        payload: {
+          tabKey: wcars
+        }
+      }
+    ) {
+      const { payload } = action
+      state.walletTabScreen.tabKey = payload.tabKey
+      return state
+    },
+    usedatariskIfs(state, action) {
+      state.walletTabScreen.riskIf = action.payload
+      return state
+    },
+    usedataricollect(state, action) {
+      if (!action.payload) {
+        state.walletTabScreen.collect[0].list = null
+      } else {
+        state.walletTabScreen.collect[0].list = action.payload
+      }
+      return state
+    },
+    usedatariInfo(state, action) {
+      return state
+    },
+    usedatarihistoryList(state, action) {
+      state.walletTabScreen.historyList = action.payload
+      return state
+    },
+    usedatarisuspension(state, action) {
+      state.walletTabScreen.suspension = action.payload
+      return state
+    },
+    usedatarisyyn(state, action) {
+      state.walletTabScreen.yy = action.payload
+      return state
+    },
+    usedatarisriseHeight(state, action) {
+      state.walletTabScreen.riseHeight = action.payload
+      return state
+    },
+    usedataScanData(state, action) {
+      state.walletTabScreen.ScanData = action.payload
+      return state
+    },
+    usedatamnemonicAid(state, action) {
+      return state
+    },
+    usedatamountValue(state, action) {
+      state.walletTabScreen.amountValue = action.payload
+      return state
+    },
+    usedatapopUp(state, action) {
+      state.walletTabScreen.popUp = action.payload
+      return state
+    },
+    usedatasetStatusBar(state, action) {
+      state.walletTabScreen.setStatusBar = action.payload
+      return state
+    },
+    usedatasetSessionDate(state, action) {
+      state.walletTabScreen.setSessionDate = action.payload
+      return state
+    },
+    usedatawebViewLod(state, action) {
+      state.walletTabScreen.webViewLod = action.payload
+      return state
+    },
+  },
+  extraReducers: builder => {
+    // todo
+  },
+})
+
+export const browserActions = slice.actions
+export default slice.reducer