Add hardcoded version of TXT records table

Author: LauraBeatris

packages/localizations/src/en-US.ts

@@ -270,6 +270,14 @@ export const enUS: LocalizationResource = {
         paragraph2:
           "We'll verify automatically once the record is live. This usually takes under a minute, though updating an existing TXT record may take a bit longer.",
       },
+      txtRecordTable: {
+        columns: {
+          domain: 'Domain',
+          type: 'Type',
+          hostName: 'Host / Name',
+          value: 'Value',
+        },
+      },
     },
     testConfigurationStep: {
       title: 'Test your SSO connection',

packages/shared/src/types/elementIds.ts

@@ -33,7 +33,8 @@ export type FieldId =
   | 'idpSsoUrl'
   | 'acsUrl'
   | 'spEntityId'
-  | 'web3WalletName';
+  | 'web3WalletName'
+  | 'domain';
 export type ProfileSectionId =
   | 'profile'
   | 'username'

packages/shared/src/types/localization.ts

@@ -1331,6 +1331,14 @@ export type __internal_LocalizationResource = {
         paragraph1: LocalizationValue;
         paragraph2: LocalizationValue;
       };
+      txtRecordTable: {
+        columns: {
+          domain: LocalizationValue;
+          type: LocalizationValue;
+          hostName: LocalizationValue;
+          value: LocalizationValue;
+        };
+      };
     };
     testConfigurationStep: {
       title: LocalizationValue;

packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx

@@ -1,10 +1,30 @@
 import type React from 'react';
 import { useState } from 'react';
 
-import { Box, Button, Col, descriptors, Flex, Flow, localizationKeys, useLocalizations } from '@/customizables';
+import {
+  Box,
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  Flow,
+  Icon,
+  localizationKeys,
+  Spinner,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useLocalizations,
+} from '@/customizables';
 import { Field } from '@/elements/FieldControl';
 import { Form } from '@/elements/Form';
 import { TagPill } from '@/elements/TagInput';
+import { useClipboard } from '@/hooks';
+import { Checkmark, Clipboard } from '@/icons';
 import { useFormControl } from '@/utils/useFormControl';
 
 import { Step } from '../elements/Step';
@@ -33,30 +53,46 @@ export const VerifyDomainStep = (): JSX.Element => {
         </Wizard>
 
         <Step.Body>
-          <Step.Section>
-            {/* TODO -> Trigger mutation to add domain */}
-            <DomainsField
-              onSubmit={domain => {
-                setDomains(prev => [...prev, domain]);
-              }}
-            />
+          <Step.Section sx={t => ({ gap: t.space.$5 })}>
+            <Col>
+              {/* TODO -> Trigger mutation to add domain */}
+              <DomainsField
+                onSubmit={domain => {
+                  setDomains(prev => [...prev, domain]);
+                }}
+              />
 
-            {domains.length > 0 && (
-              <Flex
-                wrap='wrap'
-                sx={t => ({ gap: t.space.$2, marginTop: t.space.$4 })}
-              >
-                {domains.map(domain => (
-                  <TagPill
-                    key={domain}
-                    /* TODO -> Trigger mutation to remove domain */
-                    onRemoveClick={() => setDomains(prev => prev.filter(d => d !== domain))}
-                  >
-                    {domain}
-                  </TagPill>
-                ))}
-              </Flex>
-            )}
+              {domains.length > 0 && (
+                <Flex
+                  wrap='wrap'
+                  sx={t => ({ gap: t.space.$2, marginTop: t.space.$4 })}
+                >
+                  {domains.map(domain => (
+                    <TagPill
+                      key={domain}
+                      /* TODO -> Trigger mutation to remove domain */
+                      onRemoveClick={() => setDomains(prev => prev.filter(d => d !== domain))}
+                    >
+                      {domain}
+                    </TagPill>
+                  ))}
+                </Flex>
+              )}
+            </Col>
+
+            {/* TODO -> Only render when there is existing organization domains */}
+            <Col sx={t => ({ gap: t.space.$3 })}>
+              <Col sx={t => ({ gap: t.space.$4 })}>
+                <Text
+                  localizationKey={localizationKeys('configureSSO.verifyDomainStep.txtRecordInstructions.paragraph1')}
+                />
+                <Text
+                  localizationKey={localizationKeys('configureSSO.verifyDomainStep.txtRecordInstructions.paragraph2')}
+                />
+              </Col>
+
+              <TxtRecordTable />
+            </Col>
           </Step.Section>
         </Step.Body>
       </Step>
@@ -127,3 +163,111 @@ const DomainsField = ({ onSubmit }: { onSubmit: (domain: string) => void }): JSX
  */
 const DOMAIN_REGEX = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
 const isValidDomain = (value: string): boolean => DOMAIN_REGEX.test(value);
+
+const txtRecordsMock = [
+  {
+    domain: 'test.com',
+    type: 'TXT',
+    name: '@',
+    value: 'hellooo-domain-verification-axxn86=sdfsdfsdfsdfdsf',
+    status: 'pending',
+  },
+  {
+    domain: 'acme.com',
+    type: 'TXT',
+    name: '@',
+    value: 'hellooo2-domain-verification-axxn86=sdfsdfsdfsdfdsf',
+    status: 'verified',
+  },
+];
+
+const TxtRecordTable = (): JSX.Element => {
+  return (
+    <Table>
+      <Thead>
+        <Tr>
+          <Th>Domain</Th>
+          <Th>Type</Th>
+          <Th>Host / Name</Th>
+          <Th>Value</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {txtRecordsMock.map(record => (
+          <Tr key={record.domain}>
+            <Td>
+              <Flex
+                as='span'
+                align='center'
+                sx={t => ({ gap: t.space.$2 })}
+              >
+                {record.status === 'verified' ? (
+                  <Icon
+                    icon={Checkmark}
+                    colorScheme='success'
+                    sx={t => ({ flexShrink: 0, width: t.sizes.$3, height: t.sizes.$3 })}
+                  />
+                ) : (
+                  <Spinner
+                    size='xs'
+                    colorScheme='neutral'
+                    sx={{ flexShrink: 0 }}
+                  />
+                )}
+                <Text as='span'>{record.domain}</Text>
+              </Flex>
+            </Td>
+            <Td>
+              <Text as='span'>{record.type}</Text>
+            </Td>
+            <Td>
+              <Text as='span'>{record.name}</Text>
+            </Td>
+            <Td sx={{ width: '50%', maxWidth: '1px' }}>
+              <TxtRecordValueCell value={record.value} />
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
+const TxtRecordValueCell = ({ value }: { value: string }): JSX.Element => {
+  const { onCopy, hasCopied } = useClipboard(value);
+
+  return (
+    <Flex
+      align='center'
+      sx={t => ({ gap: t.space.$2, minWidth: 0 })}
+    >
+      <Text
+        as='span'
+        colorScheme='secondary'
+        title={value}
+        sx={{
+          fontFamily: 'monospace',
+          display: 'block',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          minWidth: 0,
+          flex: 1,
+        }}
+      >
+        {value}
+      </Text>
+      <Button
+        colorScheme='secondary'
+        aria-label='Copy value'
+        onClick={() => onCopy()}
+        sx={t => ({ flexShrink: 0, padding: t.space.$1 })}
+      >
+        <Icon
+          icon={hasCopied ? Checkmark : Clipboard}
+          sx={t => ({ width: t.sizes.$4, height: t.sizes.$4, color: t.colors.$colorMutedForeground })}
+        />
+      </Button>
+    </Flex>
+  );
+};