diff --git a/docs/package.json b/docs/package.json index c87cf783e..9e3dc201f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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.5", "@web3-onboard/keepkey": "^2.3.7", "@web3-onboard/keystone": "^2.3.7", "@web3-onboard/ledger": "^2.5.1", diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md index 9de1946b5..edd16b555 100644 --- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md +++ b/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 found 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 diff --git a/packages/core/README.md b/packages/core/README.md index ee5e30996..3040653d5 100644 --- a/packages/core/README.md +++ b/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-alpha` } 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 = diff --git a/packages/core/package.json b/packages/core/package.json index 3237e2e34..ac1aacf36 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index e4a0e7989..37bef5ba4 100644 --- a/packages/core/src/constants.ts +++ b/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' diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json index a36ccf079..d5d2d7658 100644 --- a/packages/core/src/i18n/en.json +++ b/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" } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 8f14541b8..f125cd856 100644 --- a/packages/core/src/index.ts +++ b/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 } } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 533d6ad5a..bdeb047ae 100644 --- a/packages/core/src/types.ts +++ b/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 mobile: Omit + /** + * 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 diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index f60456501..d1b39cd2c 100644 --- a/packages/core/src/validation.ts +++ b/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({ diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte index 1d60454ed..1342cb45d 100644 --- a/packages/core/src/views/account-center/AccountCenterPanel.svelte +++ b/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 = false)} onEnable={() => enableProtectionRPC()} + infoLink={$accountCenter$.transactionProtectionInfoLink || + BN_BOOST_INFO_URL} /> {/if} @@ -457,8 +460,8 @@ - - {#if !$accountCenter$.hideTransactionProtectionBtn && primaryWalletOnMainnet} + + {#if !$accountCenter$.hideTransactionProtectionBtn && (primaryWalletOnMainnet || validAppChain?.protectedRpcUrl)}
(enableTransactionProtection = true)} class="protect action-container flex items-center pointer" diff --git a/packages/core/src/views/account-center/EnableTransactionProtection.svelte b/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte similarity index 87% rename from packages/core/src/views/account-center/EnableTransactionProtection.svelte rename to packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte index 642beaa91..78782189e 100644 --- a/packages/core/src/views/account-center/EnableTransactionProtection.svelte +++ b/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte @@ -6,6 +6,7 @@ export let onEnable: () => void export let onDismiss: () => void + export let infoLink: string