Skip to content

Commit 87d2dfa

Browse files
Vlad LobachovTrofimovAnton85Magne CedricaednikanovFrederikBolding
authored
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]>
1 parent 67e0fa3 commit 87d2dfa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1970
-77
lines changed

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ Build the documentation site locally using the following steps.
1212
### Prerequisites
1313

1414
- [Node.js](https://nodejs.org/) version 18+
15-
- [Yarn](https://yarnpkg.com/) version 3
1615
- [Git](https://git-scm.com/)
1716

1817
### Steps

‎docusaurus.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,10 @@ const config = {
199199
label: "Infura dashboard",
200200
to: "developer-tools/dashboard",
201201
},
202+
{
203+
label: "Faucet",
204+
to: "developer-tools/faucet",
205+
},
202206
],
203207
},
204208
{

‎src/components/Accordion/accordion.module.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
:root[data-theme="dark"] {
2+
--accordion-background: #24272a;
3+
--accordion-border: rgba(132, 140, 150, 0.16);
4+
}
5+
6+
:root[data-theme="light"] {
7+
--accordion-background: #ffffff;
8+
--accordion-border: rgba(187, 192, 197, 0.4);
9+
}
10+
11+
.accordion {
12+
background: var(--accordion-background);
13+
border: 1px solid var(--accordion-border);
14+
border-radius: 8px;
15+
margin-bottom: 24px;
16+
17+
.header {
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
cursor: pointer;
22+
23+
.closeButton {
24+
cursor: pointer;
25+
margin-left: 24px;
26+
margin-right: 24px;
27+
display: block;
28+
height: 16px;
29+
line-height: 1;
30+
31+
.image {
32+
min-width: 16px;
33+
width: 16px;
34+
min-height: 16px;
35+
height: 16px;
36+
transition: all 0.5s;
37+
transform: rotate(45deg);
38+
39+
&.opened {
40+
transform: rotate(0);
41+
}
42+
}
43+
}
44+
}
45+
46+
.content {
47+
visibility: hidden;
48+
display: none;
49+
50+
&.opened {
51+
visibility: visible;
52+
display: block;
53+
}
54+
}
55+
}

‎src/components/Accordion/close.svg

+4
Loading

‎src/components/Accordion/index.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { useState } from "react";
2+
import clsx from "clsx";
3+
import styles from "./accordion.module.scss";
4+
import CloseImg from "./close.svg";
5+
import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
6+
7+
interface IAccordion {
8+
children: [React.ReactElement, React.ReactElement];
9+
opened?: boolean;
10+
}
11+
12+
export default function Accordion({
13+
children: [title, body],
14+
opened = false,
15+
}: IAccordion) {
16+
const [isOpened, setIsOpened] = useState(opened);
17+
18+
const handleToggle = () => {
19+
trackClickForSegment({
20+
eventName: `${isOpened ? "Expanded" : "Collapsed"} - ${title}`,
21+
clickType: "Accordion",
22+
userExperience: "B",
23+
responseStatus: null,
24+
responseMsg: null,
25+
timestamp: Date.now(),
26+
});
27+
setIsOpened((value) => !value);
28+
};
29+
30+
return (
31+
<div className={styles.accordion}>
32+
<div
33+
role="button"
34+
data-testid="accordion-title"
35+
onClick={handleToggle}
36+
className={styles.header}
37+
>
38+
{title}
39+
<span
40+
role="button"
41+
data-testid="accordion-button-x"
42+
className={styles.closeButton}
43+
>
44+
<CloseImg className={clsx(styles.image, isOpened && styles.opened)} />
45+
</span>
46+
</div>
47+
<div className={clsx(styles.content, isOpened && styles.opened)}>
48+
{body}
49+
</div>
50+
</div>
51+
);
52+
}

‎src/components/Alert/index.tsx

+39-19
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import SuccessImg from "./success.svg";
77
import ErrorImg from "./error.svg";
88
import Text from "@site/src/components/Text";
99
import styles from "./alert.module.scss";
10+
import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
1011

1112
export const options = {
1213
position: positions.TOP_CENTER,
@@ -18,25 +19,44 @@ export const options = {
1819
},
1920
};
2021

21-
export const AlertTemplate = ({ style, options, message, close }) => (
22-
<div
23-
style={style}
24-
className={clsx(
25-
styles.alert,
26-
options.type === types.INFO && styles.info,
27-
options.type === types.SUCCESS && styles.success,
28-
options.type === types.ERROR && styles.error,
29-
)}
30-
>
31-
{options.type === types.INFO && <InfoImg className={styles.icon} />}
32-
{options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
33-
{options.type === types.ERROR && <ErrorImg className={styles.icon} />}
34-
{message}
35-
<span role="button" onClick={close} className={styles.closeButton}>
36-
<CloseImg className={styles.closeIcon} />
37-
</span>
38-
</div>
39-
);
22+
export const AlertTemplate = ({ style, options, message, close }) => {
23+
const handleCloseAlert = () => {
24+
trackClickForSegment({
25+
eventName: "Close",
26+
clickType: "Alert",
27+
userExperience: "B",
28+
responseStatus: null,
29+
responseMsg: null,
30+
timestamp: Date.now(),
31+
});
32+
close();
33+
};
34+
35+
return (
36+
<div
37+
style={style}
38+
className={clsx(
39+
styles.alert,
40+
options.type === types.INFO && styles.info,
41+
options.type === types.SUCCESS && styles.success,
42+
options.type === types.ERROR && styles.error,
43+
)}
44+
>
45+
{options.type === types.INFO && <InfoImg className={styles.icon} />}
46+
{options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
47+
{options.type === types.ERROR && <ErrorImg className={styles.icon} />}
48+
{message}
49+
<span
50+
role="button"
51+
data-testid="alert-close"
52+
onClick={handleCloseAlert}
53+
className={styles.closeButton}
54+
>
55+
<CloseImg className={styles.closeIcon} />
56+
</span>
57+
</div>
58+
);
59+
};
4060

4161
export const AlertTitle = ({
4262
children,

‎src/components/AuthLogin/AuthModal.tsx

+46-20
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,25 @@ import global from "../ParserOpenRPC/global.module.css";
77
import Icon from "../Icon/Icon";
88
import {
99
authenticateAndAuthorize,
10+
AUTH_WALLET_PAIRING,
11+
AUTH_WALLET_SESSION_NAME,
12+
AUTH_WALLET_PROJECTS,
1013
saveTokenString,
1114
getUserIdFromJwtToken,
15+
AUTH_WALLET_USER_PLAN,
1216
} from "../../lib/siwsrp/auth";
13-
import {
14-
DASHBOARD_URL,
15-
REQUEST_PARAMS,
16-
AUTH_WALLET_SESSION_NAME,
17-
AUTH_WALLET_PROJECTS,
18-
} from "@site/src/lib/constants";
17+
import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
1918
import { MetamaskProviderContext } from "@site/src/theme/Root";
2019

2120
Modal.setAppElement("#__docusaurus");
2221
type AuthModalProps = {
2322
open: boolean;
2423
setOpen: (arg: boolean) => void;
2524
setUser: (arg: string) => void;
25+
setToken: (arg: string) => void;
2626
step: AUTH_LOGIN_STEP;
2727
setStep: (arg: AUTH_LOGIN_STEP) => void;
28+
setUksTier: (arg: string) => void;
2829
};
2930

3031
export enum AUTH_LOGIN_STEP {
@@ -134,7 +135,15 @@ const ConnectionErrorModal = ({
134135
);
135136
};
136137

137-
const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
138+
const AuthModal = ({
139+
open,
140+
setOpen,
141+
step,
142+
setStep,
143+
setUser,
144+
setToken,
145+
setUksTier,
146+
}: AuthModalProps) => {
138147
const { siteConfig } = useDocusaurusContext();
139148
const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
140149
const {
@@ -168,30 +177,29 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
168177
// Call Profile SDK API to retrieve Hydra Access Token & Wallet userProfile
169178
// Hydra Access Token will be used to fetch Infura API
170179
const { accessToken, userProfile } = await authenticateAndAuthorize(
171-
VERCEL_ENV as string
180+
VERCEL_ENV as string,
172181
);
173182

174183
const loginResponse = await (
175184
await fetch(
176185
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login`,
177186
{
178-
...REQUEST_PARAMS(),
179-
headers: {
180-
...REQUEST_PARAMS().headers,
187+
...REQUEST_PARAMS("POST", {
181188
hydra_token: accessToken,
182189
token: "true",
183-
},
190+
}),
184191
body: JSON.stringify({
185192
profileId: userProfile.profileId,
186193
redirect_to: window.location.href,
187194
}),
188-
}
195+
},
189196
)
190197
).json();
191198

192199
if (!loginResponse) throw new Error("Something went wrong");
193200

194201
const { data, session, token } = loginResponse;
202+
localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
195203

196204
if (data.step) {
197205
// Handling no wallet pairing or multiple pairing
@@ -201,7 +209,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
201209
mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
202210
walletPairing: data.pairing,
203211
token: true,
204-
})
212+
}),
205213
).toString("base64");
206214

207215
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) => {
229237
}
230238

231239
saveTokenString(token);
240+
if (setToken) {
241+
setToken(token);
242+
}
232243
setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
233244
const userId = getUserIdFromJwtToken();
245+
if (setUser) {
246+
setUser(userId);
247+
}
234248

235249
// You can use Infura Access Token to fetch any Infura API endpoint
236250
const projectsResponse = await fetch(
237251
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`,
238252
{
239-
...REQUEST_PARAMS("GET"),
240-
headers: {
241-
...REQUEST_PARAMS("GET").headers,
242-
Authorization: `Bearer ${token}`,
243-
},
244-
}
253+
...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
254+
},
245255
);
246256
const {
247257
result: { projects },
248258
} = await projectsResponse.json();
249259
sessionStorage.setItem(AUTH_WALLET_PROJECTS, JSON.stringify(projects));
250260
setProjects(projects);
261+
262+
const uksUserRawResp = await fetch(
263+
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}`,
264+
{
265+
...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
266+
},
267+
);
268+
const {
269+
result: {
270+
servicePlan: { tier },
271+
},
272+
} = await uksUserRawResp.json();
273+
sessionStorage.setItem(AUTH_WALLET_USER_PLAN, JSON.stringify(tier));
274+
if (setUser) {
275+
setUksTier(tier);
276+
}
251277
setOpen(false);
252278
} catch (e: any) {
253279
if (pathname.startsWith("/wallet/reference")) {

‎src/components/Badge/badge.module.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:root {
2+
--badge-default-color: #6a737d;
3+
--badge-default-bg-color: #f2f4f6;
4+
--badge-default-border-color: transparent;
5+
--badge-success-color: #1c8234;
6+
--badge-success-bg-color: rgba(28, 130, 52, 0.1);
7+
--badge-error-color: #d73847;
8+
--badge-error-bg-color: rgba(215, 56, 71, 0.1);
9+
}
10+
11+
:root[data-theme="dark"] {
12+
--badge-default-color: #bbc0c5;
13+
--badge-default-bg-color: #24272a;
14+
--badge-default-border-color: #bbc0c5;
15+
--badge-success-color: #28a745;
16+
--badge-success-bg-color: rgba(40, 167, 69, 0.15);
17+
--badge-error-color: #e06470;
18+
--badge-error-bg-color: rgba(224, 100, 112, 0.15);
19+
}
20+
21+
.badge {
22+
display: inline-flex;
23+
align-items: center;
24+
font-size: 12px;
25+
line-height: 20px;
26+
font-weight: 500;
27+
letter-spacing: 0.25px;
28+
border-radius: 999px;
29+
border: 1px solid var(--badge-default-border-color);
30+
padding: 2px 8px;
31+
color: var(--badge-default-color);
32+
background-color: var(--badge-default-bg-color);
33+
text-transform: capitalize;
34+
35+
&.success {
36+
color: var(--badge-success-color);
37+
background-color: var(--badge-success-bg-color);
38+
border-color: transparent;
39+
}
40+
41+
&.error {
42+
color: var(--badge-error-color);
43+
background-color: var(--badge-error-bg-color);
44+
border-color: transparent;
45+
}
46+
}

0 commit comments

Comments
 (0)