Protect one-step onboard to mainnet RPC (#485)

* Now Protect one-step onboard to mainnet RPC * Update dependencies and add BrowserOnly component * Update dependencies and fix ProtectButton component * Update package.json with node engine version * Update Node.js version to 18.x in CI test * Minor linting setup improvement * Update VS Code setting
flashbots · Dec 4, 2023 · 86e3dda · 86e3dda · vercel · Dec 4, 2023
1 parent d08817c
commit 86e3dda
Show file tree

Hide file tree

Showing 10 changed files with 1,421 additions and 1,631 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -50,22 +50,25 @@ module.exports = {
         ' ',
       ],
     ],
-    'import/no-unresolved': ERROR,
-    'import/no-extraneous-dependencies': [ERROR, {"includeTypes": true}],
-    "react/require-default-props": [WARNING, {
-      "functions": "defaultArguments"
-    }],
-    'react/jsx-filename-extension': [WARNING, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }]
+    'import/no-unresolved': [ERROR, {ignore: ['^@docusaurus']}],
+    'import/no-extraneous-dependencies': [ERROR, {includeTypes: true}],
+    'react/require-default-props': [
+      WARNING,
+      {
+        functions: 'defaultArguments',
+      },
+    ],
+    'react/jsx-filename-extension': [
+      WARNING,
+      {extensions: ['.js', '.jsx', '.ts', '.tsx']},
+    ],
   },
   settings: {
     'import/parsers': {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
     'import/resolver': {
-      'webpack': true,
-      'typescript': {
-        'alwaysTryTypes': true,
-      },
+      typescript: {},
     },
     // optional, if you want to lint code blocks at the same time
     'mdx/code-blocks': true,
@@ -85,4 +88,4 @@ module.exports = {
       extends: ['plugin:mdx/overrides'],
     },
   ],
-}
+};
diff --git a/.github/workflows/pr-tests.yml b/.github/workflows/pr-tests.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - name: Test build
         env:
           TARGET_URL: "https://docs.flashbots.net"

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,14 +1,13 @@
 {
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
+    "source.fixAll.stylelint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "mdx.experimentalLanguageServer": true,
   "css.validate": false,
   "scss.validate": false,
   "javascript.validate.enable": false,
-  "typescript.validate.enable": false,
+  "typescript.validate.enable": true,
   "javascript.suggest.paths": false,
   "typescript.suggest.paths": false,
 }
diff --git a/docs/flashbots-auction/advanced/reputation.md b/docs/flashbots-auction/advanced/reputation.md
@@ -16,14 +16,12 @@ $$
 r(U) = \frac{\sum_{T\in H_U}(\Delta_{coinbase_T} + g_Tp_T)}{\sum_{T\in S_U}g_T}
 $$
 
-<!-- markdownlint-disable MD037 -->
 $r$: searcher reputation score.  
 $H_U$: set of all transactions $T$ submitted by searcher $U$ to `eth_sendBundle` RPC and successfully landed on chain.  
 $S_U$: set of all transactions $T$ submitted by searcher $U$ to `eth_sendBundle` and `eth_callBundle` RPC.  
 $g_{T}$: _gas used_ by transaction $T$.  
 $p_{T}$: _gas price_ of transaction $T$.  
 $\Delta_{coinbase_T}$: coinbase difference from direct payment in transaction $T$.
-<!-- markdownlint-enable MD037 -->
 
 ## Querying reputation
 

diff --git a/package.json b/package.json
@@ -21,14 +21,13 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.20.0",
-    "@docusaurus/core": "^3.0.0-beta.0",
-    "@docusaurus/plugin-content-docs": "^3.0.0-beta.0",
-    "@docusaurus/plugin-sitemap": "^3.0.0-beta.0",
-    "@docusaurus/preset-classic": "^3.0.0-beta.0",
-    "@docusaurus/utils": "^3.0.0-beta.0",
-    "@docusaurus/utils-common": "^3.0.0-beta.0",
-    "@mdx-js/react": "^2.3.0",
-    "@metamask/sdk-react": "^0.9.0",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/plugin-content-docs": "^3.0.0",
+    "@docusaurus/plugin-sitemap": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@docusaurus/utils": "^3.0.0",
+    "@docusaurus/utils-common": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@vercel/analytics": "^0.1.11",
     "autoprefixer": "^10.4.16",
@@ -45,8 +44,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loadable": "^5.5.0",
-    "rehype-katex": "^6.0.3",
-    "remark-math": "^5.1.1",
+    "rehype-katex": "^7",
+    "remark-math": "^6",
     "sass": "^1.69.5",
     "search-insights": "^2.8.3",
     "tailwindcss": "^3.3.3",
@@ -65,9 +64,9 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^3.0.0-beta.0",
-    "@docusaurus/module-type-aliases": "^3.0.0-beta.0",
-    "@docusaurus/tsconfig": "^3.0.0-beta.0",
+    "@docusaurus/eslint-plugin": "^3.0.0",
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
     "@flashbots/mev-share-client": "^0.7.10",
     "@tsconfig/docusaurus": "^2.0.2",
     "@types/react": "^18.2.23",
@@ -82,9 +81,8 @@
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-import-resolver-webpack": "^0.13.7",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-mdx": "^2.2.0",
@@ -101,5 +99,8 @@
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^29.0.0",
     "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=18.0"
   }
 }
diff --git a/src/components/ProtectButton/index.tsx b/src/components/ProtectButton/index.tsx
@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import {PropsWithChildren} from 'react';
-import { snakeCase } from 'change-case';
-import {useSDK} from '@metamask/sdk-react';
+import {snakeCase} from 'change-case';
 
