From e253d94de6b2b7a4c27bafac92a619420fc6b8c7 Mon Sep 17 00:00:00 2001 From: matstyler Date: Sun, 16 Nov 2025 20:26:54 +0100 Subject: [PATCH 1/2] chore: format utils tests --- app/utils/__tests__/format.test.ts | 91 ++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 app/utils/__tests__/format.test.ts diff --git a/app/utils/__tests__/format.test.ts b/app/utils/__tests__/format.test.ts new file mode 100644 index 0000000..4effa40 --- /dev/null +++ b/app/utils/__tests__/format.test.ts @@ -0,0 +1,91 @@ +import { describe, it, expect } from "vitest"; +import { formatPrice, formatPercent, formatBigNumber } from "../format"; + +describe("formatPrice", () => { + it("should format very small prices with exponential notation", () => { + expect(formatPrice(0.0000005)).toBe(5e-7); + expect(formatPrice(0.00000012)).toBe(1.2e-7); + }); + + it("should format small prices (< 0.001) with 6 decimals", () => { + expect(formatPrice(0.0005)).toBe(0.0005); + expect(formatPrice(0.000123)).toBe(0.000123); + }); + + it("should format prices (< 0.01) with 5 decimals", () => { + expect(formatPrice(0.005)).toBe(0.005); + expect(formatPrice(0.00987)).toBe(0.00987); + }); + + it("should format regular prices with 4 decimals", () => { + expect(formatPrice(0.1444)).toBe(0.1444); + expect(formatPrice(1.5678)).toBe(1.5678); + expect(formatPrice(100.123456)).toBe(100.1235); + }); +}); + +describe("formatPercent", () => { + it("should format positive percentages with + sign", () => { + expect(formatPercent(5.25)).toBe("+5.25%"); + expect(formatPercent(0.5)).toBe("+0.50%"); + expect(formatPercent(100)).toBe("+100.00%"); + }); + + it("should format negative percentages with - sign", () => { + expect(formatPercent(-2.5)).toBe("-2.50%"); + expect(formatPercent(-0.66)).toBe("-0.66%"); + expect(formatPercent(-50)).toBe("-50.00%"); + }); + + it("should round to 2 decimal places", () => { + expect(formatPercent(5.256)).toBe("+5.26%"); + expect(formatPercent(-2.554)).toBe("-2.55%"); + }); + + it("should handle very small numbers", () => { + expect(formatPercent(0.001)).toBe("+0.00%"); + expect(formatPercent(-0.009)).toBe("-0.01%"); + }); +}); + +describe("formatBigNumber", () => { + it("should format billions with B suffix", () => { + expect(formatBigNumber(1000000000)).toBe("$1.00B"); + expect(formatBigNumber(1500000000)).toBe("$1.50B"); + expect(formatBigNumber(27792181403)).toBe("$27.79B"); + }); + + it("should format millions with M suffix", () => { + expect(formatBigNumber(1000000)).toBe("$1.00M"); + expect(formatBigNumber(48029742)).toBe("$48.03M"); + + // 0.5M should be formatted as 500.00K + expect(formatBigNumber(500000)).toBe("$500.00K"); + }); + + it("should format thousands with K suffix", () => { + expect(formatBigNumber(1000)).toBe("$1.00K"); + expect(formatBigNumber(5500)).toBe("$5.50K"); + expect(formatBigNumber(111394)).toBe("$111.39K"); + }); + + it("should format small numbers without suffix", () => { + expect(formatBigNumber(0)).toBe("0.00"); + expect(formatBigNumber(50)).toBe("50.00"); + expect(formatBigNumber(999.99)).toBe("999.99"); + }); + + it("should handle edge cases at boundaries", () => { + expect(formatBigNumber(999)).toBe("999.00"); + expect(formatBigNumber(1000)).toBe("$1.00K"); + expect(formatBigNumber(999999)).toBe("$1000.00K"); + expect(formatBigNumber(1000000)).toBe("$1.00M"); + expect(formatBigNumber(999999999)).toBe("$1000.00M"); + expect(formatBigNumber(1000000000)).toBe("$1.00B"); + }); + + it("should round to 2 decimal places", () => { + expect(formatBigNumber(1234567)).toBe("$1.23M"); + expect(formatBigNumber(1236567)).toBe("$1.24M"); + }); +}); From 34d7c9ab2358809e69f806753ee21f3714eb1f5b Mon Sep 17 00:00:00 2001 From: matstyler Date: Sun, 16 Nov 2025 20:31:35 +0100 Subject: [PATCH 2/2] chore: prettier setup --- .prettierignore | 5 + .prettierrc | 8 ++ app/(routes)/page.tsx | 4 +- app/components/About.tsx | 6 +- app/components/BuyAmountDisplay.tsx | 6 +- app/components/BuyPanel.tsx | 16 ++-- app/components/BuyStatusMessage.tsx | 3 +- app/components/Chart.tsx | 2 +- app/components/ChartScale.tsx | 6 +- app/components/FloatingStars.tsx | 4 +- app/components/Footer.tsx | 8 +- app/components/Header.tsx | 6 +- app/components/PreviewInfoTile.tsx | 8 +- app/components/PricePreview.tsx | 12 +-- app/components/TokenPreview.tsx | 12 +-- app/components/TokenPrice.tsx | 2 +- app/components/TokenStats.tsx | 8 +- app/components/TradingTokenMetadata.tsx | 4 +- app/components/TradingTokens.tsx | 10 +- app/components/TradingView.tsx | 14 +-- app/components/UserBalance.tsx | 6 +- app/components/errors/TradingViewError.tsx | 2 +- app/components/loaders/SpinLoader.tsx | 2 +- app/components/loaders/TokenPreviewLoader.tsx | 10 +- app/components/loaders/TradingViewLoader.tsx | 2 +- app/hooks/useBaselineSeries.ts | 6 +- app/hooks/useBuyQuote.ts | 8 +- app/hooks/useBuyToken.ts | 2 +- app/hooks/useChartData.ts | 4 +- app/hooks/useChartInstance.ts | 2 +- app/hooks/useToken.ts | 2 +- app/hooks/useTokenBalance.ts | 2 +- app/icons/ArrowDown.tsx | 7 +- app/icons/ArrowLeft.tsx | 21 +++- app/icons/ArrowUp.tsx | 7 +- app/icons/TrendingUp.tsx | 21 +++- app/layout.tsx | 2 +- app/utils/transaction.ts | 12 +-- package-lock.json | 95 +++++++++++++++++++ package.json | 1 + vitest.config.ts | 1 - 41 files changed, 250 insertions(+), 109 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c40d0dd --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +.next +build/ +node_modules/ +.github/ +.history/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..32114c3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "bracketSpacing": true, + "useTabs": false, + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/app/(routes)/page.tsx b/app/(routes)/page.tsx index 989b2ee..15020c9 100644 --- a/app/(routes)/page.tsx +++ b/app/(routes)/page.tsx @@ -9,10 +9,10 @@ export default function Home() { const { connected } = useWallet(); return ( -
+
-
+
diff --git a/app/components/About.tsx b/app/components/About.tsx index a2710c3..0259341 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -22,9 +22,9 @@ export default function About({ return (
-

About

+

About

{description && ( -

+

{description}

)} @@ -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} diff --git a/app/components/BuyAmountDisplay.tsx b/app/components/BuyAmountDisplay.tsx index a126e02..c1a8eb6 100644 --- a/app/components/BuyAmountDisplay.tsx +++ b/app/components/BuyAmountDisplay.tsx @@ -12,10 +12,10 @@ export default function BuyAmountDisplay({ loading = false, }: BuyAmountDisplayProps) { return ( -
+
- {label} - + {label} + {loading ? "Loading..." : `${amount} ${token}`}
diff --git a/app/components/BuyPanel.tsx b/app/components/BuyPanel.tsx index a1a923b..1fe343c 100644 --- a/app/components/BuyPanel.tsx +++ b/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 ( -
-

Buy

+
+

Buy

- + 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"} -

Powered by Jupiter

+

Powered by Jupiter

); diff --git a/app/components/BuyStatusMessage.tsx b/app/components/BuyStatusMessage.tsx index b285377..49ceb0b 100644 --- a/app/components/BuyStatusMessage.tsx +++ b/app/components/BuyStatusMessage.tsx @@ -13,9 +13,8 @@ export default function BuyStatusMessage({ : "bg-red-500/10 border-red-500/20 text-red-400"; return ( -
+

{message}

); } - diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx index e3059c0..df10527 100644 --- a/app/components/Chart.tsx +++ b/app/components/Chart.tsx @@ -17,5 +17,5 @@ export default function Chart({ data, timeRange }: ChartProps) { useBaselineSeries(chartRef, data, timeRange); - return
; + return
; } diff --git a/app/components/ChartScale.tsx b/app/components/ChartScale.tsx index d2dfa1c..84cb6f5 100644 --- a/app/components/ChartScale.tsx +++ b/app/components/ChartScale.tsx @@ -22,10 +22,10 @@ export default function ChartScale({
-
-
+
+
-
+
{chartLoading || !chartData ? ( -
+
-

Loading chart...

+

Loading chart...

) : ( @@ -68,7 +68,7 @@ export default function TradingView({ address }: { address: string }) {
-