diff --git a/docs/evm/guides/integrating-metamask.md b/docs/evm/guides/integrating-metamask.mdx similarity index 84% rename from docs/evm/guides/integrating-metamask.md rename to docs/evm/guides/integrating-metamask.mdx index ecd57d2bf2..f5b8943eff 100644 --- a/docs/evm/guides/integrating-metamask.md +++ b/docs/evm/guides/integrating-metamask.mdx @@ -3,10 +3,22 @@ title: Integrating Metamask sidebar_position: 1 --- +import BrowserOnly from '@docusaurus/BrowserOnly'; +import { AddNetworkButton } from '@site/src/components/addNetworkButton'; + # Wallets & Configurations This document shows how to integrate the Flow Network programmatically with your Dapp via MetaMask. +If you want to add it to your wallet now, you can click the buttons below, or follow the [manual process]. + + + {() => { + // ******* If Chain Id changes, update the Chain ID in the AddNetworkButton component ******* + return ; + }} + + ## Metamask Integrating additional networks into MetaMask can pose challenges for users who lack technical expertise and may lead to errors. Simplifying this process can greatly enhance user onboarding for your application. This guide demonstrates how to create a straightforward button within your frontend application to streamline the addition of the Flow network to MetaMask. @@ -65,3 +77,7 @@ Users of your app will need to first approve a connection to Metamask. After doi After they approve, your app will be connected to the Flow network. By using this approach to add the Flow network to Metamask, you can avoid manual user data entry and ensure that users are ready to interact with your dApp! + +{/* Reference-style links, does not render on page */} + +[manual process]: ../using.mdx \ No newline at end of file diff --git a/package.json b/package.json index 6d30ca270e..868ce85d4e 100644 --- a/package.json +++ b/package.json @@ -86,5 +86,6 @@ }, "engines": { "node": ">=20" - } -} \ No newline at end of file + }, + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" +}