[core, react, vue]: Fix - Account Center container el (#1323)

* Working as expected with styles
* cleanup and props for AC localized to AC index
* mark accountCenter.containerElement as deprecated
* Add documentation around container element usage
* Final cleanup for now
* Update demo
* yarn it
* Remove unused link

Author: Adamj1232

packages/core/README.md

@@ -78,6 +78,13 @@ type AppMetadata = {
   explore?: string
   // if your app only supports injected wallets and when no injected wallets detected, recommend the user to install some
   recommendedInjectedWallets?: RecommendedInjectedWallets[]
+  /** Gas module */
+  gas?: typeof gas
+  /**
+   * Object mapping for W3O components with the key being the component and the value the DOM element to mount
+   * the component to. This element must be available at time of package script execution.
+   */
+  containerElements?: Partial<ContainerElements>
 }
 
 type RecommendedInjectedWallets = {
@@ -106,21 +113,38 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+**`containerElements`**
+An object mapping for W3O components with the key being the DOM element to mount the specified component to.
+This defines the DOM container element for svelte to attach the component.
+
+**NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting. 
+For an example please see containerElement usage [here](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/demo/src/App.svelte#L227)
+
+```typescript
+type ContainerElements = {
+  // when using the accountCenter with a container el the accountCenter position properties are ignored
+  accountCenter?: string
+}
+```
+
 **`accountCenter`**
 An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
 ```typescript
-export type AccountCenter = {
+type AccountCenter = {
   enabled: boolean
   position?: AccountCenterPosition // default: 'topRight'
   expanded?: boolean // default: true
   minimal?: boolean // enabled by default for mobile
-  containerElement?: string // defines the DOM container element for svelte to attach 
-  // **NOTE: containerElement must be a DOM element with a styleSheet property attached.
-  // This property can normally be omitted from the config and allowed to default to document.body
+
+  /**
+   * @deprecated Use top level containerElements property
+   * with the accountCenter prop set to the desired container El
+   */
+  containerElement?: string // defines the DOM container element for svelte to attach
 }
 
-export type AccountCenterOptions = {
+type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
 }
@@ -170,11 +194,11 @@ unsubscribe()
 ```
 
 ```typescript
-export type NotifyOptions = {
+type NotifyOptions = {
   desktop: Notify
   mobile: Notify
 }
-export type Notify = {
+type Notify = {
   enabled: boolean // default: true
   /**
    * Callback that receives all transaction events
@@ -196,17 +220,13 @@ export type Notify = {
   }
 }
 
-export type CommonPositions =
-  | 'topRight'
-  | 'bottomRight'
-  | 'bottomLeft'
-  | 'topLeft'
+type CommonPositions = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft'
 
-export type TransactionHandlerReturn = CustomNotification | boolean | void
+type TransactionHandlerReturn = CustomNotification | boolean | void
 
-export type CustomNotification = Partial<Omit<Notification, 'id' | 'startTime'>>
+type CustomNotification = Partial<Omit<Notification, 'id' | 'startTime'>>
 
-export type Notification = {
+type Notification = {
   id: string
   key: string
   type: NotificationType
@@ -219,7 +239,7 @@ export type Notification = {
   onClick?: (event: Event) => void
 }
 
-export type NotificationType = 'pending' | 'success' | 'error' | 'hint'
+type NotificationType = 'pending' | 'success' | 'error' | 'hint'
 
 export declare type Network =
   | 'main'
@@ -588,7 +608,9 @@ const onboard = Onboard({
       token: 'ETH',
       label: 'Ethereum Mainnet',
       // Only one RPC required
-      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}` || `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`
+      rpcUrl:
+        `https://mainnet.infura.io/v3/${INFURA_KEY}` ||
+        `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`
     }
   ]
 })

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.9.1-alpha.3",
+  "version": "2.10.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

packages/core/src/configuration.ts

