merged

src/components/Navbar.tsx

@@ -24,6 +24,8 @@ import CONSTANTS from '@/constants';
 import { getERC20Balance } from '@/store/balance.atoms';
 import { addressAtom } from '@/store/claims.atoms';
 import { referralCodeAtom } from '@/store/referral.store';
+import { MyMenuItemProps, MyMenuListProps, shortAddress, truncate } from '@/utils';
+import { useEffect } from 'react';
 import { lastWalletAtom } from '@/store/utils.atoms';
 import {
   generateReferralCode,
@@ -317,20 +319,20 @@ export default function Navbar(props: NavbarProps) {
               >
                 <Center>
                   {address ? (
-                    <Box display="flex" alignItems="center" gap=".5rem">
+                    <Center display="flex" alignItems="center" gap=".5rem">
                       <Image
                         src={starkProfile?.profilePicture}
                         alt="pfp"
                         width={30}
                         height={30}
                         rounded="full"
                       />{' '}
-                      <h3>
+                      <Text as="h3" marginTop={"3px !important"}>
                         {starkProfile && starkProfile.name
-                          ? starkProfile.name
+                          ? truncate(starkProfile.name, 6, 6)
                           : shortAddress(address)}
-                      </h3>
-                    </Box>
+                      </Text>
+                    </Center>
                   ) : (
                     'Connect'
                   )}

src/utils.ts

@@ -32,7 +32,15 @@ export function capitalize(str: string) {
 
 export function shortAddress(_address: string) {
   const x = num.toHex(num.getDecimalString(_address));
-  return `${x.slice(0, 4)}...${x.slice(x.length - 4, x.length)}`;
+  return truncate(x, 4, 4);
+}
+
+export function truncate(str: string, startChars: number, endChars: number) {
+  if (str.length <= startChars + endChars) {
+    return str;
+  }
+
+  return `${str.slice(0, startChars)}...${str.slice(str.length - endChars, str.length)}`;
 }
 
 export function standariseAddress(address: string | bigint) {