fix: twitter screen name too long (#19)

src/components/StakeMaskStatusCard/index.tsx

@@ -170,7 +170,7 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
             spacing={6}
           >
             {pool?.apr ? (
-              <Tooltip label={formatNumber(+pool.apr * 100, 18)}>
+              <Tooltip label={`${formatNumber(+pool.apr * 100, 18)}%`}>
                 <Box
                   h="56px"
                   fontSize="32px"

src/components/TextOverflowTooltip.tsx

@@ -0,0 +1,19 @@
+import { cloneElement, memo, type ReactElement } from 'react'
+import { Tooltip, TooltipProps } from '@chakra-ui/react'
+import { useDetectOverflow } from '../hooks/useDetectOverflow'
+
+interface TextOverflowTooltipProps extends TooltipProps {
+  children: ReactElement
+}
+
+export const TextOverflowTooltip = memo(({ children, ...rest }: TextOverflowTooltipProps) => {
+  const [overflow, ref] = useDetectOverflow()
+
+  return (
+    <Tooltip {...rest} label={overflow ? rest.label : ''}>
+      {cloneElement(children, { ...children.props, ref })}
+    </Tooltip>
+  )
+})
+
+TextOverflowTooltip.displayName = 'TextOverflowTooltip'

src/components/UserStatus/UserTotalPoint.tsx

@@ -1,33 +1,48 @@
 import { Image, VStack, Text, Box, StackProps } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
 import { UserInfo } from '../../types/api'
+import { TextOverflowTooltip } from '../TextOverflowTooltip'
 
 interface Props extends StackProps {
   user: UserInfo
 }
 
 export function UserTotalPoints({ user, ...props }: Props) {
   return (
-    <VStack {...props}>
-      <Box flexDir="row" w="100%">
+    <VStack overflow="hidden" {...props}>
+      <Box flexDir="row" w="100%" pl="100px" pos="relative">
         <Image
           position="absolute"
+          left={0}
           width={100}
           height={100}
+          border="2px solid"
+          borderColor="gradient.purple"
           borderRadius="50%"
           objectFit="cover"
           draggable={false}
           userSelect="none"
-          src={user.twitter_image || new URL('../../assets/default-avatar.svg', import.meta.url).href}
+          src={user.twitter_image}
+          fallbackSrc={new URL('../../assets/default-avatar.svg', import.meta.url).href}
           alt="user name"
         />
-        <Text fontSize="xx-large" textAlign="right" fontWeight="bold">
-          {user.twitter_display_name || 'N/A'}
-        </Text>
+        <TextOverflowTooltip label={user.twitter_display_name} hasArrow placement="top">
+          <Text
+            fontSize="xx-large"
+            textAlign="right"
+            fontWeight="bold"
+            textOverflow="ellipsis"
+            whiteSpace="nowrap"
+            overflow="hidden"
+          >
+            {user.twitter_display_name || 'N/A'}
+          </Text>
+        </TextOverflowTooltip>
       </Box>
       <Box
         w="100%"
-        h="120px"
+        h="132px"
+        mt="14px"
         boxSizing="border-box"
         flexDir="column"
         rounded={16}

src/components/UserStatus/index.tsx

@@ -12,9 +12,9 @@ export interface UserStatusProps extends GridProps {}
 export function UserStatus(props: UserStatusProps) {
   const { address } = useAccount()
   const store = usePoolStore()
-  const { data } = useUserInfo(address, store.poolId)
+  const { data: userInfo } = useUserInfo(address, store.poolId)
 
-  if (!data)
+  if (!userInfo)
     return (
       <Grid
         gap={6}
@@ -46,10 +46,10 @@ export function UserStatus(props: UserStatusProps) {
       maxW="maxW"
       {...props}
     >
-      <UserTotalPoints flexGrow={1} flexBasis={0} user={data.data} />
-      <StakedMask alignSelf="stretch" flexGrow={1} flexBasis={0} />
-      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} flexGrow={1} flexBasis={0} />
-      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} flexGrow={1} flexBasis={0} />
+      <UserTotalPoints user={userInfo} />
+      <StakedMask alignSelf="stretch" />
+      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} />
+      <RewardCard alignSelf="stretch" title={t`Estimated Rewards`} />
     </Grid>
   )
 }

src/hooks/useDetectOverflow.ts

@@ -0,0 +1,10 @@
+import { useState, useCallback } from 'react'
+
+export function useDetectOverflow<T extends HTMLDivElement>(): [overflow: boolean, ref: (node: T | null) => void] {
+  const [overflow, setOverflow] = useState(false)
+  const ref = useCallback((node: T | null) => {
+    if (node) setOverflow(node.offsetWidth !== node.scrollWidth)
+  }, [])
+
+  return [overflow, ref]
+}

src/hooks/useUserInfo.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../helpers/fetchJSON'
 import { FIREFLY_API_ROOT } from '../constants/api'
-import { UserInfoResponse } from '../types/api'
+import { UserInfo, UserInfoResponse } from '../types/api'
 import urlcat from 'urlcat'
 
 export function useUserInfo(address: string | undefined, pool_id: number | null) {
@@ -15,5 +15,12 @@ export function useUserInfo(address: string | undefined, pool_id: number | null)
       })
       return fetchJSON<UserInfoResponse>(url)
     },
+    select(res) {
+      if (!res.data) return res.data
+      return {
+        ...res.data,
+        twitter_image: res.data.twitter_image.replace(/_normal.(jpe?g|png|gif|bmp)/, '_400x400.$1'),
+      } as UserInfo
+    },
   })
 }

