chore: add additional txn history types (Vote, Withdraw, Redelegate, Reveal PK)

apps/namadillo/src/App/Transactions/BundledTransactionCard.tsx

@@ -0,0 +1,99 @@
+import { CopyToClipboardControl, Tooltip } from "@namada/components";
+import { shortenAddress } from "@namada/utils";
+import { TransactionHistory as TransactionHistoryType } from "atoms/transactions/atoms";
+import clsx from "clsx";
+import {
+  IoCheckmarkCircleOutline,
+  IoInformationCircleOutline,
+} from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+import { TransactionCard } from "./TransactionCard";
+
+type Props = {
+  revealPkTx: TransactionHistoryType;
+  mainTx: TransactionHistoryType;
+};
+
+export const BundledTransactionCard: React.FC<Props> = ({
+  revealPkTx,
+  mainTx,
+}) => {
+  const publicKey =
+    revealPkTx.tx?.data ? JSON.parse(revealPkTx.tx.data).public_key : "";
+
+  return (
+    <article
+      className={twMerge(
+        clsx(
+          "bg-neutral-800 rounded-sm px-5 text-white border border-transparent",
+          "transition-colors duration-200 hover:border-neutral-500"
+        )
+      )}
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-center py-5 font-semibold gap-5 relative">
+        <div className="flex items-center gap-3 relative">
+          <i className="text-success text-2xl relative z-10">
+            <IoCheckmarkCircleOutline className="ml-1 mt-0.5 w-10 h-10" />
+          </i>
+          <div className="absolute left-6 top-12 w-0.5 h-10 border-l-2 border-dashed border-success z-0"></div>
+          <div className="flex flex-col">
+            <h3 className="flex items-center text-success">
+              Reveal PK
+              <div className="relative group/tooltip ml-1.5">
+                <IoInformationCircleOutline className="w-4 h-4 text-neutral-400 cursor-help" />
+                <Tooltip
+                  position="bottom"
+                  className="p-3 w-[350px] z-50 text-sm"
+                >
+                  Revealing your public key registers your newly generated
+                  Namada account on-chain so the network can associate deposits,
+                  stake, and future signatures with a unique identity while
+                  keeping your private key secret
+                </Tooltip>
+              </div>
+              <div className="relative group/tooltip ml-1">
+                <CopyToClipboardControl
+                  className="text-neutral-400"
+                  value={revealPkTx.tx?.wrapperId ?? ""}
+                />
+                <Tooltip position="right" className="p-2 -mr-3 w-[150px] z-10">
+                  Copy transaction hash
+                </Tooltip>
+              </div>
+            </h3>
+            <h3 className="text-neutral-400">
+              {revealPkTx.timestamp ?
+                new Date(revealPkTx.timestamp * 1000)
+                  .toLocaleString("en-US", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })
+                  .replace(",", "")
+              : "-"}
+            </h3>
+          </div>
+        </div>
+
+        <div className="flex flex-col">
+          <h4>Public Key</h4>
+          <h4 className="flex items-center gap-2">
+            <span className="font-mono text-sm">
+              {shortenAddress(publicKey, 12, 12)}
+            </span>
+            <CopyToClipboardControl
+              className="text-neutral-400"
+              value={publicKey}
+            />
+          </h4>
+        </div>
+      </div>
+
+      <div className="[&>article]:bg-transparent [&>article]:border-none [&>article]:rounded-none [&>article]:hover:border-none [&>article]:px-0 [&>article]:py-5 [&>article]:my-0 [&>article>div:first-child>i]:relative [&>article>div:first-child>i]:z-10">
+        <TransactionCard tx={mainTx} />
+      </div>
+    </article>
+  );
+};

apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx

@@ -1,9 +1,15 @@
 import { CopyToClipboardControl, Tooltip } from "@namada/components";
 import { shortenAddress } from "@namada/utils";
+import { FiatCurrency } from "App/Common/FiatCurrency";
 import { TokenCurrency } from "App/Common/TokenCurrency";
 import { AssetImage } from "App/Transfer/AssetImage";
 import { isShieldedAddress, isTransparentAddress } from "App/Transfer/common";
+import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
+
+import { tokenPricesFamily } from "atoms/prices/atoms";
+import BigNumber from "bignumber.js";
 import clsx from "clsx";
+import { useAtomValue } from "jotai";
 import { FaLock } from "react-icons/fa";
 import {
   IoCheckmarkCircleOutline,
@@ -27,6 +33,25 @@ const getTitle = (transferTransaction: TransferTransactionData): string => {
 export const LocalStorageTransactionCard = ({
   transaction,
 }: TransactionCardProps): JSX.Element => {
+  const namadaAssetsMap = useAtomValue(namadaRegistryChainAssetsMapAtom);
+  const namadaAsset =
+    namadaAssetsMap.data &&
+    Object.values(namadaAssetsMap.data).find(
+      (namadaAsset) => namadaAsset.symbol === transaction.asset.symbol
+    );
+
+  // Use the Namada asset address if available, otherwise try the original asset address
+  const assetAddress = namadaAsset?.address || transaction.asset.address;
+
+  const tokenPrices = useAtomValue(
+    tokenPricesFamily(assetAddress ? [assetAddress] : [])
+  );
+  const tokenPrice = assetAddress && tokenPrices.data?.[assetAddress];
+
+  // Ensure displayAmount is a BigNumber before performing calculations
+  const displayAmount = BigNumber(transaction.displayAmount);
+  const dollarAmount = tokenPrice && displayAmount.multipliedBy(tokenPrice);
+
   const renderKeplrIcon = (address: string): JSX.Element | null => {
     if (isShieldedAddress(address)) return null;
     if (isTransparentAddress(address)) return null;
@@ -94,25 +119,22 @@ export const LocalStorageTransactionCard = ({
         <div className="aspect-square w-10 h-10">
           <AssetImage asset={transaction.asset} />
         </div>
-        <TokenCurrency
-          className="text-white mt-1 ml-2"
-          amount={transaction.displayAmount}
-          symbol={transaction.asset.symbol}
-        />
+        <div className="ml-2 flex flex-col">
+          <TokenCurrency
+            className="text-white"
+            amount={displayAmount}
+            symbol={transaction.asset.symbol}
+          />
+          {dollarAmount && (
+            <FiatCurrency
+              className="text-neutral-400 text-sm"
+              amount={dollarAmount}
+            />
+          )}
+        </div>
       </div>
       <div className="flex flex-col">
-        <h4
-          className={
-            (
-              isShieldedAddress(sender ?? "") ||
-              transaction.type === "ShieldedToIbc"
-            ) ?
-              "text-yellow"
-            : ""
-          }
-        >
-          From
-        </h4>
+        <h4 className="text-neutral-400">From</h4>
         <h4
           className={
             (
@@ -139,9 +161,7 @@ export const LocalStorageTransactionCard = ({
       </div>
 
       <div className="flex flex-col relative">
-        <h4 className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}>
-          To
-        </h4>
+        <h4 className="text-neutral-400">To</h4>
         <div className="flex items-center justify-between">
           <h4
             className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}