Merge pull request #610 from blocknative/release/1.30.0

Release 1.30.0

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.29.0",
+  "version": "1.29.0-0.3.1",
   "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",
@@ -67,7 +67,7 @@
     "@walletconnect/web3-provider": "^1.4.1",
     "authereum": "^0.1.12",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "^3.3.4",
+    "bnc-sdk": "^3.4.1",
     "bowser": "^2.10.0",
     "eth-lattice-keyring": "^0.2.7",
     "eth-provider": "^0.6.1",

src/components/SelectedWallet.svelte

@@ -37,13 +37,13 @@
   {/if}
 
   <footer class="bn-onboard-custom bn-onboard-modal-selected-wallet-footer">
+    <Button cta={false} onclick={onBack}>Back</Button>
     <a
       href={selectedWalletModule.link}
       rel="noreferrer noopener"
       target="_blank"
     >
       <Button>Open {selectedWalletModule.name}</Button>
     </a>
-    <Button onclick={onBack}>Back</Button>
   </footer>
 </section>

src/elements/Button.svelte

@@ -3,15 +3,16 @@
   export let onclick: () => void = () => {}
   export let position: string = ''
   export let disabled: boolean = false
+  // If this is a CTA Button then we want to emphasize it
+  export let cta: boolean = true
 </script>
 
 <style>
   button {
+    border: none;
     background: inherit;
     font-size: 0.889em;
     font-family: inherit;
-    border: 1px solid #4a90e2;
-    border-radius: 40px;
     padding: 0.55em 1.4em;
     cursor: pointer;
     color: #4a90e2;
@@ -25,9 +26,6 @@
   button:focus {
     outline: none;
   }
-  button:hover {
-    background: #ecf3fc;
-  }
 
   .bn-onboard-prepare-button-right {
     position: absolute;
@@ -44,12 +42,21 @@
     pointer-events: none;
     opacity: 0.4;
   }
+  .cta {
+    border: 1px solid #4a90e2;
+    border-radius: 40px;
+  }
+
+  .cta:hover {
+    background: #ecf3fc;
+  }
 </style>
 
 <button
   on:click={onclick}
   {disabled}
   class:disabled
+  class:cta
   class="bn-onboard-custom bn-onboard-prepare-button"
   class:bn-onboard-prepare-button-right={position === 'right'}
   class:bn-onboard-prepare-button-left={position === 'left'}

src/modules/select/wallets/keepkey/entryModal.ts

@@ -56,7 +56,7 @@ const pinButtons = `
 const delButtonIcon = `<svg class="del-button-icon" viewBox="0 0 24 24" focusable="false" class="chakra-icon css-onkibi" aria-hidden="true"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>`
 
 const pinPhraseInput = (modalType: ModalType) => `
-<form class="pin-phrase-input-container">
+<form id="pin-phrase-form" class="pin-phrase-input-container">
   <input
     id="pin-phrase-input"
     placeholder="${modalType === ModalType.Pin ? 'PIN' : ''}"
@@ -254,6 +254,20 @@ export const renderModal = (wallet: KeepKeyHDWallet, modalType: ModalType) => {
     }
   } as SvelteComponentDev['new'])
 
