diff --git a/.eslintrc.json b/.eslintrc.json
index a885bd8..ea99b20 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,3 @@
-{
-	"extends": ["next/core-web-vitals", "next/typescript"]
-}
+// {
+// 	"extends": ["next/core-web-vitals", "next/typescript"]
+// }
diff --git a/src/app/add-stake/page.tsx b/src/app/add-stake/page.tsx
index b509c8c..9604544 100644
--- a/src/app/add-stake/page.tsx
+++ b/src/app/add-stake/page.tsx
@@ -6,7 +6,7 @@ import { clipDecimals, ETH } from "@/utils";
 import { MagicSpend } from "@/utils/magic-spend";
 import config from "@/utils/wagmi-config";
 import { useEffect, useState } from "react";
-import { Chain, createPublicClient, formatEther, http, parseEther } from "viem";
+import { Chain, formatEther, parseEther } from "viem";
 import { useAccount, useBalance, useChainId, useSwitchChain } from "wagmi";
 import { useWriteContract } from "wagmi";
 
@@ -22,8 +22,8 @@ export default function AddStake() {
 		address,
 	});
 
-    const { chains, switchChain } = useSwitchChain()
-    const chainId = useChainId()
+	const { switchChain } = useSwitchChain();
+	const chainId = useChainId();
 
 	const magicSpend = new MagicSpend(config);
 
