eligible names rendering

src/transaction-flow/input/BulkRenewal/BulkRenewal-flow.tsx

@@ -1,9 +1,12 @@
+import Link from 'next/link'
 import { useState } from 'react'
-import { namehash } from 'viem'
+import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
+import { ContractFunctionRevertedError, decodeErrorResult, namehash } from 'viem'
 import { useClient, useReadContract } from 'wagmi'
 
 import { NameWithRelation } from '@ensdomains/ensjs/subgraph'
-import { Dialog } from '@ensdomains/thorin'
+import { Dialog, Heading, Helper, OutlinkSVG, Typography } from '@ensdomains/thorin'
 
 import { InvoiceItem } from '@app/components/@atoms/Invoice/Invoice'
 import { DateSelection } from '@app/components/@molecules/DateSelection/DateSelection'
@@ -52,33 +55,59 @@ const abi = [
   },
 ] as const
 
+const EligibleForTokens = styled.div(
+  ({ theme }) => css`
+    padding: ${theme.space['4']};
+    gap: ${theme.space['2']};
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: ${theme.space.full};
+    border-radius: ${theme.radii['2xLarge']};
+    background: ${theme.colors.greenSurface};
+
+    a {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: ${theme.space['2']};
+      color: ${theme.colors.greenPrimary};
+    }
+  `,
+)
+
 const BulkRenewalFlow = ({ data }: Props) => {
+  // Sort from the ones that expire earlier to later
   const sortedNames = data.names.toSorted((a, b) => a.expiryDate!.value! - b.expiryDate!.value!)
 
   const minDateDiff = calculateDatesDiff(sortedNames[0].expiryDate!.date, REBATE_DATE)
 
-  const minSeconds = secondsFromDateDiff({
-    startDate: sortedNames[0].expiryDate!.date,
-    additionalDays: minDateDiff.diff.days,
-    additionalMonths: minDateDiff.diff.months,
-    additionalYears: minDateDiff.diff.years,
-  })
+  const minSeconds =
+    secondsFromDateDiff({
+      startDate: sortedNames[0].expiryDate!.date,
+      additionalDays: minDateDiff.diff.days,
+      additionalMonths: minDateDiff.diff.months,
+      additionalYears: minDateDiff.diff.years,
+    }) + 84600
 
-  const [seconds, setSeconds] = useState(() => minSeconds)
+  const [seconds, setSeconds] = useState(minSeconds)
   const [durationType, setDurationType] = useState<'years' | 'date'>('years')
 
-  // const client = useClient()
+  const client = useClient()
+
+  const {
+    data: expiryData,
+    error,
+    status,
+  } = useReadContract({
+    abi,
+    address: bulkRenewalContract[client.chain.id!]!,
+    functionName: 'getTargetExpiryPriceData',
+    args: [data.names.map((name) => namehash(name.name!)), BigInt(seconds)],
+  })
 
-  // const {
-  //   data: expiryData,
-  //   error,
-  //   status,
-  // } = useReadContract({
-  //   abi,
-  //   address: bulkRenewalContract[client.chain.id!]!,
-  //   functionName: 'getTargetExpiryPriceData',
-  //   args: [data.names.map((name) => namehash(name.name!)), BigInt(seconds)],
-  // })
+  const { t } = useTranslation('common')
 
   return (
     <>
@@ -91,12 +120,18 @@ const BulkRenewalFlow = ({ data }: Props) => {
           onChangeDurationType={setDurationType}
         />
       </Dialog.Content>
-      {sortedNames.map((name) => (
-        <div key={name.name}>
-          <span>{name.name}</span>
-          <span>{name.expiryDate?.date.toDateString()}</span>
-        </div>
-      ))}
+      {status}
+      {error ? <Helper type="error">{error.message}</Helper> : null}
+      <EligibleForTokens>
+        <Typography fontVariant="largeBold">Eligible for {data.names.length} $ENS</Typography>
+        something something
+        <Link href="#" target="_blank" rel="noreferrer noopener">
+          <Typography color="greenPrimary" fontVariant="bodyBold">
+            {t('action.learnMore')}
+          </Typography>
+          <OutlinkSVG />
+        </Link>
+      </EligibleForTokens>
     </>
   )
 }