Add USD prices

package.json

@@ -14,7 +14,9 @@
     "@mantine/hooks": "^7.13.3",
     "@solana/web3.js": "^2.0.0-rc.1",
     "@tabler/icons-react": "^3.19.0",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/query-persist-client-core": "^5.62.0",
+    "@tanstack/query-sync-storage-persister": "^5.62.0",
+    "@tanstack/react-query": "^5.62.0",
     "jdenticon": "^3.3.0",
     "js-big-decimal": "^2.1.0",
     "react": "^18.3.1",

src/jupiter-api.ts

@@ -24,6 +24,7 @@ export async function getClosedDCAs(address: Address) {
   return queryClient.fetchQuery({
     queryKey: ["closedDCAs", address],
     queryFn: () => getClosedDCAsImpl(address),
+    staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }
 
@@ -42,6 +43,7 @@ export async function getOpenDCAs(address: Address) {
   return queryClient.fetchQuery({
     queryKey: ["openDCAs", address],
     queryFn: () => getOpenDCAsImpl(address),
+    staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }
 
@@ -60,6 +62,7 @@ export async function getClosedValueAverages(address: Address) {
   return queryClient.fetchQuery({
     queryKey: ["closedValueAverages", address],
     queryFn: () => getClosedValueAveragesImpl(address),
+    staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }
 
@@ -78,6 +81,7 @@ export async function getOpenValueAverages(address: Address) {
   return queryClient.fetchQuery({
     queryKey: ["openValueAverages", address],
     queryFn: () => getOpenValueAveragesImpl(address),
+    staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }
 
@@ -113,5 +117,6 @@ export async function getLimitOrdersWithTrades(address: Address) {
   return queryClient.fetchQuery({
     queryKey: ["limitOrdersWithTrades", address],
     queryFn: () => getLimitOrdersWithTradesImpl(address),
+    staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }

src/main.tsx

@@ -8,6 +8,7 @@ import StrategiesRoute, {
 } from "./routes/strategies";
 import TradesRoute, { loader as TradesLoader } from "./routes/trades";
 import { action as TradesCsvAction } from "./routes/trades-csv";
+import { action as FetchUsdPricesAction } from "./routes/fetch-usd-prices";
 import { createTheme, MantineProvider } from "@mantine/core";
 
 import "@mantine/core/styles.css";
@@ -38,6 +39,10 @@ const router = createBrowserRouter([
         path: "/trades/csv",
         action: TradesCsvAction,
       },
+      {
+        path: "/trades/fetch-usd-prices",
+        action: FetchUsdPricesAction,
+      },
     ],
   },
 ]);

src/number-display.ts

@@ -17,3 +17,27 @@ export function numberDisplayAlreadyAdjustedForDecimals(
   // we use the formatter to get better display, eg `123456` -> `123,456`
   return formatter.format(`${value}`);
 }
+
+const usdTwoDecimalsFormatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const usdEightDecimalsFormatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 8,
+});
+
+export function usdAmountDisplay(value: number) {
+  if (value < 0.00000001) {
+    return "<$0.00000001";
+  }
+
+  const formatter =
+    value < 1 ? usdEightDecimalsFormatter : usdTwoDecimalsFormatter;
+  return formatter.format(value);
+}

src/query-client.ts

@@ -1,8 +1,22 @@
 import { QueryClient } from "@tanstack/react-query";
+import { persistQueryClient } from "@tanstack/query-persist-client-core";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 
 export const queryClient = new QueryClient();
 queryClient.setDefaultOptions({
+  // used for restored data
   queries: {
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: Infinity,
+    gcTime: Infinity,
   },
 });
+
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+  key: "react-query-cache",
+});
+
+persistQueryClient({
+  queryClient,
+  persister,
+});

src/routes/fetch-usd-prices.tsx

@@ -0,0 +1,38 @@
+import { ActionFunctionArgs } from "react-router-dom";
+import { fetchTokenPrices } from "../token-prices";
+import { TokenPricesToFetch } from "../types";
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const birdeyeApiKey = formData.get("birdeyeApiKey")?.toString();
+  const rememberApiKeyValue = formData.get("rememberApiKey")?.toString();
+  const rememberApiKey = rememberApiKeyValue === "on";
+
+  if (!birdeyeApiKey) {
+    throw new Error("Birdeye API key is required");
+  }
+
+  const tokenPricesToFetchField = formData.get("tokenPricesToFetch");
+
+  if (!tokenPricesToFetchField) {
+    throw new Error("Token prices to fetch is required");
+  }
+
+  const tokenPricesToFetch = JSON.parse(
+    tokenPricesToFetchField.toString(),
+  ) as TokenPricesToFetch;
+
+  const tokenPrices = await fetchTokenPrices(
+    tokenPricesToFetch,
+    birdeyeApiKey,
+    request.signal,
+  );
+
+  if (rememberApiKey) {
+    localStorage.setItem("birdeyeApiKey", birdeyeApiKey);
+  } else {
+    localStorage.removeItem("birdeyeApiKey");
+  }
+
+  return tokenPrices;
+}