@ensofinance/checkout-widget 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {

package/src/components/steps/QuoteStep.tsx

@@ -8,7 +8,7 @@ import { Button, IconButton, Input } from "../ui";
 import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
 import { TransactionDetailRow } from "../TransactionDetailRow";
 import { useAppDetails, useRouteData } from "@/util/enso-hooks";
-import { getChainName } from "@/util/common";
+import { useChainName } from "@/util/common";
 import QuoteParameters from "../QuoteParameters";
 
 const QuoteStep = () => {
@@ -19,6 +19,7 @@ const QuoteStep = () => {
     const { routeLoading, usdAmountIn, routeData } = useRouteData();
     const walletChainId = useChainId();
     const { switchChain } = useSwitchChain();
+    const chainName = useChainName(chainIdIn);
 
     const wrongChain = walletChainId !== chainIdIn;
 
@@ -95,7 +96,7 @@ const QuoteStep = () => {
                                 switchChain({ chainId: chainIdIn });
                             }}
                         >
-                            Switch to {getChainName(chainIdIn)}
+                            Switch to {chainName}
                         </Button>
                     ) : (
                         <Button

package/src/util/common.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { useAccount } from "wagmi";
+import { useAccount, useConfig } from "wagmi";
 import { type Address, zeroAddress } from "viem";
 import {
     CHAINS_ETHERSCAN,
@@ -305,6 +305,13 @@ export const getChainName = (chainId: SupportedChainId) => {
     return capitalize(geckoName).split("-")[0];
 };
 
+// Hook to get chain name from wagmi config
+export const useChainName = (chainId: number) => {
+    const config = useConfig();
+    const chain = config.chains.find((c) => c.id === chainId);
+    return chain?.name || getChainName(chainId as SupportedChainId);
+};
+
 export const shortenAddress = (address: string) => {
     return `${address.slice(0, 4)}...${address.slice(-4)}`;
 };