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)
   }