fix: update token page meta tag + parse BigNumber with decimals

AstraProtocol · Nov 4, 2022 · 091ea61 · 091ea61
1 parent 1c06654
commit 091ea61
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/pages/tokens.tsx b/pages/tokens.tsx
@@ -26,6 +26,34 @@ const AllTokensPage: React.FC<NextPage> = _ => {
 		<Layout>
 			<Head>
 				<title>Tokens | {process.env.NEXT_PUBLIC_TITLE}</title>
+				<meta
+					name="description"
+					content="Transactions that have been validated and confirmed on the Astra Blockchain. The list consists of transactions from sending ASA and the transactions for interacting with a smart contract."
+				/>
+				<meta name="author" content="https://explorer.astranaut.io" />
+				<meta name="keywords" content="astra, explorer, ASA, search, blockchain, crypto, currency" />
+				<meta name="format-detection" content="telephone=no" />
+				<meta property="og:title" content="Astra Transactions Information | AstraExplorer" />
+				<meta
+					property="og:description"
+					content="Transactions that have been validated and confirmed on the Astra Blockchain. The list consists of transactions from sending ASA and the transactions for interacting with a smart contract."
+				/>
+				<meta property="og:type" content="website" />
+				<meta property="og:site_name" content="Astra (ASA) Blockchain Explorer" />
+				<meta property="og:url" content="http://explorer.astranaut.io/tx" />
+				{/* <meta property="og:image" content="https://explorer.astranaut.io/images/brandassets/explorer.astranaut.ioo-circle.jpg" /> */}
+				{/* <meta property="og:image:alt" content="Visit explorer.astranaut.io" /> */}
+				<meta name="twitter:card" content="summary" />
+				<meta name="twitter:title" content="Astra Transactions Information | AstraExplorer" />
+				<meta
+					property="twitter:description"
+					content="Transactions that have been validated and confirmed on the Astra Blockchain. The list consists of transactions from sending ASA and the transactions for interacting with a smart contract."
+				/>
+				<meta name="twitter:site" content="@AstraOfficial5" />
+				{/* <meta
+					property="twitter:image"
+					content="https://explorer.astranaut.io/images/brandassets/explorer.astranaut.ioo-circle.jpg"
+				/> */}
 			</Head>
 			<Container>
 				<Row style={{ justifyContent: 'space-between', alignItems: 'center' }}>

diff --git a/utils/helper.ts b/utils/helper.ts
@@ -22,6 +22,9 @@ export const ellipseLeftText = (address: string, to: number) => {
 }
 
 export const convertBalanceToView = (value: number | string, decimals = 18) => {
+	if (!value) return ''
+	if (!decimals) decimals = 1
+
 	const big = BigNumber.from(value)
 	const valueInWei = formatUnits(big, decimals).valueOf()
 	return valueInWei

diff --git a/views/tokens/TokenOverview.tsx b/views/tokens/TokenOverview.tsx
@@ -1,4 +1,4 @@
-import { Typography as TypographyUI, useMobileLayout } from '@astraprotocol/astra-ui'
+import { Typography as TypographyUI } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import CopyButton from 'components/Button/CopyButton'
 import BackgroundCard from 'components/Card/Background/BackgroundCard'
@@ -14,8 +14,6 @@ interface Props {
 }
 
 const TokenOverview = ({ token, tokenData }: Props) => {
-	const { isMobile } = useMobileLayout()
-
 	return (
 		<BackgroundCard classes="padding-lg margin-top-2xl">
 			<Row style={{ justifyContent: 'space-between' }} classes={clsx(styles.borderBottom, 'padding-bottom-lg')}>
@@ -37,8 +35,8 @@ const TokenOverview = ({ token, tokenData }: Props) => {
 						currency={tokenData.symbol}
 						value={
 							tokenData.totalSupply
-								? convertBalanceToView(tokenData.totalSupply, parseInt(tokenData.decimals))
-								: 'NaN'
+								? convertBalanceToView(tokenData.totalSupply, parseInt(tokenData.decimals || '1'))
+								: ''
 						}
 						fixNumber={5}
 					/>
@@ -65,11 +63,13 @@ const TokenOverview = ({ token, tokenData }: Props) => {
 					<br />
 					<span className="text text-base">{tokenData.type}</span>
 				</div>
-				<div className="">
-					<span className="text text-base contrast-color-50">Decimals:</span>
-					<br />
-					<span className="text text-base">{tokenData.decimals}</span>
-				</div>
+				{tokenData.decimals && (
+					<div className="">
+						<span className="text text-base contrast-color-50">Decimals:</span>
+						<br />
+						<span className="text text-base">{tokenData.decimals}</span>
+					</div>
+				)}
 			</Row>
 		</BackgroundCard>
 	)

diff --git a/views/tokens/TokenRow.tsx b/views/tokens/TokenRow.tsx
@@ -38,7 +38,7 @@ export default function TokenRow({ index, token }: Props) {
 			<div className={clsx(styles.borderLeft, styles.colTotalSupply, 'padding-left-lg col-3')}>
 				<span className={clsx('money money-sm money-bold padding-right-xs')}>
 					{formatNumber(
-						convertBalanceToView(token.totalSupply, parseInt(token.decimals)),
+						convertBalanceToView(token.totalSupply, parseInt(token.decimals || '1')),
 						getEnvNumber('NEXT_PUBLIC_MAXIMUM_FRACTION_DIGITS')
 					)}
 				</span>

diff --git a/views/tokens/tabs/TokenTransactionTab/TokenTransaction.tsx b/views/tokens/tabs/TokenTransactionTab/TokenTransaction.tsx
@@ -4,7 +4,7 @@ import GradientRow from 'components/Row/GradientRow'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
 import { evmAddressName } from 'utils/evm'
-import { convertBalanceToView, ellipseBetweenText, ellipseRightText, LinkMaker } from 'utils/helper'
+import { convertBalanceToView, ellipseBetweenText, LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 interface Props {
@@ -35,7 +35,7 @@ const AddressTransaction = ({ transaction }: Props) => {
 							classes={'margin-right-xs'}
 							fontType="Titi"
 						>
-							{ellipseRightText(transaction.transactionHash, 30)}
+							{ellipseBetweenText(transaction.transactionHash, 16, 16)}
 						</Typography.LinkText>
 						{/* <Typography.Label
 							text={'Function Name'}
@@ -84,7 +84,7 @@ const AddressTransaction = ({ transaction }: Props) => {
 							<>
 								<TypographyLib.Balance
 									size="xs"
-									value={convertBalanceToView(transaction.amount)}
+									value={convertBalanceToView(transaction.amount, parseInt(transaction.decimals))}
 									currency={transaction.tokenSymbol}
 								/>
 								<br />