fix hydration issue

ui/pages/VerifiedAddresses.tsx

@@ -16,21 +16,17 @@ const VerifiedAddresses = () => {
     <Page>
       <PageTitle text="My verified addresses"/>
       <AccountPageDescription allowCut={ false }>
-        <chakra.p>
-          <span>
-            Before you claim the ownership of your contract address and update your token’s information, make sure that:
-          </span>
-          <UnorderedList>
-            <ListItem>the source code has already been deployed onto the Ethereum blockchain</ListItem>
-            <ListItem>the source code has already been verified (if you have not yet verified the source code, please do so using this tool)</ListItem>
-          </UnorderedList>
-        </chakra.p>
-        <chakra.p mt={ 3 }>
+        <span>Before you claim the ownership of your contract address and update your token’s information, make sure that:</span>
+        <UnorderedList>
+          <ListItem>the source code has already been deployed onto the Ethereum blockchain</ListItem>
+          <ListItem>the source code has already been verified (if you have not yet verified the source code, please do so using this tool)</ListItem>
+        </UnorderedList>
+        <chakra.div mt={ 3 }>
             The verify address ownership process involves verifying the ownership of an “Network name” address used to create an “Network name” smart contract.
             This verification will be linked to an “Network name” account. Once a user has claimed ownership of an address,
             the user will be able to update token information and address name tags without needing to sign a new message each time.
             Find out more about verify address ownership.
-        </chakra.p>
+        </chakra.div>
       </AccountPageDescription>
       <Button size="lg" onClick={ modalProps.onOpen }>
         Add address

ui/shared/AccountPageDescription.tsx

-import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 
@@ -44,14 +44,14 @@ const AccountPageDescription = ({ children, allowCut = true }: { children: React
 
   return (
     <Box position="relative" marginBottom={{ base: 6, lg: 8 }}>
-      <Text
+      <Box
         ref={ ref }
         maxHeight={ needCut && !expanded ? `${ CUT_HEIGHT }px` : 'auto' }
         overflow="hidden"
         style={ needCut && !expanded ? { WebkitLineClamp: '6', WebkitBoxOrient: 'vertical', display: '-webkit-box' } : {} }
       >
         { children }
-      </Text>
+      </Box>
       { needCut && !expanded && (
         <Box
           position="absolute"