feat(vara-eth-idea/frontend): enhance Etherscan integration and network handling (#2447)

Author: vraja-nayaka

idea/vara-eth/frontend/src/app/api/use-api.ts

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai';
 import { useEffect } from 'react';
 import { usePublicClient } from 'wagmi';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 
 import { useSigner } from './use-signer';
 

idea/vara-eth/frontend/src/app/providers/eth/index.tsx

@@ -6,7 +6,7 @@ import { useAtomValue } from 'jotai';
 import { type PropsWithChildren, useEffect } from 'react';
 import { useChainId, useSwitchChain, WagmiProvider, webSocket } from 'wagmi';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 import {
   ETH_CHAIN_ID_MAINNET,
   ETH_CHAIN_ID_TESTNET,
@@ -63,6 +63,7 @@ createAppKit({
     history: false,
     receive: false,
   },
+  enableNetworkSwitch: false,
   enableWalletGuide: false,
   allWallets: 'HIDE',
   excludeWalletIds: [TRUST_WALLET_ID],

idea/vara-eth/frontend/src/components/ui/explorer-link/explorer-link.tsx

@@ -1,4 +1,8 @@
+import { useAtomValue } from 'jotai';
+
+import { nodeAtom } from '@/app/store';
 import EtherscanSvg from '@/assets/icons/etherscan.svg?react';
+import { getEtherscanBaseUrl } from '@/shared/config';
 import type { PropsWithClassName } from '@/shared/types';
 import { cx } from '@/shared/utils';
 
@@ -12,10 +16,13 @@ type Props = PropsWithClassName & {
 };
 
 const ExplorerLink = ({ path, id, className }: Props) => {
+  const { ethChainId } = useAtomValue(nodeAtom);
+  const etherscanBaseUrl = getEtherscanBaseUrl(ethChainId);
+
   return (
     <Tooltip value="View on Etherscan">
       <a
-        href={`https://hoodi.etherscan.io/${path}/${id}`}
+        href={`${etherscanBaseUrl}/${path}/${id}`}
         target="_blank"
         rel="noreferrer"
         className={cx(styles.link, className)}>

idea/vara-eth/frontend/src/components/wallet/wallet-button.tsx

@@ -11,13 +11,14 @@ const WalletButton = () => {
 
   const ethAccount = useAccount();
   const name = useEnsName({ address: ethAccount.address });
+  const chainName = ethAccount.chain?.name;
 
   return (
     <Button onClick={() => open()} className={styles.button}>
       {ethAccount.address ? (
         <>
           {name.data || getTruncatedText(ethAccount.address)}
-          <span className={styles.chain}>Hoodi</span>
+          <span className={styles.chain}>{chainName || 'Unknown network'}</span>
         </>
       ) : (
         'Connect Wallet'

idea/vara-eth/frontend/src/features/codes/lib/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import type { Hex } from 'viem';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 import type { PaginatedResponse } from '@/shared/types';
 import { fetchWithGuard } from '@/shared/utils';
 

idea/vara-eth/frontend/src/features/codes/nodes-switch/ui/nodes-switch.tsx

@@ -2,8 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { myActivityAtom } from '@/app/store';
-import { type NodeState, nodeAtom } from '@/app/store/node';
+import { myActivityAtom, type NodeState, nodeAtom } from '@/app/store';
 
 import { NODE_SECTIONS } from '../api';
 import { getSectionByNodeAddress, LocalStorage, NODE_ADRESS_URL_PARAM } from '../config';

idea/vara-eth/frontend/src/features/messages/lib/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import type { Hex } from 'viem';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 
 import {
   getMessageRequest,

idea/vara-eth/frontend/src/features/programs/lib/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import type { Hex } from 'viem';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 import type { Code } from '@/features/codes/lib/requests';
 import type { PaginatedResponse } from '@/shared/types';
 import { fetchWithGuard } from '@/shared/utils';

idea/vara-eth/frontend/src/features/search/ui/search.tsx

@@ -7,7 +7,7 @@ import { type Hex, isAddress, isHash } from 'viem';
 import { useConfig } from 'wagmi';
 import { z } from 'zod';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 import SearchSVG from '@/assets/icons/search.svg?react';
 import { Button } from '@/components';
 import { routes } from '@/shared/config';

idea/vara-eth/frontend/src/features/transactions/lib/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import type { Hex } from 'viem';
 
-import { nodeAtom } from '@/app/store/node';
+import { nodeAtom } from '@/app/store';
 import type { PaginatedResponse } from '@/shared/types';
 import { fetchWithGuard } from '@/shared/utils';