feat(mm-login): improve metamask login

src/components/AuthLogin/AuthModal.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from "react";
 import Modal from "react-modal";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useLocation } from "@docusaurus/router";
 import styles from "./styles.module.css";
 import global from "../ParserOpenRPC/global.module.css";
 import Icon from "../Icon/Icon";
@@ -11,7 +12,7 @@ import {
   saveTokenString,
   getUserIdFromJwtToken,
 } from "../../lib/siwsrp/auth";
-import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
+import { DASHBOARD_URL, REQUEST_PARAMS, REF_PATH } from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 Modal.setAppElement("#__docusaurus");
@@ -130,15 +131,20 @@ const ConnectionErrorModal = ({
   );
 };
 
-const AuthModal = ({
-  open,
-  setOpen,
-  step,
-  setStep,
-}: AuthModalProps) => {
+const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
-  const { sdk, setWalletLinked, setWalletLinkUrl, metaMaskDisconnect, setProjects, setMetaMaskAccount, setMetaMaskProvider } = useContext(MetamaskProviderContext);
+  const {
+    sdk,
+    setWalletLinked,
+    setWalletLinkUrl,
+    metaMaskDisconnect,
+    setProjects,
+    setMetaMaskAccount,
+    setMetaMaskProvider,
+  } = useContext(MetamaskProviderContext);
+  const location = useLocation();
+  const { pathname } = location;
 
   const login = async () => {
     setStep(AUTH_LOGIN_STEP.CONNECTING);
@@ -155,10 +161,12 @@ const AuthModal = ({
         const provider = sdk.getProvider();
         setMetaMaskProvider(provider);
       }
-      
+
       // 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(VERCEL_ENV as string);
+      const { accessToken, userProfile } = await authenticateAndAuthorize(
+        VERCEL_ENV as string
+      );
 
       const loginResponse = await (
         await fetch(
@@ -168,7 +176,7 @@ const AuthModal = ({
             headers: {
               ...REQUEST_PARAMS().headers,
               hydra_token: accessToken,
-              token: 'true',
+              token: "true",
             },
             body: JSON.stringify({
               profileId: userProfile.profileId,
@@ -189,7 +197,7 @@ const AuthModal = ({
             step: data.step,
             mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
             walletPairing: data.pairing,
-            token: true
+            token: true,
           })
         ).toString("base64");
 
@@ -239,8 +247,13 @@ const AuthModal = ({
       setProjects(projects);
       setOpen(false);
     } catch (e: any) {
-      setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR);
-      setOpen(true);
+      if (pathname.startsWith('/wallet/reference')) {
+        setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
+        setOpen(true);
+      } else {
+        setStep(AUTH_LOGIN_STEP.CONNECTION_ERROR);
+        setOpen(true);
+      }
     }
   };
 

src/components/ParserOpenRPC/AuthBox/index.tsx

@@ -10,14 +10,14 @@ interface AuthBoxProps {
 }
 
 export const AuthBox = ({ isMetamaskNetwork = false }: AuthBoxProps) => {
-  const { metaMaskConnectHandler, metaMaskWalletIdConnectHandler } = useContext(MetamaskProviderContext);
+  const { metaMaskWalletIdConnectHandler } = useContext(MetamaskProviderContext);
   const connectHandler = () => {
     trackClickForSegment({
       eventName: "Connect wallet",
       clickType: "Connect wallet",
       userExperience: "B",
     });
-    isMetamaskNetwork ? metaMaskConnectHandler() : metaMaskWalletIdConnectHandler();
+    metaMaskWalletIdConnectHandler();
   };
   return (
     <div className={styles.msgWrapper}>

src/components/ParserOpenRPC/index.tsx

@@ -18,6 +18,7 @@ import {
 import { AuthBox } from "@site/src/components/ParserOpenRPC/AuthBox";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 import ProjectsBox from "@site/src/components/ParserOpenRPC/ProjectsBox";
+import { REF_PATH } from "@site/src/lib/constants";
 
 interface ParserProps {
   network: NETWORK_NAMES;
@@ -36,8 +37,6 @@ interface ParserOpenRPCContextProps {
 export const ParserOpenRPCContext =
   createContext<ParserOpenRPCContextProps | null>(null);
 
-const REF_PATH = "/wallet/reference/new-reference";
-
 export default function ParserOpenRPC({
   network,
   method,
@@ -52,8 +51,9 @@ export default function ParserOpenRPC({
   const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
-  const { metaMaskAccount, metaMaskProvider } =
-    useContext(MetamaskProviderContext);
+  const { metaMaskAccount, metaMaskProvider } = useContext(
+    MetamaskProviderContext
+  );
   const { colorMode } = useColorMode();
   const openModal = () => {
     setModalOpen(true);

src/lib/constants.js

@@ -6,9 +6,9 @@ export const DASHBOARD_URL = (DASHBOARD_PREVIEW_URL, VERCEL_ENV) => DASHBOARD_PR
   ? DASHBOARD_PREVIEW_URL
   : VERCEL_ENV === "production"
     ? PROD_APP_URL
-    : VERCEL_ENV === "preview"
-      ? STAGE_APP_URL
-      : DEV_APP_URL;
+    : STAGE_APP_URL;
+
+export const REF_PATH = "/wallet/reference/new-reference";
 
 const TEST_TRANSACTIONS = {
   mainnet: {

src/lib/siwsrp/auth.ts

@@ -10,27 +10,27 @@ type HydraEnv = {
 };
 
 const { AuthType, Env, getEnvUrls, JwtBearerAuth, Platform } = SDK;
-let VERCEL_ENV = 'development'
+let VERCEL_ENV: string
 export const AUTH_WALLET_SESSION_NAME = "auth.wallet.session";
 export const AUTH_WALLET_TOKEN = "auth.wallet.token";
 export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
 
 export const getHydraEnv = (): HydraEnv => {
   const platform = Platform.INFURA;
 
-  // if (VERCEL_ENV === "production") {
+  if (VERCEL_ENV === "production") {
     return {
       ...getEnvUrls(Env.PRD),
       env: Env.PRD,
       platform,
     };
-  // } else {
-  //   return {
-  //     ...getEnvUrls(Env.DEV),
-  //     env: Env.DEV,
-  //     platform,
-  //   };
-  // }
+  } else {
+    return {
+      ...getEnvUrls(Env.DEV),
+      env: Env.DEV,
+      platform,
+    };
+  }
 };
 
 const storage: SDK.AuthStorageOptions = {

src/theme/Root.tsx

@@ -44,7 +44,6 @@ interface Project {
 interface IMetamaskProviderContext {
   projects: { [key: string]: Project };
   setProjects: (arg: { [key: string]: Project }) => void;
-  metaMaskConnectHandler: () => Promise<void>;
   metaMaskDisconnect: () => Promise<void>;
   metaMaskWalletIdConnectHandler: () => Promise<void>;
   userId: string | undefined;
@@ -63,7 +62,6 @@ interface IMetamaskProviderContext {
 export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   projects: {},
   setProjects: () => {},
-  metaMaskConnectHandler: () => new Promise(() => {}),
   metaMaskDisconnect: () => new Promise(() => {}),
   metaMaskWalletIdConnectHandler: () => new Promise(() => {}),
   userId: undefined,
@@ -125,16 +123,6 @@ export const LoginProvider = ({ children }) => {
     } catch (e) {}
   };
 
-  const metaMaskConnectHandler = async () => {
-    try {
-      const accounts = await sdk.connect();
-      setMetaMaskAccount(accounts);
-      if (accounts && accounts.length > 0) {
-        setMetaMaskAccount(accounts[0]);
-      }
-    } catch (e) {}
-  };
-
   useEffect(() => {
     const provider = sdk?.getProvider();
     setMetaMaskProvider(provider);
@@ -224,7 +212,6 @@ export const LoginProvider = ({ children }) => {
               setMetaMaskAccount,
               projects,
               setProjects,
-              metaMaskConnectHandler,
               metaMaskDisconnect,
               metaMaskWalletIdConnectHandler,
               userId,