[core-v2.7.0-alpha.1, react-v2.2.6-alpha.1, vue-v2.1.6-alpha.1] : Feature - Add configuration to hide/show sidebar (#1191)

* Add configuration to hide/show sidebar

* Remove unused import

* Bump versions

* Remove redundant check

* Update packages/core/src/types.ts

Co-authored-by: Aaron <abarnard@protonmail.com>

* Clean up validation

* Add documentation

Co-authored-by: Aaron <abarnard@protonmail.com>

Author: Adamj1232

packages/core/README.md

@@ -28,6 +28,7 @@ type InitOptions {
   wallets: WalletInit[]
   chains: Chain[]
   appMetadata?: AppMetadata
+  connect?: ConnectModalOptions
   i18n?: i18nOptions
   accountCenter?: AccountCenterOptions
   apiKey?: string
@@ -85,6 +86,15 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`connect`**
+An object that allows for customization of the Connect Modal and accepts the type ConnectModalOptions.
+
+```typescript
+type ConnectModalOptions = {
+  showSidebar?: boolean
+}
+```
+
 **`i18n`**
 An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in a object for the `en` locale.
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.6.0",
+  "version": "2.7.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

packages/core/src/constants.ts

@@ -18,7 +18,10 @@ export const APP_INITIAL_STATE: AppState = {
     position: 'topRight'
   },
   notifications: [],
-  locale: ''
+  locale: '',
+  connect : {
+    showSidebar: true
+  }
 }
 
 export const STORAGE_KEYS = {

packages/core/src/index.ts

@@ -26,7 +26,8 @@ import {
   customNotification,
   setLocale,
   setPrimaryWallet,
-  setWalletModules
+  setWalletModules,
+  updateConnectModal
 } from './store/actions'
 
 const API = {
@@ -87,13 +88,18 @@ function init(options: InitOptions): OnboardAPI {
     accountCenter,
     apiKey,
     notify,
-    gas
+    gas,
+    connect
   } = options
 
   initI18N(i18n)
   addChains(chainIdToHex(chains))
   const { device, svelteInstance } = configuration
 
+  if (typeof connect !== undefined) {
+    updateConnectModal(connect)
+  }
+
   // update accountCenter
   if (typeof accountCenter !== 'undefined') {
     let accountCenterUpdate

packages/core/src/store/actions.ts

@@ -24,7 +24,9 @@ import type {
   CustomNotification,
   UpdateNotification,
   CustomNotificationUpdate,
-  Notify
+  Notify,
+  ConnectModalOptions,
+  UpdateConnectModalAction
 } from '../types'
 
 import {
@@ -37,7 +39,8 @@ import {
   validateWallet,
   validateWalletInit,
   validateUpdateBalances,
-  validateNotify
+  validateNotify,
+  validateConnectModalUpdate
 } from '../validation'
 
 import {
@@ -53,7 +56,8 @@ import {
   SET_LOCALE,
   ADD_NOTIFICATION,
   REMOVE_NOTIFICATION,
-  UPDATE_ALL_WALLETS
+  UPDATE_ALL_WALLETS,
+  UPDATE_CONNECT_MODAL
 } from './constants'
 
 export function addChains(chains: Chain[]): void {
@@ -180,6 +184,23 @@ export function updateAccountCenter(
   dispatch(action as UpdateAccountCenterAction)
 }
 
+export function updateConnectModal(
+  update: ConnectModalOptions | Partial<ConnectModalOptions>
+): void {
+  const error = validateConnectModalUpdate(update)
+
+  if (error) {
+    throw error
+  }
+
+  const action = {
+    type: UPDATE_CONNECT_MODAL,
+    payload: update
+  }
+
+  dispatch(action as UpdateConnectModalAction)
+}
+
 export function updateNotify(update: Partial<Notify>): void {
   const error = validateNotify(update)
 

packages/core/src/store/constants.ts

@@ -5,6 +5,7 @@ export const UPDATE_WALLET = 'update_wallet'
 export const REMOVE_WALLET = 'remove_wallet'
 export const UPDATE_ACCOUNT = 'update_account'
 export const UPDATE_ACCOUNT_CENTER = 'update_account_center'
+export const UPDATE_CONNECT_MODAL = 'update_connect_modal'
 export const SET_WALLET_MODULES = 'set_wallet_modules'
 export const SET_LOCALE = 'set_locale'
 export const UPDATE_NOTIFY = 'update_notify'

packages/core/src/store/index.ts

@@ -17,7 +17,8 @@ import type {
   UpdateNotifyAction,
   AddNotificationAction,
   RemoveNotificationAction,
-  UpdateAllWalletsAction
+  UpdateAllWalletsAction,
+  UpdateConnectModalAction
 } from '../types'
 
 import {
@@ -27,6 +28,7 @@ import {
   REMOVE_WALLET,
   RESET_STORE,
   UPDATE_ACCOUNT,
+  UPDATE_CONNECT_MODAL,
   UPDATE_ACCOUNT_CENTER,
   UPDATE_NOTIFY,
   SET_WALLET_MODULES,
@@ -118,6 +120,18 @@ function reducer(state: AppState, action: Action): AppState {
       }
     }
 
+    case UPDATE_CONNECT_MODAL: {
+      const update = payload as UpdateConnectModalAction['payload']
+
+      return {
+        ...state,
+        connect: {
+          ...state.connect,
+          ...update
+        }
+      }
+    }
+
     case UPDATE_ACCOUNT_CENTER: {
       const update = payload as UpdateAccountCenterAction['payload']
 

packages/core/src/types.ts

@@ -33,6 +33,10 @@ export interface InitOptions {
    * Define custom copy for the 'en' locale or add locales to i18n your app
    */
   i18n?: i18nOptions
+  /**
+   * Customize the connect modal
+   */
+  connect?: ConnectModalOptions
   /**
    * Customize the account center UI
    */
@@ -117,6 +121,7 @@ export interface AppState {
   locale: Locale
   notify: Notify
   notifications: Notification[]
+  connect: ConnectModalOptions
 }
 
 export type Configuration = {
@@ -132,6 +137,10 @@ export type Locale = string
 export type i18nOptions = Record<Locale, i18n>
 export type i18n = typeof en
 
+export type ConnectModalOptions = {
+  showSidebar?: boolean
+}
+
 export type CommonPositions =
   | 'topRight'
   | 'bottomRight'
@@ -245,6 +254,7 @@ export type Action =
   | AddNotificationAction
   | RemoveNotificationAction
   | UpdateAllWalletsAction
+  | UpdateConnectModalAction
 
 export type AddChainsAction = { type: 'add_chains'; payload: Chain[] }
 export type AddWalletAction = { type: 'add_wallet'; payload: WalletState }
@@ -274,6 +284,11 @@ export type UpdateAccountCenterAction = {
   payload: AccountCenter | Partial<AccountCenter>
 }
 
+export type UpdateConnectModalAction = {
+  type: 'update_connect_modal'
+  payload: Partial<ConnectModalOptions>
+}
+
 export type SetWalletModulesAction = {
   type: 'set_wallet_modules'
   payload: WalletModule[]

packages/core/src/validation.ts

@@ -20,7 +20,8 @@ import type {
   CustomNotification,
   CustomNotificationUpdate,
   Notify,
-  PreflightNotificationsOptions
+  PreflightNotificationsOptions,
+  ConnectModalOptions
 } from './types'
 
 // const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
@@ -170,6 +171,10 @@ const accountCenter = Joi.object({
   containerElement: Joi.string()
 })
 
+const connectModalOptions = Joi.object({
+  showSidebar: Joi.boolean()
+})
+
 const initOptions = Joi.object({
   wallets: walletInit,
   chains: chains.required(),
@@ -184,7 +189,8 @@ const initOptions = Joi.object({
   gas: Joi.object({
     get: Joi.function().required(),
     stream: Joi.function().required()
-  })
+  }),
+  connect: connectModalOptions
 })
 
 const connectOptions = Joi.object({
@@ -318,6 +324,12 @@ export function validateAccountCenterUpdate(
   return validate(accountCenter, data)
 }
 
+export function validateConnectModalUpdate(
+  data: ConnectModalOptions | Partial<ConnectModalOptions>
+): ValidateReturn {
+  return validate(connectModalOptions, data)
+}
+
 export function validateWalletInit(data: WalletInit[]): ValidateReturn {
   return validate(walletInit, data)
 }

packages/core/src/views/connect/Index.svelte

@@ -38,7 +38,7 @@
   export let autoSelect: ConnectOptions['autoSelect']
 
   const { appMetadata } = configuration
-  const { walletModules } = state.get()
+  const { walletModules, connect } = state.get()
 
   let connectionRejected = false
   let wallets: WalletWithLoadingIcon[] = []
@@ -365,7 +365,7 @@
 {#if !autoSelect.disableModals}
   <Modal {close}>
     <div class="container relative flex">
-      {#if windowWidth >= 809}
+      {#if windowWidth >= 809 && connect.showSidebar}
         <Sidebar step={$modalStep$} />
       {/if}