V1 Deployment

src/App/AppRoutes.tsx

@@ -14,7 +14,7 @@ import {
 import { TOAST_AUTO_CLOSE_TIME } from "config/ui";
 import { useSettings } from "context/SettingsContext/SettingsContextProvider";
 import { useRealChainIdWarning } from "lib/chains/useRealChainIdWarning";
-import { REFERRAL_CODE_QUERY_PARAM, getAppBaseUrl, isHomeSite } from "lib/legacy";
+import { REFERRAL_CODE_QUERY_PARAM, getAppBaseUrl } from "lib/legacy";
 import { useAccountInitedMetric, useOpenAppMetric } from "lib/metrics";
 import { useConfigureMetrics } from "lib/metrics/useConfigureMetrics";
 import { useHashQueryParams } from "lib/useHashQueryParams";
@@ -34,8 +34,7 @@ import { RedirectPopupModal } from "components/ModalViews/RedirectModal";
 import { NotifyModal } from "components/NotifyModal/NotifyModal";
 import { SettingsModal } from "components/SettingsModal/SettingsModal";
 
-import { HomeRoutes } from "./HomeRoutes";
-import { MainRoutes } from "./MainRoutes";
+import { V1Routes } from "./V1Routes";
 
 const Zoom = cssTransition({
   enter: "zoomIn",
@@ -47,7 +46,6 @@ const Zoom = cssTransition({
 
 export function AppRoutes() {
   const { disconnect } = useDisconnect();
-  const isHome = isHomeSite();
   const location = useLocation();
   const history = useHistory();
 
@@ -148,8 +146,7 @@ export function AppRoutes() {
             openSettings={openSettings}
             showRedirectModal={showRedirectModal}
           />
-          {isHome && <HomeRoutes showRedirectModal={showRedirectModal} />}
-          {!isHome && <MainRoutes openSettings={openSettings} />}
+          <V1Routes openSettings={openSettings} />
         </div>
       </div>
       <ToastContainer

src/App/MainRoutes.tsx

@@ -149,7 +149,7 @@ export function MainRoutes({ openSettings }: { openSettings: () => void }) {
         </SyntheticsStateContextProvider>
       </Route>
       <RedirectWithQuery from="/v2" to="/trade" />
-      <Route exact path="/buy_glp">
+      <Route exact path="/sell_glp">
         <BuyGlp />
       </Route>
       <Route exact path="/jobs">

src/App/V1Routes.tsx

@@ -0,0 +1,121 @@
+import { Trans } from "@lingui/macro";
+import { Provider, ethers } from "ethers";
+import { Suspense, lazy, useEffect, useRef } from "react";
+import { Redirect, Route, Switch, useLocation } from "react-router-dom";
+import type { Address } from "viem";
+
+import { ARBITRUM } from "config/chains";
+import { getContract } from "config/contracts";
+import { SyntheticsStateContextProvider } from "context/SyntheticsStateContext/SyntheticsStateContextProvider";
+import { subscribeToV1Events } from "context/WebsocketContext/subscribeToEvents";
+import { useWebsocketProvider } from "context/WebsocketContext/WebsocketContextProvider";
+import { useChainId } from "lib/chains";
+import { useHasLostFocus } from "lib/useHasPageLostFocus";
+import { AccountDashboard } from "pages/AccountDashboard/AccountDashboard";
+import { buildAccountDashboardUrl } from "pages/AccountDashboard/buildAccountDashboardUrl";
+import { VERSION_QUERY_PARAM } from "pages/AccountDashboard/constants";
+import { AccountsRouter } from "pages/Actions/ActionsRouter";
+import BeginAccountTransfer from "pages/BeginAccountTransfer/BeginAccountTransfer";
+import BuyGlp from "pages/BuyGlp/BuyGlp";
+import { Exchange } from "pages/Exchange/Exchange";
+import PageNotFound from "pages/PageNotFound/PageNotFound";
+import { ParseTransactionPage } from "pages/ParseTransaction/ParseTransaction";
+import Stake from "pages/Stake/Stake";
+import { abis } from "sdk/abis";
+
+import { RedirectWithQuery } from "components/RedirectWithQuery/RedirectWithQuery";
+
+const LazyUiPage = lazy(() => import("pages/UiPage/UiPage"));
+export const UiPage = () => <Suspense fallback={<Trans>Loading...</Trans>}>{<LazyUiPage />}</Suspense>;
+
+export function V1Routes({ openSettings }: { openSettings: () => void }) {
+  const exchangeRef = useRef<any>();
+  const { hasV1LostFocus } = useHasLostFocus();
+  const { chainId } = useChainId();
+
+  const { wsProvider } = useWebsocketProvider();
+
+  const vaultAddress = getContract(chainId, "Vault");
+  const positionRouterAddress = getContract(chainId, "PositionRouter");
+
+  useEffect(() => {
+    const wsVaultAbi = chainId === ARBITRUM ? abis.VaultV2 : abis.VaultV2b;
+    if (hasV1LostFocus || !wsProvider) {
+      return;
+    }
+
+    const wsVault = new ethers.Contract(vaultAddress, wsVaultAbi, wsProvider as Provider);
+    const wsPositionRouter = new ethers.Contract(positionRouterAddress, abis.PositionRouter, wsProvider as Provider);
+
+    const callExchangeRef = (method, ...args) => {
+      if (!exchangeRef || !exchangeRef.current) {
+        return;
+      }
+
+      exchangeRef.current[method](...args);
+    };
+
+    // handle the subscriptions here instead of within the Exchange component to avoid unsubscribing and re-subscribing
+    // each time the Exchange components re-renders, which happens on every data update
+    const unsubscribe = subscribeToV1Events(wsVault, wsPositionRouter, callExchangeRef);
+
+    return function cleanup() {
+      unsubscribe();
+    };
+  }, [chainId, vaultAddress, positionRouterAddress, wsProvider, hasV1LostFocus]);
+
+  const { pathname } = useLocation();
+
+  // new page should be scrolled to top
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return (
+    <Switch>
+      <Route exact path="/">
+        <RedirectWithQuery to="/v1" />
+      </Route>
+      <Route exact path="/v1/:tradeType?">
+        <Exchange ref={exchangeRef} openSettings={openSettings} />
+      </Route>
+      <Route exact path="/earn">
+        <SyntheticsStateContextProvider skipLocalReferralCode={false} pageType="stake">
+          <Stake />
+        </SyntheticsStateContextProvider>
+      </Route>
+      <Route exact path="/sell_glp">
+        <BuyGlp />
+      </Route>
+      <Route exact path="/begin_account_transfer">
+        <BeginAccountTransfer />
+      </Route>
+      <Route exact path="/actions/:v/:account">
+        {({ match }) => (
+          <Redirect
+            to={buildAccountDashboardUrl(match?.params.account as Address, chainId, match?.params.v === "v1" ? 1 : 2)}
+          />
+        )}
+      </Route>
+      <Redirect exact from="/actions/v1" to={`/accounts?${VERSION_QUERY_PARAM}=1`} />
+      <Redirect exact from="/actions/v2" to="/accounts" />
+      <Redirect exact from="/actions" to="/accounts" />
+      <Redirect exact from="/actions/:account" to="/accounts/:account" />
+
+      <Route exact path="/accounts">
+        <AccountsRouter />
+      </Route>
+      <Route exact path="/accounts/:account">
+        <AccountDashboard />
+      </Route>
+
+      <Route path="/parsetx/:network/:tx">
+        <ParseTransactionPage />
+      </Route>
+
+      <Route path="*">
+        <PageNotFound />
+      </Route>
+    </Switch>
+  );
+}

src/components/AddressDropdown/AddressDropdown.tsx

@@ -1,27 +1,19 @@
 import { Menu } from "@headlessui/react";
 import { Trans, t } from "@lingui/macro";
 import { FaChevronDown } from "react-icons/fa";
-import { Link } from "react-router-dom";
 import { createBreakpoint, useCopyToClipboard } from "react-use";
-import type { Address } from "viem";
 
-import { BOTANIX } from "config/chains";
-import { useChainId } from "lib/chains";
 import { helperToast } from "lib/helperToast";
 import { useENS } from "lib/legacy";
-import { useNotifyModalState } from "lib/useNotifyModalState";
 import { userAnalytics } from "lib/userAnalytics";
 import { DisconnectWalletEvent } from "lib/userAnalytics/types";
 import { shortenAddressOrEns } from "lib/wallets";
-import { buildAccountDashboardUrl } from "pages/AccountDashboard/buildAccountDashboardUrl";
 
 import { Avatar } from "components/Avatar/Avatar";
 import ExternalLink from "components/ExternalLink/ExternalLink";
 
-import BellIcon from "img/bell.svg?react";
 import copy from "img/ic_copy_20.svg";
 import externalLink from "img/ic_new_link_20.svg";
-import PnlAnalysisIcon from "img/ic_pnl_analysis_20.svg?react";
 import disconnect from "img/ic_sign_out_20.svg";
 
 import "./AddressDropdown.scss";
@@ -37,13 +29,9 @@ const useBreakpoint = createBreakpoint({ L: 600, M: 550, S: 400 });
 function AddressDropdown({ account, accountUrl, disconnectAccountAndCloseSettings }: Props) {
   const breakpoint = useBreakpoint();
   const [, copyToClipboard] = useCopyToClipboard();
-  const { openNotifyModal } = useNotifyModalState();
   const { ensName } = useENS(account);
   const displayAddressLength = breakpoint === "S" ? 9 : 13;
 
-  const { chainId } = useChainId();
-  const isBotanix = chainId === BOTANIX;
-
   return (
     <Menu>
       <Menu.Button as="div">
@@ -71,14 +59,6 @@ function AddressDropdown({ account, accountUrl, disconnectAccountAndCloseSetting
               </p>
             </div>
           </Menu.Item>
-          <Menu.Item>
-            <Link className="menu-item" to={buildAccountDashboardUrl(account as Address, undefined, 2)}>
-              <PnlAnalysisIcon width={20} className="size-20" />
-              <p>
-                <Trans>PnL Analysis</Trans>
-              </p>
-            </Link>
-          </Menu.Item>
           <Menu.Item>
             <ExternalLink href={accountUrl} className="menu-item">
               <img width={20} className="size-20" src={externalLink} alt="Open address in explorer" />
@@ -87,16 +67,6 @@ function AddressDropdown({ account, accountUrl, disconnectAccountAndCloseSetting
               </p>
             </ExternalLink>
           </Menu.Item>
-          {!isBotanix ? (
-            <Menu.Item>
-              <div className="menu-item" onClick={openNotifyModal}>
-                <BellIcon className="ml-2 size-20 pt-2" />
-                <p>
-                  <Trans>Alerts</Trans>
-                </p>
-              </div>
-            </Menu.Item>
-          ) : null}
           <Menu.Item>
             <div
               className="menu-item"

src/components/Exchange/PositionSeller.jsx

@@ -51,7 +51,6 @@ import {
 } from "lib/numbers";
 import { getLeverage } from "lib/positions/getLeverage";
 import getLiquidationPrice from "lib/positions/getLiquidationPrice";
-import { useHasOutdatedUi } from "lib/useHasOutdatedUi";
 import { usePrevious } from "lib/usePrevious";
 import { abis } from "sdk/abis";
 import { getPriceDecimals, getV1Tokens, getWrappedToken } from "sdk/configs/tokens";
@@ -312,7 +311,7 @@ export default function PositionSeller(props) {
 
   const isSwapAllowed = orderOption === MARKET;
 
-  const hasOutdatedUi = useHasOutdatedUi();
+  const hasOutdatedUi = false;
 
   let receiveToken;
   let maxAmount;

src/components/Footer/Footer.tsx

@@ -1,19 +1,15 @@
-import { Trans } from "@lingui/macro";
 import cx from "classnames";
 import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useMedia } from "react-use";
 
 import { getAppBaseUrl, isHomeSite, shouldShowRedirectModal } from "lib/legacy";
-import { userAnalytics } from "lib/userAnalytics";
-import { LandingPageFooterMenuEvent } from "lib/userAnalytics/types";
 
 import ExternalLink from "components/ExternalLink/ExternalLink";
-import { TrackingLink } from "components/TrackingLink/TrackingLink";
 
 import logoImg from "img/logo_GMX.svg";
 
-import { SOCIAL_LINKS, getFooterLinks } from "./constants";
+import { getFooterLinks } from "./constants";
 import { UserFeedbackModal } from "../UserFeedbackModal/UserFeedbackModal";
 
 type Props = {
@@ -95,42 +91,13 @@ export default function Footer({ showRedirectModal, redirectPopupTimestamp, isMo
               </NavLink>
             );
           })}
-          {!isHome && (
-            <div className={linkClassName} onClick={() => setIsUserFeedbackModalVisible(true)}>
-              <Trans>Leave feedback</Trans>
-            </div>
-          )}
         </div>
         <div
           className={cx("flex gap-24", {
             "justify-center": isMobile,
             "justify-end": !isMobile,
           })}
-        >
-          {SOCIAL_LINKS.map((platform) => {
-            return (
-              <TrackingLink
-                key={platform.name}
-                onClick={async () => {
-                  await userAnalytics.pushEvent<LandingPageFooterMenuEvent>(
-                    {
-                      event: "LandingPageAction",
-                      data: {
-                        action: "FooterMenu",
-                        button: platform.name,
-                      },
-                    },
-                    { instantSend: true }
-                  );
-                }}
-              >
-                <ExternalLink href={platform.link} className="h-24 w-24">
-                  <img src={platform.icon} alt={platform.name} width="100%" />
-                </ExternalLink>
-              </TrackingLink>
-            );
-          })}
-        </div>
+        ></div>
       </div>
       {!isHome && (
         <UserFeedbackModal isVisible={isUserFeedbackModalVisible} setIsVisible={setIsUserFeedbackModalVisible} />

src/components/Footer/constants.ts

@@ -1,5 +1,3 @@
-import { t } from "@lingui/macro";
-
 import discordIcon from "img/ic_discord.svg";
 import githubIcon from "img/ic_github.svg";
 import substackIcon from "img/ic_substack.svg";
@@ -22,14 +20,14 @@ type SocialLink = {
 export function getFooterLinks(isHome) {
   const FOOTER_LINKS: { home: Link[]; app: Link[] } = {
     home: [
-      { label: t`Terms and Conditions`, link: "/terms-and-conditions" },
-      { label: t`Referral Terms`, link: "/referral-terms" },
-      { label: t`Media Kit`, link: "https://docs.gmx.io/docs/community/media-kit", external: true },
+      // { label: t`Terms and Conditions`, link: "/terms-and-conditions" },
+      // { label: t`Referral Terms`, link: "/referral-terms" },
+      // { label: t`Media Kit`, link: "https://docs.gmx.io/docs/community/media-kit", external: true },
       // { label: "Jobs", link: "/jobs", isAppLink: true },
     ],
     app: [
-      { label: t`Media Kit`, link: "https://docs.gmx.io/docs/community/media-kit", external: true },
-      { label: t`Charts by TradingView`, link: "https://www.tradingview.com/", external: true },
+      // { label: t`Media Kit`, link: "https://docs.gmx.io/docs/community/media-kit", external: true },
+      // { label: t`Charts by TradingView`, link: "https://www.tradingview.com/", external: true },
       // { label: "Jobs", link: "/jobs" },
     ],
   };