Enhancement: Optional dappId (#337)

* Make dappId optional in Initialization interface

* Make dappId optional

* Add branding component

* Render branding in all modals

* Add branding logic and types

Closes #334

Author: lnbc1QWFyb24

src/components/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import { app } from '../stores'
+  import Branding from '../elements/Branding.svelte'
   export let closeModal: () => void
   export let closeable: boolean = true
 
@@ -78,6 +79,10 @@
   .bn-onboard-dark-mode-close-background:hover {
     background: #00222c;
   }
+
+  .no-padding-branding {
+    padding-bottom: 0;
+  }
 </style>
 
 <aside
@@ -86,9 +91,13 @@
   on:click={closeModal}>
   <section
     class:bn-onboard-dark-mode={$app.darkMode}
+    class:no-padding-branding={$app.displayBranding}
     class="bn-onboard-custom bn-onboard-modal-content"
     on:click={e => e.stopPropagation()}>
     <slot />
+    {#if $app.displayBranding}
+      <Branding darkMode={$app.darkMode} />
+    {/if}
     {#if closeable}
       <div
         class="bn-onboard-custom bn-onboard-modal-content-close"

src/elements/Branding.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let darkMode
+</script>
+
+<style>
+  div {
+    font-size: 0.66rem;
+    height: 1.3rem;
+    margin: 0.4rem;
+    display: flex;
+  }
+
+  a {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    opacity: 0.8;
+    color: inherit;
+  }
+
+  img {
+    height: 100%;
+    width: auto;
+  }
+</style>
+
+<div>
+  <a
+    href="https://blocknative.com"
+    class="bn-onboard-clickable"
+    target="_blank"
+    rel="noopener noreferrer">
+    <img
+      alt="Blocknative Logo"
+      src={darkMode ? ' https://www.blocknative.com/hubfs/Infrastructure%20Rebrand/bn-structure-logo-white.svg' : 'https://www.blocknative.com/hubfs/Infrastructure%20Rebrand/bn-structure-logo-black.svg'} />
+  </a>
+</div>

src/interfaces.ts

@@ -1,11 +1,12 @@
 export interface Initialization {
-  dappId: string
+  dappId?: string
   networkId: number
   subscriptions?: Subscriptions
   walletSelect?: WalletSelectModuleOptions
   walletCheck?: Array<WalletCheckModule | WalletCheckInit>
   darkMode?: boolean
   apiUrl?: string
+  hideBranding?: boolean
 }
 
 export interface Subscriptions {
@@ -93,7 +94,7 @@ export interface StateAndHelpers extends UserState {
   stateStore: {
     address: WalletStateSliceStore
     network: WalletStateSliceStore
-    balance: BalanceStore
+    balance: BalanceStore | WalletStateSliceStore
   }
 }
 
@@ -286,6 +287,10 @@ export interface WritableStore {
   subscribe: (subscriber: (store: any) => any) => () => void
 }
 
+export interface ReadableStore {
+  subscribe: (subscriber: (store: any) => any) => () => void
+}
+
 export interface WalletInterfaceStore {
   subscribe: (subscriber: (store: any) => void) => () => void
   update: (
@@ -325,6 +330,7 @@ export interface AppState {
   accountSelectInProgress: boolean
   walletSelectDisplayedUI: boolean
   walletCheckDisplayedUI: boolean
+  displayBranding: boolean
 }
 
 export interface CancelablePromise extends Promise<any> {

src/onboard.ts

@@ -12,7 +12,8 @@ import {
   wallet,
   state,
   walletInterface,
-  resetWalletState
+  resetWalletState,
+  initializeStores
 } from './stores'
 
 import { getDeviceInfo } from './utilities'
@@ -42,9 +43,14 @@ function init(initialization: Initialization): API {
 
   validateInit(initialization)
 
-  const { subscriptions, dappId, networkId, darkMode, apiUrl } = initialization
-
-  initializeBlocknative(dappId, networkId, apiUrl)
+  const {
+    subscriptions,
+    dappId,
+    networkId,
+    darkMode,
+    apiUrl,
+    hideBranding
+  } = initialization
 
   const { os, isMobile } = getDeviceInfo()
 
@@ -54,6 +60,22 @@ function init(initialization: Initialization): API {
     initialization.walletCheck
   )
 
+  let displayBranding: boolean
+
+  if (dappId) {
+    if (hideBranding !== false) {
+      displayBranding = false
+    } else {
+      displayBranding = true
+    }
+  } else {
+    if (hideBranding !== true) {
+      displayBranding = true
+    } else {
+      displayBranding = false
+    }
+  }
+
   app.update((store: AppState) => ({
     ...store,
     dappId,
@@ -62,9 +84,16 @@ function init(initialization: Initialization): API {
     mobileDevice: isMobile,
     os,
     darkMode,
+    displayBranding,
     checkModules: initializedModules.walletCheck
   }))
 
+  initializeStores()
+
+  if (dappId) {
+    initializeBlocknative(dappId, networkId, apiUrl)
+  }
+
   onboard = new Onboard({
     target: document.body,
     props: {

src/stores.ts

@@ -4,6 +4,7 @@ import { wait, makeCancelable, createInterval } from './utilities'
 import { validateWalletInterface, validateType } from './validation'
 import {
   WritableStore,
+  ReadableStore,
   WalletInterfaceStore,
   WalletInterface,
   WalletStateSliceStore,
@@ -28,7 +29,8 @@ export const app: WritableStore = writable({
   autoSelectWallet: '',
   checkModules: [],
   walletSelectDisplayedUI: false,
-  walletCheckDisplayedUI: false
+  walletCheckDisplayedUI: false,
+  displayBranding: false
 })
 
 export const stateSyncStatus: {
@@ -47,37 +49,54 @@ export const stateSyncStatus: {
   network: null
 }
 
-export const address: WalletStateSliceStore = createWalletStateSliceStore({
-  parameter: 'address',
-  initialState: null
-})
-export const network: WalletStateSliceStore = createWalletStateSliceStore({
-  parameter: 'network',
-  initialState: null
-})
-export const balance: BalanceStore = createBalanceStore(null)
-export const wallet: WritableStore = writable({
-  name: null,
-  provider: null,
-  connect: null,
-  instance: null,
-  dashboard: null,
-  type: null
-})
+export let address: WalletStateSliceStore
+export let network: WalletStateSliceStore
+export let balance: BalanceStore | WalletStateSliceStore
+export let wallet: WritableStore
+export let state: ReadableStore
 
-export const state = derived(
-  [address, network, balance, wallet, app],
-  ([$address, $network, $balance, $wallet, $app]) => {
-    return {
-      address: $address,
-      network: $network,
-      balance: $balance,
-      wallet: $wallet,
-      mobileDevice: $app.mobileDevice,
-      appNetworkId: $app.networkId
+export function initializeStores() {
+  address = createWalletStateSliceStore({
+    parameter: 'address',
+    initialState: null
+  })
+
+  network = createWalletStateSliceStore({
+    parameter: 'network',
+    initialState: null
+  })
+
+  balance = get(app).dappId
+    ? createBalanceStore(null)
+    : createWalletStateSliceStore({
+        parameter: 'balance',
+        initialState: null,
+        intervalSetting: 1000
+      })
+
+  wallet = writable({
+    name: null,
+    provider: null,
+    connect: null,
+    instance: null,
+    dashboard: null,
+    type: null
+  })
+
+  state = derived(
+    [address, network, balance, wallet, app],
+    ([$address, $network, $balance, $wallet, $app]) => {
+      return {
+        address: $address,
+        network: $network,
+        balance: $balance,
+        wallet: $wallet,
+        mobileDevice: $app.mobileDevice,
+        appNetworkId: $app.networkId
+      }
     }
-  }
-)
+  )
+}
 
 // keep track of intervals that are syncing state so they can be cleared
 let currentSyncerIntervals: ({ clear: () => void } | undefined)[] = []
@@ -87,29 +106,32 @@ export const walletInterface: WalletInterfaceStore = createWalletInterfaceStore(
 )
 
 walletInterface.subscribe((walletInterface: WalletInterface | null) => {
-  // clear all current intervals if they exist
-  currentSyncerIntervals.forEach(
-    (interval: { clear: () => void } | undefined) =>
-      interval && interval.clear()
-  )
-
-  const currentState = get(state)
-
-  // reset state
-  currentState.balance && balance.reset()
-  currentState.address && address.reset()
-  currentState.network && network.reset()
+  // make sure that stores have been initialized
+  if (state) {
+    // clear all current intervals if they exist
+    currentSyncerIntervals.forEach(
+      (interval: { clear: () => void } | undefined) =>
+        interval && interval.clear()
+    )
+
+    const currentState = get(state)
+
+    // reset state
+    currentState.balance && balance.reset()
+    currentState.address && address.reset()
+    currentState.network && network.reset()
+
+    if (walletInterface) {
+      // start syncing state and save intervals
+      currentSyncerIntervals = [
+        address.setStateSyncer(walletInterface.address),
+        network.setStateSyncer(walletInterface.network),
+        balance.setStateSyncer(walletInterface.balance)
+      ]
+    }
 
-  if (walletInterface) {
-    // start syncing state and save intervals
-    currentSyncerIntervals = [
-      address.setStateSyncer(walletInterface.address),
-      network.setStateSyncer(walletInterface.network),
-      balance.setStateSyncer(walletInterface.balance)
-    ]
+    resetCheckModules()
   }
-
-  resetCheckModules()
 })
 
 export function resetWalletState(options?: {
@@ -198,8 +220,9 @@ function createWalletInterfaceStore(
 function createWalletStateSliceStore(options: {
   parameter: string
   initialState: string | number | null | undefined
+  intervalSetting?: number
 }): WalletStateSliceStore {
-  const { parameter, initialState } = options
+  const { parameter, initialState, intervalSetting } = options
   const { subscribe, set } = writable(initialState)
 
   let currentState: string | number | null | undefined
@@ -259,7 +282,7 @@ function createWalletStateSliceStore(options: {
               )
               stateSyncStatus[parameter] = null
             })
-        }, 200)
+        }, intervalSetting || 200)
 
         return interval
       }

src/validation.ts

@@ -63,6 +63,7 @@ export function validateInit(init: Initialization): never | void {
     walletCheck,
     darkMode,
     apiUrl,
+    hideBranding,
     ...otherParams
   } = init
 
@@ -75,12 +76,18 @@ export function validateInit(init: Initialization): never | void {
       'walletSelect',
       'walletCheck',
       'darkMode',
-      'apiUrl'
+      'apiUrl',
+      'hideBranding'
     ],
     'init'
   )
 
-  validateType({ name: 'dappId', value: dappId, type: 'string' })
+  validateType({
+    name: 'dappId',
+    value: dappId,
+    type: 'string',
+    optional: true
+  })
   validateType({ name: 'networkId', value: networkId, type: 'number' })
   validateType({
     name: 'darkMode',
@@ -94,6 +101,12 @@ export function validateInit(init: Initialization): never | void {
     type: 'string',
     optional: true
   })
+  validateType({
+    name: 'hideBranding',
+    value: hideBranding,
+    type: 'boolean',
+    optional: true
+  })
 
   validateType({
     name: 'subscriptions',