W token page - show only a message on testnet

.env.development

@@ -4,4 +4,4 @@ WORMSCAN_API_BASE_URL="https://api.staging.wormscan.io/api/v1"
 WORMSCAN_TESTNET_API_BASE_URL_ROOT="https://api.testnet.wormscan.io"
 WORMSCAN_TESTNET_API_BASE_URL="https://api.testnet.wormscan.io/api/v1"
 WORMSCAN_BFF_URL="https://bff.dev.wormholescan.io"
-WORMHOLE_MARKET_TOKENS_URL="https://raw.githubusercontent.com/certusone/wormhole-token-list/main/src/markets.json"
+WORMHOLE_MARKET_TOKENS_URL="https://raw.githubusercontent.com/certusone/wormhole-token-list/main/src/markets.json"

src/components/molecules/Header/index.tsx

@@ -57,7 +57,6 @@ const Header = ({
   const tokenIcon = getTokenIcon("W");
 
   const currentNetwork = environment.network;
-  const isMainnet = currentNetwork === "Mainnet";
 
   useEffect(() => {
     if (isDesktop) {
@@ -184,11 +183,9 @@ const Header = ({
               {t("home.header.txs")}
             </NavLink>
 
-            {isMainnet && (
-              <NavLink to="/governor" aria-label="Governor">
-                Governor
-              </NavLink>
-            )}
+            <NavLink to="/governor" aria-label="Governor">
+              Governor
+            </NavLink>
 
             <NavigationMenu.Root delayDuration={0}>
               <NavigationMenu.List className="dropdown-menu">
@@ -385,11 +382,9 @@ const Header = ({
             showMobileNav && showMobileOtherMenu ? "open" : ""
           }`}
         >
-          {isMainnet && (
-            <NavLink to="/governor" aria-label="Governor">
-              Governor
-            </NavLink>
-          )}
+          <NavLink to="/governor" aria-label="Governor">
+            Governor
+          </NavLink>
 
           <div className="header-container-mobile-menu-dev-tools-title">Developers</div>
 

src/components/organisms/SearchNotFound/OnlyMainnet/index.tsx

@@ -0,0 +1,21 @@
+import { useEnvironment } from "src/context/EnvironmentContext";
+import "../styles.scss";
+
+const OnlyMainnet = () => {
+  const { environment, setEnvironment } = useEnvironment();
+
+  return (
+    <div className="only-mainnet">
+      <p className="only-mainnet-text">Page available on Mainnet network.</p>
+
+      <p className="only-mainnet-text">
+        To view on MAINNET click{" "}
+        <button className="only-mainnet-text-link" onClick={() => setEnvironment("Mainnet")}>
+          HERE
+        </button>
+      </p>
+    </div>
+  );
+};
+
+export default OnlyMainnet;

src/components/organisms/SearchNotFound/styles.scss

@@ -1,5 +1,30 @@
 @import "src/styles/globals.scss";
 
+.only-mainnet {
+  &-text {
+    @include text-heading5;
+    color: var(--color-gray-200);
+
+    &-link {
+      @include button-ghost;
+      @include text-heading5;
+      display: inline-block;
+      color: var(--color-coral);
+      text-decoration-color: var(--color-coral-20);
+
+      &:not(:disabled) {
+        &:hover {
+          text-decoration-color: var(--color-coral-40);
+        }
+
+        &:active {
+          text-decoration-color: var(--color-coral-20);
+        }
+      }
+    }
+  }
+}
+
 .error-page {
   display: flex;
   justify-content: center;

src/components/organisms/TokenActivity/Chart.tsx

@@ -19,14 +19,22 @@ type Props = {
   filters: {
     timespan: string;
   };
+  rangeShortLabel: string | "24H" | "7D" | "30D" | "365D" | "All";
 };
 
 const TYPE_CHART_LIST = [
   { label: <ActivityIcon width={24} />, value: "area", ariaLabel: "Area" },
   { label: <AnalyticsIcon width={24} />, value: "bar", ariaLabel: "Bar" },
 ];
 
-export const Chart = ({ data, filters, isError, isLoading, metricSelected }: Props) => {
+export const Chart = ({
+  data,
+  filters,
+  isError,
+  isLoading,
+  metricSelected,
+  rangeShortLabel,
+}: Props) => {
   const [chartSelected, setChartSelected] = useState<"area" | "bar">("area");
   const chartRef = useRef(null);
 
@@ -62,7 +70,8 @@ export const Chart = ({ data, filters, isError, isLoading, metricSelected }: Pro
             <div className="token-activity-chart-top">
               <div className="token-activity-chart-top-box">
                 <span className="token-activity-chart-top-box-key">
-                  {metricSelected === "volume" ? "Total volume" : "Total transfers"}:
+                  {rangeShortLabel}{" "}
+                  {metricSelected === "volume" ? "Total Volume" : "Total Transfers"}:
                 </span>
                 <span className="token-activity-chart-top-box-value">
                   {dataTransformed &&
@@ -74,7 +83,7 @@ export const Chart = ({ data, filters, isError, isLoading, metricSelected }: Pro
 
               <div className="token-activity-chart-top-box">
                 <span className="token-activity-chart-top-box-key">
-                  {filters.timespan === "1h" ? "Hourly" : "Daily"} average:
+                  {filters.timespan === "1h" ? "Hourly" : "Daily"} Average:
                 </span>
                 <span className="token-activity-chart-top-box-value">
                   {dataTransformed &&

src/components/organisms/TokenActivity/index.tsx

@@ -22,13 +22,13 @@ const METRIC_CHART_LIST = [
 ];
 
 const RANGE_LIST = [
-  { label: "Last 24 hours", value: getISODateZeroed(1), timespan: "1h" },
-  { label: "Last 7 days", value: getISODateZeroed(7), timespan: "1d" },
-  { label: "Last 15 days", value: getISODateZeroed(15), timespan: "1d" },
-  { label: "Last 30 days", value: getISODateZeroed(30), timespan: "1d" },
+  { label: "Last 24 hours", value: getISODateZeroed(1), timespan: "1h", shortLabel: "24H" },
+  { label: "Last 7 days", value: getISODateZeroed(7), timespan: "1d", shortLabel: "7D" },
+  { label: "Last 15 days", value: getISODateZeroed(15), timespan: "1d", shortLabel: "15D" },
+  { label: "Last 30 days", value: getISODateZeroed(30), timespan: "1d", shortLabel: "30D" },
   // TODO: add when the endpoint supports it
-  // { label: "Last 365 days", value: getISODateZeroed(365), timespan: "1mo" },
-  // { label: "All Time", value: firstDataAvailableDate, timespan: "1mo" },
+  // { label: "Last 365 days", value: getISODateZeroed(365), timespan: "1mo", shortLabel: "365D" },
+  // { label: "All Time", value: firstDataAvailableDate, timespan: "1mo", shortLabel: "All" },
 ];
 
 const TokenActivity = ({ isHomePage = false }: { isHomePage?: boolean }) => {
@@ -347,11 +347,12 @@ const TokenActivity = ({ isHomePage = false }: { isHomePage?: boolean }) => {
                   {width < BREAKPOINTS.desktop && rowSelected === rowIndex && (
                     <Chart
                       data={dataChart}
+                      filters={filters}
                       isError={isErrorChart}
                       isLoading={isLoadingChart}
                       metricSelected={metricSelected}
+                      rangeShortLabel={selectedTopAssetTimeRange.shortLabel}
                       rowSelected={rowSelected}
-                      filters={filters}
                     />
                   )}
                 </Fragment>
@@ -362,11 +363,12 @@ const TokenActivity = ({ isHomePage = false }: { isHomePage?: boolean }) => {
           {width >= BREAKPOINTS.desktop && (
             <Chart
               data={dataChart}
+              filters={filters}
               isError={isErrorChart}
               isLoading={isLoadingChart}
               metricSelected={metricSelected}
+              rangeShortLabel={selectedTopAssetTimeRange.shortLabel}
               rowSelected={rowSelected}
-              filters={filters}
             />
           )}
         </div>

src/pages/Analytics/WToken/index.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 import { getClient } from "src/api/Client";
 import { getGeckoTokenInfo } from "src/utils/cryptoToolkit";
 import { chainToChainId } from "@wormhole-foundation/sdk";
+import { useEnvironment } from "src/context/EnvironmentContext";
 import { Summary } from "./Summary";
 import { Metrics } from "./Metrics";
 import { TransfersOverTime } from "./TransfersOverTime";
@@ -31,6 +32,10 @@ export type TimeRange = { label: string; value: string };
 export type ByType = "notional" | "tx";
 
 const WToken = () => {
+  const { environment } = useEnvironment();
+  const currentNetwork = environment.network;
+  const isMainnet = currentNetwork === "Mainnet";
+
   const [timeRange, setTimeRange] = useState<TimeRange>({ label: "Last 24 hours", value: "1d" });
   const [by, setBy] = useState<ByType>("tx");
 
@@ -57,10 +62,16 @@ const WToken = () => {
     return { startDate: start, endDate: end };
   }, [timeRange]);
 
-  const { data: chainLimitsData, isLoading: isLoadingLimits } = useQuery(["getLimit"], () =>
-    getClient()
-      .governor.getLimit()
-      .catch(() => null),
+  const { data: chainLimitsData, isLoading: isLoadingLimits } = useQuery(
+    ["getLimit"],
+    () => {
+      return getClient()
+        .governor.getLimit()
+        .catch(() => null);
+    },
+    {
+      enabled: isMainnet,
+    },
   );
 
   const {
@@ -170,7 +181,7 @@ const WToken = () => {
       return transactions.slice(0, 7);
     },
     {
-      enabled: !isLoadingLimits,
+      enabled: !isLoadingLimits && isMainnet,
     },
   );
 
@@ -189,6 +200,7 @@ const WToken = () => {
       return data.attributes.price_usd;
     },
     {
+      enabled: isMainnet,
       refetchInterval: 10000,
     },
   );
@@ -212,59 +224,95 @@ const WToken = () => {
         timeSpan,
       };
     },
-    { refetchOnWindowFocus: false },
+    { enabled: isMainnet, refetchOnWindowFocus: false },
+  );
+
+  const { data: summary } = useQuery(
+    ["getSummary"],
+    () => {
+      return getClient().nttApi.getNttSummary({
+        symbol: "W",
+      });
+    },
+    {
+      enabled: isMainnet,
+    },
+  );
+
+  const { data: activityTx } = useQuery(
+    "getActivityTx",
+    async () => {
+      const activity = await getClient().nttApi.getNttActivity({
+        by: "tx",
+        symbol: "W",
+      });
+      activity.sort((a, b) => (+a.value < +b.value ? 1 : -1));
+
+      return activity;
+    },
+    {
+      enabled: isMainnet,
+    },
+  );
+
+  const { data: activityNotional } = useQuery(
+    "getActivityNotional",
+    async () => {
+      const activity = await getClient().nttApi.getNttActivity({
+        by: "notional",
+        symbol: "W",
+      });
+      activity.sort((a, b) => (+a.value < +b.value ? 1 : -1));
+
+      return activity;
+    },
+    {
+      enabled: isMainnet,
+    },
   );
 
-  const { data: summary } = useQuery(["getSummary"], () =>
-    getClient().nttApi.getNttSummary({
-      symbol: "W",
-    }),
+  const { data: topHolders } = useQuery(
+    "getTopHolders",
+    async () => {
+      const data = await getClient().nttApi.getNttTopHolder({
+        symbol: "W",
+      });
+      return data;
+    },
+    {
+      enabled: isMainnet,
+    },
   );
 
-  const { data: activityTx } = useQuery("getActivityTx", async () => {
-    const activity = await getClient().nttApi.getNttActivity({
-      by: "tx",
-      symbol: "W",
-    });
-    activity.sort((a, b) => (+a.value < +b.value ? 1 : -1));
-
-    return activity;
-  });
-
-  const { data: activityNotional } = useQuery("getActivityNotional", async () => {
-    const activity = await getClient().nttApi.getNttActivity({
-      by: "notional",
-      symbol: "W",
-    });
-    activity.sort((a, b) => (+a.value < +b.value ? 1 : -1));
-
-    return activity;
-  });
-
-  const { data: topHolders } = useQuery("getTopHolders", async () => {
-    const data = await getClient().nttApi.getNttTopHolder({
-      symbol: "W",
-    });
-    return data;
-  });
-
-  const { data: topAddressesNotional } = useQuery(["getNttTopAddressNotional"], async () => {
-    const data = await getClient().nttApi.getNttTopAddress({
-      by: "notional",
-      symbol: "W",
-    });
-    data.sort((a, b) => (+a.value < +b.value ? 1 : -1));
-    return data;
-  });
-
-  const { data: topAddressesTx } = useQuery(["getNttTopAddressTx"], async () => {
-    const data = await getClient().nttApi.getNttTopAddress({
-      by: "tx",
-      symbol: "W",
-    });
-    data.sort((a, b) => (+a.value < +b.value ? 1 : -1));
-    return data;
-  });
+  const { data: topAddressesNotional } = useQuery(
+    ["getNttTopAddressNotional"],
+    async () => {
+      const data = await getClient().nttApi.getNttTopAddress({
+        by: "notional",
+        symbol: "W",
+      });
+      data.sort((a, b) => (+a.value < +b.value ? 1 : -1));
+      return data;
+    },
+    {
+      enabled: isMainnet,
+    },
+  );
+
+  const { data: topAddressesTx } = useQuery(
+    ["getNttTopAddressTx"],
+    async () => {
+      const data = await getClient().nttApi.getNttTopAddress({
+        by: "tx",
+        symbol: "W",
+      });
+      data.sort((a, b) => (+a.value < +b.value ? 1 : -1));
+      return data;
+    },
+    {
+      enabled: isMainnet,
+    },
+  );
 
   const [activeView, setActiveView] = useState("general-info");