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')} )} + ))}