From 82ac9a52878f306602db393808aed25850ed6ca0 Mon Sep 17 00:00:00 2001
From: Tien Nam Dao <tien.dao2@tiki.vn>
Date: Wed, 16 Nov 2022 15:11:26 +0700
Subject: [PATCH] fix: contract overview detail + remove uppercase func name

---
 .../tabs/ContractCodeTab/Overview.tsx         | 58 ++++++++++++-------
 .../tabs/ContractCodeTab/style.module.scss    |  1 -
 views/transactions/TransactionBriefRow.tsx    |  6 +-
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/views/accounts/tabs/ContractCodeTab/Overview.tsx b/views/accounts/tabs/ContractCodeTab/Overview.tsx
index 120b23a5..f216b3ff 100644
--- a/views/accounts/tabs/ContractCodeTab/Overview.tsx
+++ b/views/accounts/tabs/ContractCodeTab/Overview.tsx
@@ -1,35 +1,49 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
+import Row from 'components/Grid/Row'
 import styles from './style.module.scss'
 
 interface Props {
 	contractCode: ContractCodeData
 }
 const ContractCodeOverview = ({ contractCode }: Props) => {
+	const { isMobile } = useMobileLayout()
 	return (
-		<div className={clsx(styles.overview, 'margin-bottom-xl md-wrap')}>
-			<div className="text text-sm contrast-color-30">
-				Contract Name: <div className="text text-base contrast-color-100">{contractCode.ContractName}</div>
+		<div className={clsx(styles.overview, 'margin-bottom-xl ')}>
+			<div className={isMobile ? 'col col-5' : 'col col-5 margin-right-xl'}>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">Name: </span>
+					<span className="text text-base contrast-color-100">{contractCode.ContractName}</span>
+				</Row>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">Compiler Version: </span>
+					<span className="text text-base contrast-color-100">{contractCode.CompilerVersion}</span>
+				</Row>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">EVM Version:</span>
+					<span className="text text-base contrast-color-100">{contractCode.EVMVersion}</span>
+				</Row>
+				{contractCode.Verified && (
+					<Row style={{ justifyContent: 'space-between' }}>
+						<span className="text text-sm contrast-color-30">Verified At: </span>
+						<span className="text text-base contrast-color-100">{contractCode.VerifiedAt}</span>
+					</Row>
+				)}
 			</div>
-			<div className="text text-sm contrast-color-30">
-				Compiler Version:{' '}
-				<div className="text text-base contrast-color-100">{contractCode.CompilerVersion}</div>
+			<div className="col col-5">
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">Is Proxy:</span>
+					<span className="text text-base contrast-color-100">{contractCode.IsProxy}</span>
+				</Row>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">Optimization enabled: </span>
+					<span className="text text-base contrast-color-100">{contractCode.OptimizationUsed}</span>
+				</Row>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<span className="text text-sm contrast-color-30">Optimization runs: </span>
+					<span className="text text-base contrast-color-100">{contractCode.OptimizationRuns}</span>
+				</Row>
 			</div>
-			<div className="text text-sm contrast-color-30">
-				EVM Version: <div className="text text-base contrast-color-100">{contractCode.EVMVersion}</div>
-			</div>
-			<div className="text text-sm contrast-color-30">
-				Optimization enabled:{' '}
-				<div className="text text-base contrast-color-100">{contractCode.OptimizationUsed}</div>
-			</div>
-			<div className="text text-sm contrast-color-30">
-				Optimization runs:{' '}
-				<div className="text text-base contrast-color-100">{contractCode.OptimizationRuns}</div>
-			</div>
-			{contractCode.Verified && (
-				<div className="text text-sm contrast-color-30">
-					Verified At: <div className="text text-base contrast-color-100">{contractCode.VerifiedAt}</div>
-				</div>
-			)}
 		</div>
 	)
 }
diff --git a/views/accounts/tabs/ContractCodeTab/style.module.scss b/views/accounts/tabs/ContractCodeTab/style.module.scss
index 0a5ba113..c646f995 100644
--- a/views/accounts/tabs/ContractCodeTab/style.module.scss
+++ b/views/accounts/tabs/ContractCodeTab/style.module.scss
@@ -2,5 +2,4 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: space-between;
 }
diff --git a/views/transactions/TransactionBriefRow.tsx b/views/transactions/TransactionBriefRow.tsx
index c3fdb674..2eed79a8 100644
--- a/views/transactions/TransactionBriefRow.tsx
+++ b/views/transactions/TransactionBriefRow.tsx
@@ -7,7 +7,7 @@ import { LinkText } from 'components/Typography/LinkText'
 import Tag from 'components/Typography/Tag'
 import Image from 'next/image'
 import { TransacionTypeEnum } from 'utils/enum'
-import { capitalizeFirstLetter, ellipseBetweenText, LinkMaker } from 'utils/helper'
+import { ellipseBetweenText, LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 type TransactionBriefRowProps = {
@@ -96,9 +96,7 @@ export default function TransactionBriefRow({
 							>
 								{ellipseBetweenText(hash, 12, 12).toLowerCase()}
 							</Typography.LinkText>
-							{evmType && (
-								<Tag hasArrowRight={false} fontType="Titi" text={capitalizeFirstLetter(evmType)} />
-							)}
+							{evmType && <Tag hasArrowRight={false} fontType="Titi" text={evmType} />}
 						</Row>
 						<Timer updatedAt={updatedAt} />
 					</div>