Feat: Private/custom rpc flow

packages/cede-store/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/cede-store",
- "version": "2.0.1",
+ "version": "2.0.2-alpha.1",
  "description": "cede.store SDK wallet module for connecting to Web3-Onboard. 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, 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",
@@ -70,6 +70,6 @@
  },
  "dependencies": {
  "@cedelabs/providers": "^0.0.7",
- "@web3-onboard/common": "^2.3.2"
+ "@web3-onboard/common": "^2.3.3-alpha.1"
  }
 }

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/coinbase",
- "version": "2.2.3",
+ "version": "2.2.4-alpha.1",
  "description": "Coinbase SDK wallet module for connecting to Web3-Onboard. 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, 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",
@@ -59,6 +59,6 @@
  },
  "dependencies": {
  "@coinbase/wallet-sdk": "^3.6.0",
- "@web3-onboard/common": "^2.3.2"
+ "@web3-onboard/common": "^2.3.3-alpha.1"
  }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/common",
- "version": "2.3.2",
+ "version": "2.3.3-alpha.1",
  "description": "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, 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/common/src/types.ts

@@ -421,6 +421,11 @@ export interface Chain {
  providerConnectionInfo?: ConnectionInfo
  /* An optional public RPC used when adding a new chain config to the wallet */
  publicRpcUrl?: string
+ /** An optional protected RPC URL - Defaults to Blocknative's private and 
+ * protected RPC to allow users to update the chain RPC within their wallet, 
+ * specifically for private RPCs that protect user transactions
+ */
+ protectedRpcUrl?: string
  /* Also used when adding a new config to the wallet */
  blockExplorerUrl?: string
 }

packages/common/src/validation.ts

@@ -49,6 +49,7 @@ export const chainValidation = Joi.object({
  icon: Joi.string(),
  color: Joi.string(),
  publicRpcUrl: Joi.string(),
+ protectedRpcUrl: Joi.string(),
  blockExplorerUrl: Joi.string(),
  providerConnectionInfoValidation
 })

packages/core/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/core",
- "version": "2.18.0",
+ "version": "2.19.0-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",
@@ -85,7 +85,7 @@
  "typescript": "^4.5.5"
  },
  "dependencies": {
- "@web3-onboard/common": "^2.3.2",
+ "@web3-onboard/common": "^2.3.3-alpha.1",
  "bignumber.js": "^9.0.0",
  "bnc-sdk": "^4.6.7",
  "bowser": "^2.11.0",

packages/core/src/constants.ts

@@ -36,3 +36,5 @@ export const STORAGE_KEYS = {
 }
 
 export const MOBILE_WINDOW_WIDTH = 768
+
+export const BN_PROTECT_RPC_URL = 'https://www.api.blocknative.com/protect'

packages/core/src/i18n/en.json

@@ -56,12 +56,19 @@
  "description": "Are you sure that you would like to disconnect all your wallets?",
  "confirm": "Confirm",
  "cancel": "Cancel"
+ },
+ "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.",
+ "enable": "Enable",
+ "dismiss": "Dismiss"
  }
  },
  "accountCenter": {
  "connectAnotherWallet": "Connect another Wallet",
  "disconnectAllWallets": "Disconnect all Wallets",
  "currentNetwork": "Current Network",
+ "enableTransactionProtection": "Enable Transaction Protection",
  "appInfo": "App Info",
  "learnMore": "Learn More",
  "gettingStartedGuide": "Getting Started Guide",

packages/core/src/icons/shield-icon.ts

@@ -0,0 +1,4 @@
+export default `<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99998 17.3125C5.05553 16.8264 3.45831 15.6979 2.20831 13.9271C0.958313 12.1562 0.333313 10.2153 0.333313 8.10417V3.14583L6.99998 0.645833L13.6666 3.14583V8.10417C13.6666 10.2153 13.0416 12.1562 11.7916 13.9271C10.5416 15.6979 8.94442 16.8264 6.99998 17.3125ZM5.12498 12.3333H8.87498C9.05553 12.3333 9.20484 12.2743 9.3229 12.1562C9.44095 12.0382 9.49998 11.8889 9.49998 11.7083V8.79167C9.49998 8.61111 9.44095 8.46181 9.3229 8.34375C9.20484 8.22569 9.05553 8.16667 8.87498 8.16667H8.66665V7.33333C8.66665 6.875 8.50345 6.48264 8.17706 6.15625C7.85067 5.82986 7.45831 5.66667 6.99998 5.66667C6.54165 5.66667 6.14928 5.82986 5.8229 6.15625C5.49651 6.48264 5.33331 6.875 5.33331 7.33333V8.16667H5.12498C4.94442 8.16667 4.79512 8.22569 4.67706 8.34375C4.55901 8.46181 4.49998 8.61111 4.49998 8.79167V11.7083C4.49998 11.8889 4.55901 12.0382 4.67706 12.1562C4.79512 12.2743 4.94442 12.3333 5.12498 12.3333ZM5.95831 8.16667V7.33333C5.95831 7.05556 6.06248 6.82292 6.27081 6.63542C6.47915 6.44792 6.7222 6.35417 6.99998 6.35417C7.27776 6.35417 7.52081 6.44792 7.72915 6.63542C7.93748 6.82292 8.04165 7.05556 8.04165 7.33333V8.16667H5.95831Z" fill="#929BED"/>
+</svg>
+`

packages/core/src/provider.ts

@@ -471,6 +471,31 @@ export function addNewChain(
  })
 }
 
