Feat: Private/custom rpc flow (#1704)

* RPC protect workflow acting as expected maybe some styling issues

* Working as expected, added configs for rpc url and displaying protect button

* fix text color for dark mode

* Refine background colors

* Refine verbiage and remove placeholder for link

* Remove box shadow from AC section

* Bump versions accordingly

* Rename rpc update func

* Cleanup type prop comments

* Refine state get in maximized

* update modal styles

- use theme vars
- remove rpc specific css vars
- adjust spacing
- remove unused css classes

* Update packages/core/src/provider.ts

* Add disableProtectRPC to accountCenterInit validation

* Update docs for AccountCenter diableProtectRPC

* Update packages/core/src/index.ts

Co-authored-by: Kat Leight <33187102+leightkt@users.noreply.github.com>

* Add small null check for secondary tokens

* Update rpc

* Update rpc again

* yarnit

* Update rpc url

* Add localstore check if RPC has been added

* Add dismissall of modal after confirm

* Update localstore call

* Remove localstore check

* Update packages/core/src/views/connect/Index.svelte

Co-authored-by: Aaron <abarnard@protonmail.com>

* Prettier

* Remove square brackets from docs

---------

Co-authored-by: Gustavo Esquinca <g.esq.ca@gmail.com>
Co-authored-by: Kat Leight <33187102+leightkt@users.noreply.github.com>
Co-authored-by: Aaron <abarnard@protonmail.com>

Author: 4 people

docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

@@ -51,7 +51,7 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
 - Moonriver
 - All other EVM network
 
-### [Optional] Use an API key to fetch real time transaction data, balances & gas
+### Optional - Use an API key to fetch real time transaction data, balances & gas
 
 Using a Blocknative API key with web3-onboard on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use.
 

docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md

@@ -19,7 +19,7 @@ If an issue does not already exist, follow the template instructions to create a
 
 Once an issue is created, a Web3 Onboard maintainer will review and respond typically within a few days to share next steps.
 
-## [Pull Requests 🗂️]
+## Pull Requests 🗂️
 
 To create a new feature or change in Web3 Onboard, fork the repo and make a pull request on the [develop branch](https://github.com/blocknative/web3-onboard/tree/develop) to have your changes merged in and released as part of the official packages.
 
@@ -39,7 +39,7 @@ Example : Adding a new injected wallet to the `injected` package -
 Example 2 : Bug fix within the `core` package -
 [Core package.json](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/core/package.json#L3) changes: `"version": "2.9.1-alpha.1",` --> `"version": "2.9.1-alpha.2",`
 
-## [How can I add a new wallet? 💳]
+## How can I add a new wallet? 💳
 
 To add a new wallet to the official Web3 Onboard packages and repo, create a [pull request](#pull-requests-🗂️). Web3 Onboard does not require a wallet to be a part of the main code, so a separate wallet module can be created without any changes to the Web3Onboard codebase. Your PR must include a detailed README for the package, keeping in mind that this README is the the first point of contact for dapp devs looking to implement your wallet.
 
@@ -57,7 +57,7 @@ Otherwise, if the wallet you are adding requires dependencies and initialization
 
 If you cannot write the code yourself to add a new wallet, create a new feature request issue to be considered by the maintainers and other contributors in the community.
 
-## [Documentation Contributions 📄]
+## Documentation Contributions 📄
 
 If you contribute to the code, you should definitely document appropriately.
 
@@ -71,11 +71,11 @@ PRs for adding/updating a wallet should include a README (new or updated) for th
 
 We highly encourage the community to help us improve the web3-onboard docs! If you have any questions don't hesitate to reach out.
 
-## [Feedback 💬]
+## Feedback 💬
 
 Did you have trouble integrating? Could the docs be improved? Have a new Feature request?
 Jump in our [Discord](https://discord.com/invite/KZaBVME) and share your feedback.
 
-## [Support 🤓]
+## Support 🤓
 
 For general questions about how to use Web3 Onboard please first check out our [docs](../../overview/introduction.md#features), then head to our [Discord](https://discord.com/invite/KZaBVME) for support from the Blocknative team.

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

@@ -145,7 +145,7 @@ type Chain = {
   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)
+  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)
 }
 
 interface SecondaryTokens {
@@ -368,7 +368,13 @@ 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
   /**
    * @deprecated Use top level containerElements property
    * with the accountCenter prop set to the desired container El. See documentation below
@@ -379,6 +385,13 @@ type AccountCenter = {
 type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
+  /**
+   * 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
 }
 
 type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft'

packages/cede-store/package.json

@@ -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/README.md

@@ -335,6 +335,13 @@ type AccountCenter = {
 type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
+  /**
+   * 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
 }
 
 type AccountCenterPosition =

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.18.1-alpha.2",
+  "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://rpc.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/index.ts

@@ -5,7 +5,12 @@ import { state } from './store/index.js'
 import { reset$, wallets$ } from './streams.js'
 import initI18N from './i18n/index.js'
 import App from './views/Index.svelte'
-import type { ConnectModalOptions, InitOptions, Notify, Theme } from './types.js'
+import type {
+  ConnectModalOptions,
+  InitOptions,
+  Notify,
+  Theme
+} from './types.js'
 import { APP_INITIAL_STATE, STORAGE_KEYS } from './constants.js'
 import { configuration, updateConfiguration } from './configuration.js'
 import updateBalances from './update-balances.js'
@@ -117,19 +122,21 @@ function init(options: InitOptions): OnboardAPI {
   if (typeof connect !== undefined) {
     updateConnectModal(connect)
   }
-
   // update accountCenter
   if (typeof accountCenter !== 'undefined') {
     let accountCenterUpdate
+    const { hideTransactionProtectionBtn } = accountCenter
 
     if (device.type === 'mobile') {
       accountCenterUpdate = {
         ...APP_INITIAL_STATE.accountCenter,
+        hideTransactionProtectionBtn,
         ...(accountCenter.mobile ? accountCenter.mobile : {})
       }
     } else if (accountCenter.desktop) {
       accountCenterUpdate = {
         ...APP_INITIAL_STATE.accountCenter,
+        hideTransactionProtectionBtn,
         ...accountCenter.desktop
       }
     }

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,13 @@ 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
+   * Can be set as a global for Account Center or per interface (desktop/mobile)
+   */
+  hideTransactionProtectionBtn?: boolean
   position?: AccountCenterPosition
   expanded?: boolean
   minimal?: boolean
@@ -276,6 +283,13 @@ export type AccountCenter = {
 export type AccountCenterOptions = {
   desktop: Omit<AccountCenter, 'expanded'>
   mobile: Omit<AccountCenter, 'expanded'>
+  /**
+   * 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
 }
 
 export type ContainerElements = {

packages/core/src/validation.ts

@@ -168,14 +168,16 @@ const accountCenterInitOptions = Joi.object({
   enabled: Joi.boolean(),
   position: commonPositions,
   minimal: Joi.boolean(),
-  containerElement: Joi.string()
+  containerElement: Joi.string(),
+  hideTransactionProtectionBtn: Joi.boolean()
 })
 
 const accountCenter = Joi.object({
   enabled: Joi.boolean(),
   position: commonPositions,
   expanded: Joi.boolean(),
   minimal: Joi.boolean(),
+  hideTransactionProtectionBtn: Joi.boolean(),
   containerElement: Joi.string()
 })
 
@@ -216,7 +218,8 @@ const initOptions = Joi.object({
   apiKey: Joi.string(),
   accountCenter: Joi.object({
     desktop: accountCenterInitOptions,
-    mobile: accountCenterInitOptions
+    mobile: accountCenterInitOptions,
+    hideTransactionProtectionBtn: Joi.boolean()
   }),
   notify: [notifyOptions, notify],
   gas: Joi.object({
@@ -263,6 +266,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()
 })