Refactor wallet components and enhance DRep ID handling

- Updated CardUI to conditionally render larger titles for wallet info cards based on class names.
- Improved DRep ID retrieval logic across multiple components to ensure consistent fallback to appWallet for legacy wallets.
- Added wallet type detection to enhance user experience with badge displays for Summon and Legacy wallets.
- Refactored transaction components to utilize truncateTokenSymbol for better token symbol presentation.
- Enhanced layout and styling for transaction cards and balance displays for improved user interaction.

Author: QSchlegel

src/components/common/card-content.tsx

@@ -16,10 +16,13 @@ export default function CardUI({
   cardClassName?: string;
   headerDom?: ReactNode;
 }) {
+  // Make title larger for wallet info card (col-span-2)
+  const isLargeTitle = cardClassName?.includes('col-span-2');
+  
   return (
     <Card className={`w-full max-w-4xl ${cardClassName}`}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-xl font-medium">{title}</CardTitle>
+        <CardTitle className={isLargeTitle ? "text-2xl sm:text-3xl font-semibold" : "text-xl font-medium"}>{title}</CardTitle>
         {headerDom && headerDom}
         {icon && (
           <>
@@ -33,7 +36,7 @@ export default function CardUI({
           </>
         )}
       </CardHeader>
-      <CardContent className="overflow-y-auto max-h-[calc(100vh-200px)]">
+      <CardContent>
         <div className="mt-1 flex flex-col gap-2">
           {description && (
             <p className="text-sm text-muted-foreground">{description}</p>

src/components/common/overall-layout/mobile-wrappers/wallet-data-loader-wrapper.tsx

@@ -160,8 +160,9 @@ export default function WalletDataLoaderWrapper({
   }
 
   function dRepIds() {
-    // Use multisig wallet DRep ID if available, otherwise fallback to appWallet
-    const dRepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+    // Use multisig wallet DRep ID if available (it handles no DRep keys by using payment script),
+    // otherwise fallback to appWallet (for legacy wallets without multisigWallet)
+    const dRepId = multisigWallet ? multisigWallet.getDRepId() : appWallet?.dRepId;
     if (!dRepId) return null;
     return getDRepIds(dRepId);
   }

src/components/multisig/proxy/ProxyOverview.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useState, useEffect } from "react";
+import { truncateTokenSymbol } from "@/utils/strings";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -270,7 +271,7 @@ const ProxyCard = memo(function ProxyCard({
                     <div className="text-sm space-y-1">
                       {displayBalance.map((asset: any, index: number) => (
                         <div key={index} className="flex justify-between">
-                          <span>{asset.unit === "lovelace" ? "ADA" : asset.unit}:</span>
+                          <span>{asset.unit === "lovelace" ? "ADA" : truncateTokenSymbol(asset.unit)}:</span>
                           <span className="font-mono">
                             {asset.unit === "lovelace" 
                               ? `${(parseFloat(asset.quantity) / 1000000).toFixed(6)} ADA`

src/components/multisig/proxy/ProxySpend.tsx

@@ -1,4 +1,5 @@
 import React, { memo } from "react";
+import { truncateTokenSymbol } from "@/utils/strings";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -139,7 +140,7 @@ const ProxySpend = memo(function ProxySpend({
                   <div key={index} className="flex items-center justify-between p-3 border rounded-lg bg-muted/50">
                     <div className="flex items-center gap-2">
                       <Badge variant="secondary">
-                        {asset.unit === "lovelace" ? "ADA" : asset.unit}
+                        {asset.unit === "lovelace" ? "ADA" : truncateTokenSymbol(asset.unit)}
                       </Badge>
                       <span className="font-mono text-sm">
                         {asset.unit === "lovelace" 

src/components/pages/homepage/wallets/index.tsx

@@ -9,10 +9,12 @@ import { getFirstAndLast } from "@/utils/strings";
 import { api } from "@/utils/api";
 import { useUserStore } from "@/lib/zustand/user";
 import { useSiteStore } from "@/lib/zustand/site";
-import { buildMultisigWallet } from "@/utils/common";
+import { buildMultisigWallet, getWalletType } from "@/utils/common";
 import { addressToNetwork } from "@/utils/multisigSDK";
 
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Archive } from "lucide-react";
 import PageHeader from "@/components/common/page-header";
 import CardUI from "@/components/common/card-content";
 import RowLabelInfo from "@/components/common/row-label-info";
@@ -236,6 +238,11 @@ function CardWallet({
     walletId: wallet.id,
   });
 
+  // Check wallet type for badge display using centralized detection
+  const walletType = getWalletType(wallet);
+  const isSummonWallet = walletType === 'summon';
+  const isLegacyWallet = walletType === 'legacy';
+
   // Rebuild the multisig wallet to get the correct canonical address for display
   // This ensures we show the correct address even if wallet.address was built incorrectly
   const displayAddress = useMemo(() => {
@@ -260,6 +267,17 @@ function CardWallet({
         title={`${wallet.name}${wallet.isArchived ? " (Archived)" : ""}`}
         description={wallet.description}
         cardClassName=""
+        headerDom={
+          isSummonWallet ? (
+            <Badge 
+              variant="outline" 
+              className="text-xs bg-orange-600/10 border-orange-600/30 text-orange-700 dark:text-orange-400"
+            >
+              <Archive className="h-3 w-3 mr-1" />
+              Summon
+            </Badge>
+          ) : undefined
+        }
       >
         <WalletBalance balance={balance} loadingState={loadingState} />
         <RowLabelInfo

src/components/pages/homepage/wallets/new-wallet-flow/ready/index.tsx

@@ -6,7 +6,7 @@ import { api } from "@/utils/api";
 import { useToast } from "@/hooks/use-toast";
 import { useUserStore } from "@/lib/zustand/user";
 import { useSiteStore } from "@/lib/zustand/site";
-import { buildWallet } from "@/hooks/common";
+import { buildWallet } from "@/utils/common";
 
 import PageHeader from "@/components/common/page-header";
 import {

src/components/pages/wallet/governance/ballot/ballot.tsx

@@ -402,7 +402,9 @@ export default function BallotCard({
     setLoading(true);
     try {
       if (!multisigWallet) throw new Error("Multisig Wallet could not be built.");
-      const dRepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+      // Use multisig wallet DRep ID if available (it handles no DRep keys by using payment script),
+      // otherwise fallback to appWallet (for legacy wallets without multisigWallet)
+      const dRepId = multisigWallet ? multisigWallet.getDRepId() : appWallet?.dRepId;
       if (!dRepId) {
         setAlert("DRep not found");
         toast({

src/components/pages/wallet/governance/card-info.tsx

@@ -56,7 +56,9 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
   } | null>(null);
 
   // Get DRep info for standard mode
-  const currentDrepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+  // Use multisig wallet DRep ID if available (it handles no DRep keys by using payment script),
+  // otherwise fallback to appWallet (for legacy wallets without multisigWallet)
+  const currentDrepId = multisigWallet ? multisigWallet.getDRepId() : appWallet?.dRepId;
   const currentDrepInfo = drepInfo;
 
 

src/components/pages/wallet/governance/proposal/voteButtton.tsx

@@ -231,7 +231,9 @@ export default function VoteButton({
       }
       if (!multisigWallet)
         throw new Error("Multisig Wallet could not be built.");
-      const dRepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+      // Use multisig wallet DRep ID if available (it handles no DRep keys by using payment script),
+      // otherwise fallback to appWallet (for legacy wallets without multisigWallet)
+      const dRepId = multisigWallet ? multisigWallet.getDRepId() : appWallet?.dRepId;
       if (!dRepId) {
         setAlert("DRep not found");
         toast({

src/components/pages/wallet/governance/proposals.tsx

@@ -83,7 +83,9 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
   const order = "desc";
 
   // Get DRep ID for fetching voting history (proxy mode or standard mode)
-  const standardDrepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+  // Use multisig wallet DRep ID if available (it handles no DRep keys by using payment script),
+  // otherwise fallback to appWallet (for legacy wallets without multisigWallet)
+  const standardDrepId = multisigWallet ? multisigWallet.getDRepId() : appWallet?.dRepId;
 
   // Get proxy DRep ID if proxy is enabled
   useEffect(() => {