feat(docs): styled connect wallet flow

MetaMask · Sep 26, 2024 · 947fcb4 · 947fcb4
1 parent 94f8d64
commit 947fcb4
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 23 deletions.
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -96,6 +96,10 @@ a.button {
     white-space: nowrap;
   }
 
+  &.textLight {
+    color: #ffffff;
+  }
+
   .isLoading {
     animation: spinner-infinite 1.2s linear infinite;
   }

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -16,6 +16,7 @@ interface IButton {
   type?: "default" | "danger";
   variant?: "primary" | "secondary";
   wrapText?: boolean;
+  textColor?: "dark" | "light",
 }
 
 export const Button = ({
@@ -30,13 +31,15 @@ export const Button = ({
   type = "default",
   variant="primary",
   wrapText = true,
+  textColor = "dark"
 }: IButton) => {
   const buttonRootClass = clsx(
     styles.button,
     thin && styles.thin,
     type === "danger" && styles.danger,
     variant === "primary" ? styles.primary : styles.secondary,
     !wrapText && styles.nowrap,
+    textColor === "light" && styles.textLight,
     className,
   );
   const isLoadingChild = !isLoading ? (

diff --git a/src/components/NavbarWallet/index.tsx b/src/components/NavbarWallet/index.tsx
@@ -69,6 +69,7 @@ const NavbarWalletComponent: FC = ({
       thin
       onClick={metaMaskWalletIdConnectHandler}
       className={styles.navbarButton}
+      textColor="light"
     >
       {!isExtensionActive ? "Install MetaMask" : "Connect MetaMask"}
     </Button>

diff --git a/src/components/ParserOpenRPC/ProjectsBox/index.tsx b/src/components/ParserOpenRPC/ProjectsBox/index.tsx
@@ -3,7 +3,7 @@ import ldClient from "launchdarkly";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 import Select from "react-dropdown-select";
 import Button from "@site/src/components/Button";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
 import { WALLET_LINK_TYPE } from "@site/src/components/AuthLogin/AuthModal";
 
 const LOGIN_FF = "mm-unified-login";
@@ -15,6 +15,7 @@ const ProjectsBox = () => {
     walletLinked,
     metaMaskWalletIdConnectHandler,
     walletLinkUrl,
+    setUserAPIKey,
   } = useContext(MetamaskProviderContext);
   const options = Object.keys(projects).map((v) => ({
     value: v,
@@ -25,6 +26,12 @@ const ProjectsBox = () => {
   );
   const [ldReady, setLdReady] = useState(false);
   const [loginEnabled, setLoginEnabled] = useState(false);
+  const [isWalletLinking, setIsWalletLinking] = useState(false);
+
+  const metaMaskWalletConnectionHandler = () => {
+    setIsWalletLinking(true);
+    metaMaskWalletIdConnectHandler();
+  }
 
   useEffect(() => {
     ldClient.waitUntilReady().then(() => {
@@ -41,9 +48,27 @@ const ProjectsBox = () => {
   }, []);
 
   useEffect(() => {
-    if (!currentProject.length && options[0]) setCurrentProject([options[0]]);
+    if (!currentProject.length && options[0]) {
+      setCurrentProject([options[0]]);
+      setUserAPIKey(options[0].value);
+    }
   }, [projects]);
 
+  useEffect(() => {
+    if (options?.length > 0) {
+      setUserAPIKey(options[0].value);
+    }
+    if (!walletLinked) {
+      setUserAPIKey("");
+    }
+  }, [options.length, walletLinked]);
+
+  useEffect(() => {
+    if (walletLinked) {
+      setIsWalletLinking(false);
+    }
+  }, [walletLinked])
+
   return (
     ldReady &&
     loginEnabled && (
@@ -57,13 +82,16 @@ const ProjectsBox = () => {
             searchable={false}
             options={options}
             values={currentProject}
-            onChange={(value) => setCurrentProject(value)}
+            onChange={(value) => {
+              setCurrentProject(value);
+              setUserAPIKey(value[0].value);
+            }}
             contentRenderer={({ state }) => {
               return (
                 <div>
                   {state.values.map((item) => (
                     <div key={item.value}>
-                      <div>{item.label}</div>
+                      <div className={styles.selectDropdownLabel}>{item.label}</div>
                       <div className={styles.selectDropdownValue}>{item.value}</div>
                     </div>
                   ))}
@@ -79,7 +107,7 @@ const ProjectsBox = () => {
                       key={option.value}
                       onClick={() => methods.addItem(option)}
                     >
-                      <div>{option.label}</div>
+                      <div className={styles.selectDropdownLabel}>{option.label}</div>
                       <div className={styles.selectDropdownValue}>{option.value}</div>
                     </div>
                   ))}
@@ -92,13 +120,17 @@ const ProjectsBox = () => {
             {walletLinked === undefined && (
               <>
                 <div>
-                  Connect your MetaMask wallet to start sending requests to your
-                  Infura API keys.
+                  {isWalletLinking ?
+                    "Don’t close or exit this page. Please continue connecting on your extension." :
+                    "Connect your MetaMask wallet to start sending requests to your Infura API keys."
+                  }
                 </div>
                 <Button
                   thin
                   className={styles.connectButton}
-                  onClick={metaMaskWalletIdConnectHandler}
+                  onClick={metaMaskWalletConnectionHandler}
+                  textColor="light"
+                  isLoading={isWalletLinking}
                 >
                   Connect Wallet
                 </Button>

diff --git a/...rserOpenRPC/ProjectsBox/styles.module.css → ...serOpenRPC/ProjectsBox/styles.module.scss b/...rserOpenRPC/ProjectsBox/styles.module.css → ...serOpenRPC/ProjectsBox/styles.module.scss
@@ -1,21 +1,12 @@
-:root[data-theme="dark"] {
+:root {
   --select-bg: #24272A;
   --select-value-color: #BBC0C5;
 }
 
-:root[data-theme="light"] {
-  --select-bg: #fff;
-  --select-value-color: #6a737d;
-}
-
 .selectWrapper {
   padding: 0 0 24px 0;
 }
 
-.selectWrapper .react-dropdown-select-dropdown {
-  border-radius: 8px !important;
-}
-
 .selectTitle {
   font-size: 16px;
   font-weight: 500;
@@ -33,6 +24,7 @@
   justify-content: center;
   align-items: center;
   background-color: var(--select-bg);
+  color: #ffffff;
 }
 
 .selectDropdown {
@@ -43,16 +35,22 @@
 .selectDropdownOption {
   background-color: var(--select-bg);
   padding: 8px 16px;
+  &:hover {
+    background-color: #000000;
+  }
 }
 
 .selectDropdownValue {
   font-size: 14px;
   color: var(--select-value-color);
 }
 
+.selectDropdownLabel {
+  color: #ffffff;
+}
+
 .connectButton {
   order: 100;
   margin-left: 12px;
-  text-wrap: nowrap;
   font-weight: 500;
 }
diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import React, {useContext, useMemo} from "react";
 import clsx from "clsx";
 import CodeBlock from "@theme/CodeBlock";
 import { MethodParam } from "@site/src/components/ParserOpenRPC/interfaces";
 import styles from "./styles.module.css";
 import global from "../global.module.css";
 import { Tooltip } from "@site/src/components/Tooltip";
+import {MetamaskProviderContext} from "@site/src/theme/Root";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;
@@ -27,17 +28,17 @@ export default function RequestBox({
   submitRequest,
   isMetamaskNetwork = false,
 }: RequestBoxProps) {
-
+  const { userAPIKey } = useContext(MetamaskProviderContext);
   const exampleRequest = useMemo(() => {
     const preparedParams = JSON.stringify(paramsData, null, 2);
     const preparedShellParams = JSON.stringify(paramsData);
     const NETWORK_URL = "https://linea-mainnet.infura.io";
-    const API_KEY = "<YOUR-API-KEY>";
+    const API_KEY = userAPIKey ? userAPIKey : "<YOUR-API-KEY>";
     if (isMetamaskNetwork) {
       return `await window.ethereum.request({\n "method": "${method}",\n "params": ${preparedParams.replace(/"([^"]+)":/g, '$1:')},\n});`;
     }
     return `curl ${NETWORK_URL}/v3/${API_KEY} \\\n  -X POST \\\n  -H "Content-Type: application/json" \\\n  -d '{\n    "jsonrpc": "2.0",\n    "method": "${method}",\n    "params": ${preparedShellParams},\n    "id": 1\n  }'`;
-  }, [method, paramsData]);
+  }, [userAPIKey, method, paramsData]);
 
   const exampleResponse = useMemo(() => {
     return JSON.stringify(response, null, 2);

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -341,6 +341,15 @@ button:hover {
   border-bottom-color: rgba(255, 255, 255, 1);
 }
 
+.react-dropdown-select-dropdown {
+  border-radius: 8px !important;
+  border: 1px solid #848C96 !important;
+}
+
+.react-dropdown-select-dropdown-handle {
+  color: #ffffff;
+}
+
 @media (max-width: 1200px) {
   .navbar__item,
   .navbar__link {

diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -56,6 +56,8 @@ interface IMetamaskProviderContext {
   walletLinked: WALLET_LINK_TYPE | undefined;
   setWalletLinkUrl: (arg: string) => void;
   walletLinkUrl: string;
+  userAPIKey?: string;
+  setUserAPIKey?: (key: string) => void;
 }
 
 export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
@@ -74,6 +76,8 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   walletLinked: undefined,
   setWalletLinkUrl: () => {},
   walletLinkUrl: "",
+  userAPIKey: "",
+  setUserAPIKey: () => {},
 });
 
 const sdk = new MetaMaskSDK({
@@ -101,6 +105,7 @@ export const LoginProvider = ({ children }) => {
     WALLET_LINK_TYPE | undefined
   >(undefined);
   const [walletLinkUrl, setWalletLinkUrl] = useState<string>("");
+  const [userAPIKey, setUserAPIKey] = useState("");
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
 
@@ -223,6 +228,8 @@ export const LoginProvider = ({ children }) => {
               setWalletLinked,
               walletLinkUrl,
               setWalletLinkUrl,
+              userAPIKey,
+              setUserAPIKey,
             } as IMetamaskProviderContext
           }
         >