From ce1d32a8061f15cb85dfc268ba5850b1aa2782c3 Mon Sep 17 00:00:00 2001
From: Aaron Loe <aaronloe@bitgo.com>
Date: Wed, 16 Jul 2025 09:43:14 -0700
Subject: [PATCH] feat: optional walletLabel key card

- the new UI will allow users to create
  keycards before specifying a wallet
  label, so we need to make this field
  optional & not render the label if
  its not specified

Ticket: CE-6422
---
 modules/key-card/src/drawKeycard.ts           | 20 +++++++++++++------
 modules/key-card/src/index.ts                 |  6 ++++--
 modules/key-card/src/types.ts                 |  2 +-
 .../src/components/KeyCard/fixtures.ts        |  4 ++--
 .../web-demo/src/components/KeyCard/index.tsx |  7 +++++--
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/modules/key-card/src/drawKeycard.ts b/modules/key-card/src/drawKeycard.ts
index 12a3723dbe..a37d093b9c 100644
--- a/modules/key-card/src/drawKeycard.ts
+++ b/modules/key-card/src/drawKeycard.ts
@@ -149,12 +149,20 @@ export async function drawKeycard({
   const date = new Date().toDateString();
   y = moveDown(y, margin);
   doc.setFontSize(font.body).setTextColor(color.gray);
-  const title = curve ? KeyCurveName[curve] + ' key:' : 'wallet named:';
-  doc.text('Created on ' + date + ' for ' + title, left(0), y);
-  // copy
-  y = moveDown(y, 25);
-  doc.setFontSize(font.subheader).setTextColor(color.black);
-  doc.text(walletLabel, left(0), y);
+
+  if (curve || walletLabel) {
+    const title = curve ? KeyCurveName[curve] + ' key:' : 'wallet named:';
+    doc.text('Created on ' + date + ' for ' + title, left(0), y);
+    // copy
+    y = moveDown(y, 25);
+    if (walletLabel) {
+      doc.setFontSize(font.subheader).setTextColor(color.black);
+      doc.text(walletLabel, left(0), y);
+    }
+  } else {
+    doc.text('Created on ' + date, left(0), y);
+    y = moveDown(y, 25);
+  }
   if (!curve) {
     // Red Bar
     y = moveDown(y, 20);
diff --git a/modules/key-card/src/index.ts b/modules/key-card/src/index.ts
index fbbe764298..36a6cd02b1 100644
--- a/modules/key-card/src/index.ts
+++ b/modules/key-card/src/index.ts
@@ -15,11 +15,13 @@ export async function generateKeycard(params: GenerateKeycardParams): Promise<vo
     const questions = generateFaq(params.coin.fullName);
     const qrData = generateQrData(params);
     const keycard = await drawKeycard({ ...params, questions, qrData });
-    keycard.save(`BitGo Keycard for ${params.walletLabel}.pdf`);
+    const label = params.walletLabel || params.coin.fullName;
+    keycard.save(`BitGo Keycard for ${label}.pdf`);
   } else if ('curve' in params) {
     const data = generateParamsForKeyCreation(params);
     const keycard = await drawKeycard(data);
-    keycard.save(`BitGo Keycard for ${params.walletLabel}.pdf`);
+    const label = params.walletLabel || params.curve;
+    keycard.save(`BitGo Keycard for ${label}.pdf`);
   } else {
     throw new Error('Either curve or coin must be provided');
   }
diff --git a/modules/key-card/src/types.ts b/modules/key-card/src/types.ts
index f61ddfc0b9..1778a48095 100644
--- a/modules/key-card/src/types.ts
+++ b/modules/key-card/src/types.ts
@@ -54,7 +54,7 @@ export interface IDrawKeyCard {
   keyCardImage?: HTMLImageElement;
   qrData: QrData;
   questions: FAQ[];
-  walletLabel: string;
+  walletLabel?: string;
   curve?: KeyCurve;
 }
 
diff --git a/modules/web-demo/src/components/KeyCard/fixtures.ts b/modules/web-demo/src/components/KeyCard/fixtures.ts
index 35cab37644..1c3697ee9e 100644
--- a/modules/web-demo/src/components/KeyCard/fixtures.ts
+++ b/modules/web-demo/src/components/KeyCard/fixtures.ts
@@ -112,7 +112,7 @@ export async function downloadKeycardForDKLsTSS() {
   });
 }
 
-export async function downloadKeycardForHotLtcWallet() {
+export async function downloadKeycardForHotLtcWallet(walletLabel = '') {
   const userKeychain: Keychain = {
     id: '63e107b5ef7bba0007145e41065b26a6',
     pub: 'xpub661MyMwAqRbcFXFJ8wZhWjEiFg9wM89UamPyP3XsnEHg2VJ4m7wE7ALLszakPiEEy5cH9FCAvCrx1cL6rLE6jewaa1ubP8DjqsDtP4R7w5g',
@@ -142,7 +142,7 @@ export async function downloadKeycardForHotLtcWallet() {
     passcodeEncryptionCode: '654321',
     passphrase: 'test_wallet_passphrase',
     userKeychain,
-    walletLabel: 'Hot LTC Wallet',
+    walletLabel,
   });
 }
 
diff --git a/modules/web-demo/src/components/KeyCard/index.tsx b/modules/web-demo/src/components/KeyCard/index.tsx
index 547978c089..21f42ac0a7 100644
--- a/modules/web-demo/src/components/KeyCard/index.tsx
+++ b/modules/web-demo/src/components/KeyCard/index.tsx
@@ -13,8 +13,11 @@ const KeyCard = () => {
     <React.Fragment>
       <h3>Key Card</h3>
       <br />
-      <button onClick={downloadKeycardForHotLtcWallet}>
-        Download for Hot LTC Wallet
+      <button onClick={() => downloadKeycardForHotLtcWallet('Hot LTC Wallet')}>
+        Download for Hot LTC Wallet (With Label)
+      </button>
+      <button onClick={() => downloadKeycardForHotLtcWallet('')}>
+        Download for Hot LTC Wallet (Without Label)
       </button>
       <button onClick={downloadKeycardForDKLsTSS}>
         Download for Hot DKLS Wallet