feat(docs): ACT-1496 - Projects Box UI Update

src/components/Button/button.module.scss

@@ -1,14 +1,16 @@
 :root[data-theme="dark"] {
-  --button-background-color: #1098fc;
+  --button-primary-background-color: #1098fc;
+  --button-secondary-background-color: transparent;
   --button-color: #141618;
-  --button-hover-background-color: #26a2fc;
+  --button-hover-background-color: #036ab5;
   --button-hover-shadow: 0px 2px 8px 0px rgba(16, 152, 252, 0.4);
   --button-active-background-color: #3baafd;
   --button-danger: #e88f97
 }
 
 :root[data-theme="light"] {
-  --button-background-color: #0376c9;
+  --button-primary-background-color: #0376c9;
+  --button-secondary-background-color: transparent;
   --button-color: #ffffff;
   --button-hover-background-color: #036ab5;
   --button-hover-shadow: 0px 2px 8px 0px rgba(3, 118, 201, 0.2);
@@ -33,7 +35,6 @@ a.button {
 
 .button {
   color: var(--button-color);
-  background-color: var(--button-background-color);
   border: none;
   padding: 0 16px;
   height: 48px;
@@ -47,6 +48,19 @@ a.button {
   align-items: center;
   min-width: 145px;
 
+  &.primary {
+    background-color: var(--button-primary-background-color);
+  }
+
+  &.secondary {
+    border: 1px solid rgba(3, 118, 201, 1);
+    --button-color: rgba(3, 118, 201, 1);
+    background-color: var(--button-secondary-background-color);
+    &:hover {
+      --button-color: #141618
+    }
+  }
+
   &:hover {
     background-color: var(--button-hover-background-color);
     box-shadow: var(--button-hover-shadow);
@@ -78,6 +92,14 @@ a.button {
     pointer-events: none;
   }
 
+  &.nowrap {
+    white-space: nowrap;
+  }
+
+  &.textLight {
+    color: #ffffff;
+  }
+
   .isLoading {
     animation: spinner-infinite 1.2s linear infinite;
   }

src/components/Button/index.tsx

@@ -14,6 +14,9 @@ interface IButton {
   target?: string;
   thin?: boolean;
   type?: "default" | "danger";
+  variant?: "primary" | "secondary";
+  wrapText?: boolean;
+  textColor?: "dark" | "light",
 }
 
 export const Button = ({
@@ -26,11 +29,17 @@ export const Button = ({
   target = "_blank",
   thin = false,
   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 ? (

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>

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,24 @@ 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);
+    }
+  }, [options.length]);
+
+  useEffect(() => {
+    if (walletLinked) {
+      setIsWalletLinking(false);
+    }
+  }, [walletLinked])
+
   return (
     ldReady &&
     loginEnabled && (
@@ -57,14 +79,17 @@ 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>{item.value}</div>
+                      <div className={styles.selectDropdownLabel}>{item.label}</div>
+                      <div className={styles.selectDropdownValue}>{item.value}</div>
                     </div>
                   ))}
                 </div>
@@ -75,12 +100,12 @@ const ProjectsBox = () => {
                 <div className={styles.selectDropdown}>
                   {options.map((option) => (
                     <div
+                      className={styles.selectDropdownOption}
                       key={option.value}
-                      style={{ padding: "8px 16px" }}
                       onClick={() => methods.addItem(option)}
                     >
-                      <div>{option.label}</div>
-                      <div>{option.value}</div>
+                      <div className={styles.selectDropdownLabel}>{option.label}</div>
+                      <div className={styles.selectDropdownValue}>{option.value}</div>
                     </div>
                   ))}
                 </div>
@@ -92,13 +117,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>
@@ -112,7 +141,8 @@ const ProjectsBox = () => {
                 </div>
                 <Button
                   thin
-                  className={styles.connectButton}
+                  variant="secondary"
+                  wrapText={false}
                   onClick={() => (window.location.href = walletLinkUrl)}
                 >
                   Link Infura Account

src/components/ParserOpenRPC/ProjectsBox/styles.module.scss

@@ -0,0 +1,56 @@
+:root {
+  --select-bg: #24272A;
+  --select-value-color: #BBC0C5;
+}
+
+.selectWrapper {
+  padding: 0 0 24px 0;
+}
+
+.selectTitle {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  padding: 0 0 8px 0;
+}
+
+.selectProjects {
+  border: 1px solid #848C96 !important;
+  border-radius: 8px !important;
+  padding: 12px 16px 12px 16px !important;
+  font-size: 16px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--select-bg);
+  color: #ffffff;
+}
+
+.selectDropdown {
+  border-radius: 8px !important;
+  font-size: 16px !important;
+}
+
+.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;
+  font-weight: 500;
+}

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -1,10 +1,12 @@
-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";
+import { LINEA_REQUEST_URL } from "@site/src/lib/constants";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;
@@ -31,17 +33,16 @@ export default function RequestBox({
   defExampleResponse,
   resetResponseHandle,
 }: 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]);
+    return `curl ${LINEA_REQUEST_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  }'`;
+  }, [userAPIKey, method, paramsData]);
 
   const exampleResponse = useMemo(() => {
     if (defExampleResponse && response === undefined) {