-const RPC_GOERLI_FLASHBOTS_NET = 'https://rpc-goerli.flashbots.net';
-const RPC_SEPOLIA_FLASHBOTS_NET = 'https://rpc-sepolia.flashbots.net';
 const RPC_FLASHBOTS_NET = 'https://rpc.flashbots.net';
+const ETH_CHAIN_ID = '0x1';
+const ETH_CHAIN_NAME = 'Ethereum Mainnet';
 
 interface HintPreferences {
   calldata: boolean;
@@ -34,23 +33,11 @@ export interface ProtectButtonOptions extends PropsWithChildren {
 }
 
 export const generateRpcUrl = ({
-  chainId,
   options: {hints, builders, fast},
 }: {
-  chainId: string;
   options: ProtectButtonOptions;
 }) => {
-  const protectUrl = (() => {
-    switch (chainId) {
-      case '0x5':
-        return RPC_GOERLI_FLASHBOTS_NET;
-      case '0xaa36a7':
-        return RPC_SEPOLIA_FLASHBOTS_NET;
-      default:
-        return RPC_FLASHBOTS_NET;
-    }
-  })();
-  const rpcUrl = new URL(protectUrl);
+  const rpcUrl = new URL(RPC_FLASHBOTS_NET);
 
   if (hints) {
     Object.entries(hints).forEach(([hintName, hintEnabled]) => {
@@ -70,35 +57,22 @@ export const generateRpcUrl = ({
   return rpcUrl;
 };
 
-const chainName = (chainId: string) => {
-  switch (chainId) {
-    case '0x1':
-      return 'Mainnet';
-    case '0x5':
-      return 'Goerli';
-    case '0xaa36a7':
-      return 'Sepolia';
-    default:
-      return `Chain ${chainId}`;
-  }
-};
-
 /**
  * Button that connects Metamask to Flashbots Protect when it's clicked.
  */
 function FlashbotsProtectButton(options: ProtectButtonOptions) {
-  const {chainId = '0x1', sdk, provider} = useSDK();
   const {children} = options;
   const rpcUrl = generateRpcUrl({
-    chainId,
     options,
   });
 
+  const provider = window.ethereum;
+
   const connectToProtect = async () => {
-    if (provider && sdk) {
+    if (provider) {
       const addChainParams = {
-        chainId,
-        chainName: `Flashbots Protect (${chainName(chainId)})`,
+        chainId: ETH_CHAIN_ID,
+        chainName: `Flashbots Protect (${ETH_CHAIN_NAME})`,
         iconUrls: ['https://docs.flashbots.net/img/logo.png'],
         nativeCurrency: {
           name: 'Ethereum',
@@ -107,10 +81,6 @@ function FlashbotsProtectButton(options: ProtectButtonOptions) {
         },
         rpcUrls: [rpcUrl.toString()],
       };
-      await sdk.connect();
-      // delete local storage key "providerType" to allow users pick extension
-      // or mobile when connecting
-      localStorage.removeItem('providerType');
       // do it manually with window.ethereum
       try {
         await provider.request({

diff --git a/src/components/ProtectButtonSelector/index.tsx b/src/components/ProtectButtonSelector/index.tsx
@@ -6,19 +6,20 @@
  */
 import {useState} from 'react';
 import FlashbotsLogo from '@site/static/img/flashbots-logo.svg';
-import FlashbotsProtectButton, { HintPreferences } from '../ProtectButton';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import FlashbotsProtectButton, {HintPreferences} from '../ProtectButton';
 import SimpleDropdown from '../SimpleDropdown';
 import BuilderOptions from './BuilderOptions';
 import {useSupportedBuilders} from '../mev-share/useSupportedBuilders';
 import FastOptionCheckbox from './FastOptionCheckbox';
 import MevShareHints from './MevShareHints';
 
 const defaultHintSelectors = {
-  'calldata': false,
-  'logs': false,
-  'defaultLogs': false,
-  'contractAddress': false,
-  'functionSelector': false,
+  calldata: false,
+  logs: false,
+  defaultLogs: false,
+  contractAddress: false,
+  functionSelector: false,
 };
 
 export default function ProtectButtonSelector() {
@@ -49,7 +50,7 @@ export default function ProtectButtonSelector() {
     }
   };
 
-  const hintsProcessed : HintPreferences = {
+  const hintsProcessed: HintPreferences = {
     ...hints,
     hash: hashOnly,
   };
@@ -87,12 +88,16 @@ export default function ProtectButtonSelector() {
               <FlashbotsLogo className="mx-1" />
             </div>
             <FastOptionCheckbox fastMode={fastMode} setFastMode={setFastMode} />
-            <FlashbotsProtectButton
-              hints={hintsProcessed}
-              builders={selectedBuilders}
-              fast={fastMode}>
-              Connect Wallet to Protect
-            </FlashbotsProtectButton>
+            <BrowserOnly>
+              {() => (
+                <FlashbotsProtectButton
+                  hints={hintsProcessed}
+                  builders={selectedBuilders}
+                  fast={fastMode}>
+                  Connect Wallet to Protect
+                </FlashbotsProtectButton>
+              )}
+            </BrowserOnly>
           </div>
         </SimpleDropdown.Body>
 

diff --git a/src/theme/Root.js b/src/theme/Root.js
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare global {
+  interface Window {
+    ethereum: any
+  }
+}
+
+export {};