FET-1623: Add expiry info to registration completion page

public/locales/en/register.json

@@ -4,12 +4,13 @@
   "heading": "Register {{name}}",
   "invoice": {
     "timeRegistration": "{{time}} registration",
-    "registration": "Registration",
+    "registration": "1yr registration",
     "estimatedNetworkFee": "Est. network fee",
     "networkFee": "Network fee",
     "temporaryPremium": "Temporary premium",
     "total": "Estimated total",
-    "totalPaid": "Total paid"
+    "totalPaid": "Total paid",
+    "expiry": "Name expires"
   },
   "error": {
     "nameTooLong": "The name you want to register is too long. Please choose a shorter name."
@@ -151,7 +152,6 @@
     "complete": {
       "heading": "Congratulations!",
       "subheading": "You are now the owner of ",
-      "description": "Your name was successfully registered. You can now view and manage your name.",
       "registerAnother": "Register another",
       "viewName": "View name"
     },

src/components/pages/profile/[name]/registration/steps/Complete.tsx

@@ -9,13 +9,14 @@ import { useAccount } from 'wagmi'
 import { tokenise } from '@ensdomains/ensjs/utils'
 import { Button, mq, Typography } from '@ensdomains/thorin'
 
-import { Invoice } from '@app/components/@atoms/Invoice/Invoice'
 import MobileFullWidth from '@app/components/@atoms/MobileFullWidth'
 import NFTTemplate from '@app/components/@molecules/NFTTemplate/NFTTemplate'
 import { Card } from '@app/components/Card'
 import useWindowSize from '@app/hooks/useWindowSize'
 import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
 
+import { Invoice } from './Invoice'
+
 const StyledCard = styled(Card)(
   ({ theme }) => css`
     max-width: 780px;
@@ -39,10 +40,14 @@ const ButtonContainer = styled.div(
   ({ theme }) => css`
     width: ${theme.space.full};
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: ${theme.space['2']};
+
+    ${mq.sm.min(css`
+      flex-direction: row;
+    `)}
   `,
 )
 
@@ -60,6 +65,20 @@ const NFTContainer = styled.div(
   `,
 )
 
+const InvoiceContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: ${theme.space['4']};
+    ${mq.sm.min(css`
+      gap: ${theme.space['6']};
+      flex-direction: row;
+    `)}
+  `,
+)
+
 const TitleContainer = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -208,13 +227,17 @@ const useEthInvoice = (
     const registerNetFee = registerGasUsed * registerGasPrice
     const totalNetFee = commitNetFee && registerNetFee ? commitNetFee + registerNetFee : 0n
 
+    const date = new Date()
+    date.setFullYear(date.getFullYear() + 1)
+
     return (
       <Invoice
+        expiryDate={date}
+        expiryTitle={t('invoice.expiry')}
         items={[
           { label: t('invoice.registration'), value },
           { label: t('invoice.networkFee'), value: totalNetFee },
         ]}
-        totalLabel={t('invoice.totalPaid')}
       />
     )
   }, [isLoading, registrationValue, commitReceipt, registerReceipt, t])
@@ -275,18 +298,19 @@ const Complete = ({ name, beautifiedName, callback, isMoonpayFlow }: Props) => {
         gravity={0.25}
         initialVelocityY={20}
       />
-      <NFTContainer>
-        <NFTTemplate backgroundImage={avatarSrc} isNormalised name={name} />
-      </NFTContainer>
       <TitleContainer>
         <Title>{t('steps.complete.heading')}</Title>
         <Typography style={{ display: 'inline' }} fontVariant="headingThree" weight="bold">
           {t('steps.complete.subheading')}
           <SubtitleWithGradient>{nameWithColourEmojis}</SubtitleWithGradient>
         </Typography>
       </TitleContainer>
-      <Typography>{t('steps.complete.description')}</Typography>
-      {InvoiceFilled}
+      <InvoiceContainer>
+        <NFTContainer>
+          <NFTTemplate backgroundImage={avatarSrc} isNormalised name={name} />
+        </NFTContainer>
+        {InvoiceFilled}
+      </InvoiceContainer>
       <ButtonContainer>
         <MobileFullWidth>
           <Button colorStyle="accentSecondary" onClick={() => callback(false)}>

src/components/pages/profile/[name]/registration/steps/Invoice.tsx

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+
+import { Colors, mq, Skeleton, Typography } from '@ensdomains/thorin'
+
+import { CurrencyText } from '@app/components/@atoms/CurrencyText/CurrencyText'
+import { CurrencyDisplay } from '@app/types'
+import { formatExpiry } from '@app/utils/utils'
+
+const Container = styled.div(
+  ({ theme }) => css`
+    display: grid;
+    padding: ${theme.space['4']};
+    row-gap: ${theme.space['4']};
+    column-gap: ${theme.space['4']};
+    grid-template-columns: 1fr 1fr;
+    border-radius: ${theme.space['2']};
+    border: 1px solid #e8e8e8;
+
+    ${mq.sm.min(css`
+      grid-template-columns: 1fr;
+      column-gap: 0px;
+    `)}
+  `,
+)
+
+const LineItem = styled.div<{ $color?: Colors }>(
+  ({ theme, $color }) => css`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: ${theme.space['1']};
+    line-height: ${theme.space['5']};
+    color: ${$color ? theme.colors[$color] : theme.colors.textTertiary};
+
+    &:not(:last-of-type) {
+      padding-bottom: ${theme.space['4']};
+      border-bottom: 1px solid #e8e8e8;
+    }
+
+    ${mq.sm.max(css`
+      &:not(:last-of-type) {
+        border-bottom: none;
+        padding-bottom: 0px;
+      }
+
+      &:first-of-type {
+        padding-right: ${theme.space['4']};
+        border-right: 1px solid #e8e8e8;
+      }
+
+      &:last-of-type {
+        grid-column: span 2;
+        padding-top: ${theme.space['4']};
+        border-top: 1px solid #e8e8e8;
+      }
+    `)}
+  `,
+)
+
+export type InvoiceItem = {
+  label: string
+  value?: bigint
+  /* Percentage buffer to multiply value by when displaying in ETH, defaults to 100 */
+  bufferPercentage?: bigint
+}
+
+type Props = {
+  expiryTitle: string
+  expiryDate: Date
+  items: InvoiceItem[]
+  unit?: CurrencyDisplay
+}
+
+export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props) => {
+  return (
+    <Container>
+      {items.map(({ label, value, bufferPercentage }, inx) => (
+        <LineItem data-testid={`invoice-item-${inx}`} key={label}>
+          <Typography fontVariant="small" color="textTertiary">
+            {label}
+          </Typography>
+          <Skeleton loading={!value}>
+            <Typography color="textPrimary" data-testid={`invoice-item-${inx}-amount`}>
+              <CurrencyText bufferPercentage={bufferPercentage} eth={value || 0n} currency={unit} />
+            </Typography>
+          </Skeleton>
+        </LineItem>
+      ))}
+
+      <LineItem data-testid="invoice-item-expiry">
+        <Typography fontVariant="small" color="textTertiary">
+          {expiryTitle}
+        </Typography>
+        <Typography color="textPrimary" data-testid="invoice-item-expiry-date">
+          {formatExpiry(expiryDate)}
+        </Typography>
+      </LineItem>
+    </Container>
+  )
+}