Resolve merge conflicts

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.
 
 <Banner>

docusaurus.config.js

@@ -199,6 +199,11 @@ const config = {
             label: "What's new?",
             position: "right",
           },
+          {
+            href: "https://support.metamask.io/",
+            label: "User support",
+            position: "right",
+          },
           /* Language drop down
           {
             type: "localeDropdown",
@@ -225,17 +230,9 @@ const config = {
             title: "Documentation",
             items: [
               {
-                label: "Home",
-                to: "/",
-              },
-              {
-                label: "MetaMask wallet",
+                label: "Wallet",
                 to: "/wallet",
               },
-              {
-                label: "MetaMask SDK",
-                to: "/wallet/how-to/use-sdk",
-              },
               {
                 label: "Snaps",
                 to: "/snaps",
@@ -244,6 +241,10 @@ const config = {
                 label: "Services",
                 to: "/services",
               },
+              {
+                label: "Infura dashboard",
+                to: "/developer-tools/dashboard",
+              },
             ],
           },
           {
@@ -282,6 +283,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/",
+              },
             ],
           },
           {

services/reference/blast/index.md

@@ -11,6 +11,8 @@ import CardList from '@site/src/components/CardList'
 Blast is supported through the [DIN](https://www.infura.io/solutions/decentralized-infrastructure-service) service,
 meaning calls to the network are routed to [partner infrastructure providers](#partners-and-privacy-policies).
 
+Infura provides Open Beta access to Blast. During this period, there might be feature limitations. Performance issues are not expected, but they are possible as we optimize and stabilize the service.
+
 :::
 
 Blast is an Ethereum layer 2 (L2) scaling solution that uses an optimistic rollup architecture, providing a

services/reference/mantle/index.md

@@ -11,6 +11,8 @@ import CardList from '@site/src/components/CardList'
 Mantle is supported through the [DIN](https://www.infura.io/solutions/decentralized-infrastructure-service) service,
 meaning calls to the network are routed to [partner infrastructure providers](#partners-and-privacy-policies).
 
+Infura provides Open Beta access to Mantle. During this period, there might be feature limitations. Performance issues are not expected, but they are possible as we optimize and stabilize the service.
+
 :::
 
 Mantle is an Ethereum layer 2 (L2) scaling solution that leverages an optimistic rollup architecture

services/reference/zksync/index.md

@@ -11,7 +11,7 @@ import CardList from '@site/src/components/CardList'
 ZKsync Era is supported through the [DIN](https://www.infura.io/solutions/decentralized-infrastructure-service) service,
 meaning calls to the network are routed to [partner infrastructure providers](#partners-and-privacy-policies).
 
-Infura provides public beta access to ZKsync Era.
+Infura provides Open Beta access to the ZKsync Era network. During this period, there might be feature limitations. Performance issues are not expected, but they are possible as we optimize and stabilize the service.
 
 Currently, historical state data starting from June 19th, 2024 is available. Full historical state information for ZKsync Era will be announced when it is available.
 

snaps/index.mdx

@@ -189,3 +189,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/).
+:::

src/components/Card.tsx

@@ -11,7 +11,7 @@ export type CardItem = {
 
 export default function Card({ title, link, description }: CardItem) {
   return (
-    <div className="col col--4 margin-top--sm margin-bottom--md">
+    <div className="col col--6 margin-bottom--lg">
       <Link className={clsx(styles.root, "card")} href={link}>
         <div className="card__header">
           <h3>{title}</h3>

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&apos; 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 (
+    <section className="container margin-top--sm margin-bottom--lg">
+      <div className="row">
+        {CardList.map((props, idx) => (<Card key={idx} {...props} />))}
+      </div>
+    </section>
+  );
+}

src/components/CodeTerminal/CodeTerminal.jsx

@@ -1,13 +1,11 @@
-import React, { useState, useMemo } from "react"
-import useUser from "@site/src/hooks/useUser"
-import TerminalViewBox from "./TerminalViewBox"
-import ControlPanel from "./ControlPanel"
-import { INFO_MSG } from "./AlertMsg"
-import MessageBox from "@site/src/components/MessageBox/MessageBox"
-import Select from "react-dropdown-select"
-import { INIT_REQ_SET } from "@site/src/lib/constants"
-import { trackClickForSegmentAnalytics } from "@site/src/lib/segmentAnalytics"
-import Heading from "@theme/Heading"
+import React, { useState, useMemo } from "react";
+import useUser from "@site/src/hooks/useUser";
+import TerminalViewBox from "./TerminalViewBox";
+import ControlPanel from "./ControlPanel";
+import { INFO_MSG } from "./AlertMsg";
+import MessageBox from "@site/src/components/MessageBox/MessageBox";
+import { INIT_REQ_SET } from "@site/src/lib/constants";
+import Heading from '@theme/Heading'
 
 const CodeTerminal = () => {
   const { user, keys, loading: keysLoading } = useUser()
@@ -98,12 +96,6 @@ const CodeTerminal = () => {
         method: "GET",
       }
     }
-    trackClickForSegmentAnalytics({
-      type: "Submit Button",
-      clickText: "Send Request",
-      location: "https://docs.infura.io/",
-      userId: user.id,
-    })
     try {
       const res = await fetch(URL, params)
       if (res.ok) {

src/components/ParserOpenRPC/AuthBox/index.tsx

@@ -1,10 +1,13 @@
-import React from "react"
-import Link from "@docusaurus/Link"
-import styles from "./styles.module.css"
-import global from "../global.module.css"
+import React from "react";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import global from "../global.module.css";
+import { EIP6963ProviderDetail } from "@site/src/hooks/store.ts"
 
 interface AuthBoxProps {
-  isMetamaskInstalled: boolean
+  metamaskProviders: any;
+  handleConnect: (i) => void;
+  selectedProvider?: number;
 }
 
 const MetamaskInstallMessage = () => (
@@ -19,6 +22,39 @@ const MetamaskInstallMessage = () => (
   </div>
 )
 
+<<<<<<< HEAD
 export const AuthBox = ({ isMetamaskInstalled }: AuthBoxProps) => {
   return <>{!isMetamaskInstalled ? <MetamaskInstallMessage /> : null}</>
 }
+=======
+export const AuthBox = ({ metamaskProviders = [], selectedProvider, handleConnect }: AuthBoxProps) => {
+  if (metamaskProviders.length === 0) {
+    return <MetamaskInstallMessage />
+  }
+
+  if (metamaskProviders.length > 0) {
+    return null
+  }
+
+  return (
+    <div className={styles.msgWrapper}>
+      <p>Select a MetaMask provider to use interactive features:</p>
+      <div className={styles.mmBtnRow}>
+        {metamaskProviders.map((provider: EIP6963ProviderDetail, i) => (
+          <div key={provider.info.uuid} className={styles.mmBtnCol}>
+            <button className={styles.mmBtn} onClick={() => handleConnect(i)}>
+              <img
+                src={provider.info.icon}
+                alt={provider.info.name}
+                width="30"
+              />
+              <div className="padding-left--md">{provider.info.name}</div>
+              {selectedProvider === i && <span className={styles.mmBtnCheck}>&#10003;</span>}
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+>>>>>>> main

src/components/ParserOpenRPC/AuthBox/styles.module.css

@@ -17,3 +17,37 @@
   font-size: 14px;
   line-height: 22px;
 }
+
+.mmBtnRow {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mmBtnCol {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.mmBtn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 16px 30px 16px 20px;
+  width: 100%;
+  background: none;
+  border-radius: 10px;
+  outline: none;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  border: 1px solid rgba(3, 118, 201, 1);
+  color: rgba(3, 118, 201, 1);
+}
+
+.mmBtnCheck {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 15px;
+  font-size: 16px;
+}

src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx

@@ -46,9 +46,7 @@ export const CollapseBox = ({
           )}
         ></div>
       </button>
-      <Collapsible lazy collapsed={collapsed}>
-        {children}
-      </Collapsible>
+      <Collapsible animation={{ duration: 100, easing: "ease-in" }} lazy={false} collapsed={collapsed}>{children}</Collapsible>
     </div>
   )
 }

src/components/ParserOpenRPC/CollapseBox/styles.module.css

@@ -22,9 +22,9 @@
   padding: 12px 22px;
   margin-bottom: 1px;
   cursor: pointer;
-  transition-property: "border-color", "background-color";
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
+  /*transition-property: 'border-color', 'background-color';*/
+  /*transition-duration: .2s;*/
+  /*transition-timing-function: ease;*/
 }
 
 .collapseIcon {
@@ -34,7 +34,7 @@
   border-top: 2px solid #0376c9;
   border-right: 2px solid #0376c9;
   transform: rotate(45deg);
-  transition: transform 0.2s ease;
+  /*transition: transform .2s ease;*/
 }
 
 .collapseBtn:hover {
@@ -61,6 +61,7 @@
   border-color: transparent;
   width: 100%;
   border-radius: 0;
+  border-bottom: 1px solid #848C96;
 }
 
 .collapsedBtnView:hover {

src/components/ParserOpenRPC/DetailsBox/styles.module.css

@@ -19,10 +19,13 @@
 }
 
 .paramItemWrapper {
-  border-top: 1px solid #848c96;
   padding: 0 1rem;
 }
 
