feat(ledger): improve ledger connect flow

components/screens/AddWallet.tsx

@@ -66,7 +66,7 @@ export default function AddWallet() {
           <button
             className="flex w-full items-center justify-between rounded-xl border border-daintree-700 bg-[#1E343D] p-5 hover:border-white"
             onClick={() => {
-              browser.tabs.create({ url: "/popup.html#/import-ledger-start" });
+              browser.tabs.create({ url: "/popup.html#/import-ledger" });
             }}
           >
             <span className="text-base">Import with Ledger</span>

components/screens/Dashboard.tsx

@@ -13,6 +13,7 @@ import TokenListItem from "@/components/dashboard/TokenListItem.tsx";
 import { NetworkType } from "@/contexts/SettingsContext.tsx";
 import { useTokenListByAddress } from "@/hooks/useTokenListByAddress.ts";
 import { applyDecimal } from "@/lib/krc20.ts";
+import { Tooltip } from "react-tooltip";
 
 export default function Dashboard() {
   const { keyringLock } = useKeyring();
@@ -57,6 +58,10 @@ export default function Dashboard() {
 
   const isAssetListLoading = balance === null;
 
+  const isLedger = wallet?.type === "ledger";
+  const [deployHovered, setDeployHovered] = useState(false);
+  const [mintHovered, setMintHovered] = useState(false);
+
   return (
     <div className="relative flex h-full w-full flex-col px-3">
       {/* Warning popup */}
@@ -210,28 +215,87 @@ export default function Dashboard() {
             <span className="text-daintree-400">Receive</span>
           </button>
 
+          {/* Deploy */}
+          {isLedger && (
+            <Tooltip
+              id="deploy"
+              style={{
+                backgroundColor: "#203C49",
+                fontSize: "12px",
+                fontWeight: 600,
+                padding: "8px",
+              }}
+              isOpen={deployHovered}
+              place="bottom"
+            />
+          )}
           <div
-            className="flex cursor-pointer flex-col items-center gap-2"
+            className={twMerge(
+              "flex cursor-pointer flex-col items-center gap-2",
+              isLedger && "opacity-40",
+            )}
             onClick={() => {
+              if (isLedger) {
+                return;
+              }
+
               const url = new URL(browser.runtime.getURL("/popup.html"));
               url.hash = `/deploy-token`;
 
               browser.tabs.create({ url: url.toString() });
             }}
+            onMouseEnter={() => {
+              if (isLedger) setDeployHovered(true);
+            }}
+            onMouseLeave={() => {
+              if (isLedger) setDeployHovered(false);
+            }}
+            data-tooltip-id="deploy"
+            data-tooltip-content="Ledger doesn’t support deploy function currently."
           >
             <div className="flex h-[46px] w-[46px] items-center justify-center rounded-full bg-white/10">
               <i className="hn hn-pencil text-[20px] text-white"></i>
             </div>
             <span className="text-daintree-400">Deploy</span>
           </div>
+
+          {/* Mint */}
+          {isLedger && (
+            <Tooltip
+              id="mint"
+              style={{
+                backgroundColor: "#203C49",
+                fontSize: "12px",
+                fontWeight: 600,
+                padding: "8px",
+              }}
+              isOpen={mintHovered}
+              place="bottom-start"
+            />
+          )}
           <div
-            className="flex cursor-pointer flex-col items-center gap-2"
+            className={twMerge(
+              "flex cursor-pointer flex-col items-center gap-2",
+              isLedger && "opacity-40",
+            )}
             onClick={() => {
+              if (isLedger) {
+                return;
+              }
+
               const url = new URL(browser.runtime.getURL("/popup.html"));
               url.hash = `/mint-token`;
 
               browser.tabs.create({ url: url.toString() });
             }}
+            onMouseEnter={() => {
+              if (isLedger) setMintHovered(true);
+            }}
+            onMouseLeave={() => {
+              if (isLedger) setMintHovered(false);
+            }}
+            data-tooltip-id="mint"
+            data-tooltip-content="Ledger doesn’t support mint function currently."
           >
             <div className="flex h-[46px] w-[46px] items-center justify-center rounded-full bg-white/10">
               <img alt="castle" className="h-[24px] w-[24px]" src={gavelIcon} />

components/screens/full-pages/AccountsImported.tsx

@@ -27,7 +27,7 @@ export default function AccountsImported() {
             </div>
           </div>
           <button
-            className="rounded-full bg-icy-blue-400 py-5 text-base font-semibold hover:bg-icy-blue-600"
+            className="rounded-full bg-icy-blue-400 py-5 text-base hover:bg-icy-blue-600"
             onClick={onClick}
           >
             Back to extension

components/screens/full-pages/RecoveryPhraseManageAccounts.tsx

@@ -33,5 +33,5 @@ export default function RecoveryPhraseManageAccounts() {
         }
       : undefined;
 
-  return <ManageAccounts listAccounts={listAccounts} />;
+  return <ManageAccounts walletType="mnemonic" listAccounts={listAccounts} />;
 }

components/screens/full-pages/account-management/ManageAccounts.tsx

@@ -23,12 +23,16 @@ export type ListAccountsRequest = {
 };
 
 type ManageAccountsProps = {
+  walletType: "ledger" | "mnemonic";
   listAccounts?: (
     params: ListAccountsRequest,
   ) => Promise<{ publicKeys: string[] }[]>;
 };
 
-export default function ManageAccounts({ listAccounts }: ManageAccountsProps) {
+export default function ManageAccounts({
+  walletType,
+  listAccounts,
+}: ManageAccountsProps) {
   const calledOnce = useRef(false);
 
   const navigate = useNavigate();
@@ -160,6 +164,13 @@ export default function ManageAccounts({ listAccounts }: ManageAccountsProps) {
     return null;
   }
 
+  const subtitle = {
+    mnemonic:
+      "This page shows accounts created from your recovery phrase. Each phrase can generate multiple accounts, and here you can view and manage them.",
+    ledger:
+      "This page shows accounts managed by your Ledger. You can select accounts to import and manage in Kastle.",
+  }[walletType];
+
   return (
     <FormProvider {...form}>
       <form
@@ -169,34 +180,51 @@ export default function ManageAccounts({ listAccounts }: ManageAccountsProps) {
         {/* Header */}
         <Header
           title={action === "manage" ? "Manage Accounts" : "Import Wallet"}
-          subtitle="This page shows accounts created from your recovery phrase. Each phrase can generate multiple accounts, and here you can view and manage them."
+          subtitle={subtitle}
           showPrevious={false}
         />
 
         {/* List */}
         <div className="no-scrollbar flex flex-grow flex-col gap-3 overflow-y-scroll">
           <AccountsTitle />
+          {accountList.length === 0 &&
+            Array.from({ length: pageSize }).map((_, index) => (
+              <div
+                key={index}
+                className="min-h-16 animate-pulse rounded-xl bg-[#203C49]"
+              />
+            ))}
           {accountList.map(({ publicKeys }, accountIndex) => (
             <AccountItem
               key={accountIndex}
               accountIndex={accountIndex}
               publicKeys={publicKeys}
             />
           ))}
+
           <button
             type="button"
             className="inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent px-4 py-3 text-sm font-medium text-icy-blue-400 hover:bg-daintree-700 hover:text-blue-400 focus:bg-blue-100 focus:bg-blue-800/30 focus:text-blue-400 disabled:pointer-events-none disabled:opacity-50"
             onClick={nextPage}
           >
-            <i className="hn hn-angle-down text-[14px]" />
-            <span>Show more</span>
+            {isFetchingAccounts ? (
+              <div
+                className="inline-block size-6 animate-spin self-center rounded-full border-[6px] border-current border-t-[#A2F5FF] text-icy-blue-600"
+                role="status"
+                aria-label="loading"
+              />
+            ) : (
+              <>
+                <i className="hn hn-angle-down text-[14px]" />
+                <span>Show more</span>
+              </>
+            )}
           </button>
         </div>
 
-        {/* Action */}
         <button
           type="submit"
-          className="inline-flex items-center justify-center rounded-full border border-transparent bg-icy-blue-400 p-4 px-4 py-3 text-base font-semibold text-white hover:bg-white/20 hover:text-white focus:bg-white/20 focus:text-white focus:outline-none disabled:pointer-events-none disabled:opacity-50"
+          className="mt-auto inline-flex w-full justify-center gap-x-2 rounded-full border border-transparent bg-icy-blue-400 py-5 text-base text-white hover:bg-icy-blue-600 disabled:bg-daintree-800 disabled:text-[#4B5563]"
         >
           {action === "manage" ? "Update" : "Import Wallet"}
         </button>