+  // Submits the pin or passphrase to the Keepkey device
+  const submit = async () => {
+    const value = getInput().value
+    modalType === ModalType.Pin
+      ? await wallet.sendPin(value)
+      : await wallet.sendPassphrase(value)
+    pinModal.$destroy()
+  }
+
+  document.getElementById('pin-phrase-form')?.addEventListener('submit', e => {
+    e.preventDefault()
+    submit()
+  })
+
   // Creates a new Button component used to trigger sending the pin to Keepkey
   const entryEl = document.getElementById('entry')
   if (entryEl) {
@@ -264,13 +278,7 @@ export const renderModal = (wallet: KeepKeyHDWallet, modalType: ModalType) => {
       target: entryEl,
       props: {
         onclick: async () => {
-          const value = getInput().value
-
-          modalType === ModalType.Pin
-            ? await wallet.sendPin(value)
-            : await wallet.sendPassphrase(value)
-
-          pinModal.$destroy()
+          submit()
           deleteWindowProperties()
         },
         $$slots: createSlot(span),

src/modules/select/wallets/keepkey/index.ts

@@ -41,7 +41,7 @@ interface KeepProviderOptions {
 function keepkey(
   options: CommonWalletOptions & { rpcUrl: string; networkId: number }
 ): WalletModule {
-  const { label, iconSrc, rpcUrl, networkId } = options
+  const { label, iconSrc, rpcUrl, networkId, preferred } = options
 
   // Used to signal if the keep key could not be paired or if the keep key is already paired with another app
   let installMessage: string
@@ -90,7 +90,8 @@ function keepkey(
         : '',
     type: 'hardware',
     mobile: false,
-    desktop: true
+    desktop: true,
+    preferred
   }
 }
 

src/onboard.ts

@@ -32,6 +32,7 @@ import {
 } from './interfaces'
 
 import initializeModules from './modules'
+import { closeSocketConnection } from './services'
 
 let onboard: any
 
@@ -57,6 +58,14 @@ function init(initialization: Initialization): API {
     console.warn(
       'Initializing Onboard and destroying previously initialized instance.'
     )
+
+    // close WebSocket connection
+    closeSocketConnection()
+
+    // reset the wallet state
+    resetWalletState()
+
+    // destroy svelte instance and remove from DOM
     onboard.$destroy()
   }
 

src/services.ts

@@ -28,3 +28,7 @@ export function getBlocknative(): any {
   }
   return blocknative
 }
+
+export function closeSocketConnection(): void {
+  blocknative?.destroy()
+}

src/utilities.ts

@@ -325,6 +325,8 @@ export function networkName(id: number): string {
       return 'kovan'
     case 100:
       return 'xdai'
+    case 56:
+      return 'bsc'
     default:
       const { networkId, networkName } = get(app)
       return (networkId === id && networkName) || 'unknown'
@@ -345,6 +347,8 @@ export function networkToId(network: string): number {
       return 42
     case 'xdai':
       return 100
+    case 'bsc':
+      return 56
     default:
       return 0
   }

src/views/WalletCheck.svelte

@@ -349,12 +349,15 @@
 
     <div class="bn-onboard-custom bn-onboard-prepare-button-container">
       {#if activeModal.button}
-        <Button position="left" onclick={activeModal.button.onclick}>
+        <Button position="right" onclick={activeModal.button.onclick}>
           {activeModal.button.text}
         </Button>
       {/if}
       {#if errorMsg}
-        <Button position={!activeModal.button ? 'left' : ''} onclick={doAction}>
+        <Button
+          position={!activeModal.button ? 'right' : ''}
+          onclick={doAction}
+        >
           Try Again
         </Button>
       {:else}
@@ -363,9 +366,9 @@
       {#if loading}
         <Spinner />
       {/if}
-      <Button position="right" onclick={() => handleExit(false)}>
-        Dismiss
-      </Button>
+      <Button position="left" onclick={() => handleExit(false)} cta={false}
+        >Dismiss</Button
+      >
     </div>
   </Modal>
 {/if}

src/views/WalletSelect.svelte

@@ -328,7 +328,9 @@
           What is a wallet?
         </span>
         {#if mobileDevice}
-          <Button onclick={() => finish({ completed: false })}>Dismiss</Button>
+          <Button cta={false} onclick={() => finish({ completed: false })}
+            >Dismiss</Button
+          >
         {/if}
       </div>
       {#if showWalletDefinition}

yarn.lock

@@ -2372,10 +2372,10 @@ bnb-javascript-sdk-nobroadcast@^2.16.14:
     uuid "^3.3.2"
     websocket-stream "^5.5.0"
 
-bnc-sdk@^3.3.4:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-3.4.0.tgz#402874a4a794ccf5dd8ba8fba6925e24b38f772e"
-  integrity sha512-JVDDyIYucFQyq+ZfHSBVZG+R2Ophhdi+HIK5zj1gE2MYSCK/Ax8Budqys9/LyZkGdewWHZ5EWi2TUehxAbx0Rw==
+bnc-sdk@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-3.4.1.tgz#fca070656a6efbfc489889ed0404e1b6289c17ff"
+  integrity sha512-GrZzN3zyqVOmtk++tvq/X1zchO+Bt9TIzw39xv7UkMLEUcs43pwj6XWphLRbqkrrILNSrLwOI0S8opyjffDFAA==
   dependencies:
     crypto-es "^1.2.2"
     rxjs "^6.6.3"