From ccd1598ecc20e37b29bb948f67106eeabf2e3aea Mon Sep 17 00:00:00 2001
From: "Justin R. Evans" <jurevans@gmail.com>
Date: Tue, 20 Aug 2024 11:34:53 -0400
Subject: [PATCH] fix: lengthen keys in ViewKeys component

---
 apps/extension/src/App/Accounts/ViewAccount.tsx |  1 +
 apps/extension/src/Setup/Common/Completion.tsx  |  1 +
 packages/components/src/ViewKeys.tsx            | 14 +++++++++++---
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/extension/src/App/Accounts/ViewAccount.tsx b/apps/extension/src/App/Accounts/ViewAccount.tsx
index 10e907e161..751329db2d 100644
--- 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
index 39fb4f0fff..4d539870d0 100644
--- 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
index 9945d8748d..8ab47a9157 100644
--- 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"}
           />