display elegible tokens

ensdomains · Oct 29, 2024 · 86f18a0 · 86f18a0
1 parent dbe76e2
commit 86f18a0
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 38 deletions.
diff --git a/src/components/pages/migrate/EligibleForTokens.tsx 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 (
+      <InelegibleForTokensContainer>
+        <InfoCircleSVG height={24} width={24} />
+        names expiring in 2031 smth smth
+      </InelegibleForTokensContainer>
+    )
+  }
+
+  return (
+    <EligibleForTokensContainer>
+      <Typography fontVariant="largeBold">Eligible for {amount} $ENS</Typography>
+      something something
+      <Link href="#" target="_blank" rel="noreferrer noopener">
+        <Typography color="greenPrimary" fontVariant="bodyBold">
+          {t('action.learnMore')}
+        </Typography>
+        <OutlinkSVG />
+      </Link>
+    </EligibleForTokensContainer>
+  )
+}
diff --git 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 <TagListContainer>{tags.map((tag) => tag)}</TagListContainer>
 }
 
+const ExtendableNameButton = ({ name, t }: { name: NameWithRelation; t: TFunction }) => {
+  const { usePreparedDataInput } = useTransactionFlow()
+  const showExtendNamesInput = usePreparedDataInput('ExtendNames')
+
+  return (
+    <Button
+      width="max"
+      colorStyle="greenSecondary"
+      onClick={() => showExtendNamesInput('ExtendNames', { names: [name.name!], isSelf: true })}
+    >
+      {t('action.extend', { ns: 'common' })}
+    </Button>
+  )
+}
+
 const MigrationName = ({
   name,
   t,
@@ -181,9 +197,7 @@ const MigrationName = ({
         {mode === 'extension' ? (
           <>
             <TagList {...{ name, address }} />
-            <Button width="max" colorStyle="greenSecondary">
-              {t('action.extend', { ns: 'common' })}
-            </Button>
+            <ExtendableNameButton {...{ name, t }} />
           </>
         ) : null}
       </NameCard>

diff --git 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 (
     <>
       <Dialog.Heading title={`Extend ${data.names.length} names`} />
@@ -122,16 +98,7 @@ const BulkRenewalFlow = ({ data }: Props) => {
       </Dialog.Content>
       {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>
+      <EligibleForTokens amount={data.names.length} />
     </>
   )
 }

diff --git 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) =>
                   <Helper type="warning">{t('input.extendNames.gasLimitError')}</Helper>
                 )}
               </GasEstimationCacheableComponent>
+              <EligibleForTokens extendedDate={extendedDate} amount={names.length} />
             </>
           ))}
       </Dialog.Content>