Add contact management and enhance transaction UI

- Introduced a new Contact model in the Prisma schema to manage user contacts associated with wallets.
- Updated wallet info page to include a ManageContacts component for easy access to contacts.
- Enhanced transaction components to display address labels for recipients, improving clarity on sender and recipient identities.
- Implemented a contacts dialog for selecting contacts when creating transactions, streamlining the user experience.
- Improved UTxO selection with search functionality and detailed summaries of selected UTxOs, enhancing transaction management.
- Refactored various components to ensure consistent styling and improved user interaction.

Author: QSchlegel

prisma/migrations/20251219114630_add_contact_model/migration.sql

@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "Contact" (
+    "id" TEXT NOT NULL,
+    "walletId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "address" TEXT NOT NULL,
+    "description" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Contact_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "Contact_walletId_idx" ON "Contact"("walletId");
+
+-- CreateIndex
+CREATE INDEX "Contact_address_idx" ON "Contact"("address");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Contact_walletId_address_key" ON "Contact"("walletId", "address");
+

prisma/schema.prisma

@@ -163,3 +163,17 @@ model Migration {
   @@index([status])
   @@index([createdAt])
 }
+
+model Contact {
+  id          String   @id @default(cuid())
+  walletId    String // The multisig wallet that owns this contact
+  name        String
+  address     String
+  description String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  @@unique([walletId, address])
+  @@index([walletId])
+  @@index([address])
+}

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

@@ -401,6 +401,26 @@ function ShowInfo({ appWallet }: { appWallet: Wallet }) {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {/* Left Column */}
         <div className="space-y-4">
+          {/* Signing Threshold - Above Address */}
+          <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border/30">
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-muted-foreground mb-0.5">Signing Threshold</div>
+              <div className="text-sm font-medium">{getSignersText()}</div>
+            </div>
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              {Array.from({ length: signersCount }).map((_, index) => (
+                <User
+                  key={index}
+                  className={`h-5 w-5 sm:h-6 sm:w-6 ${
+                    index < requiredCount
+                      ? "text-foreground opacity-100"
+                      : "text-muted-foreground opacity-30"
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+          
           {/* Address */}
           <RowLabelInfo
             label="Address"
@@ -451,31 +471,10 @@ function ShowInfo({ appWallet }: { appWallet: Wallet }) {
 
         {/* Right Column */}
         <div className="space-y-4">
-          {/* Balance */}
-          <RowLabelInfo 
-            label="Balance" 
-            value={`${balance} ₳`}
-            allowOverflow={false}
-          />
-          
-          {/* Signing Threshold */}
-          <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border/30">
-            <div className="flex-1 min-w-0">
-              <div className="text-xs font-medium text-muted-foreground mb-0.5">Signing Threshold</div>
-              <div className="text-sm font-medium">{getSignersText()}</div>
-            </div>
-            <div className="flex items-center gap-1.5 flex-shrink-0">
-              {Array.from({ length: signersCount }).map((_, index) => (
-                <User
-                  key={index}
-                  className={`h-5 w-5 sm:h-6 sm:w-6 ${
-                    index < requiredCount
-                      ? "text-foreground opacity-100"
-                      : "text-muted-foreground opacity-30"
-                  }`}
-                />
-              ))}
-            </div>
+          {/* Balance - Larger Display */}
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium text-muted-foreground">Balance</div>
+            <div className="text-2xl sm:text-3xl font-semibold">{balance} ₳</div>
           </div>
         </div>
       </div>

src/components/pages/wallet/info/index.tsx

@@ -2,6 +2,7 @@ import useAppWallet from "@/hooks/useAppWallet";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
 import CardInfo from "./card-info";
 import CardSigners from "./signers/card-signers";
+import { ManageContacts } from "./manage-contacts";
 import { MigrateWallet } from "./migrate-wallet";
 import { ArchiveWallet } from "./archive-wallet";
 import { UpgradeStakingWallet } from "./upgrade-staking-wallet";
@@ -19,6 +20,7 @@ export default function WalletInfo() {
       <div className="grid grid-cols-1 gap-4 sm:gap-6">
         <CardInfo appWallet={appWallet} />
         <CardSigners appWallet={appWallet} />
+        <ManageContacts appWallet={appWallet} />
         <MigrateWallet appWallet={appWallet} />
         <ProxyControlCard />
         {multisigWallet && <UpgradeStakingWallet mWallet={multisigWallet} appWallet={appWallet} />}