Add input tokens to checkbox labels

src/number-display.ts

@@ -0,0 +1,10 @@
+import { StringifiedNumber } from "./types";
+
+export function numberDisplay(value: StringifiedNumber, decimals: number) {
+  const formatter = Intl.NumberFormat("en-US", {
+    maximumFractionDigits: decimals,
+  });
+
+  // @ts-expect-error Typescript doesn't know about this format
+  return formatter.format(`${value}E-${decimals}`);
+}

src/routes/dcas.tsx

@@ -3,6 +3,7 @@ import { Address, assertIsAddress, isAddress } from "@solana/web3.js";
 import { Form, LoaderFunctionArgs, redirect, useLoaderData, useParams } from "react-router-dom";
 import { DCAFetchedAccount, DCAStatus, FetchDCAsResponse, FetchMintsResponse, MintData } from "../types";
 import { randomId, useListState } from "@mantine/hooks";
+import { numberDisplay } from "../number-display";
 
 async function getClosedDCAs(address: Address) {
     const response = await fetch(`https://dca-api.jup.ag/user/${address}?status=${DCAStatus.CLOSED}`);
@@ -101,15 +102,16 @@ function CheckboxGroup({ dcas, mints }: CheckboxGroupProps) {
     const { inputMint, outputMint } = dcas[0];
     const inputMintData = mints.find(mint => mint.address === inputMint);
     const outputMintData = mints.find(mint => mint.address === outputMint);
-    const label = `${inputMintData?.symbol ?? `Unknown (${inputMint})`} -> ${outputMintData?.symbol ?? `Unknown (${outputMint})`}`;
+    const groupLabel = `${inputMintData?.symbol ?? `Unknown (${inputMint})`} -> ${outputMintData?.symbol ?? `Unknown (${outputMint})`}`;
 
-    const initialValues = dcas.map(dca => {
+    const initialValues = dcas.sort((a, b) => a.createdAt.localeCompare(b.createdAt)).map(dca => {
         const date = new Date(dca.createdAt);
         const friendlyDate = date.toLocaleDateString();
         const friendlyTime = date.toLocaleTimeString();
+        const inputAmount = inputMintData ? `${numberDisplay(dca.inDeposited, inputMintData.decimals)} ${inputMintData.symbol}` : "Unknown Amount";
 
         return {
-            label: `Started ${friendlyDate} ${friendlyTime} ${dca.status === DCAStatus.OPEN ? "(open)" : ""}`,
+            label: `${inputAmount} - Started ${friendlyDate} ${friendlyTime} ${dca.status === DCAStatus.OPEN ? "(open)" : ""}`,
             checked: true,
             key: dca.dcaKey,
         };
@@ -137,7 +139,7 @@ function CheckboxGroup({ dcas, mints }: CheckboxGroupProps) {
             <Checkbox
                 checked={allChecked}
                 indeterminate={indeterminate}
-                label={label}
+                label={groupLabel}
                 onChange={() =>
                     handlers.setState((current) =>
                         current.map((value) => ({ ...value, checked: !allChecked }))
@@ -166,9 +168,10 @@ export default function DCAs() {
 
     return (
         <Form method="post">
-            <Stack>
-                {Object.entries(groupedDCAs).map(([key, dcas]) => <CheckboxGroup key={key} dcas={dcas} mints={mints} />)}
-
+            <Stack align="flex-start" gap='xl'>
+                <Stack gap='sm'>
+                    {Object.entries(groupedDCAs).map(([key, dcas]) => <CheckboxGroup key={key} dcas={dcas} mints={mints} />)}
+                </Stack>
                 <Button type="submit">Submit</Button>
             </Stack>
         </Form>

src/types.ts

@@ -0,0 +1,39 @@
+import { Address } from "@solana/web3.js";
+
+type StringifiedDate = string & { __brand: "StringifiedDate" };
+export type StringifiedNumber = string & { __brand: "StringifiedNumber" };
+
+export enum DCAStatus {
+  OPEN = 0,
+  CLOSED = 1,
+}
+
+export type DCAFetchedAccount = {
+  createdAt: StringifiedDate;
+  cycleFrequency: number;
+  dcaKey: Address;
+  inputMint: Address;
+  outputMint: Address;
+  inDeposited: StringifiedNumber;
+  inAmountPerCycle: StringifiedNumber;
+  status: DCAStatus;
+};
+
+export type FetchDCAsResponse = {
+  ok: boolean;
+  data: {
+    dcaAccounts: DCAFetchedAccount[];
+  };
+};
+
+export type MintData = {
+  address: Address;
+  name: string;
+  symbol: string;
+  decimals: number;
+  logoURI: string;
+};
+
+export type FetchMintsResponse = {
+  content: MintData[];
+};