complete nit pass

frontend/src/components/APISection.tsx

@@ -100,9 +100,8 @@ const APISection: React.FC = () => {
         </h3>
         {Object.entries(typeDefinitions).map(([name, definition]) => (
           <div key={name} className="font-mono text-xs">
-            <div className="flex items-baseline gap-1">
+            <div className="grid grid-cols-[120px_1fr] items-baseline">
               <span className="text-purple-400 font-semibold">{name}</span>
-              <span className="text-gray-500">=</span>
               <span className="text-gray-400">{definition}</span>
             </div>
           </div>

frontend/src/components/BalanceDisplay.tsx

@@ -325,7 +325,7 @@ export function BalanceDisplay({
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
-        <h2 className="text-xl font-semibold text-white">Allocations</h2>
+        <h2 className="text-xl font-semibold text-white">Resource Locks</h2>
         <button
           onClick={() => setIsSessionIdDialogOpen(true)}
           className="px-3 py-1 text-sm bg-[#00ff00]/10 text-[#00ff00] rounded hover:bg-[#00ff00]/20 transition-colors"

frontend/src/components/DepositForm.tsx

@@ -76,7 +76,8 @@ export function DepositForm() {
 
     // For ERC20 tokens
     if (tokenType === 'erc20') {
-      if (!tokenAddress || decimals === undefined || isLoadingToken) return null;
+      if (!tokenAddress || decimals === undefined || isLoadingToken)
+        return null;
 
       // Check decimal places
       const decimalParts = amount.split('.');
@@ -199,11 +200,12 @@ export function DepositForm() {
       }
 
       // Handle both object with hash and direct hash string
-      const txHash = typeof depositResult === 'object' && depositResult !== null
-        ? (depositResult as TransactionResponse).hash
-        : typeof depositResult === 'string'
-          ? depositResult as `0x${string}`
-          : undefined;
+      const txHash =
+        typeof depositResult === 'object' && depositResult !== null
+          ? (depositResult as TransactionResponse).hash
+          : typeof depositResult === 'string'
+            ? (depositResult as `0x${string}`)
+            : undefined;
 
       if (txHash) {
         showNotification({
@@ -240,12 +242,13 @@ export function DepositForm() {
     try {
       setIsApproving(true);
       const hash = await approve();
-      
+
       if (hash) {
         showNotification({
           type: 'success',
           title: 'Approval Submitted',
-          message: 'Please wait while the approval transaction is being confirmed...',
+          message:
+            'Please wait while the approval transaction is being confirmed...',
           txHash: hash,
           chainId,
           autoHide: true,
@@ -284,8 +287,8 @@ export function DepositForm() {
         </p>
         {chainSpecific && (
           <p className="mt-1 text-sm text-gray-400">
-            Deposits on {getChainName(chainId)}{' '}
-            will be considered finalized and available to allocate{' '}
+            Deposits on {getChainName(chainId)} will be considered finalized and
+            available to allocate{' '}
             {formatResetPeriod(chainSpecific.finalizationThresholdSeconds)}{' '}
             after a successful deposit transaction.
           </p>
@@ -352,10 +355,12 @@ export function DepositForm() {
                   </span>
                   <span>
                     Allowance on The Compact:{' '}
-                    {Number(allowance || '0') > 1e59 ? "Unlimited" : Number(allowance || '0').toLocaleString(undefined, {
-                      maximumFractionDigits: 6,
-                      minimumFractionDigits: 0,
-                    })}{' '}
+                    {Number(allowance || '0') > 1e59
+                      ? 'Unlimited'
+                      : Number(allowance || '0').toLocaleString(undefined, {
+                          maximumFractionDigits: 6,
+                          minimumFractionDigits: 0,
+                        })}{' '}
                     {symbol}
                   </span>
                 </div>
@@ -425,7 +430,8 @@ export function DepositForm() {
             !allocatorAddress ||
             amountValidation?.type === 'error' ||
             amountValidation?.type === 'warning' ||
-            (tokenType === 'erc20' && (!tokenAddress || !isValid || isLoadingToken))
+            (tokenType === 'erc20' &&
+              (!tokenAddress || !isValid || isLoadingToken))
           }
           className="w-full py-2 px-4 bg-[#00ff00] text-gray-900 rounded-lg font-medium hover:bg-[#00dd00] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >

frontend/src/components/ForcedWithdrawalDialog.tsx

@@ -106,11 +106,12 @@ export function ForcedWithdrawalDialog({
       });
 
       // Handle both object with hash and direct hash string
-      const txHash = typeof result === 'object' && result !== null
-        ? (result as TransactionResponse).hash
-        : typeof result === 'string'
-          ? result as `0x${string}`
-          : undefined;
+      const txHash =
+        typeof result === 'object' && result !== null
+          ? (result as TransactionResponse).hash
+          : typeof result === 'string'
+            ? (result as `0x${string}`)
+            : undefined;
 
       if (txHash) {
         showNotification({

frontend/src/context/NotificationProvider.tsx

@@ -139,9 +139,12 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
     }
 
     const shortHash = `${notification.txHash.slice(0, 6)}...${notification.txHash.slice(-4)}`;
-    
+
     if (notification.chainId) {
-      const explorerUrl = getBlockExplorerTxUrl(notification.chainId, notification.txHash);
+      const explorerUrl = getBlockExplorerTxUrl(
+        notification.chainId,
+        notification.txHash
+      );
       if (explorerUrl) {
         return (
           <p className="mt-1 text-sm text-gray-500">
@@ -161,9 +164,7 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
 
     // Fallback to non-linked hash if no explorer URL is available
     return (
-      <p className="mt-1 text-sm text-gray-500">
-        Transaction: {shortHash}
-      </p>
+      <p className="mt-1 text-sm text-gray-500">Transaction: {shortHash}</p>
     );
   };
 

frontend/src/hooks/useBalanceDisplay.ts

@@ -27,9 +27,11 @@ interface EthereumProvider {
   request: (args: { method: string; params: unknown[] }) => Promise<unknown>;
 }
 
-type TransactionResponse = {
-  hash: `0x${string}`;
-} | `0x${string}`;
+type TransactionResponse =
+  | {
+      hash: `0x${string}`;
+    }
+  | `0x${string}`;
 
 export { getChainName };
 
@@ -135,13 +137,13 @@ export function useBalanceDisplay() {
       }
 
       try {
-        const result = await disableForcedWithdrawal({
+        const result = (await disableForcedWithdrawal({
           args: [BigInt(lockId)],
-        }) as TransactionResponse;
-        
+        })) as TransactionResponse;
+
         // Get the transaction hash whether it's returned directly or as part of an object
         const txHash = typeof result === 'object' ? result.hash : result;
-        
+
         if (txHash) {
           showNotification({
             type: 'success',

frontend/src/hooks/useCreateAllocation.ts

@@ -184,7 +184,9 @@ export function useCreateAllocation(sessionToken: string) {
       newErrors.nonce = 'Nonce is required';
     }
 
-    const expirationTime = customExpiry ? formData.expiration : getExpirationTime();
+    const expirationTime = customExpiry
+      ? formData.expiration
+      : getExpirationTime();
     if (!expirationTime) {
       newErrors.expiration = 'Expiration is required';
     } else {

frontend/src/hooks/useERC20.ts

@@ -1,11 +1,18 @@
 import { useState, useEffect } from 'react';
-import { useReadContract, useWriteContract, useAccount, useChainId, usePublicClient } from 'wagmi';
+import {
+  useReadContract,
+  useWriteContract,
+  useAccount,
+  useChainId,
+  usePublicClient,
+} from 'wagmi';
 import { formatUnits, isAddress, type Hash } from 'viem';
 import { ERC20_ABI, COMPACT_ADDRESS } from '../constants/contracts';
 import { useNotification } from './useNotification';
 
 // Max uint256 value for infinite approval
-const MAX_UINT256 = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';
+const MAX_UINT256 =
+  '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';
 
 export function useERC20(tokenAddress?: `0x${string}`) {
   const { address } = useAccount();

frontend/src/utils/chains.ts

@@ -8,10 +8,10 @@ import { chains } from '../config/wagmi';
 export function getChainName(chainId: string | number): string {
   // Convert chainId to number if it's a string
   const id = typeof chainId === 'string' ? parseInt(chainId) : chainId;
-  
+
   // Find the chain in wagmi config
-  const chain = chains.find(chain => chain.id === id);
-  
+  const chain = chains.find((chain) => chain.id === id);
+
   // Return the chain name if found, otherwise return a generic name
   return chain?.name || `Chain ${chainId}`;
 }
@@ -22,17 +22,20 @@ export function getChainName(chainId: string | number): string {
  * @param txHash The transaction hash
  * @returns The formatted block explorer URL if available, otherwise null
  */
-export function getBlockExplorerTxUrl(chainId: string | number, txHash: string): string | null {
+export function getBlockExplorerTxUrl(
+  chainId: string | number,
+  txHash: string
+): string | null {
   // Convert chainId to number if it's a string
   const id = typeof chainId === 'string' ? parseInt(chainId) : chainId;
-  
+
   // Find the chain in wagmi config
-  const chain = chains.find(chain => chain.id === id);
-  
+  const chain = chains.find((chain) => chain.id === id);
+
   // If chain has a block explorer URL, format the transaction URL
   if (chain?.blockExplorers?.default?.url) {
     return `${chain.blockExplorers.default.url}/tx/${txHash}`;
   }
-  
+
   return null;
 }