From 90c0233a4a4b3b88b8c89659a05a381cc6d46cbf Mon Sep 17 00:00:00 2001 From: yuli-ferna Date: Mon, 25 Nov 2024 16:19:21 -0300 Subject: [PATCH 1/3] Include Submenu option + Cosmos link in navbar --- .../src/components/atoms/NavBar.tsx | 103 ++++++++++++++--- apps/connect-v1/src/env/common.ts | 4 + apps/connect-v1/src/env/tbtc-bridge.ts | 13 +++ apps/connect-v1/src/env/token-bridge.ts | 15 +++ apps/connect/src/components/atoms/NavBar.tsx | 105 ++++++++++++++---- apps/connect/src/env/common.ts | 4 + apps/connect/src/env/token-bridge.ts | 13 +++ apps/connect/src/env/usdc-bridge.ts | 13 +++ .../src/components/Header.tsx | 39 ++++++- 9 files changed, 271 insertions(+), 38 deletions(-) diff --git a/apps/connect-v1/src/components/atoms/NavBar.tsx b/apps/connect-v1/src/components/atoms/NavBar.tsx index d20ec850a..a8df20856 100644 --- a/apps/connect-v1/src/components/atoms/NavBar.tsx +++ b/apps/connect-v1/src/components/atoms/NavBar.tsx @@ -9,6 +9,8 @@ import { ENV } from "@env"; import { Logo } from "./Logo"; import { COLOR } from "../../theme/portal"; import { Link } from "./Link"; +import { Collapse, MenuItem } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; export const NAVBAR_WIDTH = 110; @@ -44,9 +46,40 @@ const LinkContainer = styled("div")(({ theme }) => ({ }, })); +const SubMenu = styled(MenuItem)(() => ({ + paddingLeft: 1, + paddingRight: 0, + paddingTop: 0, + paddingBottom: 0, + display: "flex", + gap: 4, + maxHeight: 20, + color: COLOR.whiteWithTransparency, + fontWeight: 400, + transition: "color 0.3s", + ":hover": { + color: COLOR.white, + }, +})); + +const Section = styled("div")(() => ({ + display: "flex", + flexDirection: "column", + gap: 8, +})); + export const NavBar = () => { const [openMenu, setOpenMenu] = useState(false); - + const [items, setItems] = useState([...ENV.navBar]); + const openSubMenuHandler = (index: number) => { + const newItems = [...items]; + if (newItems[index].subMenu) { + if (newItems[index].subMenu) { + newItems[index].subMenu.open = !newItems[index].subMenu.open; + setItems(newItems); + } + } + }; return ( diff --git a/apps/connect-v1/src/env/common.ts b/apps/connect-v1/src/env/common.ts index 4cdc36774..af6f37a9f 100644 --- a/apps/connect-v1/src/env/common.ts +++ b/apps/connect-v1/src/env/common.ts @@ -57,6 +57,10 @@ export interface Env { active?: boolean; href: string; isBlank?: boolean; + subMenu?: { + open: boolean; + content: { label: string; href: string; active?: boolean }[]; + }; }[]; redirects?: { source: string[]; target: string }; } diff --git a/apps/connect-v1/src/env/tbtc-bridge.ts b/apps/connect-v1/src/env/tbtc-bridge.ts index 808bca815..001fce311 100644 --- a/apps/connect-v1/src/env/tbtc-bridge.ts +++ b/apps/connect-v1/src/env/tbtc-bridge.ts @@ -13,6 +13,19 @@ export const ENV: Env = { { label: "USDC", href: `${PUBLIC_URL}/usdc-bridge` }, { label: "tBTC", active: true, href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: undefined, wormholeConnectConfig: { diff --git a/apps/connect-v1/src/env/token-bridge.ts b/apps/connect-v1/src/env/token-bridge.ts index bf9a2b4ad..7ca480d37 100644 --- a/apps/connect-v1/src/env/token-bridge.ts +++ b/apps/connect-v1/src/env/token-bridge.ts @@ -47,6 +47,21 @@ export const ENV: Env = { { label: "USDC", href: USDC_BRIDGE_HREF }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [ + { label: "Cosmos", href: `${PUBLIC_URL}/cosmos`, active: true }, + ], + }, + }, ], redirects: { source: [ diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx index 14c4d355a..4c79aef69 100644 --- a/apps/connect/src/components/atoms/NavBar.tsx +++ b/apps/connect/src/components/atoms/NavBar.tsx @@ -9,6 +9,8 @@ import { ENV } from "@env"; import { Logo } from "./Logo"; import { COLOR } from "../../theme/portal"; import { Link } from "./Link"; +import { Collapse, MenuItem } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; export const NAVBAR_WIDTH = 110; @@ -44,9 +46,40 @@ const LinkContainer = styled("div")(({ theme }) => ({ }, })); +const SubMenu = styled(MenuItem)(() => ({ + paddingLeft: 1, + paddingRight: 0, + paddingTop: 0, + paddingBottom: 0, + display: "flex", + gap: 4, + maxHeight: 20, + color: COLOR.whiteWithTransparency, + fontWeight: 400, + transition: "color 0.3s", + ":hover": { + color: COLOR.white, + }, +})); + +const Section = styled("div")(() => ({ + display: "flex", + flexDirection: "column", + gap: 8, +})); + export const NavBar = () => { const [openMenu, setOpenMenu] = useState(false); - + const [items, setItems] = useState([...ENV.navBar]); + const openSubMenuHandler = (index: number) => { + const newItems = [...items]; + const item = newItems[index]; + if (item && item.subMenu) { + item.subMenu.open = !item.subMenu?.open; + newItems[index] = item; + setItems(newItems); + } + }; return ( diff --git a/apps/connect/src/env/common.ts b/apps/connect/src/env/common.ts index cbb1c2b7e..1cf7c80d1 100644 --- a/apps/connect/src/env/common.ts +++ b/apps/connect/src/env/common.ts @@ -62,6 +62,10 @@ export interface Env { active?: boolean; href: string; isBlank?: boolean; + subMenu?: { + open: boolean; + content: { label: string; href: string; active?: boolean }[]; + }; }[]; redirects?: { source: string[]; target: string }; } diff --git a/apps/connect/src/env/token-bridge.ts b/apps/connect/src/env/token-bridge.ts index 2a0fa1621..4546267bb 100644 --- a/apps/connect/src/env/token-bridge.ts +++ b/apps/connect/src/env/token-bridge.ts @@ -48,6 +48,19 @@ export const ENV: Env = { { label: "USDC", href: USDC_BRIDGE_HREF }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: { source: [ diff --git a/apps/connect/src/env/usdc-bridge.ts b/apps/connect/src/env/usdc-bridge.ts index 50a1a6b17..fe8c76ed9 100644 --- a/apps/connect/src/env/usdc-bridge.ts +++ b/apps/connect/src/env/usdc-bridge.ts @@ -17,6 +17,19 @@ export const ENV: Env = { { label: "USDC", active: true, href: `${PUBLIC_URL}/usdc-bridge` }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: undefined, wormholeConnectConfig: mergeDeep( diff --git a/apps/rewards-dashboard/src/components/Header.tsx b/apps/rewards-dashboard/src/components/Header.tsx index 82bdf999e..214f5f026 100644 --- a/apps/rewards-dashboard/src/components/Header.tsx +++ b/apps/rewards-dashboard/src/components/Header.tsx @@ -7,7 +7,7 @@ import { PortalLogoWithText } from "../quarks/LogoVectors"; export const Header = () => { const [showMenu, setShowMenu] = useState(false); - + const [openMenu, setOpenMenu] = useState(true); return (
@@ -26,6 +26,43 @@ export const Header = () => { {navBar.map((x, idx) => ( ))} + <> + +
+ +
+
From 524be0d73969d6cb644e4c7d3a857d613f1e33b5 Mon Sep 17 00:00:00 2001 From: yuli-ferna Date: Mon, 25 Nov 2024 16:27:40 -0300 Subject: [PATCH 2/3] Fix v1 build --- apps/connect-v1/src/components/atoms/NavBar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/connect-v1/src/components/atoms/NavBar.tsx b/apps/connect-v1/src/components/atoms/NavBar.tsx index a8df20856..7e30e01ab 100644 --- a/apps/connect-v1/src/components/atoms/NavBar.tsx +++ b/apps/connect-v1/src/components/atoms/NavBar.tsx @@ -73,11 +73,11 @@ export const NavBar = () => { const [items, setItems] = useState([...ENV.navBar]); const openSubMenuHandler = (index: number) => { const newItems = [...items]; - if (newItems[index].subMenu) { - if (newItems[index].subMenu) { - newItems[index].subMenu.open = !newItems[index].subMenu.open; - setItems(newItems); - } + const item = newItems[index]; + if (item && item.subMenu) { + item.subMenu.open = !item.subMenu?.open; + newItems[index] = item; + setItems(newItems); } }; return ( From a633b261172d08be8c84864749a0ccb602d06c35 Mon Sep 17 00:00:00 2001 From: yuli-ferna Date: Tue, 26 Nov 2024 12:34:17 -0300 Subject: [PATCH 3/3] Comment in progress widget --- apps/connect/src/env/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/connect/src/env/common.ts b/apps/connect/src/env/common.ts index 323c0bd36..1cf7c80d1 100644 --- a/apps/connect/src/env/common.ts +++ b/apps/connect/src/env/common.ts @@ -48,7 +48,7 @@ export const wormholeConnectConfigCommon: Partial = { href: `https://wormholescan.io/#/txs?address={:address}&network=${CLUSTER}`, }, menu: [], - showInProgressWidget: true, + // showInProgressWidget: true, }, network: CLUSTER, rpcs: {},