feat: add numbers to the seed phrases and update style (#280)

kibis-is · Aug 23, 2024 · 670f287 · 670f287
1 parent 86747b5
commit 670f287
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 10 deletions.
diff --git a/src/extension/components/SeedPhraseDisplay/SeedPhraseDisplay.tsx b/src/extension/components/SeedPhraseDisplay/SeedPhraseDisplay.tsx
@@ -1,28 +1,61 @@
-import { Code, Grid, GridItem } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import { Grid, GridItem, HStack, Text } from '@chakra-ui/react';
+import React, { type FC } from 'react';
+
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
+// hooks
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useTextBackgroundColor from '@extension/hooks/useTextBackgroundColor';
 
 // types
 import type { IProps } from './types';
 
-const SeedPhraseDisplay: FC<IProps> = ({ seedPhrase }) => {
+const SeedPhraseDisplay: FC<IProps> = ({ _context, seedPhrase }) => {
+  // hooks
+  const defaultTextColor = useDefaultTextColor();
+  const textBackgroundColor = useTextBackgroundColor();
+
   return (
-    <Grid gap={2} templateColumns="repeat(3, 1fr)" w="full">
+    <Grid gap={DEFAULT_GAP / 3} templateColumns="repeat(3, 1fr)" w="full">
       {seedPhrase.split(' ').map((value, index, array) => {
+        const node = (
+          <HStack
+            alignItems="center"
+            backgroundColor={textBackgroundColor}
+            borderRadius="full"
+            px={DEFAULT_GAP / 3}
+            py={1}
+            spacing={DEFAULT_GAP / 3}
+            w="full"
+          >
+            {/*numbering*/}
+            <Text as="b" color={defaultTextColor} fontSize="xs">
+              {index + 1}
+            </Text>
+
+            {/*word*/}
+            <Text color={defaultTextColor} fontSize="sm">
+              {value}
+            </Text>
+          </HStack>
+        );
+
         if (index >= array.length - 1) {
           return (
             <GridItem
               colEnd={2}
               colStart={2}
-              key={`seed-phrase-display-item-${index}`}
+              key={`${_context}-seed-phrase-display-item-${index}`}
             >
-              <Code w="full">{value}</Code>
+              {node}
             </GridItem>
           );
         }
 
         return (
-          <GridItem key={`seed-phrase-display-item-${index}`}>
-            <Code w="full">{value}</Code>
+          <GridItem key={`${_context}-seed-phrase-display-item-${index}`}>
+            {node}
           </GridItem>
         );
       })}

diff --git a/src/extension/components/SeedPhraseDisplay/types/IProps.ts b/src/extension/components/SeedPhraseDisplay/types/IProps.ts
@@ -1,4 +1,5 @@
 interface IProps {
+  _context: string;
   seedPhrase: string;
 }
 

diff --git a/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx b/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx
@@ -69,6 +69,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
   const [name, setName] = useState<string | null>(null);
   const [nameError, setNameError] = useState<string | null>(null);
   // misc
+  const _context = 'create-new-account-page';
   const seedPhrase = convertPrivateKeyToSeedPhrase({
     logger,
     privateKey: keyPair.privateKey,
@@ -172,7 +173,10 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
                 </Text>
 
                 {/*seed phrase*/}
-                <SeedPhraseDisplay seedPhrase={seedPhrase} />
+                <SeedPhraseDisplay
+                  _context={_context}
+                  seedPhrase={seedPhrase}
+                />
               </VStack>
 
               {/*copy seed phrase button*/}

diff --git a/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx b/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx
@@ -75,6 +75,8 @@ const ViewSeedPhrasePage: FC = () => {
     null
   );
   const [value, setValue] = useState<IAccountAndSeedPhraseValue | null>(null);
+  // misc
+  const _context = 'view-seed-phrase--page';
   // handlers
   const handleAccountSelect = async (account: IAccountWithExtendedProps) => {
     setValue(
@@ -227,7 +229,10 @@ const ViewSeedPhrasePage: FC = () => {
           {!value ? (
             <SeedPhraseDisplaySkeleton />
           ) : (
-            <SeedPhraseDisplay seedPhrase={value.seedPhrase} />
+            <SeedPhraseDisplay
+              _context={_context}
+              seedPhrase={value.seedPhrase}
+            />
           )}
         </VStack>