From 79bbccf0a207d277ecfce8e54304abeb02b3be1b Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 <69841784+vutuanlinh2k2@users.noreply.github.com> Date: Thu, 26 Oct 2023 01:08:29 +0700 Subject: [PATCH] Add logo to header across dapps in table/mobile view (#1800) --- .../src/components/Header/Header.tsx | 165 ++++++++++-------- apps/faucet/src/components/Header.tsx | 15 +- apps/faucet/src/pages/index.tsx | 100 +++++------ apps/hubble-stats/app/pool/[slug]/page.tsx | 5 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 8 +- .../components/Breadcrumbs/types.ts | 6 +- .../HeaderChipItem/HeaderChipItem.tsx | 2 +- .../hubble-stats/containers/Layout/Header.tsx | 63 +++++++ .../hubble-stats/containers/Layout/Layout.tsx | 14 +- libs/icons/src/TangleIcon.tsx | 13 +- .../ConnectWalletMobileButton.tsx | 2 +- 11 files changed, 251 insertions(+), 142 deletions(-) create mode 100644 apps/hubble-stats/containers/Layout/Header.tsx diff --git a/apps/bridge-dapp/src/components/Header/Header.tsx b/apps/bridge-dapp/src/components/Header/Header.tsx index 7b78f025c3..b88b5ff88b 100644 --- a/apps/bridge-dapp/src/components/Header/Header.tsx +++ b/apps/bridge-dapp/src/components/Header/Header.tsx @@ -1,10 +1,11 @@ import { useWebContext } from '@webb-tools/api-provider-environment'; -import { ContrastTwoLine } from '@webb-tools/icons'; +import { ContrastTwoLine, WebbLogoIcon } from '@webb-tools/icons'; import { Breadcrumbs, BreadcrumbsItem, Button, ConnectWalletMobileButton, + Logo, MenuItem, NavigationMenu, NavigationMenuContent, @@ -21,7 +22,14 @@ import { WEBB_FAUCET_URL, WEBB_MKT_URL, } from '@webb-tools/webb-ui-components/constants'; -import { ComponentProps, FC, useCallback, useEffect, useState } from 'react'; +import { + type ComponentProps, + type FC, + useCallback, + useEffect, + useState, + useMemo, +} from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import sidebarProps from '../../constants/sidebar'; import useChainsFromRoute from '../../hooks/useChainsFromRoute'; @@ -47,78 +55,97 @@ export const Header: FC = () => { const items = location.pathname.split('/').filter((item) => item !== ''); + const breadcrumbItems = useMemo( + () => + items.map((item, index) => { + return ( + + : undefined} + className="capitalize" + > + {index === 0 ? `Hubble ${item}` : item.split('-').join(' ')} + + + ); + }), + [items] + ); + return ( -
-
- - - {items.map((item, index) => { - return ( - - : undefined} - className="capitalize" +
+
+
+ + + {/* Show Logo with name on table */} + + + {/* Show Logo without name on mobile */} + + + + {breadcrumbItems} + +
+ +
+ + +
+ + {isConnecting || loading || !activeWallet || !activeAccount ? ( + isMobile ? ( + + ) : ( +
- -
- - -
- - {isConnecting || loading || !activeWallet || !activeAccount ? ( - isMobile ? ( - + Connect + + ) ) : ( - - ) - ) : ( - - )} + + )} +
+ + + + {/** TODO: Refactor these links into a config file and make the menu items dynamically based on the config */} + window.open(WEBB_DOCS_URL, '_blank')} + onTestnetClick={() => + window.open(TANGLE_STANDALONE_EXPLORER_URL, '_blank') + } + onFaucetClick={() => { + window.open(WEBB_FAUCET_URL, '_blank'); + }} + onHelpCenterClick={() => + window.open(SOCIAL_URLS_RECORD.telegram, '_blank') + } + onRequestFeaturesClick={() => + window.open(GITHUB_REQUEST_FEATURE_URL, '_blank') + } + onAboutClick={() => window.open(WEBB_MKT_URL, '_blank')} + extraMenuItems={[]} + /> +
+
- - - {/** TODO: Refactor these links into a config file and make the menu items dynamically based on the config */} - window.open(WEBB_DOCS_URL, '_blank')} - onTestnetClick={() => - window.open(TANGLE_STANDALONE_EXPLORER_URL, '_blank') - } - onFaucetClick={() => { - window.open(WEBB_FAUCET_URL, '_blank'); - }} - onHelpCenterClick={() => - window.open(SOCIAL_URLS_RECORD.telegram, '_blank') - } - onRequestFeaturesClick={() => - window.open(GITHUB_REQUEST_FEATURE_URL, '_blank') - } - onAboutClick={() => window.open(WEBB_MKT_URL, '_blank')} - extraMenuItems={[]} - /> - -
-
+ {breadcrumbItems} + ); }; diff --git a/apps/faucet/src/components/Header.tsx b/apps/faucet/src/components/Header.tsx index 5ff185eec5..d275c55de3 100644 --- a/apps/faucet/src/components/Header.tsx +++ b/apps/faucet/src/components/Header.tsx @@ -1,4 +1,4 @@ -import { FaucetIcon } from '@webb-tools/icons'; +import { FaucetIcon, TangleIcon } from '@webb-tools/icons'; import { Breadcrumbs, BreadcrumbsItem, @@ -7,6 +7,7 @@ import { NavigationMenuContent, NavigationMenuTrigger, SideBarMenu, + TangleLogo, } from '@webb-tools/webb-ui-components'; import { BRIDGE_URL, @@ -15,6 +16,7 @@ import { TANGLE_MKT_URL, TANGLE_STANDALONE_EXPLORER_URL, } from '@webb-tools/webb-ui-components/constants'; +import Link from 'next/link'; import { type FC } from 'react'; import { TANGLE_DOCS_URL } from '../constants'; @@ -25,7 +27,16 @@ const Header: FC = () => {
- + + + {/* Show Icon on mobile */} + + + {/* Show Logo with name on mobile */} + + + + } isLast={true}> Faucet diff --git a/apps/faucet/src/pages/index.tsx b/apps/faucet/src/pages/index.tsx index b8e4af29f6..286b39a37f 100644 --- a/apps/faucet/src/pages/index.tsx +++ b/apps/faucet/src/pages/index.tsx @@ -41,69 +41,71 @@ export default function Page({ sideBarInitialState }: PageProps) { className="!z-0 hidden lg:block" />
-
-
+
+
+
-
- +
+ - {/** The Faucet Card */} -
-
- {/** Static content */} -
-
+ {/** The Faucet Card */} +
+
+ {/** Static content */} +
+
+ + Get tokens + + + Tangle Network Faucet + +
- Get tokens + Receive Test Tokens on Devnet and Testnet supported by + Tangle Network and Webb Protocol for development and + experimental purposes. - Tangle Network Faucet + Follow + { + " on Twitter and authenticate yourself by clicking the 'Login with Twitter' below to start the process. *You can claim faucet every 24 hours on each network." + }
- - Receive Test Tokens on Devnet and Testnet supported by - Tangle Network and Webb Protocol for development and - experimental purposes. - - - Follow - { - " on Twitter and authenticate yourself by clicking the 'Login with Twitter' below to start the process. *You can claim faucet every 24 hours on each network." - } - -
- {/** Logic content */} -
- - + {/** Logic content */} +
+ + +
-
- -
+ +
+
-
+
diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx index 25dc5d52b6..5fd884e6d0 100644 --- a/apps/hubble-stats/app/pool/[slug]/page.tsx +++ b/apps/hubble-stats/app/pool/[slug]/page.tsx @@ -1,6 +1,7 @@ import { notFound } from 'next/navigation'; import { Suspense } from 'react'; import { VANCHORS_MAP } from '../../../constants'; +import { Breadcrumbs } from '../../../components'; import { PoolInfoCardContainer, PoolMetadataTableContainer, @@ -36,7 +37,9 @@ export default function Pool({ params }: { params: { slug: string } }) { }; return ( -
+
+ +
{ +const Breadcrumbs: FC = ({ className }) => { const pathname = usePathname(); - const breadCrumbs = useMemo(() => { + const breadCrumbs = useMemo(() => { // check if current path is /pool/<0x...> if (/^\/pool\/0x\w+/.test(pathname)) { const poolAddress = pathname.split('/')[2]; @@ -49,7 +49,7 @@ const Breadcrumbs: FC = () => { }, [pathname]); return ( - + {breadCrumbs.map((breadcrumb, index) => ( /** * Data on the client-side needs to be up-to-date when the user navigates to a page diff --git a/apps/hubble-stats/components/Breadcrumbs/types.ts b/apps/hubble-stats/components/Breadcrumbs/types.ts index 47053b33b9..d151ec8fa4 100644 --- a/apps/hubble-stats/components/Breadcrumbs/types.ts +++ b/apps/hubble-stats/components/Breadcrumbs/types.ts @@ -1,4 +1,8 @@ -export type BreadcrumbType = { +export type BreadcrumbsType = { + className?: string; +}; + +export type BreadcrumbItemType = { label: string; isLast: boolean; icon: JSX.Element; diff --git a/apps/hubble-stats/components/HeaderChipItem/HeaderChipItem.tsx b/apps/hubble-stats/components/HeaderChipItem/HeaderChipItem.tsx index 6da35a579b..0c571ae66d 100644 --- a/apps/hubble-stats/components/HeaderChipItem/HeaderChipItem.tsx +++ b/apps/hubble-stats/components/HeaderChipItem/HeaderChipItem.tsx @@ -30,7 +30,7 @@ function HeaderChipItem({ <> {typeof value === 'number' ? getRoundedDownNumberWith2Decimals(value) - : '-'} + : '-'}{' '} webbtTNT )} diff --git a/apps/hubble-stats/containers/Layout/Header.tsx b/apps/hubble-stats/containers/Layout/Header.tsx new file mode 100644 index 0000000000..b25eb42479 --- /dev/null +++ b/apps/hubble-stats/containers/Layout/Header.tsx @@ -0,0 +1,63 @@ +'use client'; + +import React, { type FC } from 'react'; +import { + Button, + NavigationMenu, + NavigationMenuContent, + NavigationMenuTrigger, + Logo, +} from '@webb-tools/webb-ui-components'; +import { WebbLogoIcon } from '@webb-tools/icons'; +import { Breadcrumbs, SideBarMenu } from '../../components'; +import { + BRIDGE_URL, + WEBB_DOCS_URL, + GITHUB_REQUEST_FEATURE_URL, + SOCIAL_URLS_RECORD, + TANGLE_MKT_URL, + TANGLE_STANDALONE_EXPLORER_URL, +} from '@webb-tools/webb-ui-components/constants'; + +const Header: FC = () => { + return ( +
+
+ + + {/* Show Logo without name on mobile */} + + + {/* Show Logo with name on tablet */} + + + +
+ +
+ + + + + window.open(WEBB_DOCS_URL, '_blank')} + onTestnetClick={() => + window.open(TANGLE_STANDALONE_EXPLORER_URL, '_blank') + } + onHelpCenterClick={() => + window.open(SOCIAL_URLS_RECORD.telegram, '_blank') + } + onRequestFeaturesClick={() => + window.open(GITHUB_REQUEST_FEATURE_URL, '_blank') + } + onAboutClick={() => window.open(TANGLE_MKT_URL, '_blank')} + /> + +
+
+ ); +}; + +export default Header; diff --git a/apps/hubble-stats/containers/Layout/Layout.tsx b/apps/hubble-stats/containers/Layout/Layout.tsx index 7986da319c..dd92f985df 100644 --- a/apps/hubble-stats/containers/Layout/Layout.tsx +++ b/apps/hubble-stats/containers/Layout/Layout.tsx @@ -1,8 +1,9 @@ import React, { type PropsWithChildren, type FC } from 'react'; import { Footer } from '@webb-tools/webb-ui-components'; -import { HeaderChipsContainer } from '..'; import { getSideBarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils'; -import { Breadcrumbs, SideBar, SideBarMenu } from '../../components'; + +import Header from './Header'; +import { SideBar } from '../../components'; const Layout: FC = ({ children }) => { const isSideBarInitiallyExpanded = getSideBarStateFromCookie(); @@ -14,14 +15,7 @@ const Layout: FC = ({ children }) => {
{/* Header */} -
-
- - -
- - -
+
{/* Body */} {children} diff --git a/libs/icons/src/TangleIcon.tsx b/libs/icons/src/TangleIcon.tsx index ace32fbd54..7fcc4a478f 100644 --- a/libs/icons/src/TangleIcon.tsx +++ b/libs/icons/src/TangleIcon.tsx @@ -1,7 +1,12 @@ +import { randNumber } from '@ngneat/falso'; import { createIcon } from './create-icon'; import { IconBase } from './types'; export const TangleIcon = (props: IconBase) => { + // non-unique ids problem with svg: https://stackoverflow.com/a/55846525 + // create id for each svg items in case there are multiple icons appear at the same time in html + const paintId = randNumber().toString(); + return createIcon({ ...props, viewBox: '0 0 32 28', @@ -9,17 +14,17 @@ export const TangleIcon = (props: IconBase) => { , {