Merge branch 'v2-web3-onboard' into v2-web3-onboard-develop

Author: Adamj1232

packages/coinbase/package.json

@@ -20,7 +20,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.0",
+    "@web3-onboard/common": "^2.0.7",
     "@coinbase/wallet-sdk": "^3.0.5"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -41,6 +41,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
+    "@ethereumjs/common": "2.6.2",
     "ethers": "5.5.4",
     "joi": "^17.4.2",
     "rxjs": "^7.5.2"

packages/common/rollup.config.js

@@ -35,5 +35,5 @@ export default {
       inlineSources: !production
     })
   ],
-  external: ['joi', 'rxjs', 'ethers']
+  external: ['joi', 'rxjs', 'ethers', '@ethereumjs/common']
 }

packages/common/src/hdwallets.ts

@@ -0,0 +1,37 @@
+import type Common from '@ethereumjs/common'
+import type { CustomNetwork } from './types'
+
+/**
+ * Creates the common instance used for signing
+ * transactions with hardware wallets
+ * @returns the initialized common instance
+ */
+export const getCommon = async ({
+  customNetwork,
+  chainId
+}: {
+  customNetwork?: CustomNetwork
+  chainId: number
+}): Promise<Common> => {
+  const { default: Common, Hardfork } = await import('@ethereumjs/common')
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const CommonConstructor: typeof Common = Common.default || Common
+  let common: Common
+  try {
+    common = new CommonConstructor({
+      chain: customNetwork || chainId,
+      // Berlin is the minimum hardfork that will allow for EIP1559
+      hardfork: Hardfork.Berlin,
+      // List of supported EIPS
+      eips: [1559]
+    })
+  } catch (e: any) {
+    if (e.message && /Chain.*not supported/.test(e.message)) {
+      common = CommonConstructor.custom({ chainId })
+    } else {
+      throw e
+    }
+  }
+  return common
+}

packages/common/src/index.ts

@@ -62,6 +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 type {
   RequestPatch,

packages/core/README.md

@@ -487,8 +487,15 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-wallet-button-background-hover
   --onboard-wallet-button-color
   --onboard-wallet-button-border-color
+  --onboard-wallet-button-border-radius
+  --onboard-wallet-button-box-shadow
   --onboard-wallet-app-icon-border-color
 
+  /* CUSTOMIZE THE CONNECT MODAL */
+  --onboard-modal-border-radius
+  --onboard-modal-backdrop
+  --onboard-modal-box-shadow
+
   /* FONTS */
   --onboard-font-family-normal: Sofia Pro;
   --onboard-font-family-semibold: Sofia Pro Semibold;
@@ -510,6 +517,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-spacing-5: 0.5rem;
 
   /* SHADOWS */
+  --onboard-border-radius-1: 24px;
+
+  /* SHADOWS */
+  --onboard-shadow-0: none;
   --onboard-shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
   --onboard-shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -41,7 +41,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.6",
+    "@web3-onboard/common": "^2.0.7",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",

packages/core/src/icons/caret-light.ts

@@ -1,5 +1 @@
-export default `
-  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/>
-  </svg>
-`
+export default `<svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/></svg>`

packages/core/src/icons/caret.ts

@@ -1,5 +1 @@
-export default `
-  <svg width="100%" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
-  </svg>
-`
+export default `<svg width="100%" height="24" viewBox="0 5 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10H7Z" fill="currentColor"/></svg>`

packages/core/src/index.ts

@@ -184,7 +184,11 @@ function mountApp() {
           --spacing-6: 0.25rem;
           --spacing-7: 0.125rem;
   
+          /* BORDER RADIUS */
+          --border-radius-1: 24px;  
+
           /* SHADOWS */
+          --shadow-0: none;
           --shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
           --shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
           --shadow-3: 0px 4px 16px rgba(179, 179, 179, 0.2);
@@ -195,6 +199,9 @@ function mountApp() {
           --modal-right: unset;
           --modal-bottom: unset;
           --modal-left: unset;
+          
+          /* MODAL STYLES */
+          --modal-backdrop: rgba(0, 0, 0, 0.6);
         }
       </style>
     `