brock/fast (#459)

* Describe fast mode in quickstart guide * Fast mode UI functionality * remove .vscode/ * ignore .vscode/ * [unfinished] add local protect-button to test * fix protect-button errors * update protect-button dep: point to npm release * ignore .eslintcache * remove unnecessary import --------- Co-authored-by: Shea Ketsdever <sketsdever@gmail.com>
flashbots · Oct 17, 2023 · 5b8fb9b · 5b8fb9b · vercel · Oct 17, 2023
1 parent bc56dcc
commit 5b8fb9b
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 97 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,4 +24,6 @@ node_modules
 .vercel
 .env*.local
 
-.idea/
+.idea/
+.vscode
+.eslintcache
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/docs/flashbots-protect/quick-start.mdx b/docs/flashbots-protect/quick-start.mdx
@@ -6,17 +6,19 @@ import ProtectButtonSelector from "@site/src/components/ProtectButtonSelector";
 
 ## Key Considerations
 
-Before you get started with Flashbots Protect here are a few things to be mindful of:
-
-It has the following key benefits:
+Flashbots Protect has the following key benefits:
 - **Configurable:** you can choose which builders to send to and your mev-share settings.
 - **Frontrunning protection:** your transaction will not be seen by hungry sandwich bots in the public mempool.
 - **Get MEV back**: if your transaction creates MEV, you get up to 90% of it back through [MEV-Share](/flashbots-mev-share/introduction).
 - **No failed transactions:** your transaction will only be included if it doesn't include any reverts, so you don't pay for failed transactions.
 
-### Speeding up your transaction's inclusion
+### Faster Transactions
+
+You can speed up your transaction's inclusion by using Protect in fast mode. Click the "fast" option when [configuring your Protect RPC](/flashbots-protect/quick-start#using-flashbots-protect) or manually set your RPC to `rpc.flashbots.net/fast`.
 
-Transactions sent through Flashbots Protect are, by default, only shared with Flashbots Builder, which builds only a subset of all Ethereum blocks. To enhance the rate of transaction inclusion, you may choose to share your transaction with additional builders. This can be accomplished by selecting other builders in the advanced options when [configuring your Protect RPC](/flashbots-protect/quick-start#using-flashbots-protect).
+Fast mode has 2 key differences from the default Protect experience:
+1. **Shared with all builders:** By default, Protect transactions are only shared with the Flashbots Builder, which builds only a subset of all Ethereum blocks. In fast mode, transactions are shared with all [registered builders](https://github.com/flashbots/dowg/blob/main/builder-registrations.json) to increase the number of blocks the user's transaction can be included in.
+2. **Larger refund paid to validator:** By default, only 10% of MEV-Share refunds are paid to validators. In fast mode, validators receive 50% of refunds which makes it more likely that the user’s transactions will be chosen in a given block.
 
 **Note**: When you send your transaction to a builder, you are entrusting them not to frontrun your transaction or disclose it to third parties who might.
 

diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "docusaurus-plugin-sass": "^0.2.1",
     "dotenv": "^8.2.0",
     "prism-react-renderer": "^2.1.0",
-    "protect-button": "^0.4.5",
+    "protect-button": "^0.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loadable": "^5.5.0",
@@ -60,6 +60,7 @@
     "@docusaurus/eslint-plugin": "^3.0.0-beta.0",
     "@docusaurus/module-type-aliases": "^3.0.0-beta.0",
     "@docusaurus/tsconfig": "^3.0.0-beta.0",
+    "@tsconfig/docusaurus": "^2.0.2",
     "@types/react": "^18.2.23",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",

diff --git a/src/components/ProtectButtonSelector/index.tsx b/src/components/ProtectButtonSelector/index.tsx
@@ -1,13 +1,23 @@
+/**
+ * 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.
+ */
 import React, { useEffect, useState } from "react"
-import SimpleDropdown from '../SimpleDropdown'
 import FlashbotsProtectButton, { generateRpcUrl, HintPreferences } from 'protect-button';
+import SimpleDropdown from '../SimpleDropdown'
 import Checkbox from '../Checkbox'
 import AlignItems from '../AlignItems/AlignItems'
 import GridBlock from '../GridBlock/GridBlock'
-import { Builder, useSupportedBuilders } from '../mev-share/useSupportedBuilders'
+import { useSupportedBuilders } from '../mev-share/useSupportedBuilders'
 import styles from './styles.module.scss';
 
-const ProtectButtonSelector = () => {
+function BuilderCheckbox({ name, selectedBuilders, fastMode, toggleBuilder }: { name: string, selectedBuilders: string[], fastMode: boolean, toggleBuilder: (name: string) => any }) {
+    return <Checkbox label={name} id={`builder_${name}`} checked={selectedBuilders.includes(name) || fastMode} disabled={fastMode === true} onChange={() => toggleBuilder(name)} />
+}
+
+export default function ProtectButtonSelector() {
     const [selectedBuilders, setSelectedBuilders] = useState<string[]>([])
     const [calldata, setCalldata] = useState(false)
     const [logs, setLogs] = useState(false)
@@ -16,11 +26,12 @@ const ProtectButtonSelector = () => {
     const [functionSelector, setFunctionSelector] = useState(false)
     const [noHints, setNoHints] = useState(false)
     const [allBuilders, setAllBuilders] = useState(false)
-    const [advancedOptionsShown, setAdvancedOptionsShown] = useState(true)
+    const [advancedOptionsShown, setAdvancedOptionsShown] = useState(false)
+    const [fastMode, setFastMode] = useState(false)
 
     const supportedBuilders = useSupportedBuilders().map(builder => builder.name)
 
-    const hints: HintPreferences = advancedOptionsShown ? {
+    const hints: HintPreferences | undefined = advancedOptionsShown ? {
         calldata,
         logs,
         defaultLogs,
@@ -31,8 +42,9 @@ const ProtectButtonSelector = () => {
 
     // Generate the RPC URL
     const rpcUrl = generateRpcUrl({
-        hints: hints,
-        builders: advancedOptionsShown ? selectedBuilders : undefined
+        hints,
+        builders: advancedOptionsShown ? selectedBuilders : undefined,
+        fast: fastMode
     }).toString();
 
     const onSetNoHints = (val: boolean) => {
@@ -85,7 +97,7 @@ const ProtectButtonSelector = () => {
         } else {
             setSelectedBuilders(selectedBuilders.concat(name));
         }
-    };
+    }
 
     const toggleAllBuilders = (val: boolean) => {
         setAllBuilders(val);
@@ -96,58 +108,46 @@ const ProtectButtonSelector = () => {
         }
     }
 
-    const BuilderCheckbox = ({ name }: { name: string }) => <Checkbox label={name} id={`builder_${name}`} checked={selectedBuilders.includes(name)} onChange={(_) => toggleBuilder(name)} />
-
-    const RenderRpcUrl = () => (
-        <div className={styles.rpcUrlContainer}>
-            <div className={styles.rpcUrlLabel}>RPC URL:</div>
-            <div className={styles.rpcUrl}>{rpcUrl}</div>
-        </div>
-    );
-
-    const RenderHints = () => (
-        <div>
-            <em>MEV-Share Hints</em>
-            <hr style={{ padding: 0, margin: 0 }} />
-            <AlignItems horizontal='left'>
-                <Checkbox label='Calldata' id='calldata' checked={calldata} onChange={onSetCalldata} />
-                <Checkbox label='Contract Address' id='contractAddress' checked={contractAddress} onChange={onSetContractAddress} />
-                <Checkbox label='Function Selector' id='functionSelector' checked={functionSelector} onChange={onSetFunctionSelector} />
-                <Checkbox label='Logs' id='logs' checked={logs} onChange={onSetLogs} />
-                <Checkbox label='DefaultLogs' id='defaultLogs' checked={defaultLogs} onChange={onSetDefaultLogs} />
-                        <Checkbox label='None' id='none' checked={noHints} onChange={onSetNoHints} />
-                <div style={{ width: 64 }} /> {/* spacer */}
-            </AlignItems>
-        </div>
-    );
-
-    const RenderBuilders = () => (
-        <div>
-            <em>Builders</em>
-            <hr style={{ padding: 0, margin: 0 }} />
-            {supportedBuilders.map((builder, idx) => <BuilderCheckbox name={builder} key={idx} />)}
-            {<Checkbox label={"all"} id="all" checked={allBuilders === true} onChange={toggleAllBuilders} />}
-        </div>
-    );
-
     return (
         <GridBlock>
-            <SimpleDropdown header={"Advanced options"} onClickHeader={() => {
+            <SimpleDropdown header="Advanced options" onClickHeader={() => {
                 setAdvancedOptionsShown(!advancedOptionsShown)
             }} isOpen={advancedOptionsShown}>
                 <SimpleDropdown.Body>
                     <AlignItems horizontal='center'>
-                        <><FlashbotsProtectButton hints={hints} builders={advancedOptionsShown ? selectedBuilders : undefined}>Connect Wallet to Protect</FlashbotsProtectButton></>
+                        <FlashbotsProtectButton chainId={1} hints={hints} fast={fastMode} builders={advancedOptionsShown ? selectedBuilders : undefined}>Connect Wallet to Protect</FlashbotsProtectButton>
+                        <></>
                     </AlignItems>
-                    <RenderRpcUrl />
+                    <div className={styles.fastContainer}>
+                        <Checkbox label="Fast" id="fast" checked={fastMode} onChange={setFastMode} />
+                    </div>
+                    <div className={styles.rpcUrlContainer}>
+                        <div className={styles.rpcUrlLabel}>RPC URL:</div>
+                        <div className={styles.rpcUrl}>{rpcUrl}</div>
+                    </div>
                 </SimpleDropdown.Body>
                 <SimpleDropdown.HiddenBody>
-                    <RenderHints />
-                    <RenderBuilders />
+                    <div>
+                        <em>MEV-Share Hints</em>
+                        <hr style={{ padding: 0, margin: 0 }} />
+                        <AlignItems horizontal='left'>
+                            <Checkbox label='Calldata' id='calldata' checked={calldata} onChange={onSetCalldata} />
+                            <Checkbox label='Contract Address' id='contractAddress' checked={contractAddress} onChange={onSetContractAddress} />
+                            <Checkbox label='Function Selector' id='functionSelector' checked={functionSelector} onChange={onSetFunctionSelector} />
+                            <Checkbox label='Logs' id='logs' checked={logs} onChange={onSetLogs} />
+                            <Checkbox label='DefaultLogs' id='defaultLogs' checked={defaultLogs} onChange={onSetDefaultLogs} />
+                            <Checkbox label='None' id='none' checked={noHints} onChange={onSetNoHints} />
+                            <div style={{ width: 64 }} /> {/* spacer */}
+                        </AlignItems>
+                    </div>
+                    <div>
+                        <em>Builders</em>
+                        <hr style={{ padding: 0, margin: 0 }} />
+                        {supportedBuilders.map((builder: string) => <BuilderCheckbox fastMode={fastMode} name={builder} key={builder} selectedBuilders={selectedBuilders} toggleBuilder={toggleBuilder} />)}
+                        <Checkbox label="all" id="all" checked={allBuilders === true || fastMode === true} disabled={fastMode === true} onChange={toggleAllBuilders} />
+                    </div>
                 </SimpleDropdown.HiddenBody>
             </SimpleDropdown>
         </GridBlock>
     );
 }
-
-export default ProtectButtonSelector
diff --git a/src/components/ProtectButtonSelector/styles.module.scss b/src/components/ProtectButtonSelector/styles.module.scss
@@ -17,4 +17,11 @@
     align-items: center;
     width: 80%;
     word-break: break-all;
-  }
+  }
+
+.fastContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 10px;
+}
diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@docusaurus/tsconfig",
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
     "lib": ["DOM", "ESNext"],
     "baseUrl": ".",

diff --git a/yarn.lock b/yarn.lock
@@ -2396,6 +2396,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@tsconfig/docusaurus@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@tsconfig/docusaurus/-/docusaurus-2.0.2.tgz#f96c7453ce9969ef938284eac74441e2d646efd7"
+  integrity sha512-12HWfYmgUl4M2o76/TFufGtI68wl2k/b8qPrIrG7ci9YJLrpAtadpy897Bz5v29Mlkr7a1Hq4KHdQTKtU+2rhQ==
+
 "@types/acorn@^4.0.0":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
@@ -9320,10 +9325,10 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
   integrity sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==
 
-protect-button@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/protect-button/-/protect-button-0.4.5.tgz#f3456b75ca55a8b9d733ce021c07e5ba7e014b64"
-  integrity sha512-MYKHADSmc05CLPoJhdoiDFEXldYU6+KU+iAhjb2FPo6TTRf8kbbUfMoX/LrwXluoMTa8C4GQEg2FTCfyOvc6EQ==
+protect-button@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/protect-button/-/protect-button-0.4.6.tgz#ee42e5be2b0b023cff5f70e4c5722b94dbbf584b"
+  integrity sha512-lx4sXkDMuS0VRrRw/7OiZ7KiiiXDrgehCdquHtHdmgJbWbLH3eHju99roWx6TDycRe+SFO2FLIPrYSRlrTie6w==
 
 proto-list@~1.2.1:
   version "1.2.4"
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,6 @@ node_modules @@
     .vercel
     .env*.local
-    .idea/
+    .idea/
+    .vscode
+    .eslintcache