fix: connect button

bob-collective · Dec 12, 2024 · 6ad8272 · 6ad8272
1 parent 91c746c
commit 6ad8272
Show file tree

Hide file tree

Showing 18 changed files with 164 additions and 127 deletions.
diff --git a/apps/evm/public/assets/fonts/eurostar-black-extended.ttf b/apps/evm/public/assets/fonts/eurostar-black-extended.ttf
diff --git a/apps/evm/src/app/[lang]/index.css b/apps/evm/src/app/[lang]/index.css
@@ -1,8 +1,3 @@
-@font-face {
-  font-family: eurostar;
-  src: url(/assets/fonts/eurostar-black-extended.ttf);
-}
-
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

diff --git a/apps/evm/src/app/[lang]/layout.tsx b/apps/evm/src/app/[lang]/layout.tsx
@@ -1,25 +1,22 @@
+import { t } from '@lingui/macro';
 import { Metadata } from 'next';
 import { headers } from 'next/headers';
-import { Inter, Chakra_Petch } from 'next/font/google';
-import { PropsWithChildren } from 'react';
-import { t } from '@lingui/macro';
 import { userAgentFromString } from 'next/server';
+import { PropsWithChildren } from 'react';
 import { cookieToInitialState } from 'wagmi';
 
+import './index.css';
+import { inter } from '../fonts';
 import linguiConfig from '../../../lingui.config';
 
-import './index.css';
 import { Providers } from './providers';
 
+import { isProd } from '@/constants';
 import { allMessages, getI18nInstance } from '@/i18n/appRouterI18n';
 import { LinguiClientProvider } from '@/i18n/provider';
 import { PageLangParam, withLinguiLayout } from '@/i18n/withLigui';
-import { UserAgentProvider } from '@/user-agent/provider';
 import { getConfig } from '@/lib/wagmi';