+export function updateChainRPC(
+ provider: EIP1193Provider,
+ chain: Chain,
+ rpcUrl?: string
+): Promise<unknown> {
+ return provider.request({
+ method: 'wallet_addEthereumChain',
+ params: [
+ {
+ chainId: chain.id,
+ chainName: chain.label,
+ nativeCurrency: {
+ name: chain.label,
+ symbol: chain.token,
+ decimals: 18
+ },
+ rpcUrls: [rpcUrl],
+ blockExplorerUrls: chain.blockExplorerUrl
+ ? [chain.blockExplorerUrl]
+ : undefined
+ }
+ ]
+ })
+}
+
 export async function getPermissions(
  provider: EIP1193Provider
 ): Promise<WalletPermission[]> {

packages/core/src/types.ts

@@ -263,6 +263,12 @@ export type NotificationPosition = CommonPositions
 
 export type AccountCenter = {
  enabled: boolean
+ /**
+ * false by default - This allows removal of the 
+ * Enable Transaction Protection' button within the Account Center 
+ * expanded when set to true
+ */
+ disableProtectedRpc?: boolean
  position?: AccountCenterPosition
  expanded?: boolean
  minimal?: boolean

packages/core/src/validation.ts

@@ -176,6 +176,7 @@ const accountCenter = Joi.object({
  position: commonPositions,
  expanded: Joi.boolean(),
  minimal: Joi.boolean(),
+ disableProtectedRpc: Joi.boolean(),
  containerElement: Joi.string()
 })
 
@@ -263,6 +264,7 @@ const setChainOptions = Joi.object({
  rpcUrl: Joi.string(),
  label: Joi.string(),
  token: Joi.string(),
+ protectedRpcUrl: Joi.string(),
  secondaryTokens: Joi.array().max(5).items(secondaryTokenValidation).optional()
 })
 

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+ import { _ } from 'svelte-i18n'
+ import { Modal } from '../shared'
+ import en from '../../i18n/en.json'
+ import shieldIcon from '../../icons/shield-icon.js'
+
+ export let onEnable: () => void
+ export let onDismiss: () => void
+</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;
+
+ display: flex;
+ flex-flow: column;
+ gap: 1.5rem;
+ padding: 1rem;
+ max-width: 320px;
+
+ background: var(--background-color);
+ color: var(--text-color);
+ }
+
+ .icon-container {
+ position: relative;
+ overflow: hidden;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 24px;
+ padding: .75rem;
+ background: none;
+ }
+ .icon-container::before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ opacity: 0.2;
+ background: var(--action-color);
+ }
+
+ .text-container {
+ display: flex;
+ flex-flow: column;
+ gap: 0.5rem;
+ padding: 0 0.5rem;
+ }
+
+ .actions-container {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: 1rem;
+ }
+
+ .heading {
+ font-weight: 600;
+ }
+
+ button {
+ font-weight: 600;
+ }
+
+ button.primary {
+ background: var(--action-color);
+ }
+</style>
+
+<Modal close={onDismiss}>
+ <div class="content">
+ <div class="icon-container flex justify-center items-center">
+ {@html shieldIcon}
+ </div>
+
+ <div class="text-container">
+ <div class="heading">
+ {$_('modals.confirmTransactionProtection.heading', {
+ default: en.modals.confirmTransactionProtection.heading
+ })}
+ </div>
+ <div>
+ {$_('modals.confirmTransactionProtection.description')}
+ </div>
+ </div>
+
+ <div class="actions-container">
+ <button class="button-neutral-solid-b" on:click={onDismiss}>
+ {$_('modals.confirmTransactionProtection.dismiss', {
+ default: en.modals.confirmTransactionProtection.dismiss
+ })}
+ </button>
+ <button class="button-neutral-solid rounded primary" on:click={onEnable}>
+ {$_('modals.confirmTransactionProtection.enable', {
+ default: en.modals.confirmTransactionProtection.enable
+ })}
+ </button>
+ </div>
+ </div>
+</Modal>