ACT-1296: Infura Faucet Integration in MetaMask Docs

docusaurus.config.js

@@ -199,6 +199,10 @@ const config = {
                 label: "Infura dashboard",
                 to: "developer-tools/dashboard",
               },
+              {
+                label: "Faucet",
+                to: "developer-tools/faucet",
+              },
             ],
           },
           {

src/components/Accordion/accordion.module.scss

@@ -0,0 +1,55 @@
+:root[data-theme="dark"] {
+  --accordion-background: #24272a;
+  --accordion-border: rgba(132, 140, 150, 0.16);
+}
+
+:root[data-theme="light"] {
+  --accordion-background: #ffffff;
+  --accordion-border: rgba(187, 192, 197, 0.4);
+}
+
+.accordion {
+  background: var(--accordion-background);
+  border: 1px solid var(--accordion-border);
+  border-radius: 8px;
+  margin-bottom: 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .closeButton {
+      cursor: pointer;
+      margin-left: 24px;
+      margin-right: 24px;
+      display: block;
+      height: 16px;
+      line-height: 1;
+
+      .image {
+        min-width: 16px;
+        width: 16px;
+        min-height: 16px;
+        height: 16px;
+        transition: all 0.5s;
+        transform: rotate(45deg);
+
+        &.opened {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  .content {
+    visibility: hidden;
+    display: none;
+
+    &.opened {
+      visibility: visible;
+      display: block;
+    }
+  }
+}

src/components/Accordion/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import styles from "./accordion.module.scss";
+import CloseImg from "./close.svg";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
+
+interface IAccordion {
+  children: [React.ReactElement, React.ReactElement];
+  opened?: boolean;
+}
+
+export default function Accordion({
+  children: [title, body],
+  opened = false,
+}: IAccordion) {
+  const [isOpened, setIsOpened] = useState(opened);
+
+  const handleToggle = () => {
+    trackClickForSegment({
+      eventName: `${isOpened ? "Expanded" : "Collapsed"} - ${title}`,
+      clickType: "Accordion",
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+    setIsOpened((value) => !value);
+  };
+
+  return (
+    <div className={styles.accordion}>
+      <div
+        role="button"
+        data-testid="accordion-title"
+        onClick={handleToggle}
+        className={styles.header}
+      >
+        {title}
+        <span
+          role="button"
+          data-testid="accordion-button-x"
+          className={styles.closeButton}
+        >
+          <CloseImg className={clsx(styles.image, isOpened && styles.opened)} />
+        </span>
+      </div>
+      <div className={clsx(styles.content, isOpened && styles.opened)}>
+        {body}
+      </div>
+    </div>
+  );
+}

src/components/Alert/index.tsx

@@ -7,6 +7,7 @@ import SuccessImg from "./success.svg";
 import ErrorImg from "./error.svg";
 import Text from "@site/src/components/Text";
 import styles from "./alert.module.scss";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
 
 export const options = {
   position: positions.TOP_CENTER,
@@ -18,25 +19,44 @@ export const options = {
   },
 };
 
-export const AlertTemplate = ({ style, options, message, close }) => (
-  <div
-    style={style}
-    className={clsx(
-      styles.alert,
-      options.type === types.INFO && styles.info,
-      options.type === types.SUCCESS && styles.success,
-      options.type === types.ERROR && styles.error,
-    )}
-  >
-    {options.type === types.INFO && <InfoImg className={styles.icon} />}
-    {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
-    {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
-    {message}
-    <span role="button" onClick={close} className={styles.closeButton}>
-      <CloseImg className={styles.closeIcon} />
-    </span>
-  </div>
-);
+export const AlertTemplate = ({ style, options, message, close }) => {
+  const handleCloseAlert = () => {
+    trackClickForSegment({
+      eventName: "Close",
+      clickType: "Alert",
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+    close();
+  };
+
+  return (
+    <div
+      style={style}
+      className={clsx(
+        styles.alert,
+        options.type === types.INFO && styles.info,
+        options.type === types.SUCCESS && styles.success,
+        options.type === types.ERROR && styles.error,
+      )}
+    >
+      {options.type === types.INFO && <InfoImg className={styles.icon} />}
+      {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
+      {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
+      {message}
+      <span
+        role="button"
+        data-testid="alert-close"
+        onClick={handleCloseAlert}
+        className={styles.closeButton}
+      >
+        <CloseImg className={styles.closeIcon} />
+      </span>
+    </div>
+  );
+};
 
 export const AlertTitle = ({
   children,

src/components/AuthLogin/AuthModal.tsx

@@ -7,24 +7,25 @@ import global from "../ParserOpenRPC/global.module.css";
 import Icon from "../Icon/Icon";
 import {
   authenticateAndAuthorize,
+  AUTH_WALLET_PAIRING,
+  AUTH_WALLET_SESSION_NAME,
+  AUTH_WALLET_PROJECTS,
   saveTokenString,
   getUserIdFromJwtToken,
+  AUTH_WALLET_USER_PLAN,
 } from "../../lib/siwsrp/auth";
-import {
-  DASHBOARD_URL,
-  REQUEST_PARAMS,
-  AUTH_WALLET_SESSION_NAME,
-  AUTH_WALLET_PROJECTS,
-} from "@site/src/lib/constants";
+import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 Modal.setAppElement("#__docusaurus");
 type AuthModalProps = {
   open: boolean;
   setOpen: (arg: boolean) => void;
   setUser: (arg: string) => void;
+  setToken: (arg: string) => void;
   step: AUTH_LOGIN_STEP;
   setStep: (arg: AUTH_LOGIN_STEP) => void;
+  setUksTier: (arg: string) => void;
 };
 
 export enum AUTH_LOGIN_STEP {
@@ -134,7 +135,15 @@ const ConnectionErrorModal = ({
   );
 };
 
-const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
+const AuthModal = ({
+  open,
+  setOpen,
+  step,
+  setStep,
+  setUser,
+  setToken,
+  setUksTier,
+}: AuthModalProps) => {
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
   const {
@@ -168,30 +177,29 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
       // Call Profile SDK API to retrieve Hydra Access Token & Wallet userProfile
       // Hydra Access Token will be used to fetch Infura API
       const { accessToken, userProfile } = await authenticateAndAuthorize(
-        VERCEL_ENV as string
+        VERCEL_ENV as string,
       );
 
       const loginResponse = await (
         await fetch(
           `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login`,
           {
-            ...REQUEST_PARAMS(),
-            headers: {
-              ...REQUEST_PARAMS().headers,
+            ...REQUEST_PARAMS("POST", {
               hydra_token: accessToken,
               token: "true",
-            },
+            }),
             body: JSON.stringify({
               profileId: userProfile.profileId,
               redirect_to: window.location.href,
             }),
-          }
+          },
         )
       ).json();
 
       if (!loginResponse) throw new Error("Something went wrong");
 
       const { data, session, token } = loginResponse;
+      localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
 
       if (data.step) {
         // Handling no wallet pairing or multiple pairing
@@ -201,7 +209,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
             mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
             walletPairing: data.pairing,
             token: true,
-          })
+          }),
         ).toString("base64");
 
         const walletLinkUrl = `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
@@ -229,25 +237,43 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
       }
 
       saveTokenString(token);
+      if (setToken) {
+        setToken(token);
+      }
       setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
       const userId = getUserIdFromJwtToken();
+      if (setUser) {
+        setUser(userId);
+      }
 
       // You can use Infura Access Token to fetch any Infura API endpoint
       const projectsResponse = await fetch(
         `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`,
         {
-          ...REQUEST_PARAMS("GET"),
-          headers: {
-            ...REQUEST_PARAMS("GET").headers,
-            Authorization: `Bearer ${token}`,
-          },
-        }
+          ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
+        },
       );
       const {
         result: { projects },
       } = await projectsResponse.json();
       sessionStorage.setItem(AUTH_WALLET_PROJECTS, JSON.stringify(projects));
       setProjects(projects);
+
+      const uksUserRawResp = await fetch(
+        `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}`,
+        {
+          ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
+        },
+      );
+      const {
+        result: {
+          servicePlan: { tier },
+        },
+      } = await uksUserRawResp.json();
+      localStorage.setItem(AUTH_WALLET_USER_PLAN, JSON.stringify(tier));
+      if (setUser) {
+        setUksTier(tier);
+      }
       setOpen(false);
     } catch (e: any) {
       if (pathname.startsWith("/wallet/reference")) {