Skip to content

Commit 79dd3b9

Browse files
author
Cédric Magne
authored
feat(mm-login): improve metamask login (#1572)
* feat(mm-login): improve metamask login * feat(mm-login): remove unused metamask connect handler * feat(unified-login): removing console.log
1 parent eb71ab0 commit 79dd3b9

File tree

6 files changed

+45
-45
lines changed

6 files changed

+45
-45
lines changed

‎src/components/AuthLogin/AuthModal.tsx

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext, useEffect } from "react";
22
import Modal from "react-modal";
33
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4+
import { useLocation } from "@docusaurus/router";
45
import styles from "./styles.module.css";
56
import global from "../ParserOpenRPC/global.module.css";
67
import Icon from "../Icon/Icon";
@@ -11,7 +12,7 @@ import {
1112
saveTokenString,
1213
getUserIdFromJwtToken,
1314
} from "../../lib/siwsrp/auth";
14-
import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
15+
import { DASHBOARD_URL, REQUEST_PARAMS, REF_PATH } from "@site/src/lib/constants";
1516
import { MetamaskProviderContext } from "@site/src/theme/Root";
1617

1718
Modal.setAppElement("#__docusaurus");
@@ -130,15 +131,20 @@ const ConnectionErrorModal = ({
130131
);
131132
};
132133

