From 1cde03cb024364acb28732f1089fffca3fd1ea8c Mon Sep 17 00:00:00 2001 From: Kat Leight Date: Tue, 13 Jun 2023 16:46:04 -0600 Subject: [PATCH 01/17] updateAppMetadata function in store, initiate configuration in AppState --- packages/core/package.json | 2 +- packages/core/src/constants.ts | 12 ++++++++++++ packages/core/src/index.ts | 8 ++++++-- packages/core/src/store/actions.ts | 28 ++++++++++++++++++++++++---- packages/core/src/store/constants.ts | 1 + packages/core/src/store/index.ts | 21 +++++++++++++++++++-- packages/core/src/types.ts | 11 +++++++++-- packages/core/src/validation.ts | 22 +++++++++++++++++++++- packages/demo/package.json | 2 +- packages/demo/src/App.svelte | 11 +++++++++++ 10 files changed, 105 insertions(+), 13 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 884763d7b..644206e10 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.20.2-alpha.1", + "version": "2.20.2-alpha.2", "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 073ace4f8..2956df30a 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -1,4 +1,5 @@ import type { AppState } from './types.js' +import { getDevice } from './utils' export const APP_INITIAL_STATE: AppState = { wallets: [], @@ -26,6 +27,17 @@ export const APP_INITIAL_STATE: AppState = { connect: { showSidebar: true, disableClose: false + }, + configuration: { + svelteInstance: null, + appMetadata: null, + apiKey: null, + device: getDevice(), + initialWalletInit: [], + gas: null, + containerElements: { accountCenter: null, connectModal: null }, + transactionPreview: null, + unstoppableResolution: null } } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 1d102b069..30f3a5b03 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -32,7 +32,8 @@ import { setPrimaryWallet, setWalletModules, updateConnectModal, - updateTheme + updateTheme, + updateAppMetadata } from './store/actions.js' import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview' import { getBlocknativeSdk } from './services.js' @@ -53,7 +54,8 @@ const API = { updateBalances, updateAccountCenter, setPrimaryWallet, - updateTheme + updateTheme, + updateAppMetadata } } } @@ -217,6 +219,8 @@ function init(options: InitOptions): OnboardAPI { unstoppableResolution }) + updateAppMetadata(configuration.appMetadata) + if (apiKey && transactionPreview) { const getBnSDK = async () => { transactionPreview.init({ diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 1f3f892f5..b813ec2e0 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -1,4 +1,4 @@ -import type { Chain, WalletInit, WalletModule } from '@web3-onboard/common' +import type { AppMetadata, Chain, WalletInit, WalletModule } from '@web3-onboard/common' import { nanoid } from 'nanoid' import { dispatch } from './index.js' import { configuration } from '../configuration.js' @@ -29,7 +29,8 @@ import type { ConnectModalOptions, UpdateConnectModalAction, Theme, - UpdateChainsAction + UpdateChainsAction, + UpdateAppMetadataAction } from '../types.js' import { @@ -45,7 +46,8 @@ import { validateNotify, validateConnectModalUpdate, validateUpdateTheme, - validateSetChainOptions + validateSetChainOptions, + validateAppMetadataUpdate } from '../validation.js' import { @@ -63,7 +65,8 @@ import { REMOVE_NOTIFICATION, UPDATE_ALL_WALLETS, UPDATE_CONNECT_MODAL, - UPDATE_CHAINS + UPDATE_CHAINS, + UPDATE_APP_METADATA } from './constants.js' export function addChains(chains: Chain[]): void { @@ -438,3 +441,20 @@ export function updateTheme(theme: Theme): void { const themingObj = returnTheme(theme) themingObj && handleThemeChange(themingObj) } + +export function updateAppMetadata( + update: AppMetadata| Partial +): void { + const error = validateAppMetadataUpdate(update) + + if (error) { + throw error + } + + const action = { + type: UPDATE_APP_METADATA, + payload: update + } + + dispatch(action as UpdateAppMetadataAction) +} diff --git a/packages/core/src/store/constants.ts b/packages/core/src/store/constants.ts index d9d2c0e9f..16ac82d9f 100644 --- a/packages/core/src/store/constants.ts +++ b/packages/core/src/store/constants.ts @@ -13,3 +13,4 @@ export const UPDATE_NOTIFY = 'update_notify' export const ADD_NOTIFICATION = 'add_notification' export const REMOVE_NOTIFICATION = 'remove_notification' export const UPDATE_ALL_WALLETS = 'update_balance' +export const UPDATE_APP_METADATA = 'update_app_metadata' diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index f9d240f1d..47b2773f3 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -19,7 +19,8 @@ import type { RemoveNotificationAction, UpdateAllWalletsAction, UpdateConnectModalAction, - UpdateChainsAction + UpdateChainsAction, + UpdateAppMetadataAction } from '../types.js' import { @@ -37,7 +38,8 @@ import { ADD_NOTIFICATION, REMOVE_NOTIFICATION, UPDATE_ALL_WALLETS, - UPDATE_CHAINS + UPDATE_CHAINS, + UPDATE_APP_METADATA } from './constants.js' function reducer(state: AppState, action: Action): AppState { @@ -218,6 +220,21 @@ function reducer(state: AppState, action: Action): AppState { } } + case UPDATE_APP_METADATA: { + const update = payload as UpdateAppMetadataAction['payload'] + + return { + ...state, + configuration: { + ...state.configuration, + appMetadata: { + ...state.configuration.appMetadata, + ...update + } + } + } + } + case RESET_STORE: return APP_INITIAL_STATE diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 2ec8dc5be..3891ce66a 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -179,7 +179,8 @@ export interface AppState { locale: Locale notify: Notify notifications: Notification[] - connect: ConnectModalOptions + connect: ConnectModalOptions, + configuration: Configuration } export type Configuration = { @@ -428,7 +429,8 @@ export type Action = | AddNotificationAction | RemoveNotificationAction | UpdateAllWalletsAction - | UpdateConnectModalAction + | UpdateConnectModalAction + | UpdateAppMetadataAction export type AddChainsAction = { type: 'add_chains'; payload: Chain[] } export type UpdateChainsAction = { type: 'update_chains'; payload: Chain } @@ -494,6 +496,11 @@ export type UpdateAllWalletsAction = { payload: WalletState[] } +export type UpdateAppMetadataAction = { + type: 'update_app_metadata' + payload: AppMetadata | Partial +} + // ==== MISC ==== // export type ChainStyle = { icon: string diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 19b35bc09..5737190c3 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -9,7 +9,8 @@ import { chainNamespaceValidation, chainIdValidation, chainValidation, - validate + validate, + AppMetadata } from '@web3-onboard/common' import type { @@ -128,6 +129,19 @@ const appMetadata = Joi.object({ agreement }) +const appMetadataUpdate = Joi.object({ + name: Joi.string(), + description: Joi.string(), + icon: Joi.string(), + logo: Joi.string(), + gettingStartedGuide: Joi.string(), + email: Joi.string(), + appUrl: Joi.string(), + explore: Joi.string(), + recommendedInjectedWallets: Joi.array().items(recommendedWallet), + agreement +}) + const walletModule = Joi.object({ label: Joi.string().required(), getInfo: Joi.function().arity(1).required(), @@ -432,3 +446,9 @@ export function validateUpdateBalances(data: WalletState[]): ValidateReturn { export function validateUpdateTheme(data: Theme): ValidateReturn { return validate(theme, data) } + +export function validateAppMetadataUpdate( + data: AppMetadata | Partial +): ValidateReturn { + return validate(appMetadataUpdate, data) +} diff --git a/packages/demo/package.json b/packages/demo/package.json index 36c3706b9..f8f70b02f 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -26,7 +26,7 @@ "dependencies": { "@web3-onboard/cede-store": "^2.0.2", "@web3-onboard/coinbase": "^2.2.3", - "@web3-onboard/core": "^2.20.2-alpha.1", + "@web3-onboard/core": "^2.20.2-alpha.2", "@web3-onboard/dcent": "^2.2.7", "@web3-onboard/enkrypt": "^2.0.3", "@web3-onboard/fortmatic": "^2.0.18", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index c5c1cdb6f..2411c020f 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -729,6 +729,17 @@ minimal: true })}>Small Trigger + {/if} From 25068b476e03abf271b927d6a90fb1ea7ab5af59 Mon Sep 17 00:00:00 2001 From: Kat Leight Date: Tue, 13 Jun 2023 16:58:28 -0600 Subject: [PATCH 02/17] icon change working --- packages/core/src/store/actions.ts | 1 + packages/core/src/views/connect/Index.svelte | 21 ++++++++++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index b813ec2e0..dcd4d43b5 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -445,6 +445,7 @@ export function updateTheme(theme: Theme): void { export function updateAppMetadata( update: AppMetadata| Partial ): void { + console.log('update', update) const error = validateAppMetadataUpdate(update) if (error) { diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte index e085b514c..f9d799588 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -33,6 +33,8 @@ filter, firstValueFrom, mapTo, + shareReplay, + startWith, Subject, take, takeUntil @@ -57,8 +59,13 @@ export let autoSelect: ConnectOptions['autoSelect'] - const { appMetadata, unstoppableResolution, device } = configuration - const { icon } = appMetadata || {} + const configuration$ = state + .select('configuration') + .pipe(startWith(state.get().configuration), shareReplay(1)) + + console.log('$configuration$', $configuration$) + + const { unstoppableResolution, device, appMetadata } = $configuration$ const { walletModules, connect } = state.get() const cancelPreviousConnect$ = new Subject() @@ -559,17 +566,19 @@
{#if windowWidth <= MOBILE_WINDOW_WIDTH}
+ {#key $configuration$.appMetadata.icon}
- {#if icon} - {#if isSVG(icon)} - {@html icon} + {#if $configuration$.appMetadata.icon} + {#if isSVG($configuration$.appMetadata.icon)} + {@html $configuration$.appMetadata.icon} {:else} - logo + logo {/if} {:else} {@html defaultBnIcon} {/if}
+ {/key}
{$_( From 31170beec41828aec9a1644788e48a817fc7bebe Mon Sep 17 00:00:00 2001 From: Kat Leight Date: Wed, 14 Jun 2023 17:28:43 -0600 Subject: [PATCH 03/17] move metadata out of configuration --- packages/core/src/configuration.ts | 2 +- packages/core/src/constants.ts | 13 +------------ packages/core/src/index.ts | 1 - packages/core/src/store/index.ts | 9 +++------ packages/core/src/types.ts | 2 +- 5 files changed, 6 insertions(+), 21 deletions(-) diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index a05769039..0287216df 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -3,7 +3,7 @@ import { getDevice } from './utils.js' export let configuration: Configuration = { svelteInstance: null, - appMetadata: null, + // appMetadata: null, apiKey: null, device: getDevice(), initialWalletInit: [], diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index 2956df30a..e4a0e7989 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -1,5 +1,4 @@ import type { AppState } from './types.js' -import { getDevice } from './utils' export const APP_INITIAL_STATE: AppState = { wallets: [], @@ -28,17 +27,7 @@ export const APP_INITIAL_STATE: AppState = { showSidebar: true, disableClose: false }, - configuration: { - svelteInstance: null, - appMetadata: null, - apiKey: null, - device: getDevice(), - initialWalletInit: [], - gas: null, - containerElements: { accountCenter: null, connectModal: null }, - transactionPreview: null, - unstoppableResolution: null - } + appMetadata: null, } export const STORAGE_KEYS = { diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 30f3a5b03..599e2b84b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -210,7 +210,6 @@ function init(options: InitOptions): OnboardAPI { const app = svelteInstance || mountApp(theme, disableFontDownload) updateConfiguration({ - appMetadata, svelteInstance: app, apiKey, initialWalletInit: wallets, diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 47b2773f3..1d39323d6 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -225,12 +225,9 @@ function reducer(state: AppState, action: Action): AppState { return { ...state, - configuration: { - ...state.configuration, - appMetadata: { - ...state.configuration.appMetadata, - ...update - } + appMetadata: { + ...state.appMetadata, + ...update } } } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 3891ce66a..eb4739a02 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -180,7 +180,7 @@ export interface AppState { notify: Notify notifications: Notification[] connect: ConnectModalOptions, - configuration: Configuration + appMetadata: AppMetadata } export type Configuration = { From fbb7380521f71c729aa3c8a96a0d32441c55be2b Mon Sep 17 00:00:00 2001 From: Kat Leight Date: Wed, 14 Jun 2023 17:41:19 -0600 Subject: [PATCH 04/17] sucessful logo change --- packages/core/src/index.ts | 2 +- packages/core/src/views/connect/Index.svelte | 22 +++++++++----------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 599e2b84b..19e9c9b6b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -218,7 +218,7 @@ function init(options: InitOptions): OnboardAPI { unstoppableResolution }) - updateAppMetadata(configuration.appMetadata) + updateAppMetadata(appMetadata) if (apiKey && transactionPreview) { const getBnSDK = async () => { diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte index f9d799588..9f73cad3a 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -59,13 +59,11 @@ export let autoSelect: ConnectOptions['autoSelect'] - const configuration$ = state - .select('configuration') - .pipe(startWith(state.get().configuration), shareReplay(1)) + const appMetadata$ = state + .select('appMetadata') + .pipe(startWith(state.get().appMetadata), shareReplay(1)) - console.log('$configuration$', $configuration$) - - const { unstoppableResolution, device, appMetadata } = $configuration$ + const { unstoppableResolution, device } = configuration const { walletModules, connect } = state.get() const cancelPreviousConnect$ = new Subject() @@ -144,7 +142,7 @@ chains, BigNumber, EventEmitter, - appMetadata + appMetadata: $appMetadata$ }) const loadedIcon = await icon @@ -566,13 +564,13 @@
{#if windowWidth <= MOBILE_WINDOW_WIDTH}
- {#key $configuration$.appMetadata.icon} + {#key $appMetadata$.icon}
- {#if $configuration$.appMetadata.icon} - {#if isSVG($configuration$.appMetadata.icon)} - {@html $configuration$.appMetadata.icon} + {#if $appMetadata$.icon} + {#if isSVG($appMetadata$.icon)} + {@html $appMetadata$.icon} {:else} - logo + logo {/if} {:else} {@html defaultBnIcon} From 833149dfa49658613adb2849f6e2bc7ce621a19d Mon Sep 17 00:00:00 2001 From: Kat Leight Date: Wed, 14 Jun 2023 17:58:11 -0600 Subject: [PATCH 05/17] update all core instances referring to appMetadata --- packages/core/src/store/actions.ts | 1 - .../account-center/AccountCenterPanel.svelte | 24 +++++++++++-------- .../AcctCenterTriggerLarge.svelte | 10 +++++--- .../AcctCenterTriggerSmall.svelte | 8 ++++--- .../core/src/views/connect/Agreement.svelte | 10 +++++--- .../src/views/connect/ConnectedWallet.svelte | 11 +++++---- .../src/views/connect/ConnectingWallet.svelte | 9 ++++--- packages/core/src/views/connect/Index.svelte | 2 -- .../src/views/connect/InstallWallet.svelte | 18 +++++++------- .../core/src/views/connect/Sidebar.svelte | 19 ++++++++------- 10 files changed, 66 insertions(+), 46 deletions(-) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index dcd4d43b5..b813ec2e0 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -445,7 +445,6 @@ export function updateTheme(theme: Theme): void { export function updateAppMetadata( update: AppMetadata| Partial ): void { - console.log('update', update) const error = validateAppMetadataUpdate(update) if (error) { diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte index 105308402..20892c14e 100644 --- a/packages/core/src/views/account-center/AccountCenterPanel.svelte +++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte @@ -23,6 +23,7 @@ import DisconnectAllConfirm from './DisconnectAllConfirm.svelte' import { configuration } from '../../configuration.js' import SecondaryTokenTable from './SecondaryTokenTable.svelte' + import { shareReplay, startWith } from 'rxjs' export let expanded: boolean @@ -31,7 +32,6 @@ } const { chains: appChains } = state.get() - const { appMetadata } = configuration let disconnectConfirmModal = false let hideWalletRowMenu: () => void @@ -52,6 +52,10 @@ connectedChain && connectedChain.id ) + const appMetadata$ = state + .select('appMetadata') + .pipe(startWith(state.get().appMetadata), shareReplay(1)) + const { position } = state.get().accountCenter const { device } = configuration @@ -393,7 +397,7 @@
- {#if appMetadata} + {#if $appMetadata$}
@@ -403,21 +407,21 @@ background="white" border="black" radius={8} - icon={(appMetadata && appMetadata.icon) || questionIcon} + icon={($appMetadata$ && $appMetadata$.icon) || questionIcon} />
- {(appMetadata && appMetadata.name) || 'App Name'} + {($appMetadata$ && $appMetadata$.name) || 'App Name'}
- {(appMetadata && appMetadata.description) || + {($appMetadata$ && $appMetadata$.description) || 'This app has not added a description.'}
- {#if appMetadata.gettingStartedGuide || appMetadata.explore} + {#if $appMetadata$.gettingStartedGuide || $appMetadata$.explore}
{$_('accountCenter.appInfo', { @@ -425,7 +429,7 @@ })}
- {#if appMetadata.gettingStartedGuide} + {#if $appMetadata$.gettingStartedGuide}
{$_('accountCenter.learnMore', { @@ -433,7 +437,7 @@ })}
@@ -444,7 +448,7 @@
{/if} - {#if appMetadata.explore} + {#if $appMetadata$.explore}
{$_('accountCenter.smartContracts', { @@ -452,7 +456,7 @@ })}
diff --git a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte index f085a27e0..a89a92a44 100644 --- a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte +++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte @@ -14,11 +14,15 @@ SuccessStatusIcon } from '../shared/index.js' import { state } from '../../store/index.js' - import { configuration } from '../../configuration.js' + import { shareReplay, startWith } from 'rxjs' export let toggle: () => void - const { appMetadata } = configuration - const appIcon = (appMetadata && appMetadata.icon) || questionIcon + + const appMetadata$ = state + .select('appMetadata') + .pipe(startWith(state.get().appMetadata), shareReplay(1)) + + const appIcon = ($appMetadata$ && $appMetadata$.icon) || questionIcon const chains = state.get().chains $: [primaryWallet] = $wallets$ diff --git a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte index 456f36069..0f4a82cb6 100644 --- a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte +++ b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte @@ -4,12 +4,14 @@ import { questionIcon } from '../../icons/index.js' import { WalletAppBadge, SuccessStatusIcon } from '../shared/index.js' import { state } from '../../store/index.js' - import { configuration } from '../../configuration.js' export let toggle: () => void - const { appMetadata } = configuration - const appIcon = (appMetadata && appMetadata.icon) || questionIcon + const appMetadata$ = state + .select('appMetadata') + .pipe(startWith(state.get().appMetadata), shareReplay(1)) + + const appIcon = ($appMetadata$ && $appMetadata$.icon) || questionIcon $: [primaryWallet] = $wallets$ diff --git a/packages/core/src/views/connect/Agreement.svelte b/packages/core/src/views/connect/Agreement.svelte index e08433dab..f5d1eeeef 100644 --- a/packages/core/src/views/connect/Agreement.svelte +++ b/packages/core/src/views/connect/Agreement.svelte @@ -1,8 +1,9 @@