Merge pull request #1009 from onflow/brian-doyle/add-mm-button-to-int…

…egrating-pg

Add add flow buttons to MM page and change using to .md

docs/evm/guides/integrating-metamask.md → 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].
+
+<BrowserOnly>
+  {() => {
+    // ******* If Chain Id changes, update the Chain ID in the AddNetworkButton component *******
+    return <AddNetworkButton />;
+  }}
+</BrowserOnly>
+
 ## 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

package.json

@@ -86,5 +86,6 @@
   },
   "engines": {
     "node": ">=20"
-  }
-}
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}