fix: update UI with feedback

src/components/CurrencyInputPanel/NumericalInput.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { useTranslation } from 'contexts/Localization'
 import { escapeRegExp } from '../../utils'
-import { Form } from '@astraprotocol/astra-ui'
+import { Form, Typography } from '@astraprotocol/astra-ui'
 import styles from './styles.module.scss'
 import clsx from 'clsx'
 
@@ -49,7 +49,7 @@ export const Input = memo(function InnerInput({
 			spellCheck="false"
 			className={clsx(
 				styles.input,
-				'padding-left-sm padding-right-sm padding-top-md padding-bottom-md same-bg-color-20 border radius-lg',
+				'padding-left-sm padding-right-sm padding-top-md padding-bottom-md border radius-lg ',
 				rest.className,
 			)}
 		/>

src/components/CurrencyInputPanel/index.tsx

@@ -12,6 +12,7 @@ import { CurrencyLogo, DoubleCurrencyLogo } from '../Logo'
 import { Input as NumericalInput } from './NumericalInput'
 import { useModal } from 'components/Modal'
 import styles from './styles.module.scss'
+import numeral from 'numeral'
 
 interface CurrencyInputPanelProps {
 	value: string
@@ -61,6 +62,9 @@ export default function CurrencyInputPanel({
 			showCommonBases={showCommonBases}
 		/>,
 	)
+
+	const balance = selectedCurrencyBalance?.toSignificant(6)
+
 	return (
 		<div id={id}>
 			<div className="flex flex-justify-space-between flex-align-center">
@@ -121,16 +125,16 @@ export default function CurrencyInputPanel({
 					>
 						{!hideBalance && !!currency
 							? t('Balance: %balance%', {
-									balance: selectedCurrencyBalance?.toSignificant(6) ?? t('Loading'),
+									balance: balance ? numeral(balance).format('0,0[.]0[0000]') : t('Loading'),
 							  })
 							: ' -'}
 					</span>
 				)}
 			</div>
-			<div className="border radius-lg same-bg-color-50 margin-bottom-md margin-left-sm">
+			<div className="border radius-lg same-bg-color-10 margin-bottom-md margin-left-sm">
 				<div className={styles.labelRow}>
 					<NumericalInput
-						className={`token-amount-${id.replace('swap-currency-', '')}`}
+						className={`border border-base token-amount-${id.replace('swap-currency-', '')}`}
 						value={value}
 						onUserInput={val => {
 							onUserInput(val)
@@ -139,7 +143,11 @@ export default function CurrencyInputPanel({
 				</div>
 				<div className={styles.inputRow}>
 					{account && currency && showMaxButton && label !== 'To' && (
-						<NormalButton variant="text" classes={{ color: 'secondary-color-normal' }} onClick={onMax}>
+						<NormalButton
+							variant="text"
+							classes={{ color: 'secondary-color-normal', other: 'text-bold' }}
+							onClick={onMax}
+						>
 							{t('Max').toLocaleUpperCase(locale)}
 						</NormalButton>
 					)}

src/components/CurrencyInputPanel/styles.module.scss

@@ -4,7 +4,7 @@
 	position: relative;
 	font-weight: 500;
 	outline: none;
-	border: none;
+	// border: none;
 	flex: 1 1 auto;
 	font-size: 16px;
 	text-align: right;
@@ -30,6 +30,16 @@
 	::placeholder {
 		color: var(--contrast-color-theme-70);
 	}
+
+	&:focus {
+		border-color: #2295FF;
+		border-width: 2px;
+	}
+
+	&:hover {
+		border-color: #ffffff2e;
+		background-color: rgb(255 255 255 / 12%);
+	}
 }
 
 .inputRow {

src/components/Logo/CurrencyLogo.tsx

@@ -6,6 +6,9 @@ import getTokenLogoURL from '../../utils/getTokenLogoURL'
 import AstraIcon from './AstraIcon'
 import Logo from './Logo'
 
+export const isETHER = (currency: Currency | Token) =>
+	JSON.stringify(currency) === JSON.stringify(ETHER) || currency?.symbol === 'WASA'
+
 export default function CurrencyLogo({
 	currency,
 	size = 24,
@@ -29,7 +32,7 @@ export default function CurrencyLogo({
 		return []
 	}, [currency, uriLocations])
 
-	if (JSON.stringify(currency) === JSON.stringify(ETHER) || currency?.symbol === 'WASA') {
+	if (isETHER(currency)) {
 		return <AstraIcon height={size} width={size} style={style} />
 	}
 

src/components/Logo/DoubleLogo.tsx

@@ -1,7 +1,7 @@
 import { Currency } from '@solarswap/sdk'
 import clsx from 'clsx'
 
-import CurrencyLogo from './CurrencyLogo'
+import CurrencyLogo, { isETHER } from './CurrencyLogo'
 
 interface DoubleCurrencyLogoProps {
 	margin?: boolean
@@ -16,9 +16,10 @@ export default function DoubleCurrencyLogo({
 	size = 20,
 	margin = false,
 }: DoubleCurrencyLogoProps) {
+	const isASA = isETHER(currency0)
 	return (
 		<div className={clsx('flex flex-hor-center flex-col-center', margin && 'margin-right-2xs')}>
-			{currency0 && <CurrencyLogo currency={currency0} size={size} style={{ marginRight: 4 }} />}
+			{currency0 && <CurrencyLogo currency={currency0} size={isASA ? size + 1 : size} />}
 			{currency1 && <CurrencyLogo currency={currency1} size={size} />}
 		</div>
 	)

src/components/Navbar/Navigation.tsx

@@ -50,6 +50,7 @@ export default function Navigation({ items }: NavigationProps) {
 	}, [items])
 
 	const _renderLink = (
+		isSubmenu: boolean,
 		link: string,
 		content: React.ReactNode,
 		index: number,
@@ -63,13 +64,16 @@ export default function Navigation({ items }: NavigationProps) {
 			<span
 				className={clsx(
 					'text-base text-center text-bold',
-					'contrast-color-70 padding-sm',
+					'padding-sm',
 					'flex pointer',
 					align || 'flex-justify-center flex-align-center',
 					hover,
 					{ 'radius-tl-sm radius-tr-sm': index === 0 },
 					{ 'radius-bl-sm radius-br-sm': index === len - 1 },
 				)}
+				style={{
+					color: isSubmenu ? '#0B0F1E' : 'var(--contrast-color-theme-70)',
+				}}
 				onClick={onClick as MouseEventHandler<HTMLSpanElement>}
 			>
 				{locale ? (
@@ -132,7 +136,7 @@ export default function Navigation({ items }: NavigationProps) {
 					) : (
 						<>
 							{prefixIcon && prefixIcon}
-							{_renderLink(link, label!, 1, 0)}
+							{_renderLink(false, link, label!, 1, 0)}
 						</>
 					)}
 
@@ -154,6 +158,7 @@ export default function Navigation({ items }: NavigationProps) {
 										// onClick={event => _showSubMenu(event, [id, menu.id])}
 									>
 										{_renderLink(
+											true,
 											menu?.link || '',
 											menu.label,
 											index,
@@ -165,13 +170,14 @@ export default function Navigation({ items }: NavigationProps) {
 										)}
 										{menu.submenus && (
 											<ul
-												className={clsx(styles.submenu2, 'contrast-bg-color-50', 'radius-xs', {
+												className={clsx(styles.submenu2, 'radius-xs', {
 													[styles.show]: menu.show,
 												})}
 											>
 												{menu.submenus.map(sub2 => (
 													<li key={sub2.id}>
 														{_renderLink(
+															true,
 															sub2.link,
 															sub2.label,
 															index,

src/components/Navbar/index.tsx

@@ -105,6 +105,11 @@ export default function Navbar() {
 						label: t('Liquidity'),
 						link: '/liquidity',
 					},
+					// {
+					// 	id: '1.3',
+					// 	label: t('Bridge'),
+					// 	link: 'https://bridge.astranaut.io',
+					// },
 				],
 			},
 			{
@@ -143,7 +148,6 @@ export default function Navbar() {
 		return MENU_ITEMS
 	}, [currentLanguage])
 
-
 	const ModalMobileNav = () => (
 		<div
 			className={clsx(styles.hamburgerMenuContainer, 'padding-lg ', {
@@ -170,7 +174,7 @@ export default function Navbar() {
 		<>
 			<nav
 				className={clsx(styles.navbar, 'margin-bottom-sm', {
-					'shadow-xs': shadow,
+					[styles.navShadow]: shadow,
 					[styles.topBackground]: shadow,
 				})}
 			>

src/components/Navbar/style.module.scss

@@ -27,7 +27,7 @@ $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
 	left: 0;
 	width: 100%;
 	z-index: 2;
-	height: 80px;
+	height: 64px;
 	.container {
 		max-width: 1670px;
 		display: flex;
@@ -44,6 +44,10 @@ $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
 	}
 }
 
+.navShadow {
+	box-shadow: 2px 4px 4px #000000;
+}
+
 .navigation {
 	display: flex;
 	.background {
@@ -53,7 +57,7 @@ $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
 		display: inline-flex;
 		&::before {
 			font-size: 5px;
-			color: var(--contrast-color-theme-70);
+			// color: var(--contrast-color-theme-70);
 		}
 	}
 
@@ -88,20 +92,22 @@ $backgroundHover: rgba(var(--contrast-color-theme--raw), 0.05);
 			visibility: hidden;
 			opacity: 0;
 			transition: opacity 0.5s;
-			box-shadow: 2px 4px 4px rgba(var(--shadow-color), 0.1);
-			background: rgba(255, 255, 255, 0.1);
+			// box-shadow: 2px 4px 4px rgba(var(--shadow-color), 0.1);
+			background: var(--contrast-color-theme-100);
 			/* White Color/100 */
 			border: 1px solid rgba(255, 255, 255, 0.1);
-			box-shadow: 2px 12px 16px rgba(0, 0, 0, 0.12);
-			backdrop-filter: blur(12px);
+			// box-shadow: 2px 12px 16px rgba(0, 0, 0, 0.12);
+			// backdrop-filter: blur(12px);
 			a {
+
 				text-decoration: none;
 				font-weight: bold;
 				&:hover {
 					opacity: 0.8;
 				}
 			}
 			> li {
+
 				position: relative;
 				> span[class*='hover'] {
 					width: 100%;

src/config/localization/translations.json

@@ -1563,7 +1563,7 @@
 	"Price Impact Without Fee": "Ảnh hưởng giá không kể phí giao dịch",
 	"About us": "Về Chúng Tôi",
 	"Explorer": "Explorer",
-	"Bridge": "Bridge",
+	"Bridge": "Chuyển chuỗi chéo",
 	"DEX": "DEX",
 	"Documents": "Tài Liệu",
 	"Whitepaper": "Sách Trắng",

src/utils/getTokenLogoURL.ts

@@ -1,3 +1,3 @@
-const getTokenLogoURL = (address: string) => `${process.env.NEXT_PUBLIC_HOST}/images/tokens/${address}.png`
+const getTokenLogoURL = (address: string) => `${process.env.NEXT_PUBLIC_HOST}/images/tokens/${address}.svg`
 
 export default getTokenLogoURL

src/views/Swap/components/AdvancedSwapDetails.tsx

@@ -32,7 +32,7 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag
 						)}
 					/>
 				</Row>
-				<span className="text text-base">
+				<span className="text text-sm">
 					{isExactIn
 						? `${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4)} ${
 								trade.outputAmount.currency.symbol
@@ -68,7 +68,7 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag
 						/>
 					</span>
 				</Row>
-				<span className="text text-base">
+				<span className="text text-sm">
 					{realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
 				</span>
 			</Row>
@@ -95,7 +95,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
 						<>
 							<Row style={{ padding: '0 16px' }}>
 								<span style={{ display: 'flex', alignItems: 'center' }}>
-									<span className="text text-base">{t('Route')}</span>
+									<span className="text text-sm">{t('Route')}</span>
 									<QuestionHelper
 										text={t(
 											'Routing through these tokens resulted in the best price for your trade.',

src/views/Swap/components/CurrencyInputHeader.tsx

@@ -33,39 +33,40 @@ const CurrencyInputHeader: React.FC<Props> = ({
 	const [onPresentTransactionsModal] = useModal(<TransactionsModal />)
 
 	return (
-		<div className="flex col flex-align-center padding-md width-100 border border-bottom-base">
-			<div className="flex width-100 flex-align-center flex-justify-space-between position-relative">
-				<div className="position-absolute">
+		<div className="flex col  padding-md width-100 border border-bottom-base">
+			<div className="flex width-100 flex-align-start flex-justify-space-between position-relative">
+				<div className="position-absolute"></div>
+				<div className="flex flex-align-end flex-justify-start width-100">
+					<span className="text text-lg text-bold">{title}</span>
+				</div>
+			</div>
+			<div className="flex flex-align-start">
+				<span className="text text-sm contrast-color-70">{subtitle}</span>
+			</div>
+			<div className="row flex-justify-end margin-top-md">
+				<div className="padding-right-xs">
 					{setIsChartDisplayed && isChartDisplayed ? (
 						<IconButton size="lg" icon={IconEnum.ICON_CHART_BAR_OFF} onClick={toggleChartDisplayed} />
 					) : (
 						<IconButton size="lg" icon={IconEnum.ICON_CHART_BAR_ON} onClick={toggleChartDisplayed} />
 					)}
 				</div>
-				<div className="flex flex-align-end flex-justify-center width-100">
-					<span className="text text-lg text-bold">{title}</span>
-				</div>
-				<div className="row position-absolute" style={{ right: 0 }}>
-					<NotificationDot show={expertMode}>
-						<GlobalSettings />
-					</NotificationDot>
-					<IconButton
-						classes="padding-right-xs"
-						size="lg"
-						icon={IconEnum.ICON_RECENT}
-						onClick={onPresentTransactionsModal}
+				<NotificationDot show={expertMode}>
+					<GlobalSettings />
+				</NotificationDot>
+				<IconButton
+					classes="padding-right-xs"
+					size="lg"
+					icon={IconEnum.ICON_RECENT}
+					onClick={onPresentTransactionsModal}
+				/>
+				<a className="link" onClick={() => onRefreshPrice()}>
+					<RefreshIcon
+						disabled={!hasAmount}
+						color={resolvedTheme === 'dark' ? 'white' : 'black'}
+						width="23px"
 					/>
-					<a className="link" onClick={() => onRefreshPrice()}>
-						<RefreshIcon
-							disabled={!hasAmount}
-							color={resolvedTheme === 'dark' ? 'white' : 'black'}
-							width="23px"
-						/>
-					</a>
-				</div>
-			</div>
-			<div className="flex flex-align-center">
-				<span className="text text-sm contrast-color-70">{subtitle}</span>
+				</a>
 			</div>
 		</div>
 	)