Skip to content

Commit

Permalink
Faucet in MetaMask implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
Vlad Lo. committed Aug 23, 2024
1 parent 1d1ce86 commit c92e14f
Show file tree
Hide file tree
Showing 15 changed files with 400 additions and 255 deletions.
8 changes: 6 additions & 2 deletions src/components/Accordion/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Accordion({ children, opened = false }: IAccordion) {
export function AccordionHeader({
children,
}: {
children: React.ReactElement;
children: string | React.ReactElement;
}) {
return (
<Text as="h3" className={styles.accordionHeader}>
Expand All @@ -49,7 +49,11 @@ export function AccordionHeader({
);
}

export function AccordionBody({ children }: { children: React.ReactElement }) {
export function AccordionBody({
children,
}: {
children: string | React.ReactElement;
}) {
return (
<Text as="p" className={styles.accordionContainer}>
{children}
Expand Down
176 changes: 98 additions & 78 deletions src/components/AuthLogin/AuthModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import Modal from "react-modal";
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./styles.module.css";
import global from "../ParserOpenRPC/global.module.css";
import Icon from "../Icon/Icon";
Expand All @@ -11,6 +11,7 @@ import {
AUTH_WALLET_PROJECTS,
saveTokenString,
getUserIdFromJwtToken,
AUTH_WALLET_USER_PLAN,
} from "../../lib/siwsrp/auth";
import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";

Expand All @@ -20,8 +21,10 @@ type AuthModalProps = {
setOpen: (arg: boolean) => void;
setProjects: (arg: any[]) => void;
setUser: (arg: string) => void;
setToken: (arg: string) => void;
step: AUTH_LOGIN_STEP;
setStep: (arg: AUTH_LOGIN_STEP) => void;
setUksTier: (arg: string) => void;
};

export enum AUTH_LOGIN_STEP {
Expand Down Expand Up @@ -106,96 +109,113 @@ const AuthModal = ({
setProjects,
step,
setStep,
setUser,
setToken,
setUksTier,
}: AuthModalProps) => {
const { siteConfig } = useDocusaurusContext();
const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {}
const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};

const login = async () => {
setStep(AUTH_LOGIN_STEP.CONNECTING)
setStep(AUTH_LOGIN_STEP.CONNECTING);
try {
// Call Profile SDK API to retrieve Hydra Access Token & Wallet userProfile
// Hydra Access Token will be used to fetch Infura API
const { accessToken, userProfile } = await authenticateAndAuthorize();

// Check on Infura API if this wallet is paired with one or multiple Infura account
const pairingResponse = await fetch(`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/pairing`, {
...REQUEST_PARAMS(),
headers: {
...REQUEST_PARAMS().headers,
hydra_token: accessToken,
},
body: JSON.stringify({
profileId: userProfile.profileId,
}),
});

const usersPairing = await pairingResponse.json();
const { data } = usersPairing;
// Saving of paired Infura accounts in local storage
localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));

// Handling no wallet pairing or multiple pairing
if (data.length !== 1) {
const mm_auth = Buffer.from(
JSON.stringify({
token: true,
step:
data.length > 1
? AUTH_LOGIN_STEP.WALLET_LOGIN_MULTI_USER
: AUTH_LOGIN_STEP.WALLET_LOGIN_EMAIL_PASSWORD,
mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
walletPairing: data,
})
).toString("base64");
window.location.href = `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/login?mm_auth=${mm_auth}&token=true&redirect_to=${window.location.href}`;
return;
}
// Hydra Access Token will be used to fetch Infura API
const { accessToken, userProfile } = await authenticateAndAuthorize();

// We have one wallet paired with one Infura account
// Use this Infura email account and this ProfileId to login to Infura
// Pass token in request params to generate and recieve an Infura access Token
const email = data[0].email as string;
const userWithTokenResponse = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login?token=true`,
{
...REQUEST_PARAMS(),
headers: {
...REQUEST_PARAMS().headers,
hydra_token: accessToken,
recaptcha_bypass: "84450394",
// Check on Infura API if this wallet is paired with one or multiple Infura account
const pairingResponse = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/pairing`,
{
...REQUEST_PARAMS("POST", { hydra_token: accessToken }),
body: JSON.stringify({
profileId: userProfile.profileId,
}),
},
body: JSON.stringify({
email,
profileId: userProfile.profileId,
}),
);

const usersPairing = await pairingResponse.json();
const { data } = usersPairing;
// Saving of paired Infura accounts in local storage
localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));

// Handling no wallet pairing or multiple pairing
if (data.length !== 1) {
const mm_auth = Buffer.from(
JSON.stringify({
token: true,
step:
data.length > 1
? AUTH_LOGIN_STEP.WALLET_LOGIN_MULTI_USER
: AUTH_LOGIN_STEP.WALLET_LOGIN_EMAIL_PASSWORD,
mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
walletPairing: data,
}),
).toString("base64");
window.location.href = `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/login?mm_auth=${mm_auth}&token=true&redirect_to=${window.location.href}`;
return;
}
);

const { token } = await userWithTokenResponse.json();
saveTokenString(token);
const userId = getUserIdFromJwtToken();

// You can use Infura Access Token to fetch any Infura API endpoint
const projectsResponse = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`,
{
...REQUEST_PARAMS("GET"),
headers: {
...REQUEST_PARAMS("GET").headers,
Authorization: `Bearer ${token}`,

// We have one wallet paired with one Infura account
// Use this Infura email account and this ProfileId to login to Infura
// Pass token in request params to generate and recieve an Infura access Token
const email = data[0].email as string;
const userWithTokenResponse = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login?token=true`,
{
...REQUEST_PARAMS("POST", {
hydra_token: accessToken,
recaptcha_bypass: "84450394",
}),
body: JSON.stringify({
email,
profileId: userProfile.profileId,
}),
},
);

const { token } = await userWithTokenResponse.json();
saveTokenString(token);
if (setToken) {
setToken(token);
}
const userId = getUserIdFromJwtToken();
if (setUser) {
setUser(userId);
}
);
const {
result: { projects },
} = await projectsResponse.json();
sessionStorage.setItem(AUTH_WALLET_PROJECTS, JSON.stringify(projects));
setProjects(projects);
setOpen(false);

// You can use Infura Access Token to fetch any Infura API endpoint
const projectsResponse = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`,
{
...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
},
);
const {
result: { projects },
} = await projectsResponse.json();
sessionStorage.setItem(AUTH_WALLET_PROJECTS, JSON.stringify(projects));
setProjects(projects);

const uksUserRawResp = await fetch(
`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}`,
{
...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
},
);
const {
result: {
servicePlan: { tier },
},
} = await uksUserRawResp.json();
localStorage.setItem(AUTH_WALLET_USER_PLAN, JSON.stringify(tier));
if (setUser) {
setUksTier(tier);
}
setOpen(false);
} catch (e: any) {
setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR)
setOpen(true)
setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR);
setOpen(true);
}
};

Expand Down
1 change: 1 addition & 0 deletions src/components/Badge/badge.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
padding: 2px 8px;
color: var(--badge-default-color);
background-color: var(--badge-default-bg-color);
text-transform: capitalize;

&.success {
color: var(--badge-success-color);
Expand Down
56 changes: 39 additions & 17 deletions src/components/Faucet/Alerts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ export const AlertCommonIssue = () => (
<div>
<AlertTitle>Issue starting transaction</AlertTitle>
<AlertText>
There was an issue starting your transaction. Try again in a few minutes.
If the problem persists please{" "}
<a target="_blank" href="https://www.infura.io/contact">
contact us
</a>
.
<span>
There was an issue starting your transaction. Try again in a few
minutes. If the problem persists please{" "}
<a target="_blank" href="https://www.infura.io/contact">
contact us
</a>
.
</span>
</AlertText>
</div>
);
Expand All @@ -26,15 +28,33 @@ export const AlertPastActivity = () => (
</div>
);

export const AlertBalanceTooLow = () => (
<div>
<AlertTitle>Balance Too Low</AlertTitle>
<AlertText>
<span>
Your current Ethereum address does not contain enough Ether on the
Ethereum Mainnet. Please ensure you have at least 0.001 ETH before
proceeding. You can easily add funds to your address using{" "}
<a className="underline" href="https://metamask.io/buy-crypto/">
MetaMask
</a>
</span>
</AlertText>
</div>
);

export const AlertCooldown = () => (
<div>
<AlertTitle>Cooldown period</AlertTitle>
<AlertText>
You already got ETH from the faucet today. Try again in 24 hours.{" "}
<a target="_blank" href="https://www.infura.io/contact">
Contact us
</a>
.
<span>
You already got ETH from the faucet today. Try again in 24 hours.{" "}
<a target="_blank" href="https://www.infura.io/contact">
Contact us
</a>
.
</span>
</AlertText>
</div>
);
Expand All @@ -43,12 +63,14 @@ export const AlertSuccess = ({ url }: { url: string }) => (
<div>
<AlertTitle>Transaction successfull!</AlertTitle>
<AlertText>
Your transaction has been sent to the Ethereum/Sepolia network. You should
be receiving your ETH shortly.{" "}
<a target="_blank" href={url}>
View on Etherscan
</a>
.
<span>
Your transaction has been sent to the Ethereum/Sepolia network. You
should be receiving your ETH shortly.{" "}
<a target="_blank" href={url}>
View on Etherscan
</a>
.
</span>
</AlertText>
</div>
);
Loading

0 comments on commit c92e14f

Please sign in to comment.