Allow scrolling outstanding orders (#47)

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 80,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "plugins": []
+}

README.md

@@ -15,3 +15,26 @@ Then, you can run the cli:
 ```bash
 sf --version  # 0.1.0
 ```
+
+## Local Development / Contributing
+
+### Setup
+
+- Install [Deno](https://docs.deno.com/runtime/)
+- Install dependencies `deno install`
+  - Use same mental model as `npm install`
+- Auth your CLI with `deno run prod login`
+
+### Development Loop
+
+- Make code changes
+- Test changes with
+  - `deno run devv` to test against local API
+  - `deno run prod` to test against production API
+  - The `deno run <env>` is an alias to the user facing `sf` command. So if you wanted to run `sf login` locally against the local API, run `deno run devv login`
+
+## New Release
+
+This is ran locally
+
+- `deno run release <major|minor|patch>`

package.json

@@ -3,7 +3,8 @@
     "devv": "IS_DEVELOPMENT_CLI_ENV=true deno run --allow-all src/index.ts",
     "release": "deno run --allow-all src/scripts/release.ts",
     "prod": "deno run --allow-all src/index.ts",
-    "schema": "npx openapi-typescript https://api.sfcompute.com/docs/json -o src/schema.ts"
+    "schema": "npx openapi-typescript https://api.sfcompute.com/docs/json -o src/schema.ts",
+    "lint": "prettier --write ."
   },
   "dependencies": {
     "@inquirer/prompts": "^5.1.2",
@@ -26,6 +27,7 @@
     "openapi-fetch": "^0.11.1",
     "ora": "^8.1.0",
     "parse-duration": "^1.1.0",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "semver": "^7.6.3",
     "tiny-invariant": "^1.3.3",
@@ -40,5 +42,5 @@
   "peerDependencies": {
     "typescript": "^5.6.2"
   },
-  "version": "0.1.10"
+  "version": "0.1.13"
 }

src/checkVersion.ts

@@ -6,7 +6,7 @@ import semver from "semver";
 async function checkProductionCLIVersion() {
   try {
     const response = await fetch(
-      "https://raw.githubusercontent.com/sfcompute/cli/refs/heads/main/package.json",
+      "https://raw.githubusercontent.com/sfcompute/cli/refs/heads/main/package.json"
     );
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -39,7 +39,7 @@ Run 'sf upgrade' to update to the latest version
           padding: 1,
           borderColor: "yellow",
           borderStyle: "round",
-        }),
+        })
       );
     }
   }

src/helpers/config.ts