+.paramItemWrapper:not(:first-child) {
+  border-top: 1px solid #848C96;
+}
+
 .borderTopLine {
   border-top: 1px solid #848c96;
 }

src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx

@@ -77,13 +77,8 @@ export const ConditionalField = (props: FieldTemplateProps) => {
             className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}
           >
             {formData === undefined ? "" : String(formData)}
-            <span className={styles.tableColumnType}>
-              <span
-                className={styles.dropdown}
-                onClick={() => {
-                  setIsOpened(!isOpened)
-                }}
-              >
+            <span className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)} onClick={() => { setIsOpened(!isOpened); }}>
+              <span className={styles.dropdown}>
                 {schema?.anyOf ? "anyOf" : "oneOf"}
                 <span
                   className={clsx(
@@ -114,7 +109,7 @@ export const ConditionalField = (props: FieldTemplateProps) => {
                     onClick={onDropdownOptionClick}
                     data-value={listItem.title}
                   >
-                    {`${listItem.title}: ${listItem?.enum ? "enum" : listItem.type}`}
+                    {listItem.title}
                   </li>
                 ))}
               </ul>

src/components/ParserOpenRPC/InteractiveBox/styles.module.css

@@ -61,10 +61,18 @@
   line-height: 24px;
   font-size: 14px;
 }
+.tableColumnTypeDropdown {
+  width: 100%;
+  justify-content: flex-end;
+}
+.tableColumnTypeDropdown:hover {
+  cursor: pointer;
+}
 .tableLabelIconError {
-  width: 11px;
+  position: absolute;
+  left: 4px;
+  width: 13px;
   height: 11px;
-  margin-left: 8px;
   background: url("/img/icons/error-icon.svg") no-repeat 50% 50%;
 }
 .tableColumnIcon {
@@ -105,9 +113,6 @@
 .deleteIconCentered {
   top: 50%;
 }
-.deleteIconComplex {
-  top: 27px;
-}
 .dropdown {
   display: flex;
   align-items: center;