Merge pull request #105 from Consensys/feat/CZK-703-registration-flow

feat: added poh registration flow

packages/ens-app-v3/.env.example

@@ -19,4 +19,6 @@ STABLE_MODE=500
 BATCH_GATEWAY_URLS='["https://ccip-v2.ens.xyz/"]'
 
 NEXT_PUBLIC_BASE_DOMAIN='linea-test' # To be read by the frontend dapp
-BASE_DOMAIN='linea-test' # To be read by the deployment scripts in "l2-cntracts"
+BASE_DOMAIN='linea-test' # To be read by the deployment scripts in "l2-cntracts"
+
+NEXT_PUBLIC_POH_SIGNATURE_API='http://localhost:4000'

packages/ens-app-v3/public/locales/en/common.json

@@ -203,6 +203,7 @@
       "importDnsName": "Import DNS name",
       "commitName": "Start timer",
       "registerName": "Register name",
+      "registerPoh": "Register PoH",
       "approveNameWrapper": "Approve NameWrapper",
       "clearRecords": "Clear records",
       "updateRecords": "Update records",

packages/ens-app-v3/public/locales/en/register.json

@@ -15,6 +15,13 @@
     "nameTooLong": "The name you want to register is too long. Please choose a shorter name."
   },
   "steps": {
+    "pohCheck": {
+      "pohNotValid": "PoH not valid",
+      "pohAlreadyUsed": "PoH already used",
+      "pohExplainer": "You can get one free linea.eth subdomains if you completed the Linea Proof of Humanity on Verax. linea.eth subdomains cannot be bought",
+      "getPoh": "Get your Linea Proof of humanity",
+      "getPohHereLink": "here"
+    },
     "pricing": {
       "insufficientBalance": "Insufficient Balance",
       "multipleYearsMessage": "Extending for multiple years will save money on network costs by avoiding yearly transactions.",

packages/ens-app-v3/src/components/@molecules/PohStatus/PohStatus.tsx

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+
+import CheckCircle from '@app/assets/CheckCircle.svg'
+import MinusCircle from '@app/assets/MinusCircle.svg'
+
+const Container = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    padding: ${theme.space['1']};
+    border: 1px solid ${theme.colors.border};
+    border-radius: ${theme.radii.full};
+    display: flex;
+    justify-content: center;
+    gap: ${theme.space['4']};
+  `,
+)
+
+const LabelContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    height: ${theme.space['11']};
+    border-radius: ${theme.radii.full};
+    background-color: transparent;
+    overflow: hidden;
+  `,
+)
+
+const StatusLabel = styled.label(
+  ({ theme }) => css`
+    height: ${theme.space['11']};
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-style: normal;
+    font-weight: ${theme.fontWeights.bold};
+    font-size: ${theme.fontSizes.headingTwo};
+    line-height: ${theme.space['11']};
+    text-align: center;
+    color: ${theme.colors.bluePrimary};
+  `,
+)
+
+const NotValidImg = styled.div(
+  ({ theme }) => css`
+    height: ${theme.space['11']};
+    width: ${theme.space['11']};
+    border-radius: 50%;
+    background: ${theme.colors.background};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      display: block;
+      transform: scale(1);
+      pointer-events: none;
+      path {
+        fill: ${theme.colors.red};
+      }
+    }
+  `,
+)
+
+const ValidImg = styled.div(
+  ({ theme }) => css`
+    height: ${theme.space['11']};
+    width: ${theme.space['11']};
+    border-radius: 50%;
+    background: ${theme.colors.greenBright};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      display: block;
+      transform: scale(1);
+      pointer-events: none;
+      path {
+        fill: ${theme.colors.greenBright};
+      }
+    }
+  `,
+)
+
+type Props = {
+  valid: boolean
+}
+
+export const PohStatus = ({ valid }: Props) => {
+  return (
+    <Container data-testid="poh-status">
+      <LabelContainer>
+        <StatusLabel>Linea PoH status:</StatusLabel>
+      </LabelContainer>
+      {valid && (
+        <ValidImg>
+          <CheckCircle />
+        </ValidImg>
+      )}
+
+      {!valid && (
+        <NotValidImg>
+          <MinusCircle />
+        </NotValidImg>
+      )}
+    </Container>
+  )
+}