Implement Authereum module and add loading state to connect module

Author: lnbc1QWFyb24

package.json

@@ -9,34 +9,35 @@
   ],
   "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.17",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "0.1.1",
     "bowser": "^2.5.2",
+    "fortmatic": "^0.8.2",
     "ow": "^0.13.2",
     "promise-cancelable": "^2.1.1",
     "regenerator-runtime": "^0.13.3",
     "svelte": "^3.0.0",
-    "svelte-i18n": "^1.1.2-beta",
-    "@portis/web3": "^2.0.0-beta.42",
-    "@walletconnect/web3-provider": "^1.0.0-beta.36",
-    "fortmatic": "^0.8.2"
+    "svelte-i18n": "^1.1.2-beta"
   },
   "scripts": {
     "prepare": "rollup -c",

rollup.config.js

@@ -50,7 +50,8 @@ export default [
       "regenerator-runtime/runtime",
       "@portis/web3",
       "@walletconnect/web3-provider",
-      "fortmatic"
+      "fortmatic",
+      "authereum"
     ],
     plugins: [
       svelte(),

src/components/ModalHeader.svelte

@@ -28,7 +28,6 @@
     font-weight: bold;
     font-size: 1.33rem;
     margin: 0 0 0 0.5rem;
-    color: #4a4a4a;
   }
 </style>
 

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,8 @@ 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 { networkName } from "../../utilities"
 
 function defaults({
@@ -38,6 +40,9 @@ function defaults({
     )
   }
 
+  desktopModules.push(authereum({ network }))
+  mobileModules.push(authereum({ network }))
+
   return {
     heading: heading || "Select a Wallet",
     description:
@@ -58,5 +63,6 @@ export default {
   coinbase,
   trust,
   portis,
-  fortmatic
+  fortmatic,
+  authereum
 }

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

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

src/modules/select/wallets/authereum.js

@@ -72,6 +72,7 @@ export function validateModal(modal) {
       invalidMsg: ow.optional.string,
       eventCode: ow.string,
       action: ow.optional.function,
+      loading: ow.optional.function,
       button: ow.optional.object.exactShape({
         onclick: ow.function,
         text: ow.string
@@ -89,6 +90,7 @@ export function validateWalletInterface(walletInterface) {
       name: ow.string,
       connect: ow.optional.function,
       disconnect: ow.optional.function,
+      loading: ow.optional.function,
       address: ow.object
         .hasAnyKeys("get", "onChange")
         .valuesOfType(ow.function),

src/validation.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>