Merge pull request #73 from blocknative/develop

lnbc1QWFyb24 · web-flow · commit f606c86a8422 · 2019-11-11T18:41:45.000+11:00
Release 0.2.9
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["@babel/env", { "modules": false, "useBuiltIns": "entry", "corejs": 3 }]
+  ]
+}
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -28,8 +28,8 @@ jobs:
       - run: sudo npm i -g npm-cli-login
       - run: NPM_USER=$NPM_USERNAME NPM_EMAIL=$NPM_EMAIL NPM_PASS=$NPM_PASSWORD npm-cli-login
       - run: npm publish --dry-run
-      - run: gzip -9 ./dist/bnc-onboard.js
-      - run: mv ./dist/bnc-onboard.js.gz ./dist/bnc-onboard.js
+      - run: gzip -9 ./dist/onboard.umd.js
+      - run: mv ./dist/onboard.umd.js.gz ./dist/onboard.umd.js
       - run: ls -al
       - run: echo export VERSION=`awk '/version/{gsub(/("|",)/,"",$2);print $2};' package.json | sed 's/\./-/g'` >> $BASH_ENV
       - run: mkdir /root/project/deploy-temp
@@ -48,8 +48,8 @@ jobs:
       - run: sudo npm i -g add npm-cli-login
       - run: NPM_USER=$NPM_USERNAME NPM_EMAIL=$NPM_EMAIL NPM_PASS=$NPM_PASSWORD npm-cli-login
       - run: npm publish
-      - run: gzip -9 ./dist/bnc-onboard.js
-      - run: mv ./dist/bnc-onboard.js.gz ./dist/bnc-onboard.js
+      - run: gzip -9 ./dist/onboard.umd.js
+      - run: mv ./dist/onboard.umd.js.gz ./dist/onboard.umd.js
       - run: ls -al
       - run: echo export VERSION=`awk '/version/{gsub(/("|",)/,"",$2);print $2};' package.json | sed 's/\./-/g'` >> $BASH_ENV
       - run: mkdir /root/project/deploy-temp
diff --git a/package.json b/package.json
@@ -1,15 +1,15 @@
 {
   "name": "bnc-onboard",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",
     "web3",
     "blocknative",
     "wallet"
   ],
-  "main": "dist/bnc-onboard.js",
-  "module": "dist/bnc-onboard.es5.js",
+  "main": "dist/onboard.umd.js",
+  "module": "dist/onboard.esm.js",
   "typings": "dist/src/onboard.d.ts",
   "files": [
     "dist"
@@ -21,17 +21,20 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
     "@pyoner/svelte-ts-preprocess": "^1.2.1",
+    "@rollup/plugin-json": "^4.0.0",
     "@types/node": "^12.12.3",
-    "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
+    "babel-plugin-external-helpers": "^6.18.0",
     "rollup": "^1.12.0",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-img": "^1.1.0",
-    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-svelte": "^5.0.3",
-    "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-typescript2": "0.21.0",
     "svelte": "^3.12.1",
     "svelte-i18n": "^1.1.2-beta",
@@ -49,7 +52,7 @@
     "squarelink": "^1.1.3"
   },
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && babel dist/onboard.esm.js --out-file dist/onboard.esm.js && babel dist/onboard.umd.js --out-file dist/onboard.umd.js --minified",
     "test": "echo \"TBD\" && exit 0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,11 +1,10 @@
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
-import json from "rollup-plugin-json"
+import json from "@rollup/plugin-json"
 import image from "rollup-plugin-img"
 import commonjs from "rollup-plugin-commonjs"
 import globals from "rollup-plugin-node-globals"
 import builtins from "@joseph184/rollup-plugin-node-builtins"
