Merge pull request #1035 from blocknative/release/06-02

Release: 06-02 (main)

Author: lnbc1QWFyb24

package.json

@@ -2,16 +2,13 @@
   "name": "web3-onboard-monorepo",
   "private": true,
   "workspaces": [
-    "./packages/common",
-    "./packages/core",
-    "./packages/!(demo|core|common)/**",
-    "./packages/demo"
+    "./packages/*"
   ],
   "scripts": {
     "install-m1-mac": "yarn install --ignore-optional",
     "format": "prettier --write 'packages/**/*.ts'",
     "dev": "yarn wsrun dev",
-    "build": "yarn wsrun build",
+    "build": "yarn wsrun --stages build",
     "type-check": "yarn wsrun type-check"
   },
   "devDependencies": {

packages/core/package.json

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

packages/core/src/constants.ts

@@ -1,5 +1,5 @@
+import { internalState } from './internals'
 import type { AppState } from './types'
-import { getDevice } from './utils'
 
 export const APP_INITIAL_STATE: AppState = {
   wallets: [],
@@ -9,7 +9,7 @@ export const APP_INITIAL_STATE: AppState = {
     enabled: true,
     position: 'topRight',
     expanded: false,
-    minimal: getDevice().type === 'mobile'
+    minimal: internalState.device.type === 'mobile'
   },
   locale: ''
 }

packages/core/src/index.ts

@@ -9,14 +9,14 @@ import {
   updateAccountCenter,
   setLocale
 } from './store/actions'
-import { reset$, internalState$ } from './streams'
+import { reset$ } from './streams'
 import { validateInitOptions } from './validation'
 import initI18N from './i18n'
 
 import App from './views/Index.svelte'
 import type { InitOptions, OnboardAPI } from './types'
 import { APP_INITIAL_STATE } from './constants'
-import { getDevice } from './utils'
+import { internalState } from './internals'
 
 const API = {
   connectWallet,
@@ -59,8 +59,8 @@ function init(options: InitOptions): OnboardAPI {
   initI18N(i18n)
   addChains(chains)
 
-  const device = getDevice()
-  
+  const { device, svelteInstance } = internalState
+
   // update accountCenter
   if (typeof accountCenter !== 'undefined') {
     let accountCenterUpdate
@@ -78,9 +78,7 @@ function init(options: InitOptions): OnboardAPI {
     }
 
     updateAccountCenter(accountCenterUpdate)
-  }  
-
-  const { svelteInstance } = internalState$.getValue()
+  }
 
   if (svelteInstance) {
     // if already initialized, need to cleanup old instance
@@ -90,11 +88,9 @@ function init(options: InitOptions): OnboardAPI {
 
   const app = svelteInstance || mountApp()
 
-  internalState$.next({
-    appMetadata,
-    svelteInstance: app,
-    device
-  })
+  // update metadata and app internal state
+  internalState.appMetadata = appMetadata
+  internalState.svelteInstance = app
 
   setWalletModules(wallets)
 

packages/core/src/internals.ts

@@ -0,0 +1,8 @@
+import type { InternalState } from './types'
+import { getDevice } from './utils'
+
+export const internalState: InternalState = {
+  svelteInstance: null,
+  appMetadata: null,
+  device: getDevice()
+}

packages/core/src/store/actions.ts

@@ -1,6 +1,4 @@
-import type { Chain, WalletInit } from '@web3-onboard/common'
-import { internalState$ } from '../streams'
-import { initializeWalletModules, uniqueWalletsByLabel } from '../utils'
+import type { Chain, WalletInit, WalletModule } from '@web3-onboard/common'
 import { dispatch } from './index'
 
 import type {
@@ -37,6 +35,7 @@ import {
   SET_WALLET_MODULES,
   SET_LOCALE
 } from './constants'
+import { internalState } from '../internals'
 
 export function addChains(chains: Chain[]): void {
   // chains are validated on init
@@ -152,10 +151,7 @@ export function setWalletModules(wallets: WalletInit[]): void {
     throw error
   }
 
-  const modules = initializeWalletModules(
-    wallets,
-    internalState$.getValue().device
-  )
+  const modules = initializeWalletModules(wallets)
   const dedupedWallets = uniqueWalletsByLabel(modules)
 
   const action = {
@@ -180,3 +176,29 @@ export function setLocale(locale: string): void {
 
   dispatch(action as SetLocaleAction)
 }
+
+// ==== HELPERS ==== //
+export function initializeWalletModules(modules: WalletInit[]): WalletModule[] {
+  const { device } = internalState
+  return modules.reduce((acc, walletInit) => {
+    const initialized = walletInit({ device })
+
+    if (initialized) {
+      // injected wallets is an array of wallets
+      acc.push(...(Array.isArray(initialized) ? initialized : [initialized]))
+    }
+
+    return acc
+  }, [] as WalletModule[])
+}
+
+export function uniqueWalletsByLabel(
+  walletModuleList: WalletModule[]
+): WalletModule[] {
+  return walletModuleList.filter(
+    (wallet, i) =>
+      walletModuleList.findIndex(
+        (innerWallet: WalletModule) => innerWallet.label === wallet.label
+      ) === i
+  )
+}

packages/core/src/streams.ts

@@ -12,17 +12,11 @@ import {
 import { resetStore } from './store/actions'
 import { state } from './store'
 
-import type { WalletState, InternalState, ConnectOptions } from './types'
+import type { WalletState, ConnectOptions } from './types'
 
 export const reset$ = new Subject<void>()
 export const disconnectWallet$ = new Subject<WalletState['label']>()
 
-export const internalState$ = new BehaviorSubject<InternalState>({
-  svelteInstance: null,
-  appMetadata: null,
-  device: null
-})
-
 export const connectWallet$ = new BehaviorSubject<{
   autoSelect?: ConnectOptions['autoSelect']
   actionRequired?: string

packages/core/src/types.ts

@@ -100,7 +100,7 @@ export interface AppState {
 export type InternalState = {
   svelteInstance: SvelteComponent | null
   appMetadata: AppMetadata | null
-  device: Device | null
+  device: Device | DeviceNotBrowser
 }
 
 export type Locale = string
@@ -114,15 +114,15 @@ export type AccountCenterPosition =
   | 'topLeft'
 
 export type AccountCenter = {
-    enabled: boolean
-    position?: AccountCenterPosition
-    expanded?: boolean
-    minimal?: boolean
+  enabled: boolean
+  position?: AccountCenterPosition
+  expanded?: boolean
+  minimal?: boolean
 }
-  
+
 export type AccountCenterOptions = {
-    desktop: Omit<AccountCenter, 'expanded'>
-    mobile: Omit<AccountCenter, 'expanded'>
+  desktop: Omit<AccountCenter, 'expanded'>
+  mobile: Omit<AccountCenter, 'expanded'>
 }
 
 // ==== ACTIONS ==== //
@@ -180,3 +180,9 @@ export type ChainStyle = {
   icon: string
   color: string
 }
+
+export type DeviceNotBrowser = {
+  type: null
+  os: null
+  browser: null
+}

packages/core/src/utils.ts

@@ -6,9 +6,7 @@ import type {
   DeviceOS,
   DeviceType,
   ChainId,
-  Chain,
-  WalletInit,
-  WalletModule
+  Chain
 } from '@web3-onboard/common'
 
 import ethereumIcon from './icons/ethereum'
@@ -23,18 +21,26 @@ import gnosisIcon from './icons/gnosis'
 import harmonyOneIcon from './icons/harmony-one'
 import arbitrumIcon from './icons/arbitrum'
 
-import type { ChainStyle, ConnectedChain } from './types'
+import type { ChainStyle, ConnectedChain, DeviceNotBrowser } from './types'
 
-export function getDevice(): Device {
-  const parsed = bowser.getParser(window.navigator.userAgent)
-  const os = parsed.getOS()
-  const browser = parsed.getBrowser()
-  const { type } = parsed.getPlatform()
+export function getDevice(): Device | DeviceNotBrowser {
+  if (typeof window !== 'undefined') {
+    const parsed = bowser.getParser(window.navigator.userAgent)
+    const os = parsed.getOS()
+    const browser = parsed.getBrowser()
+    const { type } = parsed.getPlatform()
 
-  return {
-    type: type as DeviceType,
-    os: os as DeviceOS,
-    browser: browser as DeviceBrowser
+    return {
+      type: type as DeviceType,
+      os: os as DeviceOS,
+      browser: browser as DeviceBrowser
+    }
+  } else {
+    return {
+      type: null,
+      os: null,
+      browser: null
+    }
   }
 }
 
@@ -157,30 +163,3 @@ export function connectedToValidAppChain(
       namespace === walletConnectedChain.namespace
   )
 }
-
-export function initializeWalletModules(
-  modules: WalletInit[],
-  device: Device
-): WalletModule[] {
-  return modules.reduce((acc, walletInit) => {
-    const initialized = walletInit({ device })
-
-    if (initialized) {
-      // injected wallets is an array of wallets
-      acc.push(...(Array.isArray(initialized) ? initialized : [initialized]))
-    }
-
-    return acc
-  }, [] as WalletModule[])
-}
-
-export function uniqueWalletsByLabel(
-  walletModuleList: WalletModule[]
-): WalletModule[] {
-  return walletModuleList.filter(
-    (wallet, i) =>
-      walletModuleList.findIndex(
-        (innerWallet: WalletModule) => innerWallet.label === wallet.label
-      ) === i
-  )
-}

packages/core/src/views/account-center/Maximized.svelte

@@ -2,7 +2,7 @@
   import { _ } from 'svelte-i18n'
   import { fly } from 'svelte/transition'
   import { quartOut } from 'svelte/easing'
-  import { internalState$, wallets$ } from '../../streams'
+  import { wallets$ } from '../../streams'
   import en from '../../i18n/en.json'
   import WalletRow from './WalletRow.svelte'
   import plusCircleIcon from '../../icons/plus-circle'
@@ -20,14 +20,14 @@
   import { updateAccountCenter } from '../../store/actions'
   import blocknative from '../../icons/blocknative'
   import DisconnectAllConfirm from './DisconnectAllConfirm.svelte'
-  import { getDevice } from '../../utils'
+  import { internalState } from '../../internals'
 
   function disconnectAllWallets() {
     $wallets$.forEach(({ label }) => disconnect({ label }))
   }
 
   const { chains: appChains } = state.get()
-  const { appMetadata } = internalState$.getValue()
+  const { appMetadata } = internalState
   let disconnectConfirmModal = false
   let hideWalletRowMenu: () => void
 
@@ -45,7 +45,7 @@
   )
 
   const { position } = state.get().accountCenter
-  const device = getDevice()
+  const { device } = internalState
 </script>
 
 <style>