fet-1670

package.json

@@ -61,6 +61,7 @@
     "@noble/hashes": "^1.3.2",
     "@rainbow-me/rainbowkit": "2.1.2",
     "@sentry/nextjs": "7.43.x",
+    "@splidejs/react-splide": "^0.7.12",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/query-persist-client-core": "5.22.2",
     "@tanstack/query-sync-storage-persister": "5.22.2",

src/components/@atoms/Calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components'
 import CalendarSVG from '@app/assets/Calendar.svg'
 import { useDefaultRef } from '@app/hooks/useDefaultRef'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
-import { secondsToDate, secondsToDateInput } from '@app/utils/date'
+import { dateToDateInput, secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
 const Label = styled.label<{ $highlighted?: boolean }>(
@@ -66,10 +66,10 @@ const LabelInput = styled.input(
 type InputProps = InputHTMLAttributes<HTMLInputElement>
 type Props = {
   highlighted?: boolean
-  value: number
+  value: number | Date
   unit?: string
   name?: string
-  min?: number
+  min?: number | Date
 } & Omit<InputProps, 'value' | 'defaultValue' | 'min' | 'max' | 'name'>
 
 export const Calendar = forwardRef(
@@ -78,8 +78,8 @@ export const Calendar = forwardRef(
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const inputRef = useDefaultRef<HTMLInputElement>(ref)
-    const [minDuratiion] = useState(min ?? value)
-    const minDate = secondsToDate(minDuratiion)
+    const [minDuration] = useState(min ?? value)
+    const minDate = typeof minDuration === 'number' ? secondsToDate(minDuration) : minDuration
 
     const breakpoint = useBreakpoint()
 
@@ -91,8 +91,12 @@ export const Calendar = forwardRef(
           type="date"
           {...props}
           ref={inputRef}
-          value={secondsToDateInput(value)}
-          min={secondsToDateInput(minDuratiion)}
+          value={typeof value === 'number' ? secondsToDateInput(value) : dateToDateInput(value)}
+          min={
+            typeof minDuration === 'number'
+              ? secondsToDateInput(minDuration)
+              : dateToDateInput(minDuration)
+          }
           onFocus={(e) => {
             e.target.select()
           }}
@@ -117,7 +121,9 @@ export const Calendar = forwardRef(
           onClick={() => inputRef.current!.showPicker()}
         />
         <span data-testid="calendar-date">
-          {formatExpiry(secondsToDate(value), { short: !breakpoint.sm })}
+          {formatExpiry(typeof value === 'number' ? secondsToDate(value) : value, {
+            short: !breakpoint.sm,
+          })}
         </span>
         <CalendarIcon>
           <CalendarSVG height={16} width={16} />

src/components/pages/migrate/Carousel.tsx

@@ -0,0 +1,21 @@
+import { Splide, SplideSlide } from '@splidejs/react-splide'
+import { ReactNode } from 'react'
+
+export const Carousel = ({ children }: { children: ReactNode[] }) => {
+  return (
+    <Splide
+      options={{
+        arrows: false,
+        pagination: false,
+        gap: '16px',
+        perPage: 2,
+        fixedWidth: 312,
+      }}
+    >
+      {children.map((child, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <SplideSlide key={i}>{child}</SplideSlide>
+      ))}
+    </Splide>
+  )
+}

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