blocknative · leightkt · Jun 16, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 14, 2023
diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -223,6 +223,18 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`updateAppMetadata`**
+
+If you need to update your Application Metadata after initialization, you can call the `updateAppMetadata` function with the new configuration
+
+```typescript
+onboard.state.actions.updateAppMetadata({
+  logo: `<svg width="100%" height="100%" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L0.0100002 6L4 10L0.0100002 14.01L0 20H12V14L8 10L12 6.01V0H0ZM10 14.5V18H2V14.5L6 10.5L10 14.5Z" fill="#929BED"/>
+  </svg>`,
+  description: 'Updated Description!'
+})
+```
+
 ---
 
 #### connect

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -4437,10 +4437,10 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
-"@web3-onboard/blocto@^2.0.0":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@web3-onboard/blocto/-/blocto-2.0.0-alpha.1.tgz#8781646d98520b80be090c622e218b9dfea12221"
-  integrity sha512-YBhsjkVdL6Z/SXoQeFNt5Rjj1WxlXg1oKOBOZOqfioPuMwmi8RJOLcLi7evhVUdGs5T8sYCBWg+eDeA/K6XK7w==
+"@web3-onboard/blocto@^2.0.0-alpha.1":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/blocto/-/blocto-2.0.0.tgz#eb631e911b7c13ad11089bb3574e97b673f14463"
+  integrity sha512-99/YzRuE9VBXWVLI6tAKxwFvCXq7WV24a3rM76yY5yVEEeNfewh8PWQ/2Yfz71Vfi6YWVPKzGo3LHspz4caTzA==
   dependencies:
     "@blocto/sdk" "^0.4.6"
     "@web3-onboard/common" "^2.3.1"

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -193,6 +193,20 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`updateAppMetadata`**
+
+If you need to update your Application Metadata after initialization, you can call the `updateAppMetadata` function with the new configuration
+
+```typescript
+onboard.state.actions.updateAppMetadata({
+  logo: `<svg width="100%" height="100%" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L0.0100002 6L4 10L0.0100002 14.01L0 20H12V14L8 10L12 6.01V0H0ZM10 14.5V18H2V14.5L6 10.5L10 14.5Z" fill="#929BED"/>
+  </svg>`,
+  description: 'Updated Description!'
+})
+```
+
+---
+
 **`connect`**
 An object that allows for customization of the Connect Modal and accepts the type ConnectModalOptions.
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.20.2",
+  "version": "2.20.3-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/configuration.ts b/packages/core/src/configuration.ts
@@ -3,7 +3,6 @@ import { getDevice } from './utils.js'
 
 export let configuration: Configuration = {
   svelteInstance: null,
-  appMetadata: null,
   apiKey: null,
   device: getDevice(),
   initialWalletInit: [],

diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -26,7 +26,8 @@ export const APP_INITIAL_STATE: AppState = {
   connect: {
     showSidebar: true,
     disableClose: false
-  }
+  },
+  appMetadata: null,
 }
 
 export const STORAGE_KEYS = {

diff --git 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
     }
   }
 }
@@ -92,7 +94,7 @@ function init(options: InitOptions): OnboardAPI {
   const {
     wallets,
     chains,
-    appMetadata = null,
+    appMetadata,
     i18n,
     accountCenter,
     apiKey,
@@ -208,7 +210,6 @@ function init(options: InitOptions): OnboardAPI {
   const app = svelteInstance || mountApp(theme, disableFontDownload)
 
   updateConfiguration({
-    appMetadata,
     svelteInstance: app,
     apiKey,
     initialWalletInit: wallets,
@@ -217,6 +218,8 @@ function init(options: InitOptions): OnboardAPI {
     unstoppableResolution
   })
 
+  appMetadata && updateAppMetadata(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
@@ -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<AppMetadata>
+): 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
@@ -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
@@ -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,18 @@ function reducer(state: AppState, action: Action): AppState {
       }
     }
 
+    case UPDATE_APP_METADATA: {
+      const update = payload as UpdateAppMetadataAction['payload']
+
+      return {
+        ...state,
+        appMetadata: {
+          ...state.appMetadata,
+          ...update
+        }
+      }
+    }
+
     case RESET_STORE:
       return APP_INITIAL_STATE
 

diff --git 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,
+  appMetadata: AppMetadata
 }
 
 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<AppMetadata>
+}
+
 // ==== MISC ==== //
 export type ChainStyle = {
   icon: string

diff --git 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<AppMetadata>
+): ValidateReturn {
+  return validate(appMetadataUpdate, data)
+}
diff --git 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
 </script>
@@ -393,7 +397,7 @@
 
         <!-- app info section -->
         <div class="app-info-container">
-          {#if appMetadata}
+          {#if $appMetadata$}
             <div class="flex items-start app-info-header">
               <!-- app icon -->
               <div class="relative flex app-icon-name">
@@ -403,37 +407,37 @@
                   background="white"
                   border="black"
                   radius={8}
-                  icon={(appMetadata && appMetadata.icon) || questionIcon}
+                  icon={($appMetadata$ && $appMetadata$.icon) || questionIcon}
                 />
                 <div class="app-name">
-                  {(appMetadata && appMetadata.name) || 'App Name'}
+                  {($appMetadata$ && $appMetadata$.name) || 'App Name'}
                 </div>
               </div>
 
               <div class="app-description">
-                {(appMetadata && appMetadata.description) ||
+                {($appMetadata$ && $appMetadata$.description) ||
                   'This app has not added a description.'}
               </div>
             </div>
 
             <!-- app info -->
-            {#if appMetadata.gettingStartedGuide || appMetadata.explore}
+            {#if $appMetadata$ && ($appMetadata$.gettingStartedGuide || $appMetadata$.explore)}
               <div class="app-info">
                 <div class="app-info-heading">
                   {$_('accountCenter.appInfo', {
                     default: en.accountCenter.appInfo
                   })}
                 </div>
 
-                {#if appMetadata.gettingStartedGuide}
+                {#if $appMetadata$.gettingStartedGuide}
                   <div class="flex justify-between items-center w100">
                     <div>
                       {$_('accountCenter.learnMore', {
                         default: en.accountCenter.learnMore
                       })}
                     </div>
                     <a
-                      href={appMetadata.gettingStartedGuide}
+                      href={$appMetadata$.gettingStartedGuide}
                       target="_blank"
                       rel="noreferrer noopener"
                     >
@@ -444,15 +448,15 @@
                   </div>
                 {/if}
 
-                {#if appMetadata.explore}
+                {#if $appMetadata$.explore}
                   <div class="flex justify-between items-center w100">
                     <div>
                       {$_('accountCenter.smartContracts', {
                         default: en.accountCenter.smartContracts
                       })}
                     </div>
                     <a
-                      href={appMetadata.explore}
+                      href={$appMetadata$.explore}
                       target="_blank"
                       rel="noreferrer noopener"
                     >