Feature/locale function (#986)

* [feature]: 2.2.8 - Expose locale function
* Add validation
* Version bumpies

Author: taylorjdawson

packages/core/README.md

@@ -174,7 +174,7 @@ const onboard = Onboard({
       { name: 'MetaMask', url: 'https://metamask.io' },
       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
     ]
-  }
+  },
   i18n: {
     en: {
       connect: {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.9-alpha.1",
+  "version": "2.2.9-alpha.2",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/constants.ts

@@ -8,7 +8,8 @@ export const APP_INITIAL_STATE: AppState = {
     enabled: true,
     position: 'topRight',
     expanded: false
-  }
+  },
+  locale: ''
 }
 
 export const STORAGE_KEYS = {

packages/core/src/index.ts

@@ -6,7 +6,8 @@ import { state } from './store'
 import {
   addChains,
   setWalletModules,
-  updateAccountCenter
+  updateAccountCenter,
+  setLocale
 } from './store/actions'
 import { reset$, internalState$ } from './streams'
 import { validateInitOptions } from './validation'
@@ -24,7 +25,8 @@ const API = {
     get: state.get,
     select: state.select,
     actions: {
-      setWalletModules
+      setWalletModules,
+      setLocale
     }
   }
 }

packages/core/src/store/actions.ts

@@ -11,6 +11,7 @@ import type {
   RemoveWalletAction,
   ResetStoreAction,
   SetWalletModulesAction,
+  SetLocaleAction,
   UpdateAccountAction,
   UpdateAccountCenterAction,
   UpdateWalletAction,
@@ -19,6 +20,7 @@ import type {
 
 import {
   validateAccountCenterUpdate,
+  validateLocale,
   validateString,
   validateWallet,
   validateWalletInit
@@ -32,7 +34,8 @@ import {
   REMOVE_WALLET,
   UPDATE_ACCOUNT,
   UPDATE_ACCOUNT_CENTER,
-  SET_WALLET_MODULES
+  SET_WALLET_MODULES,
+  SET_LOCALE
 } from './constants'
 
 export function addChains(chains: Chain[]): void {
@@ -161,3 +164,18 @@ export function setWalletModules(wallets: WalletInit[]): void {
 
   dispatch(action as SetWalletModulesAction)
 }
+
+export function setLocale(locale: string): void {
+  const error = validateLocale(locale)
+
+  if (error) {
+    throw error
+  }
+
+  const action = {
+    type: SET_LOCALE,
+    payload: locale
+  }
+
+  dispatch(action as SetLocaleAction)
+}

packages/core/src/store/constants.ts

@@ -6,3 +6,4 @@ export const REMOVE_WALLET = 'remove_wallet'
 export const UPDATE_ACCOUNT = 'update_account'
 export const UPDATE_ACCOUNT_CENTER = 'update_account_center'
 export const SET_WALLET_MODULES = 'set_wallet_modules'
+export const SET_LOCALE= 'set_locale'

packages/core/src/store/index.ts

@@ -1,8 +1,10 @@
 import { BehaviorSubject, Subject, Observable } from 'rxjs'
 import { distinctUntilKeyChanged, pluck, filter } from 'rxjs/operators'
+import { locale } from 'svelte-i18n'
+import type { Chain, WalletModule } from '@web3-onboard/common'
+
 import { APP_INITIAL_STATE } from '../constants'
 import { notNullish } from '../utils'
-import type { Chain, WalletModule } from '@web3-onboard/common'
 
 import type {
   AppState,
@@ -11,7 +13,8 @@ import type {
   UpdateWalletAction,
   AddWalletAction,
   UpdateAccountAction,
-  UpdateAccountCenterAction
+  UpdateAccountCenterAction,
+  Locale
 } from '../types'
 
 import {
@@ -22,7 +25,8 @@ import {
   RESET_STORE,
   UPDATE_ACCOUNT,
   UPDATE_ACCOUNT_CENTER,
-  SET_WALLET_MODULES
+  SET_WALLET_MODULES,
+  SET_LOCALE
 } from './constants'
 
 function reducer(state: AppState, action: Action): AppState {
@@ -115,6 +119,15 @@ function reducer(state: AppState, action: Action): AppState {
       }
     }
 
+    case SET_LOCALE: {
+      // Set the locale in the svelte-i18n internal state
+      locale.set(payload as Locale)
+      return {
+        ...state,
+        locale: payload as Locale
+      }
+    }
+
     case RESET_STORE:
       return APP_INITIAL_STATE
 

packages/core/src/types.ts

@@ -94,6 +94,7 @@ export interface AppState {
   walletModules: WalletModule[]
   wallets: WalletState[]
   accountCenter: AccountCenter
+  locale: Locale
 }
 
 export type InternalState = {
@@ -135,6 +136,7 @@ export type Action =
   | UpdateAccountAction
   | UpdateAccountCenterAction
   | SetWalletModulesAction
+  | SetLocaleAction
 
 export type AddChainsAction = { type: 'add_chains'; payload: Chain[] }
 export type AddWalletAction = { type: 'add_wallet'; payload: WalletState }
@@ -169,6 +171,11 @@ export type SetWalletModulesAction = {
   payload: WalletModule[]
 }
 
+export type SetLocaleAction = {
+  type: 'set_locale'
+  payload: string
+}
+
 // ==== MISC ==== //
 export type ChainStyle = {
   icon: string

packages/core/src/validation.ts

@@ -97,6 +97,8 @@ const walletModule = Joi.object({
 
 const walletInit = Joi.array().items(Joi.function()).required()
 
+const locale = Joi.string()
+
 const accountCenterPosition = Joi.string().valid(
   'topRight',
   'bottomRight',
@@ -200,3 +202,7 @@ export function validateAccountCenterUpdate(
 export function validateWalletInit(data: WalletInit[]): ValidateReturn {
   return validate(walletInit, data)
 }
+
+export function validateLocale(data: string): ValidateReturn {
+  return validate(locale, data)
+}

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.1.7-alpha.1",
+  "version": "2.1.7-alpha.2",
   "description": "Collection of React Hooks for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -21,7 +21,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.2.9-alpha.1",
+    "@web3-onboard/core": "^2.2.9-alpha.2",
     "@web3-onboard/common": "^2.0.7"
   },
   "peerDependencies": {