src/modals/BaseModal.tsx

@@ -27,7 +27,6 @@ interface Props extends ModalProps {
 }
 export function BaseModal({ title, width, height, ...rest }: Props) {
   const isMobile = useBreakpointValue({ base: true, md: false })
-  console.log({ isMobile })
   const header = (
     <>
       <Text fontSize="32px">{title}</Text>

src/modals/CookiePolicyModal.tsx

@@ -10,14 +10,14 @@ const CookiePolicyContent = () => (
       <br />
       {t`Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.`}
     </p>
-    <p>
+    <div>
       {t`Types of Cookies We Use`}
       <ul>
         <li>{t`Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.`}</li>
         <li>{t`Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.`}</li>
         <li>{t`Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.`}</li>
       </ul>
-    </p>
+    </div>
     <p>
       {t`How to Control Cookies`}
       <br />

src/modals/StakeModal.tsx

@@ -17,22 +17,24 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import { Trans, t } from '@lingui/macro'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { useAccount, useBalance } from 'wagmi'
 import { StepIcon } from '../components/StepIcon'
 import { TokenIcon } from '../components/TokenIcon'
+import { Tooltip } from '../components/Tooltip.tsx'
 import { formatNumber } from '../helpers/formatNumber'
 import { useLinkTwitter } from '../hooks/useLinkTwitter'
 import { usePoolInfo } from '../hooks/usePoolInfo'
 import { usePoolStore } from '../store/poolStore'
-import { Tooltip } from '../components/Tooltip.tsx'
 import { BaseModal } from './BaseModal'
 
 interface Props extends ModalProps {}
 
 export function StakeModal(props: Props) {
   const account = useAccount()
+  const { openConnectModal } = useConnectModal()
   const { data: pool } = usePoolInfo()
   const { maskTokenAddress } = usePoolStore()
   const [amount, setAmount] = useState('')
@@ -55,6 +57,9 @@ export function StakeModal(props: Props) {
                 ml="auto"
                 fontSize={14}
                 rounded={24}
+                onClick={() => {
+                  openConnectModal?.()
+                }}
               >{t`Connect Wallet`}</Button>
             )}
           </ListItem>