From cb01e88bc9e99ba8fab24ea39d13df7a78d3e8dc Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Mon, 11 Sep 2023 14:22:08 +0700
Subject: [PATCH] fixed displaying

---
 src/components/SmartContract/MoreInfo.js      |  8 +--
 .../ComponentContract/ComponentContract.js    |  3 +-
 .../ComponentContract.module.scss             |  6 +++
 .../ReadContract/ReadContract.js              | 53 +++++++++++--------
 .../WriteContract/WriteContract.js            |  4 +-
 5 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/components/SmartContract/MoreInfo.js b/src/components/SmartContract/MoreInfo.js
index 41a0e36d9..cd9bd496f 100644
--- a/src/components/SmartContract/MoreInfo.js
+++ b/src/components/SmartContract/MoreInfo.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
-import {NavLink} from "react-router-dom";
-import {isNil} from "lodash";
+import { NavLink } from "react-router-dom";
+import { isNil } from "lodash";
 import Grid from "@material-ui/core/Grid";
 import Skeleton from "@material-ui/lab/Skeleton";
 import InfoRow from "src/components/common/InfoRow";
@@ -11,7 +11,7 @@ import consts from "src/constants/consts";
 
 const cx = cn.bind(styles);
 
-const MoreInfo = ({data}) => {
+const MoreInfo = ({ data }) => {
 	return (
 		<Grid item lg={6} xs={12}>
 			<div className={cx("more-info")}>
@@ -57,7 +57,7 @@ const MoreInfo = ({data}) => {
 								<div className={cx("item-title")}>Label</div>
 							</td>
 							<td>
-								<div className={cx("item-text")}>{isNil(data?.label) ? "-" : data?.label}</div>
+								<div className={cx("item-text")}>{isNil(data?.contract_name) ? "-" : data?.contract_name}</div>
 							</td>
 						</tr>
 					</tbody>
diff --git a/src/containers/VerifiedContract/ComponentContract/ComponentContract.js b/src/containers/VerifiedContract/ComponentContract/ComponentContract.js
index 94e64927d..28689f502 100644
--- a/src/containers/VerifiedContract/ComponentContract/ComponentContract.js
+++ b/src/containers/VerifiedContract/ComponentContract/ComponentContract.js
@@ -183,7 +183,7 @@ export const HandleItemContract = ({ schema, onHandle, handleText, onClickCopy,
 						<Collapse in={state[index + 1]}>
 							<div className={cx("value")}>
 								{msg.fieldList.map((item, subInd) => (
-									<div className={cx("input")}>
+									<div key={subInd} className={cx("input")}>
 										{item.isRequired ? "*" : ""}
 										<input
 											onChange={e => {
@@ -202,6 +202,7 @@ export const HandleItemContract = ({ schema, onHandle, handleText, onClickCopy,
 								))}
 								<div className={cx("btn")}>
 									<Button
+										className={cx("execute-button")}
 										variant='contained'
 										onClick={async () => {
 											try {
diff --git a/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss b/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss
index 141c97381..3f51c5a7e 100644
--- a/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss
+++ b/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss
@@ -187,6 +187,12 @@
 		}
 		.btn {
 			padding-bottom: 12px;
+
+			.execute-button{
+				color: var(--common-buttonTextColor);
+				background: var(--common-buttonBackgroundColor);
+    			border: 1px solid var(--common-activeTabColor);
+			}
 		}
 	}
 }
diff --git a/src/containers/VerifiedContract/ReadContract/ReadContract.js b/src/containers/VerifiedContract/ReadContract/ReadContract.js
index 09e37c0d5..443c2a205 100644
--- a/src/containers/VerifiedContract/ReadContract/ReadContract.js
+++ b/src/containers/VerifiedContract/ReadContract/ReadContract.js
@@ -5,32 +5,41 @@ import HeaderContract from "../HeaderContract";
 import copy from "copy-to-clipboard";
 import { showAlert } from "src/store/modules/global";
 import { useDispatch, useSelector } from "react-redux";
-import { HandleItemContract } from '../ComponentContract';
-import { onQuery } from '../ContractInteraction';
+import { HandleItemContract } from "../ComponentContract";
+import { onQuery } from "../ContractInteraction";
 
 const cx = classNames.bind(styles);
 
 const ReadContract = memo(({ data }) => {
-    const [activeTab, setActiveTab] = useState(false);
-    const dispatch = useDispatch();
-    const activeThemeId = useSelector(state => state.activeThemeId);
-    const onClickCopy = (msg) => {
-        copy(JSON.stringify(msg))
-        dispatch(
-            showAlert({
-                show: true,
-                message: "Copied",
-                autoHideDuration: 1500,
-            })
-        );
-    }
-    return (
-        <div className={cx("read-contract")}>
-            <HeaderContract label={"Read Contract Infomation"} activeTab={activeTab} setActiveTab={setActiveTab} />
-            <div style={{ height: 16 }} />
-            <HandleItemContract activeThemeId={activeThemeId} handleText='Query' setActiveTab={setActiveTab} activeTab={activeTab} onClickCopy={onClickCopy} contractAddress={data?.contract_address} schema={data?.schema?.query} onHandle={onQuery} />
-        </div>
-    );
+	const [activeTab, setActiveTab] = useState(false);
+	const dispatch = useDispatch();
+	const activeThemeId = useSelector(state => state.activeThemeId);
+	const onClickCopy = msg => {
+		copy(JSON.stringify(msg));
+		dispatch(
+			showAlert({
+				show: true,
+				message: "Copied",
+				autoHideDuration: 1500,
+			})
+		);
+	};
+	return (
+		<div className={cx("read-contract")}>
+			<HeaderContract icon={<></>} label={"Read Contract Infomation"} activeTab={activeTab} setActiveTab={setActiveTab} />
+			<div style={{ height: 16 }} />
+			<HandleItemContract
+				activeThemeId={activeThemeId}
+				handleText='Query'
+				setActiveTab={setActiveTab}
+				activeTab={activeTab}
+				onClickCopy={onClickCopy}
+				contractAddress={data?.contract_address}
+				schema={data?.schema?.query}
+				onHandle={onQuery}
+			/>
+		</div>
+	);
 });
 
 export default ReadContract;
diff --git a/src/containers/VerifiedContract/WriteContract/WriteContract.js b/src/containers/VerifiedContract/WriteContract/WriteContract.js
index 2da559b59..166cf031a 100644
--- a/src/containers/VerifiedContract/WriteContract/WriteContract.js
+++ b/src/containers/VerifiedContract/WriteContract/WriteContract.js
@@ -15,7 +15,7 @@ const cx = classNames.bind(styles);
 const WriteContract = memo(({ data }) => {
 	const { address } = useSelector(state => state.wallet);
 	const history = useHistory();
-	const [activeTab, setActiveTab] = useState(true);
+	const [activeTab, setActiveTab] = useState(false);
 	const activeThemeId = useSelector(state => state.activeThemeId);
 	const dispatch = useDispatch();
 	const onClickCopy = msg => {
@@ -33,7 +33,7 @@ const WriteContract = memo(({ data }) => {
 			<HeaderContract
 				icon={<></>}
 				onClickLink={() => address && history.push(`/account/${address}`)}
-				label={address ? "" : "Connect to wallet"}
+				label={address ? "Write Contract Infomation" : "Connect to wallet"}
 				activeTab={activeTab}
 				setActiveTab={setActiveTab}
 			/>