add: themes and theme switcher in dev mode (#4)

* add: theme selector when in dev mode * add: theme switcher in dev mode * fix: protocol empty tag * fix: lint error
AngleProtocol · Dec 6, 2024 · f3c7aa1 · f3c7aa1
1 parent 8550018
commit f3c7aa1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/merkl.config.ts b/merkl.config.ts
@@ -41,16 +41,37 @@ import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 
 export default createConfig({
   appName: "Merkl",
-  modes: ["dark"],
-  defaultTheme: "merkl",
+  modes: ["dark", "light"],
+  defaultTheme: "ignite",
   themes: {
+    ignite: {
+      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
+      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+    },
     merkl: {
       base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
       info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
     },
+    backoffice: {
+      base: createColoring(["#8B8D98", "#9984D2", "#000000"], ["#8B8D98", "#9984D2", "#FFFFFF"]),
+      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+    },
+    puffer: {
+      base: createColoring(["#2A35BD", "#3D3D3D", "#0E1035"], ["#2A35BD", "#F5F9FF", "#FFFFFF"]),
+      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
+    },
   },
   sizing: {
     width: { xs: 14, sm: 16, md: 18, lg: 20, xl: 24 },

diff --git a/src/components/element/SwitchMode.tsx b/src/components/element/SwitchMode.tsx
@@ -1,16 +1,31 @@
+import { Button, Icon, Select, useTheme } from "dappkit";
 import config from "merkl.config";
-import { Button, Icon, useTheme } from "packages/dappkit/src";
 import { useMemo } from "react";
 
 export default function SwitchMode() {
-  const { mode, toggleMode } = useTheme();
+  const { mode, toggleMode, themes, theme, setTheme } = useTheme();
   const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
 
+  const themeOptions = useMemo(() => {
+    return Object.keys(themes).reduce(
+      (obj, name) =>
+        Object.assign(obj, {
+          [name]: name,
+        }),
+      {},
+    );
+  }, [themes]);
+
   return (
-    canSwitchModes && (
-      <Button look="base" onClick={toggleMode}>
-        <Icon remix={mode === "dark" ? "RiMoonClearLine" : "RiSunLine"} />
-      </Button>
-    )
+    <>
+      {process.env.NODE_ENV !== "production" && Object.keys(themeOptions)?.length > 1 && (
+        <Select state={[theme, setTheme]} options={themeOptions} />
+      )}
+      {canSwitchModes && (
+        <Button look="base" onClick={toggleMode}>
+          <Icon remix={mode === "dark" ? "RiMoonClearLine" : "RiSunLine"} />
+        </Button>
+      )}
+    </>
   );
 }
diff --git a/src/hooks/resources/useOpportunity.tsx b/src/hooks/resources/useOpportunity.tsx
@@ -7,7 +7,10 @@ export default function useOpportunity(opportunity: Opportunity) {
   const tags = useMemo(() => {
     const tokens: TagType<"token">[] = opportunity.tokens.map(t => ({ type: "token", value: t }));
     const action: TagType<"action"> = { type: "action", value: opportunity.action };
-    const protocol: TagType<"protocol"> = { type: "protocol", value: opportunity.protocol };
+    const protocol: TagType<"protocol"> | undefined = opportunity?.protocol && {
+      type: "protocol",
+      value: opportunity.protocol,
+    };
     const chain: TagType<"chain"> = { type: "chain", value: opportunity?.chain };
     const status: TagType<"status"> = { type: "status", value: opportunity?.status };