diff --git a/package.json b/package.json index bd850e5e6e..cdcf3a878e 100644 --- a/package.json +++ b/package.json @@ -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", @@ -50,9 +50,10 @@ "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-player": "^2.13.0", @@ -112,4 +113,4 @@ "@metamask/sdk-react>@metamask/sdk>eciesjs>secp256k1": false } } -} \ No newline at end of file +} diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx index dd0252ee14..a8bcfbf7cc 100644 --- a/src/components/Accordion/index.tsx +++ b/src/components/Accordion/index.tsx @@ -1,45 +1,57 @@ -import React, {useState} from "react"; +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' +import CloseImg from "./close.svg"; +import Text from "@site/src/components/Text"; interface IAccordion { - children: string | React.ReactElement; + children: string | React.ReactElement; } -export default function Accordion({children}: IAccordion) { - const [isOpened, setIsOpened] = useState(true); +export default function Accordion({ children }: IAccordion) { + const [isOpened, setIsOpened] = useState(true); - const handleClose = () => { - setIsOpened(value => !value) - } + const handleClose = () => { + setIsOpened((value) => !value); + }; - const [title, ...body] = Array.isArray(children) ? children : [children] + const [title, ...body] = Array.isArray(children) ? children : [children]; - return ( -
-
- {title} - - - -
-
- {body} -
-
- ); + return ( +
+
+ {title} + + + +
+
+ {body} +
+
+ ); } -export function AccordionHeader({children}: { children: React.ReactElement }) { - return - {children} +export function AccordionHeader({ + children, +}: { + children: React.ReactElement; +}) { + return ( + + {children} + ); } -export function AccordionBody({children}: { children: React.ReactElement }) { - return - {children} +export function AccordionBody({ children }: { children: React.ReactElement }) { + return ( + + {children} + ); } diff --git a/src/components/Alert/alert.module.scss b/src/components/Alert/alert.module.scss new file mode 100644 index 0000000000..e3c3f7ea88 --- /dev/null +++ b/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; +} diff --git a/src/components/Alert/close.svg b/src/components/Alert/close.svg new file mode 100644 index 0000000000..f8962a8840 --- /dev/null +++ b/src/components/Alert/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/components/Alert/error.svg b/src/components/Alert/error.svg new file mode 100644 index 0000000000..f84e4049be --- /dev/null +++ b/src/components/Alert/error.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx new file mode 100644 index 0000000000..d6bffcb140 --- /dev/null +++ b/src/components/Alert/index.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import { positions, types } from "react-alert"; +import styles from "./alert.module.scss"; +import clsx from "clsx"; +import CloseImg from "./close.svg"; +import InfoImg from "./info.svg"; +import SuccessImg from "./success.svg"; +import ErrorImg from "./error.svg"; +import Text from "@site/src/components/Text"; + +export const options = { + position: positions.TOP_CENTER, + timeout: 10000, + offset: "5px", + containerStyle: { + zIndex: 1000, + marginTop: 60, + }, +}; + +export const AlertTemplate = ({ style, options, message, close }) => ( +
+ {options.type === types.INFO && } + {options.type === types.SUCCESS && } + {options.type === types.ERROR && } + {message} + + + +
+); + +export const AlertTitle = ({ + children, +}: { + children: string | React.ReactElement; +}) => ( + + {children} + +); + +export const AlertText = ({ + children, +}: { + children: string | React.ReactElement; +}) => ( + + {children} + +); diff --git a/src/components/Alert/info.svg b/src/components/Alert/info.svg new file mode 100644 index 0000000000..f84e4049be --- /dev/null +++ b/src/components/Alert/info.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Alert/success.svg b/src/components/Alert/success.svg new file mode 100644 index 0000000000..7fcbba068e --- /dev/null +++ b/src/components/Alert/success.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 7ebd174b98..8c2ed2bfcf 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -2,14 +2,14 @@ import React from "react"; import styles from "./button.module.scss"; interface IButton { - onClick: VoidFunction; - children: string | React.ReactElement + onClick: VoidFunction; + children: string | React.ReactElement; } -export default function Button({onClick, children}: IButton) { - return ( - - ); +export default function Button({ onClick, children }: IButton) { + return ( + + ); } diff --git a/src/components/CodeTerminal/CodeTerminal.jsx b/src/components/CodeTerminal/CodeTerminal.jsx index c6fe8575ed..d252bd09f9 100644 --- a/src/components/CodeTerminal/CodeTerminal.jsx +++ b/src/components/CodeTerminal/CodeTerminal.jsx @@ -29,7 +29,7 @@ const CodeTerminal = () => { value: keys[0].id, private: keys[0].private || "", }, - "apiKey" + "apiKey", ); return keys.map((item) => ({ label: item.name, diff --git a/src/components/CodeTerminal/ControlPanel.jsx b/src/components/CodeTerminal/ControlPanel.jsx index bcd0eb4c01..bb650ac216 100644 --- a/src/components/CodeTerminal/ControlPanel.jsx +++ b/src/components/CodeTerminal/ControlPanel.jsx @@ -24,7 +24,7 @@ const ControlPanel = ({ keysOptions = [], initValues, onChange }) => { } if (initValues?.netName?.value === NETWORKS.PALM) { const noEthMethods = initMethods.filter( - (method) => method.value !== "eth_maxPriorityFeePerGas" + (method) => method.value !== "eth_maxPriorityFeePerGas", ); updatedOptions.methods = [...noEthMethods]; } diff --git a/src/components/Faucet/Alerts.tsx b/src/components/Faucet/Alerts.tsx new file mode 100644 index 0000000000..661f5b1e7a --- /dev/null +++ b/src/components/Faucet/Alerts.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { AlertTitle, AlertText } from "@site/src/components/Alert"; + +export const AlertCommonIssue = () => ( +
+ Issue starting transaction + + There was an issue starting your transaction. Try again in a few minutes. + If the problem persists please{" "} + + contact us + + . + +
+); + +export const AlertPastActivity = () => ( +
+ No past activity + + The address used hasn’t been active on Ethereum Mainnet yet. To proceed, + please use an address that has activity on Ethereum Mainnet. For further + details, refer to our FAQ below. + +
+); + +export const AlertCooldown = () => ( +
+ Cooldown period + + You already got ETH from the faucet today. Try again in 24 hours.{" "} + + Contact us + + . + +
+); + +export const AlertSuccess = ({ url }: { url: string }) => ( +
+ Transaction successfull! + + Your transaction has been sent to the Ethereum/Sepolia network. You should + be receiving your ETH shortly.{" "} + + View on Etherscan + + . + +
+); diff --git a/src/components/Faucet/Faq.tsx b/src/components/Faucet/Faq.tsx index ccad76df34..dac96a09fa 100644 --- a/src/components/Faucet/Faq.tsx +++ b/src/components/Faucet/Faq.tsx @@ -1,158 +1,182 @@ import React from "react"; -import Accordion, {AccordionHeader, AccordionBody} from "@site/src/components/Accordion"; +import Accordion, { + AccordionHeader, + AccordionBody, +} from "@site/src/components/Accordion"; interface IFaq { - network: 'linea' | 'sepolia'; - className: string; + network: "linea" | "sepolia"; + className: string; } -export default function Faq({network, className}: IFaq) { - switch (network) { - case 'linea': - return
- - - Why must my address have Ethereum Mainnet activity to claim Linea ETH? - - - We require an address with Ethereum Mainnet activity to safeguard the faucet from - automated bots, ensuring equitable Linea ETH distribution. The amount of Linea ETH - you can receive ranges from 0 to 0.5, depending on your address’s level of activity. - No activity results in no Linea ETH. while a higher number of transactions can earn - you up to 0.5. We maintain confidentiality over the exact criteria used to determine - the amount issued to prevent any exploitation of the system, aiming to distribute - testnet ETH fairly among genuine, active users. - - - - - I’m new to Web3. What is a faucet? - - - A faucet is a platform that gives you test tokens to use when testing your smart - contracts. In this case, our faucet is giving you Sepolia ETH to test deploying - smart contracts and sending transactions before deploying your dapp in production on - Mainnet. - - - - - What is Infura? - - - Infura is the world’s most powerful suite of high availability blockchain APIs and - developer tools. Infura brings together everything you need to start building on - Web3, with infinitely scalable systems and exceptional documentation. - - - - - What is Linea? - - - Linea is a type 2 zero knowledge - Ethereum Virtual - Machine (zkEVM). A zkEVM - replicates the Ethereum environment as a rollup and allows developers to build on it - as they would on Ethereum mainnet. Linea allows you to deploy any smart contract, - use any tool, and develop as if you’re building on Ethereum. For users, this enables - experience and security guarantees of Ethereum, but with lower transaction costs and - at greater speed. - - - - - How can I get help with using this faucet? - - - Contact us with any - issues or questions - you have relating the faucet. - - - - - How can I help make this faucet better? - - - Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit - them here. - - - - - Where does Linea ETH come from? - - - Linea ETH were intially Goerli ETH that were bridged to Linea using the canonical bridge. - - -
- case 'sepolia': - return
- - - Why must my address have Ethereum Mainnet activity to claim Sepolia ETH? - - - We require an address with Ethereum Mainnet activity to safeguard the faucet from automated - bots, ensuring equitable Sepolia ETH distribution. The amount of Sepolia ETH you can receive - ranges from 0 to 0.5, depending on your address’s level of activity. No activity results in no - Sepolia ETH. while a higher number of transactions can earn you up to 0.5. We maintain - confidentiality over the exact criteria used to determine the amount issued to prevent any - exploitation of the system, aiming to distribute testnet ETH fairly among genuine, active users. - - - - - I’m new to Web3. What is a faucet? - - - A faucet is a platform that gives you test tokens to use when testing your smart contracts. In - this case, our faucet is giving you Sepolia ETH to test deploying smart contracts and sending - transactions before deploying your dapp in production on Mainnet. - - - - - What is Infura? - - - Infura is the world’s most powerful suite of high availability blockchain APIs and developer - tools. Infura brings together everything you need to start building on Web3, with infinitely - scalable systems and exceptional documentation. - - - - - How can I get help with using this faucet? - - - Contact us with any - issues or questions - you have relating the faucet. - - - - - How can I help make this faucet better? - - - Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit - them here. - - - - - Where does Sepolia ETH come from? - - - The Sepolia ETH comes from our partnership with the Ethereum Foundation. We collaborate with - them to support the development community by maintaining an always on and reliable faucet - enviroment for the community. - - -
- } -} \ No newline at end of file +export default function Faq({ network, className }: IFaq) { + switch (network) { + case "linea": + return ( +
+ + + Why must my address have Ethereum Mainnet activity to claim Linea + ETH? + + + We require an address with Ethereum Mainnet activity to safeguard + the faucet from automated bots, ensuring equitable Linea ETH + distribution. The amount of Linea ETH you can receive ranges from + 0 to 0.5, depending on your address’s level of activity. No + activity results in no Linea ETH. while a higher number of + transactions can earn you up to 0.5. We maintain confidentiality + over the exact criteria used to determine the amount issued to + prevent any exploitation of the system, aiming to distribute + testnet ETH fairly among genuine, active users. + + + + + I’m new to Web3. What is a faucet? + + + A faucet is a platform that gives you test tokens to use when + testing your smart contracts. In this case, our faucet is giving + you Sepolia ETH to test deploying smart contracts and sending + transactions before deploying your dapp in production on Mainnet. + + + + What is Infura? + + Infura is the world’s most powerful suite of high availability + blockchain APIs and developer tools. Infura brings together + everything you need to start building on Web3, with infinitely + scalable systems and exceptional documentation. + + + + What is Linea? + + + Linea + {" "} + is a type 2 zero knowledge Ethereum Virtual Machine (zkEVM). A + zkEVM replicates the Ethereum environment as a rollup and allows + developers to build on it as they would on Ethereum mainnet. Linea + allows you to deploy any smart contract, use any tool, and develop + as if you’re building on Ethereum. For users, this enables + experience and security guarantees of Ethereum, but with lower + transaction costs and at greater speed. + + + + + How can I get help with using this faucet? + + + + Contact us + {" "} + with any issues or questions you have relating the faucet. + + + + + How can I help make this faucet better? + + + Have ideas on how to improve the faucet? Awesome! We’d love to + hear them. Submit them{" "} + + here. + + + + + Where does Linea ETH come from? + + Linea ETH were intially Goerli ETH that were bridged to Linea + using the canonical{" "} + + bridge. + + + +
+ ); + case "sepolia": + return ( +
+ + + Why must my address have Ethereum Mainnet activity to claim + Sepolia ETH? + + + We require an address with Ethereum Mainnet activity to safeguard + the faucet from automated bots, ensuring equitable Sepolia ETH + distribution. The amount of Sepolia ETH you can receive ranges + from 0 to 0.5, depending on your address’s level of activity. No + activity results in no Sepolia ETH. while a higher number of + transactions can earn you up to 0.5. We maintain confidentiality + over the exact criteria used to determine the amount issued to + prevent any exploitation of the system, aiming to distribute + testnet ETH fairly among genuine, active users. + + + + + I’m new to Web3. What is a faucet? + + + A faucet is a platform that gives you test tokens to use when + testing your smart contracts. In this case, our faucet is giving + you Sepolia ETH to test deploying smart contracts and sending + transactions before deploying your dapp in production on Mainnet. + + + + What is Infura? + + Infura is the world’s most powerful suite of high availability + blockchain APIs and developer tools. Infura brings together + everything you need to start building on Web3, with infinitely + scalable systems and exceptional documentation. + + + + + How can I get help with using this faucet? + + + + Contact us + {" "} + with any issues or questions you have relating the faucet. + + + + + How can I help make this faucet better? + + + Have ideas on how to improve the faucet? Awesome! We’d love to + hear them. Submit them{" "} + + here. + + + + + Where does Sepolia ETH come from? + + The Sepolia ETH comes from our partnership with the Ethereum + Foundation. We collaborate with them to support the development + community by maintaining an always on and reliable faucet + enviroment for the community. + + +
+ ); + } +} diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx index d682543b9c..78c296c747 100644 --- a/src/components/Faucet/index.tsx +++ b/src/components/Faucet/index.tsx @@ -1 +1,7 @@ -export {default as Faq} from './Faq' \ No newline at end of file +export { default as Faq } from "./Faq"; +export { + AlertCommonIssue, + AlertPastActivity, + AlertCooldown, + AlertSuccess, +} from "./Alerts"; diff --git a/src/components/ParserOpenRPC/AuthBox/index.tsx b/src/components/ParserOpenRPC/AuthBox/index.tsx index ff0fbaed86..5254f82c85 100644 --- a/src/components/ParserOpenRPC/AuthBox/index.tsx +++ b/src/components/ParserOpenRPC/AuthBox/index.tsx @@ -9,7 +9,9 @@ interface AuthBoxProps { export const AuthBox = ({ handleConnect }: AuthBoxProps) => { return (
-

Connect MetaMask to test requests using your wallet

+

+ Connect MetaMask to test requests using your wallet +

diff --git a/src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx b/src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx index 8b06e1c5d3..0cb4a1e776 100644 --- a/src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx +++ b/src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx @@ -27,14 +27,14 @@ export const CollapseBox = ({
diff --git a/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx b/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx index 87c8d12848..887b977a4f 100644 --- a/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx +++ b/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx @@ -145,7 +145,7 @@ const renderSchema = (schemaItem, schemas, name) => { renderEnum( schemaItem.schema.enum, schemaItem.schema.title, - schemaItem.schema.description + schemaItem.schema.description, )}
); diff --git a/src/components/ParserOpenRPC/DetailsBox/index.tsx b/src/components/ParserOpenRPC/DetailsBox/index.tsx index 8f2afb5daf..a7c6523d32 100644 --- a/src/components/ParserOpenRPC/DetailsBox/index.tsx +++ b/src/components/ParserOpenRPC/DetailsBox/index.tsx @@ -49,7 +49,7 @@ export default function DetailsBox({ as="h2" className={clsx( styles.secondaryHeading, - "padding-top--lg padding-bottom--md" + "padding-top--lg padding-bottom--md", )} > Parameters @@ -64,7 +64,7 @@ export default function DetailsBox({ className={clsx( styles.secondaryHeading, styles.borderBottomLine, - "padding-top--lg padding-vert--md" + "padding-top--lg padding-vert--md", )} > Returns diff --git a/src/components/ParserOpenRPC/ErrorsBox/index.tsx b/src/components/ParserOpenRPC/ErrorsBox/index.tsx index e38c73430a..276a12ddeb 100644 --- a/src/components/ParserOpenRPC/ErrorsBox/index.tsx +++ b/src/components/ParserOpenRPC/ErrorsBox/index.tsx @@ -32,7 +32,7 @@ export default function ErrorsBox({ errors }: ErrorsBoxProps) { styles.errRowHeading, colorMode === "light" ? styles.errRowHeadingLightView - : styles.errRowHeadingDarkView + : styles.errRowHeadingDarkView, )} >
Code
diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx index 8730c23cd8..9aa0368154 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx @@ -27,14 +27,14 @@ export const ConditionalField = (props: FieldTemplateProps) => { }; const onDropdownOptionClick = (e) => { const selectedSchema = listItems.find( - ({ title }) => title === e.target.dataset.value + ({ title }) => title === e.target.dataset.value, ); const isNullTypeSchema = checkForNullTypeSchema(selectedSchema?.type); if (isNullTypeSchema) { onChange(null); } else { setSelectedTypeSchema( - listItems.find(({ title }) => title === e.target.dataset.value) + listItems.find(({ title }) => title === e.target.dataset.value), ); showComplexTypeView(); } @@ -80,7 +80,7 @@ export const ConditionalField = (props: FieldTemplateProps) => { { setIsOpened(!isOpened); @@ -93,21 +93,21 @@ export const ConditionalField = (props: FieldTemplateProps) => { styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, - !isOpened && styles.chevronIconDown + !isOpened && styles.chevronIconDown, )} />
    {listItems?.map((listItem, index) => ( diff --git a/src/components/ParserOpenRPC/InteractiveBox/index.tsx b/src/components/ParserOpenRPC/InteractiveBox/index.tsx index 65a85bb9be..420b2c17cd 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/index.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/index.tsx @@ -51,7 +51,7 @@ export default function InteractiveBox({ const defaultExampleFormData = examples ? Object.fromEntries( - examples[0].params.map(({ name, value }) => [name, value]) + examples[0].params.map(({ name, value }) => [name, value]), ) : {}; const schema: RJSFSchema = { @@ -60,7 +60,7 @@ export default function InteractiveBox({ }, type: "object", properties: Object.fromEntries( - params.map(({ name, schema }) => [name, schema]) + params.map(({ name, schema }) => [name, schema]), ), }; const uiSchema: UiSchema = { @@ -170,7 +170,7 @@ export default function InteractiveBox({ styles.tableFooterRow, isLightTheme ? styles.tableFooterRowLight - : styles.tableFooterRowDark + : styles.tableFooterRowDark, )} >
    @@ -203,7 +203,7 @@ export default function InteractiveBox({ className={clsx( global.secondaryBtn, styles.footerButtonRight, - styles.footerButtonRightOutline + styles.footerButtonRightOutline, )} onClick={handleCancelClick} > diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx index 008985110d..7b2b7192cf 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx @@ -66,7 +66,7 @@ export const ArrayFieldTemplate = ({ @@ -78,7 +78,7 @@ export const ArrayFieldTemplate = ({ styles.chevronIcon, isSimpleArray ? collapsed && styles.chevronIconDown - : styles.chevronIconRight + : styles.chevronIconRight, )} /> @@ -94,7 +94,7 @@ export const ArrayFieldTemplate = ({
    {isMobile && ( diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx index 081581292b..8d0564a3ab 100644 --- a/src/components/Text/index.tsx +++ b/src/components/Text/index.tsx @@ -3,28 +3,20 @@ import styles from "./text.module.scss"; import clsx from "clsx"; interface IText { - as?: 'p' | 'h1' | 'h2' | 'h3'; - children: string | React.ReactElement; - className?: string; + as?: "p" | "h1" | "h2" | "h3"; + children: string | React.ReactElement; + className?: string; } -export default function Text({as = 'p', children, className}: IText) { - switch (as) { - case 'h1': - return

    - {children} -

    - case 'h2': - return

    - {children} -

    - case 'h3': - return

    - {children} -

    - default: - return

    - {children} -

    ; - } -} \ No newline at end of file +export default function Text({ as = "p", children, className }: IText) { + switch (as) { + case "h1": + return

    {children}

    ; + case "h2": + return

    {children}

    ; + case "h3": + return

    {children}

    ; + default: + return

    {children}

    ; + } +} diff --git a/src/globals.d.ts b/src/globals.d.ts index ec19b332d4..d768e1a314 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -1,5 +1,5 @@ -declare module '*.svg' { - import {FC, SVGProps} from 'react' - const content: FC> - export default content -} \ No newline at end of file +declare module "*.svg" { + import { FC, SVGProps } from "react"; + const content: FC>; + export default content; +} diff --git a/src/hooks/store.ts b/src/hooks/store.ts index 1c4e59f87a..151834dd83 100644 --- a/src/hooks/store.ts +++ b/src/hooks/store.ts @@ -17,11 +17,11 @@ export interface EIP1193Provider { path?: string; sendAsync?: ( request: { method: string; params?: Array }, - callback: (error: Error | null, response: unknown) => void + callback: (error: Error | null, response: unknown) => void, ) => void; send?: ( request: { method: string; params?: Array }, - callback: (error: Error | null, response: unknown) => void + callback: (error: Error | null, response: unknown) => void, ) => void; request: (request: { method: string; diff --git a/src/hooks/useUser.js b/src/hooks/useUser.js index c205f2ce4c..5160c9d21b 100644 --- a/src/hooks/useUser.js +++ b/src/hooks/useUser.js @@ -15,7 +15,7 @@ export default function useUser() { const userId = response.data.id; const upData = await fetch( `${API_URL}/api/v1/users/${userId}/projects`, - GET_OPTIONS + GET_OPTIONS, ); if (upData.ok) { const upProjects = await upData.json(); diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx index a29920ed40..6761eba9ef 100644 --- a/src/pages/developer-tools/faucet.tsx +++ b/src/pages/developer-tools/faucet.tsx @@ -1,30 +1,51 @@ -import React from 'react'; -import Layout from '@theme/Layout'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import styles from './faucet.module.scss' -import Button from '@site/src/components/Button' -import {Faq} from '@site/src/components/Faucet' +import React from "react"; +import Layout from "@theme/Layout"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import styles from "./faucet.module.scss"; +import Button from "@site/src/components/Button"; +import { Faq } from "@site/src/components/Faucet"; +import { useAlert } from "react-alert"; +import { AlertCommonIssue, AlertCooldown, AlertSuccess } from "@site/src/components/Faucet"; export default function Faucet() { - return ( - -
    - MetaMask Faucet - -
    -
    - - -
    Ethereum Sepolia
    - -     - -
    Linea Sepolia
    - -     -     -
    -     - ); -} \ No newline at end of file + const alert = useAlert(); + + return ( + +
    + MetaMask Faucet + +
    +
    + + +
    Ethereum Sepolia
    + +     + +
    Linea Sepolia
    + +     +     +
    +     + ); +} diff --git a/src/pages/developer-tools/index.tsx b/src/pages/developer-tools/index.tsx index b7cb9fb21b..15e6183ead 100644 --- a/src/pages/developer-tools/index.tsx +++ b/src/pages/developer-tools/index.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import {Redirect} from '@docusaurus/router'; +import React from "react"; +import { Redirect } from "@docusaurus/router"; export default function DeveloperTools() { - return ; + return ; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 18fa0f2b05..9ac1402e5d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -39,7 +39,7 @@ function DevBanner() { className={clsx( "hero__title", styles.devBannerTitle, - styles.devBannerForceColor + styles.devBannerForceColor, )} > {"Contribute to MetaMask"} @@ -48,7 +48,7 @@ function DevBanner() { className={clsx( "hero__subtitle", styles.devBannerSubtitle, - styles.devBannerForceColor + styles.devBannerForceColor, )} > Join the MetaMask developer community and learn how to contribute to @@ -57,7 +57,7 @@ function DevBanner() { diff --git a/src/plugins/plugin-json-rpc.ts b/src/plugins/plugin-json-rpc.ts index 2cb8574fab..8d0e493c5a 100644 --- a/src/plugins/plugin-json-rpc.ts +++ b/src/plugins/plugin-json-rpc.ts @@ -15,7 +15,7 @@ async function fetchData(url: string, name: string): Promise { } async function fetchMultipleData( - requests: { url: string; name: string }[] + requests: { url: string; name: string }[], ): Promise { const promises = requests.map(({ url, name }) => fetchData(url, name)); const responses = await Promise.all(promises); diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx index 37791c5337..00c38f130e 100644 --- a/src/theme/DocCard/index.tsx +++ b/src/theme/DocCard/index.tsx @@ -96,7 +96,7 @@ function CardCategory({ description: "The default description for a category card in the generated index about how many items this category includes", }, - { count: item.items.length } + { count: item.items.length }, ) } /> diff --git a/src/theme/DocItem/Tags/index.jsx b/src/theme/DocItem/Tags/index.jsx index d0d9e39fb5..fe06984296 100644 --- a/src/theme/DocItem/Tags/index.jsx +++ b/src/theme/DocItem/Tags/index.jsx @@ -9,7 +9,7 @@ function TagsRow(props) {
    @@ -28,7 +28,7 @@ export default function DocItemTags() { className={clsx( ThemeClassNames.docs.docFooter, "docusaurus-mt-lg", - "margin-top--sm" + "margin-top--sm", )} > {canDisplayTagsRow && } diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index a98ac52c79..b418f19f63 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -25,7 +25,7 @@ export default function LayoutWrapper({ children }) { const [newReferenceEnabled, setNewReferenceEnabled] = useState(false); const metamaskNetwork = netData?.find( - (net) => net.name === NETWORK_NAMES.metamask + (net) => net.name === NETWORK_NAMES.metamask, ); const metamaskMethods = metamaskNetwork?.data?.methods?.map((item) => item.name) || []; @@ -36,7 +36,7 @@ export default function LayoutWrapper({ children }) { const methodPath = currentPath.replace(REF_PATH, "").replace("/", ""); const page = metamaskMethods.find( (name) => - name.toLowerCase() === methodPath && !EXEPT_METHODS.includes(name) + name.toLowerCase() === methodPath && !EXEPT_METHODS.includes(name), ); return page; } @@ -61,7 +61,7 @@ export default function LayoutWrapper({ children }) { {() => { if (!ldReady) { - return null + return null; } return ( <> diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx index 9c7b5e65da..14f25cb607 100644 --- a/src/theme/Root.tsx +++ b/src/theme/Root.tsx @@ -1,29 +1,34 @@ import React, { ReactChild } from "react"; -import { MetaMaskProvider } from '@metamask/sdk-react'; -import BrowserOnly from '@docusaurus/BrowserOnly'; +import { MetaMaskProvider } from "@metamask/sdk-react"; +import BrowserOnly from "@docusaurus/BrowserOnly"; +import { transitions, positions, Provider as AlertProvider } from "react-alert"; +import { AlertTemplate, options } from "@site/src/components/Alert"; -export default function Root({ children }: { children: ReactChild}) { +export default function Root({ children }: { children: ReactChild }) { return ( Loading...
    }> - { - () => { - return ( - + {() => { + return ( + + {children} - - ) - } - } + + + ); + }} ); -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index cdbdb7595a..5102871b5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,7 +1664,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2": +"@babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": version: 7.24.8 resolution: "@babel/runtime@npm:7.24.8" dependencies: @@ -8254,6 +8254,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.0.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": ^7.8.7 + csstype: ^3.0.2 + checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c + languageName: node + linkType: hard + "dom-serializer@npm:^1.0.1": version: 1.4.1 resolution: "dom-serializer@npm:1.4.1" @@ -13407,9 +13417,10 @@ __metadata: 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-player: ^2.13.0 @@ -16198,12 +16209,12 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.0.0": - version: 3.3.2 - resolution: "prettier@npm:3.3.2" +"prettier@npm:^3.3.3": + version: 3.3.3 + resolution: "prettier@npm:3.3.3" bin: prettier: bin/prettier.cjs - checksum: 5557d8caed0b182f68123c2e1e370ef105251d1dd75800fadaece3d061daf96b1389141634febf776050f9d732c7ae8fd444ff0b4a61b20535e7610552f32c69 + checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e languageName: node linkType: hard @@ -16624,6 +16635,19 @@ __metadata: languageName: node linkType: hard +"react-alert@npm:^7.0.3": + version: 7.0.3 + resolution: "react-alert@npm:7.0.3" + dependencies: + prop-types: ^15.7.2 + react-transition-group: ^4.4.1 + peerDependencies: + react: ^16.8.1 || ^17 + react-dom: ^16.8.1 || ^17 + checksum: e38918db9ec2dcea093ba6eaf5f125254ff2b43bb3b399aaf2a5ab5c28a476cb55352ea9efb1e6433705c35f6c33830a962e07f094764adf54419a5019cddbb1 + languageName: node + linkType: hard + "react-dev-utils@npm:^12.0.1": version: 12.0.1 resolution: "react-dev-utils@npm:12.0.1" @@ -16895,6 +16919,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.1": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1 + languageName: node + linkType: hard + "react-universal-interface@npm:^0.6.2": version: 0.6.2 resolution: "react-universal-interface@npm:0.6.2"