Merge pull request #948 from oraichain/feat/FOU-737-show-info-and-fix…

…-amount Feat/fou 737 show info and fix amount
oraichain · Dec 7, 2023 · 927314c · 927314c
2 parents 3c8040e + 58bd2b3
commit 927314c
Show file tree

Hide file tree

Showing 11 changed files with 380 additions and 118 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,14 @@
+{
+    "env": {
+      "es2020": true,  // <- activate “es2020” globals
+      "browser": true,
+      "node": true
+    },
+    "plugins": [
+      "react-hooks"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error", 
+      "react-hooks/exhaustive-deps": "warn" 
+    }
+}
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
 		"@material-ui/lab": "^4.0.0-alpha.57",
 		"@material-ui/styles": "^4.9.0",
 		"@oraichain/cosmos-messages": "0.0.3",
+		"@oraichain/oraidex-common": "^1.0.43",
 		"@sentry/react": "^7.36.0",
 		"@sentry/tracing": "^7.36.0",
 		"@sentry/webpack-plugin": "^1.20.0",

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.js b/src/components/Tx/TxData/TxMessage/TxMessage.js
@@ -34,6 +34,8 @@ import copyIcon from "src/assets/common/copy_ic.svg";
 import styles from "./TxMessage.module.scss";
 import { tryParseMessage } from "src/lib/scripts";
 import IBCProgress from "./IBCProgress";
