Merge branch 'refs/heads/main' into faucets-for-mm-docs

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

@@ -195,6 +195,11 @@ const config = {
             label: "What's new?",
             position: "right",
           },
+          {
+            href: "https://support.metamask.io/",
+            label: "User support",
+            position: "right",
+          },
           /* Language drop down
           {
             type: "localeDropdown",
@@ -221,17 +226,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",
@@ -240,6 +237,10 @@ const config = {
                 label: "Services",
                 to: "/services",
               },
+              {
+                label: "Infura dashboard",
+                to: "/developer-tools/dashboard",
+              },
             ],
           },
           {
@@ -278,6 +279,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/",
+              },
             ],
           },
           {

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/).
+:::

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></div>
         <div className="card__body">{description}</div>

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

@@ -4,11 +4,7 @@ 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'
 
 const CodeTerminal = () => {
@@ -96,12 +92,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

@@ -2,9 +2,12 @@ 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 = () => (
@@ -15,10 +18,33 @@ const MetamaskInstallMessage = () => (
   </div>
 );
 
-export const AuthBox = ({ isMetamaskInstalled }: AuthBoxProps) => {
+export const AuthBox = ({ metamaskProviders = [], selectedProvider, handleConnect }: AuthBoxProps) => {
+  if (metamaskProviders.length === 0) {
+    return <MetamaskInstallMessage />
+  }
+
+  if (metamaskProviders.length > 0) {
+    return null
+  }
+
   return (
-    <>
-      {!isMetamaskInstalled ? <MetamaskInstallMessage /> : null}
-    </>
+    <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>
   );
 };

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

@@ -25,7 +25,7 @@ export const CollapseBox = ({ children, isInitCollapsed = false }: CollapseBoxPr
         {collapsed ? "Show child attributes" : "Hide child attributes"}
         <div className={clsx(styles.collapseIcon, !collapsed && styles.collapsedIconView)}></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: .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 .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

@@ -63,8 +63,8 @@ export const ConditionalField = (props: FieldTemplateProps) => {
         <div className={styles.tableColumn}>
           <div 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(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
                 <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
@@ -77,7 +77,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;