article-components.mdx

section	gettingStarted
title	Article Components
date	Last Modified
lang	en
permalink	/article-components
excerpt	Learn more about the topics of Ethereum Scalability and Zero Knowledge Cryptography
whatsnext	Next Up Page 1 Second Next Up Page / /

import ClickToZoom from "../../../components/ClickToZoom.astro" import priceAggr from "../../../assets/images/contract-devs/price-aggr.png" 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" import Steps from '../../../components/Steps/Steps.astro';

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.

Markdown Components (also an H2 Heading)

• We've also got unordered lists!
• They can have multiple items.
  • And some sub-items.
  • That get into details
• That's an unordered list.

What else do we have?

1. Of course there's also ordered lists.
2. They look like this.
3. They're pretty useful.

H3 Heading

H4 Heading

H5 Heading

Steps

1. Import the component into your MDX file:

   import { Steps } from '@astrojs/starlight/components';

2. Wrap <Steps> around your ordered list items.

Let's see a horizontal rule.

---

We define the Square-Fibonacci sequence¹, a variation of the Fibonacci sequence:

Syntax Highlighting

...

const config: HardhatUserConfig = {
  ...
  networks: {
    scroll: {
      url: 'https://rpc.scroll.io' || '',
      accounts:
        process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
    },
  },
  etherscan: {
    apiKey: {
      scroll: <YOUR API KEY>,
    },
    customChains: [
      {
        network: 'scroll',
        chainId: 534352,
        urls: {
          apiURL: 'https://api.scrollscan.com/api',
          browserURL: 'https://scrollscan.com/',
        },
      },
    ],
  },
}

...

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Math

• Let $f_0 = 1, f_1 = 1$
• For $$i \geq 2$$, define $f_{i} := (f_{i-2})^2 + (f_{i-1})^2 \mod q$
  • Where $q$ is a large prime integer. We use this modulus to bound the size of each element, so that it can be represented by some predetermined number of bits.

Tables

Syntax	Description
Header	Title
Paragraph	Text

Blockquotes

Success

Vitae reprehenderit at aliquid error voluptates eum dignissimos.

Footnotes

Here's a simple footnote,¹ and here's a longer one.²

Callout that worked in MD, but might not in MDX?

:::tip[Did you know?] Astro helps you build faster websites with “Islands Architecture”. :::

Imported MDX Components

Callouts

{" "} Astro helps you build faster websites with “Islands Architecture”.{" "} {" "} Astro helps you build faster websites with “Islands Architecture”.{" "} {" "} Astro helps you build faster websites with “Islands Architecture”.{" "} For .md file you can use this code.

:::tip[Did you know?]
 Astro helps you build faster websites with “Islands Architecture”.
:::

Images zoom

Toggle

Why build on Scroll?

Scroll enables creators to turn their content into interactive, explorable experiences. With Scroll, you can create rich, interactive stories that engage readers, provide a better user experience, and help you stand out from the crowd.

How does Scroll work?

Scroll combines powerful technologies like WebGL and WebRTC to create immersive, interactive experiences. The platform allows you to build 3D environments, add interactivity, and embed content from popular web services to create a unique, engaging experience for your audience.

What can I build with Scroll?

You can build a wide range of experiences with Scroll, from interactive articles to immersive product demos and virtual tours. Scroll is designed to help you create engaging, interactive experiences that elevate your content and captivate your audience.

Markmap

Referenced File

[](#markmap)markmap ===================

• beautiful2
• useful
• easy
• interactive

Mermaid

stateDiagram
    Step --> StepState
    Step --> CellManager
    ConstraintBuilder --> CellManager
    CellManager --> ProofSystem(Halo2)
    StepState --> ExecutionState
    StepState --> step_context
    ExecutionState --> ConstraintBuilder
    step_context --> ConstraintBuilder

Loading

Tabs

npm yarn ```console npm install @chainlink/hardhat-chainlink ``` ```console yarn add @chainlink/hardhat-chainlink ```

TabsContent

Subscription Direct funding

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.

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 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.

RPC Table

Footnotes

1. This is the first footnote. ↩ ↩²

2. Here's one with multiple paragraphs and code. ↩