diff --git a/src/components/pages/migrate/EligibleForTokens.tsx b/src/components/pages/migrate/EligibleForTokens.tsx
new file mode 100644
index 000000000..6af934334
--- /dev/null
+++ b/src/components/pages/migrate/EligibleForTokens.tsx
@@ -0,0 +1,79 @@
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
+
+import { InfoCircleSVG, OutlinkSVG, Typography } from '@ensdomains/thorin'
+
+import { REBATE_DATE } from '@app/utils/constants'
+
+const EligibleForTokensContainer = 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 InelegibleForTokensContainer = styled.div(
+ ({ theme }) => css`
+ display: flex;
+ flex-direction: row;
+ background: ${theme.colors.greenSurface};
+ padding: ${theme.space['4']};
+ gap: ${theme.space['4']};
+ border-radius: ${theme.radii.large};
+ align-items: center;
+ width: 100%;
+ svg {
+ color: ${theme.colors.greenDim};
+ }
+ `,
+)
+
+export const EligibleForTokens = ({
+ amount,
+ extendedDate,
+}: {
+ amount: number
+ extendedDate?: Date
+}) => {
+ const { t } = useTranslation('common')
+
+ if (!extendedDate) return null
+
+ if (extendedDate < REBATE_DATE) {
+ return (
+
+
+ names expiring in 2031 smth smth
+
+ )
+ }
+
+ return (
+
+ Eligible for {amount} $ENS
+ something something
+
+
+ {t('action.learnMore')}
+
+
+
+
+ )
+}
diff --git a/src/components/pages/migrate/MigrationNamesList.tsx b/src/components/pages/migrate/MigrationNamesList.tsx
index 2dc4df7c7..331476fb6 100644
--- a/src/components/pages/migrate/MigrationNamesList.tsx
+++ b/src/components/pages/migrate/MigrationNamesList.tsx
@@ -8,6 +8,7 @@ import { useAccount, useEnsAvatar } from 'wagmi'
import { NameWithRelation } from '@ensdomains/ensjs/subgraph'
import { Button, CheckCircleSVG, Colors, DisabledSVG, PlusCircleSVG, Tag } from '@ensdomains/thorin'
+import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
import { ensAvatarConfig } from '@app/utils/query/ipfsGateway'
import { formatDurationOfDates } from '@app/utils/utils'
@@ -152,6 +153,21 @@ const TagList = ({ name, address }: { name: NameWithRelation; address: Address }
return {tags.map((tag) => tag)}
}
+const ExtendableNameButton = ({ name, t }: { name: NameWithRelation; t: TFunction }) => {
+ const { usePreparedDataInput } = useTransactionFlow()
+ const showExtendNamesInput = usePreparedDataInput('ExtendNames')
+
+ return (
+
+ )
+}
+
const MigrationName = ({
name,
t,
@@ -181,9 +197,7 @@ const MigrationName = ({
{mode === 'extension' ? (
<>
-
+
>
) : null}
diff --git a/src/transaction-flow/input/BulkRenewal/BulkRenewal-flow.tsx b/src/transaction-flow/input/BulkRenewal/BulkRenewal-flow.tsx
index 7bbedf72a..f0392071b 100644
--- a/src/transaction-flow/input/BulkRenewal/BulkRenewal-flow.tsx
+++ b/src/transaction-flow/input/BulkRenewal/BulkRenewal-flow.tsx
@@ -1,6 +1,5 @@
import Link from 'next/link'
import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'
import { ContractFunctionRevertedError, decodeErrorResult, namehash } from 'viem'
import { useClient, useReadContract } from 'wagmi'
@@ -10,6 +9,7 @@ import { Dialog, Heading, Helper, OutlinkSVG, Typography } from '@ensdomains/tho
import { InvoiceItem } from '@app/components/@atoms/Invoice/Invoice'
import { DateSelection } from '@app/components/@molecules/DateSelection/DateSelection'
+import { EligibleForTokens } from '@app/components/pages/migrate/EligibleForTokens'
import { createTransactionItem } from '@app/transaction-flow/transaction'
import { bulkRenewalContract } from '@app/transaction-flow/transaction/bulkRenew'
import { REBATE_DATE } from '@app/utils/constants'
@@ -55,28 +55,6 @@ 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!)
@@ -107,8 +85,6 @@ const BulkRenewalFlow = ({ data }: Props) => {
args: [data.names.map((name) => namehash(name.name!)), BigInt(seconds)],
})
- const { t } = useTranslation('common')
-
return (
<>
@@ -122,16 +98,7 @@ const BulkRenewalFlow = ({ data }: Props) => {
{status}
{error ? {error.message} : null}
-
- Eligible for {data.names.length} $ENS
- something something
-
-
- {t('action.learnMore')}
-
-
-
-
+
>
)
}
diff --git a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
index 50343fdf2..43eab41b4 100644
--- a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
+++ b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
@@ -14,6 +14,7 @@ import { Invoice, InvoiceItem } from '@app/components/@atoms/Invoice/Invoice'
import { PlusMinusControl } from '@app/components/@atoms/PlusMinusControl/PlusMinusControl'
import { StyledName } from '@app/components/@atoms/StyledName/StyledName'
import { DateSelection } from '@app/components/@molecules/DateSelection/DateSelection'
+import { EligibleForTokens } from '@app/components/pages/migrate/EligibleForTokens'
import { useEstimateGasWithStateOverride } from '@app/hooks/chain/useEstimateGasWithStateOverride'
import { useExpiry } from '@app/hooks/ensjs/public/useExpiry'
import { usePrice } from '@app/hooks/ensjs/public/usePrice'
@@ -366,6 +367,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
{t('input.extendNames.gasLimitError')}
)}
+
>
))}