V2 ChainButton, WalletButton and LoadingPill

apps/bridge-dapp/src/components/Header/Header.tsx

@@ -1,26 +1,30 @@
 import { useWebContext } from '@webb-tools/api-provider-environment';
+import { ContrastTwoLine } from '@webb-tools/icons';
 import {
   Breadcrumbs,
   BreadcrumbsItem,
   Button,
+  ChainButton,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuTrigger,
+  useWebbUI,
 } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useMemo } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { useConnectWallet } from '../../hooks';
-import { ChainSwitcherButton } from './ChainSwitcherButton';
-import { WalletButton } from './WalletButton';
+import { ChainListCardWrapper } from '../ChainListCardWrapper';
+import { WalletDropdown } from './WalletDropdown';
 import { HeaderProps } from './types';
-import { ContrastTwoLine } from '@webb-tools/icons';
 
 /**
  * The statistic `Header` for `Layout` container
  */
 export const Header: FC<HeaderProps> = () => {
   const { activeAccount, activeWallet, activeChain, loading } = useWebContext();
 
+  const { setMainComponent } = useWebbUI();
+
   const { toggleModal } = useConnectWallet();
 
   // On connect wallet button click - connect to the default chain(ETH Goerli)
@@ -35,7 +39,7 @@ export const Header: FC<HeaderProps> = () => {
   );
 
   return (
-    <header className="pt-6 pb-10 px-4">
+    <header className="px-4 pt-6 pb-10">
       <div className="flex justify-between max-w-[1160px] h-[40px] mx-auto">
         <Breadcrumbs>
           <NavLink to="/bridge">
@@ -53,10 +57,15 @@ export const Header: FC<HeaderProps> = () => {
           {/** Wallet is actived */}
           {isDisplayNetworkSwitcherAndWalletButton &&
           activeAccount &&
-          activeWallet ? (
+          activeWallet &&
+          activeChain ? (
             <div className="hidden lg:!flex items-center space-x-2">
-              <ChainSwitcherButton />
-              <WalletButton account={activeAccount} wallet={activeWallet} />
+              <ChainButton
+                chain={activeChain}
+                status="success"
+                onClick={() => setMainComponent(<ChainListCardWrapper />)}
+              />
+              <WalletDropdown account={activeAccount} wallet={activeWallet} />
             </div>
           ) : (
             <Button

apps/bridge-dapp/src/components/Header/WalletButton.tsx → apps/bridge-dapp/src/components/Header/WalletDropdown.tsx

@@ -3,6 +3,7 @@ import { Account } from '@webb-tools/abstract-api-provider';
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import { downloadString } from '@webb-tools/browser-utils';
 import { ManagedWallet, WalletConfig } from '@webb-tools/dapp-config';
+import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types';
 import {
   ExternalLinkLine,
   LoginBoxLineIcon,
@@ -11,26 +12,24 @@ import {
 } from '@webb-tools/icons';
 import { useNoteAccount, useWallets } from '@webb-tools/react-hooks';
 import { Note } from '@webb-tools/sdk-core';
+import { WebbWeb3Provider, isViemError } from '@webb-tools/web3-api-provider';
 import {
   Avatar,
   Button,
   Dropdown,
   DropdownBasicButton,
   DropdownBody,
+  IconWithTooltip,
   KeyValueWithButton,
   MenuItem,
-  shortenString,
   Typography,
+  WalletButton,
   useWebbUI,
-  IconWithTooltip,
 } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { ClearDataModal } from './ClearDataModal';
-import { HeaderButton } from './HeaderButton';
-import { WebbWeb3Provider, isViemError } from '@webb-tools/web3-api-provider';
-import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types';
 
-export const WalletButton: FC<{ account: Account; wallet: WalletConfig }> = ({
+export const WalletDropdown: FC<{ account: Account; wallet: WalletConfig }> = ({
   account,
   wallet,
 }) => {
@@ -68,19 +67,6 @@ export const WalletButton: FC<{ account: Account; wallet: WalletConfig }> = ({
     [allNotes]
   );
 
-  const displayText = useMemo(() => {
-    if (account.name) {
-      return account.name;
-    }
-
-    // if account address starts with 0x, then truncate it to xxxx...xxxx
-    if (account.address.toLowerCase().startsWith('0x')) {
-      return shortenString(account.address.substring(2), 4);
-    }
-
-    return shortenString(account.address, 4);
-  }, [account]);
-
   // Get the note account keypair to display public + encryption key
   const keyPair = useMemo(() => noteManager?.getKeypair(), [noteManager]);
 
@@ -192,13 +178,7 @@ export const WalletButton: FC<{ account: Account; wallet: WalletConfig }> = ({
     <>
       <Dropdown>
         <DropdownTrigger asChild>
-          <HeaderButton className="rounded-full">
-            {wallet.Logo}
-
-            <Typography variant="body1" fw="bold">
-              {displayText}
-            </Typography>
-          </HeaderButton>
+          <WalletButton wallet={wallet} address={account.address} />
         </DropdownTrigger>
 
         <DropdownBody className="mt-6 w-[480px] p-4 space-y-4 dark:bg-mono-160">

apps/bridge-dapp/src/components/Header/index.ts

@@ -1,3 +1,2 @@
 export * from './Header';
-export * from './ChainSwitcherButton';
 export * from './WalletModal';

apps/bridge-dapp/tailwind.config.js

@@ -5,6 +5,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const { join } = require('path');
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [preset],
   content: [

apps/hubble-stats/app/layout.tsx

@@ -1,13 +1,15 @@
 'use client';
-
 import {
   WebbUIProvider,
   Footer,
   SideBar,
+  Logo,
+  LogoWithoutName,
 } from '@webb-tools/webb-ui-components';
 import '@webb-tools/webb-ui-components/tailwind.css';
-
+import { WEBB_MKT_URL } from '@webb-tools/webb-ui-components/constants';
 import { Header } from '../components';
+import '@webb-tools/webb-ui-components/tailwind.css';
 import { sideBarProps } from '../constants';
 
 export default function RootLayout({
@@ -21,7 +23,7 @@ export default function RootLayout({
         <body className="h-screen bg-body dark:bg-body_dark bg-cover flex">
           <SideBar {...sideBarProps} className="hidden lg:block" />
           <main className="flex-1 px-3 md:px-5 lg:px-10 overflow-y-auto">
-            <Header />
+            <Header tvlValue="$13,642,124" volumeValue="$8,562,122" />
             {children}
             <Footer isMinimal className="max-w-none" />
           </main>

apps/hubble-stats/components/Header/Header.tsx

@@ -1,3 +1,5 @@
+import { BlockIcon, CoinIcon, ContrastLine, Spinner } from '@webb-tools/icons';
+import { IconBase } from '@webb-tools/icons/types';
 import { FC, useMemo } from 'react';
 import Link from 'next/link';
 import {
@@ -7,34 +9,58 @@ import {
   ChipProps,
   SideBarMenu,
 } from '@webb-tools/webb-ui-components';
-import { BlockIcon, GridFillIcon, Spinner } from '@webb-tools/icons';
-import { IconBase } from '@webb-tools/icons/types';
+import { HeaderProps, Breadcrumb } from './types';
+import { usePathname } from 'next/navigation';
 
 import { sideBarProps } from '../../constants';
 
-const Header = () => {
-  const tvl = useMemo(() => {
-    return 'TVL: $13,642,124';
-  }, []);
+const Header = ({ tvlValue, volumeValue }: HeaderProps) => {
+  const pathname = usePathname();
+
+  const breadCrumbs = useMemo(() => {
+    const parts = pathname.split('/');
+    const activeItem = parts[parts.length - 1];
+
+    const breadCrumbItems: Breadcrumb[] = [
+      {
+        label: 'Hubble Overview',
+        isLast: activeItem !== '' ? false : true,
+        icon: (
+          <ContrastLine className={activeItem !== '' ? 'fill-mono-120' : ''} />
+        ),
+        href: '/',
+      },
+    ];
+
+    if (activeItem !== '') {
+      breadCrumbItems.push({
+        label: activeItem,
+        isLast: true,
+        icon: <CoinIcon />,
+        href: '',
+      });
+    }
 
-  const volume = useMemo(() => {
-    return 'volume: $8,562,122';
-  }, []);
+    return breadCrumbItems;
+  }, [pathname]);
 
   return (
     <div className="flex items-center justify-between pt-6 pb-4">
       {/* Breadcrumbs */}
       <div className="flex gap-2 items-center">
         <SideBarMenu {...sideBarProps} className="lg:hidden" />
         <Breadcrumbs>
-          <Link href="/">
-            <BreadcrumbsItem
-              icon={<GridFillIcon />}
-              className="ml-0 bg-[rgba(156,160,176,0.10)] dark:bg-[rgba(255,255,255,0.05)]"
-            >
-              Hubble Overview
-            </BreadcrumbsItem>
-          </Link>
+          {breadCrumbs.map((breadcrumb, index) => (
+            <Link key={index} href={breadcrumb.href}>
+              <BreadcrumbsItem
+                icon={breadcrumb.icon}
+                className={breadcrumb.className}
+                isLast={breadcrumb.isLast}
+              >
+                {breadcrumb.label}
+              </BreadcrumbsItem>
+            </Link>
+          ))}
         </Breadcrumbs>
       </div>
 
@@ -45,16 +71,16 @@ const Header = () => {
           Icon={BlockIcon}
           iconSize="lg"
           iconClassName="stroke-blue-90 dark:stroke-blue-30"
-          value={tvl}
-          isLoading={tvl ? false : true}
+          value={tvlValue}
+          isLoading={tvlValue ? false : true}
         />
         <VolumeChip
           color="blue"
           Icon={BlockIcon}
           iconSize="lg"
           iconClassName="stroke-blue-90 dark:stroke-blue-30"
-          value={volume}
-          isLoading={volume ? false : true}
+          value={volumeValue}
+          isLoading={volumeValue ? false : true}
         />
       </div>
     </div>

apps/hubble-stats/components/Header/index.ts

@@ -1 +1,2 @@
 export { default as Header } from './Header';
+export * from './types';

apps/hubble-stats/components/Header/types.ts

@@ -0,0 +1,12 @@
+export type Breadcrumb = {
+  label: string;
+  isLast: boolean;
+  icon: JSX.Element;
+  href: string;
+  className?: string;
+};
+
+export type HeaderProps = {
+  tvlValue: string;
+  volumeValue: string;
+};

libs/api-provider-environment/src/WebbProvider.tsx

@@ -620,17 +620,17 @@ const WebbProviderInner: FC<WebbProviderProps> = ({ children, appEvent }) => {
 
               if (currentChainId !== chain.id) {
                 await webbWeb3Provider.switchOrAddChain(chain.id);
-
-                // Emit events
-                appEvent.send('networkSwitched', [
-                  {
-                    chainType: chain.chainType,
-                    chainId: chain.id,
-                  },
-                  wallet.id,
-                ]);
               }
 
+              // Emit events
+              appEvent.send('networkSwitched', [
+                {
+                  chainType: chain.chainType,
+                  chainId: chain.id,
+                },
+                wallet.id,
+              ]);
+
               await setActiveApiWithAccounts(
                 webbWeb3Provider,
                 chain,

libs/dapp-config/src/chains/chain-config.interface.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @webb-tools/
 // SPDX-License-Identifier: Apache-2.0
 
-import { ChainType } from '@webb-tools/sdk-core';
+import { ChainType } from '@webb-tools/sdk-core/typed-chain-id';
 import type { Chain } from '@wagmi/chains';
 
 import { AppEnvironment } from '../types';