Merge branch 'develop' into isabellewei/bernoulli-mainnet

Author: dghelm

src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource preact */
+import type { ComponentChild } from "preact"
+import { useRef } from "preact/hooks"
+import { useTabState } from "./useTabState"
+import styles from "./Tabs.module.css"
+import { clsx } from "~/lib"
+const tabSlotKey = "tab." as const
+const panelSlotKey = "panel." as const
+
+type TabSlot = `${typeof tabSlotKey}${string}`
+type PanelSlot = `${typeof panelSlotKey}${string}`
+
+function isTabSlotEntry(entry: [string, ComponentChild]): entry is [TabSlot, ComponentChild] {
+  const [key] = entry
+  return key.startsWith(tabSlotKey)
+}
+
+function isPanelSlotEntry(entry: [string, ComponentChild]): entry is [PanelSlot, ComponentChild] {
+  const [key] = entry
+  return key.startsWith(panelSlotKey)
+}
+
+function getBaseKeyFromTab(slot: TabSlot) {
+  return slot.replace(new RegExp(`^${tabSlotKey}`), "")
+}
+
+function getBaseKeyFromPanel(slot: PanelSlot) {
+  return slot.replace(new RegExp(`^${panelSlotKey}`), "")
+}
+
+type Props = {
+  [key: TabSlot | PanelSlot]: ComponentChild
+  sharedStore?: string
+}
+
+export function TabsContent({ sharedStore, ...slots }: Props) {
+  const tabs = Object.entries(slots).filter(isTabSlotEntry)
+  const panels = Object.entries(slots).filter(isPanelSlotEntry)
+
+  /** Used to focus next and previous tab on arrow key press */
+  const tabButtonRefs = useRef<Record<TabSlot, HTMLButtonElement | null>>({})
+
+  const firstPanelKey = panels[0] ? getBaseKeyFromPanel(panels[0][0]) : ""
+  const [curr, setCurrStore] = useTabState(firstPanelKey, sharedStore)
+
+  function moveFocus(event: KeyboardEvent) {
+    if (event.key === "ArrowLeft") {
+      const currIdx = tabs.findIndex(([key]) => getBaseKeyFromTab(key) === curr)
+      if (currIdx > 0) {
+        const [prevTabKey] = tabs[currIdx - 1]
+        setCurrStore(getBaseKeyFromTab(prevTabKey))
+        tabButtonRefs.current[prevTabKey]?.focus()
+      }
+    }
+    if (event.key === "ArrowRight") {
+      const currIdx = tabs.findIndex(([key]) => getBaseKeyFromTab(key) === curr)
+      if (currIdx < tabs.length - 1) {
+        const [nextTabKey] = tabs[currIdx + 1]
+        setCurrStore(getBaseKeyFromTab(nextTabKey))
+        tabButtonRefs.current[nextTabKey]?.focus()
+      }
+    }
+  }
+
+  return (
+    <div className={styles.contentContainer}>
+      <div role="tablist" onKeyDown={moveFocus}>
+        {tabs.map(([key, content]) => (
+          <button
+            ref={(el) => (tabButtonRefs.current[key] = el)}
+            onClick={() => {
+              setCurrStore(getBaseKeyFromTab(key))
+            }}
+            aria-selected={curr === getBaseKeyFromTab(key)}
+            tabIndex={curr === getBaseKeyFromTab(key) ? 0 : -1}
+            role="tab"
+            type="button"
+            data-astro-tab
+            id={key}
+            key={key}
+            class={clsx(
+              curr === getBaseKeyFromTab(key) ? styles.contentTabPrimary : styles.contentTabSecondary,
+              styles.contentTab
+            )}
+          >
+            {content}
+          </button>
+        ))}
+      </div>
+      {panels.map(([key, content]) => (
+        <div
+          hidden={curr !== getBaseKeyFromPanel(key)}
+          role="tabpanel"
+          aria-labelledby={`${tabSlotKey}${getBaseKeyFromPanel(key)}`}
+          key={key}
+          class={styles.panel}
+        >
+          {content}
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/Tabs/index.ts

@@ -1 +1,3 @@
 export { Tabs } from "./Tabs"
+
+export { TabsContent } from "./TabsContent"

src/content/docs/en/article-components.mdx

@@ -14,6 +14,7 @@ import ToggleElement from "../../../components/ToggleElement.astro"
 import Aside from "../../../components/Aside.astro"
 import MarkmapView from "../../../components/MarkmapView/index.astro"
 import RPCTable from "../../../components/RPCTable/RPCTable.astro"
+import { Tabs, TabsContent } from "../../../components/Tabs"
 
 This is body text right under the article title. It typically is just paragraph text that's pretty straightforward. Then there's **bold text**, and _italic text_, and **_bold-italic text_**, and `inline-code` and **`bold inline code`** and even _`italic inline code`_ and **_`bold italic inline code`_**. And of course don't forget [links](#), and [**bold links**](#), and [_italic links_](#), and [**_bold-italic links_**](#).
 
@@ -164,6 +165,59 @@ stateDiagram
     step_context --> ConstraintBuilder
 ```
 
+### Tabs
+
+<Tabs client:visible>
+  <Fragment slot="tab.1">npm</Fragment>
+  <Fragment slot="tab.2">yarn</Fragment>
+  <Fragment slot="panel.1">```console npm install @chainlink/hardhat-chainlink ```</Fragment>
+  <Fragment slot="panel.2">```console yarn add @chainlink/hardhat-chainlink ```</Fragment>
+</Tabs>
+
+### TabsContent
+
+<TabsContent sharedStore="vrfMethod" client:visible>
+<Fragment slot="tab.1">Subscription</Fragment>
+<Fragment slot="tab.2">Direct funding</Fragment>
+<Fragment slot="panel.1">
+
+For Chainlink VRF v2 to fulfill your requests, you must maintain a sufficient amount of LINK in your subscription balance. Gas cost calculation includes the following variables:
+
+- **Gas price:** The current gas price, which fluctuates depending on network conditions.
+
+- **Callback gas:** The amount of gas used for the callback request that returns your requested random values.
+
+- **Verification gas:** The amount of gas used to verify randomness on-chain.
+
+The gas price depends on current network conditions. The callback gas depends on your callback function, and the number of random values in your request. The cost of each request is final only after the transaction is complete, but you define the limits you are willing to spend for the request with the following variables:
+
+- **Gas lane:** The maximum gas price you are willing to pay for a request in wei. Define this limit by specifying the appropriate `keyHash` in your request. The limits of each gas lane are important for handling gas price spikes when Chainlink VRF bumps the gas price to fulfill your request quickly.
+
+- **Callback gas limit:** Specifies the maximum amount of gas you are willing to spend on the callback request. Define this limit by specifying the `callbackGasLimit` value in your request.
+
+</Fragment>
+<Fragment slot="panel.2">
+
+For Chainlink VRF v2 to fulfill your requests, you must have a sufficient amount of LINK in your consuming contract. Gas cost calculation includes the following variables:
+
+- **Gas price:** The current gas price, which fluctuates depending on network conditions.
+
+- **Callback gas:** The amount of gas used for the callback request that returns your requested random values. The callback gas depends on your callback function and the number of random values in your request. Set the **callback gas limit** to specify the maximum amount of gas you are willing to spend on the callback request.
+
+- **Verification gas:** The amount of gas used to verify randomness on-chain.
+
+- **Wrapper overhead gas:** The amount of gas used by the VRF Wrapper contract. See the [Request and Receive Data](/vrf/v2/direct-funding#request-and-receive-data) section for details about the VRF v2 Wrapper contract design.
+
+Because the consuming contract directly pays the LINK for the request, the cost is calculated during the request and not during the callback when the randomness is fulfilled. Test your callback function to learn how to correctly estimate the callback gas limit.
+
+- If the gas limit is underestimated, the callback fails and the consuming contract is still charged for the work done to generate the requested random values.
+- If the gas limit is overestimated, the callback function will be executed but your contract is not refunded for the excess gas amount that you paid.
+
+Make sure that your consuming contracts are funded with enough LINK tokens to cover the transaction costs. If the consuming contract doesn't have enough LINK tokens, your request will revert.
+
+</Fragment>
+</TabsContent>
+
 ### RPC Table
 
 <RPCTable />

src/content/docs/en/developers/guides/running-a-scroll-node.mdx

@@ -4,13 +4,13 @@ date: Last Modified
 title: "Running a Scroll L2geth Node"
 lang: "en"
 permalink: "developers/guides/running-a-scroll-node"
-excerpt: "This guide contains instructions on how to to run your own node on the Scroll network."
+excerpt: "This guide contains instructions on how to run your own node on the Scroll network."
 ---
 
 import Aside from "../../../../../components/Aside.astro"
 import ToggleElement from "../../../../../components/ToggleElement.astro"
 
-For most developers, using [our official RPC endpoint](../developer-quickstart#network-configuration) or one offered by other RPC providers in the ecosystem is the easiest way to get started on Scroll. For those looking to maintain their own node, this guide provides instructions on how to run a "follower node" that participates in the public mempool of transactions, but does not participate in consensus or block building. Scroll nodes are a fork of geth, using the clique protocol for consensus, which we call l2geth.
+For most developers, using [our official RPC endpoint](/en/developers/developer-quickstart#network-configuration) or one offered by other RPC providers in the ecosystem is the easiest way to get started on Scroll. For those looking to maintain their own node, this guide provides instructions on how to run a "follower node" that participates in the public mempool of transactions, but does not participate in consensus or block building. Scroll nodes are a fork of geth, using the clique protocol for consensus, which we call l2geth.
 
 ## Prerequisites
 

src/content/docs/en/developers/index.mdx

@@ -80,7 +80,7 @@ ensuring that all code executed on the Scroll Layer 2 behaves just as if it were
   <p>
     We know the challenges of building in the open and getting user engagement! Scroll has a blossoming community of
     users and builders, and with a Discord community of over 500,000 members eager to try out applications on our
-    testnet or mainnet, we’re excited to connect builders with users that can provide real-world feedback.
+    testnet or mainnet, we’re excited to connect builders with users who can provide real-world feedback.
   </p>
 </ToggleElement>
 

src/content/docs/en/developers/l1-and-l2-bridging.mdx

@@ -26,12 +26,12 @@ In addition to token transfers, the Scroll Messenger contract enables cross-chai
 
 <ClickToZoom src={L1GatewayWHITE} />
 
-There are many entry points from the user to the Scroll bridge. This will depend on what you want to do and how you want to do it. If you want to send ETH or ERC20 tokens, you should use the `GatewayRouter` . If you want to send NFTs, you should use the `L1ERC721Gateway` or `L1ERC1155Gateway`. If you want to send arbitrary data, you should use the `L1ScrollMessenger`. All Gateway transfers use the Scroll Messenger to send assets cross-chain, whose job is to append the transactions to the Message Queue for L2 inclusion.
+There are many entry points from the user to the Scroll bridge. This will depend on what you want to do and how you want to do it. If you want to send ETH or ERC20 tokens, you should use the `GatewayRouter`. If you want to send NFTs, you should use the `L1ERC721Gateway` or `L1ERC1155Gateway`. If you want to send arbitrary data, you should use the `L1ScrollMessenger`. All Gateway transfers use the Scroll Messenger to send assets cross-chain, whose job is to append the transactions to the Message Queue for L2 inclusion.
 
 ## L2 Gateway architecture
 
 <ClickToZoom src={withdrawWHITE} />
 
-Regarding possible permissionlessly callable entry points, the L2 Gateway Architecture is very similar to L1. The difference is that when sending a message from L2, calling the `appendMessage` function will store the message in an append-only binary merkle tree (aka withdraw tree) in the `L2MessageQueue`. When a new message is sent to the `L2MessageQueue`, the relayer will detect it and store it in the database. When the block is finalized, it will generate a proof of the new merkle path and pass it to the L1geth node to execute on `L1ScrollMessenger` . All finalized withdraw roots will be stored in the rollup contract so we can verify the proof against them. In the next Scroll versions, the Relayer won't be needed since all users will be able to finalize the transaction on L1.
+Regarding possible permissionlessly callable entry points, the L2 Gateway Architecture is very similar to L1. The difference is that when sending a message from L2, calling the `appendMessage` function will store the message in an append-only binary merkle tree (aka withdraw tree) in the `L2MessageQueue`. When a new message is sent to the `L2MessageQueue`, the relayer will detect it and store it in the database. When the block is finalized, it will generate a proof of the new merkle path and pass it to the L1geth node to execute on `L1ScrollMessenger`. All finalized withdraw roots will be stored in the rollup contract so we can verify the proof against them. In the next Scroll versions, the Relayer won't be needed since all users will be able to finalize the transaction on L1.
 
-In the upcoming sections, we will explore the technical aspects of the bridge, including the smart contract API required to utilize its capabilities. Detailed guides with code examples are provided in the Developer Guides section to assist developers and users in understanding and implementing these functionalities.
+In the upcoming sections, we will explore the technical aspects of the bridge, including the smart contract API required to utilize its capabilities. Detailed guides with code examples are provided in the Developer Guides section to assist developers and users in understanding and implementing these functionalities.

src/content/docs/en/developers/l1-and-l2-bridging/erc1155-token-bridge.mdx

@@ -52,7 +52,7 @@ interface IScrollERC1155 {
   /// @notice Batch mint some token to recipient's account.
   /// @dev Gateway Utilities, only gateway contract can call
   /// @param _to The address of recipient.
-  /// @param _tokenIds The token id to mint.
+  /// @param _tokenIds The list of token ids to mint.
   /// @param _amounts The list of corresponding amount of token to mint.
   /// @param _data The data passed to recipient
   function batchMint(
@@ -158,5 +158,5 @@ Update the mapping that connects an ERC1155 token contract from L2 to L1.
 
 | Parameter | Description                                       |
 | --------- | ------------------------------------------------- |
-| \_l1Token | The address of th ERC1155 token in L1.            |
+| \_l1Token | The address of the ERC1155 token in L1.            |
 | \_l2Token | The address of corresponding ERC1155 token in L2. |

src/content/docs/en/developers/l1-and-l2-bridging/eth-and-erc20-token-bridge.mdx

@@ -33,7 +33,7 @@ All Gateway contracts will form the message and send it to the `L1ScrollMessenge
   address of the `L1ScrollMessenger`. 
 </Aside>
 
-When a new block gets created on L1, the Watcher will detect the message on the `L1MessageQueue` and will pass it to the Relayer service, which will submit the transaction to the L2 via the l2geth node. Finally, the l2geth node will pass the transaction to the `L2ScrollMessagner` contract for execution on L2.
+When a new block gets created on L1, the Watcher will detect the message on the `L1MessageQueue` and will pass it to the Relayer service, which will submit the transaction to the L2 via the l2geth node. Finally, the l2geth node will pass the transaction to the `L2ScrollMessenger` contract for execution on L2.
 
 ## Withdraw ETH and ERC20 tokens from L2
 
@@ -76,7 +76,7 @@ interface IScrollStandardERC20 {
   /// @param _amount The amount of token to mint.
   function mint(address _to, uint256 _amount) external;
 
-  /// @notice Mint some token from account.
+  /// @notice Burn some token from account.
   /// @dev Gateway Utilities, only gateway contract can call
   /// @param _from The address of account to burn token.
   /// @param _amount The amount of token to mint.

src/content/docs/en/developers/scroll-contracts.mdx

@@ -100,6 +100,21 @@ Use the table below to configure your Ethereum tools to the Scroll mainnet.
   - v3StakerAddress: [`0xFdFbE973c9ecB036Ecfb7af697FcACe789D3f928`](https://scrollscan.com/address/0xFdFbE973c9ecB036Ecfb7af697FcACe789D3f928)
   - quoterV2Address: [`0x2566e082Cb1656d22BCbe5644F5b997D194b5299`](https://scrollscan.com/address/0x2566e082Cb1656d22BCbe5644F5b997D194b5299)
 
+### Safe
+
+You can access Safe on Scroll [here](https://safe.scroll.xyz/), and the transaction service API is at	https://transaction.safe.scroll.xyz.
+
+- CompatibilityFallbackHandler:	[`0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4`](https://scrollscan.com/address/0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4)
+- CreateCall:	[`0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4`](https://scrollscan.com/address/0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4)
+- DefaultCallbackHandler:	[`0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd`](https://scrollscan.com/address/0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd)
+- GnosisSafe:	[`0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552`](https://scrollscan.com/address/0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552)
+- GnosisSafeL2:	[`0x3E5c63644E683549055b9Be8653de26E0B4CD36E`](https://scrollscan.com/address/0x3E5c63644E683549055b9Be8653de26E0B4CD36E)
+- GnosisSafeProxyFactory:	[`0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2`](https://scrollscan.com/address/0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2)
+- MultiSend:	[`0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761`](https://scrollscan.com/address/0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761)
+- MultiSendCallOnly:	[`0x40A2aCCbd92BCA938b02010E17A5b8929b49130D`](https://scrollscan.com/address/0x40A2aCCbd92BCA938b02010E17A5b8929b49130D)
+- SignMessageLib:	[`0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2`](https://scrollscan.com/address/0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2)
+- SimulateTxAccessor:	[`0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da`](https://scrollscan.com/address/0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da)
+
 #### Ethereum Attestation Service (EAS)
 
 - EAS: [`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0)
@@ -224,6 +239,21 @@ See this [Github gist](https://gist.github.com/dghelm/7fe68f0a524f30846e1142721c
 - EIP712Proxy: [`0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b`](https://sepolia.scrollscan.com/address/0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b)
 - Indexer: [`0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17`](https://sepolia.scrollscan.com/address/0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17)
 
+### Safe
+
+You can access Safe on Scroll [here](https://safe.scroll.xyz/), and the transaction service API is at	https://transaction-sepolia.safe.scroll.xyz.
+
+- CompatibilityFallbackHandler: [`0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4`](https://sepolia.scrollscan.com/address/0xf48f2B2d2a534e402487b3ee7C18c33Aec0Fe5e4)
+- CreateCall: [`0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4`](https://sepolia.scrollscan.com/address/0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4)
+- DefaultCallbackHandler: [`0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd`](https://sepolia.scrollscan.com/address/0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd)
+- GnosisSafe: [`0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552`](https://sepolia.scrollscan.com/address/0xd9Db270c1B5E3Bd161E8c8503c55cEABeE709552)
+- GnosisSafeL2: [`0x3E5c63644E683549055b9Be8653de26E0B4CD36E`](https://sepolia.scrollscan.com/address/0x3E5c63644E683549055b9Be8653de26E0B4CD36E)
+- GnosisSafeProxyFactory: [`0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2`](https://sepolia.scrollscan.com/address/0xa6B71E26C5e0845f74c812102Ca7114b6a896AB2)
+- MultiSend: [`0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761`](https://sepolia.scrollscan.com/address/0xA238CBeb142c10Ef7Ad8442C6D1f9E89e07e7761)
+- MultiSendCallOnly: [`0x40A2aCCbd92BCA938b02010E17A5b8929b49130D`](https://sepolia.scrollscan.com/address/0x40A2aCCbd92BCA938b02010E17A5b8929b49130D)
+- SignMessageLib: [`0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2`](https://sepolia.scrollscan.com/address/0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2)
+- SimulateTxAccessor: [`0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da`](https://sepolia.scrollscan.com/address/0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da)
+
 ### Additional Useful Contracts
 
 - Multicall3: [`0xcA11bde05977b3631167028862bE2a173976CA11`](https://sepolia.scrollscan.com/address/0xcA11bde05977b3631167028862bE2a173976CA11)