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

Author: bitgoAaron

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);

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');
   }

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;
 }
 

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,
   });
 }
 

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