show parsed amount values in transfers table

src/components/transfers/TransfersTable.tsx

@@ -1,9 +1,14 @@
-import { PaginatedResource } from "../../model/paginatedResource";
-import { Transfer } from "../../model/transfer";
 import { Chip } from "@mui/material";
+
 import CrossIcon from "../../assets/cross-icon.png";
 import CheckIcon from "../../assets/check-icon.png";
+
+import { PaginatedResource } from "../../model/paginatedResource";
+import { Transfer } from "../../model/transfer";
+import { getNetwork } from "../../services/networksService";
+
 import { AccountAddress } from "../AccountAddress";
+import { Currency } from "../Currency";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Link } from "../Link";
 import { Time } from "../Time";
@@ -70,9 +75,12 @@ function TransfersTable(props: TransfersTableProps) {
 			<TransfersTableAttribute
 				label="Amount"
 				render={(transfer) =>
-					<>
-						{transfer.amount}
-					</>
+					<Currency
+						amount={transfer.amount}
+						currency={getNetwork(network).symbol}
+						decimalPlaces="optimal"
+						showFullInTooltip
+					/>
 				}
 			/>
 			<TransfersTableAttribute

src/model/main-squid/mainSquidTransfer.ts

@@ -5,6 +5,7 @@ export type MainSquidTransfer = {
 		publicKey: string;
 	};
 	transfer: {
+		id: string;
 		blockNumber: number;
 		timestamp: string;
 		extrinsicHash: string|null;
@@ -14,7 +15,7 @@ export type MainSquidTransfer = {
 		to: {
 			publicKey: string;
 		};
-		amount: number;
+		amount: string;
 		success: boolean;
 	}
 }

src/model/transfer.ts

@@ -1,3 +1,5 @@
+import Decimal from "decimal.js";
+
 import { RuntimeSpec } from "./runtimeSpec";
 
 export type Transfer = {
@@ -9,7 +11,7 @@ export type Transfer = {
 	extrinsicHash: string|null;
 	fromPublicKey: string;
 	toPublicKey: string;
-	amount: number;
+	amount: Decimal;
 	success: boolean;
 	runtimeSpec: RuntimeSpec;
 	extrinsic: {

src/services/transfersService.ts

@@ -9,7 +9,8 @@ import { decodeAddress } from "../utils/formatAddress";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
 
 import { fetchArchive, fetchMainSquid } from "./fetchService";
-import { hasSupport } from "./networksService";
+import { getNetwork, hasSupport } from "./networksService";
+import { rawAmountToDecimal } from "../utils/number";
 
 export type TransfersFilter =
 	{ accountAddress_eq: string };
@@ -55,6 +56,7 @@ async function getMainSquidTransfers(
 					node {
 						id
 						transfer {
+							id
 							amount
 							blockNumber
 							success
@@ -90,7 +92,7 @@ async function getMainSquidTransfers(
 		}
 	);
 
-	const items = extractConnectionItems(response.transfersConnection, pagination, unifyMainSquidTransfer);
+	const items = extractConnectionItems(response.transfersConnection, pagination, unifyMainSquidTransfer, network);
 	const itemsWithRuntimeSpec = await addRuntimeSpecs(network, items, () => "latest");
 	const transfers = await addExtrinsicsInfo(network, itemsWithRuntimeSpec);
 
@@ -132,14 +134,16 @@ async function getArchiveExtrinsicsInfo(network: string, extrinsicHashes: string
 	}, {} as Record<string, any>);
 }
 
-function unifyMainSquidTransfer(transfer: MainSquidTransfer): Omit<Transfer, "runtimeSpec"|"extrinsic"> {
+function unifyMainSquidTransfer(transfer: MainSquidTransfer, networkName: string): Omit<Transfer, "runtimeSpec"|"extrinsic"> {
+	const network = getNetwork(networkName);
+
 	return {
 		...transfer,
 		accountPublicKey: transfer.account.publicKey,
 		blockNumber: transfer.transfer.blockNumber,
 		timestamp: transfer.transfer.timestamp,
 		extrinsicHash: transfer.transfer.extrinsicHash,
-		amount: transfer.transfer.amount,
+		amount: rawAmountToDecimal(network, transfer.transfer.amount),
 		success: transfer.transfer.success,
 		fromPublicKey: transfer.transfer.from.publicKey,
 		toPublicKey: transfer.transfer.to.publicKey,

src/utils/uniq.ts

@@ -1,3 +1,19 @@
 export function uniq<T>(array: T[]) {
 	return Array.from(new Set(array));
 }
+
+export function uniqBy<T>(array: T[], propGetter: (it: T) => any) {
+	const result = [];
+
+	const set = new Set();
+	for (const item of array) {
+		const prop = propGetter(item);
+
+		if(!set.has(prop)) {
+			set.add(prop);
+			result.push(item);
+		}
+	}
+
+	return result;
+}