diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx index ba4fc311..a7027011 100644 --- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx +++ b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx @@ -47,7 +47,7 @@ export const TransactionListItemView = ({ transaction }: Props) => { const [txnUsdValue, setTxnUsdValue] = useState('0.00'); const { translate } = useMultiLanguage(); - const { language } = useAppSelector((state) => state.wallet); + const { locale } = useAppSelector((state) => state.wallet); useEffect(() => { const fetchData = async () => { @@ -74,7 +74,7 @@ export const TransactionListItemView = ({ transaction }: Props) => { }, []); const txnName = getTxnName(transaction, tokenAddress); - const txnDate = getTxnDate(transaction, language); + const txnDate = getTxnDate(transaction, locale); const txnStatus = getTxnStatus(transaction); const txnToFromLabel = ''; const txnFailureReason = getTxnFailureReason(transaction); diff --git a/packages/wallet-ui/src/services/useMultiLanguage.ts b/packages/wallet-ui/src/services/useMultiLanguage.ts index aeb7b22c..e8da7a5a 100644 --- a/packages/wallet-ui/src/services/useMultiLanguage.ts +++ b/packages/wallet-ui/src/services/useMultiLanguage.ts @@ -1,10 +1,10 @@ import { useAppSelector } from 'hooks/redux'; export const useMultiLanguage = () => { - const { locale } = useAppSelector((state) => state.wallet); + const { translations } = useAppSelector((state) => state.wallet); const translate = (key: string, ...args: (string | undefined)[]): string => { - const template = locale[key]?.message ?? `{${key}}`; + const template = translations[key]?.message ?? `{${key}}`; return template.replace(/\{(\d+)\}/g, (_, index: string) => { const argIndex = parseInt(index, 10) - 1; diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts index abec4372..f3074728 100644 --- a/packages/wallet-ui/src/services/useStarkNetSnap.ts +++ b/packages/wallet-ui/src/services/useStarkNetSnap.ts @@ -14,8 +14,8 @@ import { setTransactions, setTransactionDeploy, setForceReconnect, - setLanguage, setLocale, + setTranslations, } from '../slices/walletSlice'; import Toastr from 'toastr2'; import { @@ -110,9 +110,9 @@ export const useStarkNetSnap = () => { }); }; - const loadPreferences = async () => { + const loadLocale = async () => { try { - const { locale: userLocale } = await provider.request({ + const { locale } = await provider.request({ method: 'wallet_invokeSnap', params: { snapId, @@ -121,9 +121,9 @@ export const useStarkNetSnap = () => { }, }, }); - const messages = await import(`../assets/locales/${userLocale}.json`); - dispatch(setLanguage(userLocale as string)); - dispatch(setLocale(messages.messages)); + const messages = await import(`../assets/locales/${locale}.json`); + dispatch(setLocale(locale)); + dispatch(setTranslations(messages.messages)); } catch (error) { console.error( 'Failed to load user preferences. Falling back to default locale.', @@ -257,7 +257,7 @@ export const useStarkNetSnap = () => { dispatch(setActiveNetwork(idx)); const chainId = net.chainId; await getWalletData(chainId, nets); - await loadPreferences(); + await loadLocale(); } catch (err: any) { if (err.code && err.code === 4100) { const toastr = new Toastr(); diff --git a/packages/wallet-ui/src/slices/walletSlice.ts b/packages/wallet-ui/src/slices/walletSlice.ts index 80dc4345..06b29a48 100644 --- a/packages/wallet-ui/src/slices/walletSlice.ts +++ b/packages/wallet-ui/src/slices/walletSlice.ts @@ -8,8 +8,8 @@ import defaultLocale from '../assets/locales/en.json'; export interface WalletState { connected: boolean; isLoading: boolean; - language: string; - locale: Locale; + locale: string; + translations: Locale; forceReconnect: boolean; accounts: Account[]; erc20TokenBalances: Erc20TokenBalance[]; @@ -22,8 +22,8 @@ export interface WalletState { const initialState: WalletState = { connected: false, isLoading: false, - language: 'en', - locale: defaultLocale.messages, + locale: 'en', + translations: defaultLocale.messages, forceReconnect: false, accounts: [], erc20TokenBalances: [], @@ -37,12 +37,12 @@ export const walletSlice = createSlice({ name: 'wallet', initialState, reducers: { - setLanguage: (state, { payload }) => { - state.language = payload; - }, setLocale: (state, { payload }) => { state.locale = payload; }, + setTranslations: (state, { payload }) => { + state.translations = payload; + }, setProvider: (state, { payload }) => { state.provider = payload; }, @@ -128,7 +128,7 @@ export const { setTransactionDeploy, resetWallet, setProvider, - setLanguage, + setTranslations, setLocale, } = walletSlice.actions;