ACT-1296: Infura Faucet Integration in MetaMask Docs

docusaurus.config.js

@@ -88,6 +88,7 @@ const config = {
     ],
   ],
   plugins: [
+    'docusaurus-plugin-sass',
     [
       "@docusaurus/plugin-content-docs",
       {
@@ -168,7 +169,7 @@ const config = {
               replaysOnErrorSampleRate: isProd ? 1.0 : 0,
               replaysSessionSampleRate: isProd ? 1.0 : 0,
               sampleRate: isProd ? 0.25 : 0,
-              tracesSampleRate: 0, 
+              tracesSampleRate: 0,
             },
           },
         },
@@ -208,6 +209,10 @@ const config = {
                 label: "Infura dashboard",
                 to: "developer-tools/dashboard",
               },
+              {
+                label: "Faucet",
+                to: "developer-tools/faucet",
+              },
             ],
           },
           {
@@ -220,6 +225,11 @@ const config = {
             label: "User support",
             position: "right",
           },
+          {
+            type: 'custom-navbarWallet',
+            position: "right",
+            includeUrl: ['/developer-tools/faucet/'],
+          },
           /* Language drop down
           {
             type: "localeDropdown",

package.json

@@ -5,7 +5,7 @@
   "license": "(MIT OR Apache-2.0)",
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "start": "docusaurus start -p 3003",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -19,7 +19,7 @@
     "lint:js": "eslint . --ext js,jsx,ts,tsx --max-warnings=5",
     "lint:style": "stylelint \"**/*.css\" --fix",
     "lint:fix": "npm run lint:js -- --fix",
-    "format": "prettier --write '{blog,docs,src,static}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
+    "format": "prettier --write '{blog,docs,src}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
   },
   "lint-staged": {
     "src/**/*.{ts,js,jsx,tsx}": "npm run lint:fix",
@@ -31,34 +31,42 @@
     "@apidevtools/json-schema-ref-parser": "^11.6.4",
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/plugin-content-docs": "^3.0.0",
+    "@docusaurus/plugin-content-pages": "^3.4.0",
     "@docusaurus/theme-common": "^3.0.0",
     "@docusaurus/theme-mermaid": "^3.0.0",
     "@intercom/messenger-js-sdk": "^0.0.11",
     "@mdx-js/react": "^3.0.0",
+    "@metamask-previews/profile-sync-controller": "0.1.4-preview-16e6df4",
     "@metamask/design-tokens": "^1.11.1",
     "@metamask/docusaurus-openrpc": "^0.4.1",
-    "@metamask/sdk": "^0.26.5",
-    "@metamask/sdk-react": "^0.26.5",
+    "@metamask/sdk": "^0.27.0",
+    "@metamask/sdk-react": "^0.27.0",
     "@rjsf/core": "^5.18.4",
     "@rjsf/utils": "^5.18.4",
     "@rjsf/validator-ajv8": "^5.18.4",
+    "@types/react": "^18.3.3",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-plugin-segment": "^1.0.4",
     "docusaurus-plugin-sentry": "^2.0.0",
     "dotenv": "^16.4.5",
+    "ethers": "^6.13.2",
     "js-cookie": "^3.0.5",
     "launchdarkly-js-client-sdk": "^3.3.0",
     "lodash.debounce": "^4.0.8",
     "node-polyfill-webpack-plugin": "^2.0.1",
-    "prettier": "^3.0.0",
+    "prettier": "^3.3.3",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
+    "react-alert": "^7.0.3",
     "react-dom": "^18.0.0",
     "react-dropdown-select": "^4.11.2",
+    "react-modal": "^3.16.1",
     "react-player": "^2.13.0",
     "react-tippy": "^1.4.0",
     "remark-codesandbox": "^0.10.1",
-    "remark-docusaurus-tabs": "^0.2.0"
+    "remark-docusaurus-tabs": "^0.2.0",
+    "sass": "^1.77.6"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^3.0.0",
@@ -68,12 +76,14 @@
     "@docusaurus/types": "^3.4.0",
     "@lavamoat/allow-scripts": "^3.0.4",
     "@tsconfig/docusaurus": "^1.0.5",
+    "@types/react-alert": "^7.0.6",
+    "@types/react-modal": "^3.16.3",
     "@typescript-eslint/parser": "^7.12.0",
     "eslint-plugin-react": "^7.34.2",
     "stylelint": "^15.0.0 ",
     "stylelint-config-standard": "^34.0.0",
     "tsc-files": "^1.1.4",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   },
   "browserslist": {
     "production": [
@@ -111,7 +121,9 @@
       "@metamask/sdk-react>@metamask/sdk>eciesjs>secp256k1": false,
       "@metamask/sdk>@metamask/sdk-communication-layer>bufferutil": false,
       "@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false,
-      "@metamask/sdk>eciesjs>secp256k1": false
+      "@metamask/sdk>eciesjs>secp256k1": false,
+      "ethers>ws>bufferutil": false,
+      "ethers>ws>utf-8-validate": false
     }
   }
 }

services/reference/linea/json-rpc-methods/eth_blocknumber.mdx

@@ -1,40 +1,10 @@
 ---
 title: "eth_blockNumber"
+hide_title: true
+hide_table_of_contents: true
 ---
 
