diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index da22b2e486..b92f953d68 100644
--- 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
index 897016c690..3178f1ddc2 100644
--- 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,6 +31,7 @@ export const Button = ({
type = "default",
variant="primary",
wrapText = true,
+ textColor = "dark"
}: IButton) => {
const buttonRootClass = clsx(
styles.button,
@@ -37,6 +39,7 @@ export const Button = ({
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
index 260bd5d6c2..ae70b4c5b7 100644
--- 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"}
diff --git a/src/components/ParserOpenRPC/ProjectsBox/index.tsx b/src/components/ParserOpenRPC/ProjectsBox/index.tsx
index d3f25f7f71..f2ffff8461 100644
--- 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 (
{state.values.map((item) => (
-
{item.label}
+
{item.label}
{item.value}
))}
@@ -79,7 +107,7 @@ const ProjectsBox = () => {
key={option.value}
onClick={() => methods.addItem(option)}
>
-
{option.label}
+
{option.label}
{option.value}
- 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."
+ }
Connect Wallet
diff --git a/src/components/ParserOpenRPC/ProjectsBox/styles.module.css b/src/components/ParserOpenRPC/ProjectsBox/styles.module.scss
similarity index 79%
rename from src/components/ParserOpenRPC/ProjectsBox/styles.module.css
rename to src/components/ParserOpenRPC/ProjectsBox/styles.module.scss
index c4b82fab46..ec7a7f13db 100644
--- a/src/components/ParserOpenRPC/ProjectsBox/styles.module.css
+++ b/src/components/ParserOpenRPC/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,6 +35,9 @@
.selectDropdownOption {
background-color: var(--select-bg);
padding: 8px 16px;
+ &:hover {
+ background-color: #000000;
+ }
}
.selectDropdownValue {
@@ -50,9 +45,12 @@
color: var(--select-value-color);
}
+.selectDropdownLabel {
+ color: #ffffff;
+}
+
.connectButton {
order: 100;
margin-left: 12px;
- text-wrap: nowrap;
font-weight: 500;
}
\ No newline at end of file
diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
index d4fadb818f..97f5d26cec 100644
--- 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 = "";
+ const API_KEY = userAPIKey ? userAPIKey : "";
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
index ffa31bd7b3..17dd333a0a 100644
--- 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
index b97de5b208..39af7c5ece 100644
--- 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({
@@ -74,6 +76,8 @@ export const MetamaskProviderContext = createContext({
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("");
+ 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
}
>