fix: lengthen keys in ViewKeys component

anoma · Aug 20, 2024 · ccd1598 · ccd1598
1 parent 4488db2
commit ccd1598
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/apps/extension/src/App/Accounts/ViewAccount.tsx b/apps/extension/src/App/Accounts/ViewAccount.tsx
@@ -61,6 +61,7 @@ export const ViewAccount = (): JSX.Element => {
               publicKeyAddress={parentAccount.publicKey ?? ""}
               transparentAccountAddress={transparentAddress}
               shieldedAccountAddress={shieldedAddress}
+              trimCharacters={21}
             />
           </Stack>
           <ActionButton size="md" onClick={() => navigate(-1)}>

diff --git a/apps/extension/src/Setup/Common/Completion.tsx b/apps/extension/src/Setup/Common/Completion.tsx
@@ -134,6 +134,7 @@ export const Completion: React.FC<Props> = (props) => {
             publicKeyAddress={publicKeyAddress}
             transparentAccountAddress={transparentAccountAddress}
             shieldedAccountAddress={shieldedAccountAddress}
+            trimCharacters={35}
             footer={
               <ActionButton
                 size="lg"

diff --git a/packages/components/src/ViewKeys.tsx b/packages/components/src/ViewKeys.tsx
@@ -9,6 +9,7 @@ type ViewKeysProps = {
   shieldedAccountAddress?: string;
   viewingKeys?: string;
   footer?: React.ReactNode;
+  trimCharacters?: number;
 };
 
 export const ViewKeys = ({
@@ -17,6 +18,7 @@ export const ViewKeys = ({
   shieldedAccountAddress,
   viewingKeys,
   footer,
+  trimCharacters = 16,
 }: ViewKeysProps): JSX.Element => {
   return (
     <Stack
@@ -29,7 +31,10 @@ export const ViewKeys = ({
           <Input
             label="Your Transparent Address"
             variant="ReadOnlyCopy"
-            valueToDisplay={shortenAddress(transparentAccountAddress, 16)}
+            valueToDisplay={shortenAddress(
+              transparentAccountAddress,
+              trimCharacters
+            )}
             value={transparentAccountAddress}
             theme={"primary"}
           />
@@ -38,7 +43,7 @@ export const ViewKeys = ({
           <Input
             label="Public Key"
             variant="ReadOnlyCopy"
-            valueToDisplay={shortenAddress(publicKeyAddress, 16)}
+            valueToDisplay={shortenAddress(publicKeyAddress, trimCharacters)}
             value={publicKeyAddress}
             theme={"primary"}
           />
@@ -48,7 +53,10 @@ export const ViewKeys = ({
             label="Your Shielded Address"
             variant="ReadOnlyCopy"
             readOnly={true}
-            valueToDisplay={shortenAddress(shieldedAccountAddress, 16)}
+            valueToDisplay={shortenAddress(
+              shieldedAccountAddress,
+              trimCharacters
+            )}
             value={shieldedAccountAddress}
             theme={"secondary"}
           />