@unisat/wallet-state 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unisat/wallet-state",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Redux state management for UniSat wallet, shared between platforms",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -16,11 +16,24 @@
     "lib",
     "src"
   ],
+  "dependencies": {
+    "loglevel": "^1.8.0",
+    "@unisat/keyring-service": "1.0.0",
+    "@unisat/babylon-service": "1.0.1",
+    "@unisat/base-utils": "0.1.2",
+    "@unisat/wallet-types": "1.0.0",
+    "@unisat/wallet-shared": "0.1.1",
+    "@unisat/i18n": "1.0.0"
+  },
   "peerDependencies": {
+    "redux-localstorage-simple": "^2.5.1",
+    "compare-versions": "^4.1.3",
+    "react-i18next": "^11.16.9",
+    "i18next": "^21.8.1",
+    "react-router-dom": "^6.3.0",
     "@reduxjs/toolkit": "^1.9.0",
     "react": "^18.0.0",
-    "react-redux": "^8.0.0",
-    "@unisat/wallet-types": "1.0.0"
+    "react-redux": "^8.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/src/actions/global.ts

@@ -0,0 +1,5 @@
+import { createAction } from '@reduxjs/toolkit'
+
+// fired once when the app reloads but before the app renders
+// allows any updates to be applied to store data loaded from localStorage
+export const updateVersion = createAction<void>('global/updateVersion')

package/src/context/I18nContext.tsx

@@ -0,0 +1,191 @@
+import log from 'loglevel'
+import React, { createContext, useEffect, useState } from 'react'
+
+import {
+  BROWSER_TO_APP_LOCALE_MAP,
+  changeLanguage,
+  FALLBACK_LOCALE,
+  getSupportedLocales,
+  initI18n,
+  LOCALE_NAMES,
+  t as translate,
+} from '@unisat/i18n'
+import { useWallet } from './WalletContext'
+
+interface I18nContextType {
+  t: (key: string, substitutions?: string | string[]) => string
+  locale: string
+  supportedLocales: string[]
+  localeNames: Record<string, string>
+  changeLocale: (locale: string) => Promise<void>
+}
+
+// Create context
+export const I18nContext = createContext<I18nContextType>({
+  t: key => key,
+  locale: FALLBACK_LOCALE,
+  supportedLocales: [],
+  localeNames: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  changeLocale: async () => {},
+})
+
+// Context provider component
+export const I18nProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [locale, setLocale] = useState<string>(FALLBACK_LOCALE)
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const wallet = useWallet()
+
+  // Initialize i18n
+  useEffect(() => {
+    const initialize = async () => {
+      try {
+        let localeToUse = FALLBACK_LOCALE
+        // @ts-ignore
+        const userSelectedLanguage = localStorage.getItem('userSelectedLanguage') === 'true'
+
+        if (userSelectedLanguage) {
+          // @ts-ignore
+          const savedLocale = localStorage.getItem('i18nextLng')
+          if (savedLocale && getSupportedLocales().includes(savedLocale)) {
+            localeToUse = savedLocale
+            log.debug(`Using user selected language: ${savedLocale}`)
+          }
+        } else {
+          try {
+            const isFirstOpen = await wallet.getIsFirstOpen()
+
+            if (isFirstOpen) {
+              // @ts-ignore
+              const browserLang = navigator.language
+              log.debug(`New user - Browser language: ${browserLang}`)
+
+              const mappedLocale = BROWSER_TO_APP_LOCALE_MAP[browserLang]
+              if (mappedLocale && getSupportedLocales().includes(mappedLocale)) {
+                localeToUse = mappedLocale
+                log.debug(`Using mapped browser language: ${mappedLocale}`)
+              } else if (getSupportedLocales().includes(browserLang)) {
+                localeToUse = browserLang
+                log.debug(`Using browser language: ${browserLang}`)
+              } else {
+                const mainLang = browserLang.split('-')[0]
+                if (getSupportedLocales().includes(mainLang)) {
+                  localeToUse = mainLang
+                  log.debug(`Using browser main language: ${mainLang}`)
+                } else {
+                  log.debug(`Browser language not supported, using default: ${FALLBACK_LOCALE}`)
+                  localeToUse = FALLBACK_LOCALE
+                }
+              }
+            } else {
+              log.debug('Existing user - Using default English')
+              localeToUse = FALLBACK_LOCALE
+            }
+          } catch (error) {
+            log.error('Failed to get user status, using default language:', error)
+            localeToUse = FALLBACK_LOCALE
+          }
+        }
+
+        // @ts-ignore
+        localStorage.setItem('i18nextLng', localeToUse)
+        await initI18n(localeToUse)
+
+        chrome.storage.local.set({ i18nextLng: localeToUse })
+        await initI18n(localeToUse)
+        // const currentLocale = await getCurrentLocale();
+
+        // setLocale(currentLocale);
+        setIsInitialized(true)
+      } catch (error) {
+        log.error('Failed to initialize i18n:', error)
+
+        setLocale(FALLBACK_LOCALE)
+        setIsInitialized(true)
+        setError(error instanceof Error ? error : new Error('Unknown error'))
+      }
+    }
+
+    initialize()
+  }, [wallet])
+
+  // Change language
+  const changeLocale = async (newLocale: string) => {
+    try {
+      await changeLanguage(newLocale)
+      setLocale(newLocale)
+      // @ts-ignore
+      localStorage.setItem('userSelectedLanguage', 'true')
+      // @ts-ignore
+      localStorage.setItem('i18nextLng', newLocale)
+      chrome.storage.local.set({ i18nextLng: newLocale })
+    } catch (error) {
+      setError(error instanceof Error ? error : new Error('Unknown error'))
+    }
+  }
+
+  // Translation function
+  const t = (key: string, substitutions?: string | string[]) => {
+    try {
+      return translate(key, substitutions)
+    } catch (error) {
+      log.error(`Translation error for key "${key}":`, error)
+      return key
+    }
+  }
+
+  // If not yet initialized, show loading
+  if (!isInitialized) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100vw',
+          height: '100vh',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            justifyItems: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <div />
+        </div>
+      </div>
+    )
+  }
+
+  // If there is an error, show error message in development environment
+  // @ts-ignore
+  if (error && process.env.NODE_ENV === 'development') {
+    return (
+      <div style={{ color: 'red', padding: '20px' }}>
+        <h2>Error initializing i18n</h2>
+        <p>{error.message}</p>
+        <pre>{error.stack}</pre>
+      </div>
+    )
+  }
+
+  return (
+    <I18nContext.Provider
+      value={{
+        t,
+        locale,
+        supportedLocales: getSupportedLocales(),
+        localeNames: LOCALE_NAMES,
+        changeLocale,
+      }}
+    >
+      {children}
+    </I18nContext.Provider>
+  )
+}

