Taiko and Etherlink 🚀

index.html

@@ -29,7 +29,7 @@
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://symm.netlify.app:" />
+    <meta property="og:url" content="https://app.symm.fi:" />
     <meta property="og:title" content="Symmetric" />
     <meta
       property="og:description"

package.json

@@ -74,7 +74,7 @@
     "@popperjs/core": "^2.9.2",
     "@sentry/browser": "^7.17.4",
     "@sentry/tracing": "^7.17.4",
-    "@symmetric-v3/sdk": "^1.2.25-beta.1",
+    "@symmetric-v3/sdk": "^1.2.32-beta.1",
     "@tanstack/vue-query": "^4.22.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/vue": "^7.0.0",

src/App.vue

@@ -88,13 +88,16 @@ const themeMap = {
   sepolia: 'celo',
   'gnosis-chain': 'gnosis-chain',
   meter: 'meter',
+  taiko: 'taiko',
+  etherlink: 'etherlink',
 };
 // Function to update theme based on the route slug
 const updateTheme = () => {
   // Assuming your slug is part of the path like /theme/slug
   // You need to adjust this based on your actual route structure
-  const themeSlug = route.path.split('/')[1]; // Get the slug from the path
-  const theme = themeMap[themeSlug] || 'telos'; // Set the theme or default if not found
+  // const themeSlug = route.path.split('/')[1]; // Get the slug from the path
+
+  const theme = themeMap[networkSlug] || 'telos'; // Set the theme or default if not found
   document.documentElement.setAttribute('data-theme', theme);
 };
 

src/assets/css/tailwind.css

@@ -502,6 +502,110 @@ html[data-theme='meter'] {
   --color-orange-900: 120, 53, 15;
 }
 