-import Tabs from "@theme/Tabs"
-import TabItem from "@theme/TabItem"
+import ParserOpenRPC from "@site/src/components/ParserOpenRPC"
+import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"
 
-import Description from "/services/reference/_partials/_eth_blocknumber-description.mdx"
-
-<Description />
-
-## Parameters
-
-import Params from "/services/reference/_partials/_eth_blocknumber-parameters.mdx"
-
-<Params />
-
-## Returns
-
-import Returns from "/services/reference/_partials/_eth_blocknumber-returns.mdx"
-
-<Returns />
-
-## Example
-
-import Example from "/services/reference/_partials/_eth_blocknumber-example.mdx"
-
-<Example />
-
-### Request
-
-import Request from "./_eth_blocknumber-request.mdx"
-
-<Request />
-
-### Response
-
-import Response from "/services/reference/_partials/_eth_blocknumber-response.mdx"
-
-<Response />
+<ParserOpenRPC network={NETWORK_NAMES.linea} method="eth_blockNumber" />

src/components/Accordion/accordion.module.scss

@@ -0,0 +1,63 @@
+:root[data-theme="dark"] {
+  --accordion-background: #24272a;
+  --accordion-border: rgba(132, 140, 150, 0.16);
+}
+
+:root[data-theme="light"] {
+  --accordion-background: #ffffff;
+  --accordion-border: rgba(187, 192, 197, 0.4);
+}
+
+.accordion {
+  background: var(--accordion-background);
+  border: 1px solid var(--accordion-border);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .closeButton {
+      cursor: pointer;
+      margin-left: 24px;
+      display: block;
+      height: 16px;
+      line-height: 1;
+
+      .image {
+        min-width: 16px;
+        width: 16px;
+        min-height: 16px;
+        height: 16px;
+        transition: all 0.5s;
+        transform: rotate(45deg);
+
+        &.opened {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    visibility: hidden;
+    display: none;
+
+    &.opened {
+      visibility: visible;
+      display: block;
+    }
+  }
+}
+
+.accordionHeader {
+  margin: 0;
+}
+
+.accordionContainer {
+  margin: 0;
+}

src/components/Accordion/index.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import styles from "./accordion.module.scss";
+import CloseImg from "./close.svg";
+import Text from "@site/src/components/Text";
+
+interface IAccordion {
+  children: string | React.ReactElement;
+  opened?: boolean;
+}
+
+export default function Accordion({ children, opened = false }: IAccordion) {
+  const [isOpened, setIsOpened] = useState(opened);
+
+  const handleClose = () => {
+    setIsOpened((value) => !value);
+  };
+
+  const [title, ...body] = Array.isArray(children) ? children : [children];
+
+  return (
+    <div className={styles.accordion}>
+      <div className={styles.header}>
+        {title}
+        <span
+          role="button"
+          onClick={handleClose}
+          className={styles.closeButton}
+        >
+          <CloseImg className={clsx(styles.image, isOpened && styles.opened)} />
+        </span>
+      </div>
+      <div className={clsx(styles.content, isOpened && styles.opened)}>
+        {body}
+      </div>
+    </div>
+  );
+}
+
+export function AccordionHeader({
+  children,
+}: {
+  children: React.ReactElement;
+}) {
+  return (
+    <Text as="h3" className={styles.accordionHeader}>
+      {children}
+    </Text>
+  );
+}
+
+export function AccordionBody({ children }: { children: React.ReactElement }) {
+  return (
+    <Text as="p" className={styles.accordionContainer}>
+      {children}
+    </Text>
+  );
+}

src/components/Alert/alert.module.scss

@@ -0,0 +1,85 @@
+:root[data-theme="dark"] {
+  --alert-error-background: rgb(53, 40, 41);
+  --alert-error-border: #e06470;
+  --alert-success-background: rgb(34, 48, 36);
+  --alert-success-border: #28a745;
+  --alert-info-background: rgb(61, 57, 43);
+  --alert-info-border: #ffdf70;
+}
+
+:root[data-theme="light"] {
+  --alert-error-background: rgb(248, 235, 237);
+  --alert-error-border: #d73847;
+  --alert-success-background: rgb(234, 242, 235);
+  --alert-success-border: #1c8234;
+  --alert-info-background: rgb(247, 238, 231);
+  --alert-info-border: #bf5208;
+}
+
+.alert {
+  padding: 8px 36px;
+  border-radius: 4px;
+  border-left: 4px solid;
+  position: relative;
+  width: 80vw;
+  box-shadow: var(--ifm-alert-shadow);
+
+  &.info {
+    border-color: var(--alert-info-border);
+    background-color: var(--alert-info-background);
+
+    .icon {
+      color: var(--alert-info-border);
+    }
+  }
+
+  &.success {
+    border-color: var(--alert-success-border);
+    background-color: var(--alert-success-background);
+
+    .icon {
+      color: var(--alert-success-border);
+    }
+  }
+
+  &.error {
+    border-color: var(--alert-error-border);
+    background-color: var(--alert-error-background);
+
+    .icon {
+      color: var(--alert-error-border);
+    }
+  }
+
+  .icon {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+  }
+
+  .closeButton {
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    line-height: 1;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    .closeIcon {
+      min-width: 16px;
+      width: 16px;
+      min-height: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.alertTitle {
+  font-weight: 500 !important;
+  margin: 0;
+}
+
+.alertText {
+  margin: 0;
+}