Hide decentralization mode toggle on networks without a subgraph (#421)

* feat(frontend): hide decentralization mode toggle on networks without subgraph * fix(frontend): fix typo * fix(ui): increase size limit to 750KB
carrot-kpi · Oct 9, 2023 · 3b2a84f · 3b2a84f
1 parent 8b69377
commit 3b2a84f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/packages/frontend/src/components/ui/navbar/popovers/preferences/index.tsx b/packages/frontend/src/components/ui/navbar/popovers/preferences/index.tsx
@@ -15,6 +15,8 @@ import {
 } from "@carrot-kpi/react";
 import { useTranslation } from "react-i18next";
 import { InfoPopover } from "../../../../info-popover";
+import { ChainId, SUBGRAPH_URL } from "@carrot-kpi/sdk";
+import { useChainId } from "wagmi";
 
 interface PreferencesPopoverProps {
     open: boolean;
@@ -27,7 +29,7 @@ export const PreferencesPopover = forwardRef<
     PreferencesPopoverProps
 >(function PreferencesPopover({ open, anchor }, ref) {
     const { t } = useTranslation();
-
+    const chainId = useChainId();
     const preferDecentralization = usePreferDecentralization();
     const setPreferDecentralization = useSetPreferDecentralization();
 
@@ -108,23 +110,27 @@ export const PreferencesPopover = forwardRef<
                     />
                 </div>
             </div>
-            <div className="flex justify-between gap-4 md:gap-20 items-center">
-                <div className="flex gap-2 items-center">
-                    <Typography>{t("preferences.decentralization")}</Typography>
-                    <InfoPopover>
-                        <Typography
-                            variant="sm"
-                            className={{ root: "max-w-md" }}
-                        >
-                            {t("preferences.decentralization.info")}
+            {!!SUBGRAPH_URL[chainId as ChainId] && (
+                <div className="flex justify-between gap-4 md:gap-20 items-center">
+                    <div className="flex gap-2 items-center">
+                        <Typography>
+                            {t("preferences.decentralization")}
                         </Typography>
-                    </InfoPopover>
+                        <InfoPopover>
+                            <Typography
+                                variant="sm"
+                                className={{ root: "max-w-md" }}
+                            >
+                                {t("preferences.decentralization.info")}
+                            </Typography>
+                        </InfoPopover>
+                    </div>
+                    <Switch
+                        checked={preferDecentralization}
+                        onChange={setPreferDecentralization}
+                    />
                 </div>
-                <Switch
-                    checked={preferDecentralization}
-                    onChange={setPreferDecentralization}
-                />
-            </div>
+            )}
             {__STAGING_MODE__ && (
                 <div className="flex justify-between gap-4 md:gap-20 items-center">
                     <div className="flex gap-2 items-center">

diff --git a/packages/ui/.size-limit.js b/packages/ui/.size-limit.js
@@ -2,11 +2,11 @@ const path = require("path");
 module.exports = [
     {
         path: path.join(path.resolve("./"), "./dist/es/**/*.mjs"),
-        limit: "700 KB",
+        limit: "750 KB",
     },
     {
         path: path.join(path.resolve("./"), "./dist/cjs/**/*.cjs"),
-        limit: "700 KB",
+        limit: "750 KB",
     },
     {
         path:path.join(path.resolve("./"), "./dist/styles.css"),