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. 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/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 +): 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): 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..93f6a4777 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 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 } +export type UpdateConnectModalAction = { + type: 'update_connect_modal' + payload: Partial +} + 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..a3d1786d7 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]+$/) @@ -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 +): 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..4c7f677ab 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/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}
- {#if windowWidth >= 809} + {#if windowWidth >= 809 && connect.showSidebar} {/if} 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/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": {