Skip to content

Commit 643b82c

Browse files
aednikanovaednikanov
authored
feat(docs): ACT-1496 - Projects Box UI Update (#1580)
* feat(docs): partially styled ProjectsBox * feat(docs): extended styling * feat(docs): styled connect wallet flow * feat(docs): added request and fixed bug * feat(docs): added constant based on env
1 parent b1b4766 commit 643b82c

File tree

11 files changed

+205
-81
lines changed

11 files changed

+205
-81
lines changed

‎src/components/Button/button.module.scss

+26-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
:root[data-theme="dark"] {
2-
--button-background-color: #1098fc;
2+
--button-primary-background-color: #1098fc;
3+
--button-secondary-background-color: transparent;
34
--button-color: #141618;
4-
--button-hover-background-color: #26a2fc;
5+
--button-hover-background-color: #036ab5;
56
--button-hover-shadow: 0px 2px 8px 0px rgba(16, 152, 252, 0.4);
67
--button-active-background-color: #3baafd;
78
--button-danger: #e88f97
89
}
910

1011
:root[data-theme="light"] {
11-
--button-background-color: #0376c9;
12+
--button-primary-background-color: #0376c9;
13+
--button-secondary-background-color: transparent;
1214
--button-color: #ffffff;
1315
--button-hover-background-color: #036ab5;
1416
--button-hover-shadow: 0px 2px 8px 0px rgba(3, 118, 201, 0.2);
@@ -33,7 +35,6 @@ a.button {
3335

3436
.button {
3537
color: var(--button-color);
36-
background-color: var(--button-background-color);
3738
border: none;
3839
padding: 0 16px;
3940
height: 48px;
@@ -47,6 +48,19 @@ a.button {
4748
align-items: center;
4849
min-width: 145px;
4950

51+
&.primary {
52+
background-color: var(--button-primary-background-color);
53+
}
54+
55+
&.secondary {
56+
border: 1px solid rgba(3, 118, 201, 1);
57+
--button-color: rgba(3, 118, 201, 1);
58+
background-color: var(--button-secondary-background-color);
59+
&:hover {
60+
--button-color: #141618
61+
}
62+
}
63+
5064
&:hover {
5165
background-color: var(--button-hover-background-color);
5266
box-shadow: var(--button-hover-shadow);
@@ -78,6 +92,14 @@ a.button {
7892
pointer-events: none;
7993
}
8094

95+
&.nowrap {
96+
white-space: nowrap;
97+
}
98+
99+
&.textLight {
100+
color: #ffffff;
101+
}
102+
81103
.isLoading {
82104
animation: spinner-infinite 1.2s linear infinite;
83105
}

‎src/components/Button/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ interface IButton {
1414
target?: string;
1515
thin?: boolean;
1616
type?: "default" | "danger";
17+
variant?: "primary" | "secondary";
18+
wrapText?: boolean;
19+
textColor?: "dark" | "light",
1720
}
1821

1922
export const Button = ({
@@ -26,11 +29,17 @@ export const Button = ({
2629
target = "_blank",
2730
thin = false,
2831
type = "default",
32+
variant="primary",
33+
wrapText = true,
34+
textColor = "dark"
2935
}: IButton) => {
3036
const buttonRootClass = clsx(
3137
styles.button,
3238
thin && styles.thin,
3339
type === "danger" && styles.danger,
40+
variant === "primary" ? styles.primary : styles.secondary,
41+
!wrapText && styles.nowrap,
42+
textColor === "light" && styles.textLight,
3443
className,
3544
);
3645
const isLoadingChild = !isLoading ? (

‎src/components/NavbarWallet/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const NavbarWalletComponent: FC = ({
6969
thin
7070
onClick={metaMaskWalletIdConnectHandler}
7171
className={styles.navbarButton}
72+
textColor="light"
7273
>
7374
{!isExtensionActive ? "Install MetaMask" : "Connect MetaMask"}
7475
</Button>

‎src/components/ParserOpenRPC/ProjectsBox/index.tsx

+42-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ldClient from "launchdarkly";
33
import { MetamaskProviderContext } from "@site/src/theme/Root";
44
import Select from "react-dropdown-select";
55
import Button from "@site/src/components/Button";
6-
import styles from "./styles.module.css";
6+
import styles from "./styles.module.scss";
77
import { WALLET_LINK_TYPE } from "@site/src/components/AuthLogin/AuthModal";
88

99
const LOGIN_FF = "mm-unified-login";
@@ -15,6 +15,7 @@ const ProjectsBox = () => {
1515
walletLinked,
1616
metaMaskWalletIdConnectHandler,
1717
walletLinkUrl,
18+
setUserAPIKey,
1819
} = useContext(MetamaskProviderContext);
1920
const options = Object.keys(projects).map((v) => ({
2021
value: v,
@@ -25,6 +26,12 @@ const ProjectsBox = () => {
2526
);
2627
const [ldReady, setLdReady] = useState(false);
2728
const [loginEnabled, setLoginEnabled] = useState(false);
29+
const [isWalletLinking, setIsWalletLinking] = useState(false);
30+
31+
const metaMaskWalletConnectionHandler = () => {
32+
setIsWalletLinking(true);
33+
metaMaskWalletIdConnectHandler();
34+
}
2835

2936
useEffect(() => {
3037
ldClient.waitUntilReady().then(() => {
@@ -41,9 +48,24 @@ const ProjectsBox = () => {
4148
}, []);
4249

4350
useEffect(() => {
44-
if (!currentProject.length && options[0]) setCurrentProject([options[0]]);
51+
if (!currentProject.length && options[0]) {
52+
setCurrentProject([options[0]]);
53+
setUserAPIKey(options[0].value);
54+
}
4555
}, [projects]);
4656

57+
useEffect(() => {
58+
if (options?.length > 0) {
59+
setUserAPIKey(options[0].value);
60+
}
61+
}, [options.length]);
62+
63+
useEffect(() => {
64+
if (walletLinked) {
65+
setIsWalletLinking(false);
66+
}
67+
}, [walletLinked])
68+
4769
return (
4870
ldReady &&
4971
loginEnabled && (
@@ -57,14 +79,17 @@ const ProjectsBox = () => {
5779
searchable={false}
5880
options={options}
5981
values={currentProject}
60-
onChange={(value) => setCurrentProject(value)}
82+
onChange={(value) => {
83+
setCurrentProject(value);
84+
setUserAPIKey(value[0].value);
85+
}}
6186
contentRenderer={({ state }) => {
6287
return (
6388
<div>
6489
{state.values.map((item) => (
6590
<div key={item.value}>
66-
<div>{item.label}</div>
67-
<div>{item.value}</div>
91+
<div className={styles.selectDropdownLabel}>{item.label}</div>
92+
<div className={styles.selectDropdownValue}>{item.value}</div>
6893
</div>
6994
))}
7095
</div>
@@ -75,12 +100,12 @@ const ProjectsBox = () => {
75100
<div className={styles.selectDropdown}>
76101
{options.map((option) => (
77102
<div
103+
className={styles.selectDropdownOption}
78104
key={option.value}
79-
style={{ padding: "8px 16px" }}
80105
onClick={() => methods.addItem(option)}
81106
>
82-
<div>{option.label}</div>
83-
<div>{option.value}</div>
107+
<div className={styles.selectDropdownLabel}>{option.label}</div>
108+
<div className={styles.selectDropdownValue}>{option.value}</div>
84109
</div>
85110
))}
86111
</div>
@@ -92,13 +117,17 @@ const ProjectsBox = () => {
92117
{walletLinked === undefined && (
93118
<>
94119
<div>
95-
Connect your MetaMask wallet to start sending requests to your
96-
Infura API keys.
120+
{isWalletLinking ?
121+
"Don’t close or exit this page. Please continue connecting on your extension." :
122+
"Connect your MetaMask wallet to start sending requests to your Infura API keys."
123+
}
97124
</div>
98125
<Button
99126
thin
100127
className={styles.connectButton}
101-
onClick={metaMaskWalletIdConnectHandler}
128+
onClick={metaMaskWalletConnectionHandler}
129+
textColor="light"
130+
isLoading={isWalletLinking}
102131
>
103132
Connect Wallet
104133
</Button>
@@ -112,7 +141,8 @@ const ProjectsBox = () => {
112141
</div>
113142
<Button
114143
thin
115-
className={styles.connectButton}
144+
variant="secondary"
145+
wrapText={false}
116146
onClick={() => (window.location.href = walletLinkUrl)}
117147
>
118148
Link Infura Account

‎src/components/ParserOpenRPC/ProjectsBox/styles.module.css

-40
This file was deleted.

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
:root {
2+
--select-bg: #24272A;
3+
--select-value-color: #BBC0C5;
4+
}
5+
6+
.selectWrapper {
7+
padding: 0 0 24px 0;
8+
}
9+
10+
.selectTitle {
11+
font-size: 16px;
12+
font-weight: 500;
13+
line-height: 24px;
14+
text-align: left;
15+
padding: 0 0 8px 0;
16+
}
17+
18+
.selectProjects {
19+
border: 1px solid #848C96 !important;
20+
border-radius: 8px !important;
21+
padding: 12px 16px 12px 16px !important;
22+
font-size: 16px !important;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
background-color: var(--select-bg);
27+
color: #ffffff;
28+
}
29+
30+
.selectDropdown {
31+
border-radius: 8px !important;
32+
font-size: 16px !important;
33+
}
34+
35+
.selectDropdownOption {
36+
background-color: var(--select-bg);
37+
padding: 8px 16px;
38+
&:hover {
39+
background-color: #000000;
40+
}
41+
}
42+
43+
.selectDropdownValue {
44+
font-size: 14px;
45+
color: var(--select-value-color);
46+
}
47+
48+
.selectDropdownLabel {
49+
color: #ffffff;
50+
}
51+
52+
.connectButton {
53+
order: 100;
54+
margin-left: 12px;
55+
font-weight: 500;
56+
}

‎src/components/ParserOpenRPC/RequestBox/index.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React, { useMemo } from "react";
1+
import React, { useContext, useMemo } from "react";
22
import clsx from "clsx";
33
import CodeBlock from "@theme/CodeBlock";
44
import { MethodParam } from "@site/src/components/ParserOpenRPC/interfaces";
55
import styles from "./styles.module.css";
66
import global from "../global.module.css";
77
import { Tooltip } from "@site/src/components/Tooltip";
8+
import { MetamaskProviderContext } from "@site/src/theme/Root";
9+
import { LINEA_REQUEST_URL } from "@site/src/lib/constants";
810

911
interface RequestBoxProps {
1012
isMetamaskInstalled: boolean;
@@ -31,17 +33,16 @@ export default function RequestBox({
3133
defExampleResponse,
3234
resetResponseHandle,
3335
}: RequestBoxProps) {
34-
36+
const { userAPIKey } = useContext(MetamaskProviderContext);
3537
const exampleRequest = useMemo(() => {
3638
const preparedParams = JSON.stringify(paramsData, null, 2);
3739
const preparedShellParams = JSON.stringify(paramsData);
38-
const NETWORK_URL = "https://linea-mainnet.infura.io";
39-
const API_KEY = "<YOUR-API-KEY>";
40+
const API_KEY = userAPIKey ? userAPIKey : "<YOUR-API-KEY>";
4041
if (isMetamaskNetwork) {
4142
return `await window.ethereum.request({\n "method": "${method}",\n "params": ${preparedParams.replace(/"([^"]+)":/g, '$1:')},\n});`;
4243
}
43-
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 }'`;
44-
}, [method, paramsData]);
44+
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 }'`;
45+
}, [userAPIKey, method, paramsData]);
4546

4647
const exampleResponse = useMemo(() => {
4748
if (defExampleResponse && response === undefined) {

0 commit comments

Comments
 (0)