1.23.0-0.1.0: [feature] Adds optional terms agreement (#531)

* Adds optional terms agreement

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.23.0",
+  "version": "1.23.0-0.1.0",
   "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/Wallets.svelte

@@ -2,7 +2,7 @@
   import { onDestroy } from 'svelte'
   import Button from '../elements/Button.svelte'
   import IconButton from '../elements/IconButton.svelte'
-  import { wallet } from '../stores'
+  import { app, wallet } from '../stores'
   import {
     WalletSelectModalData,
     WalletModule,
@@ -68,6 +68,7 @@
   {#each modalData.primaryWallets as wallet, i (wallet.name)}
     <li>
       <IconButton
+        disabled={!$app.termsAgreed}
         onclick={() => handleWalletSelect(wallet)}
         iconSrc={wallet.iconSrc}
         iconSrcSet={wallet.iconSrcSet}
@@ -80,14 +81,15 @@
 
   {#if modalData.secondaryWallets && modalData.secondaryWallets.length && !showingAllWalletModules}
     <div>
-      <Button onclick={showAllWallets}>Show More</Button>
+      <Button disabled={!$app.termsAgreed} onclick={showAllWallets}>Show More</Button>
     </div>
   {/if}
 
   {#if showingAllWalletModules}
     {#each modalData.secondaryWallets as wallet, i (wallet.name)}
       <li>
         <IconButton
+          disabled={!$app.termsAgreed}
           onclick={() => handleWalletSelect(wallet)}
           iconSrc={wallet.iconSrc}
           iconSrcSet={wallet.iconSrcSet}

src/constants.ts

@@ -0,0 +1,5 @@
+import { StorageKeys } from './interfaces'
+
+export const STORAGE_KEYS: StorageKeys = {
+  TERMS_AGREED: 'onboard.js:termsAgreed'
+}

src/elements/Button.svelte

@@ -2,6 +2,7 @@
   import { app } from '../stores'
   export let onclick: () => void = () => {}
   export let position: string
+  export let disabled: boolean = false
 </script>
 
 <style>
@@ -17,6 +18,8 @@
     font-family: inherit;
     transition: background 150ms ease-in-out;
     line-height: 1.15;
+    opacity: 1;
+    transition: opacity 200ms;
   }
 
   button:focus {
@@ -35,10 +38,18 @@
     position: absolute;
     left: 0;
   }
+
+  .disabled {
+    cursor: inherit;
+    pointer-events: none;
+    opacity: .4;
+  }
 </style>
 
 <button
   on:click={onclick}
+  {disabled}
+  class:disabled
   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/elements/IconButton.svelte

@@ -8,6 +8,7 @@
   export let text: string
   export let loadingWallet: string | undefined
   export let currentlySelected: boolean = false
+  export let disabled: boolean = false
 </script>
 
 <style>
@@ -27,6 +28,14 @@
     color: inherit;
     line-height: 1.15;
     font-family: inherit;
+    opacity: 1;
+    transition: opacity 200ms;
+  }
+
+  .disabled {
+    cursor: inherit;
+    pointer-events: none;
+    opacity: .4;
   }
 
   button:hover {
@@ -86,6 +95,8 @@
 
 <button
   on:click={onclick}
+  {disabled}
+  class:disabled
   class="bn-onboard-custom bn-onboard-icon-button"
   class:bn-onboard-dark-mode-background-hover={$app.darkMode}
   class:bn-onboard-selected-wallet={currentlySelected}>

src/interfaces.ts

@@ -23,13 +23,17 @@ export interface WalletSelectModuleOptions {
   description?: string
   wallets?: Array<WalletModule | WalletInitOptions>
   explanation?: string
+  termsOfServiceUrl?: string
+  privacyPolicyUrl?: string
 }
 
 export interface WalletSelectModule {
   heading: string
   description: string
   wallets: Array<WalletModule | WalletInitOptions>
   explanation?: string
+  termsOfServiceUrl: string
+  privacyPolicyUrl: string
 }
 
 export interface WalletCheckModule {
@@ -480,8 +484,13 @@ export interface AppState {
   walletSelectDisplayedUI: boolean
   walletCheckDisplayedUI: boolean
   displayBranding: boolean
+  termsAgreed: boolean
 }
 
 export interface CancelablePromise extends Promise<any> {
   cancel: () => void
 }
+
+export interface StorageKeys {
+  TERMS_AGREED: string
+}

src/modules/index.ts

@@ -12,24 +12,32 @@ const defaultWalletExplanation = `Wallets are used to send, receive, and store d
 
 export default function initializeModules(
   networkId: number,
-  walletSelect: WalletSelectModuleOptions | undefined,
+  walletSelectOptions: WalletSelectModuleOptions | undefined,
   walletCheck: Array<WalletCheckModule | WalletCheckInit> | undefined,
   isMobile: boolean
 ) {
   const wallets = select(
-    walletSelect && walletSelect.wallets,
+    walletSelectOptions && walletSelectOptions.wallets,
     networkId,
     isMobile
   )
 
+  const {
+    heading = defaultHeading,
+    description = defaultDescription,
+    explanation = defaultWalletExplanation,
+    termsOfServiceUrl = '',
+    privacyPolicyUrl = ''
+  } = walletSelectOptions || {}
+
   return {
     walletSelect: {
-      heading: (walletSelect && walletSelect.heading) || defaultHeading,
-      description:
-        (walletSelect && walletSelect.description) || defaultDescription,
+      heading,
+      description,
       wallets,
-      explanation:
-        (walletSelect && walletSelect.explanation) || defaultWalletExplanation
+      explanation,
+      termsOfServiceUrl,
+      privacyPolicyUrl
     },
     walletCheck: check(walletCheck, networkId)
   }

src/onboard.ts

@@ -31,6 +31,7 @@ import {
 } from './interfaces'
 
 import initializeModules from './modules'
+import { STORAGE_KEYS } from './constants'
 
 let onboard: any
 
@@ -77,6 +78,13 @@ function init(initialization: Initialization): API {
       displayBranding = false
     }
   }
+  const { termsOfServiceUrl, privacyPolicyUrl } =
+    initialization.walletSelect || {}
+
+  const termsAgreed =
+    termsOfServiceUrl || privacyPolicyUrl
+      ? localStorage.getItem(STORAGE_KEYS.TERMS_AGREED) == 'true'
+      : true
 
   app.update((store: AppState) => ({
     ...store,
@@ -91,7 +99,8 @@ function init(initialization: Initialization): API {
     darkMode,
     displayBranding,
     checkModules: initializedModules.walletCheck,
-    blockPollingInterval
+    blockPollingInterval,
+    termsAgreed
   }))
 
   initializeStores()

src/stores.ts

@@ -34,7 +34,8 @@ export const app: WritableStore = writable({
   walletSelectDisplayedUI: false,
   walletCheckDisplayedUI: false,
   displayBranding: false,
-  blockPollingInterval: 4000
+  blockPollingInterval: 4000,
+  termsAgreed: false
 })
 
 export const stateSyncStatus: {

src/validation.ts

@@ -202,12 +202,21 @@ function validateWalletSelect(
     description,
     explanation,
     wallets,
+    termsOfServiceUrl,
+    privacyPolicyUrl,
     ...otherParams
   } = walletSelect
 
   invalidParams(
     otherParams,
-    ['heading', 'description', 'explanation', 'wallets'],
+    [
+      'heading',
+      'description',
+      'explanation',
+      'termsOfServiceUrl',
+      'privacyPolicyUrl',
+      'wallets'
+    ],
     'walletSelect'
   )
 
@@ -232,6 +241,20 @@ function validateWalletSelect(
     optional: true
   })
 
+  validateType({
+    name: 'termsOfServiceUrl',
+    value: termsOfServiceUrl,
+    type: 'string',
+    optional: true
+  })
+
+  validateType({
+    name: 'privacyPolicyUrl',
+    value: privacyPolicyUrl,
+    type: 'string',
+    optional: true
+  })
+
   if (Array.isArray(wallets)) {
     wallets.forEach(validateWallet)
   }

src/views/WalletSelect.svelte

@@ -29,22 +29,42 @@
     WalletSelectModule,
     WalletInterface
   } from '../interfaces'
+  import { STORAGE_KEYS } from '../constants'
 
   export let module: WalletSelectModule = {
     heading: '',
     description: '',
+    termsOfServiceUrl: '',
+    privacyPolicyUrl: '',
     wallets: []
   }
 
   let modalData: WalletSelectModalData | null
   let showWalletDefinition: boolean
   let walletAlreadyInstalled: string | undefined
-  let installMessage: string | undefined
+  let installMessage: string
 
   let selectedWalletModule: WalletModule
 
   const { mobileDevice, os } = get(app)
-  let { heading, description, explanation, wallets } = module
+  let {
+    heading,
+    description,
+    explanation,
+    termsOfServiceUrl,
+    privacyPolicyUrl,
+    wallets
+  } = module
+
+  let showTermsOfService: boolean = !!(termsOfServiceUrl || privacyPolicyUrl) && !get(app).termsAgreed
+
+  $: {
+    if ($app.termsAgreed) {
+      localStorage.setItem(STORAGE_KEYS.TERMS_AGREED, 'true')
+    } else {
+      localStorage.removeItem(STORAGE_KEYS.TERMS_AGREED)
+    }
+  }
 
   let primaryWallets: WalletModule[]
   let secondaryWallets: WalletModule[] | undefined
@@ -159,12 +179,12 @@
 
       walletAlreadyInstalled = provider && getProviderName(provider)
 
-      installMessage =
-        module.installMessage &&
-        module.installMessage({
-          currentWallet: walletAlreadyInstalled,
-          selectedWallet: selectedWalletModule.name
-        })
+      installMessage = module.installMessage
+        ? module.installMessage({
+            currentWallet: walletAlreadyInstalled,
+            selectedWallet: selectedWalletModule.name
+          })
+        : ''
 
       // if it was autoSelected then we need to add modalData to show the modal
       if (autoSelected) {
@@ -236,11 +256,30 @@
     margin-top: 0.66em;
     cursor: pointer;
   }
+  .terms-of-service {
+    display: flex;
+    align-items: center;
+  }
+  .terms-of-service-check-box {
+    margin-right: 7px;
+  }
 </style>
 
 {#if modalData}
   <Modal closeModal={() => finish({ completed: false })}>
     <ModalHeader icon={walletIcon} heading={modalData.heading} />
+    {#if showTermsOfService}
+      <p>
+        <label class="terms-of-service">
+          <input class="terms-of-service-check-box" type="checkbox" bind:checked={$app.termsAgreed} />
+          <span>
+            I agree to the 
+            {#if termsOfServiceUrl}<a href={termsOfServiceUrl} target="_blank">Terms & Conditions</a>{privacyPolicyUrl ? ' and' : '.'} {/if}
+            {#if privacyPolicyUrl}<a href={privacyPolicyUrl} target="_blank">Privacy Policy</a>.{/if}
+          </span>
+        </label>
+      </p>
+    {/if}
     {#if !selectedWalletModule}
       <p class="bn-onboard-custom bn-onboard-select-description">
         {@html modalData.description}