Skip to content

Commit a9d1b58

Browse files
neocyberethneocybereth
authored
chore: add additional txn history types (Vote, Withdraw, Redelegate, Reveal PK) (#2222)
1 parent aba80b7 commit a9d1b58

File tree

7 files changed

+887
-233
lines changed

7 files changed

+887
-233
lines changed

‎apps/namadillo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@keplr-wallet/types": "^0.12.136",
1313
"@namada/chain-registry": "^1.3.0",
1414
"@namada/indexer-client": "3.3.2",
15-
"@namada/sdk-multicore": "^0.20.7",
15+
"@namada/sdk-multicore": "^0.20.8",
1616
"@tailwindcss/container-queries": "^0.1.1",
1717
"@tanstack/query-core": "^5.40.0",
1818
"@tanstack/react-query": "^5.40.0",
@@ -79,7 +79,7 @@
7979
},
8080
"devDependencies": {
8181
"@eslint/js": "^9.9.1",
82-
"@namada/sdk-node": "^0.20.7",
82+
"@namada/sdk-node": "^0.20.8",
8383
"@namada/vite-esbuild-plugin": "^1.0.1",
8484
"@playwright/test": "^1.24.1",
8585
"@svgr/webpack": "^6.5.1",

‎apps/namadillo/src/App/Common/TransactionReceipt.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Chain } from "@chain-registry/types";
22
import { CopyToClipboardControl, Stack } from "@namada/components";
3-
import { PseudoExtendedKey } from "@namada/sdk/web";
3+
import { PseudoExtendedKey } from "@namada/sdk-multicore";
44
import { shortenAddress } from "@namada/utils";
55
import {
66
isNamadaAddress,

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { CopyToClipboardControl, Tooltip } from "@namada/components";
2+
import { shortenAddress } from "@namada/utils";
3+
import { TransactionHistory as TransactionHistoryType } from "atoms/transactions/atoms";
4+
import clsx from "clsx";
5+
import {
6+
IoCheckmarkCircleOutline,
7+
IoInformationCircleOutline,
8+
} from "react-icons/io5";
9+
import { twMerge } from "tailwind-merge";
10+
import { TransactionCard } from "./TransactionCard";
11+
12+
type Props = {
13+
revealPkTx: TransactionHistoryType;
14+
mainTx: TransactionHistoryType;
15+
};
16+
17+
export const BundledTransactionCard: React.FC<Props> = ({
18+
revealPkTx,
19+
mainTx,
20+
}) => {
21+
const publicKey =
22+
revealPkTx.tx?.data ? JSON.parse(revealPkTx.tx.data).public_key : "";
23+
24+
return (
25+
<article
26+
className={twMerge(
27+
clsx(
28+
"bg-neutral-800 rounded-sm px-5 text-white border border-transparent",
29+
"transition-colors duration-200 hover:border-neutral-500"
30+
)
31+
)}
32+
>
33+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-center py-5 font-semibold gap-5 relative">
34+
<div className="flex items-center gap-3 relative">
35+
<i className="text-success text-2xl relative z-10">
36+
<IoCheckmarkCircleOutline className="ml-1 mt-0.5 w-10 h-10" />
37+
</i>
38+
<div className="absolute left-6 top-12 w-0.5 h-10 border-l-2 border-dashed border-success z-0"></div>
39+
<div className="flex flex-col">
40+
<h3 className="flex items-center text-success">
41+
Reveal PK
42+
<div className="relative group/tooltip ml-1.5">
43+
<IoInformationCircleOutline className="w-4 h-4 text-neutral-400 cursor-help" />
44+
<Tooltip
45+
position="bottom"
46+
className="p-3 w-[350px] z-50 text-sm"
47+
>
48+
Revealing your public key registers your newly generated
49+
Namada account on-chain so the network can associate deposits,
50+
stake, and future signatures with a unique identity while
51+
keeping your private key secret
52+
</Tooltip>
53+
</div>
54+
<div className="relative group/tooltip ml-1">
55+
<CopyToClipboardControl
56+
className="text-neutral-400"
57+
value={revealPkTx.tx?.wrapperId ?? ""}
58+
/>
59+
<Tooltip position="right" className="p-2 -mr-3 w-[150px] z-10">
60+
Copy transaction hash
61+
</Tooltip>
62+
</div>
63+
</h3>
64+
<h3 className="text-neutral-400">
65+
{revealPkTx.timestamp ?
66+
new Date(revealPkTx.timestamp * 1000)
67+
.toLocaleString("en-US", {
68+
day: "2-digit",
69+
month: "2-digit",
70+
year: "2-digit",
71+
hour: "2-digit",
72+
minute: "2-digit",
73+
})
74+
.replace(",", "")
75+
: "-"}
76+
</h3>
77+
</div>
78+
</div>
79+
80+
<div className="flex flex-col">
81+
<h4>Public Key</h4>
82+
<h4 className="flex items-center gap-2">
83+
<span className="font-mono text-sm">
84+
{shortenAddress(publicKey, 12, 12)}
85+
</span>
86+
<CopyToClipboardControl
87+
className="text-neutral-400"
88+
value={publicKey}
89+
/>
90+
</h4>
91+
</div>
92+
</div>
93+
94+
<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">
95+
<TransactionCard tx={mainTx} />
96+
</div>
97+
</article>
98+
);
99+
};

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

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { CopyToClipboardControl, Tooltip } from "@namada/components";
22
import { shortenAddress } from "@namada/utils";
3+
import { FiatCurrency } from "App/Common/FiatCurrency";
34
import { TokenCurrency } from "App/Common/TokenCurrency";
45
import { AssetImage } from "App/Transfer/AssetImage";
56
import { isShieldedAddress, isTransparentAddress } from "App/Transfer/common";
7+
import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
8+
9+
import { tokenPricesFamily } from "atoms/prices/atoms";
10+
import BigNumber from "bignumber.js";
611
import clsx from "clsx";
12+
import { useAtomValue } from "jotai";
713
import { FaLock } from "react-icons/fa";
814
import {
915
IoCheckmarkCircleOutline,
@@ -27,6 +33,25 @@ const getTitle = (transferTransaction: TransferTransactionData): string => {
2733
export const LocalStorageTransactionCard = ({
2834
transaction,
2935
}: TransactionCardProps): JSX.Element => {
36+
const namadaAssetsMap = useAtomValue(namadaRegistryChainAssetsMapAtom);
37+
const namadaAsset =
38+
namadaAssetsMap.data &&
39+
Object.values(namadaAssetsMap.data).find(
40+
(namadaAsset) => namadaAsset.symbol === transaction.asset.symbol
41+
);
42+
43+
// Use the Namada asset address if available, otherwise try the original asset address
44+
const assetAddress = namadaAsset?.address || transaction.asset.address;
45+
46+
const tokenPrices = useAtomValue(
47+
tokenPricesFamily(assetAddress ? [assetAddress] : [])
48+
);
49+
const tokenPrice = assetAddress && tokenPrices.data?.[assetAddress];
50+
51+
// Ensure displayAmount is a BigNumber before performing calculations
52+
const displayAmount = BigNumber(transaction.displayAmount);
53+
const dollarAmount = tokenPrice && displayAmount.multipliedBy(tokenPrice);
54+
3055
const renderKeplrIcon = (address: string): JSX.Element | null => {
3156
if (isShieldedAddress(address)) return null;
3257
if (isTransparentAddress(address)) return null;
@@ -94,25 +119,22 @@ export const LocalStorageTransactionCard = ({
94119
<div className="aspect-square w-10 h-10">
95120
<AssetImage asset={transaction.asset} />
96121
</div>
97-
<TokenCurrency
98-
className="text-white mt-1 ml-2"
99-
amount={transaction.displayAmount}
100-
symbol={transaction.asset.symbol}
101-
/>
122+
<div className="ml-2 flex flex-col">
123+
<TokenCurrency
124+
className="text-white"
125+
amount={displayAmount}
126+
symbol={transaction.asset.symbol}
127+
/>
128+
{dollarAmount && (
129+
<FiatCurrency
130+
className="text-neutral-400 text-sm"
131+
amount={dollarAmount}
132+
/>
133+
)}
134+
</div>
102135
</div>
103136
<div className="flex flex-col">
104-
<h4
105-
className={
106-
(
107-
isShieldedAddress(sender ?? "") ||
108-
transaction.type === "ShieldedToIbc"
109-
) ?
110-
"text-yellow"
111-
: ""
112-
}
113-
>
114-
From
115-
</h4>
137+
<h4 className="text-neutral-400">From</h4>
116138
<h4
117139
className={
118140
(
@@ -139,9 +161,7 @@ export const LocalStorageTransactionCard = ({
139161
</div>
140162

141163
<div className="flex flex-col relative">
142-
<h4 className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}>
143-
To
144-
</h4>
164+
<h4 className="text-neutral-400">To</h4>
145165
<div className="flex items-center justify-between">
146166
<h4
147167
className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}

0 commit comments

Comments
 (0)