chore: format.ts utils tests, prettier config

.prettierignore

@@ -0,0 +1,5 @@
+.next
+build/
+node_modules/
+.github/
+.history/

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(routes)/page.tsx

@@ -9,10 +9,10 @@ export default function Home() {
   const { connected } = useWallet();
 
   return (
-    <div className="h-screen flex flex-col justify-between overflow-y-auto">
+    <div className="flex h-screen flex-col justify-between overflow-y-auto">
       <Header totalPnL={connected ? 12847.32 : undefined} />
 
-      <main className="flex-1 flex items-center max-w-7xl mx-auto px-6 w-full py-8">
+      <main className="mx-auto flex w-full max-w-7xl flex-1 items-center px-6 py-8">
         <TradingTokens />
       </main>
 

app/components/About.tsx

@@ -22,9 +22,9 @@ export default function About({
 
   return (
     <section>
-      <h3 className="text-white/40 tracking-wider mb-3">About</h3>
+      <h3 className="mb-3 tracking-wider text-white/40">About</h3>
       {description && (
-        <p className="text-white/70 text-xs mb-3 leading-relaxed">
+        <p className="mb-3 text-xs leading-relaxed text-white/70">
           {description}
         </p>
       )}
@@ -35,7 +35,7 @@ export default function About({
             href={link}
             target="_blank"
             rel="noopener noreferrer"
-            className="px-2 py-1 bg-white/5 hover:bg-white/10 rounded-lg text-[10px] text-white/80 hover:text-white transition-colors border border-white/5 hover:border-white/10"
+            className="rounded-lg border border-white/5 bg-white/5 px-2 py-1 text-[10px] text-white/80 transition-colors hover:border-white/10 hover:bg-white/10 hover:text-white"
           >
             {label}
           </a>

app/components/BuyAmountDisplay.tsx

@@ -12,10 +12,10 @@ export default function BuyAmountDisplay({
   loading = false,
 }: BuyAmountDisplayProps) {
   return (
-    <div className="bg-black/20 rounded-lg p-4">
+    <div className="rounded-lg bg-black/20 p-4">
       <div className="flex items-center justify-between">
-        <span className="text-white/50 text-sm">{label}</span>
-        <span className="text-white font-semibold">
+        <span className="text-sm text-white/50">{label}</span>
+        <span className="font-semibold text-white">
           {loading ? "Loading..." : `${amount} ${token}`}
         </span>
       </div>

app/components/BuyPanel.tsx

@@ -28,7 +28,7 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
 
   const { data: quote, isLoading: isLoadingQuote } = useBuyQuote(
     tokenAddress,
-    tokenInputAmount
+    tokenInputAmount,
   );
 
   const {
@@ -45,8 +45,8 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
   } = useBuyToken(quote);
 
   return (
-    <div className="bg-glass rounded-xl p-4 border border-white/5">
-      <h2 className="text-white font-bold text-lg mb-4">Buy</h2>
+    <div className="bg-glass rounded-xl border border-white/5 p-4">
+      <h2 className="mb-4 text-lg font-bold text-white">Buy</h2>
 
       <div className="space-y-4">
         <BuyAmountDisplay
@@ -55,7 +55,7 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
           token="SOL"
         />
 
-        <ArrowDown className="w-4 h-4 text-white/40 mx-auto" />
+        <ArrowDown className="mx-auto h-4 w-4 text-white/40" />
 
         <BuyAmountDisplay
           label="You receive"
@@ -74,16 +74,16 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
         <button
           onClick={() => buyToken()}
           disabled={isBuyingToken || !connected}
-          className="disabled:cursor-not-allowed cursor-pointer w-full px-6 py-3 text-black bg-primary hover:bg-primary/90 disabled:bg-white/10 disabled:text-white/40 rounded-lg font-semibold transition-all shadow-lg shadow-primary/20 disabled:hover:scale-100 disabled:shadow-none"
+          className="bg-primary hover:bg-primary/90 shadow-primary/20 w-full cursor-pointer rounded-lg px-6 py-3 font-semibold text-black shadow-lg transition-all disabled:cursor-not-allowed disabled:bg-white/10 disabled:text-white/40 disabled:shadow-none disabled:hover:scale-100"
         >
           {isBuyingToken
             ? "Processing..."
             : !connected
-            ? "Connect Wallet"
-            : "Buy"}
+              ? "Connect Wallet"
+              : "Buy"}
         </button>
 
-        <p className="text-white/40 text-2xs text-center">Powered by Jupiter</p>
+        <p className="text-2xs text-center text-white/40">Powered by Jupiter</p>
       </div>
     </div>
   );

app/components/BuyStatusMessage.tsx

@@ -13,9 +13,8 @@ export default function BuyStatusMessage({
       : "bg-red-500/10 border-red-500/20 text-red-400";
 
   return (
-    <div className={`${styles} border rounded-lg p-3`}>
+    <div className={`${styles} rounded-lg border p-3`}>
       <p className="text-xs">{message}</p>
     </div>
   );
 }
-

app/components/Chart.tsx

@@ -17,5 +17,5 @@ export default function Chart({ data, timeRange }: ChartProps) {
 
   useBaselineSeries(chartRef, data, timeRange);
 
-  return <div ref={containerRef} className="w-full h-full" />;
+  return <div ref={containerRef} className="h-full w-full" />;
 }

app/components/ChartScale.tsx

@@ -22,10 +22,10 @@ export default function ChartScale({
         <button
           key={label}
           onClick={() => setTimeRange(value)}
-          className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+          className={`rounded-md px-3 py-1.5 text-xs font-medium transition-all ${
             timeRange === value
-              ? "bg-primary/10 text-primary border border-primary/30"
-              : "text-white/60 hover:text-white hover:bg-white/5 border border-white/5"
+              ? "bg-primary/10 text-primary border-primary/30 border"
+              : "border border-white/5 text-white/60 hover:bg-white/5 hover:text-white"
           }`}
         >
           {label}

app/components/FloatingStars.tsx

@@ -40,11 +40,11 @@ export default function FloatingStars() {
   }, []);
 
   return (
-    <div className="fixed inset-0 pointer-events-none z-0">
+    <div className="pointer-events-none fixed inset-0 z-0">
       {stars.map((star) => (
         <div
           key={star.id}
-          className="absolute rounded-full bg-white star-drift"
+          className="star-drift absolute rounded-full bg-white"
           style={{
             left: `${star.x}%`,
             top: `${star.y}%`,

app/components/Footer.tsx

@@ -11,15 +11,17 @@ export const FOOTER_LINKS = [
 
 export default function Footer() {
   return (
-    <footer className="px-6 py-4 flex items-center justify-between text-white/40">
-      <p className="text-2xs">© 2025 @localtechboy. Solana trading platform.</p>
+    <footer className="flex items-center justify-between px-6 py-4 text-white/40">
+      <p className="text-2xs">
+        © 2025 @localtechboy. Solana trading platform.
+      </p>
       <nav className="flex gap-6 text-xs">
         {FOOTER_LINKS.map((link) => (
           <a
             key={link.label}
             href={link.href}
             target="_blank"
-            className="hover:text-white transition-colors"
+            className="transition-colors hover:text-white"
           >
             {link.label}
           </a>

app/components/Header.tsx

@@ -23,15 +23,15 @@ export default function Header({ totalPnL, children: widget }: HeaderProps) {
 
   return (
     <header
-      className={`px-4 lg:px-6 py-4 gap-6 flex items-center justify-between min-h-[68px] ${
+      className={`flex min-h-[68px] items-center justify-between gap-6 px-4 py-4 lg:px-6 ${
         widget ? "justify-between" : "justify-end"
       }`}
     >
       {widget}
       <div className="flex items-center gap-4">
         {totalPnL && (
-          <nav className="items-center gap-2 hidden md:flex">
-            <span className="text-white/60 text-xs">Total P&L</span>
+          <nav className="hidden items-center gap-2 md:flex">
+            <span className="text-xs text-white/60">Total P&L</span>
             <span
               className={`text-sm ${
                 isPnLPositive ? "text-green-400" : "text-sell"

app/components/PreviewInfoTile.tsx

@@ -19,18 +19,18 @@ export default function PreviewInfoTile({
   }, [direction]);
 
   return (
-    <div className="w-full bg-gradient-to-br from-black/30 to-black/10 border border-white/5 rounded-lg px-2 pb-2">
-      <span className="text-white/30 text-2xs uppercase tracking-wider mb-0.5">
+    <div className="w-full rounded-lg border border-white/5 bg-gradient-to-br from-black/30 to-black/10 px-2 pb-2">
+      <span className="text-2xs mb-0.5 tracking-wider text-white/30 uppercase">
         {label}
       </span>
       <span
         className={`text-xs font-bold ${directionColor} flex items-center gap-0.5`}
       >
         {value}
         {direction === "up" ? (
-          <ArrowUp className="w-2.5 h-2.5" />
+          <ArrowUp className="h-2.5 w-2.5" />
         ) : direction === "down" ? (
-          <ArrowDown className="w-2.5 h-2.5" />
+          <ArrowDown className="h-2.5 w-2.5" />
         ) : null}
       </span>
     </div>

app/components/PricePreview.tsx

@@ -9,20 +9,20 @@ interface PricePreviewProps {
 export default function PricePreview({ prices }: PricePreviewProps) {
   return (
     <section className="py-2">
-      <h3 className="text-white/40 tracking-wider mb-3 flex items-center gap-2">
-        <TrendingUp className="w-3.5 h-3.5" />
+      <h3 className="mb-3 flex items-center gap-2 tracking-wider text-white/40">
+        <TrendingUp className="h-3.5 w-3.5" />
         Price
       </h3>
       <div className="space-y-2">
         {prices.map(({ label, value }) => (
           <div
             key={label}
-            className="flex items-center justify-between p-2 rounded-lg bg-black/20"
+            className="flex items-center justify-between rounded-lg bg-black/20 p-2"
           >
-            <span className="text-white/50 text-xs">{label}</span>
+            <span className="text-xs text-white/50">{label}</span>
             <span
-              className={`font-semibold text-xs flex items-center gap-1 ${getColorIndicator(
-                value
+              className={`flex items-center gap-1 text-xs font-semibold ${getColorIndicator(
+                value,
               )}`}
             >
               {value >= 0 ? "↑" : "↓"}

app/components/TokenPreview.tsx

@@ -42,22 +42,22 @@ export default function TokenPreview({ address }: TokenPreviewProps) {
   const formattedPriceChange1h = formatPercent(priceChange1hPercent);
 
   return (
-    <div className="flex flex-col gap-3 z-10">
+    <div className="z-10 flex flex-col gap-3">
       <Link
         href={`/trade/${address}`}
         title={name}
-        className="bg-glass rounded-xl p-5 md:p-6 border border-white/5 hover:border-white/10 transition-all hover:shadow-lg hover:shadow-black/20"
+        className="bg-glass rounded-xl border border-white/5 p-5 transition-all hover:border-white/10 hover:shadow-lg hover:shadow-black/20 md:p-6"
       >
-        <div className="flex items-start justify-between mb-6">
+        <div className="mb-6 flex items-start justify-between">
           <div className="flex items-center gap-4">
-            <div className="relative w-10 md:w-14 h-10 md:h-14 rounded-full overflow-hidden bg-white/5 ring-2 ring-white/10">
+            <div className="relative h-10 w-10 overflow-hidden rounded-full bg-white/5 ring-2 ring-white/10 md:h-14 md:w-14">
               <Image src={icon} alt={name} fill sizes="56px" />
             </div>
             <div>
-              <h3 className="md:text-lg font-semibold text-white truncate max-w-[150px]">
+              <h3 className="max-w-[150px] truncate font-semibold text-white md:text-lg">
                 {name}
               </h3>
-              <p className="text-white/50 text-sm">{ticker}</p>
+              <p className="text-sm text-white/50">{ticker}</p>
             </div>
           </div>
           <TokenPrice

app/components/TokenPrice.tsx

@@ -16,7 +16,7 @@ export default function TokenPrice({
     <div className={size === "sm" ? "text-left" : "text-right"}>
       <p
         className={`font-bold text-white ${
-          size === "sm" ? "mt-0 text-sm" : "md:mt-1 text-xl"
+          size === "sm" ? "mt-0 text-sm" : "text-xl md:mt-1"
         }`}
       >
         {formatPrice(price)}

app/components/TokenStats.tsx

@@ -6,16 +6,16 @@ interface TokenStatsProps {
 }
 export default function TokenStats({ stats }: TokenStatsProps) {
   return (
-    <div className="w-full flex gap-8 items-center justify-center">
+    <div className="flex w-full items-center justify-center gap-8">
       {stats.map((stat) => (
         <div
           key={stat.label}
-          className="flex flex-row gap-2 items-center justify-center"
+          className="flex flex-row items-center justify-center gap-2"
         >
-          <span className="text-white/50 text-2xs uppercase tracking-wider">
+          <span className="text-2xs tracking-wider text-white/50 uppercase">
             {stat.label}
           </span>
-          <span className="text-white font-semibold text-xs">{stat.value}</span>
+          <span className="text-xs font-semibold text-white">{stat.value}</span>
         </div>
       ))}
     </div>

app/components/TradingTokenMetadata.tsx

@@ -33,11 +33,11 @@ export default function TradingTokenMetadata({
     <div className="flex items-center gap-16">
       <div className="flex items-center gap-4">
         <div className="flex items-center gap-3">
-          <div className="relative lg:w-9 lg:h-9 w-8 h-8 rounded-full overflow-hidden bg-white/5 ring-1 ring-white/10">
+          <div className="relative h-8 w-8 overflow-hidden rounded-full bg-white/5 ring-1 ring-white/10 lg:h-9 lg:w-9">
             <Image src={icon} alt={name} fill sizes="36px" />
           </div>
           <div>
-            <h1 className="text-sm lg:text-base font-bold text-white max-w-[50px] lg:max-w-[150px] truncate">
+            <h1 className="max-w-[50px] truncate text-sm font-bold text-white lg:max-w-[150px] lg:text-base">
               {name}
             </h1>
             <p className="text-xs text-white/50">{ticker}</p>

app/components/TradingTokens.tsx

@@ -18,24 +18,24 @@ export const TOKEN_FILTERS: TokenFilter[] = [
 
 export default function TradingTokens() {
   const [selectedFilter, setSelectedFilter] = useState<TokenFilter>(
-    TOKEN_FILTERS[0]
+    TOKEN_FILTERS[0],
   );
 
   return (
     <div className="w-full space-y-6">
-      <nav className="flex gap-4 mb-3">
+      <nav className="mb-3 flex gap-4">
         {TOKEN_FILTERS.map((filter) => {
           const isSelected = selectedFilter.value === filter.value;
           return (
             <button
               key={filter.value}
-              className={`px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+              className={`rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors ${
                 isSelected &&
                 !filter.disabled &&
                 "text-white/80 hover:text-white"
               } ${
                 filter.disabled
-                  ? "opacity-50 cursor-not-allowed"
+                  ? "cursor-not-allowed opacity-50"
                   : "cursor-pointer"
               }`}
               disabled={filter.disabled}
@@ -46,7 +46,7 @@ export default function TradingTokens() {
           );
         })}
       </nav>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">
         {TOKENS.map((tokenAddress) => (
           <TokenPreview key={tokenAddress} address={tokenAddress} />
         ))}

app/components/TradingView.tsx

@@ -23,7 +23,7 @@ export default function TradingView({ address }: { address: string }) {
   const { data: tokenResponse, isLoading: tokenLoading } = useToken(address);
   const { data: chartResponse, isLoading: chartLoading } = useChartData(
     address,
-    timeRange
+    timeRange,
   );
 
   const { connected } = useWallet();
@@ -53,22 +53,22 @@ export default function TradingView({ address }: { address: string }) {
         <TradingTokenMetadata {...token} />
       </Header>
 
-      <main className="relative z-10 flex-1 flex flex-col lg:flex-row overflow-y-auto lg:overflow-hidden bg-gradient-to-b from-dark-200 to-dark-100">
-        <div className="flex-1 flex flex-col p-6">
+      <main className="from-dark-200 to-dark-100 relative z-10 flex flex-1 flex-col overflow-y-auto bg-gradient-to-b lg:flex-row lg:overflow-hidden">
+        <div className="flex flex-1 flex-col p-6">
           <ChartScale timeRange={timeRange} setTimeRange={setTimeRange} />
-          <div className="flex-1 min-h-[50vh]">
+          <div className="min-h-[50vh] flex-1">
             {chartLoading || !chartData ? (
-              <div className="h-full flex items-center justify-center flex-col">
+              <div className="flex h-full flex-col items-center justify-center">
                 <SpinLoader />
-                <p className="text-white/60 text-sm mt-3">Loading chart...</p>
+                <p className="mt-3 text-sm text-white/60">Loading chart...</p>
               </div>
             ) : (
               <Chart data={chartData} timeRange={timeRange} />
             )}
           </div>
         </div>
 
-        <aside className="w-full lg:w-92 flex flex-col p-4 space-y-4 lg:overflow-y-auto">
+        <aside className="flex w-full flex-col space-y-4 p-4 lg:w-92 lg:overflow-y-auto">
           <UserBalance
             balance={formattedBalance}
             tokenTicker={token.ticker}