133-
const AuthModal = ({
134-
open,
135-
setOpen,
136-
step,
137-
setStep,
138-
}: AuthModalProps) => {
134+
const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
139135
const { siteConfig } = useDocusaurusContext();
140136
const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
141-
const { sdk, setWalletLinked, setWalletLinkUrl, metaMaskDisconnect, setProjects, setMetaMaskAccount, setMetaMaskProvider } = useContext(MetamaskProviderContext);
137+
const {
138+
sdk,
139+
setWalletLinked,
140+
setWalletLinkUrl,
141+
metaMaskDisconnect,
142+
setProjects,
143+
setMetaMaskAccount,
144+
setMetaMaskProvider,
145+
} = useContext(MetamaskProviderContext);
146+
const location = useLocation();
147+
const { pathname } = location;
142148

143149
const login = async () => {
144150
setStep(AUTH_LOGIN_STEP.CONNECTING);
@@ -155,10 +161,12 @@ const AuthModal = ({
155161
const provider = sdk.getProvider();
156162
setMetaMaskProvider(provider);
157163
}
158-
164+
159165
// Call Profile SDK API to retrieve Hydra Access Token & Wallet userProfile
160166
// Hydra Access Token will be used to fetch Infura API
161-
const { accessToken, userProfile } = await authenticateAndAuthorize(VERCEL_ENV as string);
167+
const { accessToken, userProfile } = await authenticateAndAuthorize(
168+
VERCEL_ENV as string
169+
);
162170

163171
const loginResponse = await (
164172
await fetch(
@@ -168,7 +176,7 @@ const AuthModal = ({
168176
headers: {
169177
...REQUEST_PARAMS().headers,
170178
hydra_token: accessToken,
171-
token: 'true',
179+
token: "true",
172180
},
173181
body: JSON.stringify({
174182
profileId: userProfile.profileId,
@@ -189,7 +197,7 @@ const AuthModal = ({
189197
step: data.step,
190198
mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
191199
walletPairing: data.pairing,
192-
token: true
200+
token: true,
193201
})
194202
).toString("base64");
195203

@@ -239,8 +247,13 @@ const AuthModal = ({
239247
setProjects(projects);
240248
setOpen(false);
241249
} catch (e: any) {
242-
setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR);
243-
setOpen(true);
250+
if (pathname.startsWith('/wallet/reference')) {
251+
setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
252+
setOpen(true);
253+
} else {
254+
setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR);
255+
setOpen(true);
256+
}
244257
}
245258
};
246259

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ interface AuthBoxProps {
1010
}
1111

1212
export const AuthBox = ({ isMetamaskNetwork = false }: AuthBoxProps) => {
13-
const { metaMaskConnectHandler, metaMaskWalletIdConnectHandler } = useContext(MetamaskProviderContext);
13+
const { metaMaskWalletIdConnectHandler } = useContext(MetamaskProviderContext);
1414
const connectHandler = () => {
1515
trackClickForSegment({
1616
eventName: "Connect wallet",
1717
clickType: "Connect wallet",
1818
userExperience: "B",
1919
});
20-
isMetamaskNetwork ? metaMaskConnectHandler() : metaMaskWalletIdConnectHandler();
20+
metaMaskWalletIdConnectHandler();
2121
};
2222
return (
2323
<div className={styles.msgWrapper}>

‎src/components/ParserOpenRPC/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import { AuthBox } from "@site/src/components/ParserOpenRPC/AuthBox";
1919
import { MetamaskProviderContext } from "@site/src/theme/Root";
2020
import ProjectsBox from "@site/src/components/ParserOpenRPC/ProjectsBox";
21+
import { REF_PATH } from "@site/src/lib/constants";
2122

2223
interface ParserProps {
2324
network: NETWORK_NAMES;
@@ -36,8 +37,6 @@ interface ParserOpenRPCContextProps {
3637
export const ParserOpenRPCContext =
3738
createContext<ParserOpenRPCContextProps | null>(null);
3839

39-
const REF_PATH = "/wallet/reference/new-reference";
40-
4140
export default function ParserOpenRPC({
4241
network,
4342
method,
@@ -52,8 +51,9 @@ export default function ParserOpenRPC({
5251
const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
5352
const [drawerLabel, setDrawerLabel] = useState(null);
5453
const [isComplexTypeView, setIsComplexTypeView] = useState(false);
55-
const { metaMaskAccount, metaMaskProvider } =
56-
useContext(MetamaskProviderContext);
54+
const { metaMaskAccount, metaMaskProvider } = useContext(
55+
MetamaskProviderContext
56+
);
5757
const { colorMode } = useColorMode();
5858
const openModal = () => {
5959
setModalOpen(true);

‎src/lib/constants.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export const DASHBOARD_URL = (DASHBOARD_PREVIEW_URL, VERCEL_ENV) => DASHBOARD_PR
66
? DASHBOARD_PREVIEW_URL
77
: VERCEL_ENV === "production"
88
? PROD_APP_URL
9-
: VERCEL_ENV === "preview"
10-
? STAGE_APP_URL
11-
: DEV_APP_URL;
9+
: STAGE_APP_URL;
10+
11+
export const REF_PATH = "/wallet/reference/new-reference";
1212

1313
const TEST_TRANSACTIONS = {
1414
mainnet: {

‎src/lib/siwsrp/auth.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@ type HydraEnv = {
1010
};
1111

1212
const { AuthType, Env, getEnvUrls, JwtBearerAuth, Platform } = SDK;
13-
let VERCEL_ENV = 'development'
13+
let VERCEL_ENV: string
1414
export const AUTH_WALLET_SESSION_NAME = "auth.wallet.session";
1515
export const AUTH_WALLET_TOKEN = "auth.wallet.token";
1616
export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
1717

1818
export const getHydraEnv = (): HydraEnv => {
1919
const platform = Platform.INFURA;
2020

21-
// if (VERCEL_ENV === "production") {
21+
if (VERCEL_ENV === "production") {
2222
return {
2323
...getEnvUrls(Env.PRD),
2424
env: Env.PRD,
2525
platform,
2626
};
27-
// } else {
28-
// return {
29-
// ...getEnvUrls(Env.DEV),
30-
// env: Env.DEV,
31-
// platform,
32-
// };
33-
// }
27+
} else {
28+
return {
29+
...getEnvUrls(Env.DEV),
30+
env: Env.DEV,
31+
platform,
32+
};
33+
}
3434
};
3535

3636
const storage: SDK.AuthStorageOptions = {

‎src/theme/Root.tsx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ interface Project {
4444
interface IMetamaskProviderContext {
4545
projects: { [key: string]: Project };
4646
setProjects: (arg: { [key: string]: Project }) => void;
47-
metaMaskConnectHandler: () => Promise<void>;
4847
metaMaskDisconnect: () => Promise<void>;
4948
metaMaskWalletIdConnectHandler: () => Promise<void>;
5049
userId: string | undefined;
@@ -63,7 +62,6 @@ interface IMetamaskProviderContext {
6362
export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
6463
projects: {},
6564
setProjects: () => {},
66-
metaMaskConnectHandler: () => new Promise(() => {}),
6765
metaMaskDisconnect: () => new Promise(() => {}),
6866
metaMaskWalletIdConnectHandler: () => new Promise(() => {}),
6967
userId: undefined,
@@ -125,16 +123,6 @@ export const LoginProvider = ({ children }) => {
125123
} catch (e) {}
126124
};
127125

128-
const metaMaskConnectHandler = async () => {
129-
try {
130-
const accounts = await sdk.connect();
131-
setMetaMaskAccount(accounts);
132-
if (accounts && accounts.length > 0) {
133-
setMetaMaskAccount(accounts[0]);
134-
}
135-
} catch (e) {}
136-
};
137-
138126
useEffect(() => {
139127
const provider = sdk?.getProvider();
140128
setMetaMaskProvider(provider);
@@ -224,7 +212,6 @@ export const LoginProvider = ({ children }) => {
224212
setMetaMaskAccount,
225213
projects,
226214
setProjects,
227-
metaMaskConnectHandler,
228215
metaMaskDisconnect,
229216
metaMaskWalletIdConnectHandler,
230217
userId,

0 commit comments

Comments
 (0)