Merge pull request #240 from blocknative/develop

Release 1.3.4

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "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",
@@ -42,7 +42,7 @@
     "@ledgerhq/hw-app-eth": "^5.7.0",
     "@ledgerhq/hw-transport-u2f": "^5.7.0",
     "@portis/web3": "^2.0.0-beta.42",
-    "@toruslabs/torus-embed": "^0.2.11",
+    "@toruslabs/torus-embed": "^1.1.1",
     "@walletconnect/web3-provider": "^1.0.0-beta.45",
     "authereum": "^0.0.4-beta.88",
     "bignumber.js": "^9.0.0",

src/components/Wallets.svelte

@@ -11,8 +11,8 @@
   export let modalData: WalletSelectModalData
   export let handleWalletSelect: (wallet: WalletModule) => void
   export let loadingWallet: string | undefined
-
-  let showingAllWalletModules: boolean = false
+  export let showingAllWalletModules: boolean = false
+  export let showAllWallets: () => void
   let selectedWallet: WritableStore
 
   const unsubscribe = wallet.subscribe(wallet => (selectedWallet = wallet))
@@ -80,9 +80,7 @@
 
   {#if modalData.secondaryWallets && modalData.secondaryWallets.length && !showingAllWalletModules}
     <div>
-      <Button onclick={() => (showingAllWalletModules = true)}>
-        Show More
-      </Button>
+      <Button onclick={showAllWallets}>Show More</Button>
     </div>
   {/if}
 

src/elements/IconButton.svelte

@@ -55,6 +55,10 @@
   }
 
   span {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     font-size: inherit;
     margin-left: 0.66em;
     font-weight: bold;
@@ -63,21 +67,28 @@
   }
 
   i {
-    font-size: 1.6rem;
-    margin-left: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: lighter;
+    color: inherit;
+    text-decoration: underline;
   }
 
   @media only screen and (max-width: 450px) {
     button {
       width: 100%;
     }
   }
+
+  .bn-onboard-selected-wallet {
+    background: #c3c3c3;
+  }
 </style>
 
 <button
   on:click={onclick}
   class="bn-onboard-custom bn-onboard-icon-button"
