Use QR code placeholder icon on ckBTC wallet page (#4176)

# Motivation

We want to be able to render the wallet pages when the user is not
signed in.
On the ckBTC wallet page we show a QR code with the BTC deposit address.
When the user is not signed in, there is no deposit address so we want
to show a placeholder icon instead.

<img width="788" alt="Screenshot 2024-01-11 at 14 57 09"
src="https://github.com/dfinity/nns-dapp/assets/122978264/1b0f25b3-ad5f-40c0-b473-f447f5d71226">

<img width="418" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/122978264/e397af9b-1e4a-43dc-9c73-0c3523af72b2">


# Changes

1. Remove the white background for the QR code if the user is not signed
in.
2. Show the QR code icon instead.

# Tests

Existing tests updated.

# Todos

- [ ] Add entry to changelog (if necessary).
not user visible yet

frontend/src/lib/components/accounts/CkBTCInfoCard.svelte

@@ -15,6 +15,7 @@
     QRCode,
     Copy,
     Html,
+    IconQRCode,
   } from "@dfinity/gix-components";
   import {
     BITCOIN_BLOCK_EXPLORER_MAINNET_URL,
@@ -91,8 +92,8 @@
     </div>
   </div>
 
-  <div class="qr-code">
-    {#if nonNullish(account)}
+  {#if nonNullish(account)}
+    <div class="qr-code">
       {#if nonNullish(btcAddress)}
         <QRCode value={btcAddress}>
           <div class="logo" slot="logo">
@@ -108,8 +109,12 @@
       {:else}
         <Spinner />
       {/if}
-    {/if}
-  </div>
+    </div>
+  {:else}
+    <div class="qr-code-placeholder" data-tid="qr-code-placeholder">
+      <IconQRCode />
+    </div>
+  {/if}
 
   <div class="address-section">
     <div class="content-cell-details">
@@ -216,6 +221,13 @@
     }
   }
 
+  .qr-code-placeholder {
+    --qr-code-size: calc(18 * var(--padding));
+    grid-area: qr;
+    width: var(--qr-code-size);
+    height: var(--qr-code-size);
+  }
+
   .grid {
     display: grid;
     grid-template-areas:

frontend/src/tests/lib/components/accounts/CkBTCInfoCard.spec.ts

@@ -102,11 +102,13 @@ describe("CkBTCInfoCard", () => {
       expect(await po.hasSpinner()).toBe(true);
       expect(await po.hasSkeletonText()).toBe(true);
       expect(await po.hasQrCode()).toBe(false);
+      expect(await po.hasQrCodePlaceholder()).toBe(false);
       expect(await po.hasAddress()).toBe(false);
       await resolveBtcAddress();
       expect(await po.hasSpinner()).toBe(false);
       expect(await po.hasSkeletonText()).toBe(false);
       expect(await po.hasQrCode()).toBe(true);
+      expect(await po.hasQrCodePlaceholder()).toBe(false);
       expect(await po.hasAddress()).toBe(true);
     });
   });
@@ -233,6 +235,11 @@ describe("CkBTCInfoCard", () => {
       expect(await po.hasQrCode()).toBe(false);
     });
 
+    it("should show a QR code placeholder", async () => {
+      const po = await renderComponent(props);
+      expect(await po.hasQrCodePlaceholder()).toBe(true);
+    });
+
     it("should not show a spinner", async () => {
       const po = await renderComponent(props);
       expect(await po.hasSpinner()).toBe(false);

frontend/src/tests/page-objects/CkBTCInfoCard.page-object.ts

@@ -48,4 +48,8 @@ export class CkBTCInfoCardPo extends BasePageObject {
   hasQrCode(): Promise<boolean> {
     return this.isPresent("qr-code");
   }
+
+  hasQrCodePlaceholder(): Promise<boolean> {
+    return this.isPresent("qr-code-placeholder");
+  }
 }