🎨 (ledger-button) [NO-ISSUE]: UI fixes - format address, icon sizes, home layout (#279)

Author: pdeville-ledger

apps/test-dapp/src/components/modals/ProviderRequestModal.tsx

@@ -38,7 +38,10 @@ interface ProviderRequestModalProps {
   onClose: () => void;
 }
 
-export function ProviderRequestModal({ onSubmit, onClose }: ProviderRequestModalProps) {
+export function ProviderRequestModal({
+  onSubmit,
+  onClose,
+}: ProviderRequestModalProps) {
   const methodRef = useRef<HTMLSelectElement>(null);
   const paramsRef = useRef<HTMLTextAreaElement>(null);
 
@@ -68,7 +71,9 @@ export function ProviderRequestModal({ onSubmit, onClose }: ProviderRequestModal
           </Select>
         </Field>
         <Field className={styles["transactions__field"]}>
-          <Label className={styles["transactions__label"]}>Params (JSON array)</Label>
+          <Label className={styles["transactions__label"]}>
+            Params (JSON array)
+          </Label>
           <Textarea
             ref={paramsRef}
             className={styles["transactions__textarea"]}

packages/ledger-button/src/components/atom/icon/ledger-icon.ts

@@ -86,6 +86,7 @@ export class LedgerIcon extends LitElement {
   private get iconClasses(): string {
     const sizeClasses: { [key: string]: string } = {
       small: "lb-w-16 lb-h-16",
+      20: "lb-w-20 lb-h-20",
       medium: "lb-w-24 lb-h-24",
       large: "lb-w-32 lb-h-32",
     };

packages/ledger-button/src/components/molecule/account-item/ledger-account-item.ts

@@ -8,6 +8,7 @@ import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
 import { tailwindElement } from "../../../tailwind-element.js";
+import { formatAddress } from "../../../utils/format-address.js";
 
 const accountItemVariants = cva([
   "lb-flex lb-min-w-full lb-cursor-pointer lb-justify-between lb-p-12",
@@ -120,20 +121,13 @@ export class LedgerAccountItemMolecule extends LitElement {
     );
   }
 
-  private formatAddress(address: string): string {
-    if (!address || address.length <= 8) {
-      return address;
-    }
-    return `${address.slice(0, 6)}...${address.slice(-4)}`;
-  }
-
   private renderAccountInfo() {
     return html`
       <div class="lb-flex lb-flex-col lb-gap-4 lb-text-left">
         <span class="lb-text-base lb-body-2-semi-bold">${this.title}</span>
         <div class="lb-flex lb-items-center lb-gap-4">
           <span class="lb-whitespace-nowrap lb-text-muted lb-body-3">
-            ${this.formatAddress(this.address)}
+            ${formatAddress(this.address)}
           </span>
           <ledger-crypto-icon
             ledger-id=${this.currencyId}

packages/ledger-button/src/components/molecule/account-switch/ledger-account-switch.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { tailwindElement } from "../../../tailwind-element.js";
+import { formatAddress } from "../../../utils/format-address.js";
 
 const styles = css`
   :host {
@@ -37,10 +38,6 @@ export class LedgerAccountSwitch extends LitElement {
     );
   };
 
-  private formatAddress(address: string) {
-    return address.slice(0, 6) + "..." + address.slice(-4);
-  }
-
   override render() {
     if (!this.account) {
       return;
@@ -68,7 +65,7 @@ export class LedgerAccountSwitch extends LitElement {
         <span
           class="lb-grow lb-basis-80 lb-overflow-hidden lb-text-ellipsis lb-text-nowrap lb-text-muted lb-body-3"
         >
-          ${this.formatAddress(this.account.freshAddress)}
+          ${formatAddress(this.account.freshAddress)}
         </span>
       </button>
     `;

packages/ledger-button/src/components/molecule/wallet-actions/ledger-wallet-actions.ts

@@ -71,14 +71,10 @@ export class LedgerWalletActions extends LitElement {
         aria-label=${this.getActionLabel(action)}
       >
         <div class="lb-h-20 lb-w-20 lb-shrink-0">
-          <ledger-icon
-            fillColor="white"
-            type=${action}
-            size="medium"
-          ></ledger-icon>
+          <ledger-icon fillColor="white" type=${action} size="20"></ledger-icon>
         </div>
         <span
-          class="lb-overflow-hidden lb-text-ellipsis lb-text-center lb-text-base"
+          class="lb-overflow-hidden lb-text-ellipsis lb-text-center lb-body-3"
           >${this.getActionLabel(action)}</span
         >
       </button>

packages/ledger-button/src/domain/account-tokens/account-tokens.ts

@@ -12,6 +12,7 @@ import {
 } from "../../context/language-context.js";
 import { Navigation } from "../../shared/navigation.js";
 import { tailwindElement } from "../../tailwind-element.js";
+import { formatAddress } from "../../utils/format-address.js";
 import { AccountTokenController } from "./account-token-controller.js";
 
 @customElement("account-tokens-screen")
@@ -39,13 +40,6 @@ export class AccountTokensScreen extends LitElement {
   @property({ attribute: false })
   public languages!: LanguageContext;
 
-  private formatAddress(address: string): string {
-    if (!address || address.length <= 8) {
-      return address;
-    }
-    return `${address.slice(0, 6)}...${address.slice(-4)}`;
-  }
-
   private renderTokenItem = (token: Token) => {
     return html`
       <ledger-chain-item
@@ -105,9 +99,7 @@ export class AccountTokensScreen extends LitElement {
                 >${this.controller.account.name}</span
               >
               <span class="lb-text-muted lb-body-3"
-                >${this.formatAddress(
-                  this.controller.account.freshAddress,
-                )}</span
+                >${formatAddress(this.controller.account.freshAddress)}</span
               >
             </div>
           </div>

packages/ledger-button/src/domain/home/ledger-home.ts

@@ -181,10 +181,10 @@ export class LedgerHomeScreen extends LitElement {
     return html`
       <div class="lb-relative lb-h-full">
         <div
-          class="lb-flex lb-flex-col lb-items-stretch lb-gap-24 lb-p-24 lb-pt-0"
+          class="lb-flex lb-flex-col lb-items-stretch lb-gap-12 lb-p-24 lb-pt-0"
         >
           <div
-            class="lb-flex lb-flex-col lb-gap-32 lb-rounded-md lb-bg-muted lb-p-16"
+            class="lb-flex lb-flex-col lb-gap-24 lb-rounded-md lb-bg-muted lb-p-16"
           >
             <div class="lb-flex lb-flex-row lb-items-center lb-justify-between">
               <ledger-account-switch
@@ -213,14 +213,16 @@ export class LedgerHomeScreen extends LitElement {
             @wallet-action-click=${this.handleWalletActionClick}
           ></ledger-wallet-actions>
 
-          <ledger-tabs
-            .tabs=${[
-              { id: "tokens", label: "Tokens" },
-              { id: "transactions", label: "Transactions" },
-            ]}
-            .selectedId=${this.activeTab}
-            @tab-change=${this.handleTabChange}
-          ></ledger-tabs>
+          <div class="lb-mt-12">
+            <ledger-tabs
+              .tabs=${[
+                { id: "tokens", label: "Tokens" },
+                { id: "transactions", label: "Transactions" },
+              ]}
+              .selectedId=${this.activeTab}
+              @tab-change=${this.handleTabChange}
+            ></ledger-tabs>
+          </div>
 
           ${this.activeTab === "tokens"
             ? html`<token-list-screen></token-list-screen>`

packages/ledger-button/src/utils/format-address.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats an address to display a truncated version with ellipsis.
+ * Example: "0xC5D2460186F7233C927E7DB2DCC703C0E500B653CA82273B7BFAD8045D85A470" -> "0xC5...A470"
+ *
+ * @param address - The full address string to format
+ * @returns The formatted address with first 4 characters + "..." + last 4 characters
+ */
+export function formatAddress(address: string): string {
+  if (!address || address.length <= 8) {
+    return address;
+  }
+  return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}