-  class:bn-onboard-dark-mode-background-hover={$app.darkMode}>
+  class:bn-onboard-dark-mode-background-hover={$app.darkMode}
+  class:bn-onboard-selected-wallet={currentlySelected}>
   <div>
     {#if loadingWallet === text}
       <Spinner />
@@ -87,8 +98,10 @@
       <img src={iconSrc} srcset={iconSrcSet} alt={text} />
     {/if}
   </div>
-  <span>{text}</span>
-  {#if currentlySelected}
-    <i>*</i>
-  {/if}
+  <span>
+    {text}
+    {#if currentlySelected}
+      <i>selected</i>
+    {/if}
+  </span>
 </button>

src/interfaces.ts

@@ -158,6 +158,16 @@ export interface TorusOptions {
   showTorusButton?: boolean
   buttonPosition?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'
   enableLogging?: boolean
+  enabledVerifiers: TorusVerifierStatus
+}
+
+
+interface TorusVerifierStatus {
+  google?: boolean;
+  facebook?: boolean;
+  reddit?: boolean;
+  twitch?: boolean;
+  discord?: boolean;
 }
 
 export interface AuthereumOptions {

src/modules/select/content.ts

@@ -31,11 +31,16 @@ export const extensionInstallMessage = (helpers: {
     <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
     You'll need to install <b>${selectedWallet}</b> to continue. Once you have it installed, go ahead and
     <span
-    class="bn-clickable"
+    class="bn-onboard-clickable"
       style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;"
       onclick={window.location.reload();}>
       refresh the page.
     </span>
+    ${
+      selectedWallet === 'Opera'
+        ? '<br><br><i>Hint: If you already have Opera installed, make sure that your web3 wallet is <a style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;" class="bn-onboard-clickable" href="https://help.opera.com/en/touch/crypto-wallet/" rel="noreferrer noopener" target="_blank">enabled</a></i>'
+        : ''
+    }
     </p>
     `
   }

src/modules/select/wallets/torus.ts

@@ -18,7 +18,8 @@ function torus(options: TorusOptions & CommonWalletOptions): WalletModule {
     buttonPosition,
     enableLogging,
     loginMethod,
-    showTorusButton
+    showTorusButton,
+    enabledVerifiers
   } = options
 
   return {
@@ -39,7 +40,8 @@ function torus(options: TorusOptions & CommonWalletOptions): WalletModule {
           chainId: networkId, // default: 1
           networkName: `${networkName(networkId)} Network` // default: Main Ethereum Network
         },
-        showTorusButton: showTorusButton // default: true
+        showTorusButton: showTorusButton, // default: true
+        enabledVerifiers: enabledVerifiers
       })
 
       const provider = instance.provider

src/utilities.ts

@@ -5,37 +5,51 @@ import { WalletInterface } from './interfaces'
 
 export function getNetwork(provider: any): Promise<number | any> {
   return new Promise((resolve, reject) => {
-    provider.sendAsync(
-      {
-        jsonrpc: '2.0',
-        method: 'net_version',
-        params: [],
-        id: 42
-      },
-      (e: any, res: any) => {
-        e && reject(e)
-        const result = res && res.result
-        resolve(result && Number(result))
-      }
-    )
+    // web3.js sometimes deletes sendAsync method
+    const method = provider.sendAsync || provider.send
+
+    if (method) {
+      method(
+        {
+          jsonrpc: '2.0',
+          method: 'net_version',
+          params: [],
+          id: 42
+        },
+        (e: any, res: any) => {
+          e && reject(e)
+          const result = res && res.result
+          resolve(result && Number(result))
+        }
+      )
+    } else {
+      resolve(null)
+    }
   })
 }
 
 export function getAddress(provider: any): Promise<string | any> {
   return new Promise((resolve, reject) => {
-    provider.sendAsync(
-      {
-        jsonrpc: '2.0',
-        method: 'eth_accounts',
-        params: [],
-        id: 42
-      },
-      (e: any, res: any) => {
-        e && reject(e)
-        const result = res && res.result && res.result[0]
-        resolve(result)
-      }
-    )
+    // web3.js sometimes deletes sendAsync method
+    const method = provider.sendAsync || provider.send
+
+    if (method) {
+      method(
+        {
+          jsonrpc: '2.0',
+          method: 'eth_accounts',
+          params: [],
+          id: 42
+        },
+        (e: any, res: any) => {
+          e && reject(e)
+          const result = res && res.result && res.result[0]
+          resolve(result)
+        }
+      )
+    } else {
+      resolve(null)
+    }
   })
 }
 
@@ -48,19 +62,26 @@ export function getBalance(provider: any): Promise<string | any> {
       return
     }
 
-    provider.sendAsync(
-      {
-        jsonrpc: '2.0',
-        method: 'eth_getBalance',
-        params: [currentAddress, 'latest'],
-        id: 42
-      },
-      (e: any, res: any) => {
-        e && reject(e)
-        const result = res && res.result
-        resolve(result && new BigNumber(result).toString(10))
-      }
-    )
+    // web3.js sometimes deletes sendAsync method
+    const method = provider.sendAsync || provider.send
+
+    if (method) {
+      method(
+        {
+          jsonrpc: '2.0',
+          method: 'eth_getBalance',
+          params: [currentAddress, 'latest'],
+          id: 42
+        },
+        (e: any, res: any) => {
+          e && reject(e)
+          const result = res && res.result
+          resolve(result && new BigNumber(result).toString(10))
+        }
+      )
+    } else {
+      resolve(null)
+    }
   })
 }
 
@@ -132,6 +153,11 @@ export function createLegacyProviderInterface(provider: any): WalletInterface {
 export function getProviderName(provider: any): string | undefined {
   if (!provider) return
 
+  // Torus also exports isMetamask to be true for backward compatibility
+  if (provider.isTorus) {
+    return 'Torus'
+  }
+
   if (provider.isMetaMask) {
     return 'MetaMask'
   }
@@ -156,10 +182,6 @@ export function getProviderName(provider: any): string | undefined {
     return 'Toshi'
   }
 
-  if (provider.isTorus) {
-    return 'Torus'
-  }
-
   if (provider.isCipher) {
     return 'Cipher'
   }

src/validation.ts

@@ -532,6 +532,7 @@ export function validateWalletInit(
     enableLogging,
     loginMethod,
     showTorusButton,
+    enabledVerifiers,
     disableNotifications,
     ...otherParams
   } = walletInit
@@ -554,7 +555,8 @@ export function validateWalletInit(
       'buttonPosition',
       'enableLogging',
       'loginMethod',
-      'showTorusButton'
+      'showTorusButton',
+      'enabledVerifiers'
     ],
     'walletInitObject'
   )
@@ -658,6 +660,14 @@ export function validateWalletInit(
     optional: true
   })
 
+
+  validateType({
+    name: 'walletInit.enabledVerifiers',
+    value: enabledVerifiers,
+    type: 'object',
+    optional: true
+  })
+
   validateType({
     name: 'walletInit.buttonPosition',
     value: buttonPosition,

src/views/Onboard.svelte

@@ -25,6 +25,10 @@
     background: #0e212a;
   }
 
+  :global(.bn-onboard-clickable) {
+    text-decoration: none;
+  }
+
   :global(.bn-onboard-clickable:hover) {
     cursor: pointer;
     text-decoration: underline;

src/views/WalletSelect.svelte

@@ -53,6 +53,9 @@
 
   let loadingWallet: string | undefined = undefined
 
+  let showingAllWalletModules = false
+  const showAllWallets = () => (showingAllWalletModules = true)
+
   renderWalletSelect()
 
   async function renderWalletSelect() {
@@ -207,7 +210,12 @@
       <p class="bn-onboard-custom bn-onboard-select-description">
         {@html modalData.description}
       </p>
-      <Wallets {modalData} {handleWalletSelect} {loadingWallet} />
+      <Wallets
+        {modalData}
+        {handleWalletSelect}
+        {loadingWallet}
+        {showingAllWalletModules}
+        {showAllWallets} />
       <div class="bn-onboard-custom bn-onboard-select-info-container">
         <span
           class="bn-onboard-custom bn-onboard-select-wallet-info"