@@ -32,8 +32,8 @@ export default function AddStake() {
 	});
 
 	useEffect(() => {
-        setIsMounted(true);
-    }, []);
+		setIsMounted(true);
+	}, []);
 
 	const write = async () =>
 		writeContract({
@@ -51,13 +51,13 @@ export default function AddStake() {
 	};
 
 	const handleStake = async () => {
-        try {
-		  setIsLoading(true)
-		  await write()
+		try {
+			setIsLoading(true);
+			await write();
 		} catch (error) {
-		  console.error('Error staking:', error)
+			console.error("Error staking:", error);
 		} finally {
-		  setIsLoading(false)
+			setIsLoading(false);
 		}
 	};
 
@@ -72,7 +72,6 @@ export default function AddStake() {
 
 			try {
 				const balances = await magicSpend.getBalances(address);
-
 				setChainTokenBalances(balances);
 			} catch (error) {
 				console.error("Error loading balances:", error);
@@ -100,26 +99,36 @@ export default function AddStake() {
 	return (
 		<div className="flex gap-8 p-4 max-w-7xl mx-auto">
 			<div className="flex-1">
-				<div className="mb-6">
-					<h2 className="text-xl font-bold mb-2">Total Unstaked Balance</h2>
-					<BalanceCard balance={{ chain: "Total", token: "ETH", balance: totalBalance }} />
-				</div>
+				{isLoadingBalances ? (
+					<div className="flex items-center justify-center h-full">
+						<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
+					</div>
+				) : (
+					<>
+						<div className="mb-6">
+							<h2 className="text-xl font-bold mb-2">Total Unstaked Balance</h2>
+							<BalanceCard
+								balance={{ chain: "Total", token: "ETH", balance: totalBalance }}
+							/>
+						</div>
 
-				<h2 className="text-xl font-bold mb-4">Available Unstaked Balances</h2>
-				<div className="grid grid-cols-3 gap-4">
-					{chainTokenBalances.map((item, index) => (
-						<div
-							key={index}
-							className="p-4 border rounded-lg hover:shadow-lg transition-shadow cursor-pointer"
-							onClick={() => handleBalanceClick(item.chain, item.balance)}
-						>
-							<div className="font-medium text-gray-600">{item.chain}</div>
-							<div className="text-lg font-bold">
-								{clipDecimals(formatEther(item.balance))} {item.token}
-							</div>
+						<h2 className="text-xl font-bold mb-4">Available Unstaked Balances</h2>
+						<div className="grid grid-cols-3 gap-4">
+							{chainTokenBalances.map((item, index) => (
+								<div
+									key={index}
+									className="p-4 border rounded-lg hover:shadow-lg transition-shadow cursor-pointer"
+									onClick={() => handleBalanceClick(item.chain, item.balance)}
+								>
+									<div className="font-medium text-gray-600">{item.chain}</div>
+									<div className="text-lg font-bold">
+										{clipDecimals(formatEther(item.balance))} {item.token}
+									</div>
+								</div>
+							))}
 						</div>
-					))}
-				</div>
+					</>
+				)}
 			</div>
 
 			<div className="flex-1 max-w-lg">
@@ -159,7 +168,7 @@ export default function AddStake() {
 							type="number"
 							value={amount}
 							onChange={(e) => {
-								setAmount(e.target.value)
+								setAmount(e.target.value);
 							}}
 							placeholder="0.0"
 							className="flex-1 p-2 border rounded"
@@ -174,23 +183,23 @@ export default function AddStake() {
 				</div>
 
 				{isMounted && chainId === selectedChain.id ? (
-                    <>
-                        <button
-                            onClick={handleStake}
-                            disabled={!write || isLoading || amount === "0"}
-                            className="w-full py-2 bg-purple-500 text-white rounded disabled:opacity-50"
-                        >
-                            {isLoading ? "Staking..." : "Stake"}
-                        </button>
-
-                        {parseFloat(amount) >= 0.1 && (
-                            <div className="p-4 mt-2 bg-yellow-100 rounded-lg">
-                                <span className="text-m font-bold text-yellow-700">
-                                    You are about to stake more than 0.1 ETH, be careful!
-                                </span>
-                            </div>
-                        )}
-                    </>
+					<>
+						<button
+							onClick={handleStake}
+							disabled={!write || isLoading || amount === "0"}
+							className="w-full py-2 bg-purple-500 text-white rounded disabled:opacity-50"
+						>
+							{isLoading ? "Staking..." : "Stake"}
+						</button>
+
+						{parseFloat(amount) >= 0.1 && (
+							<div className="p-4 mt-2 bg-yellow-100 rounded-lg">
+								<span className="text-m font-bold text-yellow-700">
+									You are about to stake more than 0.1 ETH, be careful!
+								</span>
+							</div>
+						)}
+					</>
 				) : (
 					<button
 						onClick={() => switchChain({ chainId: selectedChain.id })}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6bf514..d1d7175 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,11 @@ import { useAccount, useBalance } from "wagmi";
 import Link from "next/link";
 import { formatEther } from "viem";
 import { clipDecimals, getChain } from "@/utils";
-import { MagicSpend, MagicSpendBalance, PimlicoMagicSpendStake } from "@/utils/magic-spend";
+import {
+	MagicSpend,
+	MagicSpendBalance,
+	PimlicoMagicSpendStake,
+} from "@/utils/magic-spend";
 import config from "@/utils/wagmi-config";
 import BalanceCard from "@/components/balance-card";
 
@@ -13,8 +17,8 @@ export default function Home() {
 	const [isMounted, setIsMounted] = useState(false);
 	const { address } = useAccount();
 	const magicSpend = new MagicSpend(config);
-	const [balances, setBalances] = useState<MagicSpendBalance[]>([]);
 	const [stakes, setStakes] = useState<PimlicoMagicSpendStake[]>([]);
+	const [isLoadingStakes, setIsLoadingStakes] = useState(true);
 
 	useEffect(() => {
 		setIsMounted(true);
@@ -23,25 +27,46 @@ export default function Home() {
 	useEffect(() => {
 		if (!address) return;
 
-		magicSpend.getBalances(address).then(setBalances);
-		magicSpend.getStakes(address).then(setStakes);
+		const loadStakes = async () => {
+			try {
+				const stakesData = await magicSpend.getStakes(address);
+				setStakes(stakesData);
+			} catch (error) {
+				console.error("Error loading stakes:", error);
+			} finally {
+				setIsLoadingStakes(false);
+			}
+		};
+
+		loadStakes();
 	}, [address]);
 
 	const balance = stakes.reduce((acc, curr) => acc + curr.amount, BigInt(0));
 
-	console.log(stakes);
+	if (isLoadingStakes) {
+		return (
+			<div className="flex items-center justify-center h-screen">
+				<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="p-8 max-w-7xl mx-auto">
 			<div className="mb-8">
 				<div className="flex items-center gap-4 mb-4">
 					<h2 className="text-2xl font-bold">Your Balance</h2>
-					<Link href="/transfer" className="text-purple-600 hover:text-purple-800">
+					<Link
+						href="/transfer"
+						className="text-purple-600 hover:text-purple-800"
+					>
 						Transfer Tokens
 					</Link>
 				</div>
 				<p className="text-gray-600 mb-4">
-					This is your total Magic Spend token balance, available across all connected chains. 
-					These tokens can be used instantly on any supported network, giving you seamless cross-chain liquidity.
+					This is your total Magic Spend token balance, available across all
+					connected chains. These tokens can be used instantly on any supported
+					network, giving you seamless cross-chain liquidity.
 				</p>
 				<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 					<BalanceCard balance={{ token: "ETH", balance }} primary={true} />
@@ -51,20 +76,27 @@ export default function Home() {
 			<div className="mb-8">
 				<div className="flex items-center gap-4 mb-4">
 					<h3 className="text-2xl font-bold">Staking Overview</h3>
-					<Link href="/add-stake" className="text-purple-600 hover:text-purple-800">
+					<Link
+						href="/add-stake"
+						className="text-purple-600 hover:text-purple-800"
+					>
 						Add Stake
 					</Link>
 				</div>
 				<p className="text-gray-600 mb-4">
-					Below are your individual stakes across different chains. The sum of these stakes determines your total balance shown above.
+					Below are your individual stakes across different chains. The sum of
+					these stakes determines your total balance shown above.
 				</p>
 				<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 					{stakes.map((stake) => (
-						<BalanceCard key={stake.chainId} balance={{
-							chain: getChain(stake.chainId).name,
-							token: 'ETH',
-							balance: stake.amount,
-						}} />
+						<BalanceCard
+							key={stake.chainId}
+							balance={{
+								chain: getChain(stake.chainId).name,
+								token: "ETH",
+								balance: stake.amount,
+							}}
+						/>
 					))}
 				</div>
 			</div>
diff --git a/src/app/transfer/page.tsx b/src/app/transfer/page.tsx
index f977acd..160c721 100644
--- a/src/app/transfer/page.tsx
+++ b/src/app/transfer/page.tsx
@@ -1,12 +1,30 @@
 "use client";
 
 import { use, useEffect, useState } from "react";
-import { useAccount, useBalance, useChainId, useEnsName, useSendTransaction, useSignMessage, useSignTypedData } from "wagmi";
+import {
+	useAccount,
+	useBalance,
+	useChainId,
+	useEnsName,
+	useSendTransaction,
+	useSignMessage,
+	useSignTypedData,
+} from "wagmi";
 import { useWriteContract, useEnsAddress } from "wagmi";
-import { parseEther, formatEther, isAddress, PrivateKeyAccount, getContract, Address, Hex, http, encodeFunctionData } from "viem";
+import {
+	parseEther,
+	formatEther,
+	isAddress,
+	PrivateKeyAccount,
+	getContract,
+	Address,
+	Hex,
+	http,
+	encodeFunctionData,
+} from "viem";
 import { clipDecimals, ETH } from "@/utils";
-import { normalize } from 'viem/ens'
-import { useDebounce } from 'use-debounce';
+import { normalize } from "viem/ens";
+import { useDebounce } from "use-debounce";
 import { MagicSpend, MagicSpendAllowance } from "@/utils/magic-spend";
 import config from "@/utils/wagmi-config";
 import { SessionKey } from "@/utils/session-key";
@@ -17,55 +35,56 @@ import { createPimlicoClient } from "permissionless/clients/pimlico";
 import { entryPoint07Address } from "viem/account-abstraction";
 import { toSafeSmartAccount } from "permissionless/accounts";
 import { createSmartAccountClient } from "permissionless";
-import { Bounce, toast } from 'react-toastify';
+import { Bounce, toast } from "react-toastify";
 
 export default function Transfer() {
 	const [isMounted, setIsMounted] = useState(false);
 	const [amount, setAmount] = useState<string>("0.01");
-	const [recipientInput, setRecipientInput] = useState("0x433704c40F80cBff02e86FD36Bc8baC5e31eB0c1");
+	const [recipientInput, setRecipientInput] = useState(
+		"0x433704c40F80cBff02e86FD36Bc8baC5e31eB0c1",
+	);
 	const [isLoading, setIsLoading] = useState(false);
 	const { address } = useAccount();
 	const { signTypedDataAsync } = useSignTypedData({
 		config,
-	})
+	});
 	const { signMessageAsync } = useSignMessage({
 		config,
-	})
+	});
 	const { data: tokenBalance } = useBalance({
 		address,
 	});
-    const chainId = useChainId()
-	console.log('chainId')
-	console.log(chainId)
-	const { data: hash, sendTransaction } = useSendTransaction()
-    const [sessionAccount, setSessionAccount] = useState<PrivateKeyAccount | null>(null);
-    const magicSpend = new MagicSpend(config);
+	const chainId = useChainId();
+
+	const { data: hash, sendTransaction } = useSendTransaction();
+
+	const [sessionAccount, setSessionAccount] =
+		useState<PrivateKeyAccount | null>(null);
+	const magicSpend = new MagicSpend(config);
 
 	useEffect(() => {
-        setIsMounted(true);
-        const fetchSessionKey = async () => {
-            const sessionKey = new SessionKey();
-            const key = await sessionKey.getKey();
-            setSessionAccount(key);
-        }
+		setIsMounted(true);
+		const fetchSessionKey = async () => {
+			const sessionKey = new SessionKey();
+			const key = await sessionKey.getKey();
+			setSessionAccount(key);
+		};
 
-        fetchSessionKey();
-    }, []);
+		fetchSessionKey();
+	}, []);
 
 	const [debouncedRecipient] = useDebounce(
-		recipientInput.replace(/^\.+|\.+$/g, ''),
-		500
+		recipientInput.replace(/^\.+|\.+$/g, ""),
+		500,
 	);
 
 	const { data: ensAddress } = useEnsAddress({
 		name: normalize(debouncedRecipient),
-        chainId: 1,
-	})
+		chainId: 1,
+	});
 
 	const recipientAddress = ensAddress || recipientInput;
 
-	const { writeContract } = useWriteContract();	
-
 	const handleMaxClick = () => {
 		if (tokenBalance) {
 			setAmount(clipDecimals(formatEther(tokenBalance.value)));
@@ -73,52 +92,50 @@ export default function Transfer() {
 	};
 
 	const signMagicSpendAllowance = async (allowance: MagicSpendAllowance) => {
-		console.log('allowance')
-		console.log(allowance)
-
-		console.log('address')
-		console.log(address)
-
 		const sig = await signTypedDataAsync({
 			types: {
 				AssetAllowance: [
-					{ name: 'token', type: 'address' },
-					{ name: 'amount', type: 'uint128' },
-					{ name: 'chainId', type: 'uint128' },
+					{ name: "token", type: "address" },
+					{ name: "amount", type: "uint128" },
+					{ name: "chainId", type: "uint128" },
 				],
 				Allowance: [
-					{ name: 'account', type: 'address' },
-					{ name: 'assets', type: 'AssetAllowance[]' },
-					{ name: 'validUntil', type: 'uint128' },
-					{ name: 'validAfter', type: 'uint128' },
-					{ name: 'salt', type: 'uint128' },
-					{ name: 'operator', type: 'address' },
-				]
+					{ name: "account", type: "address" },
+					{ name: "assets", type: "AssetAllowance[]" },
+					{ name: "validUntil", type: "uint128" },
+					{ name: "validAfter", type: "uint128" },
+					{ name: "salt", type: "uint128" },
+					{ name: "operator", type: "address" },
+				],
 			},
-			primaryType: 'Allowance',
+			primaryType: "Allowance",
 			message: allowance,
-		})
+		});
 
 		return sig;
-	}
+	};
 
 	const handleTransfer = async () => {
 		if (!recipientAddress) return;
 
-        if (!sessionAccount) return;
+		if (!sessionAccount) return;
 
 		if (!address) return;
 
-        console.log(sessionAccount);
-
 		try {
 			setIsLoading(true);
 
-            // - Check user's active allowances
-            const allowances = await magicSpend.getAllowancesByOperator(sessionAccount.address)
+			// - Check user's active allowances
+			const allowances = await magicSpend.getAllowancesByOperator(
+				sessionAccount.address,
+			);
 
-			const totalAllowance = allowances.flatMap(a => a.assets)
-				.reduce((acc: bigint, curr) => acc + curr.amount - curr.used, BigInt(0));
+			const totalAllowance = allowances
+				.flatMap((a) => a.assets)
+				.reduce(
+					(acc: bigint, curr) => acc + curr.amount - curr.used,
+					BigInt(0),
+				);
 
 			// - Check if it's enough to cover the transfer
 			if (totalAllowance < parseEther(amount)) {
@@ -127,40 +144,39 @@ export default function Transfer() {
 					account: address,
 					token: ETH,
 					amount: `0x${(parseEther(amount) * BigInt(3)).toString(16)}`,
-				})
+				});
 
 				const allowanceWithOperator = {
 					...newAllowance,
 					operator: sessionAccount.address,
-				}
-
+				};
 
 				const stakeManager = getContract({
-					address: '0xA38D9e0F911B1bEd03a038367A6e9667700CDEFe',
+					address: "0xA38D9e0F911B1bEd03a038367A6e9667700CDEFe",
 					abi: MagicSpendStakeManagerAbi,
 					client: config.getClient({ chainId: 11155111 }),
-				})
-
-				const h = await stakeManager.read.getAllowanceHash([{
-					...allowanceWithOperator,
-					validAfter: Number(allowanceWithOperator.validAfter),
-					validUntil: Number(allowanceWithOperator.validUntil),
-					salt: Number(allowanceWithOperator.salt),
-				}])
+				});
 
-				console.log('h')
-				console.log(h)
+				const h = await stakeManager.read.getAllowanceHash([
+					{
+						...allowanceWithOperator,
+						validAfter: Number(allowanceWithOperator.validAfter),
+						validUntil: Number(allowanceWithOperator.validUntil),
+						salt: Number(allowanceWithOperator.salt),
+					},
+				]);
 
 				const signature = await signMessageAsync({
 					message: {
 						raw: h,
-					}
-				})
+					},
+				});
 
 				// - Grant the allowance to Pimlico
-				const k = await magicSpend.grantAllowance(allowanceWithOperator, signature)
-				console.log('k')
-				console.log(k)
+				const k = await magicSpend.grantAllowance(
+					allowanceWithOperator,
+					signature,
+				);
 			}
 
 			// - Request the withdrawal
@@ -168,40 +184,38 @@ export default function Transfer() {
 				abi: MagicSpendWithdrawalManagerAbi,
 				address: "0x3F4A20335e9045f71411b04E9F53814f5b8d725d",
 				client: config.getClient({ chainId: 11155111 }),
-			})
-			
-			const withdrawalHash = await withdrawalManagerContract.read.getWithdrawalHash([
-				{
-					token: ETH,
-					amount: parseEther(amount),
-					chainId: BigInt(sepolia.id),
-					recipient: recipientAddress as Address,
-					preCalls: [],
-					postCalls: [],
-					validUntil: Number(0),
-					validAfter: Number(0),
-					salt: 0
-				}
-			]) as Hex;
-
-			console.log('withdrawalHash')
-			console.log(withdrawalHash)
+			});
+
+			const withdrawalHash =
+				(await withdrawalManagerContract.read.getWithdrawalHash([
+					{
+						token: ETH,
+						amount: parseEther(amount),
+						chainId: BigInt(sepolia.id),
+						recipient: recipientAddress as Address,
+						preCalls: [],
+						postCalls: [],
+						validUntil: Number(0),
+						validAfter: Number(0),
+						salt: 0,
+					},
+				])) as Hex;
 
 			const operatorRequestSignature = await sessionAccount.signMessage({
 				message: {
-					raw: withdrawalHash
-				}
-			})
+					raw: withdrawalHash,
+				},
+			});
 
 			const [withdrawal, signature] = await magicSpend.sponsorWithdrawal({
 				token: ETH,
 				recipient: recipientAddress as Address,
 				amount: `0x${(parseEther(amount)).toString(16)}`,
 				signature: operatorRequestSignature,
-			})
+			});
 
 			// - Create the user operation
