[core-v2.13.0-alpha.2, react, vue]: Enhancement - Container el prop f…

…or Connect Modal (blocknative#1452) * Container el prop for connect modal * Update docs and demo code * Update docs around container element usage * Updates to handle layout with container el * Add TS notes to container elements, add command to check-all (yarn build && yarn file-check && yarn-type-check * Comment out containerElements usage in demo onboard config
cmeisl · Jan 11, 2023 · b94db75 · b94db75
1 parent 1fc974d
commit b94db75
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,8 @@
     "dev": "yarn wsrun dev",
     "build": "yarn wsrun --serial build",
     "type-check": "yarn wsrun type-check",
-    "file-check": "yarn install --check-files"
+    "file-check": "yarn install --check-files",
+    "check-all": "yarn build && yarn file-check && yarn type-check"
   },
   "devDependencies": {
     "prettier": "^2.4.1",

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -120,6 +120,12 @@ For an example please see containerElement usage [here](https://github.com/block
 
 ```typescript
 type ContainerElements = {
+  // When attaching the Connect Modal to a container el be aware that the modal was styled to be 
+  // mounted through the app to the html body and will respond to screen width rather than container width
+  // This is specifically apparent on mobile so please test thoroughly
+  // Also consider that other DOM elements(specifically Notifications and Account Center) will also 
+  // append to this DOM el if enabled and their own containerEl are not defined
+  connectModal?: string
   // when using the accountCenter with a container el the accountCenter position properties are ignored
   accountCenter?: string
 }

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.13.0",
+  "version": "2.13.1-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",

diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -8,7 +8,7 @@ export let configuration: Configuration = {
   device: getDevice(),
   initialWalletInit: [],
   gas: null,
-  containerElements: { accountCenter: null },
+  containerElements: { accountCenter: null, connectModal: null },
   transactionPreview: null
 }
 

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -96,7 +96,7 @@ function init(options: InitOptions): OnboardAPI {
     transactionPreview
   } = options
 
-  updateConfiguration({ containerElements })
+  if (containerElements) updateConfiguration({ containerElements })
 
   const { device, svelteInstance } = configuration
 
@@ -342,9 +342,10 @@ function mountApp() {
         }
       </style>
     `
+  const connectModalContEl = configuration.containerElements.connectModal
 
   const containerElementQuery =
-    state.get().accountCenter.containerElement || 'body'
+    connectModalContEl || state.get().accountCenter.containerElement || 'body'
 
   const containerElement = document.querySelector(containerElementQuery)
 

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -187,6 +187,18 @@ export type AccountCenterOptions = {
 }
 
 export type ContainerElements = {
+  /** When attaching the Connect Modal to a container el be aware that 
+   * the modal was styled to be mounted through the app to the html body 
+   * and will respond to screen width rather than container width
+   * This is specifically apparent on mobile so please test thoroughly
+   * Also consider that other DOM elements(specifically Notifications and 
+   * Account Center) will also append to this DOM el if enabled and their 
+   * own containerEl are not defined
+  */
+  connectModal?: string
+  /** when using the accountCenter with a container el the accountCenter 
+   * position properties are ignored 
+  */
   accountCenter?: string
 }
 

diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
@@ -174,7 +174,8 @@ const connectModalOptions = Joi.object({
 })
 
 const containerElements = Joi.object({
-  accountCenter: Joi.string()
+  accountCenter: Joi.string(),
+  connectModal: Joi.string()
 })
 
 const initOptions = Joi.object({

diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte
@@ -93,48 +93,58 @@
     containerElements &&
     containerElements.accountCenter
 
-  if (accountCenterMountToElement) {
-    const accountCenter = document.createElement('onboard-account-center')
-    const target = accountCenter.attachShadow({ mode: 'open' })
+  const attachCompToDom = (
+    domEl: HTMLElement,
+    targetEl: string,
+    component: Promise<any>,
+    compSettings: unknown
+  ) => {
+    const target = domEl.attachShadow({ mode: 'open' })
 
     let getW3OEl = document.querySelector('onboard-v2')
     let w3OStyleSheets = getW3OEl.shadowRoot.styleSheets
-    const accountCenterStyleSheet = new CSSStyleSheet()
+    const copiedStyleSheet = 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)
-      )
+      styleRules.forEach(rule => copiedStyleSheet.insertRule(rule.cssText))
     })
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
-    target.adoptedStyleSheets = [accountCenterStyleSheet]
+    target.adoptedStyleSheets = [copiedStyleSheet]
 
-    const containerElement = document.querySelector(accountCenterMountToElement)
+    const containerElement = document.querySelector(targetEl)
 
-    containerElement.appendChild(accountCenter)
+    containerElement.appendChild(domEl)
     if (!containerElement) {
-      throw new Error(
-        `Element with query ${accountCenterMountToElement} does not exist.`
-      )
+      throw new Error(`Element with query ${targetEl} does not exist.`)
     }
 
     const getACComp = async () => {
-      let acComponent = await accountCenterComponent
-      if (acComponent) {
-        new acComponent({
+      let newComp = await component
+      if (newComp) {
+        new newComp({
           target,
           props: {
-            settings: $accountCenter$,
+            settings: compSettings,
             mountInContainer: true
           }
         })
       }
     }
     getACComp()
   }
+
+  if (accountCenterMountToElement) {
+    const accountCenter = document.createElement('onboard-account-center')
+    attachCompToDom(
+      accountCenter,
+      accountCenterMountToElement,
+      accountCenterComponent,
+      $accountCenter$
+    )
+  }
 </script>
 
 <style>

diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte
@@ -16,16 +16,23 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import { onDestroy, onMount } from 'svelte'
+  import { configuration } from '../../configuration.js'
+
+  const connectContainerEl = !!configuration.containerElements.connectModal
 
   const html = document.documentElement
   onMount(() => {
-    html.style.position = 'sticky'
-    html.style.overflow = 'hidden'
+    if (!connectContainerEl) {
+      html.style.position = 'sticky'
+      html.style.overflow = 'hidden'
+    }
   })
 
   onDestroy(() => {
-    html.style.position = ''
-    html.style.removeProperty('overflow')
+    if (!connectContainerEl) {
+      html.style.position = ''
+      html.style.removeProperty('overflow')
+    }
   })
   export let close: () => void
 </script>
@@ -39,12 +46,15 @@
   }
 
   .background {
-    width: 100vw;
-    height: 100vh;
     background: var(--onboard-modal-backdrop, var(--modal-backdrop));
     pointer-events: all;
   }
 
+  .full-screen-background {
+    width: 100vw;
+    height: 100vh;
+  }
+
   .max-height {
     max-height: calc(100vh - 2rem);
   }
@@ -70,7 +80,10 @@
     overflow-y: auto;
     background: var(--onboard-modal-background, white);
     color: var(--onboard-modal-color, initial);
-    max-width: 100vw;
+  }
+
+  .width-100 {
+    width: 100%;
   }
 
   .modal-container-mobile {
@@ -85,17 +98,32 @@
       bottom: unset;
       margin: 1rem;
     }
+    .width-100 {
+      width: unset;
+    }
   }
 </style>
 
-<section class="fixed" transition:fade>
+<section class:fixed={!connectContainerEl} transition:fade>
   <div
     on:click={close}
     class="background flex items-center justify-center relative"
+    class:full-screen-background={!connectContainerEl}
   >
-    <div class="modal-container-mobile modal-position flex absolute">
-      <div on:click|stopPropagation class="flex relative max-height">
-        <div class="modal-overflow modal-styling relative flex justify-center">
+    <div
+      class="modal-container-mobile modal-position flex"
+      class:absolute={!connectContainerEl}
+      class:width-100={connectContainerEl}
+    >
+      <div
+        on:click|stopPropagation
+        class="flex relative max-height"
+        class:width-100={connectContainerEl}
+      >
+        <div
+          class="modal-overflow modal-styling relative flex justify-center"
+          style={`max-width=${connectContainerEl ? '100%' : '100vw'};`}
+        >
           <div class="modal relative">
             <slot />
           </div>

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -23,7 +23,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.13.0",
+    "@web3-onboard/core": "^2.13.1-alpha.1",
     "@web3-onboard/coinbase": "^2.1.4",
     "@web3-onboard/transaction-preview": "^2.0.0",
     "@web3-onboard/dcent": "^2.2.2",

diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html
@@ -14,6 +14,7 @@
 
 <body>
   <div id="sample-container-el"></div>
+  <div id="sample-container-el2"></div>
   <script defer src='/build/main.js'></script>
 </body>
 </html>
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -264,9 +264,10 @@
       }
     },
     // containerElements: {
-    // El must be present at time of JS script execution
-    // See ../public/index.html for element example
-    //   accountCenter: '#sample-container-el'
+    // // El must be present at time of JS script execution
+    // // See ../public/index.html for element example
+    //   connectModal: '#sample-container-el',
+    //   accountCenter: '#sample-container-el2'
     // },
     // Sign up for your free api key at www.Blocknative.com
     // Add apiKey to test transaction notifications

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.5.4",
+  "version": "2.5.5-alpha.1",
   "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.13.0",
+    "@web3-onboard/core": "^2.13.1-alpha.1",
     "@web3-onboard/common": "^2.2.3",
     "use-sync-external-store": "1.0.0"
   },

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.4.4",
+  "version": "2.4.5-alpha.1",
   "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 standardized 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.2.3",
-    "@web3-onboard/core": "^2.13.0",
+    "@web3-onboard/core": "^2.13.1-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {