Skip to content

Commit

Permalink
Merge pull request #436 from alleslabs/feat/merge-navigation
Browse files Browse the repository at this point in the history
feat: implement merge navigation
  • Loading branch information
evilpeach committed Jul 14, 2023
2 parents 172a937 + 89a18bb commit 562111e
Show file tree
Hide file tree
Showing 32 changed files with 895 additions and 1,007 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

- [#431](https://github.com/alleslabs/celatone-frontend/pull/431) Add new Osmosis v16 tx messages
Expand Down
1 change: 0 additions & 1 deletion src/config/chain/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,4 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
validator: "",
proposal: "",
},
hasSubHeader: false,
};
2 changes: 0 additions & 2 deletions src/config/chain/neutron.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
validator: "https://www.mintscan.io/neutron/validators",
proposal: "",
},
hasSubHeader: false,
},
"pion-1": {
chain: "neutron",
Expand Down Expand Up @@ -91,6 +90,5 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
validator: "https://www.mintscan.io/neutron/validators",
proposal: "",
},
hasSubHeader: false,
},
};
3 changes: 0 additions & 3 deletions src/config/chain/osmosis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -140,6 +138,5 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
validator: "",
proposal: "",
},
hasSubHeader: false,
},
};
2 changes: 0 additions & 2 deletions src/config/chain/sei.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
validator: "",
proposal: "",
},
hasSubHeader: true,
},
"atlantic-2": {
chain: "sei",
Expand Down Expand Up @@ -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,
},
};
1 change: 0 additions & 1 deletion src/config/chain/stargaze.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
};
1 change: 0 additions & 1 deletion src/config/chain/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export interface ChainConfig {
contract: ContractAddr;
};
explorerLink: ExplorerConfig;
hasSubHeader: boolean;
}

export interface ChainConfigs {
Expand Down
4 changes: 4 additions & 0 deletions src/config/theme/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Expand Down
4 changes: 4 additions & 0 deletions src/config/theme/osmosis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/config/theme/sei.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/config/theme/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?: {
Expand Down
25 changes: 23 additions & 2 deletions src/lib/app-provider/contexts/app.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 {
Expand All @@ -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>({
Expand All @@ -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) => {
Expand All @@ -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];
Expand All @@ -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) {
Expand Down
9 changes: 9 additions & 0 deletions src/lib/components/icon/CustomIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
77 changes: 18 additions & 59 deletions src/lib/hooks/useLocalStorage.ts
Original file line number Diff line number Diff line change
@@ -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];
};
Loading

2 comments on commit 562111e

@vercel
Copy link

@vercel vercel bot commented on 562111e Jul 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 562111e Jul 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.