fix some issues hydration crashes

ensdomains · Dec 9, 2024 · 4254f62 · 4254f62
1 parent 5d723e2
commit 4254f62
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 26 deletions.
diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -153,7 +153,7 @@ const HeaderProfile = ({ address }: { address: Address }) => {
                   ),
                   as: 'a' as 'a',
                   color: 'text',
-                  icon: <PersonSVG />,
+                  icon: PersonSVG,
                 },
               ]
             : []),
@@ -166,29 +166,28 @@ const HeaderProfile = ({ address }: { address: Address }) => {
               </BaseLink>
             ),
             as: 'a',
-            icon: <CogSVG />,
+            icon: CogSVG,
             showIndicator: hasPendingTransactions,
           },
           <SectionDivider key="divider" />,
           {
             label: shortenAddress(address),
             color: 'text',
             onClick: () => copy(address),
-            icon: copied ? <CheckSVG /> : <CopySVG />,
+            icon: copied ? CheckSVG : CopySVG,
           },
           {
             label: t('wallet.disconnect'),
             color: 'red',
             onClick: () => disconnect(),
-            icon: <ExitSVG />,
+            icon: ExitSVG,
           },
         ] as DropdownItem[]
       }
       avatar={{
         src: avatar || zorb,
         decoding: 'sync',
         loading: 'eager',
-        noBorder: true,
         overlay: avatar ? undefined : (
           <PersonOverlay>
             <PersonSVG />

diff --git a/src/components/pages/profile/ProfileButton.tsx b/src/components/pages/profile/ProfileButton.tsx
@@ -104,19 +104,19 @@ export const AddressProfileButton = ({
   const items = [
     iconKey === 'eth'
       ? {
-          icon: <UpRightArrowSVG />,
+          icon: UpRightArrowSVG,
           label: 'View address',
           href: getDestination(`/${address}`) as string,
         }
       : undefined,
     {
-      icon: <CopySVG />,
+      icon: CopySVG,
       label: 'Copy address',
       onClick: () => copy(address),
     },
     defaultBlockExplorer
       ? {
-          icon: <UpRightArrowSVG />,
+          icon: UpRightArrowSVG,
           label: `View on ${defaultBlockExplorer?.name}`,
           href: `${defaultBlockExplorer?.url}/address/${address}`,
         }
@@ -128,7 +128,7 @@ export const AddressProfileButton = ({
       <RecordItem
         data-testid={`address-profile-button-${iconKey}`}
         postfixIcon={VerticalDotsSVG}
-        icon={<StyledAddressIcon name={iconKey} />}
+        icon={() => <StyledAddressIcon name={iconKey} />}
         value={address}
         size={breakpoints.sm ? 'large' : 'small'}
         inline
@@ -324,32 +324,32 @@ export const OwnerProfileButton = ({
   const items = [
     link
       ? {
-          icon: <UpRightArrowSVG />,
+          icon: UpRightArrowSVG,
           label: 'View profile',
           href: link,
         }
       : undefined,
     primary.data?.name
       ? {
-          icon: <CopySVG />,
+          icon: CopySVG,
           label: 'Copy name',
           onClick: () => copy(primary.data?.name!),
         }
       : undefined,
     ...(dataType === 'address'
       ? ([
           {
-            icon: <UpRightArrowSVG />,
+            icon: UpRightArrowSVG,
             label: 'View address',
             href: getDestination(`/${addressOrNameOrDate}`) as string,
           },
           {
-            icon: <CopySVG />,
+            icon: CopySVG,
             label: 'Copy address',
             onClick: () => copy(addressOrNameOrDate),
           },
           {
-            icon: <UpRightArrowSVG />,
+            icon: UpRightArrowSVG,
             label: 'View on Etherscan',
             href: makeEtherscanLink(addressOrNameOrDate, 'mainnet', 'address'),
           },
@@ -407,7 +407,7 @@ export const VerificationProfileButton = ({
       tooltipContent={<VerificationBadgeVerifierTooltipContent isVerified={!!isVerified} />}
     >
       <RecordItem
-        icon={<DynamicVerificationIcon name={iconKey} />}
+        icon={() => <DynamicVerificationIcon name={iconKey} />}
         size={breakpoints.sm ? 'large' : 'small'}
         inline
         data-testid={`verification-profile-button-${iconKey}`}

diff --git a/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx b/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx
@@ -98,27 +98,27 @@ export const RoleRow = ({ name, address, roles, actions, isWrapped, isEmancipate
             label: t('wallet.viewProfile'),
             onClick: () => router.push(getDestination(`/profile/${primary.data!.name}`) as string),
             color: 'text',
-            icon: <UpRightArrowSVG />,
+            icon: UpRightArrowSVG,
           },
           {
             label: t('name.copy'),
             onClick: () => copy(primary.data!.name!),
             color: 'text',
-            icon: <CopySVG />,
+            icon: CopySVG,
           },
         ] as DropdownItem[])
       : []),
     {
       label: t('address.viewAddress'),
       onClick: () => router.push(getDestination(`/address/${address}`) as string),
       color: 'text',
-      icon: <UpRightArrowSVG />,
+      icon: UpRightArrowSVG,
     },
     {
       label: t('address.copyAddress'),
       onClick: () => copy(address!),
       color: 'text',
-      icon: <CopySVG />,
+      icon: CopySVG,
     },
     ...(etherscanAction ? [etherscanAction] : []),
     ...(editRolesAction ? [editRolesAction] : []),

diff --git a/...nts/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx b/...nts/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx
@@ -72,7 +72,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
       showSendDNS
         ? {
             type: 'send-dns',
-            icon: <AeroplaneSVG />,
+            icon: AeroplaneSVG,
             label: t('action.send'),
             error: canSendError,
             onClick: () => showSendNameInput(`send-name-${name}`, { name }),
@@ -81,7 +81,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
       canRefreshDNS
         ? {
             type: 'refresh-dns',
-            icon: <CounterClockwiseArrowSVG />,
+            icon: CounterClockwiseArrowSVG,
             label: t('dns.refresh'),
             onClick: () =>
               queryClient.resetQueries({ exact: true, queryKey: ['getDNSOwner', name] }),
@@ -90,7 +90,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
       showSyncManager
         ? {
             type: 'sync-manager',
-            icon: <HorizontalOutwardArrowsSVG />,
+            icon: HorizontalOutwardArrowsSVG,
             label: t('transaction.description.syncManager'),
             onClick: () =>
               showSyncManagerInput(`sync-manager-${name}`, {
@@ -101,7 +101,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
       showSendEth
         ? {
             type: 'send-name',
-            icon: <AeroplaneSVG />,
+            icon: AeroplaneSVG,
             label: t('action.send'),
             error: canSendError,
             onClick: () => showSendNameInput(`send-name-${name}`, { name }),
@@ -110,7 +110,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
       canEditRoles
         ? {
             type: 'edit-roles',
-            icon: <PersonSVG />,
+            icon: PersonSVG,
             label: t('action.editRoles'),
             primary: true,
             onClick: () => showEditRolesInput(`edit-roles-${name}`, { name }),

diff --git a/src/components/pages/profile/[name]/tabs/SubnamesTab.tsx b/src/components/pages/profile/[name]/tabs/SubnamesTab.tsx
@@ -216,7 +216,7 @@ export const SubnamesTab = ({
             <Button
               data-testid="add-subname-action"
               onClick={createSubname}
-              prefix={<PlusPrefix as={PlusSVG} />}
+              prefix={() => <PlusPrefix as={PlusSVG} />}
             >
               {t('details.tabs.subnames.addSubname.action')}
             </Button>

diff --git a/src/transaction-flow/input/ProfileEditor/components/ProfileBlurb.tsx b/src/transaction-flow/input/ProfileEditor/components/ProfileBlurb.tsx
@@ -61,7 +61,7 @@ export const ProfileBlurb = ({ name, resolverAddress }: Props) => {
   return (
     <Container>
       <AvatarWrapper>
-        <Avatar label="profile-button-avatar" src={avatar || zorb} noBorder />
+        <Avatar label="profile-button-avatar" src={avatar || zorb} />
       </AvatarWrapper>
       <InfoContainer>
         <Typography fontVariant="extraLargeBold">{name}</Typography>