fix(mm-login): liting issues and improve profile sdk env setting (#1576)

* fix(mm-login): liting issues and improve profile sdk env setting * fix(mm-login): removing console.log
MetaMask · Sep 26, 2024 · 7d998fe · 7d998fe
1 parent 6f3df56
commit 7d998fe
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 48 deletions.
diff --git a/src/components/AuthLogin/AuthModal.tsx b/src/components/AuthLogin/AuthModal.tsx
@@ -7,12 +7,15 @@ import global from "../ParserOpenRPC/global.module.css";
 import Icon from "../Icon/Icon";
 import {
   authenticateAndAuthorize,
-  AUTH_WALLET_SESSION_NAME,
-  AUTH_WALLET_PROJECTS,
   saveTokenString,
   getUserIdFromJwtToken,
 } from "../../lib/siwsrp/auth";
-import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
+import {
+  DASHBOARD_URL,
+  REQUEST_PARAMS,
+  AUTH_WALLET_SESSION_NAME,
+  AUTH_WALLET_PROJECTS,
+} from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 Modal.setAppElement("#__docusaurus");
@@ -247,7 +250,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => {
       setProjects(projects);
       setOpen(false);
     } catch (e: any) {
-      if (pathname.startsWith('/wallet/reference')) {
+      if (pathname.startsWith("/wallet/reference")) {
         setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
         setOpen(true);
       } else {

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -2,11 +2,12 @@ export const PROD_APP_URL = "https://app.infura.io";
 export const STAGE_APP_URL = "https://infura-app-staging.vercel.app";
 export const DEV_APP_URL = "http://localhost:3000";
 
-export const DASHBOARD_URL = (DASHBOARD_PREVIEW_URL, VERCEL_ENV) => DASHBOARD_PREVIEW_URL
-  ? DASHBOARD_PREVIEW_URL
-  : VERCEL_ENV === "production"
-    ? PROD_APP_URL
-    : STAGE_APP_URL;
+export const DASHBOARD_URL = (DASHBOARD_PREVIEW_URL, VERCEL_ENV) =>
+  DASHBOARD_PREVIEW_URL
+    ? DASHBOARD_PREVIEW_URL
+    : VERCEL_ENV === "production"
+      ? PROD_APP_URL
+      : STAGE_APP_URL;
 
 export const REF_PATH = "/wallet/reference/new-reference";
 
@@ -469,3 +470,7 @@ export const REQUEST_PARAMS = (method = "POST") => ({
     Pragma: "no-cache",
   },
 });
+
+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";
diff --git a/src/lib/siwsrp/auth.ts b/src/lib/siwsrp/auth.ts
@@ -1,5 +1,10 @@
 import { SDK } from "@metamask/profile-sync-controller";
 import jwt from "jsonwebtoken";
+import {
+  AUTH_WALLET_PROJECTS,
+  AUTH_WALLET_SESSION_NAME,
+  AUTH_WALLET_TOKEN,
+} from "@site/src/lib/constants";
 
 type HydraEnv = {
   authApiUrl: string;
@@ -10,15 +15,11 @@ type HydraEnv = {
 };
 
 const { AuthType, Env, getEnvUrls, JwtBearerAuth, Platform } = SDK;
-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 getHydraEnv = (env: string): HydraEnv => {
   const platform = Platform.INFURA;
 
-  if (VERCEL_ENV === "production") {
+  if (env === "production") {
     return {
       ...getEnvUrls(Env.PRD),
       env: Env.PRD,
@@ -43,25 +44,24 @@ const storage: SDK.AuthStorageOptions = {
   },
 };
 
-export const auth = new JwtBearerAuth(
-  {
-    env: getHydraEnv().env,
-    platform: getHydraEnv().platform,
-    type: AuthType.SRP,
-  },
-  {
-    storage,
-  }
-);
+const auth = (env: string) =>
+  new JwtBearerAuth(
+    {
+      env: getHydraEnv(env).env,
+      platform: getHydraEnv(env).platform,
+      type: AuthType.SRP,
+    },
+    {
+      storage,
+    }
+  );
 
 export const authenticateAndAuthorize = async (env: string) => {
   let accessToken: string, userProfile: SDK.UserProfile;
-  VERCEL_ENV = env;
-  console.log(VERCEL_ENV)
   try {
-    await auth.connectSnap();
-    accessToken = await auth.getAccessToken();
-    userProfile = await auth.getUserProfile();
+    await auth(env).connectSnap();
+    accessToken = await auth(env).getAccessToken();
+    userProfile = await auth(env).getUserProfile();
   } catch (e: any) {
     throw new Error(e.message);
   }

diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -14,19 +14,18 @@ import {
   DASHBOARD_URL,
   REF_ALLOW_LOGIN_PATH,
   REQUEST_PARAMS,
+  AUTH_WALLET_PROJECTS,
 } from "@site/src/lib/constants";
 import {
-  AUTH_WALLET_PROJECTS,
   clearStorage,
   getUserIdFromJwtToken,
   saveTokenString,
 } from "@site/src/lib/siwsrp/auth";
 import AuthModal, {
   AUTH_LOGIN_STEP,
-  WALLET_LINK_TYPE
+  WALLET_LINK_TYPE,
 } from "@site/src/components/AuthLogin/AuthModal";
 
-
 interface Project {
   id: string;
   userId: string;
@@ -53,10 +52,10 @@ interface IMetamaskProviderContext {
   setMetaMaskProvider: (arg: SDKProvider) => void;
   sdk: MetaMaskSDK;
   disconnect: () => Promise<void>;
-  setWalletLinked: (arg: WALLET_LINK_TYPE) => void
-  walletLinked: WALLET_LINK_TYPE | undefined
-  setWalletLinkUrl: (arg: string) => void
-  walletLinkUrl: string
+  setWalletLinked: (arg: WALLET_LINK_TYPE) => void;
+  walletLinked: WALLET_LINK_TYPE | undefined;
+  setWalletLinkUrl: (arg: string) => void;
+  walletLinkUrl: string;
 }
 
 export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
@@ -74,7 +73,7 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   setWalletLinked: () => {},
   walletLinked: undefined,
   setWalletLinkUrl: () => {},
-  walletLinkUrl: ''
+  walletLinkUrl: "",
 });
 
 const sdk = new MetaMaskSDK({
@@ -92,14 +91,16 @@ const sdk = new MetaMaskSDK({
 
 export const LoginProvider = ({ children }) => {
   const [projects, setProjects] = useState({});
-  const [userId, setUserId] = useState<string>('');
+  const [userId, setUserId] = useState<string>("");
   const [openAuthModal, setOpenAuthModal] = useState<boolean>(false);
   const [metaMaskProvider, setMetaMaskProvider] = useState(undefined);
   const [metaMaskAccount, setMetaMaskAccount] = useState(undefined);
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [step, setStep] = useState<AUTH_LOGIN_STEP>(AUTH_LOGIN_STEP.CONNECTING);
-  const [walletLinked, setWalletLinked] = useState<WALLET_LINK_TYPE | undefined>(undefined);
-  const [walletLinkUrl, setWalletLinkUrl] = useState<string>('');
+  const [walletLinked, setWalletLinked] = useState<
+    WALLET_LINK_TYPE | undefined
+  >(undefined);
+  const [walletLinkUrl, setWalletLinkUrl] = useState<string>("");
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
 
@@ -110,7 +111,7 @@ export const LoginProvider = ({ children }) => {
   const getStaleDate = async () => {
     try {
       setProjects(
-        JSON.parse(sessionStorage.getItem(AUTH_WALLET_PROJECTS) || "{}"),
+        JSON.parse(sessionStorage.getItem(AUTH_WALLET_PROJECTS) || "{}")
       );
       setUserId(getUserIdFromJwtToken());
       const accounts = await sdk.connect();
@@ -127,7 +128,7 @@ export const LoginProvider = ({ children }) => {
     const provider = sdk?.getProvider();
     setMetaMaskProvider(provider);
   }, []);
-  
+
   useEffect(() => {
     if (isInitialized && sdk.isExtensionActive()) {
       const provider = sdk.getProvider();
@@ -141,7 +142,7 @@ export const LoginProvider = ({ children }) => {
     getStaleDate();
     if (REF_ALLOW_LOGIN_PATH.some((item) => url.pathname.includes(item))) {
       const token = url.searchParams.get("token");
-      
+
       if (token) {
         saveTokenString(token);
         const userIdFromjwtToken = getUserIdFromJwtToken();
@@ -157,7 +158,7 @@ export const LoginProvider = ({ children }) => {
                   ...REQUEST_PARAMS("GET").headers,
                   Authorization: `Bearer ${token}`,
                 },
-              },
+              }
             );
             const res = await projectsResponse.json();
             if (res.error) throw new Error(res.error.message);
@@ -167,7 +168,7 @@ export const LoginProvider = ({ children }) => {
             } = res;
             sessionStorage.setItem(
               AUTH_WALLET_PROJECTS,
-              JSON.stringify(projects),
+              JSON.stringify(projects)
             );
             setProjects(projects);
             window.location.replace(`${url.origin}${url.pathname}`);
@@ -195,7 +196,7 @@ export const LoginProvider = ({ children }) => {
       setUserId(undefined);
       setMetaMaskAccount(undefined);
       setProjects({});
-      setWalletLinked(undefined)
+      setWalletLinked(undefined);
       clearStorage();
     } catch (err) {
       console.warn("failed to disconnect..", err);
@@ -221,7 +222,7 @@ export const LoginProvider = ({ children }) => {
               walletLinked,
               setWalletLinked,
               walletLinkUrl,
-              setWalletLinkUrl
+              setWalletLinkUrl,
             } as IMetamaskProviderContext
           }
         >