ACT-1296: Infura Faucet Integration in MetaMask Docs (#1396)

* ACT-1390: Faucet page routing * ACT-1387, ACT-1387: Tabs, Button ACT-1388: Component: Button ACT-1387: Component: Tabs * ACT-1393 Component: Typography (#1410) * ACT-1393 Component: Typography * ACT-1386 Component: Accordion * Faucet alerts + prettier (#1423) * ACT-1394 Component: Alert + Prettier whole project * feat(faucet): act-1391 - added badge component (#1425) * feat(faucet): act-1391 - added badge component * feat(faucet): act-1391 - fix for css vars * feat(docs): act-1392 - added table component (#1439) * eslint + prettier fix for src (#1440) * ACT-1473 Assemble faucet page (#1448) ACT-1473 Assemble faucet page (#1448) * ACT-1473 Assemble faucet page * ESlint + Prettier * Improve types and aliases resolving * feat(m-login): adding full login flow * feat(m-login): fix build * feat(m-login): fixing link unfurling * feat(m-login): implementing multiple wallet pairing * feat(mm-login): updating dashboard preview url * feat(mm-login): updating dashboard preview url * feat(mm-login): hardcode dashboard preview url * Faucet maintenance mode (#1475) Faucet maintenance mode (#1475) * Faucet supports MM login flow * Handle MetaMask sdk using common sdk * Handle auth Infura connection * Faucet Hero img * Fix SSR * Fix BrowserOnly * Handle stale data * Get transactions * Unified login interface for MM Docs via MM Wallet * Unified login interface for MM Docs via MM Wallet * Unified login interface for MM Docs via MM Wallet * Unified login interface for MM Docs via MM Wallet * Faucet in MetaMask implementation * feat(unified-login): update unified login * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * feat(unified-login): add feature flag to manage login button * feat(unified-login): fix bug on refreshing page * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): update dahboard_url function call * feat(reference): imp for reference pages (#1471) * feat(reference): imp for reference pages * feat(reference): fix for default data * feat(reference): fix for param struct data * feat(docs):ACT-1500 - Add Wallet ID to Default Values (#1477) * added address from connected wallet * added constants * Fix typo in Snaps JSX documentation (#1482) * Sync Starknet Infura content changes (#1483) * Sync Starknet Infura content changes * Update whats-new on starknet methods * Update link * Update spacing * Update docs/whats-new.md --------- Co-authored-by: Alexandra Carrillo <[email protected]> * feat(unified-login): update unified login * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * feat(unified-login): update unified login flow * minor update (#1484) * fixes links: assume that Infura --> MM docs does not map exactly (#1488) * feat(unified-login): add feature flag to manage login button * feat(unified-login): fix bug on refreshing page * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): fix dahboard url * feat(unified-login): update dahboard_url function call * Faucet in MetaMask implementation * Faucet in MetaMask implementation * Improve faucet UI/UX * Improve ui and ux * Improve ui and ux * clear data on disconnect * # Conflicts: # src/components/AuthLogin/AuthModal.tsx # src/lib/siwsrp/auth.ts # src/theme/Root.tsx * Small bugfixes * Implement segment events tracking * Fix low balance alert * fix linting * fix linting * fix linting * revert structure back * Improve linking Infura account(s) * Fix yarn mention * Apply suggestions from code review * Update src/components/Faucet/Faq.tsx --------- Co-authored-by: Vlad Lo. <vlad.lobachov-ext@> Co-authored-by: TrofimovAnton85 <[email protected]> Co-authored-by: Magne Cedric <[email protected]> Co-authored-by: Denys Nikanov <[email protected]> Co-authored-by: Frederik Bolding <[email protected]> Co-authored-by: Joan E <[email protected]> Co-authored-by: Alexandra Carrillo <[email protected]> Co-authored-by: m4sterbunny <[email protected]>
MetaMask · Oct 9, 2024 · 87d2dfa · 87d2dfa
1 parent 67e0fa3
commit 87d2dfa
Show file tree

Hide file tree

Showing 41 changed files with 1,970 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,6 @@ Build the documentation site locally using the following steps.
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) version 18+
-- [Yarn](https://yarnpkg.com/) version 3
 - [Git](https://git-scm.com/)
 
 ### Steps

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -199,6 +199,10 @@ const config = {
                 label: "Infura dashboard",
                 to: "developer-tools/dashboard",
               },
+              {
+                label: "Faucet",
+                to: "developer-tools/faucet",
+              },
             ],
           },
           {

diff --git a/src/components/Accordion/accordion.module.scss b/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;
+    }
+  }
+}
diff --git a/src/components/Accordion/close.svg b/src/components/Accordion/close.svg
diff --git a/src/components/Accordion/index.tsx b/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>
+  );
+}
diff --git a/src/components/Alert/index.tsx b/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,

diff --git a/src/components/AuthLogin/AuthModal.tsx b/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();
+      sessionStorage.setItem(AUTH_WALLET_USER_PLAN, JSON.stringify(tier));
+      if (setUser) {
+        setUksTier(tier);
+      }
       setOpen(false);
     } catch (e: any) {
       if (pathname.startsWith("/wallet/reference")) {

diff --git a/src/components/Badge/badge.module.scss b/src/components/Badge/badge.module.scss
@@ -0,0 +1,46 @@
+:root {
+  --badge-default-color: #6a737d;
+  --badge-default-bg-color: #f2f4f6;
+  --badge-default-border-color: transparent;
+  --badge-success-color: #1c8234;
+  --badge-success-bg-color: rgba(28, 130, 52, 0.1);
+  --badge-error-color: #d73847;
+  --badge-error-bg-color: rgba(215, 56, 71, 0.1);
+}
+
+:root[data-theme="dark"] {
+  --badge-default-color: #bbc0c5;
+  --badge-default-bg-color: #24272a;
+  --badge-default-border-color: #bbc0c5;
+  --badge-success-color: #28a745;
+  --badge-success-bg-color: rgba(40, 167, 69, 0.15);
+  --badge-error-color: #e06470;
+  --badge-error-bg-color: rgba(224, 100, 112, 0.15);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  border-radius: 999px;
+  border: 1px solid var(--badge-default-border-color);
+  padding: 2px 8px;
+  color: var(--badge-default-color);
+  background-color: var(--badge-default-bg-color);
+  text-transform: capitalize;
+
+  &.success {
+    color: var(--badge-success-color);
+    background-color: var(--badge-success-bg-color);
+    border-color: transparent;
+  }
+
+  &.error {
+    color: var(--badge-error-color);
+    background-color: var(--badge-error-bg-color);
+    border-color: transparent;
+  }
+}