Feat/warning for resolution delay

packages/linea-ens-app/public/locales/en/common.json

@@ -386,5 +386,8 @@
   },
   "dns": {
     "refresh": "Refresh DNS"
+  },
+  "warning": {
+    "finalization": "You will be able to use your new domain anywhere ENS is supported once the transaction is finalized on L1. This process takes 8 to 32 hours. <a href='https://docs.linea.build/' style='color:blue;' target='_blank'>Read more</a>"
   }
-}
+}

packages/linea-ens-app/src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.tsx

@@ -22,6 +22,7 @@ import { useAddRecentTransaction } from '@app/hooks/transactions/useAddRecentTra
 import { useRecentTransactions } from '@app/hooks/transactions/useRecentTransactions'
 import { useIsSafeApp } from '@app/hooks/useIsSafeApp'
 import { useQueryOptions } from '@app/hooks/useQueryOptions'
+import { Content } from '@app/layouts/Content'
 import {
   ManagedDialogProps,
   TransactionFlowAction,
@@ -506,6 +507,17 @@ export const TransactionStageModal = ({
           </Outlink>
         )}
         {lowerError && <Helper type="error">{lowerError}</Helper>}
+        {stage === 'complete' ? (
+          <Content title="" hideHeading>
+            {{
+              warning: {
+                type: 'warning',
+                message: t('warning.finalization'),
+              },
+              trailing: <></>,
+            }}
+          </Content>
+        ) : null}
       </InnerDialog>
       <Dialog.Footer
         currentStep={currentStep}

packages/linea-ens-app/src/components/pages/profile/[name]/registration/CompletePoh.tsx

@@ -13,6 +13,7 @@ import { Card } from '@app/components/Card'
 import { Button } from '@app/components/styled/Button'
 import { Typography } from '@app/components/styled/Typography'
 import useWindowSize from '@app/hooks/useWindowSize'
+import { Content } from '@app/layouts/Content'
 
 const StyledCard = styled(Card)(
   ({ theme }) => css`
@@ -122,6 +123,7 @@ type Props = {
 
 const CompletePoh = ({ name, beautifiedName, callback }: Props) => {
   const { t } = useTranslation('register')
+  const { t: translateCommon } = useTranslation()
   const { width, height } = useWindowSize()
   const { avatarSrc } = useEthInvoice(name)
 
@@ -175,6 +177,15 @@ const CompletePoh = ({ name, beautifiedName, callback }: Props) => {
         </Typography>
       </TitleContainer>
       <Typography>{t('steps.complete.description')}</Typography>
+      <Content title="" hideHeading>
+        {{
+          warning: {
+            type: 'warning',
+            message: translateCommon('warning.finalization'),
+          },
+          trailing: <></>,
+        }}
+      </Content>
       <ButtonContainer>
         <MobileFullWidth>
           <Button data-testid="view-name" onClick={() => callback(true)}>

packages/linea-ens-app/src/layouts/Content.tsx

@@ -263,7 +263,7 @@ export const Content = ({
   const WarningComponent = !loading && warning && (
     <WarningWrapper>
       <Banner title={warning.title} alert={warning.type}>
-        {warning.message}
+        <div dangerouslySetInnerHTML={{ __html: warning.message! }} />
       </Banner>
     </WarningWrapper>
   )