[core-v2.9.1-alpha.2, react-v2.3.7-alpha.2, vue-v2.2.7-alpha.2, hw-common-v2.0.4-alpha.1, all HW wallet pkgs]: Fix - Mobile scroll issue on modal close (#1317)

* Refactor background scroll logic when connect modal is opened/closed
* Align account select modal with connect modal
* Clean up demo for small screens
* Bump hw-common version
* Bump hw package versions

Author: Adamj1232

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.9.1-alpha.1",
+  "version": "2.9.1-alpha.2",
   "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",
@@ -92,7 +92,7 @@
     "lodash.merge": "^4.6.2",
     "lodash.partition": "^4.6.0",
     "nanoid": "^4.0.0",
-    "rxjs": "^7.5.2",
+    "rxjs": "^7.5.5",
     "svelte": "^3.49.0",
     "svelte-i18n": "^3.3.13"
   }

packages/core/src/views/shared/Modal.svelte

@@ -16,37 +16,16 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import { onDestroy, onMount } from 'svelte'
-  import { configuration } from '../../configuration.js'
 
-  const { device } = configuration
-
-  const body = document.body
   const html = document.documentElement
-  const trackYScrollPosition = () => {
-    document.documentElement.style.setProperty(
-      '--scroll-y',
-      `${window.scrollY}px`
-    )
-  }
-
   onMount(() => {
-    window.addEventListener('scroll', trackYScrollPosition, { passive: true })
-    const scrollY = html.style.getPropertyValue('--scroll-y')
-    device.type === 'mobile'
-      ? (html.style.position = 'fixed')
-      : (html.style.overflow = 'hidden')
-
-    body.style.top = `-${scrollY}`
+    html.style.position = 'sticky'
+    html.style.overflow = 'hidden'
   })
 
   onDestroy(() => {
-    device.type === 'mobile'
-      ? (html.style.position = '')
-      : html.style.removeProperty('overflow')
-    const scrollY = body.style.top
-    body.style.top = ''
-    window.scrollTo(0, parseInt(scrollY || '0') * -1)
-    window.removeEventListener('scroll', trackYScrollPosition)
+    html.style.position = ''
+    html.style.removeProperty('overflow')
   })
   export let close: () => void
 </script>

packages/dcent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.1",
+  "version": "2.2.2-alpha.1",
   "description": "D'CENT wallet module for connecting to Web3-Onboard. 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, 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",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.3",
+    "@web3-onboard/hw-common": "^2.0.4-alpha.1",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"

packages/demo/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.1.3",
-    "@web3-onboard/core": "^2.9.1-alpha.1",
+    "@web3-onboard/core": "^2.9.1-alpha.2",
     "@web3-onboard/dcent": "^2.2.1",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.3",

packages/demo/src/App.svelte

@@ -30,6 +30,8 @@
   import blocknativeLogo from './blocknative-logo'
   import { onMount } from 'svelte'
 
+  let windowWidth
+
   if (window.innerWidth < 700) {
     new VConsole()
   }
@@ -672,7 +674,6 @@
     overflow: hidden;
     width: 2em;
     height: 2em;
-    /* optional formatting below here */
     border-radius: 50%;
     box-shadow: 1px 1px 3px 0px grey;
     margin: 1em;
@@ -762,6 +763,8 @@
   }
 </style>
 
+<svelte:window bind:innerWidth={windowWidth} />
+
 <main>
   {#if hideForIframe}
     <div id="image_drop_area">
@@ -1020,9 +1023,9 @@
       </div>
     {/each}
   {/if}
-  {#if !hideForIframe}
+  {#if !hideForIframe && windowWidth > 1040}
     <div class="themes">
-      <label for="Theme">Click Color Circles to Set Theme: </label>
+      <label for="Theme">Click Colored Circles to Set Theme: </label>
       <div class="theming-container">
         {#each Object.keys(defaultStyling) as target}
           <div class="theming-inputs-wrapper">

packages/hw-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/hw-common",
-  "version": "2.0.3",
+  "version": "2.0.4-alpha.1",
   "description": "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, 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/hw-common/src/views/AccountSelect.svelte

@@ -274,7 +274,7 @@
       var(--onboard-font-family-normal, var(--font-family-normal))
     );
     color: var(--account-select-black, var(--onboard-black, var(--black)));
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     z-index: var(

packages/keepkey/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keepkey",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "KeepKey hardware wallet module for connecting to Web3-Onboard. 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, 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",
@@ -64,7 +64,7 @@
     "@shapeshiftoss/hdwallet-core": "^1.15.2",
     "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.3",
+    "@web3-onboard/hw-common": "^2.0.4-alpha.1",
     "ethereumjs-util": "^7.1.3"
   }
 }

packages/keystone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keystone",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Keystone hardware wallet module for connecting to Web3-Onboard. 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, 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",
@@ -59,6 +59,6 @@
     "@ethersproject/providers": "^5.5.0",
     "@keystonehq/eth-keyring": "^0.14.00.3",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.3"
+    "@web3-onboard/hw-common": "^2.0.4-alpha.1"
   }
 }

packages/ledger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/ledger",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Ledger hardare wallet module for connecting to Web3-Onboard. 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, 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",
@@ -66,7 +66,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.19.0",
     "@metamask/eth-sig-util": "^4.0.0",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.3",
+    "@web3-onboard/hw-common": "^2.0.4-alpha.1",
     "buffer": "^6.0.3",
     "ethereumjs-util": "^7.1.3"
   }

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.3.7-alpha.1",
+  "version": "2.3.7-alpha.2",
   "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.9.1-alpha.1",
+    "@web3-onboard/core": "^2.9.1-alpha.2",
     "@web3-onboard/common": "^2.2.3",
     "use-sync-external-store": "1.0.0"
   },

packages/trezor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/trezor",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Trezor hardware wallet module for connecting to Web3-Onboard. 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, 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",
@@ -61,7 +61,7 @@
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.3",
+    "@web3-onboard/hw-common": "^2.0.4-alpha.1",
     "buffer": "^6.0.3",
     "eth-crypto": "^2.1.0",
     "ethereumjs-util": "^7.1.3",

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.2.7-alpha.1",
+  "version": "2.2.7-alpha.2",
   "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.2.3",
-    "@web3-onboard/core": "^2.9.1-alpha.1",
+    "@web3-onboard/core": "^2.9.1-alpha.2",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

yarn.lock

@@ -9263,6 +9263,13 @@ rxjs@^7.5.2:
   dependencies:
     tslib "^2.1.0"
 
+rxjs@^7.5.5:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
+  integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==
+  dependencies:
+    tslib "^2.1.0"
+
 sade@^1.7.4:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"