-import { terser } from "rollup-plugin-terser"
 import typescript from "rollup-plugin-typescript2"
 
 import {
@@ -28,10 +27,9 @@ export default [
   {
     input: "src/onboard.ts",
     output: {
-      sourcemap: true,
       format: "umd",
       name: "onboard",
-      file: "dist/bnc-onboard.js"
+      file: "dist/onboard.umd.js"
     },
     moduleContext: id => {
       const thisAsWindowForModules = [
@@ -58,16 +56,14 @@ export default [
       commonjs(),
       globals(),
       builtins(),
-      typescript(),
-      terser()
+      typescript()
     ]
   },
   {
     input: "src/onboard.ts",
     output: {
-      sourcemap: true,
       format: "es",
-      file: "dist/bnc-onboard.es5.js"
+      file: "dist/onboard.esm.js"
     },
     moduleContext: id => {
       const thisAsWindowForModules = [
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -11,6 +11,7 @@
   /* .bn-onboard-modal */
   aside {
     display: flex;
+    font-family: "Helvetica Neue";
     justify-content: center;
     align-items: center;
     position: absolute;
@@ -53,6 +54,7 @@
     top: 1.33em;
     right: 1.33em;
     font-size: inherit;
+    font-family: inherit;
     border-radius: 5px;
     transition: background 200ms ease-in-out;
     display: flex;
diff --git a/src/components/ModalHeader.svelte b/src/components/ModalHeader.svelte
@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     font-size: inherit;
-    margin-bottom: 0.66em;
+    font-family: inherit;
   }
 
   /* .bn-onboard-modal-content-header-icon */
@@ -19,16 +19,17 @@
     justify-content: center;
     align-items: center;
     font-size: inherit;
+    font-family: inherit;
     padding: 0.6em;
     border-radius: 30px;
     background: #eeeeee;
   }
 
   /* .bn-onboard-modal-content-header-heading */
   h3 {
-    font-family: "Helvetica Neue";
     font-weight: bold;
     font-size: 1.33em;
+    font-family: inherit;
     margin: 0 0 0 0.5em;
   }
 </style>
diff --git a/src/components/SelectedWallet.svelte b/src/components/SelectedWallet.svelte
@@ -12,12 +12,14 @@
   section {
     color: inherit;
     font-size: inherit;
+    font-family: inherit;
     display: block;
   }
 
   footer {
     display: flex;
     font-size: inherit;
+    font-family: inherit;
     justify-content: space-between;
   }
 </style>
diff --git a/src/components/Wallets.svelte b/src/components/Wallets.svelte
@@ -16,7 +16,7 @@
     flex-flow: row wrap;
     align-items: center;
     list-style-type: none;
-    margin: 1em 0 0.66em 0;
+    margin: 1em 0;
     max-height: 66vh;
     overflow-y: scroll;
     padding: 0;
@@ -27,18 +27,24 @@
     box-sizing: border-box;
   }
 
+  ul li {
+    padding: 0 0.25em;
+  }
+
   div {
     width: 100%;
     display: flex;
     font-size: inherit;
+    font-family: inherit;
     justify-content: center;
+    margin-top: 1em;
   }
 
   ::-webkit-scrollbar {
     display: none;
   }
 
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: 450px) {
     ul li {
       width: 100%;
     }
@@ -62,7 +68,7 @@
 
   {#if modalData.secondaryWallets && !showingAllWalletModules}
     <div>
-      <Button highlight={true} onclick={() => (showingAllWalletModules = true)}>
+      <Button onclick={() => (showingAllWalletModules = true)}>
         Show More
       </Button>
     </div>
diff --git a/src/elements/Button.svelte b/src/elements/Button.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { app } from "../stores";
-  export let highlight: boolean = false;
   export let onclick: () => void = () => {};
 </script>
 
 <style>
   button {
     background: inherit;
     font-size: 0.889em;
+    font-family: inherit;
     border: 1px solid #4a90e2;
     border-radius: 40px;
     padding: 0.55em 1.4em;
diff --git a/src/elements/IconButton.svelte b/src/elements/IconButton.svelte
@@ -41,6 +41,7 @@
     height: 40px;
     width: 40px;
     line-height: 40px;
+    font-family: inherit;
   }
 
   img {
@@ -50,12 +51,14 @@
   }
 
   span {
+    font-size: inherit;
     margin-left: 0.66em;
     font-weight: bold;
     text-align: left;
+    font-family: inherit;
   }
 
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: 450px) {
     button {
       width: 100%;
     }
diff --git a/src/elements/IconDisplay.svelte b/src/elements/IconDisplay.svelte
@@ -12,6 +12,7 @@
     border: none;
     margin: 0;
     font-size: inherit;
+    font-family: inherit;
     background: inherit;
     padding: 0;
     width: 18em;
@@ -28,6 +29,7 @@
     margin-left: 0.66em;
     font-weight: bold;
     font-size: inherit;
+    font-family: inherit;
     opacity: 0.7;
     text-align: left;
   }
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -138,13 +138,14 @@ export interface WalletConnectOptions {
 }
 
 export interface SelectDefaultsOptions {
-  heading: string
-  description: string
+  heading?: string
+  description?: string
   networkId: number
-  fortmaticInit: { apiKey: string }
-  portisInit: { apiKey: string }
-  squarelinkInit: { apiKey: string }
-  walletConnectInit: WalletConnectOptions
+  fortmaticInit?: { apiKey: string }
+  portisInit?: { apiKey: string }
+  squarelinkInit?: { apiKey: string }
+  walletConnectInit?: WalletConnectOptions
+  preferredWallets?: string[]
 }
 
 export interface WalletSelectFunction {
diff --git a/src/modules/select/index.ts b/src/modules/select/index.ts
@@ -23,47 +23,67 @@ function defaults(options: SelectDefaultsOptions): WalletSelectModule {
     fortmaticInit,
     portisInit,
     squarelinkInit,
-    walletConnectInit
+    walletConnectInit,
+    preferredWallets
   } = options
 
-  const desktopModules = [metamask(), dapper(), opera()]
-  const mobileModules = [coinbase(), trust(), operaTouch()]
+  let desktopWallets = [metamask(), dapper(), opera()]
+  let mobileWallets = [coinbase(), trust(), operaTouch()]
 
   if (portisInit) {
-    desktopModules.push(portis({ ...portisInit, networkId }))
-    mobileModules.push(portis({ ...portisInit, networkId }))
+    desktopWallets.push(portis({ ...portisInit, networkId }))
+    mobileWallets.push(portis({ ...portisInit, networkId }))
   }
 
   if (fortmaticInit) {
-    desktopModules.push(fortmatic({ ...fortmaticInit, networkId }))
-    mobileModules.push(fortmatic({ ...fortmaticInit, networkId }))
+    desktopWallets.push(fortmatic({ ...fortmaticInit, networkId }))
+    mobileWallets.push(fortmatic({ ...fortmaticInit, networkId }))
   }
 
   if (walletConnectInit) {
-    desktopModules.push(
+    desktopWallets.push(
       walletConnect({ infuraKey: walletConnectInit.infuraKey })
     )
-    mobileModules.push(
+    mobileWallets.push(
       walletConnect({ infuraKey: walletConnectInit.infuraKey })
     )
   }
 
   if (squarelinkInit) {
-    desktopModules.push(squarelink({ ...squarelinkInit, networkId }))
-    mobileModules.push(squarelink({ ...squarelinkInit, networkId }))
+    desktopWallets.push(squarelink({ ...squarelinkInit, networkId }))
+    mobileWallets.push(squarelink({ ...squarelinkInit, networkId }))
   }
 
-  desktopModules.push(authereum({ networkId }))
-  mobileModules.push(authereum({ networkId }))
+  desktopWallets.push(authereum({ networkId }))
+  mobileWallets.push(authereum({ networkId }))
+
+  //set preferred wallets if provided
+  if (preferredWallets) {
+    desktopWallets = desktopWallets.map(wallet => {
+      if (preferredWallets.includes(wallet.name)) {
+        wallet.preferred = true
+      }
+  
+      return wallet
+    })
+  
+    mobileWallets = mobileWallets.map(wallet => {
+      if (preferredWallets.includes(wallet.name)) {
+        wallet.preferred = true
+      }
+  
+      return wallet
+    })
+  }
 
   return {
     heading: heading || "Select a Wallet",
     description:
       description ||
       "Please select the wallet that you would like to use with this dapp:",
     wallets: {
-      mobile: mobileModules,
-      desktop: desktopModules
+      mobile: mobileWallets,
+      desktop: desktopWallets
     }
   }
 }
diff --git a/src/stores.ts b/src/stores.ts
@@ -159,7 +159,7 @@ function createBalanceStore(initialState: string | null): BalanceStore {
   let stateSyncer: StateSyncer
   let emitter
 
-  const { subscribe } = derived([address, network], ([$address], set) => {
+  const { subscribe } = derived([address, network], ([$address]: string[], set: any) => {
     if (stateSyncer && !stateSyncer.onChange) {
       if ($address && stateSyncer.get && set) {
         syncStateWithTimeout({
diff --git a/src/validation.ts b/src/validation.ts
diff --git a/src/views/WalletReady.svelte b/src/views/WalletReady.svelte
diff --git a/src/views/WalletSelect.svelte b/src/views/WalletSelect.svelte
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "presets": [
 +    ["@babel/env", { "modules": false, "useBuiltIns": "entry", "corejs": 3 }]
 +  ]
 +}
Original file line number	Diff line number	Diff line change
`@@ -12,12 +12,14 @@`
`12`	`12`	`section {`
`13`	`13`	`color: inherit;`
`14`	`14`	`font-size: inherit;`
	`15`	`+ font-family: inherit;`
`15`	`16`	`display: block;`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`footer {`
`19`	`20`	`display: flex;`
`20`	`21`	`font-size: inherit;`
	`22`	`+ font-family: inherit;`
`21`	`23`	`justify-content: space-between;`
`22`	`24`	`}`
`23`	`25`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@`
`41`	`41`	`height: 40px;`
`42`	`42`	`width: 40px;`
`43`	`43`	`line-height: 40px;`
	`44`	`+ font-family: inherit;`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`img {`
`@@ -50,12 +51,14 @@`
`50`	`51`	`}`
`51`	`52`
`52`	`53`	`span {`
	`54`	`+ font-size: inherit;`
`53`	`55`	`margin-left: 0.66em;`
`54`	`56`	`font-weight: bold;`
`55`	`57`	`text-align: left;`
	`58`	`+ font-family: inherit;`
`56`	`59`	`}`
`57`	`60`
`58`		`- @media only screen and (max-width: 700px) {`
	`61`	`+ @media only screen and (max-width: 450px) {`
`59`	`62`	`button {`
`60`	`63`	`width: 100%;`
`61`	`64`	`}`