Merge pull request #30 from blocknative/develop

Release 0.2.1

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
@@ -9,25 +9,26 @@
   ],
   "types": "./types.d.ts",
   "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
+    "babel-eslint": "^7.1.1",
+    "babel-plugin-external-helpers": "^6.18.0",
     "rollup": "^1.12.0",
+    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-livereload": "^1.0.0",
-    "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
-    "rollup-plugin-babel": "^4.3.3",
+    "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-node-globals": "^1.4.0",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-external-helpers": "^6.18.0"
+    "rollup-plugin-terser": "^4.0.4"
   },
   "dependencies": {
     "@portis/web3": "^2.0.0-beta.42",
     "@walletconnect/web3-provider": "^1.0.0-beta.36",
+    "authereum": "^0.0.4-beta.26",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "0.2.1",
     "bowser": "^2.5.2",

rollup.config.js

@@ -51,6 +51,7 @@ export default [
       "@portis/web3",
       "@walletconnect/web3-provider",
       "fortmatic",
+      "authereum"
     ],
     plugins: [
       svelte(),

src/elements/Spinner.svelte

@@ -0,0 +1,43 @@
+<style>
+  .bn-onboard-loading {
+    display: inline-block;
+    position: relative;
+    width: 2rem;
+    height: 2rem;
+  }
+  .bn-onboard-loading div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    border: 3px solid #4a90e2;
+    border-radius: 50%;
+    animation: bn-onboard-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #4a90e2 transparent transparent transparent;
+  }
+  .bn-onboard-loading div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  .bn-onboard-loading div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  .bn-onboard-loading div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+  @keyframes bn-onboard-loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
+
+<div class="bn-onboard-custom bn-onboard-loading">
+  <div />
+  <div />
+  <div />
+  <div />
+</div>

src/modules/ready/connect.js

@@ -6,6 +6,7 @@ function connect() {
         description: `This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
         eventCode: "loginFail",
         action: wallet.connect,
+        loading: wallet.loading,
         icon: `
         <svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
         `

src/modules/select/index.js

@@ -5,6 +5,7 @@ import coinbase from "./wallets/coinbase"
 import trust from "./wallets/trust"
 import portis from "./wallets/portis"
 import fortmatic from "./wallets/fortmatic"
+import authereum from "./wallets/authereum"
 import squarelink from "./wallets/squarelink"
 
 function defaults({
@@ -43,6 +44,9 @@ function defaults({
     mobileModules.push(squarelink({ ...squarelinkInit, networkId }))
   }
 
+  desktopModules.push(authereum({ networkId }))
+  mobileModules.push(authereum({ networkId }))
+
   return {
     heading: heading || "Select a Wallet",
     description:
@@ -64,5 +68,6 @@ export default {
   trust,
   portis,
   fortmatic,
+  authereum,
   squarelink
 }

src/modules/select/wallet-icons/authereum.png

@@ -0,0 +1,60 @@
+import Authereum from "authereum"
+import authereumIcon from "../wallet-icons/authereum.png"
+
+import { networkName } from "../../../utilities"
+
+function authereum(options) {
+  if (!options || typeof options !== "object") {
+    throw new Error(
+      "An options object is required to initialize fortmatic module"
+    )
+  }
+
+  const { networkId } = options
+
+  if (!networkId || typeof networkId !== "number") {
+    throw new Error(
+      "A networkId of type number is required to initialize fortmatic module"
+    )
+  }
+
+  return {
+    name: "Authereum",
+    iconSrc: authereumIcon,
+    wallet: () => {
+      const authereum = new Authereum({
+        networkName: networkName(networkId),
+        disableNotifications: true
+      })
+
+      const provider = authereum.getProvider()
+
+      return {
+        provider,
+        interface: {
+          name: "Authereum",
+          connect: () => provider.enable(),
+          disconnect: () => authereum.logout(),
+          loading: () =>
+            new Promise(resolve => {
+              authereum.on("openPopup", resolve)
+            }),
+          address: {
+            get: () => authereum.getAccountAddress()
+          },
+          network: {
+            get: () => Promise.resolve(networkId)
+          },
+          balance: {
+            get: async () => {
+              const loggedIn = await authereum.isAuthenticated()
+              return loggedIn && authereum.getBalance()
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+export default authereum

src/modules/select/wallets/authereum.js

@@ -11,6 +11,7 @@
   import Modal from "../components/Modal.svelte";
   import ModalHeader from "../components/ModalHeader.svelte";
   import Button from "../elements/Button.svelte";
+  import Spinner from "../elements/Spinner.svelte";
 
   export let modules;
   export let walletSelect;
@@ -23,6 +24,7 @@
   let pollingInterval;
   let checkingModule;
   let actionResolved;
+  let loading;
 
   // recheck modules if below conditions
   $: if (!activeModal && !checkingModule) {
@@ -61,6 +63,11 @@
         doAction();
       }
 
+      if (activeModal.loading) {
+        loading = true;
+        activeModal.loading().then(() => (loading = false));
+      }
+
       // poll to automatically to check if condition has been met
       pollingInterval = setInterval(async () => {
         const invalid = await invalidState(currentModule, get(state));
@@ -199,6 +206,9 @@
       {:else}
         <div />
       {/if}
+      {#if loading}
+        <Spinner />
+      {/if}
       <Button onclick={handleExit}>Dismiss</Button>
     </div>
   </Modal>

src/views/WalletReady.svelte

@@ -95,7 +95,8 @@
       provider,
       instance,
       name: module.name,
-      connect: selectedWalletInterface.connect
+      connect: selectedWalletInterface.connect,
+      loading: selectedWalletInterface.loading
     });
 
     finish({ completed: true });