* [Feature]: Allow defining container element for account center (#1096)

* [Feature]: Allow defining container element for account center
* Version bumps + validation

Co-authored-by: Moein Akbarof <moein@tropee.com>
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>

Author: 3 people

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0-alpha.6",
+  "version": "2.4.0-alpha.7",
   "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",

packages/core/src/constants.ts

@@ -9,6 +9,7 @@ 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

@@ -314,7 +314,13 @@ function mountApp() {
       </style>
     `
 
-  document.body.appendChild(onboard)
+  const containerElementQuery = state.get().accountCenter.containerElement || 'body'
+  const containerElement = document.querySelector(containerElementQuery)
+  if (!containerElement) {
+    throw new Error(`Element with query ${state.get().accountCenter} does not exist.`)
+  }
+
+  containerElement.appendChild(onboard)
 
   const app = new App({
     target

packages/core/src/types.ts

@@ -138,6 +138,7 @@ export type NotificationPosition = CommonPositions
 export type AccountCenter = {
   enabled: boolean
   position?: AccountCenterPosition
+  containerElement?: string
   expanded?: boolean
   minimal?: boolean
 }

packages/core/src/validation.ts

@@ -159,12 +159,14 @@ const initOptions = Joi.object({
     desktop: Joi.object({
       enabled: Joi.boolean(),
       minimal: Joi.boolean(),
-      position: commonPositions
+      position: commonPositions,
+      containerElement: Joi.string()
     }),
     mobile: Joi.object({
       enabled: Joi.boolean(),
       minimal: Joi.boolean(),
-      position: commonPositions
+      position: commonPositions,
+      containerElement: Joi.string()
     })
   }),
   notify: [notifyOptions, notify]

packages/demo/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.0.7",
-    "@web3-onboard/core": "^2.4.0-alpha.6",
+    "@web3-onboard/core": "^2.4.0-alpha.7",
     "@web3-onboard/dcent": "^2.0.4",
     "@web3-onboard/fortmatic": "^2.0.6",
     "@web3-onboard/gnosis": "^2.0.5",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.3-alpha.4",
+  "version": "2.2.3-alpha.5",
   "description": "Collection of React Hooks for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.4.0-alpha.6",
+    "@web3-onboard/core": "^2.4.0-alpha.7",
     "@web3-onboard/common": "^2.1.4",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.3-alpha.4",
+  "version": "2.1.3-alpha.5",
   "description": "Vue Composable for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.4",
-    "@web3-onboard/core": "^2.4.0-alpha.6",
+    "@web3-onboard/core": "^2.4.0-alpha.7",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {