feat: implement merge navigation

CHANGELOG.md

@@ -39,6 +39,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#438](https://github.com/alleslabs/celatone-frontend/pull/438) Add new home page
+- [#437](https://github.com/alleslabs/celatone-frontend/pull/437) Add first landing prompt for dev mode
+- [#436](https://github.com/alleslabs/celatone-frontend/pull/436) Implement merge navigation
+
 ### Improvements
 
 - [#414](https://github.com/alleslabs/celatone-frontend/pull/414) Add jest test cases for funds and assetValue in utils, and remove isDecimalNumber in utils

src/config/chain/default.ts

@@ -41,5 +41,4 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     validator: "",
     proposal: "",
   },
-  hasSubHeader: false,
 };

src/config/chain/neutron.ts

@@ -46,7 +46,6 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    hasSubHeader: false,
   },
   "pion-1": {
     chain: "neutron",
@@ -91,6 +90,5 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    hasSubHeader: false,
   },
 };

src/config/chain/osmosis.ts

@@ -47,7 +47,6 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/osmosis/validators",
       proposal: "https://www.mintscan.io/osmosis/proposals",
     },
-    hasSubHeader: false,
   },
   "osmo-test-5": {
     chain: "osmosis",
@@ -94,7 +93,6 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://testnet.mintscan.io/osmosis-testnet/validators",
       proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
     },
-    hasSubHeader: false,
   },
   localosmosis: {
     chain: "osmosis",
@@ -140,6 +138,5 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       validator: "",
       proposal: "",
     },
-    hasSubHeader: false,
   },
 };

src/config/chain/sei.ts

@@ -46,7 +46,6 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
       validator: "",
       proposal: "",
     },
-    hasSubHeader: true,
   },
   "atlantic-2": {
     chain: "sei",
@@ -91,6 +90,5 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://testnet.mintscan.io/sei-testnet/validators",
       proposal: "https://testnet.mintscan.io/sei-testnet/proposals",
     },
-    hasSubHeader: true,
   },
 };

src/config/chain/stargaze.ts

@@ -46,6 +46,5 @@ export const STARGAZE_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/stargaze/validators",
       proposal: "https://www.mintscan.io/stargaze/proposals",
     },
-    hasSubHeader: false,
   },
 };

src/config/chain/types.ts

@@ -59,7 +59,6 @@ export interface ChainConfig {
     contract: ContractAddr;
   };
   explorerLink: ExplorerConfig;
-  hasSubHeader: boolean;
 }
 
 export interface ChainConfigs {

src/config/theme/default.ts

@@ -117,6 +117,10 @@ export const DEFAULT_THEME: ThemeConfig = {
       "https://assets.alleslabs.dev/illustration/search-not-found.svg",
     searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
     disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
+    overview: {
+      main: "https://assets.alleslabs.dev/illustration/bg-left.svg",
+      secondary: "https://assets.alleslabs.dev/illustration/bg-right.svg",
+    },
   },
   socialMedia: {
     website: "https://celat.one/",

src/config/theme/osmosis.ts

@@ -122,6 +122,10 @@ export const OSMOSIS_THEME: ThemeConfig = {
       "https://assets.alleslabs.dev/integrations/osmosis/illustration/search-empty.svg",
     disconnected:
       "https://assets.alleslabs.dev/integrations/osmosis/illustration/disconnected.svg",
+    overview: {
+      // Fill image url
+      main: "",
+    },
   },
   footer: {
     logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.png",

src/config/theme/sei.ts

@@ -134,6 +134,10 @@ export const SEI_THEME: ThemeConfig = {
       "https://assets.alleslabs.dev/integrations/sei/illustration/search-empty.svg",
     disconnected:
       "https://assets.alleslabs.dev/integrations/sei/illustration/disconnected.svg",
+    overview: {
+      // Fill image url
+      main: "",
+    },
   },
   footer: {
     logo: "https://www.sei.io/_next/static/media/logo-light.1249fa55.svg",

src/config/theme/types.ts

@@ -127,6 +127,10 @@ export type ThemeConfig = {
     searchNotFound: string;
     searchEmpty: string;
     disconnected: string;
+    overview: {
+      main: string;
+      secondary?: string;
+    };
   };
   jsonTheme: "monokai" | "one_dark" | "pastel_on_dark";
   footer?: {

src/lib/app-provider/contexts/app.tsx

@@ -1,7 +1,7 @@
 import { useModalTheme } from "@cosmos-kit/react";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
-import type { ReactNode } from "react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
 import {
   useCallback,
   useState,
@@ -21,11 +21,13 @@ import { SUPPORTED_CHAIN_IDS } from "env";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { NetworkErrorState } from "lib/components/state/NetworkErrorState";
 import { DEFAULT_ADDRESS } from "lib/data";
+import { useLocalStorage } from "lib/hooks/useLocalStorage";
 import {
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
 } from "lib/providers/store";
+import type { Option } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
 interface AppProviderProps {
@@ -38,6 +40,10 @@ interface AppContextInterface {
   chainConfig: ChainConfig;
   indexerGraphClient: GraphQLClient;
   constants: ProjectConstants;
+  isExpand: boolean;
+  isDevMode: Option<boolean>;
+  setIsExpand: Dispatch<SetStateAction<boolean>>;
+  setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
 }
 
 const AppContext = createContext<AppContextInterface>({
@@ -46,6 +52,10 @@ const AppContext = createContext<AppContextInterface>({
   chainConfig: DEFAULT_CHAIN_CONFIG,
   indexerGraphClient: new GraphQLClient(DEFAULT_CHAIN_CONFIG.indexer),
   constants: PROJECT_CONSTANTS,
+  isExpand: false,
+  isDevMode: undefined,
+  setIsExpand: () => {},
+  setIsDevMode: () => {},
 });
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
@@ -57,6 +67,13 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   const [currentChainName, setCurrentChainName] = useState<string>();
   const [currentChainId, setCurrentChainId] = useState("");
 
+  // TODO - Revisit localstorage
+  const [isDevMode, setIsDevMode] = useLocalStorage<Option<boolean>>(
+    "devMode",
+    undefined
+  );
+  const [isExpand, setIsExpand] = useLocalStorage("navbar", false);
+
   // Remark: this function is only used in useSelectChain. Do not use in other places.
   const handleOnChainIdChange = useCallback((newChainId: string) => {
     const config = CHAIN_CONFIGS[newChainId];
@@ -73,8 +90,12 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
       chainConfig,
       indexerGraphClient: new GraphQLClient(chainConfig.indexer),
       constants: PROJECT_CONSTANTS,
+      isDevMode,
+      isExpand,
+      setIsDevMode,
+      setIsExpand,
     };
-  }, [currentChainId]);
+  }, [currentChainId, isDevMode, isExpand, setIsDevMode, setIsExpand]);
 
   useEffect(() => {
     if (currentChainName) {

src/lib/components/icon/CustomIcon.tsx

@@ -1424,6 +1424,15 @@ export const ICONS = {
     ),
     viewBox: "0 0 24 24",
   },
+  list: {
+    svg: (
+      <path
+        d="M4.88889 13.3333C5.37778 13.3333 5.77778 12.9333 5.77778 12.4444C5.77778 11.9556 5.37778 11.5556 4.88889 11.5556C4.4 11.5556 4 11.9556 4 12.4444C4 12.9333 4.4 13.3333 4.88889 13.3333ZM4.88889 16.8889C5.37778 16.8889 5.77778 16.4889 5.77778 16C5.77778 15.5111 5.37778 15.1111 4.88889 15.1111C4.4 15.1111 4 15.5111 4 16C4 16.4889 4.4 16.8889 4.88889 16.8889ZM4.88889 9.77778C5.37778 9.77778 5.77778 9.37778 5.77778 8.88889C5.77778 8.4 5.37778 8 4.88889 8C4.4 8 4 8.4 4 8.88889C4 9.37778 4.4 9.77778 4.88889 9.77778ZM8.44444 13.3333H19.1111C19.6 13.3333 20 12.9333 20 12.4444C20 11.9556 19.6 11.5556 19.1111 11.5556H13.7778H8.44444C7.95556 11.5556 7.55556 11.9556 7.55556 12.4444C7.55556 12.9333 7.95556 13.3333 8.44444 13.3333ZM8.44444 16.8889H19.1111C19.6 16.8889 20 16.4889 20 16C20 15.5111 19.6 15.1111 19.1111 15.1111H8.44444C7.95556 15.1111 7.55556 15.5111 7.55556 16C7.55556 16.4889 7.95556 16.8889 8.44444 16.8889ZM7.55556 8.88889C7.55556 9.37778 7.95556 9.77778 8.44444 9.77778H19.1111C19.6 9.77778 20 9.37778 20 8.88889C20 8.4 19.6 8 19.1111 8H8.44444C7.95556 8 7.55556 8.4 7.55556 8.88889ZM4.88889 13.3333C5.37778 13.3333 5.77778 12.9333 5.77778 12.4444C5.77778 11.9556 5.37778 11.5556 4.88889 11.5556C4.4 11.5556 4 11.9556 4 12.4444C4 12.9333 4.4 13.3333 4.88889 13.3333ZM4.88889 16.8889C5.37778 16.8889 5.77778 16.4889 5.77778 16C5.77778 15.5111 5.37778 15.1111 4.88889 15.1111C4.4 15.1111 4 15.5111 4 16C4 16.4889 4.4 16.8889 4.88889 16.8889ZM4.88889 9.77778C5.37778 9.77778 5.77778 9.37778 5.77778 8.88889C5.77778 8.4 5.37778 8 4.88889 8C4.4 8 4 8.4 4 8.88889C4 9.37778 4.4 9.77778 4.88889 9.77778ZM8.44444 13.3333H19.1111C19.6 13.3333 20 12.9333 20 12.4444C20 11.9556 19.6 11.5556 19.1111 11.5556H13.7778H8.44444C7.95556 11.5556 7.55556 11.9556 7.55556 12.4444C7.55556 12.9333 7.95556 13.3333 8.44444 13.3333ZM8.44444 16.8889H19.1111C19.6 16.8889 20 16.4889 20 16C20 15.5111 19.6 15.1111 19.1111 15.1111H8.44444C7.95556 15.1111 7.55556 15.5111 7.55556 16C7.55556 16.4889 7.95556 16.8889 8.44444 16.8889ZM7.55556 8.88889C7.55556 9.37778 7.95556 9.77778 8.44444 9.77778H19.1111C19.6 9.77778 20 9.37778 20 8.88889C20 8.4 19.6 8 19.1111 8H8.44444C7.95556 8 7.55556 8.4 7.55556 8.88889Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: "0 5 15 15",
+  },
 };
 
 export type IconKeys = keyof typeof ICONS;

src/lib/hooks/useLocalStorage.ts

@@ -1,71 +1,30 @@
 /* eslint-disable no-console */
 import type { Dispatch, SetStateAction } from "react";
-import { useCallback, useState } from "react";
+import { useEffect, useState } from "react";
 
-// Reference: https://usehooks-ts.com/react-hook/use-local-storage
-
-// A wrapper for "JSON.parse()"" to support "undefined" value
-const parseJSON = <T>(value: string): T | undefined => {
-  try {
-    return value === "undefined" ? undefined : JSON.parse(value);
-  } catch {
-    return undefined;
-  }
-};
-
-type SetValue<T> = Dispatch<SetStateAction<T>>;
+type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
 
 export const useLocalStorage = <T>(
   key: string,
-  initialValue: T
-): [T, SetValue<T>] => {
-  // Get from local storage then
-  // parse stored json or return initialValue
-  const readValue = useCallback((): T => {
-    // Prevent build error "window is undefined" but keeps working
-    if (typeof window === "undefined") {
-      return initialValue;
+  defaultValue: T
+): PersistedState<T> => {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const value = window.localStorage.getItem(key);
+      return value ? (JSON.parse(value) as T) : defaultValue;
+    } catch (e) {
+      console.warn(`Error reading localStorage key “${key}”:`, e);
+      return defaultValue as T;
     }
+  });
 
+  useEffect(() => {
     try {
-      const item = window.localStorage.getItem(key);
-      return item ? (parseJSON(item) as T) : initialValue;
-    } catch (error) {
-      console.warn(`Error reading localStorage key “${key}”:`, error);
-      return initialValue;
+      window.localStorage.setItem(key, JSON.stringify(storedValue));
+    } catch (e) {
+      console.warn(`Error setting localStorage key “${key}”:`, e);
     }
-  }, [initialValue, key]);
-
-  // State to store our value
-  // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(readValue);
-
-  // Return a wrapped version of useState's setter function that ...
-  // ... persists the new value to localStorage.
-  const setValue: SetValue<T> = useCallback(
-    (value) => {
-      // Prevent build error "window is undefined" but keeps working
-      if (typeof window === "undefined") {
-        console.warn(
-          `Tried setting localStorage key “${key}” even though environment is not a client`
-        );
-      }
-
-      try {
-        // Allow value to be a function so we have the same API as useState
-        const newValue = value instanceof Function ? value(storedValue) : value;
-
-        // Save to local storage
-        window.localStorage.setItem(key, JSON.stringify(newValue));
-
-        // Save state
-        setStoredValue(newValue);
-      } catch (error) {
-        console.warn(`Error setting localStorage key “${key}”:`, error);
-      }
-    },
-    [key, storedValue]
-  );
+  }, [key, storedValue]);
 
-  return [storedValue, setValue];
+  return [storedValue, setStoredValue];
 };