Fix dayjs locale crash and modernize branding

- Preserve default dayjs locale formats (L, LL, LT, LTS, etc.) in
  updateLocale to prevent TypeError on format() calls
- Switch default font from Inter/Poppins to Geist Sans throughout
- Remove gas tracker stats and Add Network button from top bar
- Replace placeholder logo/icon fallbacks with Lux triangle branding

lib/date/dayjs.ts

@@ -39,6 +39,12 @@ dayjs.extend(utc);
 
 dayjs.updateLocale('en', {
   formats: {
+    LT: 'h:mm A',
+    LTS: 'h:mm:ss A',
+    L: 'MM/DD/YYYY',
+    LL: 'MMMM D, YYYY',
+    LLL: 'MMMM D, YYYY h:mm A',
+    LLLL: 'dddd, MMMM D, YYYY h:mm A',
     llll: `MMM DD YYYY HH:mm:ss (Z${ nbsp }UTC)`,
     lll: 'MMM D, YYYY H:mm',
   },

pages/_document.tsx

@@ -36,11 +36,11 @@ class MyDocument extends Document {
         <Head>
           { /* FONTS */ }
           <link
-            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap' }
+            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
           <link
-            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' }
+            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
 

toolkit/theme/foundations/typography.ts

@@ -4,8 +4,8 @@ import type { ExcludeUndefined } from 'types/utils';
 
 import config from 'configs/app';
 
-export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
-export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Inter';
+export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Geist Sans';
+export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Geist Sans';
 
 export const fonts: ExcludeUndefined<ThemingConfig['tokens']>['fonts'] = {
   heading: { value: `${ HEADING_TYPEFACE }, sans-serif` },

ui/snippets/lux-logo.tsx

@@ -7,23 +7,23 @@ interface LuxLogoProps {
   variant?: 'icon' | 'wordmark' | 'full';
 }
 
-export const LuxLogo: React.FC<LuxLogoProps> = ({ 
-  width = 50, 
-  height = 50, 
+export const LuxLogo: React.FC<LuxLogoProps> = ({
+  width = 50,
+  height = 50,
   className = '',
-  variant = 'icon'
+  variant = 'icon',
 }) => {
   // LUX triangle icon (downward-pointing black triangle)
   const renderIcon = () => (
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 50 50" 
-      width={width} 
-      height={height}
-      className={className}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      width={ width }
+      height={ height }
+      className={ className }
     >
-      <polygon 
-        points="25,46.65 50,3.35 0,3.35" 
+      <polygon
+        points="25,46.65 50,3.35 0,3.35"
         fill="currentColor"
       />
     </svg>
@@ -31,18 +31,18 @@ export const LuxLogo: React.FC<LuxLogoProps> = ({
 
   // LUX wordmark in Inter font
   const renderWordmark = () => (
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 100 30" 
-      width={width * 2} 
-      height={height * 0.6}
-      className={className}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 30"
+      width={ width * 2 }
+      height={ height * 0.6 }
+      className={ className }
     >
-      <text 
-        x="0" 
-        y="23" 
-        fontFamily="Inter, sans-serif" 
-        fontSize="28" 
+      <text
+        x="0"
+        y="23"
+        fontFamily="Geist Sans, sans-serif"
+        fontSize="28"
         fontWeight="700"
         letterSpacing="-0.02em"
         fill="currentColor"
@@ -54,24 +54,24 @@ export const LuxLogo: React.FC<LuxLogoProps> = ({
 
   // Full logo with icon and wordmark
   const renderFull = () => (
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 150 50" 
-      width={width * 3} 
-      height={height}
-      className={className}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 150 50"
+      width={ width * 3 }
+      height={ height }
+      className={ className }
     >
-      {/* Triangle icon */}
-      <polygon 
-        points="25,46.65 50,3.35 0,3.35" 
+      { /* Triangle icon */ }
+      <polygon
+        points="25,46.65 50,3.35 0,3.35"
         fill="currentColor"
       />
-      {/* Wordmark */}
-      <text 
-        x="60" 
-        y="35" 
-        fontFamily="Inter, sans-serif" 
-        fontSize="32" 
+      { /* Wordmark */ }
+      <text
+        x="60"
+        y="35"
+        fontFamily="Geist Sans, sans-serif"
+        fontSize="32"
         fontWeight="700"
         letterSpacing="-0.02em"
         fill="currentColor"
@@ -97,13 +97,13 @@ export const LuxEmoji = () => '▼';
 
 // Export variants for easy use
 export const LuxIcon = (props: Omit<LuxLogoProps, 'variant'>) => (
-  <LuxLogo {...props} variant="icon" />
+  <LuxLogo { ...props } variant="icon"/>
 );
 
 export const LuxWordmark = (props: Omit<LuxLogoProps, 'variant'>) => (
-  <LuxLogo {...props} variant="wordmark" />
+  <LuxLogo { ...props } variant="wordmark"/>
 );
 
 export const LuxFullLogo = (props: Omit<LuxLogoProps, 'variant'>) => (
-  <LuxLogo {...props} variant="full" />
-);
+  <LuxLogo { ...props } variant="full"/>
+);

ui/snippets/networkLogo/NetworkIcon.tsx

@@ -6,19 +6,14 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { Image } from 'toolkit/chakra/image';
-import IconSvg from 'ui/shared/IconSvg';
 
 import { INVERT_FILTER } from './consts';
 
 const IconFallback = () => {
   return (
-    <IconSvg
-      name="networks/icon-placeholder"
-      w="30px"
-      h="30px"
-      color={{ base: 'blue.600', _dark: 'white' }}
-      aria-label="Network icon placeholder"
-    />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30" height="30" aria-label="LUX Network icon">
+      <polygon points="25,46.65 50,3.35 0,3.35" fill="currentColor"/>
+    </svg>
   );
 };
 

ui/snippets/networkLogo/NetworkLogo.tsx

@@ -1,4 +1,4 @@
-import { chakra } from '@chakra-ui/react';
+import { chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -6,19 +6,19 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { Image } from 'toolkit/chakra/image';
-import IconSvg from 'ui/shared/IconSvg';
 
 import { INVERT_FILTER } from './consts';
 
 const LogoFallback = () => {
   return (
-    <IconSvg
-      name="networks/logo-placeholder"
-      width="120px"
-      height="24px"
-      color={{ base: 'blue.600', _dark: 'white' }}
-      aria-label="Network logo placeholder"
-    />
+    <Flex alignItems="center" gap="8px" height="24px">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24" height="24">
+        <polygon points="25,46.65 50,3.35 0,3.35" fill="currentColor"/>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30" width="72" height="20">
+        <text x="0" y="23" fontFamily="Geist Sans, sans-serif" fontSize="28" fontWeight="700" letterSpacing="-0.02em" fill="currentColor">LUX</text>
+      </svg>
+    </Flex>
   );
 };
 

ui/snippets/topBar/TopBar.tsx

@@ -2,41 +2,15 @@ import { Flex, Separator, Box, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import useProvider from 'lib/web3/useProvider';
 import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
-import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import DeFiDropdown from './DeFiDropdown';
 import NetworkMenu from './NetworkMenu';
 import Settings from './settings/Settings';
-import TopBarStats from './TopBarStats';
 
 const TopBar = () => {
-  const hideAddToWalletButtonCookie = cookies.get(cookies.NAMES.HIDE_ADD_TO_WALLET_BUTTON, useAppContext().cookies);
-  const [ isAddChainButtonVisible, setIsAddChainButtonVisible ] = React.useState(hideAddToWalletButtonCookie !== 'topbar');
-
-  const web3 = useProvider();
-  const isMobile = useIsMobile();
-
-  const hasAddChainButton = Boolean(
-    isAddChainButtonVisible &&
-    web3.data?.provider &&
-    web3.data?.wallet &&
-    config.chain.rpcUrls.length &&
-    config.features.web3Wallet.isEnabled &&
-    !config.features.opSuperchain.isEnabled &&
-    !isMobile,
-  );
   const hasDeFiDropdown = Boolean(config.features.deFiDropdown.isEnabled);
 
-  const handleAddSuccess = React.useCallback(() => {
-    cookies.set(cookies.NAMES.HIDE_ADD_TO_WALLET_BUTTON, 'topbar', { expires: 3 * 365 });
-    setIsAddChainButtonVisible(false);
-  }, [ ]);
-
   return (
     // not ideal if scrollbar is visible, but better than having a horizontal scroll
     <Box bgColor={{ _light: 'theme.topbar.bg._light', _dark: 'theme.topbar.bg._dark' }} position="sticky" left={ 0 } width="100%" maxWidth="100vw">
@@ -50,16 +24,14 @@ const TopBar = () => {
       >
         <HStack gap={ 0 } fontSize="xs">
           { Boolean(config.UI.featuredNetworks.items) && <NetworkMenu/> }
-          { !config.features.opSuperchain.isEnabled ? <TopBarStats/> : <div/> }
         </HStack>
         <HStack
           alignItems="center"
           separator={ <Separator mx={{ base: 2, lg: 3 }} height={ 4 }/> }
         >
-          { (hasAddChainButton || hasDeFiDropdown) && (
+          { hasDeFiDropdown && (
             <HStack>
-              { hasAddChainButton && <NetworkAddToWallet source="Top bar" onAddSuccess={ handleAddSuccess }/> }
-              { hasDeFiDropdown && <DeFiDropdown/> }
+              <DeFiDropdown/>
             </HStack>
           ) }
           <Settings/>