Merge pull request #270 from blocknative/enhancement/wallet-explanation

Modify walletSelect explanation, make customizable.

Closes #269

Author: lnbc1QWFyb24

src/interfaces.ts

@@ -18,6 +18,7 @@ export interface WalletSelectModule {
   heading: string
   description: string
   wallets: Array<WalletModule | WalletInitOptions>
+  explanation?: string
 }
 
 export interface WalletCheckModule {
@@ -48,6 +49,7 @@ export interface WalletCheckModal {
 export interface WalletSelectModalData {
   heading: string
   description: string
+  explanation?: string
   primaryWallets: WalletModule[]
   secondaryWallets: WalletModule[] | undefined
 }

src/modules/index.ts

@@ -8,6 +8,7 @@ import {
 
 const defaultHeading = 'Select a Wallet'
 const defaultDescription = 'Please select a wallet to connect to this dapp:'
+const defaultWalletExplanation = `Wallets are used to send, receive, and store digital assets like Ether. Wallets come in many forms. They are either built into your browser, an extension added to your browser, a piece of hardware plugged into your computer or even an app on your phone. For more information about wallets, see <a style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;" class="bn-onboard-clickable" href="https://docs.ethhub.io/using-ethereum/wallets/intro-to-ethereum-wallets/" target="_blank" rel="noopener noreferrer">this explanation</a>.`
 
 export default function initializeModules(
   networkId: number,
@@ -21,7 +22,9 @@ export default function initializeModules(
       heading: (walletSelect && walletSelect.heading) || defaultHeading,
       description:
         (walletSelect && walletSelect.description) || defaultDescription,
-      wallets
+      wallets,
+      explanation:
+        (walletSelect && walletSelect.explanation) || defaultWalletExplanation
     },
     walletCheck: check(walletCheck, networkId)
   }

src/validation.ts

@@ -158,11 +158,17 @@ function validateSubscriptions(subscriptions: Subscriptions): never | void {
 function validateWalletSelect(walletSelect: WalletSelectModule): never | void {
   validateType({ name: 'walletSelect', value: walletSelect, type: 'object' })
 
-  const { heading, description, wallets, ...otherParams } = walletSelect
+  const {
+    heading,
+    description,
+    explanation,
+    wallets,
+    ...otherParams
+  } = walletSelect
 
   invalidParams(
     otherParams,
-    ['heading', 'description', 'wallets'],
+    ['heading', 'description', 'explanation', 'wallets'],
     'walletSelect'
   )
 
@@ -172,13 +178,21 @@ function validateWalletSelect(walletSelect: WalletSelectModule): never | void {
     type: 'string',
     optional: true
   })
+
   validateType({
     name: 'description',
     value: description,
     type: 'string',
     optional: true
   })
 
+  validateType({
+    name: 'explanation',
+    value: explanation,
+    type: 'string',
+    optional: true
+  })
+
   if (Array.isArray(wallets)) {
     wallets.forEach(validateWallet)
   }

src/views/WalletSelect.svelte

@@ -47,7 +47,7 @@
   let selectedWalletModule: WalletModule
 
   const { mobileDevice, os } = get(app)
-  let { heading, description, wallets } = module
+  let { heading, description, explanation, wallets } = module
 
   let primaryWallets: WalletModule[]
   let secondaryWallets: WalletModule[] | undefined
@@ -102,6 +102,7 @@
     modalData = {
       heading,
       description,
+      explanation,
       primaryWallets,
       secondaryWallets
     }
@@ -248,12 +249,7 @@
         <p
           in:fade
           class="bn-onboard-custom bn-onboard-select-wallet-definition">
-          Wallets are used to send, receive, and store digital assets like
-          Ethereum. Wallets come in many forms. They are either built into your
-          browser, an extension added to your browser, a piece of hardware
-          plugged into your computer or even an app on your phone. They are
-          hyper secure, and can be used for any other blockchain application you
-          may want to use.
+          {@html modalData.explanation}
         </p>
       {/if}
     {:else}