From 18ea1d5921246d7ae8a91fcb347dd67736f8d8f0 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 2 Aug 2022 17:10:00 -0600
Subject: [PATCH 1/7] Add configuration to hide/show sidebar

---
 packages/core/src/constants.ts               |  5 +++-
 packages/core/src/index.ts                   | 10 ++++++--
 packages/core/src/store/actions.ts           | 27 +++++++++++++++++---
 packages/core/src/store/constants.ts         |  1 +
 packages/core/src/store/index.ts             | 16 +++++++++++-
 packages/core/src/types.ts                   | 15 +++++++++++
 packages/core/src/validation.ts              | 16 +++++++++++-
 packages/core/src/views/connect/Index.svelte |  6 ++---
 packages/demo/src/App.svelte                 |  3 +++
 9 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index b591d5e3a..c5427dbd1 100644
--- a/packages/core/src/constants.ts
+++ b/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 = {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 46cd0d349..822711831 100644
--- a/packages/core/src/index.ts
+++ b/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
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 91f5c8f07..b664685f0 100644
--- a/packages/core/src/store/actions.ts
+++ b/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)
 
diff --git a/packages/core/src/store/constants.ts b/packages/core/src/store/constants.ts
index ddf8e02fd..80da33a55 100644
--- a/packages/core/src/store/constants.ts
+++ b/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'
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index bafe3c580..66c98aaef 100644
--- a/packages/core/src/store/index.ts
+++ b/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']
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index fd61471b7..e10413151 100644
--- a/packages/core/src/types.ts
+++ b/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: ConnectModalOptions | Partial<ConnectModalOptions>
+}
+
 export type SetWalletModulesAction = {
   type: 'set_wallet_modules'
   payload: WalletModule[]
diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
index 8b0097acf..3fca78ca4 100644
--- a/packages/core/src/validation.ts
+++ b/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]+$/)
@@ -184,6 +185,9 @@ const initOptions = Joi.object({
   gas: Joi.object({
     get: Joi.function().required(),
     stream: Joi.function().required()
+  }),
+  connect: Joi.object({
+    showSidebar: Joi.boolean()
   })
 })
 
@@ -199,6 +203,10 @@ const connectOptions = Joi.object({
     .required()
 })
 
+const connectModalOptions = Joi.object({
+  showSidebar: Joi.boolean()
+})
+
 const disconnectOptions = Joi.object({
   label: Joi.string().required()
 }).required()
@@ -318,6 +326,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)
 }
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index 4328664bf..a3aae7110 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ProviderRpcErrorCode, WalletModule } from '@web3-onboard/common'
-  import { BehaviorSubject, takeUntil } from 'rxjs'
+  import { BehaviorSubject, takeUntil, shareReplay } from 'rxjs'
   import EventEmitter from 'eventemitter3'
   import { _ } from 'svelte-i18n'
   import en from '../../i18n/en.json'
@@ -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 && connect.showSidebar}
         <Sidebar step={$modalStep$} />
       {/if}
 
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 8ecd45536..07f8603c1 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -171,6 +171,9 @@
       gettingStartedGuide: 'https://blocknative.com',
       explore: 'https://blocknative.com'
     },
+    connect: {
+      showSidebar: false
+    },
     // // example customizing account center
     accountCenter: {
       desktop: {

From 766697a10ee74ff052cd8a69320334540a70fa23 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 2 Aug 2022 17:11:29 -0600
Subject: [PATCH 2/7] Remove unused import

---
 packages/core/src/views/connect/Index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index a3aae7110..7ba5c91ad 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ProviderRpcErrorCode, WalletModule } from '@web3-onboard/common'
-  import { BehaviorSubject, takeUntil, shareReplay } from 'rxjs'
+  import { BehaviorSubject, takeUntil } from 'rxjs'
   import EventEmitter from 'eventemitter3'
   import { _ } from 'svelte-i18n'
   import en from '../../i18n/en.json'

From 7f9a4c07e043b1506799fbdad0ad385331344c34 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 2 Aug 2022 17:13:20 -0600
Subject: [PATCH 3/7] Bump versions

---
 packages/core/package.json   | 2 +-
 packages/demo/package.json   | 2 +-
 packages/demo/src/App.svelte | 3 ---
 packages/react/package.json  | 4 ++--
 packages/vue/package.json    | 4 ++--
 5 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 921961c23..03bc307ad 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 49c820021..9f24bb9ed 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.0.10",
-    "@web3-onboard/core": "^2.6.0",
+    "@web3-onboard/core": "^2.6.0-alpha.1",
     "@web3-onboard/dcent": "^2.0.7",
     "@web3-onboard/fortmatic": "^2.0.9",
     "@web3-onboard/gnosis": "^2.0.8",
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 07f8603c1..8ecd45536 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -171,9 +171,6 @@
       gettingStartedGuide: 'https://blocknative.com',
       explore: 'https://blocknative.com'
     },
