Refactor wallet transaction components and enhance voting display

- Updated BallotCard and VoteButton components to improve error handling for wallet address retrieval, ensuring fallback to appWallet for legacy wallets.
- Enhanced the TransactionCard component to display voting information with badges for different vote types (Yes, No, Abstain).
- Improved layout and styling for transaction outputs and signer lists for better user experience.
- Added functionality to copy signer addresses to clipboard with user feedback.
- Refactored wallet access checks in the ballot router to streamline authorization logic.

Author: QSchlegel

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

@@ -285,7 +285,6 @@ export default function BallotCard({
       const proxy = proxies.find((p: any) => p.id === selectedProxyId);
       if (!proxy) throw new Error("Proxy not found");
 
-      if (!multisigWallet) throw new Error("Multisig Wallet could not be built.");
       const meshTxBuilder = getTxBuilder(network);
       const proxyContract = new MeshProxyContract(
         {
@@ -314,7 +313,12 @@ export default function BallotCard({
       });
 
       // Vote using proxy
-      const txBuilder = await proxyContract.voteProxyDrep(votes, utxos, multisigWallet?.getScript().address);
+      // Use multisig wallet address if available, otherwise fallback to appWallet (for legacy wallets)
+      const proxyAddress = multisigWallet?.getScript().address || appWallet?.address;
+      if (!proxyAddress) {
+        throw new Error("Wallet address not found");
+      }
+      const txBuilder = await proxyContract.voteProxyDrep(votes, utxos, proxyAddress);
 
       await newTransaction({
         txBuilder: txBuilder,
@@ -401,7 +405,6 @@ export default function BallotCard({
 
     setLoading(true);
     try {
-      if (!multisigWallet) throw new Error("Multisig Wallet could not be built.");
       // 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;

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

@@ -154,7 +154,12 @@ export default function VoteButton({
       };
 
       // Vote using proxy
-      const txBuilderResult = await proxyContract.voteProxyDrep([voteData], utxos, multisigWallet?.getScript().address);
+      // Use multisig wallet address if available, otherwise fallback to appWallet (for legacy wallets)
+      const proxyAddress = multisigWallet?.getScript().address || appWallet?.address;
+      if (!proxyAddress) {
+        throw new Error("Wallet address not found");
+      }
+      const txBuilderResult = await proxyContract.voteProxyDrep([voteData], utxos, proxyAddress);
 
       await newTransaction({
         txBuilder: txBuilderResult,
@@ -229,8 +234,6 @@ export default function VoteButton({
         setLoading(false);
         return;
       }
-      if (!multisigWallet)
-        throw new Error("Multisig Wallet could not be built.");
       // 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;

src/components/pages/wallet/new-transaction/index.tsx

@@ -178,6 +178,11 @@ export default function PageNewTransaction() {
               unit: outputs[i]!.unit,
               quantity: outputs[i]!.amount,
             },
+            // if unit is not lovelace, add 1160000 lovelace as native assets are not allowed to be in an output alone.
+            ...(outputs[i]!.unit !== "lovelace" ? [{
+              unit: "lovelace",
+              quantity: "1160000",
+            }] : [])
           ]);
         }
       }

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

@@ -23,16 +23,26 @@ export default function PageTransactions() {
       {pendingTransactions && pendingTransactions.length > 0 && (
         <>
           <SectionTitle>Pending Transactions</SectionTitle>
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
-            {pendingTransactions.map((tx) => {
-              return (
-                <TransactionCard
-                  key={tx.id}
-                  walletId={appWallet.id}
-                  transaction={tx}
-                />
-              );
-            })}
+          <div className={`flex justify-center w-full`}>
+            <div
+              className={`grid gap-4 w-full ${
+                pendingTransactions.length === 1
+                  ? "max-w-2xl"
+                  : pendingTransactions.length === 2
+                  ? "max-w-5xl sm:grid-cols-2"
+                  : "max-w-7xl sm:grid-cols-2 lg:grid-cols-3"
+              }`}
+            >
+              {pendingTransactions.map((tx) => {
+                return (
+                  <TransactionCard
+                    key={tx.id}
+                    walletId={appWallet.id}
+                    transaction={tx}
+                  />
+                );
+              })}
+            </div>
           </div>
         </>
       )}