+import { CW20_DECIMALS } from "@oraichain/oraidex-common/build/constant";
+import { toDisplay } from "@oraichain/oraidex-common/build/helper";
 const cx = cn.bind(styles);
 
 const getTxTypeNew = (type, result = "", value) => {
@@ -252,12 +254,54 @@ const TxMessage = ({ key, msg, data, ind }) => {
 			</InfoRow>
 		);
 
+		const getInfoPriceRow = (label, value, denom) => (
+			<InfoRow label={label}>
+				<span className={cx("text")}>
+					{_.isNil(value) ? "-" : toDisplay(BigInt(Math.trunc(value)), CW20_DECIMALS)}&nbsp;
+					{denom}
+				</span>
+			</InfoRow>
+		);
+
 		const getInfoRowThreeDots = (label, value) => (
 			<InfoRow label={label}>
 				<span className={cx("text-three-dots")}>{_.isNil(value) ? "-" : value}</span>
 			</InfoRow>
 		);
 
+		const getWasmDataJson = rawLog => {
+			let messageParse = [];
+			try {
+				messageParse = tryParseMessage(JSON.parse(rawLog));
+			} catch (error) {
+				messageParse = [{ error: rawLog }];
+			} finally {
+				const wasmData = messageParse[0]?.events?.find(e => e.type === "wasm");
+				const wasmAttributes = wasmData?.attributes;
+
+				const pair = wasmData?.attributes?.find(wd => wd.key === "pair");
+				const [base, quote] = pair?.value?.split("/") || [];
+
+				return {
+					base,
+					quote,
+					wasmAttributes,
+				};
+			}
+		};
+
+		const getInfoRowFromRawData = (wasmAttributes, key, label) => {
+			const data = wasmAttributes?.find(wd => wd.key === key);
+
+			return !data ? null : getInfoRow(label, data.value);
+		};
+
+		const getPriceInfoFromRawData = (wasmAttributes, key, label, denom) => {
+			const data = wasmAttributes?.find(wd => wd.key === key);
+
+			return !data ? null : getInfoPriceRow(label, data.value, denom);
+		};
+
 		const getRawLog = rawLog => {
 			let messageParse = [];
 			try {
@@ -364,7 +408,9 @@ const TxMessage = ({ key, msg, data, ind }) => {
 			}
 			const amountValue = <span className={cx("amount-value")}>{formatedAmount + " "}</span>;
 			const amountDenom = (
-				<span className={cx("amount-denom")}>{denom_name || (finalDenom && String(finalDenom).toLowerCase() === consts.DENOM ? finalDenom : consts.MORE)}</span>
+				<span className={cx("amount-denom")}>
+					{denomCheck?.denom || denom_name || (finalDenom && String(finalDenom).toLowerCase() === consts.DENOM ? finalDenom : consts.MORE)}
+				</span>
 			);
 			const amountUsd = (
 				<>
@@ -871,6 +917,9 @@ const TxMessage = ({ key, msg, data, ind }) => {
 					activeThemeId={activeThemeId}
 					themeIds={themeIds}
 					getRawLog={getRawLog}
+					getInfoRowFromRawData={getInfoRowFromRawData}
+					getWasmDataJson={getWasmDataJson}
+					getPriceInfoFromRawData={getPriceInfoFromRawData}
 					key={key}
 					ind={ind}
 					storeCodeElement={storeCodeElement}

diff --git a/src/components/Tx/TxData/TxMessage/TxMessageContent.js b/src/components/Tx/TxData/TxMessage/TxMessageContent.js
@@ -40,8 +40,13 @@ const TxMessageContent = ({
 	storeCodeElement,
 	ind,
 	getRawLog,
+	getInfoRowFromRawData,
+	getWasmDataJson,
+	getPriceInfoFromRawData,
 	getIBCProgressRow,
 }) => {
+	const { base, quote, wasmAttributes } = getWasmDataJson(data?.raw_log) || {};
+
 	return (
 		<>
 			<div className={cx("card-header")}>
@@ -356,6 +361,11 @@ const TxMessageContent = ({
 					<>
 						{getAddressRow("Contract", value?.contract, "", true)}
 						{getAddressRow("Sender", value?.sender, value?.sender_tag)}
+						{getInfoRowFromRawData(wasmAttributes, "pair", "Pair")}
+						{getPriceInfoFromRawData(wasmAttributes, "take_profit", "Take profit", quote)}
+						{getPriceInfoFromRawData(wasmAttributes, "stop_loss", "Stop loss", quote)}
+						{getPriceInfoFromRawData(wasmAttributes, "pnl", "Pnl", quote)}
+						{getPriceInfoFromRawData(wasmAttributes, "withdraw_amount", "Withdraw amount", quote)}
 						{getFundsRow("Sent funds", key, data?.messages?.[ind]?.sent_funds, data?.result, data?.amount)}
 						<InfoRow label='Message'>
 							<ReactJson

diff --git a/src/components/TxList/TransactionCardList/TransactionCardList.js b/src/components/TxList/TransactionCardList/TransactionCardList.js
@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
 import classNames from "classnames/bind";
 import PropTypes from "prop-types";
 import consts from "src/constants/consts";
-import { formatFloat, formatOrai } from "src/helpers/helper";
+import { checkTokenCW20, formatFloat, formatOrai } from "src/helpers/helper";
 import { getNewRoyalty, getRoyaltyAmount, getTokenId } from "src/components/TxList/TransactionTable/TransactionTable";
 import { _, reduceString, setAgoTime, parseIbcMsgTransfer, parseIbcMsgRecvPacket, isJsonString } from "src/lib/scripts";
 import CheckIcon from "src/icons/CheckIcon";
@@ -43,6 +43,7 @@ const getTxTypeNew = (type, rawLog = "[]", result = "") => {
 const TransactionCardList = memo(({ data = [], account, royalty = false, txHashClick = false }) => {
 	const cx = classNames.bind(styles);
 	const status = useSelector(state => state.blockchain.status);
+	const priceTokens = useSelector(state => state.blockchain.priceTokens);
 
 	return (
 		<div className='transaction-card-list'>
@@ -75,6 +76,13 @@ const TransactionCardList = memo(({ data = [], account, royalty = false, txHashC
 						denom_name = item.messages[0].amount[0]?.denom_name;
 					}
 
+					const denomCheck = checkTokenCW20(denom_name);
+					const congeckoPrice = priceTokens[denomCheck.coingeckoId] || 0;
+
+					const priceOrai = status?.price ? "($" + formatFloat(status.price * (amount / 1000000), 4) + ")" : "";
+					const priceOther = congeckoPrice ? "($" + formatOrai(+amount * congeckoPrice, Math.pow(10, denomCheck.decimal), 6) + ")" : "";
+					const priceShow = denom_name === consts.DENOM_ORAI || denom === consts.DENOM_ORAI ? priceOrai : priceOther;
+
 					amountDataCell =
 						_.isNil(denom_name) || _.isNil(denom) || _.isNil(amount) ? (
 							<div className={cx("amount-data-cell")}>
@@ -88,11 +96,10 @@ const TransactionCardList = memo(({ data = [], account, royalty = false, txHashC
 							<div className={cx("amount-data-cell", { "amount-data-cell-with-transfer-status": transferStatus })}>
 								{transferStatus && transferStatus}
 								<div className={cx("amount")}>
-									<span className={cx("amount-value")}>{formatOrai(amount)} </span>
-									<span className={cx("amount-denom")}>{denom_name || denom}</span>
-									{(denom_name === consts.DENOM_ORAI || denom === consts.DENOM_ORAI) && (
-										<div className={cx("amount-usd")}>{status?.price ? "($" + formatFloat(status?.price * (amount / 1000000), 4) + ")" : ""}</div>
-									)}
+									<span className={cx("amount-value")}>{formatOrai(amount, denomCheck.decimal && Math.pow(10, denomCheck.decimal))} </span>
+									<span className={cx("amount-denom")}>{denomCheck.denom || denom_name || denom}</span>
+
+									<div className={cx("amount-usd")}>{priceShow}</div>
 								</div>
 							</div>
 						);
@@ -181,7 +188,6 @@ const TransactionCardList = memo(({ data = [], account, royalty = false, txHashC
 							</div>
 						);
 					}
-
 				}
 
 				return (
@@ -195,13 +201,12 @@ const TransactionCardList = memo(({ data = [], account, royalty = false, txHashC
 									<td>
 										{_.isNil(item?.tx_hash) ? (
 											<div className={cx("item-link")}>-</div>
+										) : !txHashClick ? (
+											<NavLink className={cx("item-link")} to={`${consts.PATH.TXLIST}/${item.tx_hash}`}>
+												{reduceString(item.tx_hash, 6, 6)}
+											</NavLink>
 										) : (
-											!txHashClick ?
-												<NavLink className={cx("item-link")} to={`${consts.PATH.TXLIST}/${item.tx_hash}`}>
-													{reduceString(item.tx_hash, 6, 6)}
-												</NavLink> : <div className={cx("item-link")}>
-													{reduceString(item.tx_hash, 6, 6)}
-												</div>
+											<div className={cx("item-link")}>{reduceString(item.tx_hash, 6, 6)}</div>
 										)}
 									</td>
 								</tr>

diff --git a/src/components/TxList/TransactionTable/TransactionTable.js b/src/components/TxList/TransactionTable/TransactionTable.js
@@ -44,38 +44,28 @@ export const getHeaderRow = (royalty = false) => {
 	const feeHeaderCell = <div className={cx("header-cell", "align-right")}>{royalty ? "Token Id" : "Fee"}</div>;
 	const heightHeaderCell = <div className={cx("header-cell", "align-right")}>Height</div>;
 	const timeHeaderCell = <div className={cx("header-cell", "align-right")}>Time</div>;
-	let headerCells = [
-		txHashHeaderCell,
-		typeHeaderCell,
-		resultHeaderCell,
-		amountHeaderCell,
-		feeHeaderCell,
-		heightHeaderCell,
-		timeHeaderCell,
-	];
+	let headerCells = [txHashHeaderCell, typeHeaderCell, resultHeaderCell, amountHeaderCell, feeHeaderCell, heightHeaderCell, timeHeaderCell];
 	let headerCellStyles = [
-
-		{ width: "15%"}, // TxHash
-		{ width: "23%"}, // Type
-		{ width: "10%"}, // Result
-		{ width: "22%"}, // Amount
-		{ width: "10%"}, // Fee
-		{ width: "10%"}, // Height
-		{ width: "10%"}, // Time
+		{ width: "15%" }, // TxHash
+		{ width: "23%" }, // Type
+		{ width: "10%" }, // Result
+		{ width: "22%" }, // Amount
+		{ width: "10%" }, // Fee
+		{ width: "10%" }, // Height
+		{ width: "10%" }, // Time
 	];
 	if (royalty) {
 		const newRoyaltyHeaderCell = <div className={cx("header-cell", "align-right")}>New Royalty</div>;
 		headerCells.push(newRoyaltyHeaderCell);
 		headerCellStyles = [
-
-			{ width: "12%"}, // TxHash
-			{ width: "18%"}, // Type
-			{ width: "10%"}, // Result
-			{ width: "16%"}, // Amount
-			{ width: "12%"}, // Fee
-			{ width: "12%"}, // Height
-			{ width: "10%"}, // Time
-			{ width: "10%"}, // New Royalty
+			{ width: "12%" }, // TxHash
+			{ width: "18%" }, // Type
+			{ width: "10%" }, // Result
+			{ width: "16%" }, // Amount
+			{ width: "12%" }, // Fee
+			{ width: "12%" }, // Height
+			{ width: "10%" }, // Time
+			{ width: "10%" }, // New Royalty
 		];
 	}
 
@@ -118,7 +108,6 @@ export const getNewRoyalty = (account, rawLog = "[]", result = "") => {
 				break;
 			}
 		}
-
 	}
 
 	return handleRoyaltyPercentage(newRoyalty);
@@ -184,6 +173,8 @@ export const getTokenId = (rawLog = "[]", result = "") => {
 
 const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txHashClick = false }) => {
 	const status = useSelector(state => state.blockchain.status);
+	const priceTokens = useSelector(state => state.blockchain.priceTokens);
+
 	const getTxTypeNew = (type, rawLog = "[]", result = "") => {
 		const typeArr = type.split(".");
 		let typeMsg = typeArr[typeArr.length - 1];
@@ -237,17 +228,19 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 		}
 		const priceOraiCheck = denom?.toLowerCase() === consts.DENOM_ORAI;
 		const priceTokenCheck = denom?.toLowerCase() === denomCheck?.address?.toLowerCase();
+		const tokenPrice = priceTokens[denomCheck.coingeckoId] || 0;
+
 		return (
 			<div className={cx("amount")}>
 				<span className={cx("amount-value")}>{denomCheck.status ? formatOrai(+amount, Math.pow(10, denomCheck?.decimal), 6) : formatOrai(amount)}</span>
 				<span className={cx("amount-denom")}>{denomCheck.status ? reduceStringAssets(denomCheck.denom) : reduceStringAssets(denom)}</span>
 				{priceOraiCheck ? (
 					<div className={cx("amount-usd")}>{priceToken}</div>
-				) : priceTokenCheck ?
-					<div className={cx("amount-usd")}>{"($" + status?.price * formatOrai(+amount, Math.pow(10, denomCheck?.decimal), 6) + ")"}</div>
-					: (
-						<></>
-					)}
+				) : priceTokenCheck ? (
+					<div className={cx("amount-usd")}>{"($" + formatOrai(+amount * tokenPrice, Math.pow(10, denomCheck.decimal), 6) + ")"}</div>
+				) : (
+					<></>
+				)}
 			</div>
 		);
 	};
@@ -263,14 +256,12 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 			let amountDenomName = item?.amount?.[0]?.amount?.denom;
 			const txHashDataCell = _.isNil(item?.tx_hash) ? (
 				<div className={cx("align-left")}>-</div>
+			) : txHashStatus ? (
+				<div className={cx("tx-hash-data-cell", "align-left")}>{reduceString(item.tx_hash, 6, 6)}</div>
 			) : (
-				txHashStatus ?
-					<div className={cx("tx-hash-data-cell", "align-left")}>
-						{reduceString(item.tx_hash, 6, 6)}
-					</div>
-					: <NavLink className={cx("tx-hash-data-cell", "align-left")} to={`${consts.PATH.TXLIST}/${item.tx_hash}`}>
-						{reduceString(item.tx_hash, 6, 6)}
-					</NavLink>
+				<NavLink className={cx("tx-hash-data-cell", "align-left")} to={`${consts.PATH.TXLIST}/${item.tx_hash}`}>
+					{reduceString(item.tx_hash, 6, 6)}
+				</NavLink>
 			);
 
 			const typeDataCell = _.isNil(item?.messages?.[item?.messages?.length - 1]?.["@type"]) ? (
@@ -359,8 +350,8 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 								{objRoyaltyAmount.amount === "0"
 									? " ($0)"
 									: status?.price
-										? " ($" + formatFloat(status.price * (objRoyaltyAmount.amount / 1000000), 4) + ")"
-										: ""}
+									? " ($" + formatFloat(status.price * (objRoyaltyAmount.amount / 1000000), 4) + ")"
+									: ""}
 							</div>
 						</div>
 					</div>
@@ -383,7 +374,7 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 						denom = consts.MORE;
 					} else if (!_.isNil(item?.amount?.[0]?.denom) && !_.isNil(item?.amount?.[0]?.amount)) {
 						denom = newDenom ? newDenom : amountDenomName;
-						amount = item?.amount?.[0]?.amount
+						amount = item?.amount?.[0]?.amount;
 					} else if (item?.messages[0]?.amount && item?.messages[0]?.amount?.length > 0) {
 						amount = item?.messages[0]?.amount[0]?.amount;
 						denom = item?.messages[0]?.amount[0]?.denom_name;
@@ -407,9 +398,7 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 						<div className={cx("amount-data-cell", { "amount-data-cell-with-transfer-status": transferStatus }, "align-right")}>
 							{transferStatus && transferStatus}
 							{amount ? (
-								<>
-									{checkAmountOrai(item?.amount?.[0]?.denom, amount, item?.amount?.[0]?.denom_name, noDenomName)}
-								</>
+								<>{checkAmountOrai(item?.amount?.[0]?.denom, amount, item?.amount?.[0]?.denom_name, noDenomName)}</>
 							) : (
 								<div className={cx("amount")}>
 									<span className={cx("amount-value")}>0</span>
@@ -437,7 +426,7 @@ const TransactionTable = memo(({ data, rowMotions, account, royalty = false, txH
 					<div className={cx("fee-data-cell", "align-right")}>
 						<div className={cx("fee")}>
 							<span className={cx("fee-value")}>{formatOrai(item.fee?.amount?.[0]?.amount || 0)}</span>
-							<span className={cx("fee-denom")}>{item.fee?.amount?.[0]?.denom || item.fee?.amount?.[0]?.denom_name || 'ORAI'}</span>
+							<span className={cx("fee-denom")}>{item.fee?.amount?.[0]?.denom || item.fee?.amount?.[0]?.denom_name || "ORAI"}</span>
 						</div>
 					</div>
 				);