fix(frontend): tokens page wallet button align (#746)

Author: nikitayutanov

js/frontend/src/components/layout/header/header.module.scss

@@ -20,6 +20,10 @@
   }
 }
 
+.wallet {
+  margin-left: auto;
+}
+
 .nav {
   padding: 8px 0;
 

js/frontend/src/components/layout/header/header.tsx

@@ -75,7 +75,7 @@ function Header() {
 
         <NetworkSwitch />
 
-        <Wallet />
+        <Wallet className={styles.wallet} />
       </Container>
 
       <nav className={styles.nav}>

js/frontend/src/features/wallet/components/wallet/wallet.module.scss

@@ -1,9 +1,3 @@
-.wallet,
-.button,
-.skeleton {
-  margin-left: auto;
-}
-
 .wallet {
   display: flex;
   gap: 12px;

js/frontend/src/features/wallet/components/wallet/wallet.tsx

@@ -6,15 +6,19 @@ import { useAppKit, useWalletInfo } from '@reown/appkit/react';
 import EthSVG from '@/assets/eth.svg?react';
 import { FormattedBalance, Skeleton } from '@/components';
 import { useEthAccount, useEthAccountBalance, useModal, useVaraAccountBalance, useVaraSymbol } from '@/hooks';
-import { getTruncatedText, isUndefined } from '@/utils';
+import { cx, getTruncatedText, isUndefined } from '@/utils';
 
 import WalletSVG from '../../assets/wallet.svg?react';
 import { WALLET_SVGS } from '../../consts';
 import { NetworkWalletModal } from '../network-wallet-modal';
 
 import styles from './wallet.module.scss';
 
-function Wallet() {
+type Props = {
+  className?: string;
+};
+
+function Wallet({ className }: Props) {
   const { api } = useApi();
   const { account, isAccountReady } = useAccount();
   const varaAccountBalance = useVaraAccountBalance();
@@ -37,7 +41,7 @@ function Wallet() {
   // it's probably worth to check isConnecting too, but there is a bug:
   // no extensions -> open any wallet's QR code -> close modal -> isConnecting is still true
   if (!isAccountReady || ethAccount.isReconnecting || !api || !varaSymbol)
-    return <Skeleton width="11rem" height="2rem" className={styles.skeleton} />;
+    return <Skeleton width="11rem" height="2rem" className={className} />;
 
   const address = account?.address || ethAccount.address;
   const balance = account ? varaAccountBalance : ethAccountBalance;
@@ -47,7 +51,7 @@ function Wallet() {
   return (
     <>
       {address ? (
-        <button type="button" className={styles.wallet} onClick={handleButtonClick}>
+        <button type="button" className={cx(styles.wallet, className)} onClick={handleButtonClick}>
           {!isUndefined(balance.data) ? (
             <span className={styles.balance}>
               <WalletSVG />
@@ -67,7 +71,7 @@ function Wallet() {
           </span>
         </button>
       ) : (
-        <Button text="Connect Wallet" size="x-small" onClick={openModal} className={styles.button} />
+        <Button text="Connect Wallet" size="x-small" onClick={openModal} className={className} />
       )}
 
       {isModalOpen && <NetworkWalletModal close={closeModal} />}