diff --git a/developer-tools/dashboard/index.md b/developer-tools/dashboard/index.md index 19fe7fd7c75..9b407b34e3c 100644 --- a/developer-tools/dashboard/index.md +++ b/developer-tools/dashboard/index.md @@ -9,7 +9,7 @@ import Banner from '@site/src/components/Banner' # Infura dashboard documentation -The Infura dashboard provides users with a comprehensive overview and control of their blockchain infrastructure. It serves +The Infura dashboard provides developers with a comprehensive overview and control of their blockchain infrastructure. It serves as a central hub for managing API keys and access, monitoring usage, and accessing account and billing information. diff --git a/docusaurus.config.js b/docusaurus.config.js index 59e8155a04d..11daf0a983d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -190,6 +190,11 @@ const config = { label: "What's new?", position: "right", }, + { + href: "https://support.metamask.io/", + label: "User support", + position: "right", + }, /* Language drop down { type: "localeDropdown", @@ -273,6 +278,10 @@ const config = { label: "Contribute to the docs", href: "https://github.com/MetaMask/metamask-docs/blob/main/CONTRIBUTING.md", }, + { + label: "MetaMask user support", + href: "https://support.metamask.io/", + }, ], }, { diff --git a/snaps/index.mdx b/snaps/index.mdx index 187b96a6c1b..5f29e53b93c 100644 --- a/snaps/index.mdx +++ b/snaps/index.mdx @@ -176,3 +176,7 @@ MetaMask Snaps team and community on [GitHub discussions](https://github.com/Met and the **mm-snaps-dev** channel on [Consensys Discord](https://discord.gg/consensys). See the full list of [Snaps resources](learn/resources.md) for more information. + +:::info MetaMask user support +If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). +::: diff --git a/src/components/Card.tsx b/src/components/Card.tsx index ea6fbda0192..2758499236e 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -11,7 +11,7 @@ export type CardItem = { export default function Card({ title, link, description }: CardItem) { return ( -
+

{title}

{description}
diff --git a/src/components/CardSection.tsx b/src/components/CardSection.tsx new file mode 100644 index 00000000000..e22b4972ae6 --- /dev/null +++ b/src/components/CardSection.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import Card, { type CardItem } from "@site/src/components/Card"; + +const CardList: CardItem[] = [ + { + title: "Wallet", + link: "/wallet", + description: (<> + Integrate your dapp with MetaMask using the Wallet API. You can interact with your users' Ethereum accounts from multiple dapp platforms. + ), + }, + { + title: "Snaps", + link: "/snaps", + description: (<> + Extend the functionality of MetaMask using Snaps. You can create a Snap to add support for custom networks, account types, APIs, and more. + ), + }, + { + title: "Services", + link: "/services", + description: (<> + Power your dapp or Snap using services provided by MetaMask and Infura. This includes APIs aimed at optimizing essential development tasks. + ), + }, + { + title: "Infura dashboard", + link: "/developer-tools/dashboard", + description: (<> + Use the Infura dashboard as a central hub for managing your Infura API keys, monitoring usage, and accessing account and billing information. + ), + }, +]; + +export default function CardSection(): JSX.Element { + return ( +
+
+ {CardList.map((props, idx) => ())} +
+
+ ); +} diff --git a/src/components/SnapsSection.tsx b/src/components/SnapsSection.tsx deleted file mode 100644 index 003accc89dd..00000000000 --- a/src/components/SnapsSection.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import Card, { type CardItem } from "@site/src/components/Card"; - -const CardList: CardItem[] = [ - { - title: "🏁 Snaps quickstart", - link: "/snaps/get-started/quickstart", - description: (<> - Get started quickly by creating and customizing a simple Snap, using the Snaps template built - with React and TypeScript. - ), - }, - { - title: "⚙️ Snaps tutorials", - link: "/snaps/learn/tutorials", - description: (<> - Follow the step-by-step tutorials to create Snaps that estimate gas fees, provide - transaction insights with custom UI, and more. - ), - }, - { - title: "🌐 Snaps API", - link: "/snaps/reference/snaps-api", - description: (<> - Use the Snaps API to modify the functionality of MetaMask and communicate between dapps and Snaps. - ), - }, -]; - -export default function SnapsSection(): JSX.Element { - return ( -
-

Extend the functionality of MetaMask using Snaps

-

- A Snap is a JavaScript program run in an isolated environment that customizes the MetaMask - wallet experience. You can create a Snap that adds new API methods, adds support for - different blockchain protocols, or modifies existing functionalities. -

-
- {CardList.map((props, idx) => ())} -
-
- ); -} diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx deleted file mode 100644 index ea9413c4dec..00000000000 --- a/src/components/WalletSection.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import Card, { type CardItem } from "@site/src/components/Card"; - -const CardList: CardItem[] = [ - { - title: "🏁 Wallet quickstart", - link: "/wallet/how-to/connect", - description: (<> - Get started quickly by connecting your React dapp to MetaMask and other wallets in your users' browsers. - ), - }, - { - title: "⚙️ Wallet tutorials", - link: "/wallet/tutorials", - description: (<> - Follow the step-by-step tutorials to create a simple React dapp and integrate it with MetaMask. - ), - }, - { - title: "🌐 Wallet API", - link: "/wallet/reference/json-rpc-api", - description: (<> - Use the JSON-RPC methods of MetaMask's Wallet API to interact with your users' Ethereum accounts. - ), - }, -]; - -export default function WalletSection(): JSX.Element { - return ( -
-

Integrate your dapp with the MetaMask wallet

-

- Your dapp can use the Wallet API to request users' Ethereum accounts, read data from - connected blockchains, suggest that the user sign messages and transactions, - and perform other functions on MetaMask from multiple dapp platforms. -

-
- {CardList.map((props, idx) => ())} -
-
- ); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fb66a4c5bee..cec632cbd8b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,8 +3,7 @@ import clsx from "clsx"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import WalletSection from "@site/src/components/WalletSection"; -import SnapsSection from "@site/src/components/SnapsSection"; +import CardSection from "@site/src/components/CardSection"; import styles from "./index.module.css"; function HomepageHeader() { @@ -51,8 +50,7 @@ export default function Home(): JSX.Element { title={"Home"}>
- - +
diff --git a/wallet/index.mdx b/wallet/index.mdx index 57a53f8d0bd..07cf3ac6d16 100644 --- a/wallet/index.mdx +++ b/wallet/index.mdx @@ -72,3 +72,7 @@ If you're new to integrating dapps with MetaMask, check out the following topics If you have questions about integrating your dapp with MetaMask, you can interact with the MetaMask team and community on the MetaMask channels on [Consensys Discord](https://discord.gg/consensys). + +:::info MetaMask user support +If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/). +:::