[core-v2.6.0-alpha.4, react-v2.2.5-alpha.4, vue-v2.1.5-alpha.4] : Fix - Add optionality to containerElement, format validation so accountCent… (#1166)

* Add optionality to containerElement, format validation so accountCenter validations are close to eachother, bump versions
* Clean up accountCenter init options
* Bump react and vue packages

Author: Adamj1232

packages/core/README.md

@@ -105,6 +105,7 @@ export type AccountCenter = {
   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
 }
 
 export type AccountCenterOptions = {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.6.0-alpha.3",
+  "version": "2.6.0-alpha.4",
   "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/types.ts

@@ -141,7 +141,7 @@ export type AccountCenter = {
   position?: AccountCenterPosition
   expanded?: boolean
   minimal?: boolean
-  containerElement: string
+  containerElement?: string
 }
 
 export type AccountCenterOptions = {

packages/core/src/validation.ts

@@ -153,25 +153,30 @@ const notifyOptions = Joi.object({
   mobile: notify
 })
 
+const accountCenterInitOptions = Joi.object({
+  enabled: Joi.boolean(),
+  position: commonPositions,
+  minimal: Joi.boolean(),
+  containerElement: Joi.string()
+})
+
+const accountCenter = Joi.object({
+  enabled: Joi.boolean(),
+  position: commonPositions,
+  expanded: Joi.boolean(),
+  minimal: Joi.boolean(),
+  containerElement: Joi.string()
+})
+
 const initOptions = Joi.object({
   wallets: walletInit,
   chains: chains.required(),
   appMetadata: appMetadata,
   i18n: Joi.object().unknown(),
   apiKey: Joi.string(),
   accountCenter: Joi.object({
-    desktop: Joi.object({
-      enabled: Joi.boolean(),
-      minimal: Joi.boolean(),
-      position: commonPositions,
-      containerElement: Joi.string()
-    }),
-    mobile: Joi.object({
-      enabled: Joi.boolean(),
-      minimal: Joi.boolean(),
-      position: commonPositions,
-      containerElement: Joi.string()
-    })
+    desktop: accountCenterInitOptions,
+    mobile: accountCenterInitOptions
   }),
   notify: [notifyOptions, notify]
 })
@@ -198,14 +203,6 @@ const setChainOptions = Joi.object({
   wallet: Joi.string()
 })
 
-const accountCenter = Joi.object({
-  enabled: Joi.boolean(),
-  position: commonPositions,
-  expanded: Joi.boolean(),
-  minimal: Joi.boolean(),
-  containerElement: Joi.string()
-})
-
 const customNotificationUpdate = Joi.object({
   key: Joi.string().required(),
   type: Joi.string().allow('pending', 'error', 'success', 'hint'),

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.5-alpha.3",
+  "version": "2.2.5-alpha.4",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, 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",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.6.0-alpha.3",
+    "@web3-onboard/core": "^2.6.0-alpha.4",
     "@web3-onboard/common": "^2.1.7-alpha.2",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.5-alpha.3",
+  "version": "2.1.5-alpha.4",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, 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",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.7-alpha.2",
-    "@web3-onboard/core": "^2.6.0-alpha.3",
+    "@web3-onboard/core": "^2.6.0-alpha.4",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {