1.20.0-0.0.1: [enhancement] - Install Wallet Copy (#514)

* Start implementing

* Fix svelte formatting

* Remove mobileDevice flag

* Add ismobile to common wallet interface

* Change button copy

* Update mobile copy

* Add isMobile to all wallet modules

* Conditionally render message

* Increment version

Author: lnbc1QWFyb24

.prettierrc.js

@@ -4,5 +4,6 @@ module.exports = {
   singleQuote: true,
   printWidth: 80,
   tabWidth: 2,
-  arrowParens: 'avoid'
+  arrowParens: 'avoid',
+  svelteSortOrder: 'scripts-styles-markup'
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.20.0",
+  "version": "1.20.0-0.0.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",

src/components/SelectedWallet.svelte

@@ -29,7 +29,8 @@
     iconSrc={selectedWalletModule.iconSrc}
     iconSrcSet={selectedWalletModule.iconSrcSet}
     svg={selectedWalletModule.svg}
-    text={selectedWalletModule.name} />
+    text={selectedWalletModule.name}
+  />
 
   {#if installMessage}
     {@html installMessage}
@@ -39,8 +40,9 @@
     <a
       href={selectedWalletModule.link}
       rel="noreferrer noopener"
-      target="_blank">
-      <Button>Install {selectedWalletModule.name}</Button>
+      target="_blank"
+    >
+      <Button>Open {selectedWalletModule.name}</Button>
     </a>
     <Button onclick={onBack}>Back</Button>
   </footer>

src/interfaces.ts

@@ -171,6 +171,7 @@ export interface CommonWalletOptions {
   label?: string
   iconSrc?: string
   svg?: string
+  isMobile: boolean
 }
 
 export interface SdkWalletOptions extends CommonWalletOptions {

src/modules/select/content.ts

@@ -53,7 +53,7 @@ export const mobileWalletInstallMessage = (helpers: {
 
   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>.
+  Tap the button below to <b>Open ${selectedWallet}</b>. Please access this site on ${selectedWallet}'s in-app browser for a seamless experience.
   </p>
   `
 }

src/modules/select/index.ts

@@ -38,7 +38,7 @@ function select(
 
           try {
             return getModule(walletName).then((m: any) =>
-              m.default({ ...initParams, networkId })
+              m.default({ ...initParams, networkId, isMobile })
             )
           } catch (error) {
             if (error.name === 'DeprecatedWalletError') {

src/modules/select/wallets/metamask.ts

@@ -1,11 +1,11 @@
-import { extensionInstallMessage } from '../content'
+import { extensionInstallMessage, mobileWalletInstallMessage } from '../content'
 import { WalletModule, Helpers, CommonWalletOptions } from '../../../interfaces'
 
 import metamaskIcon from '../wallet-icons/icon-metamask.png'
 import metamaskIcon2x from '../wallet-icons/icon-metamask@2x.png'
 
 function metamask(options: CommonWalletOptions): WalletModule {
-  const { preferred, label, iconSrc, svg } = options
+  const { preferred, label, iconSrc, svg, isMobile } = options
 
   return {
     name: label || 'MetaMask',
@@ -35,7 +35,9 @@ function metamask(options: CommonWalletOptions): WalletModule {
     },
     type: 'injected',
     link: `https://metamask.app.link/dapp/${window.location.host}`,
-    installMessage: extensionInstallMessage,
+    installMessage: isMobile
+      ? mobileWalletInstallMessage
+      : extensionInstallMessage,
     desktop: true,
     mobile: true,
     preferred

src/views/WalletSelect.svelte

@@ -11,7 +11,6 @@
   import Wallets from '../components/Wallets.svelte'
   import SelectedWallet from '../components/SelectedWallet.svelte'
   import Button from '../elements/Button.svelte'
-  import IconButton from '../elements/IconButton.svelte'
   import walletIcon from '../elements/walletIcon'
 
   import {
@@ -21,13 +20,11 @@
     getAddress,
     getBalance,
     getNetwork,
-    isPromise,
     networkName
   } from '../utilities'
 
   import {
     WalletSelectModalData,
-    AppState,
     WalletModule,
     WalletSelectModule,
     WalletInterface
@@ -253,11 +250,13 @@
         {handleWalletSelect}
         {loadingWallet}
         {showingAllWalletModules}
-        {showAllWallets} />
+        {showAllWallets}
+      />
       <div class="bn-onboard-custom bn-onboard-select-info-container">
         <span
           class="bn-onboard-custom bn-onboard-select-wallet-info"
-          on:click={() => (showWalletDefinition = !showWalletDefinition)}>
+          on:click={() => (showWalletDefinition = !showWalletDefinition)}
+        >
           What is a wallet?
         </span>
         {#if mobileDevice}
@@ -267,7 +266,8 @@
       {#if showWalletDefinition}
         <p
           in:fade
-          class="bn-onboard-custom bn-onboard-select-wallet-definition">
+          class="bn-onboard-custom bn-onboard-select-wallet-definition"
+        >
           {@html modalData.explanation}
         </p>
       {/if}
@@ -278,7 +278,8 @@
           selectedWalletModule = null
           walletAlreadyInstalled = null
         }}
-        {installMessage} />
+        {installMessage}
+      />
     {/if}
   </Modal>
 {/if}