fix(mm-login): update api url (#1688)

* fix(mm-login): update api url

* feat(login): update dashboard url env

* feat(login): update cors config

* feat(login): update cors config

* feat(login): fix build

* feat(login): fix localhost port

* feat(login): fix build

Author: Cédric Magne

docusaurus.config.js

@@ -35,7 +35,7 @@ const config = {
   customFields: {
     LD_CLIENT_ID: process.env.LD_CLIENT_ID,
     VERCEL_ENV: process.env.VERCEL_ENV,
-    DASHBOARD_PREVIEW_URL: process.env.DASHBOARD_PREVIEW_URL,
+    DASHBOARD_URL: process.env.DASHBOARD_URL || 'http://localhost:3000',
     SENTRY_KEY: process.env.SENTRY_KEY,
     GF_SURVEY_KEY: process.env.GF_SURVEY_KEY,
   },

src/components/AuthLogin/AuthModal.tsx

@@ -14,7 +14,7 @@ import {
   getUserIdFromJwtToken,
   AUTH_WALLET_USER_PLAN,
 } from "../../lib/siwsrp/auth";
-import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
+import { REQUEST_PARAMS } from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 Modal.setAppElement("#__docusaurus");
@@ -145,7 +145,7 @@ const AuthModal = ({
   setUksTier,
 }: AuthModalProps) => {
   const { siteConfig } = useDocusaurusContext();
-  const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
+  const { DASHBOARD_URL, VERCEL_ENV } = siteConfig?.customFields || {};
   const {
     sdk,
     setWalletLinked,
@@ -182,7 +182,7 @@ const AuthModal = ({
 
       const loginResponse = await (
         await fetch(
-          `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login`,
+          `${DASHBOARD_URL}/api/wallet/login`,
           {
             ...REQUEST_PARAMS("POST", {
               hydra_token: accessToken,
@@ -212,7 +212,7 @@ const AuthModal = ({
           }),
         ).toString("base64");
 
-        const walletLinkUrl = `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
+        const walletLinkUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
 
         setWalletLinkUrl(walletLinkUrl);
 
@@ -248,7 +248,7 @@ const AuthModal = ({
 
       // 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`,
+        `${DASHBOARD_URL}/api/v1/users/${userId}/projects`,
         {
           ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
         },
@@ -260,7 +260,7 @@ const AuthModal = ({
       setProjects(projects);
 
       const uksUserRawResp = await fetch(
-        `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}`,
+        `${DASHBOARD_URL}/api/v1/users/${userId}`,
         {
           ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
         },

src/components/CodeTerminal/AlertMsg.jsx

@@ -1,6 +1,14 @@
 import React from "react";
-import { MSG_TYPES, DASHBOARD_URL } from "@site/src/lib/constants";
+import { MSG_TYPES } from "@site/src/lib/constants";
 import Link from "@docusaurus/Link";
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+const getDashboardUrl = () => {
+  const { siteConfig } = useDocusaurusContext();
+  const { DASHBOARD_URL } = siteConfig?.customFields || {}
+  
+  return DASHBOARD_URL
+}
 
 export const INFO_MSG = {
   EMPTY_MSG: {
@@ -28,7 +36,7 @@ export const INFO_MSG = {
       <>
         Your request has been sent to the network endpoint you selected which
         returned a response with the requested information. Let’s see how it
-        performed in <Link to={`${DASHBOARD_URL}/dashboard/stats`}>stats</Link> or
+        performed in <Link to={`${getDashboardUrl}/dashboard/stats`}>stats</Link> or
         dive into{" "}
         <Link to="https://docs.infura.io/dashboard-stats">stats docs</Link>.
       </>
@@ -52,7 +60,7 @@ export const INFO_MSG = {
     description: (
       <>
         You don’t have any API Keys yet.{" "}
-        <Link to={`${DASHBOARD_URL}/dashboard`}>Create an API key</Link> to access
+        <Link to={`${getDashboardUrl}/dashboard`}>Create an API key</Link> to access
         your keys and send requests.
       </>
     ),
@@ -65,7 +73,7 @@ export const INFO_MSG = {
       <>
         The API key selected is not authorized for this specific product. To
         enable access, please add this product to your API key through the{" "}
-        <Link to={`${DASHBOARD_URL}/dashboard`}>Infura Dashboard</Link>
+        <Link to={`${getDashboardUrl}/dashboard`}>Infura Dashboard</Link>
       </>
     ),
   },

src/components/CodeTerminal/TerminalViewBox.jsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from "react";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Icon from "../Icon/Icon";
-import { DASHBOARD_URL } from "../../lib/constants";
 import Link from "@docusaurus/Link";
 import CodeBlock from "@theme/CodeBlock";
 
@@ -17,7 +16,7 @@ const TerminalViewBox = ({
 }) => {
 
   const { siteConfig } = useDocusaurusContext();
-  const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {}
+  const { DASHBOARD_URL } = siteConfig?.customFields || {}
 
   const exampleRequest = useMemo(() => {
     const prepareParams = params.length === 0 ? "" : params.map(param => {
@@ -52,13 +51,13 @@ const TerminalViewBox = ({
               </div>
             ) : (
               <p className="description-row">
-                <Link target="_blank" to={`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/login`} rel="noreferrer">
+                <Link target="_blank" to={`${DASHBOARD_URL}/login`} rel="noreferrer">
                   Sign in
                 </Link>{" "}
                 or{" "}
                 <Link
                   target="_blank"
-                  to={`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/register`}
+                  to={`${DASHBOARD_URL}/register`}
                   rel="noreferrer">
                   create an account
                 </Link>{" "}

src/hooks/useUser.js

@@ -1,24 +1,24 @@
 import { useState, useEffect } from "react";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { DASHBOARD_URL, GET_OPTIONS } from "../lib/constants";
+import { GET_OPTIONS } from "../lib/constants";
 
 export default function useUser() {
   const { siteConfig } = useDocusaurusContext();
-  const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {}
+  const { DASHBOARD_URL } = siteConfig?.customFields || {}
   const [user, setUser] = useState(undefined);
   const [loading, setLoading] = useState(true);
   const [keys, setKeys] = useState([]);
 
   const getUserInfo = async () => {
     setLoading(true);
     try {
-      const res = await fetch(`${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/me`, GET_OPTIONS);
+      const res = await fetch(`${DASHBOARD_URL}/api/me`, GET_OPTIONS);
       const response = await res.json();
       if (response?.data) {
         setUser(response.data);
         const userId = response.data.id;
         const upData = await fetch(
-          `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`,
+          `${DASHBOARD_URL}/api/v1/users/${userId}/projects`,
           GET_OPTIONS
         );
         if (upData.ok) {

src/lib/constants.js

@@ -1,14 +1,3 @@
-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 REF_PATH = "/wallet/reference/new-reference";
 
 const TEST_TRANSACTIONS = {
@@ -473,6 +462,7 @@ export const REQUEST_PARAMS = (method = "POST", headers = {}) => ({
     "Content-Type": "application/json",
     "Cache-Control": "no-cache",
     Pragma: "no-cache",
+    mode: 'cors',
     ...headers
   },
 });

src/pages/developer-tools/faucet.tsx

@@ -18,7 +18,7 @@ import { useAlert } from "react-alert";
 import {MetamaskProviderContext} from "@site/src/theme/Root";
 
 import styles from "./faucet.module.scss";
-import { DASHBOARD_URL, REQUEST_PARAMS } from "@site/src/lib/constants";
+import { REQUEST_PARAMS } from "@site/src/lib/constants";
 import { AlertBalanceTooLow } from "@site/src/components/Faucet/Alerts";
 import {
   trackInputChangeForSegment,
@@ -44,7 +44,7 @@ export default function Faucet() {
   const [isLineaMaintenance, setIsLineaMaintenance] = useState(false);
   const [isSepoliaMaintenance, setIsSepoliaMaintenance] = useState(false);
   const [faucetBypassDomain, setFaucetBypassDomain] = useState(false);
-  const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
+  const { DASHBOARD_URL } = siteConfig?.customFields || {};
 
   const isLimitedUserPlan = uksTier === "core" && !faucetBypassDomain;
 
@@ -61,7 +61,7 @@ export default function Faucet() {
 
   const getTransactions = async () => {
     const sepolia = await fetch(
-      `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/faucets/sepolia/transactions`,
+      `${DASHBOARD_URL}/api/faucets/sepolia/transactions`,
       {
         ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
       },
@@ -70,7 +70,7 @@ export default function Faucet() {
     setTransactionsForNetwork("sepolia", sepoliaData);
 
     const linea = await fetch(
-      `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/faucets/linea/transactions`,
+      `${DASHBOARD_URL}/api/faucets/linea/transactions`,
       {
         ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
       },
@@ -84,7 +84,7 @@ export default function Faucet() {
     const address = walletAddress.trim();
     try {
       const faucetRawResponse = await fetch(
-        `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/faucets/${network}?address=${address}`,
+        `${DASHBOARD_URL}/api/faucets/${network}?address=${address}`,
         {
           ...REQUEST_PARAMS("POST", { Authorization: `Bearer ${token}` }),
           body: JSON.stringify({ dstAddress: address }),

src/theme/Root.tsx

@@ -10,7 +10,6 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { AlertTemplate, options } from "@site/src/components/Alert";
 import { MetaMaskSDK, SDKProvider } from "@metamask/sdk";
 import {
-  DASHBOARD_URL,
   REF_ALLOW_LOGIN_PATH,
   REQUEST_PARAMS,
   AUTH_WALLET_PROJECTS,
@@ -112,7 +111,7 @@ export const LoginProvider = ({ children }) => {
   const [walletLinkUrl, setWalletLinkUrl] = useState<string>("");
   const [userAPIKey, setUserAPIKey] = useState("");
   const { siteConfig } = useDocusaurusContext();
-  const { DASHBOARD_PREVIEW_URL, VERCEL_ENV } = siteConfig?.customFields || {};
+  const { DASHBOARD_URL } = siteConfig?.customFields || {};
 
   if (sdk.isInitialized() && !isInitialized) {
     setIsInitialized(true);
@@ -169,7 +168,7 @@ export const LoginProvider = ({ children }) => {
         (async () => {
           try {
             const projectsResponse = await fetch(
-              `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userIdFromjwtToken}/projects`,
+              `${DASHBOARD_URL}/api/v1/users/${userIdFromjwtToken}/projects`,
               {
                 ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }),
               },