fix: bug reports (#20)

* fix: fee currency + UI + tx fetch handle

* fix: background color Layout

* fix: navbar background color

components/Navbar/index.tsx

@@ -179,7 +179,12 @@ export default function Navbar() {
 					</div>
 				</div>
 			</ModalWrapper>
-			<nav className={clsx(styles.navbar, 'margin-bottom-sm', { 'shadow-xs': shadow })}>
+			<nav
+				className={clsx(styles.navbar, 'margin-bottom-sm', {
+					'shadow-xs': shadow,
+					[styles.navbarScroll]: shadow
+				})}
+			>
 				<div className={clsx(styles.container, 'margin-auto')}>
 					<div className={styles.hamburgerMenuIcon}>
 						<div className="padding-left-lg pointer">

components/Navbar/style.module.scss

@@ -2,6 +2,7 @@
 
 $maxMobileSize: 1200px;
 $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
+
 .navbar {
 	width: 100%;
 	position: sticky;
@@ -10,18 +11,25 @@ $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
 	width: 100%;
 	z-index: 99;
 	height: 80px;
-	background-color: var(--theme-backgorund-mode);
+	// background-color: var(--theme-backgorund-mode);
+
 	.container {
 		max-width: 1400px;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		height: 100%;
 	}
+
 	@media screen and (max-width: $maxMobileSize) {
 		justify-content: unset;
 	}
 }
+.navbarScroll {
+	background-color: var(--theme-backgorund-mode);
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(22px);
+}
 
 .navigation {
 	display: flex;

next.config.js

@@ -12,7 +12,8 @@ const nextConfig = {
 		NEXT_PUBLIC_ITEM_SHOW_HOME_PAGE: 7,
 		NEXT_PUBLIC_EVM_TOKEN: 'asa',
 		NEXT_PUBLIC_PAGE_OFFSET: 10,
-		NEXT_PUBLIC_MAXIMUM_FRACTION_DIGITS: 4
+		NEXT_PUBLIC_MAXIMUM_FRACTION_DIGITS: 4,
+		NEXT_PUBLIC_FEE_TOKEN: 'ASA'
 	}
 }
 

pages/blocks/[block].tsx

@@ -129,7 +129,6 @@ const BlockDetailPage: React.FC<Props> = ({ blockDetail, blockHeight, transactio
 														blockNumber={item.blockHeight}
 														updatedAt={item.blockTime}
 														fee={fee.amount}
-														feeToken={'asa'}
 														status={item.success}
 														hash={item.hash}
 														from={''}

pages/tx/[tx].tsx

@@ -98,6 +98,7 @@ export async function getServerSideProps({ query }) {
 		data = pickBy(data, item => item !== undefined && item !== '')
 		return { props: { data, evmHash, cosmosHash } }
 	} catch (e: unknown) {
+		console.log(e)
 		if (e instanceof AxiosError) {
 			console.log('error api', e.message, e.code, e?.config?.baseURL, e?.config?.url)
 		}

styles.css

@@ -7,7 +7,7 @@
 }
 
 .dark--mode {
-	background: radial-gradient(106.61% 108.18% at 0% 100%, rgba(82, 120, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #08080a;
+	background: radial-gradient(100% 90% at 10% 0%, rgba(82, 120, 255, 0.2) 0%, rgba(23, 31, 60, 0.096) 100%), #08080a;
 }
 
 .hamburger-enter {

utils/helper.ts

@@ -86,9 +86,13 @@ export class LinkMaker {
 	 * @param query
 	 * @returns
 	 */
-	static transaction(hash?: string, query: string = '') {
-		hash = hash ? `/${hash}?${query}` : ''
-		return `/tx${hash}`
+	static transaction(hash?: string, query?: string) {
+		if (!hash) {
+			return '/tx'
+		}
+
+		if (query) return `/tx/${hash}?${query}`
+		return `/tx/${hash}`
 	}
 
 	/**

views/accounts/tabs/AddressTransactionTab/AddressTransaction.tsx

@@ -93,7 +93,7 @@ const AddressTransaction = ({ transaction }: Props) => {
 									size="2xs"
 									value={convertBalanceToView(transaction.fee)}
 									fixNumber={7}
-									currency="ASA"
+									currency={process.env.NEXT_PUBLIC_FEE_TOKEN}
 									classes="contrast-color-70"
 								/>
 							)}

views/block/BlockBriefRow.tsx

@@ -33,15 +33,13 @@ export default function BlockBriefRow({
 				})}
 			>
 				<div className={clsx(styles.icon, 'margin-right-sm')}>
-					<Image src={'/images/icons/blockchain.png'} height={24} width={24} />
+					<Image src={'/images/icons/blockchain.png'} alt="height" height={24} width={24} />
 				</div>
 				<div className={styles.content}>
 					<div className={styles.topRow}>
-						<Typography.LinkText
-							href={LinkMaker.block(blockNumber)}
-							children={`#${blockNumber}`}
-							fontType="Titi"
-						/>
+						<Typography.LinkText href={LinkMaker.block(blockNumber)} fontType="Titi">
+							#{blockNumber}
+						</Typography.LinkText>
 
 						<Timer updatedAt={updatedAt} />
 					</div>
@@ -50,9 +48,14 @@ export default function BlockBriefRow({
 							<span className={clsx('contrast-color-30 text text-sm padding-right-2xs sm-block')}>
 								Block Proposer
 							</span>
-							<span className="contrast-color-70 money money-2xs sm-block">
-								{proposerName} ({ellipseBetweenText(proposerAddress, 6, 6)})
-							</span>
+							<Typography.LinkText
+								href={LinkMaker.address(proposerAddress)}
+								fontSize="money-2xs"
+								fontType="Titi"
+								classes="sm-block"
+							>
+								{proposerName} ({ellipseBetweenText(proposerAddress, 10, 10)})
+							</Typography.LinkText>
 							{/* <DotSpace /> */}
 						</div>
 					</div>

views/transactions/HomeTransactions.tsx

@@ -32,7 +32,7 @@ export function HomeTransactions() {
 				<BackgroundCard classes={clsx(styles.card, 'height-100 flex flex-column padding-bottom-sm')}>
 					{top10?.map((item, index) => (
 						<RowBrief
-							key={item.hash}
+							key={`${item.blockHeight}-${item.hash}`}
 							hash={item.hash}
 							balance={{ value: '' }} //{{ value: convertBalanceToView('000'), token: 'ASA' }}
 							from=""

views/transactions/TransactionRow.tsx

@@ -20,7 +20,6 @@ export type TransactionRowProps = {
 	labelStatus?: string
 	status?: boolean
 	fee?: number | string
-	feeToken?: string
 	from?: string
 	fromName?: string
 	to?: string
@@ -41,7 +40,6 @@ export default function TransactionRow({
 	labelStatus,
 	status,
 	fee,
-	feeToken,
 	from,
 	to,
 	contractAddress,
@@ -90,7 +88,6 @@ export default function TransactionRow({
 						labelStatus={labelStatus}
 						status={status}
 						fee={fee}
-						feeToken={feeToken}
 						from={from}
 						to={to}
 						contractAddress={contractAddress}

views/transactions/TransactionRowContent.tsx

@@ -19,7 +19,6 @@ export type TransactionRowContentProps = {
 	labelStatus?: string
 	status?: boolean
 	fee?: number | string
-	feeToken?: string
 	from?: string
 	fromName?: string
 	to?: string
@@ -39,7 +38,6 @@ export default function TransactionRowContent({
 	labelStatus,
 	status,
 	fee,
-	feeToken,
 	from,
 	to,
 	contractAddress,
@@ -58,7 +56,7 @@ export default function TransactionRowContent({
 				className={clsx(styles.rowBrief, styles.TransactionRow, 'row')}
 				style={{ minHeight: style === 'inject' ? 'auto' : height }}
 			>
-				<div className={clsx('col-4')} style={{ alignItems: 'center', display: 'flex' }}>
+				<div className={clsx('col-4')} style={{ alignItems: 'center' }}>
 					<div>
 						<Typography.LinkText
 							href={LinkMaker.transaction(hash, addressQuery)}
@@ -126,7 +124,11 @@ export default function TransactionRowContent({
 								<TypographyLib.Balance
 									size="xs"
 									value={value}
-									currency={valueCurrency?.toUpperCase()}
+									currency={
+										valueCurrency.toLowerCase() == 'aastra'
+											? process.env.NEXT_PUBLIC_FEE_TOKEN
+											: valueCurrency?.toUpperCase()
+									}
 									icon={valueToken && <CryptoIcon name={valueToken} size="sm" />}
 								/>
 								<br />
@@ -139,7 +141,7 @@ export default function TransactionRowContent({
 									size="2xs"
 									value={convertBalanceToView(fee)}
 									fixNumber={7}
-									currency={feeToken.toUpperCase()}
+									currency={process.env.NEXT_PUBLIC_FEE_TOKEN}
 									classes="contrast-color-70"
 								/>
 							)}

views/transactions/hook/useTxRawTrace.ts

@@ -18,7 +18,7 @@ export default function useTxRawTrace(txhash: string, type: 'evm' | 'cosmos') {
 	const { data } = useSWR<TransactionRawTraceResponse>(_fetchCondition())
 
 	useEffect(() => {
-		if (data) {
+		if (data?.result) {
 			setState({ result: data.result.rawTrace })
 		}
 	}, [data])