Add txs for atomic swaps, faster possible token load, css mistakes fi…

…xed for mobile view
cosmostation · Jul 1, 2020 · 9e94811 · 9e94811
1 parent 46b04a5
commit 9e94811
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.5.0",
     "postcss-flexbugs-fixes": "4.1.0",

diff --git a/src/components/Account/Address/Address.js b/src/components/Account/Address/Address.js
@@ -29,7 +29,7 @@ export default function Address({account = {}, prices = []}) {
 
 	const renderQr = React.useMemo(
 		() => (
-			<div className={cx("qr-wrapper")} onMouseEnter={() => setShowModal(true)} onMouseLeave={() => setShowModal(false)}>
+			<div className={cx("qr-wrapper")} onClick={() => setShowModal(v => !v)} onMouseEnter={() => setShowModal(true)} onMouseLeave={() => setShowModal(false)}>
 				<img src={qrSVG} alt={"qr-code"} />
 				<QrModal address={account.address} show={showModal} />
 			</div>

diff --git a/src/components/Dashboard/DashboardContent/DashboardContent.scss b/src/components/Dashboard/DashboardContent/DashboardContent.scss
@@ -103,7 +103,7 @@
 		@include card-nopadding-wrapper;
 	}
 }
-
+x
 .CardFixed {
 	@include card-nopadding-wrapper;
 }

diff --git a/src/components/Tx/TxData/TxAddressOther/TxAddressOther.js b/src/components/Tx/TxData/TxAddressOther/TxAddressOther.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+//  components
+import InfoRow from "src/components/common/InfoRow";
+import DisplayLongString from "src/components/common/DisplayLongString/DisplayLongString";
+
+//TODO
+//  put this elsewhere sometime
+
+const getAddress = addr => {
+	if (/^(kava)/.test(addr)) return "https://kava.mintscan.io/account/";
+	return false;
+};
+
+export default function TxAddressOther({cx, addr = "", label = ""}) {
+	const baseUrl = React.useMemo(() => getAddress(addr), [addr]);
+	return (
+		<InfoRow label={label}>
+			{baseUrl ? (
+				<div className={cx("blueColor")} onClick={() => window.open(`${baseUrl}${addr}`, "__blank")}>
+					<DisplayLongString inputString={addr} />
+				</div>
+			) : (
+				<span className={cx("flexIt")}>
+					<DisplayLongString inputString={addr} />
+				</span>
+			)}
+		</InfoRow>
+	);
+}
diff --git a/src/components/Tx/TxData/TxAddressOther/index.js b/src/components/Tx/TxData/TxAddressOther/index.js
@@ -0,0 +1 @@
+export {default} from "./TxAddressOther";
diff --git a/src/components/Tx/TxData/TxCase.js b/src/components/Tx/TxData/TxCase.js
@@ -11,6 +11,7 @@ export const txGetTimeInforce = Object.freeze([null, "GTE", null, "IOC"]);
 export const txCheckOrder = txType => _.find([DEX.ORDER_NEW, DEX.ORDER_CANCEL], v => v === txType) !== undefined;
 export const txCheckSend = txType => _.find([COSMOS.SEND], v => v === txType) !== undefined;
 export const txCheckFUBM = txType => _.find([TOKENS.BURN, TOKENS.MINT, TOKENS.FREEZE, TOKENS.UNFREEZE], v => v === txType) !== undefined;
+export const txCheckHTLT = txType => _.find([TOKENS.HTLT], v => v === txType) !== undefined;
 //  last deposit tx was on 19/10/28 so not searchable anyway
 // const burn = {
 // 	height: 75405740,

diff --git a/src/components/Tx/TxData/TxGetFrom/TxGetFrom.js b/src/components/Tx/TxData/TxGetFrom/TxGetFrom.js
@@ -1,13 +1,20 @@
 import * as React from "react";
 
 import {_, refineAddress} from "src/lib/scripts";
-import {txCheckFUBM, txCheckOrder, txCheckSend} from "../TxCase";
+import {txCheckFUBM, txCheckHTLT, txCheckOrder, txCheckSend} from "../TxCase";
 import {NavLink} from "react-router-dom";
 
 import txTypes from "src/constants/txTypes";
 import DisplayLongString from "src/components/common/DisplayLongString";
 
-const aBunch = [txTypes.DEX.LIST, txTypes.TOKENS.TIME_LOCK, txTypes.TOKENS.TIME_UNLOCK, txTypes.TOKENS.TIME_RELOCK];
+const aBunch = [
+	txTypes.DEX.LIST,
+	txTypes.TOKENS.TIME_LOCK,
+	txTypes.TOKENS.TIME_UNLOCK,
+	txTypes.TOKENS.TIME_RELOCK,
+	txTypes.TOKENS.HTLT_CLAIM,
+	txTypes.TOKENS.HTLT_REFUND,
+];
 
 export default function({type, txData, value, cx}) {
 	let from = null;

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.js b/src/components/Tx/TxData/TxMessage/TxMessage.js
@@ -15,7 +15,7 @@ import consts from "src/constants/consts";
 import txTypes from "src/constants/txTypes";
 import getTxType from "src/constants/getTxType";
 //  components
-import {txCheckFUBM, txCheckOrder, txCheckSend, txGetSide, txGetTimeInforce} from "src/components/Tx/TxData/TxCase";
+import {txCheckFUBM, txCheckOrder, txCheckSend, txGetSide, txGetTimeInforce, txCheckHTLT} from "src/components/Tx/TxData/TxCase";
 import {Fade, Tooltip} from "@material-ui/core";
 import InfoRow from "src/components/common/InfoRow/InfoRow";
 import TxGetFrom from "src/components/Tx/TxData/TxGetFrom/TxGetFrom";
@@ -30,6 +30,7 @@ import symbolNone from "src/assets/transactions/symbol_none.svg";
 import detailSVG from "src/assets/transactions/symbol_detail_btn.svg";
 import bnbSVG from "src/assets/common/binance_token.svg";
 import DisplayLongString from "src/components/common/DisplayLongString";
+import TxAddressOther from "src/components/Tx/TxData/TxAddressOther";
 
 // const bnbSVG = "https://static.binance.org/icon/8fedcd202fb549d28b2f313b2bf97033";
 
@@ -219,9 +220,69 @@ export default function({msg, txData}) {
 				) : (
 					undefined
 				)}
-				<InfoRow label='From'>
-					<TxGetFrom txData={txData} type={type} value={value} cx={cx} />
-				</InfoRow>
+				{txCheckHTLT(type) ? (
+					<>
+						<InfoRow label={"Value"}>
+							<span className={cx("flexIt")}>
+								<Decimal fontSizeBase={15} value={divide(value?.amount?.[0]?.amount, consts.NUM.BASE_MULT)} />
+								<span className={cx("currency", {BNB: value?.amount?.[0]?.denom === "BNB"})}>{value?.amount?.[0]?.denom?.split("-")[0]}</span>
+							</span>
+						</InfoRow>
+						<InfoRow label={"To"}>
+							<NavLink className={cx("blueColor")} to={`/account/${value?.to}`}>
+								<DisplayLongString inputString={value?.to} />
+							</NavLink>
+						</InfoRow>
+						<InfoRow label={"From"}>
+							<NavLink className={cx("blueColor")} to={`/account/${value?.from}`}>
+								<DisplayLongString inputString={value?.from} />
+							</NavLink>
+						</InfoRow>
+						<InfoRow label={"Timestamp"}>
+							<span className={cx("flexIt")}>
+								<span>{getTotalTime(_.toNumber(value?.timestamp) * 1000)}</span>
+							</span>
+						</InfoRow>
+						<TxAddressOther label={"Sender Other Chain"} addr={value?.sender_other_chain} cx={cx} />
+						<TxAddressOther label={"Recipient Other Chain"} addr={value?.recipient_other_chain} cx={cx} />
+						<InfoRow label={"Random Number Hash"}>
+							<span className={cx("flexIt")}>
+								<DisplayLongString inputString={value?.random_number_hash} />
+							</span>
+						</InfoRow>
+					</>
+				) : (
+					<InfoRow label='From'>
+						<TxGetFrom txData={txData} type={type} value={value} cx={cx} />
+					</InfoRow>
+				)}
+				{type === txTypes.TOKENS.HTLT_CLAIM ? (
+					<>
+						<InfoRow label='Swap Id'>
+							<span className={cx("flexIt")}>
+								<DisplayLongString inputString={value?.swap_id} />
+							</span>
+						</InfoRow>
+						<InfoRow label='Random number'>
+							<span className={cx("flexIt")}>
+								<DisplayLongString inputString={value?.random_number} />
+							</span>
+						</InfoRow>
+					</>
+				) : (
+					undefined
+				)}
+				{type === txTypes.TOKENS.HTLT_REFUND ? (
+					<>
+						<InfoRow label='Swap Id'>
+							<span className={cx("flexIt")}>
+								<DisplayLongString inputString={value?.swap_id} />
+							</span>
+						</InfoRow>
+					</>
+				) : (
+					undefined
+				)}
 				{type === txTypes.COSMOS.VOTE ? (
 					<>
 						<InfoRow label={"proposal ID"}>{value?.proposal_id}</InfoRow>

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.scss b/src/components/Tx/TxData/TxMessage/TxMessage.scss
@@ -244,6 +244,7 @@
 .blueColor {
 	color: #4472de;
 	text-transform: none;
+	cursor: pointer;
 }
 
 .color-red {

diff --git a/src/components/TxList/TableRow/TableRow.scss b/src/components/TxList/TableRow/TableRow.scss
@@ -41,8 +41,11 @@
 	display: flex;
 	align-items: center;
 	height: 17px;
-	> *:not(last-child) {
+	> *:not(:last-child) {
 		margin-right: 8px;
+		@include media("<xsmall") {
+			margin-right: 4px;
+		}
 	}
 }
 
@@ -99,6 +102,11 @@
 		text-align: left;
 		color: #222222;
 		padding: 5.5px 0;
+		.address {
+			@include media("<xsmall") {
+				font-size: 11.5px;
+			}
+		}
 	}
 
 	padding: 4px 15px;

diff --git a/src/components/TxList/TableRow/pickData.js b/src/components/TxList/TableRow/pickData.js
@@ -10,8 +10,9 @@ import Skeleton from "react-skeleton-loader";
 import SvgDisplay from "src/components/common/SvgDisplay";
 //  assets
 import greenArrowSVG from "src/assets/common/transferarrow_gr.svg";
+import {txCheckHTLT} from "src/components/Tx/TxData/TxCase";
 
-export const CELL_TYPES = Object.freeze(["Tx Hash", "Type", "From", "To", "Value", "Height", "Time"]);
+export const CELL_TYPES = Object.freeze(["Tx Hash", "Type", "From", "To", "Value", "Denom", "Time"]);
 
 const BASE_MULT = Math.pow(10, 8);
 
@@ -31,13 +32,19 @@ export default function(blockData, cx, cell) {
 		case "From": {
 			// TODO
 			//  pretty much divide all the cases
+			if (_.isNil(blockData?.messages)) return <Skeleton />;
 			let address;
 			if (!_.isNil(blockData?.messages?.[0]?.value?.sender)) address = `${blockData?.messages?.[0]?.value?.sender}`;
 			else if (blockData?.messages?.[0]?.type === txTypes.COSMOS.SEND) address = `${blockData?.messages?.[0]?.value?.inputs?.[0]?.address}`;
+			else if (txCheckHTLT(blockData?.messages?.[0]?.type)) address = blockData?.messages[0]?.value?.to;
+			else if (blockData?.messages?.[0]?.type === txTypes.TOKENS.HTLT_CLAIM || blockData?.messages?.[0]?.type === txTypes.TOKENS.HTLT_REFUND)
+				address = blockData?.messages[0]?.value?.from;
 
 			if (_.isString(address))
 				return (
-					<NavLink className={cx("blueColor")} to={`/account/${refineAddress(address)}`}>
+					<NavLink
+						className={cx("blueColor", blockData?.messages?.[0]?.type === txTypes.COSMOS.SEND ? "address" : undefined)}
+						to={`/account/${refineAddress(address)}`}>
 						<span>{reduceString(refineAddress(address), 6, 6)}</span>
 					</NavLink>
 				);
@@ -52,7 +59,9 @@ export default function(blockData, cx, cell) {
 			return (
 				<>
 					<SvgDisplay svgSrc={greenArrowSVG} customClass={"upsideDown"} />
-					<NavLink className={cx("blueColor")} to={`/account/${refineAddress(address)}`}>
+					<NavLink
+						className={cx("blueColor", blockData?.messages?.[0]?.type === txTypes.COSMOS.SEND ? "address" : undefined)}
+						to={`/account/${refineAddress(address)}`}>
 						<span>{reduceString(refineAddress(address), 6, 6)}</span>
 					</NavLink>
 				</>
@@ -66,6 +75,7 @@ export default function(blockData, cx, cell) {
 				if (type === txTypes.DEX.ORDER_NEW)
 					amount = Big.multiply(Big.divide(blockData.messages[0]?.value?.price, BASE_MULT), Big.divide(blockData.messages[0]?.value?.quantity, BASE_MULT));
 				else if (type === txTypes.COSMOS.SEND) amount = Big.divide(blockData.messages[0]?.value?.outputs?.[0]?.coins?.[0]?.amount, BASE_MULT);
+				else if (type === txTypes.TOKENS.HTLT) amount = Big.divide(blockData.messages[0]?.value?.amount?.[0]?.amount, BASE_MULT);
 			}
 			if (!_.isNil(amount)) {
 				const split = amount.split(".");
@@ -77,15 +87,16 @@ export default function(blockData, cx, cell) {
 			}
 			return "-";
 		}
-		case "Height": {
+		case "Denom": {
 			let ret = "";
-			if (!_.isNil(blockData?.messages?.[0].type)) {
-				if (blockData?.messages?.[0].type === txTypes.DEX.ORDER_NEW) {
+			const type = blockData?.messages?.[0].type;
+			if (!_.isNil(type)) {
+				if (type === txTypes.DEX.ORDER_NEW) {
 					const symbol = blockData?.messages?.[0]?.value?.symbol;
 					if (_.isString(symbol)) ret = symbol.split("_")[1];
-				} else if (blockData?.messages?.[0].type === txTypes.COSMOS.SEND) {
+				} else if (type === txTypes.COSMOS.SEND) {
 					ret = blockData?.messages?.[0]?.value?.inputs?.[0]?.coins?.[0]?.denom;
-				}
+				} else if (type === txTypes.TOKENS.HTLT) ret = blockData.messages[0]?.value?.amount?.[0]?.denom;
 			}
 			if (!empty(ret)) {
 				if (ret === "BNB") return <span className={cx("BNB")}>BNB</span>;

diff --git a/src/components/common/Img/Img.js b/src/components/common/Img/Img.js
@@ -4,7 +4,7 @@ import CoolImg from "react-cool-img";
 import symbolNoneSVG from "src/assets/transactions/symbol_none.svg";
 
 import spinner from "src/assets/common/spin.svg";
-
+const retrySettings = {count: 0};
 export default function Img({src, style, className}) {
-	return <CoolImg style={style} src={src} alt={"img"} placeholder={spinner} error={symbolNoneSVG} className={className} />;
+	return <CoolImg retry={retrySettings} style={style} src={src} alt={"img"} placeholder={spinner} error={symbolNoneSVG} className={className} />;
 }
diff --git a/src/constants/consts.js b/src/constants/consts.js
@@ -58,7 +58,7 @@ export default Object.freeze({
 	NETWORK: {
 		COSMOS: "cosmoshub-3",
 		IRIS: "irishub",
-		KAVA: "kava-2",
+		KAVA: "kava-3",
 		BINANCE: "binance",
 	},
 	PREFIX: {

diff --git a/src/constants/getTxTypeIcon.js b/src/constants/getTxTypeIcon.js
@@ -12,7 +12,7 @@ export default function(type) {
 	else if (_.find([COSMOS.PROPOSAL_SUBMIT, COSMOS.DEPOSIT, COSMOS.VOTE], v => type === v)) return SVG[2];
 	else if (_.find([TOKENS.TIME_LOCK, TOKENS.TIME_RELOCK, TOKENS.TIME_UNLOCK], v => type === v)) return SVG[3];
 	else if (_.find([TOKENS.FREEZE, TOKENS.UNFREEZE], v => type === v)) return SVG[4];
-	else if (_.find([TOKENS.HTLT_DEPOSIT, TOKENS.HTLT_CLAIM, TOKENS.HTLT_REFUND], v => type === v)) return SVG[5];
+	else if (_.find([TOKENS.HTLT_DEPOSIT, TOKENS.HTLT_CLAIM, TOKENS.HTLT_REFUND, TOKENS.HTLT], v => type === v)) return SVG[5];
 	else if (MISC.ACCOUNTFLAG_SET === type) return SVG[6];
 	return binanceSVG;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -103,7 +103,7 @@ @@
     		@include card-nopadding-wrapper;
     	}
     }
+    x
     .CardFixed {
     	@include card-nopadding-wrapper;
     }
@@ Expand Down @@