Merge pull request #1023 from blocknative/release/alpha-5_26_2022

[Coinbase, Common, Core, Injected-Wallets, Keepkey, Keystone, Ledger, React, Trezor, Vue] Release - Master

Author: Adamj1232

.circleci/config.yml

@@ -25,9 +25,9 @@ aliases:
       branches:
         only: v2-web3-onboard-develop
 
-  - &test_package_version_for_alpha_tag
+  - &test_package_version_for_alpha_tag_break_false
     run:
-      name: Tagged as Alpha version
+      name: Tagged as Alpha version if True Continue Flow
       command: |
         PACKAGE_VERSION=$(cat package.json \
         | grep version \
@@ -42,6 +42,23 @@ aliases:
           circleci step halt
         fi;
 
+  - &test_package_version_for_alpha_tag_break_true
+    run:
+      name: Tagged as Alpha version if True Stop Flow
+      command: |
+        PACKAGE_VERSION=$(cat package.json \
+        | grep version \
+        | head -1 \
+        | awk -F: '{ print $2 }' \
+        | sed 's/[",]//g'); 
+        if [[ $PACKAGE_VERSION =~ "-alpha" ]];
+        then
+          echo true
+          circleci step halt
+        else
+          echo false
+        fi;
+
   - &restore-build-flag
     restore_cache:
       keys:
@@ -107,6 +124,7 @@ commands:
           path: ~/web3-onboard-monorepo
       - *restore-build-flag
       - *test-build-flag
+      - *test_package_version_for_alpha_tag_break_true
       # Services and packages in a Workspace don't get their own
       # yarn.lock so we need to generate them manually.
       - *generate-lock-file
@@ -130,7 +148,7 @@ commands:
           path: ~/web3-onboard-monorepo
       - *restore-build-flag
       - *test-build-flag
-      - *test_package_version_for_alpha_tag
+      - *test_package_version_for_alpha_tag_break_false
       # Services and packages in a Workspace don't get their own
       # yarn.lock so we need to generate them manually.
       - *generate-lock-file

README.md

@@ -81,6 +81,7 @@ For full documentation, check out the README.md for each package:
 **Frameworks**
 
 - [React](packages/react/README.md)
+- [Vue](packages/vue/README.md)
 
 ## Test out the demo app
 

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Coinbase Wallet module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -20,7 +20,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.7",
-    "@coinbase/wallet-sdk": "^3.0.5"
+    "@coinbase/wallet-sdk": "^3.0.5",
+    "@web3-onboard/common": "2.1.0"
   }
 }

packages/coinbase/src/index.ts

@@ -5,53 +5,52 @@ function coinbaseWallet({
 }: {
   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
+  return () => {
+    return {
+      label: 'Coinbase Wallet',
+      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
             }
 
-            return {
-              provider: coinbaseWalletProvider,
-              instance
-            }
-          }
+            listener(val)
+          })
+
+          return coinbaseWalletProvider
+        }
+
+        return {
+          provider: coinbaseWalletProvider,
+          instance
         }
-      : null
+      }
+    }
+  }
 }
 
 export default coinbaseWallet

packages/common/package.json

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

packages/common/src/elements/TableHeader.svelte

@@ -5,10 +5,6 @@
   export let loadingAccounts: boolean
   export let showEmptyAddresses: boolean
   export let errorFromScan: string
-
-  const filterEmptyAccounts = () => {
-    showEmptyAddresses = !showEmptyAddresses
-  }
 </script>
 
 <style>
@@ -176,7 +172,7 @@
     <input
       id="show-empty-addresses"
       type="checkbox"
-      on:change={filterEmptyAccounts}
+      bind:checked={showEmptyAddresses}
       class="checkbox-input"
     />
     <label for="show-empty-addresses" class="ml2 cursor-pointer font-5"

packages/common/src/hdwallets.ts

@@ -1,5 +1,7 @@
 import type Common from '@ethereumjs/common'
+import type { BigNumber } from 'ethers'
 import type { CustomNetwork } from './types'