@@ -26,7 +26,7 @@ const ConfigDefaults = process.env.IS_DEVELOPMENT_CLI_ENV
 // --
 
 export async function saveConfig(
-  config: Partial<Config>,
+  config: Partial<Config>
 ): Promise<{ success: boolean }> {
   const configPath = getConfigPath();
   const configDir = join(homedir(), ".sfcompute");

src/helpers/errors.ts

@@ -20,7 +20,7 @@ export async function logSessionTokenExpiredAndQuit(): Promise<never> {
 
 export function failedToConnect(): never {
   logAndQuit(
-    "Failed to connect to the server. Please check your internet connection and try again.",
+    "Failed to connect to the server. Please check your internet connection and try again."
   );
 }
 

src/helpers/price.ts

@@ -4,7 +4,7 @@ export function pricePerGPUHourToTotalPriceCents(
   pricePerGPUHourCents: Cents,
   durationSeconds: number,
   nodes: number,
-  gpusPerNode: number,
+  gpusPerNode: number
 ): Cents {
   const totalGPUs = nodes * gpusPerNode;
   const totalHours = durationSeconds / 3600;
@@ -16,7 +16,7 @@ export function totalPriceToPricePerGPUHour(
   priceCents: number,
   durationSeconds: number,
   nodes: number,
-  gpusPerNode: number,
+  gpusPerNode: number
 ): Cents {
   const totalGPUs = nodes * gpusPerNode;
   const totalHours = durationSeconds / 3600;

src/helpers/units.ts

@@ -29,11 +29,10 @@ export function roundStartDate(startDate: Date): Date {
 
 export function computeApproximateDurationSeconds(
   startDate: Date | "NOW",
-  endDate: Date,
+  endDate: Date
 ): number {
-  const startEpoch = startDate === "NOW"
-    ? currentEpoch()
-    : dateToEpoch(startDate);
+  const startEpoch =
+    startDate === "NOW" ? currentEpoch() : dateToEpoch(startDate);
   const endEpoch = dateToEpoch(endDate);
   return dayjs(epochToDate(endEpoch)).diff(dayjs(epochToDate(startEpoch)), "s");
 }
@@ -58,7 +57,7 @@ interface PriceWholeToCentsReturn {
   invalid: boolean;
 }
 export function priceWholeToCents(
-  price: string | number,
+  price: string | number
 ): PriceWholeToCentsReturn {
   if (
     price === null ||

src/helpers/urls.ts

@@ -38,7 +38,7 @@ const apiPaths = {
 
 export async function getWebAppUrl(
   key: keyof typeof webPaths,
-  params?: any,
+  params?: any
 ): Promise<string> {
   const config = await loadConfig();
   const path = webPaths[key];
@@ -51,7 +51,7 @@ export async function getWebAppUrl(
 
 export async function getApiUrl(
   key: keyof typeof apiPaths,
-  params?: any,
+  params?: any
 ): Promise<string> {
   const config = await loadConfig();
   const path = apiPaths[key];

src/helpers/waitingForOrder.ts

@@ -5,7 +5,7 @@ import { getOrder } from "./fetchers.ts";
 
 export async function waitForOrderToNotBePending(orderId: string) {
   const spinner = ora(
-    `Order ${orderId} - pending (this can take a moment)`,
+    `Order ${orderId} - pending (this can take a moment)`
   ).start();
 
   // 1 minute
@@ -18,7 +18,7 @@ export async function waitForOrderToNotBePending(orderId: string) {
       spinner.succeed();
       return order;
     }
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await new Promise(resolve => setTimeout(resolve, 500));
   }
 
   spinner.fail();

src/lib/ConfirmInput.tsx

@@ -22,9 +22,12 @@ const ConfirmInput: React.FC<ConfirmInputProps> = ({
   value = "",
   ...props
 }) => {
-  const handleSubmit = useCallback((newValue: string) => {
-    onSubmit(yn(newValue, { default: isChecked }));
-  }, [isChecked, onSubmit]);
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      onSubmit(yn(newValue, { default: isChecked }));
+    },
+    [isChecked, onSubmit]
+  );
 
   return (
     <TextInput

src/lib/Quote.tsx

@@ -23,11 +23,15 @@ export default function QuoteDisplay(props: { quote: Quote }) {
 
   const durationSeconds = dayjs(props.quote.end_at).diff(
     dayjs(props.quote.start_at),
-    "seconds",
+    "seconds"
   );
   const durationHours = durationSeconds / 3600;
-  const pricePerHour = props.quote.price / durationHours / GPUS_PER_NODE /
-    props.quote.quantity / 100;
+  const pricePerHour =
+    props.quote.price /
+    durationHours /
+    GPUS_PER_NODE /
+    props.quote.quantity /
+    100;
   const priceTotal = props.quote.price / 100;
 
   return (
@@ -44,17 +48,17 @@ export default function QuoteDisplay(props: { quote: Quote }) {
 
 export type Quote =
   | {
-    price: number;
-    quantity: number;
-    start_at: string;
-    end_at: string;
-    instance_type: string;
-  }
+      price: number;
+      quantity: number;
+      start_at: string;
+      end_at: string;
+      instance_type: string;
+    }
   | {
-    price: number;
-    quantity: number;
-    start_at: string;
-    end_at: string;
-    contract_id: string;
-  }
+      price: number;
+      quantity: number;
+      start_at: string;
+      end_at: string;
+      contract_id: string;
+    }
   | null;

src/lib/balance.ts

@@ -20,7 +20,7 @@ export function registerBalance(program: Command) {
     .command("balance")
     .description("Get account balance")
     .option("--json", "Output in JSON format")
-    .action(async (options) => {
+    .action(async options => {
       const {
         available: { whole: availableWhole, cents: availableCents },
         reserved: { whole: reservedWhole, cents: reservedCents },
@@ -57,7 +57,7 @@ export function registerBalance(program: Command) {
             "Reserved",
             chalk.gray(formattedReserved),
             chalk.gray(reservedCents.toLocaleString()),
-          ],
+          ]
         );
 
         console.log(table.toString() + "\n");
@@ -98,7 +98,7 @@ export async function getBalance(): Promise<BalanceUsdCents> {
 
   if (!data) {
     return logAndQuit(
-      `Failed to get balance: Unexpected response from server: ${response}`,
+      `Failed to get balance: Unexpected response from server: ${response}`
     );
   }