-import { isProd } from '@/constants';
-
-const inter = Inter({ subsets: ['latin'], display: 'swap' });
-const chakraPetch = Chakra_Petch({ subsets: ['latin'], display: 'swap', weight: '700' });
+import { UserAgentProvider } from '@/user-agent/provider';
 
 export async function generateStaticParams() {
   return linguiConfig.locales.map((lang) => ({ lang }));
@@ -69,7 +66,7 @@ export default withLinguiLayout(function LangLayout({ children, params: { lang }
   const initialState = cookieToInitialState(getConfig({ isProd }), headers().get('cookie'));
 
   return (
-    <html className={`${inter.className} ${chakraPetch.className}`} lang={lang}>
+    <html className={inter.className} lang={lang}>
       <body>
         <div id='root'>
           <LinguiClientProvider initialLocale={lang} initialMessages={allMessages[lang]!}>

diff --git a/apps/evm/src/app/[lang]/sign-up/SignUp.style.tsx b/apps/evm/src/app/[lang]/sign-up/SignUp.style.tsx
@@ -4,10 +4,10 @@ import styled, { css } from 'styled-components';
 const StyledH1 = styled(H1)`
   ${({ theme }) => {
     return css`
-      ${theme.typography('2xl')}
+      ${theme.typography('3xl')}
 
       @media ${theme.breakpoints.up('s')} {
-        ${theme.typography('3xl')}
+        ${theme.typography('4xl')}
       }
     `;
   }}

diff --git a/apps/evm/src/app/[lang]/sign-up/SignUp.tsx b/apps/evm/src/app/[lang]/sign-up/SignUp.tsx
@@ -17,6 +17,7 @@ import { RoutesPath } from '@/constants';
 import { useGetUser, useSignUp } from '@/hooks';
 import { fusionKeys } from '@/lib/react-query';
 import { apiClient } from '@/utils';
+import { chakraPetch } from '@/app/fonts';
 
 const SignUp = (): JSX.Element | null => {
   const { address } = useAccount();
@@ -95,7 +96,7 @@ const SignUp = (): JSX.Element | null => {
             paddingY={{ base: '4xl', md: '6xl' }}
           >
             <Flex alignItems='center' direction='column' gap='2xl' justifyContent='center'>
-              <StyledH1 align='center' fontFamily='eurostar' weight='bold'>
+              <StyledH1 align='center' style={chakraPetch.style} weight='bold'>
                 <Trans>THE FIRST HYBRID L2</Trans>
                 <br />
                 <HighlightText display='block'>

diff --git a/apps/evm/src/app/fonts.ts b/apps/evm/src/app/fonts.ts
@@ -0,0 +1,5 @@
+import { Chakra_Petch, Inter } from 'next/font/google';
+
+export const inter = Inter({ subsets: ['latin'], display: 'swap' });
+
+export const chakraPetch = Chakra_Petch({ subsets: ['latin'], display: 'swap', weight: '700' });
diff --git a/apps/evm/src/components/ConnectButton/ConnectButton.style.tsx b/apps/evm/src/components/ConnectButton/ConnectButton.style.tsx
@@ -56,4 +56,46 @@ const StyledMobileContentWrapper = styled.div`
   }}
 `;
 
-export { StyledContent, StyledUnderlay, StyledMobileContentWrapper };
+const StyledTrigger = styled(Drawer.Trigger)`
+  background-color: transparent;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  appearance: none;
+  text-align: left;
+  text-decoration: none;
+  color: inherit;
+  touch-action: manipulation;
+  align-items: center;
+  justify-content: center;
+  border: 0px solid;
+  white-space: nowrap;
+
+  user-select: none;
+
+  ${({ theme }) => {
+    const { hover } = theme.button.variant.ghost.color.default;
+
+    return css`
+      ${theme.button.base}
+      ${theme.button.size.s}
+      ${theme.button.variant.ghost.color.default.base}
+      &:hover:not([disabled]) {
+        ${hover}
+      }
+
+      &:active:not([disabled]) {
+        ${theme.button.active}
+      }
+
+      &[aria-disabled='true'],
+      &[disabled] {
+        pointer-events: none;
+        cursor: not-allowed;
+        ${theme.button.disabled}
+      }
+    `;
+  }}
+`;
+
+export { StyledContent, StyledTrigger, StyledUnderlay, StyledMobileContentWrapper };
diff --git a/apps/evm/src/components/ConnectButton/ConnectButton.tsx b/apps/evm/src/components/ConnectButton/ConnectButton.tsx
@@ -13,7 +13,7 @@ import { useAccount } from 'wagmi';
 import { ProfileDrawer } from '../ProfileDrawer';
 import { ProfileTag } from '../ProfileTag';
 
-import { StyledContent, StyledMobileContentWrapper, StyledUnderlay } from './ConnectButton.style';
+import { StyledContent, StyledMobileContentWrapper, StyledTrigger, StyledUnderlay } from './ConnectButton.style';
 
 import { useBtcAccount } from '@/hooks';
 import { store } from '@/lib/store';
@@ -57,11 +57,9 @@ const ConnectButton = (): JSX.Element => {
       open={isOpen}
       onOpenChange={setOpen}
     >
-      <Drawer.Trigger asChild>
-        <Button disabled={isLoading} variant='ghost'>
-          <ProfileTag hideAddress={isMobile} size='s' />
-        </Button>
-      </Drawer.Trigger>
+      <StyledTrigger disabled={isLoading}>
+        <ProfileTag hideAddress={isMobile} size='s' />
+      </StyledTrigger>
       <Drawer.Portal>
         <StyledUnderlay />
         <StyledContent>

diff --git a/apps/evm/src/components/Layout/Header.tsx b/apps/evm/src/components/Layout/Header.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   EllipsisHorizontal,
   Flex,
-  FlexProps,
   Popover,
   PopoverBody,
   PopoverContent,
@@ -30,13 +29,7 @@ import { NavItem } from './NavItem';
 import { DocsLinks, RoutesPath } from '@/constants';
 import { useUserAgent } from '@/user-agent';
 
-type Props = { isTestnet?: boolean; isFusion?: boolean };
-
-type InheritAttrs = Omit<FlexProps, keyof Props | 'children'>;
-
-type HeaderProps = Props & InheritAttrs;
-
-const Header = ({ isTestnet, isFusion, ...props }: HeaderProps): JSX.Element => {
+const Header = (): JSX.Element => {
   const { i18n } = useLingui();
 
   const { setSidebarOpen } = useLayoutContext();
@@ -49,7 +42,7 @@ const Header = ({ isTestnet, isFusion, ...props }: HeaderProps): JSX.Element =>
   const isMobile = isMobileViewport || isMobileUserAgent;
 
   return (
-    <StyledHeader alignItems='center' elementType='header' justifyContent='space-between' {...props}>
+    <StyledHeader alignItems='center' elementType='header' justifyContent='space-between'>
       <StyledLogoWrapper alignItems='center' gap='md'>
         <Button
           isIconOnly
@@ -60,7 +53,7 @@ const Header = ({ isTestnet, isFusion, ...props }: HeaderProps): JSX.Element =>
         >
           <Bars3 size='lg' />
         </Button>
-        <Logo hidden={isMobile} href={RoutesPath.HOME} isFusion={isFusion} isTestnet={isTestnet} />
+        <Logo hidden={isMobile} href={RoutesPath.HOME} />
       </StyledLogoWrapper>
       <Flex alignItems='center' elementType='header' gap='xl' justifyContent='flex-end'>
         <Nav hidden={isMobile}>
@@ -115,7 +108,6 @@ const Header = ({ isTestnet, isFusion, ...props }: HeaderProps): JSX.Element =>
         <SocialsGroup hidden={isMobile} variant='ghost' />
         <FusionPopover />
         <ConnectButton />
-        {/* <DynamicWidget /> */}
       </Flex>
     </StyledHeader>
   );

diff --git a/apps/evm/src/components/Layout/Sidebar.tsx b/apps/evm/src/components/Layout/Sidebar.tsx
@@ -14,11 +14,7 @@ import { NavItem } from './NavItem';
 
 import { DocsLinks, RoutesPath } from '@/constants';
 
-type Props = { isTestnet?: boolean; isFusion?: boolean };
-
-type SidebarProps = Props;
-
-const Sidebar = ({ isTestnet, isFusion }: SidebarProps): JSX.Element | null => {
+const Sidebar = (): JSX.Element | null => {
   const { isSidebarOpen, setSidebarOpen } = useLayoutContext();
   const theme = useTheme();
 
@@ -31,7 +27,7 @@ const Sidebar = ({ isTestnet, isFusion }: SidebarProps): JSX.Element | null => {
       <StyledDrawer elementType='nav' isOpen={isSidebarOpen} onClose={handleClose}>
         <Flex direction='column' flex={1} gap='4xl' padding='2xl'>
           <Flex alignItems='center' justifyContent='space-between'>
-            <Logo href={RoutesPath.HOME} isFusion={isFusion} isTestnet={isTestnet} onPress={handleClose} />
+            <Logo href={RoutesPath.HOME} onPress={handleClose} />
             <Button isIconOnly variant='ghost' onPress={handleClose}>
               <XMark size='s' />
             </Button>

diff --git a/apps/evm/src/components/Logo/Logo.tsx b/apps/evm/src/components/Logo/Logo.tsx
@@ -7,9 +7,9 @@ import { useParams } from 'next/navigation';
 
 import { StyledBadge, StyledLogo } from './Logo.style';
 
+import { isProd } from '@/constants';
+
 type Props = {
-  isTestnet?: boolean;
-  isFusion?: boolean;
   onPress?: () => void;
   hidden?: boolean;
 };
@@ -18,7 +18,7 @@ type InheritAttrs = Omit<LinkProps, keyof Props | 'children'>;
 
 type LogoProps = Props & InheritAttrs;
 
-const Logo = ({ isTestnet, isFusion, href = '/', onPress, hidden, ...props }: LogoProps) => {
+const Logo = ({ href = '/', onPress, hidden, ...props }: LogoProps) => {
   const { i18n } = useLingui();
   const params = useParams();
 
@@ -36,13 +36,8 @@ const Logo = ({ isTestnet, isFusion, href = '/', onPress, hidden, ...props }: Lo
         <Span size='xl' weight='bold'>
           <Trans>BOB</Trans>
         </Span>
-        {isFusion && (
-          <Span color='primary-500' fontFamily='eurostar' size='xl' weight='bold'>
-            <Trans>FUSION</Trans>
-          </Span>
-        )}
       </StyledLogo>
-      {isTestnet && (
+      {!isProd && (
         <StyledBadge size='xs' weight='semibold'>
           <Trans>Testnet</Trans>
         </StyledBadge>

diff --git a/apps/evm/src/components/ProfileDrawer/ProfileDrawer.tsx b/apps/evm/src/components/ProfileDrawer/ProfileDrawer.tsx
@@ -14,6 +14,7 @@ import { ProfileTokenList } from './ProfileTokenList';
 import { L1_CHAIN } from '@/constants';
 import { useBtcAccount, useTotalBalance } from '@/hooks';
 import { store } from '@/lib/store';
+import { chakraPetch } from '@/app/fonts';
 
 type ProfileDrawerProps = {
   onClose: () => void;
@@ -82,7 +83,7 @@ const ProfileDrawer = ({ onClose }: ProfileDrawerProps): JSX.Element => {
       {isBalancePending ? (
         <Skeleton height='4xl' width='10rem' />
       ) : (
-        <P size='2xl' style={{ fontFamily: 'eurostar' }} weight='bold'>
+        <P className={chakraPetch.className} size='3xl' weight='bold'>
           {formatted}
         </P>
       )}

diff --git a/apps/evm/src/components/ProfileTag/ProfileTag.tsx b/apps/evm/src/components/ProfileTag/ProfileTag.tsx
@@ -69,9 +69,10 @@ const ProfileTag = ({
           asset={<ProfileAvatar name={user.userId} size={sizeMap[size].icon} />}
           chainId={chain?.id}
           chainProps={{ size: sizeMap[size].chain }}
+          style={{ pointerEvents: 'none' }}
         />
       ) : undefined}
-      {!hideAddress && isCopyEnabled ? (
+      {hideAddress ? undefined : isCopyEnabled ? (
         <CopyAddress
           {...labelProps}
           address={address || ''}