-    connect: {
-      showSidebar: false
-    },
     // // example customizing account center
     accountCenter: {
       desktop: {
diff --git a/packages/react/package.json b/packages/react/package.json
index 2443841c3..1ccafd792 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.5",
+  "version": "2.2.6-alpha.1",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, 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",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.6.0",
+    "@web3-onboard/core": "^2.7.0-alpha.1",
     "@web3-onboard/common": "^2.1.7",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 1c8cbed57..b8246e971 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.5",
+  "version": "2.1.6-alpha.1",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, 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",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.7",
-    "@web3-onboard/core": "^2.6.0",
+    "@web3-onboard/core": "^2.7.0-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

From e1a407a35faa8d833422cf540fd9894d3f6f3d66 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Tue, 2 Aug 2022 17:18:05 -0600
Subject: [PATCH 4/7] Remove redundant check

---
 packages/core/src/views/connect/Index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index 7ba5c91ad..4c7f677ab 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -365,7 +365,7 @@
 {#if !autoSelect.disableModals}
   <Modal {close}>
     <div class="container relative flex">
-      {#if windowWidth >= 809 && connect && connect.showSidebar}
+      {#if windowWidth >= 809 && connect.showSidebar}
         <Sidebar step={$modalStep$} />
       {/if}
 

From 3f315ce2aa0675cf1052ea2cff0336a3502b9b24 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 3 Aug 2022 08:13:33 -0600
Subject: [PATCH 5/7] Update packages/core/src/types.ts

Co-authored-by: Aaron <abarnard@protonmail.com>
---
 packages/core/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index e10413151..93f6a4777 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -286,7 +286,7 @@ export type UpdateAccountCenterAction = {
 
 export type UpdateConnectModalAction = {
   type: 'update_connect_modal'
-  payload: ConnectModalOptions | Partial<ConnectModalOptions>
+  payload: Partial<ConnectModalOptions>
 }
 
 export type SetWalletModulesAction = {

From 4c272681574a3c8701766d52b5f7fae1b521d466 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 3 Aug 2022 08:15:50 -0600
Subject: [PATCH 6/7] Clean up validation

---
 packages/core/src/validation.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
index 3fca78ca4..a3d1786d7 100644
--- a/packages/core/src/validation.ts
+++ b/packages/core/src/validation.ts
@@ -171,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(),
@@ -186,9 +190,7 @@ const initOptions = Joi.object({
     get: Joi.function().required(),
     stream: Joi.function().required()
   }),
-  connect: Joi.object({
-    showSidebar: Joi.boolean()
-  })
+  connect: connectModalOptions
 })
 
 const connectOptions = Joi.object({
@@ -203,10 +205,6 @@ const connectOptions = Joi.object({
     .required()
 })
 
-const connectModalOptions = Joi.object({
-  showSidebar: Joi.boolean()
-})
-
 const disconnectOptions = Joi.object({
   label: Joi.string().required()
 }).required()

From 6a85a20c3393210cb511165c04bedb1b40e7d3cb Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Wed, 3 Aug 2022 08:20:02 -0600
Subject: [PATCH 7/7] Add documentation

---
 packages/core/README.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/core/README.md b/packages/core/README.md
index eb057bdc3..ed23a2499 100644
--- a/packages/core/README.md
+++ b/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.