Add modules to onboard library and re-structure exports

Author: lnbc1QWFyb24

package-lock.json

@@ -32,7 +32,10 @@
     "promise-cancelable": "^2.1.1",
     "regenerator-runtime": "^0.13.3",
     "svelte": "^3.0.0",
-    "svelte-i18n": "^1.1.2-beta"
+    "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"
   },
   "scripts": {
     "prepare": "rollup -c",

package.json

@@ -4,6 +4,7 @@ import babel from "rollup-plugin-babel"
 import commonjs from "rollup-plugin-commonjs"
 import globals from "rollup-plugin-node-globals"
 import json from "rollup-plugin-json"
+import image from "rollup-plugin-img"
 import builtins from "rollup-plugin-node-builtins"
 import { terser } from "rollup-plugin-terser"
 
@@ -17,6 +18,7 @@ export default [
       esModule: false
     },
     plugins: [
+      image(),
       json(),
       svelte(),
       resolve({
@@ -45,11 +47,15 @@ export default [
       "svelte/internal",
       "svelte/transition",
       "promise-cancelable",
-      "regenerator-runtime/runtime"
+      "regenerator-runtime/runtime",
+      "@portis/web3",
+      "@walletconnect/web3-provider",
+      "fortmatic"
     ],
     plugins: [
       svelte(),
       json(),
+      image(),
       commonjs(),
       babel({ exclude: "node_modules/**" })
     ],

rollup.config.js

@@ -1,7 +1,8 @@
 import "regenerator-runtime/runtime"
-
 import { get } from "svelte/store"
 
+import modules from "./modules"
+
 import Onboard from "./views/Onboard.svelte"
 
 import {
@@ -117,4 +118,7 @@ function init(initialization) {
   return { walletSelect, walletReady, config, getState }
 }
 
-export default init
+export default {
+  init,
+  modules
+}

src/index.js

@@ -0,0 +1,7 @@
+import select from "./select"
+import ready from "./ready"
+
+export default {
+  select,
+  ready
+}

src/modules/index.js

@@ -0,0 +1,21 @@
+function balance(minimum) {
+  return ({ balance, BigNumber }) => {
+    // if balance is less than minimum (compare < 1)
+    if (BigNumber(balance).lte(BigNumber(minimum || 0))) {
+      return {
+        heading: "Get Some ETH",
+        description: `Your current account has less than the necessary minimum balance of ${BigNumber(
+          minimum
+        )
+          .div(BigNumber("1000000000000000000"))
+          .toString()} ETH.`,
+        eventCode: "nsfFail",
+        icon: `
+        <svg height="18" viewBox="0 0 429 695" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="m0 394 213 126.228516 214-126.228516-214 301z"/><path d="m0 353.962264 213.5-353.962264 213.5 353.962264-213.5 126.037736z"/></g></svg>
+        `
+      }
+    }
+  }
+}
+
+export default balance

src/modules/ready/balance.js

@@ -0,0 +1,17 @@
+function connect() {
+  return ({ wallet, address }) => {
+    if (!address) {
+      return {
+        heading: "Login and Authorize Your Wallet",
+        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,
+        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>
+        `
+      }
+    }
+  }
+}
+
+export default connect

src/modules/ready/connect.js

@@ -0,0 +1,26 @@
+import connect from "./connect"
+import network from "./network"
+import balance from "./balance"
+
+function init(options) {
+  if (!options || typeof options !== "object") {
+    throw new Error("initModules must be called with a valid option object")
+  }
+
+  const { networkId, minimumBalance } = options
+
+  if (!networkId || typeof networkId !== "number") {
+    throw new Error(
+      "initModules must be called with a property of networkId that is of type Number"
+    )
+  }
+
+  return [connect(), network(networkId), balance(minimumBalance || "0")]
+}
+
+export default {
+  init,
+  connect,
+  network,
+  balance
+}

src/modules/ready/index.js

@@ -0,0 +1,35 @@
+import { networkName } from "../../utilities"
+
+function network(correctNetwork) {
+  if (!correctNetwork || typeof correctNetwork !== "number") {
+    throw new Error(
+      "Network module must be called with a property of value that is of type Number"
+    )
+  }
+
+  return ({ network, walletSelect, exit }) => {
+    if (network != (correctNetwork || "1")) {
+      return {
+        heading: "You Must Change Networks",
+        description: `Blockchain applications have different networks they can work on. Think of this like making sure you're on Netflix vs Hulu to watch your favorite show. We've detected that you need to switch your wallet's network from <b>${networkName(
+          Number(network)
+        )}</b> to <b>${networkName(
+          Number(correctNetwork)
+        )} network</b> for this Dapp. <br><br> <i>*Some wallets may not support changing networks. If you can not change networks in your wallet you may consider switching to a different wallet.</i>`,
+        eventCode: "networkFail",
+        button: {
+          onclick: () => {
+            exit()
+            walletSelect()
+          },
+          text: "Switch Wallet"
+        },
+        icon: `
+        <svg height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m13.375 28c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.504-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.504 1.125-1.125-.505125-1.125-1.125-1.125zm0-6.75c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.505125-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.505125-1.125-1.125-1.125zm11.25 4.5c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.621 0-1.125.505125-1.125 1.125s.504 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.504-1.125-1.125-1.125zm-11.25 10.117125h-.014625c-.615375-.007875-1.110375-.50175-1.110375-1.117125 0-1.35675.898875-3.375 3.375-3.375h6.75c.50625-.0135 1.125-.219375 1.125-1.125v-1.125c0-.621.502875-1.125 1.125-1.125s1.125.504 1.125 1.125v1.125c0 2.476125-2.01825 3.375-3.375 3.375h-6.75c-.905625 0-1.1115.61875-1.125 1.1385-.01575.610875-.51525 1.103625-1.125 1.103625zm0 1.132875c-.621 0-1.125-.502875-1.125-1.125v-6.75c0-.621.504-1.125 1.125-1.125s1.125.504 1.125 1.125v6.75c0 .622125-.504 1.125-1.125 1.125z" fill="currentColor" transform="translate(-10 -10)"/></svg>
+        `
+      }
+    }
+  }
+}
+
+export default network

src/modules/ready/network.js

@@ -0,0 +1,46 @@
+export const extensionInstallMessage = ({ currentWallet, selectedWallet }) => {
+  if (currentWallet) {
+    return `
+    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    We have detected that you already have
+    <b>${currentWallet}</b>
+    installed. If you would prefer to use
+    <b>${selectedWallet}</b>
+    instead, then click below to install.
+    </p>
+    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    <b>Tip:</b>
+    If you already have ${selectedWallet} installed, check your
+    browser extension settings to make sure that you have it enabled
+    and that you have disabled any other browser extension wallets.
+    <span
+      class="bn-onboard-clickable"
+      style="color: #4a90e2;"
+      onclick="window.location.reload();">
+      Then refresh the page.
+    </span>
+    </p>
+    `
+  } else {
+    return `
+    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    You'll need to install <b>${selectedWallet}</b> to continue. Install
+    the extension and then
+    <span
+    class="bn-clickable"
+      style="color: #4a90e2;"
+      onclick={window.location.reload();}>
+      refresh the page.
+    </span>
+    </p>
+    `
+  }
+}
+
+export const mobileWalletInstallMessage = ({ selectedWallet }) => {
+  return `
+  <p style="font-size: 0.889rem;">
+    You'll need to install <b>${selectedWallet}</b> to continue. Click below to install and then load this Dapp with <b>${selectedWallet}</b>.
+  </p>
+  `
+}