Update - Protect endpoint to bn_boost, bump versions of core, react and vue

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

@@ -164,6 +164,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 founr at `https://docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
 }
 
 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

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 founr at `https://docs.blocknative.com/blocknative-mev-protection/transaction-boost-alpha`
 }
 interface SecondaryTokens {
   /**
@@ -363,6 +364,20 @@ type AccountCenter = {
   position?: AccountCenterPosition // default: 'bottomRight'
   expanded?: boolean // default: true
   minimal?: boolean // enabled by default for mobile
+  /**
+   * false by default - This allows removal of the
+   * Enable Transaction Protection' button within the Account Center
+   * expanded when set to true
+   * 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
@@ -381,6 +396,13 @@ type AccountCenterOptions = {
    * 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
 }
 
 type AccountCenterPosition =

packages/core/package.json

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

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-alpha'

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/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,13 @@ export 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
   position?: AccountCenterPosition
   expanded?: boolean
   minimal?: boolean
@@ -294,6 +301,13 @@ export type AccountCenter = {
 export type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
+  /**
+   * 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/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"

packages/core/src/views/account-center/EnableTransactionProtection.svelte → packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte

@@ -6,14 +6,15 @@
 
   export let onEnable: () => void
   export let onDismiss: () => void
+  export let infoLink: string
 </script>
 
 <style>
   .content {
     --background-color: var(--w3o-background-color);
     --text-color: var(--w3o-text-color);
     --action-color: var(--w3o-action-color, var(--primary-500));
-    
+
     font-size: 1rem;
     line-height: 1.5rem;
 
@@ -33,7 +34,7 @@
     width: 3rem;
     height: 3rem;
     border-radius: 24px;
-    padding: .75rem;
+    padding: 0.75rem;
     background: none;
   }
   .icon-container::before {
@@ -85,6 +86,15 @@
       </div>
       <div>
         {$_('modals.confirmTransactionProtection.description')}
+        <a
+          href={infoLink}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="no-link"
+          >{$_('modals.confirmTransactionProtection.link', {
+            default: en.modals.confirmTransactionProtection.link
+          })}
+        </a>
       </div>
     </div>
 

packages/demo/package.json

@@ -31,7 +31,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-alpha.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.3",
     "@web3-onboard/fortmatic": "^2.0.18",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.11",
+  "version": "2.8.12-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",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.3.3",
-    "@web3-onboard/core": "^2.21.0",
+    "@web3-onboard/core": "^2.21.1-alpha.1",
     "use-sync-external-store": "1.0.0"
   },
   "peerDependencies": {

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.10",
+  "version": "2.7.11-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 standardized 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.3.3",
-    "@web3-onboard/core": "^2.21.0",
+    "@web3-onboard/core": "^2.21.1-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {