Merge in develop and test publishing

Author: Adamj1232

.circleci/config.yml

@@ -34,7 +34,7 @@ aliases:
         | head -1 \
         | awk -F: '{ print $2 }' \
         | sed 's/[",]//g'); 
-        if [[ $PACKAGE_VERSION =~ "alpha" ]];
+        if [[ $PACKAGE_VERSION =~ "-alpha" ]];
         then
           echo true
         else

README.md

@@ -88,7 +88,7 @@ If you would like to test out the current functionality of V2 in a small browser
 
 - Clone the repo: `git clone git@github.com:blocknative/onboard.git`
 - Change in to the onboard directory: `cd onboard`
-- Checkout the V2 feature branch: `git checkout v2-web-onboard`
+- Checkout the V2 feature branch: `git checkout v2-web3-onboard`
 - Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`)
 - Run all packages in dev mode: `yarn dev`
 - [View demo app in the browser](http://localhost:8080)

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Coinbase Wallet module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",

packages/coinbase/src/index.ts

@@ -1,54 +1,57 @@
 import { WalletInit } from '@web3-onboard/common'
 
-function coinbaseWallet(options?: { darkMode?: boolean }): WalletInit {
-  const { darkMode = false } = options || {}
-
-  return () => {
-    return {
-      label: 'Coinbase',
-      getIcon: async () => (await import('./icon.js')).default,
-      getInterface: async ({ chains, appMetadata }) => {
-        const [chain] = chains
-        const { name, icon } = appMetadata || {}
-
-        const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
-
-        const base64 = window.btoa(icon || '')
-        const appLogoUrl = `data:image/svg+xml;base64,${base64}`
-
-        const instance = new CoinbaseWalletSDK({
-          appName: name || '',
-          appLogoUrl,
-          darkMode
-        })
-
-        const coinbaseWalletProvider = instance.makeWeb3Provider(
-          chain.rpcUrl,
-          parseInt(chain.id)
-        )
-
-        // patch the chainChanged event
-        const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider)
-        coinbaseWalletProvider.on = (event, listener) => {
-          on(event, val => {
-            if (event === 'chainChanged') {
-              listener(`0x${(val as number).toString(16)}`)
-              return
+function coinbaseWallet({
+  darkMode = false
+}: {
+  darkMode?: boolean
+} = {}): WalletInit {
+  return ({ device }) =>
+    device.type === 'mobile'
+      ? {
+          label: 'Coinbase',
+          getIcon: async () => (await import('./icon.js')).default,
+          getInterface: async ({ chains, appMetadata }) => {
+            const [chain] = chains
+            const { name, icon } = appMetadata || {}
+
+            const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
+
+            const base64 = window.btoa(icon || '')
+            const appLogoUrl = `data:image/svg+xml;base64,${base64}`
+
+            const instance = new CoinbaseWalletSDK({
+              appName: name || '',
+              appLogoUrl,
+              darkMode
+            })
+
+            const coinbaseWalletProvider = instance.makeWeb3Provider(
+              chain.rpcUrl,
+              parseInt(chain.id)
+            )
+
+            // patch the chainChanged event
+            const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider)
+            coinbaseWalletProvider.on = (event, listener) => {
+              on(event, val => {
+                if (event === 'chainChanged') {
+                  listener(`0x${(val as number).toString(16)}`)
+                  return
+                }
+
+                listener(val)
+              })
+
+              return coinbaseWalletProvider
             }
 
-            listener(val)
-          })
-
-          return coinbaseWalletProvider
-        }
-
-        return {
-          provider: coinbaseWalletProvider,
-          instance
+            return {
+              provider: coinbaseWalletProvider,
+              instance
+            }
+          }
         }
-      }
-    }
-  }
+      : null
 }
 
 export default coinbaseWallet

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.0.7-alpha.0.0.1",
+  "version": "2.0.9-alpha",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/validation.ts

@@ -47,11 +47,11 @@ const balance = Joi.any().allow(
   null
 )
 
-const account = {
+const account = Joi.object({
   address: Joi.string().required(),
   ens,
   balance
-}
+})
 
 const chains = Joi.array().items(chain)
 const accounts = Joi.array().items(account)

packages/core/src/views/account-center/Index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
+  import { state } from '../../store'
   import { updateAccountCenter } from '../../store/actions'
   import type { AccountCenter } from '../../types'
   import Maximized from './Maximized.svelte'
@@ -17,7 +18,10 @@
   onDestroy(minimize)
 
   function minimize() {
-    updateAccountCenter({ expanded: false })
+    const { accountCenter } = state.get()
+    if (accountCenter.expanded) {
+      updateAccountCenter({ expanded: false })
+    }
   }
 </script>
 

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

@@ -15,7 +15,32 @@
 
 <script lang="ts">
   import { fade } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
 
+  const body = document.body
+  onMount(() => {
+    window.addEventListener(
+      'scroll',
+      () => {
+        document.documentElement.style.setProperty(
+          '--scroll-y',
+          `${window.scrollY}px`
+        )
+      },
+      { passive: true }
+    )
+    const scrollY =
+      document.documentElement.style.getPropertyValue('--scroll-y')
+    body.style.position = 'fixed'
+    body.style.top = `-${scrollY}`
+  })
+
+  onDestroy(() => {
+    const scrollY = body.style.top
+    body.style.position = ''
+    body.style.top = ''
+    window.scrollTo(0, parseInt(scrollY || '0') * -1)
+  })
   export let close: () => void
 </script>
 
@@ -48,7 +73,7 @@
   .modal-overflow {
     overflow: hidden;
   }
-  
+
   .modal-styling {
     border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
     box-shadow: var(--onboard-modal-box-shadow, var(--box-shadow-0));

packages/demo/package.json

@@ -22,7 +22,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.2.3",
+    "@web3-onboard/core": "^2.2.7",
     "@web3-onboard/fortmatic": "^2.0.2",
     "@web3-onboard/gnosis": "^2.0.1",
     "@web3-onboard/injected-wallets": "^2.0.5",