+import type { TransactionRequest } from '@ethersproject/providers'
 
 /**
  * Creates the common instance used for signing
@@ -35,3 +37,43 @@ export const getCommon = async ({
   }
   return common
 }
+
+type StringifiedTransactionRequest = Omit<
+  TransactionRequest,
+  | 'nonce'
+  | 'gasLimit'
+  | 'gasPrice'
+  | 'value'
+  | 'maxPriorityFeePerGas'
+  | 'maxFeePerGas'
+> & {
+  nonce: string
+  gasLimit: string
+  gasPrice?: string
+  value: string
+  maxPriorityFeePerGas?: string
+  maxFeePerGas?: string
+}
+
+/**
+ * Takes in TransactionRequest and converts all BigNumber values to strings
+ * @param transaction
+ * @returns a transaction where all BigNumber properties are now strings
+ */
+export const bigNumberFieldsToStrings = (
+  transaction: TransactionRequest
+): StringifiedTransactionRequest =>
+  Object.keys(transaction).reduce(
+    (transaction, txnProperty) => ({
+      ...transaction,
+      ...((transaction[txnProperty as keyof TransactionRequest] as BigNumber)
+        .toHexString
+        ? {
+            [txnProperty]: (
+              transaction[txnProperty as keyof TransactionRequest] as BigNumber
+            ).toHexString()
+          }
+        : {})
+    }),
+    transaction
+  ) as StringifiedTransactionRequest

packages/common/src/index.ts

@@ -62,7 +62,7 @@ export { createEIP1193Provider } from './eip-1193'
 export { default as accountSelect } from './account-select'
 export { entryModal } from './entry-modal'
 export { SofiaProLight, SofiaProRegular, SofiaProSemiBold } from './fonts'
-export { getCommon } from './hdwallets'
+export { getCommon, bigNumberFieldsToStrings } from './hdwallets'
 
 export type {
   RequestPatch,

packages/common/src/views/AccountSelect.svelte

@@ -27,7 +27,7 @@
   let accountsListObject: AccountsList | undefined
   let accountSelected: Account | undefined
   let customDerivationPath = false
-  let showEmptyAddresses = false
+  let showEmptyAddresses = true
   let loadingAccounts = false
   let errorFromScan = ''
 
@@ -86,7 +86,7 @@
   const resetModal = () => {
     accountSelected = undefined
     accountsListObject = undefined
-    showEmptyAddresses = false
+    showEmptyAddresses = true
     scanAccountOptions.derivationPath =
       (basePaths[0] && basePaths[0].value) || ''
   }

packages/core/README.md

@@ -10,7 +10,7 @@ Install the core module:
 
 If you would like to support all wallets, then you can install all of the wallet modules:
 
-`npm i @web3-onboard/injected-wallets @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/walletlink @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic`
+`npm i @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic`
 
 Note:
 
@@ -92,20 +92,19 @@ To see a list of all of the text values that can be internationalized or replace
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
 **`accountCenter`**
-An object that defines whether the account center UI is enabled and it's position on the screen. Currently the account center is disabled for mobile devices, so only desktop options are available.
+An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
 ```typescript
-type AccountCenterOptions = {
-  desktop: {
-    position?: AccountCenterPosition // default: 'topRight'
-    enabled?: AccountCenter['enabled'] // default: true
-  }
+export type AccountCenter = {
+  enabled: boolean
+  position?: AccountCenterPosition // default: 'topRight'
+  expanded?: boolean // default: true
+  minimal?: boolean // enabled by default for mobile
 }
 
-type AccountCenter = {
-  enabled: boolean
-  position: AccountCenterPosition
-  expanded: boolean
+export type AccountCenterOptions = {
+  desktop: Omit<AccountCenter, 'expanded'>
+  mobile: Omit<AccountCenter, 'expanded'>
 }
 
 type AccountCenterPosition =
@@ -174,7 +173,19 @@ const onboard = Onboard({
       { name: 'MetaMask', url: 'https://metamask.io' },
       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
     ]
-  }
+  },
+  accountCenter: {
+    desktop: {
+      position: 'topRight',
+      enabled: true,
+      minimal: true
+    },
+    mobile: {
+      position: 'topRight',
+      enabled: true,
+      minimal: true
+    }
+  },
   i18n: {
     en: {
       connect: {
@@ -316,6 +327,7 @@ type AccountCenter = {
   enabled: boolean
   position: AccountCenterPosition
   expanded: boolean
+  minimal: boolean
 }
 
 type AccountCenterPosition =
@@ -496,6 +508,9 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-modal-backdrop
   --onboard-modal-box-shadow
 
+  /* CUSTOMIZE THE ACTION REQUIRED MODAL */
+  --onboard-action-required-modal-background
+
   /* FONTS */
   --onboard-font-family-normal: Sofia Pro;
   --onboard-font-family-semibold: Sofia Pro Semibold;
@@ -516,8 +531,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-spacing-4: 1rem;
   --onboard-spacing-5: 0.5rem;
 
-  /* SHADOWS */
+  /* BORDER RADIUS */
   --onboard-border-radius-1: 24px;
+  --onboard-border-radius-2: 20px;
+  --onboard-border-radius-3: 16px;
 
   /* SHADOWS */
   --onboard-shadow-0: none;