-			const publicClient = config.getClient({ chainId: 11155111 })
+			const publicClient = config.getClient({ chainId: 11155111 });
 
 			const paymasterClient = createPimlicoClient({
 				transport: http(process.env.NEXT_PUBLIC_PIMLICO_API_URL),
@@ -209,7 +223,7 @@ export default function Transfer() {
 					address: entryPoint07Address,
 					version: "0.7",
 				},
-			})
+			});
 
 			const safeAccount = await toSafeSmartAccount({
 				client: publicClient,
@@ -219,7 +233,7 @@ export default function Transfer() {
 				},
 				owners: [sessionAccount],
 				version: "1.4.1",
-			})
+			});
 
 			const smartAccountClient = createSmartAccountClient({
 				account: safeAccount,
@@ -227,13 +241,14 @@ export default function Transfer() {
 				paymaster: paymasterClient,
 				bundlerTransport: http(process.env.NEXT_PUBLIC_PIMLICO_API_URL),
 				userOperation: {
-					estimateFeesPerGas: async () => (await paymasterClient.getUserOperationGasPrice()).fast,
+					estimateFeesPerGas: async () =>
+						(await paymasterClient.getUserOperationGasPrice()).fast,
 				},
-			})
+			});
 
 			const magicSpendCallData = encodeFunctionData({
 				abi: MagicSpendWithdrawalManagerAbi,
-				functionName: 'withdraw',
+				functionName: "withdraw",
 				args: [
 					{
 						...withdrawal,
@@ -242,9 +257,9 @@ export default function Transfer() {
 						salt: Number(withdrawal.salt),
 					},
 					signature,
-				]
-			})
-			
+				],
+			});
+
 			// Send user operation and withdraw funds
 			// You can add subsequent calls after the withdrawal, like "buy NFT on OpenSea for ETH"
 			const userOpHash = await smartAccountClient.sendUserOperation({
@@ -254,20 +269,19 @@ export default function Transfer() {
 						to: "0x3F4A20335e9045f71411b04E9F53814f5b8d725d",
 						value: parseEther("0"),
 						data: magicSpendCallData,
-					}
-				]
-			})
+					},
+				],
+			});
 
 			const receipt = await paymasterClient.waitForUserOperationReceipt({
-				hash: userOpHash
-			})
-			
-			console.log(`Transaction hash: ${receipt.receipt.transactionHash}`);
+				hash: userOpHash,
+			});
+
 			toast(
 				<div>
 					🦄 Transaction successful!
 					<br />
-					<a 
+					<a
 						href={`https://sepolia.etherscan.io/tx/${receipt.receipt.transactionHash}`}
 						target="_blank"
 						rel="noopener noreferrer"
@@ -286,12 +300,12 @@ export default function Transfer() {
 					progress: undefined,
 					theme: "light",
 					transition: Bounce,
-				}
+				},
 			);
 		} catch (error) {
 			console.error("Error transferring");
 			console.error(error);
-			toast.error('Transaction failed! Please try again.', {
+			toast.error("Transaction failed! Please try again.", {
 				position: "top-right",
 				autoClose: 5000,
 				hideProgressBar: false,
@@ -310,7 +324,9 @@ export default function Transfer() {
 				<h1 className="text-2xl font-bold mb-6">Transfer ETH</h1>
 
 				<div className="mb-4">
-					<label className="block text-sm font-medium mb-2">Recipient Address or ENS</label>
+					<label className="block text-sm font-medium mb-2">
+						Recipient Address or ENS
+					</label>
 					<input
 						type="text"
 						value={recipientInput}
@@ -318,7 +334,7 @@ export default function Transfer() {
 						placeholder="0x... or name.eth"
 						className="w-full p-2 border rounded"
 					/>
-					{recipientInput.endsWith('.eth') && ensAddress && (
+					{recipientInput.endsWith(".eth") && ensAddress && (
 						<p className="mt-1 text-sm text-gray-600">
 							Resolved address: {ensAddress}
 						</p>
@@ -346,7 +362,7 @@ export default function Transfer() {
 
 				<button
 					onClick={handleTransfer}
-					// disabled={isLoading || amount === "0" || !isAddress(recipientAddress) || !sessionAccount !== null}
+					disabled={isLoading || parseEther(amount) === BigInt(0) || !isAddress(recipientAddress) || sessionAccount === null}
 					className="w-full py-2 bg-purple-500 text-white rounded disabled:opacity-50"
 				>
 					{isLoading ? "Transferring..." : "Transfer"}
diff --git a/src/components/balance-card.tsx b/src/components/balance-card.tsx
index 01292b5..d5297cb 100644
--- a/src/components/balance-card.tsx
+++ b/src/components/balance-card.tsx
@@ -2,7 +2,6 @@ import { clipDecimals } from "@/utils";
 import { MagicSpendBalance } from "@/utils/magic-spend";
 import { formatEther } from "viem";
 
-
 export default function BalanceCard({
 	balance,
 	primary,
@@ -15,7 +14,9 @@ export default function BalanceCard({
 	if (primary === true) {
 		return (
 			<div className="p-6 bg-purple-100 rounded-lg">
-				{chain && <div className="text-2xl font-bold text-purple-700">{chain}</div>}
+				{chain && (
+					<div className="text-2xl font-bold text-purple-700">{chain}</div>
+				)}
 				<div className="text-2xl font-bold text-purple-700">
 					{clipDecimals(formatEther(balance.balance))} {balance.token}
 				</div>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 9c2348c..5042573 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -23,6 +23,9 @@ const NavBar = () => {
 				<Link href="/transfer" className="hover:text-primary">
 					Transfer
 				</Link>
+				<Link href="https://docs.pimlico.io/infra/magic-spend" target="_blank" className="hover:text-primary">
+					Docs
+				</Link>
 			</div>
 			<div className="my-auto flex"></div>
 			<div>
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index de621ae..b0bbf37 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -4,23 +4,22 @@ export const clipDecimals = (value: string, decimals: number = 2): string => {
 	return `${parts[0]}.${parts[1].slice(0, decimals)}`;
 };
 
+import * as chains from "viem/chains";
 
-import * as chains from 'viem/chains';
-
-  /**
-   * Gets the chain object for the given chain id.
-   * @param chainId - Chain id of the target EVM chain.
-   * @returns Viem's chain object.
-   */
+/**
+ * Gets the chain object for the given chain id.
+ * @param chainId - Chain id of the target EVM chain.
+ * @returns Viem's chain object.
+ */
 export const getChain = (chainId: number) => {
-    for (const chain of Object.values(chains)) {
-      if ('id' in chain) {
-        if (chain.id === chainId) {
-          return chain;
-        }
-      }
+	for (const chain of Object.values(chains)) {
+		if ("id" in chain) {
+			if (chain.id === chainId) {
+				return chain;
+			}
+		}
 	}
-	
+
 	throw new Error(`Chain with id ${chainId} not found`);
 };
 
diff --git a/src/utils/magic-spend.tsx b/src/utils/magic-spend.tsx
index c507120..671e4cf 100644
--- a/src/utils/magic-spend.tsx
+++ b/src/utils/magic-spend.tsx
@@ -80,10 +80,12 @@ export type PimlicoMagicSpendSchema = [
 		Method: "pimlico_prepareMagicSpendAllowance";
 	},
 	{
-		Parameters: [{
-			allowance: MagicSpendAllowance;
-			signature: Hex;
-		}];
+		Parameters: [
+			{
+				allowance: MagicSpendAllowance;
+				signature: Hex;
+			},
+		];
 		ReturnType: {
 			withdrawal: MagicSpendWithdrawal;
 			signature: Hex;
@@ -91,17 +93,16 @@ export type PimlicoMagicSpendSchema = [
 		Method: "pimlico_grantMagicSpendAllowance";
 	},
 	{
-		Parameters: [{
-			token: Address;
-			recipient: Address;
-			amount: string;
-			signature: Hex;
-			salt: Hex;
-		}];
-		ReturnType: [
-			MagicSpendWithdrawal,
-			Hex
+		Parameters: [
+			{
+				token: Address;
+				recipient: Address;
+				amount: string;
+				signature: Hex;
+				salt: Hex;
+			},
 		];
+		ReturnType: [MagicSpendWithdrawal, Hex];
 		Method: "pimlico_sponsorMagicSpendWithdrawal";
 	},
 	{
@@ -222,17 +223,22 @@ export class MagicSpend {
 		amount,
 		signature,
 	}: {
-		token: Address, recipient: Address, amount: string, signature: Hex
+		token: Address;
+		recipient: Address;
+		amount: string;
+		signature: Hex;
 	}) {
 		return this.client.request({
 			method: "pimlico_sponsorMagicSpendWithdrawal",
-			params: [{
-				token,
-				recipient,
-				amount,
-				signature,
-				salt: "0x000000",
-			}],
+			params: [
+				{
+					token,
+					recipient,
+					amount,
+					signature,
+					salt: "0x000000",
+				},
+			],
 		});
 	}
 }
diff --git a/src/utils/session-key.tsx b/src/utils/session-key.tsx
index 9e539a5..0337819 100644
--- a/src/utils/session-key.tsx
+++ b/src/utils/session-key.tsx
@@ -3,27 +3,27 @@ import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
 import { createStorage } from "wagmi";
 
 export class SessionKey {
-    private storage: ReturnType<typeof createStorage>;
+	private storage: ReturnType<typeof createStorage>;
 
-    constructor() {
-        this.storage = createStorage({
-            storage: localStorage,
-            key: 'pimlico-magic-spend'
-         });
-    }
+	constructor() {
+		this.storage = createStorage({
+			storage: localStorage,
+			key: "pimlico-magic-spend",
+		});
+	}
 
-    async getKey(): Promise<PrivateKeyAccount> {
-        // @ts-ignore
-        const key = await this.storage.getItem('operator-key');
+	async getKey(): Promise<PrivateKeyAccount> {
+		// @ts-ignore
+		const key = await this.storage.getItem("operator-key");
 
-        if (!key) {
-            const newKey = generatePrivateKey();
-            // @ts-ignore
-            await this.storage.setItem('operator-key', newKey);
+		if (!key) {
+			const newKey = generatePrivateKey();
+			// @ts-ignore
+			await this.storage.setItem("operator-key", newKey);
 
-            return privateKeyToAccount(newKey);
-        }
+			return privateKeyToAccount(newKey);
+		}
 
-        return privateKeyToAccount(key as Hex);
-    }
-}
\ No newline at end of file
+		return privateKeyToAccount(key as Hex);
+	}
+}