...

src/app/dashboard/_components/LiquidityReward.tsx

@@ -14,14 +14,15 @@ import { Divider } from "@nextui-org/react";
 import Image from "next/image";
 import { FC, useMemo, useState } from "react";
 import { formatEther, formatUnits, zeroAddress } from "viem";
-import { useWatchBlocks } from "wagmi";
+import { useChainId, useWatchBlocks } from "wagmi";
 
 type LPRewardProps = {
   data: AccountPosition;
 };
 
 export const LiquidityReward: FC<LPRewardProps> = ({ data }) => {
-  const { data: tokenlist = [] } = useGetTokenLists();
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const [showTXInfoModal, setShowTXInfoModal] = useState(false);
   const token0 = useMemo(
     () =>

src/app/dashboard/_components/VotingReward.tsx

@@ -77,7 +77,8 @@ export const FeeOrIncentiveComponent: FC<FeeOrIncentiveProps> = ({
 };
 
 export const VotingReward: FC<VotingRewardProps> = ({ data }) => {
-  const { data: tokenlist = [] } = useGetTokenLists();
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const [showTXInfoModal, setShowTXInfoModal] = useState(false);
   const token0 = useMemo(
     () =>
@@ -163,7 +164,6 @@ export const VotingReward: FC<VotingRewardProps> = ({ data }) => {
     [feesId, feesTokens, data.lockId, bribesId, bribesTokens],
   );
 
-  const chainId = useChainId();
   const { useRunMulticall } = useMulticall();
   const {
     executeMCall,

src/app/incentives/page.tsx

@@ -43,7 +43,9 @@ export default function Page() {
 
   const selectedTokens = useMemo(() => [selectedToken, null], [selectedToken]);
 
-  const { data: tokenLists = [] } = useGetTokenLists({});
+  const { data: tokenLists = [] } = useGetTokenLists({
+    variables: { chainId },
+  });
   const moni = useMemo(() => __MONI__[chainId], [chainId]);
   const useAllPoolsQuery = useAllPools();
   const { data: poolsList = [], refetch: refetchPoolsList } =

src/app/liquidity/_components/MyPosition.tsx

@@ -24,7 +24,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { FC, useMemo } from "react";
 import { formatEther, formatUnits, zeroAddress } from "viem";
-import { useWatchBlocks } from "wagmi";
+import { useChainId, useWatchBlocks } from "wagmi";
 
 type AccountPositionProps = {
   data: AccountPosition[];
@@ -36,8 +36,8 @@ type SinglePositionProps = {
 
 const Position: FC<SinglePositionProps> = ({ data }) => {
   const { push } = useRouter();
-
-  const { data: tokenlist = [] } = useGetTokenLists({});
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const { useStableFee, useVolatileFee } = useProtocolCore();
   const { data: stableFee } = useStableFee();
   const { data: volatileFee } = useVolatileFee();

src/app/liquidity/_components/Pools.tsx

@@ -12,7 +12,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { FC } from "react";
 import { formatEther, zeroAddress } from "viem";
-import { useWatchBlocks } from "wagmi";
+import { useChainId, useWatchBlocks } from "wagmi";
 import { Button } from "../../../components/ui/button";
 import { Popover } from "../../../components/ui/Popover";
 import {
@@ -134,7 +134,8 @@ const Pool: FC<PoolProps> = ({ data, tokenlist, stableFee, volatileFee }) => {
 };
 
 export const Pools: FC<PoolsProps> = ({ data }) => {
-  const { data: tokenlist = [] } = useGetTokenLists({});
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const { useStableFee, useVolatileFee } = useProtocolCore();
   const { data: stableFee } = useStableFee();
   const { data: volatileFee } = useVolatileFee();

src/app/liquidity/deposit/page.tsx

@@ -22,16 +22,17 @@ import { Deposit } from "../_components/Deposit";
 export default function Page() {
   const [showDepositComponent, setShowDepositComponent] = useState(false);
   const [isStableDeposit, setIsStableDeposit] = useState(false);
-  const { data: tokenLists = [] } = useGetTokenLists({});
+  const chainId = useChainId();
+  const { data: tokenLists = [] } = useGetTokenLists({
+    variables: { chainId },
+  });
   const [selectedTokens, setSelectedTokens] = useState<
     [TokenType | null, TokenType | null]
   >([null, null]);
 
   const query = useSearchParams();
   const { push } = useRouter();
   const pathName = usePathname();
-
-  const chainId = useChainId();
   const wrappedEther = useMemo(() => __WRAPPED_ETHER__[chainId], [chainId]);
   const firstAddress = useMemo(
     () =>

src/app/liquidity/stake/[poolId]/page.tsx

@@ -17,7 +17,7 @@ import { Divider, Slider } from "@nextui-org/react";
 import Image from "next/image";
 import { FC, useMemo, useState } from "react";
 import { formatEther, formatUnits, parseUnits, zeroAddress } from "viem";
-import { useAccount, useWatchBlocks } from "wagmi";
+import { useAccount, useChainId, useWatchBlocks } from "wagmi";
 
 type PageProps = {
   params: {
@@ -30,8 +30,8 @@ const Page: FC<PageProps> = ({ params }) => {
   const [showTXInfoModal, setShowTXInfoModal] = useState(false);
 
   const { isConnected } = useAccount();
-
-  const { data: tokenlist = [] } = useGetTokenLists();
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
 
   const { usePoolFee } = useProtocolCore();
   const { usePoolSymbol, usePoolTotalSupply, usePoolStability } =

src/app/liquidity/unstake/[poolId]/page.tsx

@@ -17,7 +17,7 @@ import { Divider, Slider } from "@nextui-org/react";
 import Image from "next/image";
 import { FC, useMemo, useState } from "react";
 import { formatEther, formatUnits, parseUnits, zeroAddress } from "viem";
-import { useAccount, useWatchBlocks } from "wagmi";
+import { useAccount, useChainId, useWatchBlocks } from "wagmi";
 
 type PageProps = {
   params: {
@@ -31,7 +31,8 @@ const Page: FC<PageProps> = ({ params }) => {
 
   const { isConnected } = useAccount();
 
-  const { data: tokenlist = [] } = useGetTokenLists();
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
 
   const { usePoolFee } = useProtocolCore();
   const { usePoolSymbol, usePoolTotalSupply, usePoolStability } =

src/app/liquidity/withdraw/[poolId]/page.tsx

@@ -31,8 +31,8 @@ const Page: FC<PageProps> = ({ params }) => {
   const [showTXInfoModal, setShowTXInfoModal] = useState(false);
 
   const { isConnected } = useAccount();
-
-  const { data: tokenlist = [] } = useGetTokenLists();
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
 
   const { usePoolFee } = useProtocolCore();
   const { usePoolSymbol, usePoolTotalSupply, usePoolStability } =
@@ -82,7 +82,6 @@ const Page: FC<PageProps> = ({ params }) => {
   const { useGetPoolGauge } = useVoterCore();
   const { data: gaugeId = zeroAddress, refetch: refetchGaugeId } =
     useGetPoolGauge(params.poolId);
-  const chainId = useChainId();
   const router = useMemo(() => __PROTOCOL_ROUTERS__[chainId], [chainId]);
   const { useRemoveLiquidity } = useProtocolCore();
 

src/app/swap/page.tsx

@@ -44,7 +44,9 @@ export default function Page() {
   const [amount, setAmount] = useState(0.0);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
-  const { data: tokenLists = [] } = useGetTokenLists({});
+  const { data: tokenLists = [] } = useGetTokenLists({
+    variables: { chainId },
+  });
   const [selectedTokens, setSelectedTokens] = useState<
     [TokenType | null, TokenType | null]
   >([null, null]);

src/app/vote/page.tsx

@@ -36,7 +36,8 @@ import { Pool } from "./_components/Pool";
 export default function Page() {
   const useAllPoolsQuery = useAllPools();
   const { data: pairs = [], refetch: refetchPairs } = useAllPoolsQuery();
-  const { data: tokenlist = [] } = useGetTokenLists({});
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const { useTotalWeight, useEpochNext, useIncentivizablePools } =
     useVoterCore();
   const { data: totalWeight = BigInt(0) } = useTotalWeight();
@@ -54,7 +55,6 @@ export default function Page() {
 
   const config = useConfig();
   const { address } = useAccount();
-  const chainId = useChainId();
   const voterAddress = useMemo(() => __VOTER__[chainId], [chainId]);
 
   const [totalRewards, setTotalRewards] = useState(0);

src/components/Header/Header.tsx

@@ -17,7 +17,7 @@ import { usePathname } from "next/navigation";
 import { FC, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { zeroAddress } from "viem";
-import { useAccount, useBlockNumber } from "wagmi";
+import { useAccount, useBlockNumber, useChainId } from "wagmi";
 import { ConnectButton } from "../ConnectButton";
 import { TransactionInfoModal } from "../Modal";
 import { VoteModal } from "../Modal/VoteModal";
@@ -58,7 +58,8 @@ export const Header: FC<Props> = ({ toggleMenuOpen }) => {
 
   const [showTXInfoModal, setShowTXInfoModal] = useState(false);
   const [showVoteModal, setShowVoteModal] = useState(false);
-  const { data: tokenlist = [] } = useGetTokenLists({});
+  const chainId = useChainId();
+  const { data: tokenlist = [] } = useGetTokenLists({ variables: { chainId } });
   const useLocksQuery = useLocks();
   const { data: locks = [] } = useLocksQuery();
   const { data: currentBlock = BigInt(0) } = useBlockNumber();

src/hooks/api/tokens.ts

@@ -1,12 +1,14 @@
+import { __API_CHAIN_NAMES__ } from "@/config/constants";
 import { NFTMetadata, TokenType } from "@/types";
 import { APIURL } from "@/utils/api";
 import { TokenURIReader } from "@/utils/token-uri-reader";
 import { createQuery } from "react-query-kit";
 
 export const useGetTokenLists = createQuery({
   queryKey: ["_tokens_"],
-  fetcher: async (): Promise<TokenType[]> => {
-    const url = new APIURL("/tokens/berachain");
+  fetcher: async (variables: { chainId: number }): Promise<TokenType[]> => {
+    const chainName = __API_CHAIN_NAMES__[variables.chainId];
+    const url = new APIURL(`/tokens/${chainName}`);
     const response = await fetch(url);
     return response.json();
   },