package/src/context/PriceContext.tsx

@@ -0,0 +1,81 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
+
+import { CoinPrice } from '@unisat/wallet-shared'
+import { useWallet } from './WalletContext'
+
+import { useChain, useChainType } from '../hooks/settings'
+
+interface PriceContextType {
+  isLoadingCoinPrice: boolean
+  coinPrice: CoinPrice
+  refreshCoinPrice: () => void
+}
+
+const PriceContext = createContext<PriceContextType>({} as PriceContextType)
+
+export function usePrice() {
+  const context = useContext(PriceContext)
+  if (!context) {
+    throw Error('Feature flag hooks can only be used by children of BridgeProvider.')
+  } else {
+    return context
+  }
+}
+
+let isRequestingCoinPrice = false
+let refreshCoinPriceTime = 0
+
+export function PriceProvider({ children }: { children: ReactNode }) {
+  const wallet = useWallet()
+  const chainType = useChainType()
+  const chain = useChain()
+  const [isLoadingCoinPrice, setIsLoadingCoinPrice] = useState(false)
+  const [coinPrice, setCoinPrice] = useState<CoinPrice>({
+    btc: 0,
+    fb: 0,
+  })
+
+  const refreshCoinPrice = useCallback(() => {
+    if (chain.showPrice === false) {
+      return
+    }
+    if (isRequestingCoinPrice) {
+      return
+    }
+    // 30s cache
+    if (Date.now() - refreshCoinPriceTime < 30 * 1000) {
+      return
+    }
+    isRequestingCoinPrice = true
+    setIsLoadingCoinPrice(true)
+
+    wallet
+      .getCoinPrice()
+      .then(res => {
+        refreshCoinPriceTime = Date.now()
+        setCoinPrice(res)
+      })
+      .catch(e => {
+        setCoinPrice({
+          btc: 0,
+          fb: 0,
+        })
+      })
+      .finally(() => {
+        setIsLoadingCoinPrice(false)
+        isRequestingCoinPrice = false
+      })
+  }, [chainType, chain])
+
+  useEffect(() => {
+    refreshCoinPrice()
+  }, [refreshCoinPrice])
+
+  const value = {
+    isLoadingCoinPrice,
+    coinPrice,
+    refreshCoinPrice,
+  }
+
+  return <PriceContext.Provider value={value}>{children}</PriceContext.Provider>
+}