Merge pull request #1904 from blocknative/release/2.24.10

Release 2.24.10

Author: Adamj1232

docs/package.json

@@ -55,7 +55,7 @@
     "@web3-onboard/blocto": "^2.0.0",
     "@web3-onboard/cede-store": "^2.1.0",
     "@web3-onboard/coinbase": "^2.2.5",
-    "@web3-onboard/core": "^2.21.0",
+    "@web3-onboard/core": "^2.21.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.4",
     "@web3-onboard/fortmatic": "^2.0.19",
@@ -64,7 +64,7 @@
     "@web3-onboard/gas": "^2.1.8",
     "@web3-onboard/gnosis": "^2.1.10",
     "@web3-onboard/infinity-wallet": "^2.0.4",
-    "@web3-onboard/injected-wallets": "^2.10.2",
+    "@web3-onboard/injected-wallets": "^2.10.6",
     "@web3-onboard/keepkey": "^2.3.7",
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "^2.5.1",

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -156,14 +156,15 @@ type Chain = {
   namespace?: 'evm' // string indicating chain namespace. Defaults to 'evm' but will allow other chain namespaces in the future
   // PLEASE NOTE: Some wallets require an rpcUrl, label, and token for actions such as adding a new chain.
   // It is recommended to include rpcUrl, label, and token for full functionality.
-  rpcUrl?: string // Recommended to include. Used for network requests.
+  rpcUrl?: string // Recommended to include. Used for network requests (eg Alchemy or Infura end point).
   label?: string // Recommended to include. Used for display, eg Ethereum Mainnet.
   token?: TokenSymbol // Recommended to include. The native token symbol, eg ETH, BNB, MATIC.
   color?: string // the color used to represent the chain and will be used as a background for the icon
   icon?: string // the icon to represent the chain
   publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet
   blockExplorerUrl?: string // also used when adding a new config to the wallet
   secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
+  protectedRpcUrl?: string //An optional protected RPC URL - Defaults to Blocknative's private RPC aggregator to allow users to update the chain RPC within their wallet, specifically for private RPCs that protect user transactions. More information can be found at `https://docs.blocknative.com/blocknative-mev-protection/transaction-boost`
 }
 
 interface SecondaryTokens {
@@ -415,6 +416,13 @@ type AccountCenter = {
    * Can be set as a global for Account Center or per interface (desktop/mobile)
    */
   hideTransactionProtectionBtn?: boolean
+  /**
+   * defaults to
+   * `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
+   * Use this property to override the default link to give users
+   * more information about transaction protection and the RPC be set
+   */
+  transactionProtectionInfoLink?: string
   /**
    * @deprecated Use top level containerElements property
    * with the accountCenter prop set to the desired container El. See documentation below

docs/src/routes/docs/[...4]wallets/[...11]injected/+page.md

@@ -299,7 +299,7 @@ const injected = injectedModule({
 - Trust - _Desktop & Mobile_
 - SafePal - _Desktop & Mobile_
 - Zerion - _Desktop & Mobile_
-- OKX Wallet - _Desktop_
+- OKX Wallet - _Desktop & Mobile_
 - Taho (Previously named Tally Ho wallet) - _Desktop_
 - Opera - _Desktop & Mobile_
 - Status - _Mobile_
@@ -345,6 +345,7 @@ const injected = injectedModule({
 - Ronin Wallet - _Desktop & Mobile_
 - Coin98 Wallet - _Desktop & Mobile_
 - SubWallet - _Desktop & Mobile_
+- Kayros - _Desktop_
 
 ## Build Environments
 

docs/src/routes/examples/[...1]connect-wallet/+page.md

@@ -171,7 +171,7 @@ const appMetadata = {
 
 const web3Onboard = init({
   wallets,
-  chains
+  chains,
   appMetadata
 })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.24.9",
+  "version": "2.24.10",
   "private": true,
   "workspaces": {
     "packages": [

packages/core/README.md

@@ -148,6 +148,7 @@ type Chain = {
   publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet
   blockExplorerUrl?: string // also used when adding a new config to the wallet
   secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled)
+  protectedRpcUrl?: string //An optional protected RPC URL - Defaults to Blocknative's private RPC aggregator to allow users to update the chain RPC within their wallet, specifically for private RPCs that protect user transactions. More information can be found at `https://docs.blocknative.com/blocknative-mev-protection/transaction-boost`
 }
 interface SecondaryTokens {
   /**
@@ -363,6 +364,16 @@ type AccountCenter = {
   position?: AccountCenterPosition // default: 'bottomRight'
   expanded?: boolean // default: true
   minimal?: boolean // enabled by default for mobile
+  /**
+   * Controls the visibility of the 'Enable Transaction Protection' button within the expanded Account Center.
+   * - When set to false (default), the button is visible.
+   * - When set to true, the button is hidden.
+   * This setting can be configured globally for the Account Center, or separately for different interfaces like desktop/mobile.
+   * defaults to `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
+   * Use this property to override the default link to give users
+   * more information about transaction protection and the RPC be set
+   */
+  transactionProtectionInfoLink?: string
 
   /**
    * @deprecated Use top level containerElements property
@@ -381,6 +392,16 @@ type AccountCenterOptions = {
    * Can be set as a global for Account Center or per interface (desktop/mobile)
    */
   hideTransactionProtectionBtn?: boolean
+  /**
+   * Controls the visibility of the 'Enable Transaction Protection' button within the expanded Account Center.
+   * - When set to false (default), the button is visible.
+   * - When set to true, the button is hidden.
+   * This setting can be configured globally for the Account Center, or separately for different interfaces like desktop/mobile.
+   * defaults to `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
+   * Use this property to override the default link to give users
+   * more information about transaction protection and the RPC be set
+   */
+  transactionProtectionInfoLink?: string
 }
 
 type AccountCenterPosition =

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.21.0",
+  "version": "2.21.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",

packages/core/src/constants.ts

@@ -37,4 +37,5 @@ export const STORAGE_KEYS = {
 
 export const MOBILE_WINDOW_WIDTH = 768
 
-export const BN_PROTECT_RPC_URL = 'https://rpc.blocknative.com/protect'
+export const BN_BOOST_RPC_URL = 'https://rpc.blocknative.com/boost'
+export const BN_BOOST_INFO_URL = 'https://docs.blocknative.com/blocknative-mev-protection/transaction-boost'

packages/core/src/i18n/en.json

@@ -62,7 +62,8 @@
     },
     "confirmTransactionProtection": {
       "heading": "Enable Transaction Protection",
-      "description": "Protect RPC Endpoints hide your transactions from front-running and sandwich bots to reduce unfavorable transaction settlement from slippage.",
+      "description": "Protect RPC endpoints hide your transaction from front-running and sandwich bots.",
+      "link": "Learn more",
       "enable": "Enable",
       "dismiss": "Dismiss"
     }

packages/core/src/index.ts

@@ -127,18 +127,21 @@ function init(options: InitOptions): OnboardAPI {
   // update accountCenter
   if (typeof accountCenter !== 'undefined') {
     let accountCenterUpdate
-    const { hideTransactionProtectionBtn } = accountCenter
+    const { hideTransactionProtectionBtn, transactionProtectionInfoLink } =
+      accountCenter
 
     if (device.type === 'mobile') {
       accountCenterUpdate = {
         ...APP_INITIAL_STATE.accountCenter,
         hideTransactionProtectionBtn,
+        transactionProtectionInfoLink,
         ...(accountCenter.mobile ? accountCenter.mobile : {})
       }
     } else if (accountCenter.desktop) {
       accountCenterUpdate = {
         ...APP_INITIAL_STATE.accountCenter,
         hideTransactionProtectionBtn,
+        transactionProtectionInfoLink,
         ...accountCenter.desktop
       }
     }

packages/core/src/provider.ts

@@ -211,11 +211,15 @@ export function trackWallet(
         )
         const account = accounts.find(account => account.address === address)
 
+        const ensChain = chains.find(
+          ({ id }) => id === validEnsChain(connectedWalletChain.id)
+        )
+
         const ensProm =
           account && account.ens
             ? Promise.resolve(account.ens)
-            : validEnsChain(connectedWalletChain.id)
-            ? getEns(address, chain)
+            : ensChain
+            ? getEns(address, ensChain)
             : Promise.resolve(null)
 
         const unsProm =
@@ -320,13 +324,16 @@ export function trackWallet(
               address,
               chain
             )
+            const ensChain = chains.find(
+              ({ id }) => id === validEnsChain(chainId)
+            )
 
-            const ensProm = validEnsChain(chainId)
-              ? getEns(address, chain)
+            const ensProm = ensChain
+              ? getEns(address, ensChain)
               : Promise.resolve(null)
 
             const unsProm = validEnsChain(chainId)
-              ? getUns(address, chain)
+              ? getUns(address, ensChain)
               : Promise.resolve(null)
 
             const [balance, ens, uns, secondaryTokens] = await Promise.all([

packages/core/src/types.ts

@@ -249,7 +249,7 @@ export type ConnectModalOptions = {
    */
   removeWhereIsMyWalletWarning?: boolean
   /**
-   * Hide the "I don't have a wallet" link displayed 
+   * Hide the "I don't have a wallet" link displayed
    * on the left panel of the connect modal
    */
   removeIDontHaveAWalletInfoLink?: boolean
@@ -281,6 +281,19 @@ export type AccountCenter = {
    * Can be set as a global for Account Center or per interface (desktop/mobile)
    */
   hideTransactionProtectionBtn?: boolean
+  /**
+   * Controls the visibility of the 'Enable Transaction Protection' button 
+   * within the expanded Account Center.
+   * - When set to false (default), the button is visible.
+   * - When set to true, the button is hidden.
+   * This setting can be configured globally for the Account Center, or 
+   * separately for different interfaces like desktop/mobile.
+   * defaults to 
+   * `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
+   * Use this property to override the default link to give users
+   * more information about transaction protection and the RPC be set
+   */
+  transactionProtectionInfoLink?: string
   position?: AccountCenterPosition
   expanded?: boolean
   minimal?: boolean
@@ -294,6 +307,19 @@ export type AccountCenter = {
 export type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
+  /**
+   * Controls the visibility of the 'Enable Transaction Protection' button 
+   * within the expanded Account Center.
+   * - When set to false (default), the button is visible.
+   * - When set to true, the button is hidden.
+   * This setting can be configured globally for the Account Center, or 
+   * separately for different interfaces like desktop/mobile.
+   * defaults to 
+   * `docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
+   * Use this property to override the default link to give users
+   * more information about transaction protection and the RPC be set
+   */
+  transactionProtectionInfoLink?: string
   /**
    * false by default - This allows removal of the
    * Enable Transaction Protection' button within the Account Center

packages/core/src/utils.ts

@@ -62,15 +62,21 @@ export function getDevice(): Device | DeviceNotBrowser {
 export const notNullish = <T>(value: T | null | undefined): value is T =>
   value != null
 
-export function validEnsChain(chainId: ChainId): boolean {
+export function validEnsChain(chainId: ChainId): ChainId | null {
+  // return L2s as Eth for ens resolution
   switch (chainId) {
     case '0x1':
-    case '0x3':
-    case '0x4':
-    case '0x5':
-      return true
+    case '0x89': // Polygon
+    case '0xa': //Optimism
+    case '0xa4b1': // Arb
+    case '0x144': // zksync
+      return '0x1'
+    case '0x5': // Goerli
+      return chainId
+    case '0xaa36a7': // Sepolia
+      return chainId
     default:
-      return false
+      return null
   }
 }
 

packages/core/src/validation.ts

@@ -183,7 +183,8 @@ const accountCenterInitOptions = Joi.object({
   position: commonPositions,
   minimal: Joi.boolean(),
   containerElement: Joi.string(),
-  hideTransactionProtectionBtn: Joi.boolean()
+  hideTransactionProtectionBtn: Joi.boolean(),
+  transactionProtectionInfoLink: Joi.string()
 })
 
 const accountCenter = Joi.object({
@@ -192,6 +193,7 @@ const accountCenter = Joi.object({
   expanded: Joi.boolean(),
   minimal: Joi.boolean(),
   hideTransactionProtectionBtn: Joi.boolean(),
+  transactionProtectionInfoLink: Joi.string(),
   containerElement: Joi.string()
 })
 
@@ -235,7 +237,8 @@ const initOptions = Joi.object({
   accountCenter: Joi.object({
     desktop: accountCenterInitOptions,
     mobile: accountCenterInitOptions,
-    hideTransactionProtectionBtn: Joi.boolean()
+    hideTransactionProtectionBtn: Joi.boolean(),
+    transactionProtectionInfoLink: Joi.string()
   }),
   notify: [notifyOptions, notify],
   gas: Joi.object({
@@ -255,14 +258,13 @@ const initOptions = Joi.object({
 })
 
 const connectOptions = Joi.object({
-  autoSelect: Joi.alternatives()
-    .try(
-      Joi.object({
-        label: Joi.string().required(),
-        disableModals: Joi.boolean()
-      }),
-      Joi.string()
-    )
+  autoSelect: Joi.alternatives().try(
+    Joi.object({
+      label: Joi.string().required(),
+      disableModals: Joi.boolean()
+    }),
+    Joi.string()
+  )
 })
 
 const disconnectOptions = Joi.object({

packages/core/src/views/account-center/AccountCenterPanel.svelte

@@ -2,6 +2,8 @@
   import { _ } from 'svelte-i18n'
   import { fly } from 'svelte/transition'
   import { quartOut } from 'svelte/easing'
+  import { shareReplay, startWith } from 'rxjs'
+
   import { wallets$ } from '../../streams.js'
   import en from '../../i18n/en.json'
   import WalletRow from './WalletRow.svelte'
@@ -22,12 +24,11 @@
   import shieldIcon from '../../icons/shield-icon.js'
   import { poweredByBlocknative } from '../../icons/index.js'
   import DisconnectAllConfirm from './DisconnectAllConfirm.svelte'
-  import EnableTransactionProtection from './EnableTransactionProtection.svelte'
+  import EnableTransactionProtectionModal from './EnableTransactionProtectionModal.svelte'
   import { configuration } from '../../configuration.js'
   import SecondaryTokenTable from './SecondaryTokenTable.svelte'
-  import { shareReplay, startWith } from 'rxjs'
   import { updateChainRPC } from '../../provider.js'
-  import { BN_PROTECT_RPC_URL } from '../../constants.js'
+  import { BN_BOOST_RPC_URL, BN_BOOST_INFO_URL } from '../../constants.js'
 
   export let expanded: boolean
 
@@ -75,7 +76,7 @@
       await updateChainRPC(
         primaryWallet.provider,
         validAppChain,
-        BN_PROTECT_RPC_URL
+        validAppChain?.protectedRpcUrl || BN_BOOST_RPC_URL
       )
       enableTransactionProtection = false
     } catch (error) {
@@ -328,9 +329,11 @@
   />
 {/if}
 {#if enableTransactionProtection}
-  <EnableTransactionProtection
+  <EnableTransactionProtectionModal
     onDismiss={() => (enableTransactionProtection = false)}
     onEnable={() => enableProtectionRPC()}
+    infoLink={$accountCenter$.transactionProtectionInfoLink ||
+      BN_BOOST_INFO_URL}
   />
 {/if}
 
@@ -457,8 +460,8 @@
             </div>
           </div>
         </div>
-        <!-- Only display on Eth Mainnet -->
-        {#if !$accountCenter$.hideTransactionProtectionBtn && primaryWalletOnMainnet}
+        <!-- Only display on Eth Mainnet if protectedRpcUrl is not set per chain -->
+        {#if !$accountCenter$.hideTransactionProtectionBtn && (primaryWalletOnMainnet || validAppChain?.protectedRpcUrl)}
           <div
             on:click={() => (enableTransactionProtection = true)}
             class="protect action-container flex items-center pointer"