Skip to content

Commit

Permalink
Add logo to header across dapps in table/mobile view (#1800)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vutuanlinh2k2
vutuanlinh2k2 authored Oct 25, 2023
1 parent 6bdeff8 commit 79bbccf
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 142 deletions.
165 changes: 96 additions & 69 deletions apps/bridge-dapp/src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';
Expand All @@ -47,78 +55,97 @@ export const Header: FC<HeaderProps> = () => {

const items = location.pathname.split('/').filter((item) => item !== '');

const breadcrumbItems = useMemo(
() =>
items.map((item, index) => {
return (
<NavLink key={index} to={'/'}>
<BreadcrumbsItem
isLast={index === items.length - 1}
icon={index === 0 ? <ContrastTwoLine size="lg" /> : undefined}
className="capitalize"
>
{index === 0 ? `Hubble ${item}` : item.split('-').join(' ')}
</BreadcrumbsItem>
</NavLink>
);
}),
[items]
);

return (
<header className="flex justify-between pt-6 pb-4">
<div className="flex items-center gap-2">
<SideBarMenu
{...sidebarProps}
className="lg:hidden"
overrideContentProps={{ className: 'top-0' }}
/>
<Breadcrumbs className="hidden md:flex">
{items.map((item, index) => {
return (
<NavLink key={index} to={'/'}>
<BreadcrumbsItem
isLast={index === items.length - 1}
icon={index === 0 ? <ContrastTwoLine size="lg" /> : undefined}
className="capitalize"
<div>
<header className="flex justify-between py-6">
<div className="flex items-center gap-2">
<SideBarMenu
{...sidebarProps}
className="lg:hidden"
overrideContentProps={{ className: 'top-0' }}
/>

{/* Show Logo with name on table */}
<Logo className="hidden md:block lg:hidden" />

{/* Show Logo without name on mobile */}
<WebbLogoIcon className="md:hidden" size="lg" />

<Breadcrumbs className="hidden lg:flex">
{breadcrumbItems}
</Breadcrumbs>
</div>

<div className="flex items-center space-x-2">
<TxProgressDropdown />

<div className="hidden lg:!flex items-center space-x-2">
<ChainButton />
{isConnecting || loading || !activeWallet || !activeAccount ? (
isMobile ? (
<ConnectWalletMobileButton />
) : (
<Button
isLoading={loading}
loadingText="Connecting..."
onClick={() =>
toggleModal(true, srcTypedChainId ?? undefined)
}
className="hidden lg:!flex justify-center items-center px-6"
>
{index === 0 ? `Hubble ${item}` : item.split('-').join(' ')}
</BreadcrumbsItem>
</NavLink>
);
})}
</Breadcrumbs>
</div>

<div className="flex items-center space-x-2">
<TxProgressDropdown />

<div className="hidden lg:!flex items-center space-x-2">
<ChainButton />
{isConnecting || loading || !activeWallet || !activeAccount ? (
isMobile ? (
<ConnectWalletMobileButton />
Connect
</Button>
)
) : (
<Button
isLoading={loading}
loadingText="Connecting..."
onClick={() => toggleModal(true, srcTypedChainId ?? undefined)}
className="hidden lg:!flex justify-center items-center px-6"
>
Connect wallet
</Button>
)
) : (
<WalletDropdown account={activeAccount} wallet={activeWallet} />
)}
<WalletDropdown account={activeAccount} wallet={activeWallet} />
)}
</div>

<NavigationMenu>
<NavigationMenuTrigger />
{/** TODO: Refactor these links into a config file and make the menu items dynamically based on the config */}
<NavigationMenuContent
version={process.env.BRIDGE_VERSION}
onDocsClick={() => 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={[<ClearCacheMenuItem />]}
/>
</NavigationMenu>
</div>
</header>

<NavigationMenu>
<NavigationMenuTrigger />
{/** TODO: Refactor these links into a config file and make the menu items dynamically based on the config */}
<NavigationMenuContent
version={process.env.BRIDGE_VERSION}
onDocsClick={() => 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={[<ClearCacheMenuItem />]}
/>
</NavigationMenu>
</div>
</header>
<Breadcrumbs className="lg:!hidden">{breadcrumbItems}</Breadcrumbs>
</div>
);
};

Expand Down
15 changes: 13 additions & 2 deletions apps/faucet/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FaucetIcon } from '@webb-tools/icons';
import { FaucetIcon, TangleIcon } from '@webb-tools/icons';
import {
Breadcrumbs,
BreadcrumbsItem,
Expand All @@ -7,6 +7,7 @@ import {
NavigationMenuContent,
NavigationMenuTrigger,
SideBarMenu,
TangleLogo,
} from '@webb-tools/webb-ui-components';
import {
BRIDGE_URL,
Expand All @@ -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';
Expand All @@ -25,7 +27,16 @@ const Header: FC = () => {
<header className="flex items-center justify-between pt-6 pb-4">
<div className="flex items-center gap-2">
<SideBarMenu {...sideBarProps} className="lg:hidden" />
<Breadcrumbs className="hidden md:block">

<Link href="/">
{/* Show Icon on mobile */}
<TangleIcon className="md:hidden" size="lg" />

{/* Show Logo with name on mobile */}
<TangleLogo className="hidden md:block lg:hidden" />
</Link>

<Breadcrumbs className="hidden lg:block">
<BreadcrumbsItem icon={<FaucetIcon />} isLast={true}>
Faucet
</BreadcrumbsItem>
Expand Down
100 changes: 51 additions & 49 deletions apps/faucet/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,69 +41,71 @@ export default function Page({ sideBarInitialState }: PageProps) {
className="!z-0 hidden lg:block"
/>
<main className="flex-[1] h-full overflow-y-auto">
<div className="mx-3 md:mx-5 lg:mx-10 space-y-4">
<Header />
<div className="flex flex-col justify-between h-full px-3 md:px-5 lg:px-10 space-y-4">
<div className="flex-1">
<Header />

<main className="max-w-[100vw]">
<NextSeo {...metadata} />
<main className="max-w-[100vw]">
<NextSeo {...metadata} />

{/** The Faucet Card */}
<div
className={cx(
'px-4 md:px-12 py-12 max-w-[964px] rounded-2xl mx-auto',
'border-4 border-mono-0 dark:border-mono-170',
'bg-glass dark:bg-glass_dark'
)}
style={{ backdropFilter: 'blur(15px)' }}
>
<div className="max-w-[564px] mx-auto">
{/** Static content */}
<div className="flex flex-col gap-4">
<div>
{/** The Faucet Card */}
<div
className={cx(
'px-4 md:px-12 py-12 max-w-[964px] rounded-2xl mx-auto',
'border-4 border-mono-0 dark:border-mono-170',
'bg-glass dark:bg-glass_dark'
)}
style={{ backdropFilter: 'blur(15px)' }}
>
<div className="max-w-[564px] mx-auto">
{/** Static content */}
<div className="flex flex-col gap-4">
<div>
<Typography
variant="mkt-small-caps"
className="font-black text-center text-blue-70"
>
Get tokens
</Typography>
<Typography
variant="mkt-h3"
className="font-black text-center text-mono-200"
>
Tangle Network Faucet
</Typography>
</div>
<Typography
variant="mkt-small-caps"
className="font-black text-center text-blue-70"
variant="mkt-body1"
className="font-medium text-center text-mono-140"
>
Get tokens
Receive Test Tokens on Devnet and Testnet supported by
Tangle Network and Webb Protocol for development and
experimental purposes.
</Typography>
<Typography
variant="mkt-h3"
className="font-black text-center text-mono-200"
variant="mkt-body1"
className="font-medium text-center text-mono-140"
>
Tangle Network Faucet
Follow <TwitterLink />
{
" 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."
}
</Typography>
</div>
<Typography
variant="mkt-body1"
className="font-medium text-center text-mono-140"
>
Receive Test Tokens on Devnet and Testnet supported by
Tangle Network and Webb Protocol for development and
experimental purposes.
</Typography>
<Typography
variant="mkt-body1"
className="font-medium text-center text-mono-140"
>
Follow <TwitterLink />
{
" 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."
}
</Typography>
</div>

{/** Logic content */}
<div className="mt-16 space-y-8">
<LoginWithTwitter />
<InputsContainer />
{/** Logic content */}
<div className="mt-16 space-y-8">
<LoginWithTwitter />
<InputsContainer />
</div>
</div>
</div>
</div>

<ProcessingModal />
</main>
<ProcessingModal />
</main>
</div>

<Footer isMinimal isNext className="py-12 mx-auto" />
<Footer isMinimal isNext className="py-12 w-full" />
</div>
</main>
</div>
Expand Down
5 changes: 4 additions & 1 deletion apps/hubble-stats/app/pool/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -36,7 +37,9 @@ export default function Pool({ params }: { params: { slug: string } }) {
};

return (
<div className="py-4 space-y-8">
<div className="pb-4 space-y-6">
<Breadcrumbs className="lg:hidden" />

<div className="grid grid-cols-1 items-end lg:grid-cols-[auto_minmax(0,_1fr)_minmax(0,_1fr)] gap-4">
<PoolInfoCardContainer
poolAddress={poolAddress}
Expand Down
8 changes: 4 additions & 4 deletions apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ import { usePathname } from 'next/navigation';
import { useMemo, type FC } from 'react';

import { VANCHORS_MAP } from '../../constants';
import { BreadcrumbType } from './types';
import type { BreadcrumbsType, BreadcrumbItemType } from './types';

const Breadcrumbs: FC = () => {
const Breadcrumbs: FC<BreadcrumbsType> = ({ className }) => {
const pathname = usePathname();

const breadCrumbs = useMemo<BreadcrumbType[]>(() => {
const breadCrumbs = useMemo<BreadcrumbItemType[]>(() => {
// check if current path is /pool/<0x...>
if (/^\/pool\/0x\w+/.test(pathname)) {
const poolAddress = pathname.split('/')[2];
Expand Down Expand Up @@ -49,7 +49,7 @@ const Breadcrumbs: FC = () => {
}, [pathname]);

return (
<BreadcrumbsCmp>
<BreadcrumbsCmp className={className}>
{breadCrumbs.map((breadcrumb, index) => (
/**
* Data on the client-side needs to be up-to-date when the user navigates to a page
Expand Down
Loading

0 comments on commit 79bbccf

Please sign in to comment.