diff --git a/packages/core/README.md b/packages/core/README.md index 8f8510c07..aa774a05b 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -92,20 +92,19 @@ To see a list of all of the text values that can be internationalized or replace Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood. **`accountCenter`** -An object that defines whether the account center UI is enabled and it's position on the screen. Currently the account center is disabled for mobile devices, so only desktop options are available. +An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices. ```typescript -type AccountCenterOptions = { - desktop: { - position?: AccountCenterPosition // default: 'topRight' - enabled?: AccountCenter['enabled'] // default: true - } +export type AccountCenter = { + enabled: boolean + position?: AccountCenterPosition // default: 'topRight' + expanded?: boolean // default: true + minimal?: boolean // enabled by default for mobile } -type AccountCenter = { - enabled: boolean - position: AccountCenterPosition - expanded: boolean +export type AccountCenterOptions = { + desktop: Omit + mobile: Omit } type AccountCenterPosition = @@ -175,6 +174,18 @@ const onboard = Onboard({ { name: 'Coinbase', url: 'https://wallet.coinbase.com/' } ] }, + accountCenter: { + desktop: { + position: 'topRight', + enabled: true, + minimal: true + }, + mobile: { + position: 'topRight', + enabled: true, + minimal: true + } + }, i18n: { en: { connect: { @@ -316,6 +327,7 @@ type AccountCenter = { enabled: boolean position: AccountCenterPosition expanded: boolean + minimal: boolean } type AccountCenterPosition = @@ -516,8 +528,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla. --onboard-spacing-4: 1rem; --onboard-spacing-5: 0.5rem; - /* SHADOWS */ + /* BORDER RADIUS */ --onboard-border-radius-1: 24px; + --onboard-border-radius-2: 20px; + --onboard-border-radius-3: 16px; /* SHADOWS */ --onboard-shadow-0: none; diff --git a/packages/core/package.json b/packages/core/package.json index ef35cff2a..6d5833353 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.2.9-alpha.2", + "version": "2.2.9-alpha.3", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index 24b59c5c1..dc1b1047c 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -1,4 +1,5 @@ import type { AppState } from './types' +import { getDevice } from './utils' export const APP_INITIAL_STATE: AppState = { wallets: [], @@ -7,7 +8,8 @@ export const APP_INITIAL_STATE: AppState = { accountCenter: { enabled: true, position: 'topRight', - expanded: false + expanded: false, + minimal: getDevice().type === 'mobile' }, locale: '' } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f62d4d2fe..a87e3fb05 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -15,6 +15,7 @@ import initI18N from './i18n' import App from './views/Index.svelte' import type { InitOptions, OnboardAPI } from './types' +import { APP_INITIAL_STATE } from './constants' import { getDevice } from './utils' const API = { @@ -58,19 +59,26 @@ function init(options: InitOptions): OnboardAPI { initI18N(i18n) addChains(chains) - let accountCenterUpdate - const device = getDevice() - - if (device.type === 'mobile') { - accountCenterUpdate = { - enabled: false + + // update accountCenter + if (typeof accountCenter !== 'undefined') { + let accountCenterUpdate + + if (device.type === 'mobile' && accountCenter.mobile) { + accountCenterUpdate = { + ...APP_INITIAL_STATE.accountCenter, + ...accountCenter.mobile + } + } else if (accountCenter.desktop) { + accountCenterUpdate = { + ...APP_INITIAL_STATE.accountCenter, + ...accountCenter.desktop + } } - } else if (typeof accountCenter !== 'undefined' && accountCenter.desktop) { - accountCenterUpdate = accountCenter.desktop - } - accountCenterUpdate && updateAccountCenter(accountCenterUpdate) + updateAccountCenter(accountCenterUpdate) + } const { svelteInstance } = internalState$.getValue() @@ -187,7 +195,10 @@ function mountApp() { --spacing-7: 0.125rem; /* BORDER RADIUS */ - --border-radius-1: 24px; + --border-radius-1: 24px; + --border-radius-2: 20px; + --border-radius-3: 16px; + /* SHADOWS */ --shadow-0: none; diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 0df2d8f2a..ea00d6269 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -113,17 +113,16 @@ export type AccountCenterPosition = | 'bottomLeft' | 'topLeft' -export type AccountCenterOptions = { - desktop?: { +export type AccountCenter = { + enabled: boolean position?: AccountCenterPosition - enabled?: AccountCenter['enabled'] - } + expanded?: boolean + minimal?: boolean } - -export type AccountCenter = { - enabled: boolean - position: AccountCenterPosition - expanded: boolean + +export type AccountCenterOptions = { + desktop: Omit + mobile: Omit } // ==== ACTIONS ==== // diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index d83d8b593..85a40942b 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -114,11 +114,13 @@ const initOptions = Joi.object({ accountCenter: Joi.object({ desktop: Joi.object({ enabled: Joi.boolean(), + minimal: Joi.boolean(), position: accountCenterPosition }), mobile: Joi.object({ enabled: Joi.boolean(), - position: accountCenterPosition + minimal: Joi.boolean(), + position: accountCenterPosition, }) }) }) @@ -146,7 +148,8 @@ const setChainOptions = Joi.object({ const accountCenter = Joi.object({ enabled: Joi.boolean(), position: accountCenterPosition, - expanded: Joi.boolean() + expanded: Joi.boolean(), + minimal: Joi.boolean() }) type ValidateReturn = Joi.ValidationResult | null diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte index 17b152778..3fe491e39 100644 --- a/packages/core/src/views/account-center/Index.svelte +++ b/packages/core/src/views/account-center/Index.svelte @@ -5,6 +5,7 @@ import type { AccountCenter } from '../../types' import Maximized from './Maximized.svelte' import Minimized from './Minimized.svelte' + import Micro from './Micro.svelte' export let settings: AccountCenter @@ -28,9 +29,14 @@ @@ -38,11 +44,16 @@
- {#if !settings.expanded} + {#if !settings.expanded && !settings.minimal} + {:else if !settings.expanded && settings.minimal} + + {:else} diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte index af3a8e637..8aa7ce28f 100644 --- a/packages/core/src/views/account-center/Maximized.svelte +++ b/packages/core/src/views/account-center/Maximized.svelte @@ -20,6 +20,7 @@ import { updateAccountCenter } from '../../store/actions' import blocknative from '../../icons/blocknative' import DisconnectAllConfirm from './DisconnectAllConfirm.svelte' + import { getDevice } from '../../utils' function disconnectAllWallets() { $wallets$.forEach(({ label }) => disconnect({ label })) @@ -44,12 +45,13 @@ ) const { position } = state.get().accountCenter + const device = getDevice() + +
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte index cb98e9365..19ff8f725 100644 --- a/packages/core/src/views/account-center/Minimized.svelte +++ b/packages/core/src/views/account-center/Minimized.svelte @@ -64,7 +64,7 @@ } .radius { - border-radius: 16px; + border-radius: var(--onboard-border-radius-3, var(--border-radius-3)); } .padding-5 { diff --git a/packages/demo/package.json b/packages/demo/package.json index 926bc35ca..15a0b7c9e 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@web3-onboard/coinbase": "^2.0.0", - "@web3-onboard/core": "^2.2.7", + "@web3-onboard/core": "^2.2.9-alpha.2", "@web3-onboard/fortmatic": "^2.0.2", "@web3-onboard/gnosis": "^2.0.1", "@web3-onboard/injected-wallets": "^2.0.5", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index c3a2fd81f..b2788357e 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -154,7 +154,14 @@ // example customizing account center // accountCenter: { // desktop: { - // position: 'bottomRight' + // position: 'topRight', + // enabled: true, + // minimal: false + // }, + // mobile: { + // position: 'topRight', + // enabled: true, + // minimal: false // } // } // example customizing copy diff --git a/packages/react/README.md b/packages/react/README.md index 42fd0e72a..5cd12b6c3 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -95,6 +95,18 @@ const web3Onboard = init({ { name: 'MetaMask', url: 'https://metamask.io' }, { name: 'Coinbase', url: 'https://wallet.coinbase.com/' } ] + }, + accountCenter: { + desktop: { + position: 'topRight', + enabled: true, + minimal: true + }, + mobile: { + position: 'topRight', + enabled: true, + minimal: true + } } }) @@ -125,9 +137,7 @@ function App() { })} )} - +
)} diff --git a/packages/react/package.json b/packages/react/package.json index 4ac0445e1..da08b3d24 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.1.7-alpha.3", + "version": "2.1.7-alpha.4", "description": "Collection of React Hooks for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -21,7 +21,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.2.9-alpha.2", + "@web3-onboard/core": "^2.2.9-alpha.3", "@web3-onboard/common": "^2.1.0-alpha.1" }, "peerDependencies": {