Merge branch 'main' into trivy

MetaMask · Jul 11, 2024 · 54c400d · 54c400d
2 parents 669fdc4 + a630c5e
commit 54c400d
Show file tree

Hide file tree

Showing 26 changed files with 314 additions and 153 deletions.
diff --git 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.
 
 <Banner>

diff --git 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",
@@ -216,17 +221,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",
@@ -235,6 +232,10 @@ const config = {
                 label: "Services",
                 to: "/services",
               },
+              {
+                label: "Infura dashboard",
+                to: "/developer-tools/dashboard",
+              },
             ],
           },
           {
@@ -273,6 +274,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
@@ -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
@@ -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>

diff --git a/src/components/CardSection.tsx 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&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>
+  );
+}
diff --git a/src/components/CodeTerminal/CodeTerminal.jsx b/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) {

diff --git a/src/components/ParserOpenRPC/AuthBox/index.tsx b/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>
   );
 };
diff --git a/src/components/ParserOpenRPC/AuthBox/styles.module.css b/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;
+}
diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/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>

diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
@@ -61,6 +61,13 @@
   line-height: 24px;
   font-size: 14px;
 }
+.tableColumnTypeDropdown {
+  width: 100%;
+  justify-content: flex-end;
+}
+.tableColumnTypeDropdown:hover {
+  cursor: pointer;
+}
 .tableLabelIconError {
   width: 11px;
   height: 11px;

diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
@@ -6,7 +6,7 @@ import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.mod
 import clsx from "clsx";
 import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC";
 
-export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData, formContext }: ArrayFieldTemplateProps) => {
+export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData }: ArrayFieldTemplateProps) => {
   const [isComplexArrayEditView, setIsComplexArrayEditView] = useState(false);
   const { setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView } = useContext(ParserOpenRPCContext);
   const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true });
@@ -19,6 +19,12 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
     setIsComplexArrayEditView(true);
     setIsComplexTypeView(true);
   }
+  const addSimpleArray = () => {
+    toggleCollapsed();
+    if(collapsed && formData?.length === 0) {
+      onAddClick();
+    }
+  }
 
   return (
     <div>
@@ -31,7 +37,9 @@ export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, f
             <div className={styles.arrayFormDataWrap}>
               {JSON.stringify(formData, null, " ")}
             </div>
-            <span className={styles.tableColumnType} onClick={isSimpleArray ? toggleCollapsed : addComplexArray}>
+            <span
+              className={clsx(styles.tableColumnType, styles.tableColumnTypeDropdown)}
+              onClick={isSimpleArray ? addSimpleArray : addComplexArray}>
               <span className={styles.dropdown}>
                 {schema.type}
                 <span className={

diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx
@@ -14,8 +14,8 @@ export const DropdownWidget = ({ name, value, onChange, schema, options }: Widge
       <div className={styles.tableColumn}>
         <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
           {value === undefined ? "" : String(value)}
-          <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.type}
               <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
               <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>

diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx
@@ -15,8 +15,8 @@ export const SelectWidget = ({ value, onChange, schema, options, label }: Widget
       <div className={styles.tableColumn}>
         <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
           {emptyValue ? "" : String(value)}
-          <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?.enum ? 'enum' : schema?.type}
               <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
               <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>

diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
@@ -12,7 +12,6 @@
   transition-property: 'transform', 'opacity';
   transition-duration: .4s;
   transition-timing-function: ease;
-  box-shadow: 0 2px 40px 0 rgba(0, 0, 0, .1);
   overflow: hidden;
   background-color: #292A36;
 }
@@ -97,7 +96,7 @@
   overflow-y: hidden;
 }
 
-@media (width <= 996px) {
+@media (width <= 1200px) {
   .modalContainer {
     position: fixed;
     left: 0;