+html[data-theme='taiko'] {
+  /* Blue */
+  --color-blue-50: 248, 203, 229;
+  --color-blue-100: 244, 182, 220;
+  --color-blue-200: 238, 152, 205;
+  --color-blue-300: 225, 106, 179;
+  --color-blue-400: 232, 24, 153; /* New Primary Color */
+  --color-blue-500: 195, 20, 128;
+  --color-blue-600: 163, 17, 107;
+  --color-blue-700: 132, 14, 87;
+  --color-blue-800: 101, 11, 66;
+  --color-blue-900: 71, 8, 46;
+
+  /* Gray */
+
+  /* Gray */
+  --color-gray-50: 233, 233, 233;
+  --color-gray-100: 211, 211, 211; /* Dark Text */
+  --color-gray-200: 185, 185, 185;
+  --color-gray-300: 149, 149, 149;
+  --color-gray-400: 185, 185, 185; /* Text Secondary dark */
+  --color-gray-500: 76, 76, 76;
+  --color-gray-600: 58, 58, 58;
+  --color-gray-700: 70, 70, 70; /* Select Box Background */
+  --color-gray-800: 28, 28, 28; /* Box Input Background */
+  --color-gray-850: 19, 19, 19; /* Box Background */
+  --color-gray-900: 24, 25, 26; /* Background */
+
+  /* Pink */
+  --color-pink-50: 255, 235, 240;
+  --color-pink-100: 255, 210, 220;
+  --color-pink-200: 255, 180, 195;
+  --color-pink-300: 255, 150, 175;
+  --color-pink-400: 255, 130, 165;
+  --color-pink-500: 255, 115, 160;
+  --color-pink-600: 255, 100, 150; /* Soft Pink/Peach Gradient Base */
+  --color-pink-700: 230, 90, 135;
+  --color-pink-800: 205, 80, 120;
+  --color-pink-900: 180, 65, 100;
+
+  /* Yellow */
+  --color-yellow-500: 255, 226, 160; /* Stars Gradient */
+
+  /* Purple */
+  --color-purple-500: 99, 33, 182; /* Ve Stars Gradient */
+
+  /* Orange */
+  --color-orange-300: 252, 211, 77; /* Stars on Add liquidity */
+  --color-orange-600: 217, 119, 6;
+  --color-orange-700: 180, 83, 9;
+}
+
+html[data-theme='etherlink'] {
+  /* Green */
+  --color-blue-50: 225, 255, 239;
+  --color-blue-100: 199, 255, 225;
+  --color-blue-200: 163, 255, 205;
+  --color-blue-300: 112, 255, 180;
+  --color-blue-400: 56, 255, 156; /* New Primary Color */
+  --color-blue-500: 50, 230, 140;
+  --color-blue-600: 42, 200, 120;
+  --color-blue-700: 34, 170, 102;
+  --color-blue-800: 28, 140, 84;
+  --color-blue-900: 22, 110, 66;
+
+  /* Gray */
+
+  /* Gray */
+  --color-gray-50: 230, 230, 230;
+  --color-gray-100: 208, 208, 208; /* Dark Text */
+  --color-gray-200: 182, 182, 182;
+  --color-gray-300: 147, 147, 147;
+  --color-gray-400: 154, 154, 154; /* Text Secondary dark */
+  --color-gray-500: 75, 75, 75;
+  --color-gray-600: 57, 57, 57;
+  --color-gray-700: 69, 69, 69; /* Select Box Background */
+  --color-gray-800: 27, 27, 27; /* Box Input Background */
+  --color-gray-900: 18, 18, 18; /* Box Background */
+  --color-gray-850: 23, 23, 23; /* Background */
+
+  /* Pink */
+  --color-pink-50: 255, 235, 240;
+  --color-pink-100: 255, 210, 220;
+  --color-pink-200: 255, 180, 195;
+  --color-pink-300: 255, 150, 175;
+  --color-pink-400: 0, 100, 0; /* Gradient Loading */
+  --color-pink-500: 255, 226, 160; /* Stars Gradient */
+  --color-pink-600: 34, 170, 102; /* Gradient Base */
+  --color-pink-700: 0, 128, 128; /* Gradient Hover */
+  --color-pink-800: 205, 80, 120;
+  --color-pink-900: 180, 65, 100;
+
+  /* Yellow */
+  --color-yellow-500: 122, 255, 189; /* Stars Gradient */
+
+  /* Purple */
+  --color-purple-500: 255, 226, 160; /* Ve Stars Gradient */
+
+  /* Orange */
+  --color-orange-300: 252, 211, 77; /* Stars on Add liquidity */
+  --color-orange-600: 217, 119, 6;
+  --color-orange-700: 180, 83, 9;
+}
+
 @layer utilities {
   .text-primary {
     @apply text-gray-900 dark:text-gray-100;

src/assets/data/contracts/etherlink.json

@@ -0,0 +1,14 @@
+{
+  "Authorizer": "0x00EDdD9621Fb08436d0331c149D1690909a5906d",
+  "BalancerHelpers": "0xc2a0d530e57B1275fbce908031DA636f95EA1E38",
+  "BalancerRelayer": "0x0065c54FCbfE0adD9881046f8A45b871cb6e8610",
+  "BatchRelayerLibrary": "0x98add7DC34a382e188be709a72Ca8fCDF7e548db",
+  "BatchRelayerQueryLibrary": "0xf7CCb992279Fb7D640de3464c475b0d34c01a563",
+  "ComposableStablePoolFactory": "0xFEF39453770fF2C6b2F453D1b6D075623a79e3Eb",
+  "MockComposableStablePool": "0x9569326d7bd9Ada26CA459A11FD0222528A8216D",
+  "MockWeightedPool": "0x79A5Ea74c365cdF91b5A0342A3ccEa0853dD26Ea",
+  "ProtocolFeePercentagesProvider": "0x698fEa3Aa7DBD323D8D896993fD1EC556D308615",
+  "ProtocolFeesCollector": "0x61497C44c7Cb9C3eab99Ef20f58863414A5665d2",
+  "Vault": "0xbccc4b4c6530F82FE309c5E845E50b5E9C89f2AD",
+  "WeightedPoolFactory": "0x4e4131dC27ed9501ac5fEb76F94572fDAe9f0fD0"
+}

src/assets/data/contracts/taiko.json

@@ -0,0 +1,13 @@
+{
+  "Authorizer": "0x00EDdD9621Fb08436d0331c149D1690909a5906d",
+  "BalancerHelpers": "0xc2a0d530e57B1275fbce908031DA636f95EA1E38",
+  "BalancerRelayer": "0x030840b51ee6E96BA81423eF364234B8D656EAe8",
+  "BatchRelayerLibrary": "0x332e0bf729f06C9e08ffA42ABb1312Fcd16289e7",
+  "BatchRelayerQueryLibrary": "0x7EfA5b95C9a356DA96636877bDDa9EDe1800855D",
+  "ComposableStablePoolFactory": "0xFEF39453770fF2C6b2F453D1b6D075623a79e3Eb",
+  "MockWeightedPool": "0xAb9aF7b9fDAaE98487AA77b19D3FFf78Ae426Fa9",
+  "ProtocolFeePercentagesProvider": "0x698fEa3Aa7DBD323D8D896993fD1EC556D308615",
+  "ProtocolFeesCollector": "0x61497C44c7Cb9C3eab99Ef20f58863414A5665d2",
+  "Vault": "0xbccc4b4c6530F82FE309c5E845E50b5E9C89f2AD",
+  "WeightedPoolFactory": "0x4e4131dC27ed9501ac5fEb76F94572fDAe9f0fD0"
+}

src/components/btns/DarkModeToggle.vue

@@ -1,16 +1,24 @@
 <script lang="ts" setup>
 import useBreakpoints from '@/composables/useBreakpoints';
 import useDarkMode from '@/composables/useDarkMode';
+import useNetwork from '@/composables/useNetwork';
 
 /**
  * COMPOSABLES
  */
 const { isMobile } = useBreakpoints();
 const { darkMode, toggleDarkMode } = useDarkMode();
+
+const { networkSlug } = useNetwork();
+
+const hasLightMode = computed(() => {
+  return networkSlug !== 'taiko' && networkSlug !== 'etherlink';
+});
 </script>
 
 <template>
   <BalBtn
+    v-if="hasLightMode"
     color="white"
     :size="isMobile ? 'md' : 'sm'"
     :circle="isMobile"
@@ -20,3 +28,4 @@ const { darkMode, toggleDarkMode } = useDarkMode();
     <SunIcon v-else />
   </BalBtn>
 </template>
+s

src/composables/useBackgroundColor.ts

@@ -12,6 +12,7 @@ import { ref, watch } from 'vue';
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
 
 import useDarkMode from '@/composables/useDarkMode';
+import { networkSlug } from './useNetwork';
 
 /**
  * CONSTANTS
@@ -41,7 +42,7 @@ function setBackgroundColor(color: string): void {
 function setDefaultBgColor(): void {
   if (darkMode.value) {
     setBackgroundColor(defaultDarkBgColor);
-  } else {
+  } else if (networkSlug !== 'etherlink' && networkSlug !== 'taiko') {
     setBackgroundColor(defaultBgColor);
   }
 }

src/composables/useDarkMode.ts

@@ -2,23 +2,36 @@ import { ref } from 'vue';
 
 import LS_KEYS from '@/constants/local-storage.keys';
 import { lsSet } from '@/lib/utils';
+import { networkSlug } from './useNetwork';
 
 // const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 // const lsDarkMode =
 //   lsGet(LS_KEYS.App.DarkMode, osDarkMode.toString()) === 'true';
 
-const lsDarkMode = LS_KEYS.App.DarkMode === 'true';
+const lsDarkMode = ref(LS_KEYS.App.DarkMode === 'true');
 
 // STATE
-const darkMode = ref<boolean>(lsDarkMode);
+const darkMode = computed({
+  get() {
+    if (networkSlug === 'etherlink' || networkSlug === 'taiko') {
+      return true;
+    }
+    return lsDarkMode.value;
+  },
+  set(value: boolean) {
+    if (networkSlug !== 'etherlink' && networkSlug !== 'taiko') {
+      lsDarkMode.value = value;
+    }
+  },
+});
 
 // MUTATIONS
 function setDarkMode(val: boolean): void {
   darkMode.value = val;
   lsSet(LS_KEYS.App.DarkMode, darkMode.value.toString());
   if (darkMode.value) {
     document.documentElement.classList.add('dark');
-  } else {
+  } else if (networkSlug !== 'etherlink' && networkSlug !== 'taiko') {
     document.documentElement.classList.remove('dark');
   }
 }