taoshidev · TaoshiKen · Sep 22, 2025 · Sep 22, 2025 · Sep 22, 2025 · Sep 22, 2025
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
     "react-hot-toast": "2.2.0",
-    "react-icons": "4.3.1",
+    "react-icons": "5.5.0",
     "react-jazzicon": "1.0.4",
     "react-loading-skeleton": "3.3.1",
     "react-remove-scroll": "2.5.5",

diff --git a/src/App/App.scss b/src/App/App.scss
@@ -17,23 +17,11 @@ $app-card-padding: 1.5rem;
   display: flex;
   justify-content: space-between;
   position: relative;
-  padding-left: 3.2rem;
-  padding-right: 3.2rem;
-  background: transparent 0% 0% no-repeat padding-box;
-  border-bottom: 1px solid var(--color-slate-700);
+  // padding-left: 3.2rem;
+  // padding-right: 3.2rem;
   z-index: 1;
 }
 
-.App-header.large::after {
-  height: 1.3rem;
-  width: 100%;
-  content: " ";
-  background: transparent linear-gradient(180deg, #00000030 0%, transparent 100%) 0% 0% no-repeat padding-box;
-  position: absolute;
-  bottom: -1.3rem;
-  left: 0;
-}
-
 .App-header.large .App-header-links {
   display: flex;
 }
@@ -668,7 +656,6 @@ a.App-cta,
 button.App-cta {
   color: var(--color-white);
   text-decoration: none;
-  background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, var(--color-blue-700) 100%);
 }
 
 .App-cta.small {
@@ -739,7 +726,7 @@ button.App-button-option:disabled {
 .App-header-user {
   display: flex;
   align-items: center;
-  gap: 1.6rem;
+  gap: 0.5rem;
 }
 
 .Network-icon {
@@ -1129,18 +1116,6 @@ button.App-button {
     position: relative;
     padding-left: 1.6rem;
     padding-right: 1.6rem;
-    background: transparent 0% 0% no-repeat padding-box;
-    border-bottom: 1px solid var(--color-slate-700);
-  }
-
-  .App-header.small::after {
-    height: 1.3rem;
-    width: 100%;
-    content: " ";
-    background: transparent linear-gradient(180deg, #00000030 0%, transparent 100%) 0% 0% no-repeat padding-box;
-    position: absolute;
-    bottom: -1.3rem;
-    left: 0;
   }
 
   .Page-title-section {

diff --git a/src/App/AppRoutes.tsx b/src/App/AppRoutes.tsx
@@ -141,7 +141,7 @@ export function AppRoutes() {
 
   return (
     <>
-      <div className="App">
+      <div className="App bg-background bg-cover bg-bottom bg-[url('/src/img/background.png')] bg-no-repeat">
         <div className="App-content">
           <Header
             disconnectAccountAndCloseSettings={disconnectAccountAndCloseSettings}

diff --git a/src/App/MainRoutes.tsx b/src/App/MainRoutes.tsx
@@ -38,7 +38,6 @@ import PositionsOverview from "pages/PositionsOverview/PositionsOverview";
 import { PriceImpactRebatesStatsPage } from "pages/PriceImpactRebatesStats/PriceImpactRebatesStats";
 import Referrals from "pages/Referrals/Referrals";
 import ReferralsTier from "pages/ReferralsTier/ReferralsTier";
-import Stake from "pages/Stake/Stake";
 import Stats from "pages/Stats/Stats";
 import { SyntheticsPage } from "pages/SyntheticsPage/SyntheticsPage";
 import { SyntheticsStats } from "pages/SyntheticsStats/SyntheticsStats";
@@ -118,18 +117,7 @@ export function MainRoutes({ openSettings }: { openSettings: () => void }) {
       <Route exact path="/monitor">
         <SyntheticsStats />
       </Route>
-      <Route exact path="/stake">
-        <SyntheticsStateContextProvider skipLocalReferralCode={false} pageType="stake">
-          <Stake />
-        </SyntheticsStateContextProvider>
-      </Route>
       {/* redirect from previous stake(earn) url */}
-      <RedirectWithQuery exact from="/earn" to="/stake" />
-      <Route exact path="/buy">
-        <SyntheticsStateContextProvider skipLocalReferralCode={false} pageType="buy">
-          <Buy />
-        </SyntheticsStateContextProvider>
-      </Route>
       <Route exact path="/pools">
         <SyntheticsStateContextProvider skipLocalReferralCode={false} pageType="pools">
           <Pools />

diff --git a/src/components/AddressDropdown/AddressDropdown.tsx b/src/components/AddressDropdown/AddressDropdown.tsx
@@ -47,7 +47,7 @@ function AddressDropdown({ account, accountUrl, disconnectAccountAndCloseSetting
   return (
     <Menu>
       <Menu.Button as="div">
-        <button className="App-cta small transparent address-btn">
+        <button className="App-cta bg-slate-800 small address-btn">
           <div className="user-avatar">
             <Avatar size={20} ensName={ensName} address={account} />
           </div>

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -23,8 +23,8 @@
 
   &.primary {
     background: var(--primary-btn-bg);
-    color: var(--color-white);
-    border-radius: 0.3rem;
+    color: var(--color-background);
+    border-radius: 0.5rem;
     padding: 1.65rem 1.6rem;
 
     &:not([disabled]):hover {

diff --git a/src/components/Common/ConnectWalletButton.scss b/src/components/Common/ConnectWalletButton.scss
@@ -1,14 +1,13 @@
 .connect-wallet-btn {
-  background: transparent;
+  background: var(--color-green-600);
   padding: 0.85rem 1.4rem;
   display: inline-flex;
   align-items: center;
   border: none;
-  color: var(--color-white);
+  color: var(--color-background);
   font-size: var(--font-size-body-medium);
   white-space: nowrap;
   cursor: pointer;
-  border: 1px solid var(--color-stroke-primary);
   border-radius: var(--border-radius-sm);
 
   .btn-icon {

diff --git a/src/components/Common/ConnectWalletButton.tsx b/src/components/Common/ConnectWalletButton.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import "./ConnectWalletButton.scss";
 
 type Props = {
-  imgSrc: string;
+  imgSrc?: string;
   children: ReactNode;
   onClick: () => void;
 };

diff --git a/src/components/Exchange/ExchangeTVChart.jsx b/src/components/Exchange/ExchangeTVChart.jsx
@@ -312,7 +312,7 @@ export default function ExchangeTVChart(props) {
 
   return (
     <div className="ExchangeChart tv" ref={ref}>
-      <div className="ExchangeChart-header mb-10 rounded-4 bg-slate-800">
+      <div className="ExchangeChart-header mb-10 rounded-4 bg-slate-800 border border-slate-700">
         <div className="ExchangeChart-info">
           <div className="ExchangeChart-top-inner">
             <ChartTokenSelector

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -11,7 +11,7 @@ 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 logoImg from "img/logo_0xMarkets.svg";
 
 import { SOCIAL_LINKS, getFooterLinks } from "./constants";
 import { UserFeedbackModal } from "../UserFeedbackModal/UserFeedbackModal";

diff --git a/src/components/Footer/constants.ts b/src/components/Footer/constants.ts
@@ -37,9 +37,9 @@ export function getFooterLinks(isHome) {
 }
 
 export const SOCIAL_LINKS: SocialLink[] = [
-  { link: "https://twitter.com/GMX_IO", name: "Twitter", icon: xIcon },
+  { link: "https://x.com/0x_Markets", name: "Twitter", icon: xIcon },
   { link: "https://gmxio.substack.com/", name: "Substack", icon: substackIcon },
   { link: "https://github.com/gmx-io", name: "Github", icon: githubIcon },
   { link: "https://t.me/GMX_IO", name: "Telegram", icon: telegramIcon },
-  { link: "https://discord.gg/H5PeQru3Aa", name: "Discord", icon: discordIcon },
+  { link: "https://discord.gg/dUzZv4yRJC", name: "Discord", icon: discordIcon },
 ];
diff --git a/src/components/Header/AppHeaderLinks.tsx b/src/components/Header/AppHeaderLinks.tsx
@@ -10,7 +10,7 @@ import { ReferralTopMenuClickEvent } from "lib/userAnalytics/types";
 
 import ExternalLink from "components/ExternalLink/ExternalLink";
 
-import logoImg from "img/logo_GMX.svg";
+import logoImg from "img/logo_0xMarkets.svg";
 
 import { HeaderLink } from "./HeaderLink";
 
@@ -55,21 +55,11 @@ export function AppHeaderLinks({ small, openSettings, clickCloseIcon, showRedire
           <Trans>Pools</Trans>
         </HeaderLink>
       </div>
-      <div className="App-header-link-container">
-        <HeaderLink qa="stake" to="/stake" showRedirectModal={showRedirectModal}>
-          <Trans>Stake</Trans>
-        </HeaderLink>
-      </div>
       <div className="App-header-link-container">
         <HeaderLink qa="stats" to="/stats" showRedirectModal={showRedirectModal}>
           <Trans>Stats</Trans>
         </HeaderLink>
       </div>
-      <div className="App-header-link-container">
-        <HeaderLink qa="buy" to="/buy" showRedirectModal={showRedirectModal}>
-          <Trans>Buy</Trans>
-        </HeaderLink>
-      </div>
 
       <div className="App-header-link-container">
         <HeaderLink
@@ -105,7 +95,7 @@ export function AppHeaderLinks({ small, openSettings, clickCloseIcon, showRedire
         </HeaderLink>
       </div>
       <div className="App-header-link-container">
-        <ExternalLink href="https://docs.gmx.io/">
+        <ExternalLink href="https://docs.0xmarkets.io/">
           <Trans>Docs</Trans>
         </ExternalLink>
       </div>

diff --git a/src/components/Header/AppHeaderUser.tsx b/src/components/Header/AppHeaderUser.tsx
@@ -15,7 +15,6 @@ import useWallet from "lib/wallets/useWallet";
 
 import { OneClickButton } from "components/OneClickButton/OneClickButton";
 
-import connectWalletImg from "img/ic_wallet_24.svg";
 
 import { HeaderLink } from "./HeaderLink";
 import AddressDropdown from "../AddressDropdown/AddressDropdown";
@@ -118,7 +117,6 @@ export function AppHeaderUser({
                 sendUserAnalyticsConnectWalletClickEvent("Header");
                 openConnectModal();
               }}
-              imgSrc={connectWalletImg}
             >
               {small ? <Trans>Connect</Trans> : <Trans>Connect Wallet</Trans>}
             </ConnectWalletButton>

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -14,20 +14,8 @@
   display: flex;
   justify-content: space-between;
   position: relative;
-  padding-left: 3.2rem;
-  padding-right: 3.2rem;
-  background: transparent 0% 0% no-repeat padding-box;
-  border-bottom: 1px solid var(--color-slate-700);
-}
-
-.App-header.large::after {
-  height: 1.3rem;
-  width: 100%;
-  content: " ";
-  background: transparent linear-gradient(180deg, #00000030 0%, transparent 100%) 0% 0% no-repeat padding-box;
-  position: absolute;
-  bottom: -1.3rem;
-  left: 0;
+  // padding-left: 3.2rem;
+  // padding-right: 3.2rem;
 }
 
 .App-header.large .App-header-links {
@@ -96,6 +84,14 @@
   min-width: 0;
 }
 
+.App-header-container-center {
+  justify-content: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
 .App-header-top {
   width: 100%;
   position: relative;
@@ -135,7 +131,7 @@
 
 .App-header-link-main img {
   display: inline-block;
-  height: 2.15rem;
+  height: 3.8rem;
   vertical-align: middle;
 }
 
@@ -164,22 +160,22 @@
   color: var(--color-gray-50);
 }
 
-.App-header-container-left .a,
-.App-header-container-left a {
+.App-header-container-center .a,
+.App-header-container-center a {
   padding: 1.8rem 1.7rem;
   display: block;
   color: var(--color-slate-100);
   font-size: var(--font-size-body-large);
   line-height: var(--line-height-body-large);
   font-weight: normal;
 }
-.App-header.large .App-header-container-left a {
+.App-header.large .App-header-container-center a {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.App-header-container-left a.active {
+.App-header-container-center a.active {
   color: var(--color-white);
 }
 
@@ -237,10 +233,6 @@
     grid-template-columns: 1fr auto auto auto auto;
   }
 
-  .App-header-link-main img {
-    height: 2.1rem;
-  }
-
   .App-header.small {
     height: 6.2rem;
     backdrop-filter: blur(4px);
@@ -249,18 +241,6 @@
     position: relative;
     padding-left: 1.6rem;
     padding-right: 1.6rem;
-    background: transparent 0% 0% no-repeat padding-box;
-    border-bottom: 1px solid var(--color-slate-700);
-  }
-
-  .App-header.small::after {
-    height: 1.3rem;
-    width: 100%;
-    content: " ";
-    background: transparent linear-gradient(180deg, #00000030 0%, transparent 100%) 0% 0% no-repeat padding-box;
-    position: absolute;
-    bottom: -1.3rem;
-    left: 0;
   }
 
   a.App-header-user-account {

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -11,8 +11,8 @@ import { isHomeSite } from "lib/legacy";
 import { HeaderPromoBanner } from "components/HeaderPromoBanner/HeaderPromoBanner";
 import { OneClickPromoBanner } from "components/OneClickPromoBanner/OneClickPromoBanner";
 
-import logoImg from "img/logo_GMX.svg";
-import logoSmallImg from "img/logo_GMX_small.svg";
+import logoSmallImg from "img/logo.svg";
+import logoImg from "img/logo_0xMarkets.svg";
 
 import { AppHeaderLinks } from "./AppHeaderLinks";
 import { AppHeaderUser } from "./AppHeaderUser";
@@ -104,13 +104,15 @@ export function Header({ disconnectAccountAndCloseSettings, openSettings, showRe
       )}
       <header data-qa="header">
         {!isMobile && (
-          <div className="App-header large">
+          <div className="App-header large px-8">
             <div className="App-header-container-left">
               <Link className="App-header-link-main" to="/">
                 <img src={logoImg} className="big" alt="GMX Logo" />
                 <img src={logoSmallImg} className="small" alt="GMX Logo" />
               </Link>
-              {isHomeSite() ? (
+            </div>
+            <div className="App-header-container-center">
+            {isHomeSite() ? (
                 <HomeHeaderLinks showRedirectModal={showRedirectModal} />
               ) : (
                 <AppHeaderLinks showRedirectModal={showRedirectModal} />
@@ -140,8 +142,8 @@ export function Header({ disconnectAccountAndCloseSettings, openSettings, showRe
             >
               <div className="App-header-container-left">
                 <div className="App-header-link-main clickable" onClick={toggleDrawer}>
-                  <img src={logoImg} className="big" alt="GMX Logo" />
-                  <img src={logoSmallImg} className="small" alt="GMX Logo" />
+                  <img src={logoImg} className="big" alt="0xMarkets Logo" />
+                  <img src={logoSmallImg} className="small" alt="0xMarkets Logo" />
                 </div>
               </div>
               <div className="App-header-container-right">

diff --git a/src/components/Header/HomeHeaderLinks.tsx b/src/components/Header/HomeHeaderLinks.tsx
@@ -9,7 +9,7 @@ import { useRedirectPopupTimestamp } from "lib/useRedirectPopupTimestamp";
 
 import ExternalLink from "components/ExternalLink/ExternalLink";
 
-import logoImg from "img/logo_GMX.svg";
+import logoImg from "img/logo_0xMarkets.svg";
 
 import { HeaderLink } from "./HeaderLink";