antoncoding · antoncoding · Sep 21, 2024
diff --git a/app/global.css b/app/global.css
@@ -58,14 +58,6 @@ html {
   scroll-behavior: smooth;
 }
 
-html .font-zen {
-  font-family: var(--font-zen);
-}
-
-html .font-inter {
-  font-family: var(--font-inter);
-}
-
 body {
   height: auto;
   min-height: 100%;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,10 +25,10 @@ initAnalytics();
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${zen.variable} ${inter.variable} ${monospace.variable}`}>
-      <head>
+      {/* <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-      </head>
+      </head> */}
       <body>
         <Providers>
           <OnchainProviders>{children}</OnchainProviders>

diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
@@ -80,7 +80,7 @@ export default function Positions() {
         </div>
         <div className="flex justify-center pt-8">
           <PrimaryButton href="/positions" isSecondary>
-              Search Address
+            Search Address
           </PrimaryButton>
         </div>
       </div>

diff --git a/src/components/common/PrimaryButton.tsx b/src/components/common/PrimaryButton.tsx
@@ -5,17 +5,24 @@ type PrimaryButtonProps = {
   children: React.ReactNode;
   className?: string;
   isSecondary?: boolean;
-}
+};
 
-export default function PrimaryButton({ href, children, className = '', isSecondary }: PrimaryButtonProps) {
+export default function PrimaryButton({
+  href,
+  children,
+  className = '',
+  isSecondary,
+}: PrimaryButtonProps) {
   return (
     <Link href={href}>
       <button
         type="button"
-        className={`${isSecondary ? 'bg-secondary' : 'bg-monarch-orange'} rounded-sm p-4 px-10 font-zen opacity-80 transition-all duration-200 ease-in-out hover:opacity-100 ${className}`}
+        className={`${
+          isSecondary ? 'bg-secondary' : 'bg-monarch-orange'
+        } rounded-sm p-4 px-10 font-zen opacity-80 transition-all duration-200 ease-in-out hover:opacity-100 ${className}`}
       >
         {children}
       </button>
     </Link>
   );
-}
+}
diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
@@ -9,6 +9,7 @@ import { FaRegMoon, FaSun } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
 import logo from '../../imgs/logo.png';
 import AccountConnect from './AccountConnect';
+import { usePathname } from 'next/navigation';
 
 export function NavbarLink({
   href,
@@ -21,10 +22,17 @@ export function NavbarLink({
   target?: string;
   ariaLabel?: string;
 }) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
   return (
     <NextLink
       href={href}
-      className="px-0 text-center font-inter text-base font-normal text-primary no-underline"
+      className={clsx(
+        'px-2 py-1 text-center font-inter font-zen text-base font-normal text-primary no-underline',
+        'relative after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-out',
+        isActive && 'after:origin-bottom-left after:scale-x-100',
+      )}
       target={target}
       aria-label={ariaLabel}
     >
@@ -58,29 +66,21 @@ function Navbar() {
     <nav
       className={clsx(
         'flex flex-1 flex-grow items-center justify-between',
-        'rounded-[5px] bg-secondary p-4 backdrop-blur-2xl',
+        'rounded-[5px] bg-secondary p-4 shadow-sm backdrop-blur-2xl',
       )}
     >
       <div className="flex h-8 grow items-center justify-between gap-2">
         <NavbarTitle />
         <div className="flex items-center justify-start gap-8">
-          <ul className="hidden items-center justify-start gap-8 font-zen md:flex">
+          <ul className="hidden items-center justify-start gap-4 text-opacity-80 md:flex">
             <li className="flex">
-              <NavbarLink href="/markets">
-                {' '}
-                <p className="text-base opacity-80 hover:opacity-100"> Markets </p>{' '}
-              </NavbarLink>
+              <NavbarLink href="/markets">Markets</NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href={`/positions/${address ?? ''}`}>
-                <p className="text-base opacity-80 hover:opacity-100"> Portfolio </p>{' '}
-              </NavbarLink>
+              <NavbarLink href={`/positions/${address ?? ''}`}>Portfolio</NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href={`/rewards/${address ?? ''}`}>
-                {' '}
-                <p className="text-base opacity-80 hover:opacity-100"> Rewards </p>{' '}
-              </NavbarLink>
+              <NavbarLink href={`/rewards/${address ?? ''}`}>Rewards</NavbarLink>
             </li>
             <li className="flex">
               <NavigationMenu.Root className="relative">

diff --git a/src/imgs/tokens/cbbtc.webp b/src/imgs/tokens/cbbtc.webp
diff --git a/src/imgs/tokens/tbtc.webp b/src/imgs/tokens/tbtc.webp
diff --git a/src/utils/tokens.ts b/src/utils/tokens.ts
@@ -175,6 +175,21 @@ const supportedTokens = [
     decimals: 8,
     networks: [{ chain: mainnet, address: '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599' }],
   },
+  {
+    symbol: 'cbBTC',
+    img: require('../imgs/tokens/cbbtc.webp') as string,
+    decimals: 8,
+    networks: [
+      { chain: mainnet, address: '0xcbB7C0000aB88B473b1f5aFd9ef808440eed33Bf' },
+      { chain: base, address: '0xcbB7C0000aB88B473b1f5aFd9ef808440eed33Bf' },
+    ],
+  },
+  {
+    symbol: 'tBTC',
+    img: require('../imgs/tokens/tbtc.webp') as string,
+    decimals: 8,
+    networks: [{ chain: mainnet, address: '0x18084fbA666a33d37592fA2633fD49a74DD93a88' }],
+  },
   {
     symbol: 'rsETH',
     img: require('../imgs/tokens/rseth.png') as string,