feat(wallet): rebrand ledger import accounts (#1962)

* feat: refine import from ledger * feat: add icon * feat: improvements * Update apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx Co-authored-by: JCNoguera <[email protected]> --------- Co-authored-by: JCNoguera <[email protected]>
iotaledger · Aug 28, 2024 · e14a5f4 · e14a5f4
1 parent 380cc10
commit e14a5f4
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 147 deletions.
diff --git a/apps/ui-icons/src/Loader.tsx b/apps/ui-icons/src/Loader.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgLoader(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M5.53285 9.32121C5.00303 10.6003 4.86441 12.0078 5.13451 13.3656C5.4046 14.7235 6.07129 15.9708 7.05026 16.9497C8.02922 17.9287 9.2765 18.5954 10.6344 18.8655C11.9922 19.1356 13.3997 18.997 14.6788 18.4672C15.9579 17.9373 17.0511 17.0401 17.8203 15.889C18.5895 14.7378 19 13.3845 19 12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89471 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C12.5523 3 13 3.44772 13 4C13 4.55228 12.5523 5 12 5C10.6155 5 9.26215 5.41054 8.11101 6.17971C6.95987 6.94888 6.06266 8.04213 5.53285 9.32121Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}
diff --git a/apps/ui-icons/src/index.ts b/apps/ui-icons/src/index.ts
@@ -44,6 +44,7 @@ export { default as Ledger } from './Ledger';
 export { default as ListViewLarge } from './ListViewLarge';
 export { default as ListViewMedium } from './ListViewMedium';
 export { default as ListViewSmall } from './ListViewSmall';
+export { default as Loader } from './Loader';
 export { default as LockLocked } from './LockLocked';
 export { default as LockUnlocked } from './LockUnlocked';
 export { default as Logout } from './Logout';

diff --git a/apps/ui-icons/svgs/loader.svg b/apps/ui-icons/svgs/loader.svg
diff --git a/apps/wallet/src/ui/app/components/Overlay.tsx b/apps/wallet/src/ui/app/components/Overlay.tsx
@@ -16,6 +16,7 @@ interface OverlayProps {
     closeIcon?: ReactNode | null;
     setShowModal?: (showModal: boolean) => void;
     background?: 'bg-iota-lightest';
+    titleCentered?: boolean;
     showBackButton?: boolean;
 }
 
@@ -24,8 +25,9 @@ export function Overlay({
     children,
     showModal,
     closeOverlay,
-    showBackButton,
     setShowModal,
+    titleCentered = true,
+    showBackButton,
 }: OverlayProps) {
     const closeModal = useCallback(
         (e: React.MouseEvent<HTMLElement>) => {
@@ -42,9 +44,9 @@ export function Overlay({
                 {title && (
                     <Header
                         onBack={showBackButton ? handleBack : undefined}
-                        titleCentered
                         title={title}
                         onClose={closeModal}
+                        titleCentered={titleCentered}
                     />
                 )}
                 <div className="flex w-full flex-1 overflow-hidden bg-neutral-100 p-md">

diff --git a/apps/wallet/src/ui/app/components/ledger/LedgerAccountList.tsx b/apps/wallet/src/ui/app/components/ledger/LedgerAccountList.tsx
@@ -2,8 +2,19 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { LedgerAccountRow } from './LedgerAccountRow';
+import {
+    Table,
+    TableBody,
+    TableBodyRow,
+    TableCell,
+    TableCellType,
+    TableHeader,
+    TableHeaderCell,
+    TableHeaderRow,
+} from '@iota/apps-ui-kit';
 import { type DerivedLedgerAccount } from './useDeriveLedgerAccounts';
+import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { useBalance, useFormatCoin, useResolveIotaNSName } from '@iota/core';
 
 export type SelectableLedgerAccount = DerivedLedgerAccount & {
     isSelected: boolean;
@@ -12,26 +23,57 @@ export type SelectableLedgerAccount = DerivedLedgerAccount & {
 interface LedgerAccountListProps {
     accounts: SelectableLedgerAccount[];
     onAccountClick: (account: SelectableLedgerAccount) => void;
+    selectAll: () => void;
 }
 
-export function LedgerAccountList({ accounts, onAccountClick }: LedgerAccountListProps) {
+export function LedgerAccountList({ accounts, onAccountClick, selectAll }: LedgerAccountListProps) {
+    const headersData = [
+        { label: 'Address', columnKey: 1 },
+        { label: '', columnKey: 2 },
+    ];
+
+    const rowsData = accounts.map((account) => {
+        const { data: coinBalance } = useBalance(account.address);
+        const { data: domainName } = useResolveIotaNSName(account.address);
+        const [totalAmount, totalAmountSymbol] = useFormatCoin(
+            coinBalance?.totalBalance ?? 0,
+            IOTA_TYPE_ARG,
+        );
+
+        return [
+            {
+                label: domainName ?? formatAddress(account.address),
+            },
+            {
+                label: `${totalAmount} ${totalAmountSymbol}`,
+            },
+        ];
+    });
+
     return (
-        <ul className="m-0 list-none p-0">
-            {accounts.map((account) => (
-                <li className="pb-2 pt-2 first:pt-1" key={account.address}>
-                    <button
-                        className="w-full cursor-pointer appearance-none border-0 bg-transparent p-0"
-                        onClick={() => {
-                            onAccountClick(account);
-                        }}
-                    >
-                        <LedgerAccountRow
-                            isSelected={account.isSelected}
-                            address={account.address}
-                        />
-                    </button>
-                </li>
-            ))}
-        </ul>
+        <Table
+            hasCheckboxColumn={true}
+            onRowCheckboxChange={(_, index) => {
+                onAccountClick(accounts[index]);
+            }}
+            onHeaderCheckboxChange={() => selectAll()}
+        >
+            <TableHeader>
+                <TableHeaderRow>
+                    {headersData.map((header, index) => (
+                        <TableHeaderCell key={index} {...header} />
+                    ))}
+                </TableHeaderRow>
+            </TableHeader>
+            <TableBody>
+                {rowsData.map((row, rowIndex) => (
+                    <TableBodyRow key={rowIndex} rowIndex={rowIndex}>
+                        {row.map((cell, cellIndex) => (
+                            <TableCell key={cellIndex} type={TableCellType.Text} {...cell} />
+                        ))}
+                    </TableBodyRow>
+                ))}
+            </TableBody>
+        </Table>
     );
 }
diff --git a/apps/wallet/src/ui/app/components/ledger/LedgerAccountRow.tsx b/apps/wallet/src/ui/app/components/ledger/LedgerAccountRow.tsx
diff --git a/apps/wallet/src/ui/app/components/ledger/index.ts b/apps/wallet/src/ui/app/components/ledger/index.ts
@@ -4,6 +4,5 @@
 export * from './ConnectLedgerModal';
 export * from './IotaLedgerClientProvider';
 export * from './LedgerAccountList';
-export * from './LedgerAccountRow';
 export * from './ledgerErrors';
 export * from './useDeriveLedgerAccounts';