@@ -7,7 +7,8 @@ export let configuration: Configuration = {
   apiKey: null,
   device: getDevice(),
   initialWalletInit: [],
-  gas: null
+  gas: null,
+  containerElements: { accountCenter: null }
 }
 
 export function updateConfiguration(update: Partial<Configuration>): void {

packages/core/src/constants.ts

@@ -9,7 +9,6 @@ export const APP_INITIAL_STATE: AppState = {
     enabled: true,
     position: 'topRight',
     expanded: false,
-    containerElement: 'body',
     minimal: configuration.device.type === 'mobile'
   },
   notify: {

packages/core/src/index.ts

@@ -89,9 +89,12 @@ function init(options: InitOptions): OnboardAPI {
     apiKey,
     notify,
     gas,
-    connect
+    connect,
+    containerElements
   } = options
 
+  updateConfiguration({ containerElements })
+
   const { device, svelteInstance } = configuration
 
   if (svelteInstance) {
@@ -122,7 +125,6 @@ function init(options: InitOptions): OnboardAPI {
         ...accountCenter.desktop
       }
     }
-
     updateAccountCenter(accountCenterUpdate)
   }
 

packages/core/src/types.ts

@@ -50,8 +50,13 @@ export interface InitOptions {
    * Transaction notification options
    */
   notify?: Partial<NotifyOptions> | Partial<Notify>
-  /**Gas module */
+  /** Gas module */
   gas?: typeof gas
+  /**
+   * Object mapping for W3O components with the key being the DOM element to mount
+   * the component to, this defines the DOM container element for svelte to attach the component
+   */
+  containerElements?: Partial<ContainerElements>
 }
 
 export interface ConnectOptions {
@@ -131,6 +136,7 @@ export type Configuration = {
   appMetadata?: AppMetadata | null
   apiKey?: string
   gas?: typeof gas
+  containerElements?: ContainerElements
 }
 
 export type Locale = string
@@ -156,6 +162,10 @@ export type AccountCenter = {
   position?: AccountCenterPosition
   expanded?: boolean
   minimal?: boolean
+  /**
+   * @deprecated Use top level containerElements property
+   * with the accountCenter prop set to the desired container El
+   */
   containerElement?: string
 }
 
@@ -164,6 +174,10 @@ export type AccountCenterOptions = {
   mobile: Omit<AccountCenter, 'expanded'>
 }
 
+export type ContainerElements = {
+  accountCenter?: string
+}
+
 export type Notify = {
   /**
    * Defines whether whether to subscribe to transaction events or not

packages/core/src/validation.ts

@@ -165,6 +165,10 @@ const connectModalOptions = Joi.object({
   showSidebar: Joi.boolean()
 })
 
+const containerElements = Joi.object({
+  accountCenter: Joi.string()
+})
+
 const initOptions = Joi.object({
   wallets: walletInit,
   chains: chains.required(),
@@ -180,7 +184,8 @@ const initOptions = Joi.object({
     get: Joi.function().required(),
     stream: Joi.function().required()
   }),
-  connect: connectModalOptions
+  connect: connectModalOptions,
+  containerElements: containerElements
 })
 
 const connectOptions = Joi.object({

packages/core/src/views/Index.svelte

@@ -9,7 +9,7 @@
   import type { Observable } from 'rxjs'
   import type { Notification } from '../types.js'
 
-  const { device } = configuration
+  const { device, containerElements } = configuration
   const accountCenter$ = state
     .select('accountCenter')
     .pipe(startWith(state.get().accountCenter), shareReplay(1))
@@ -50,6 +50,7 @@
     : Promise.resolve(null)
 
   $: sharedContainer =
+    !accountCenterMountToElement &&
     $accountCenter$.enabled &&
     $notify$.enabled &&
     $notify$.position === $accountCenter$.position
@@ -58,40 +59,80 @@
     device.type === 'mobile' || $accountCenter$.position === $notify$.position
 
   $: sharedMobileContainerCheck =
-    device.type === 'mobile' &&
-    (($notify$.position.includes('bottom') &&
+    ($notify$.position.includes('bottom') &&
       $accountCenter$.position.includes('bottom')) ||
-      ($notify$.position.includes('top') &&
-        $accountCenter$.position.includes('top')))
-
-  $: separateMobileContainerCheck =
-    device.type === 'mobile' &&
-    (($notify$.position.includes('top') &&
-      $accountCenter$.position.includes('bottom')) ||
-      ($notify$.position.includes('bottom') &&
-        $accountCenter$.position.includes('top')))
+    ($notify$.position.includes('top') &&
+      $accountCenter$.position.includes('top'))
 
   $: displayNotifySeparate =
     $notify$.enabled &&
     (!$accountCenter$.enabled ||
+      accountCenterMountToElement ||
       ($notify$.position !== $accountCenter$.position &&
         device.type !== 'mobile') ||
-      separateMobileContainerCheck ||
+      (device.type === 'mobile' && !sharedMobileContainerCheck) ||
       !$wallets$.length)
 
   $: displayAccountCenterSeparate =
     $accountCenter$.enabled &&
     (!$notify$.enabled ||
       ($notify$.position !== $accountCenter$.position &&
         device.type !== 'mobile') ||
-      separateMobileContainerCheck) &&
+      (device.type === 'mobile' && !sharedMobileContainerCheck)) &&
     $wallets$.length
 
   $: displayAccountCenterNotifySameContainer =
     $notify$.enabled &&
     $accountCenter$.enabled &&
-    $wallets$.length &&
-    (sharedContainer || sharedMobileContainerCheck)
+    (sharedContainer ||
+      (device.type === 'mobile' && sharedMobileContainerCheck)) &&
+    $wallets$.length
+
+  const accountCenterMountToElement =
+    $accountCenter$.enabled &&
+    containerElements &&
+    containerElements.accountCenter
+
+  if (accountCenterMountToElement) {
+    const accountCenter = document.createElement('onboard-account-center')
+    const target = accountCenter.attachShadow({ mode: 'open' })
+
+    let getW3OEl = document.querySelector('onboard-v2')
+    let w3OStyleSheets = getW3OEl.shadowRoot.styleSheets
+    const accountCenterStyleSheet = new CSSStyleSheet()
+
+    // Copy Onboard stylesheets over to AccountCenter shadow DOM
+    Object.values(w3OStyleSheets).forEach(sheet => {
+      const styleRules = Object.values(sheet.cssRules)
+      styleRules.forEach(rule =>
+        accountCenterStyleSheet.insertRule(rule.cssText)
+      )
+    })
+    target.adoptedStyleSheets = [accountCenterStyleSheet]
+
+    const containerElement = document.querySelector(accountCenterMountToElement)
+
+    containerElement.appendChild(accountCenter)
+    if (!containerElement) {
+      throw new Error(
+        `Element with query ${accountCenterMountToElement} does not exist.`
+      )
+    }
+
+    const getACComp = async () => {
+      let acComponent = await accountCenterComponent
+      if (acComponent) {
+        new acComponent({
+          target,
+          props: {
+            settings: $accountCenter$,
+            mountInContainer: true
+          }
+        })
+      }
+    }
+    getACComp()
+  }
 </script>
 
 <style>
@@ -389,7 +430,7 @@
     >
       {#await accountCenterComponent then AccountCenter}
         {#if AccountCenter}
-          <svelte:component this={AccountCenter} settings={$accountCenter$} />
+          <svelte:component this={AccountCenter} />
         {/if}
       {/await}
     </div>
@@ -432,7 +473,7 @@
       {#if $accountCenter$.enabled && $wallets$.length}
         {#await accountCenterComponent then AccountCenter}
           {#if AccountCenter}
-            <svelte:component this={AccountCenter} settings={$accountCenter$} />
+            <svelte:component this={AccountCenter} />
           {/if}
         {/await}
       {/if}