diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx
index 250976e3d..85e4a4231 100644
--- a/src/components/dapp/WalletButton.tsx
+++ b/src/components/dapp/WalletButton.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode, useMemo } from "react";
 import { useWalletContext } from "../../context/Wallet.context";
-import { Format } from "../../utils/format";
+import { Fmt } from "../../utils/formatter.service";
 import Dropdown from "../extenders/Dropdown";
 import Group from "../extenders/Group";
 import Modal from "../extenders/Modal";
@@ -16,27 +16,36 @@ import WalletConnectors from "./WalletConnectors";
 export type WalletButton = ButtonProps;
 
 export default function WalletButton(props: ButtonProps) {
-  const { address, disconnect, connected, connector, chainId, switchChain, chains } = useWalletContext();
+  const {
+    address,
+    disconnect,
+    connected,
+    connector,
+    chainId,
+    switchChain,
+    chains,
+  } = useWalletContext();
 
   const chainOptions = useMemo(() => {
     if (!chains) return [];
-    return chains.reduce(
-      (obj, chain) => {
-        obj[chain.id] = (
-          <Group>
-            <Icon src={chain?.icon} />
-            {chain.name}
-          </Group>
-        );
-        return obj;
-      },
-      {} as { [chainId: number]: ReactNode },
-    );
+    return chains.reduce((obj, chain) => {
+      obj[chain.id] = (
+        <Group>
+          <Icon src={chain?.icon} />
+          {chain.name}
+        </Group>
+      );
+      return obj;
+    }, {} as { [chainId: number]: ReactNode });
   }, [chains]);
 
   if (!connected)
     return (
-      <Modal title="Connect Wallet" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
+      <Modal
+        title="Connect Wallet"
+        className="mx-auto w-full max-w-[500px]"
+        modal={<WalletConnectors />}
+      >
         <Button look="hype" size="lg" {...props}>
           Connect wallet
         </Button>
@@ -45,7 +54,10 @@ export default function WalletButton(props: ButtonProps) {
 
   return (
     <>
-      <Select state={[chainId, c => switchChain(+c)]} options={chainOptions} />
+      <Select
+        state={[chainId, (c) => switchChain(+c)]}
+        options={chainOptions}
+      />
       <Dropdown
         size="lg"
         padding="xs"
@@ -54,13 +66,20 @@ export default function WalletButton(props: ButtonProps) {
             <Group className="items-center justify-between" size="xl">
               <Group className="items-center">
                 {/* TODO: Show the account icon by default if there is no ENS icon */}
-                <Icon className="text-main-11 !w-xl*2 !h-xl*2" remix="RiAccountCircleFill" />
+                <Icon
+                  className="text-main-11 !w-xl*2 !h-xl*2"
+                  remix="RiAccountCircleFill"
+                />
                 <Image className="h-lg*2 w-lg*2" src={connector?.icon} />
                 <Hash size="lg" bold copy format="short">
                   {address}
                 </Hash>
               </Group>
-              <Button look="soft" onClick={disconnect} className="bg-main-5 !p-sm">
+              <Button
+                look="soft"
+                onClick={disconnect}
+                className="bg-main-5 !p-sm"
+              >
                 <Icon className="text-main-11" remix="RiShutDownLine" />
               </Button>
             </Group>
@@ -78,9 +97,10 @@ export default function WalletButton(props: ButtonProps) {
               </Button>
             </Group>
           </>
-        }>
+        }
+      >
         <Button look="tint" className="w-full justify-center">
-          {Format.address(address, "short")}
+          {Fmt.address(address, "short")}
         </Button>
       </Dropdown>
     </>
diff --git a/src/utils/format.ts b/src/utils/format.ts
deleted file mode 100644
index 9ca1fbb30..000000000
--- a/src/utils/format.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export abstract class Format {
-  public static address(value?: string, format?: "short" | "prefix") {
-    if (!value) return;
-    switch (format) {
-      case "short":
-        return `${value?.slice(0, 2 + 5)}...${value?.slice(-5)}`;
-      case "prefix":
-        return value?.slice(0, 5);
-      default:
-        return value;
-    }
-  }
-}
diff --git a/src/utils/formatter.service.ts b/src/utils/formatter.service.ts
new file mode 100644
index 000000000..5cded40f5
--- /dev/null
+++ b/src/utils/formatter.service.ts
@@ -0,0 +1,40 @@
+import { parseUnits } from "viem";
+
+export class FormatterService {
+  public static address(value?: string, format?: "short" | "prefix") {
+    if (!value) return;
+    switch (format) {
+      case "short":
+        return `${value?.slice(0, 2 + 5)}...${value?.slice(-5)}`;
+      case "prefix":
+        return value?.slice(0, 5);
+      default:
+        return value;
+    }
+  }
+
+  toNumber(value: bigint | string, decimals = 18): number {
+    const bi = BigInt(value);
+
+    const fractionalPart =
+      Number.parseFloat((bi % BigInt(10 ** decimals)).toString()) /
+      10 ** decimals;
+    let integerPart = bi / BigInt(10 ** decimals);
+
+    // trim the integer part if it's too large to avoid potential overflows
+    if (integerPart > BigInt(Number.MAX_SAFE_INTEGER)) {
+      integerPart = BigInt(Number.MAX_SAFE_INTEGER) / BigInt(10 ** 10);
+    }
+    if (integerPart < -1n * BigInt(Number.MAX_SAFE_INTEGER)) {
+      integerPart = (-1n * BigInt(Number.MAX_SAFE_INTEGER)) / BigInt(10 ** 10);
+    }
+
+    return Number.parseFloat(integerPart.toString()) + fractionalPart;
+  }
+
+  toBigInt(value: number, decimals = 18): bigint {
+    return parseUnits(value.toString(), decimals);
+  }
+}
+
+export { FormatterService as Fmt };