Update UI Dashboard 2

src/components/AppSidebar.tsx

@@ -29,6 +29,10 @@
           title: "Offered",
           url: "/quotes/offered",
         },
+        {
+          title: "Offer Expired",
+          url: "/quotes/offerexpired",
+        },
         {
           title: "Accepted",
           url: "/quotes/accepted",
@@ -41,6 +45,10 @@
           title: "Rejected",
           url: "/quotes/rejected",
         },
+        {
+          title: "Canceled",
+          url: "/quotes/canceled",
+        },
       ],
     },
   ],

src/generated/client/sdk.gen.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import type { Options as ClientOptions, TDataShape, Client } from '@hey-api/client-fetch';
-import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData} from './types.gen';
+import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData, KeysetInfoData, KeySetInfo} from './types.gen';
 import { client as _heyApiClient } from './client.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<TData, ThrowOnError> & {
@@ -125,3 +125,14 @@
         ...options
     });
 };
+
+/**
+  * --------------------------- KeySetInfo
+*/
+
+export const keysetInfo = <ThrowOnError extends boolean = false>(options: Options<KeysetInfoData, ThrowOnError>) => {
+    return (options.client ?? _heyApiClient).get<KeySetInfo, unknown, ThrowOnError>({
+        url: '/v1/admin/keysets/{keyset_id}',
+        ...options
+    });
+};

src/generated/client/types.gen.ts

@@ -135,22 +135,36 @@ export type InfoReply = {
 } | {
     bill: BillInfo;
     id: string;
-    signatures: Array<BlindSignature>;
+    status: 'Canceled';
+    tstamp: string;
+} | {
+    bill: BillInfo;
+    id: string;
+    keyset_id: string;
     status: 'Offered';
+    discounted: number;
     ttl: string;
+} | {
+    bill: BillInfo;
+    id: string;
+    status: 'OfferExpired';
+    discounted: number;
+    tstamp: string;
 } | {
     bill: BillInfo;
     id: string;
     status: 'Denied';
 } | {
     bill: BillInfo;
     id: string;
-    signatures: Array<BlindSignature>;
+    keyset_id: string;
+    discounted: number;
     status: 'Accepted';
 } | {
     bill: BillInfo;
     id: string;
     status: 'Rejected';
+    discounted: number;
     tstamp: string;
 };
 
@@ -455,10 +469,30 @@ export type OnChainBalanceData = {
   confirmed: number;
 };
 
-
 export type OnChainData = {
   body?: never;
   path?: never;
   query?: never;
   url: '/v1/admin/onchain/balance';
 };
+
+/**
+ * Keyset information
+ */
+
+export type KeySetInfo = {
+  id: string;
+  unit: CurrencyUnit;
+  active: boolean;
+  input_fee_ppk: number;
+};
+
+
+export type KeysetInfoData = {
+  body?: never;
+  path: {
+      keyset_id: string;
+  };
+  query?: never;
+  url: '/v1/admin/keysets/{keyset_id}';
+};

src/main.tsx

@@ -20,13 +20,9 @@
 
 const prepare = async () => {
   await initKeycloak()
-  // if (meta.apiMocksEnabled) {
-  //   const { worker } = await import("./mocks/browser")
-  //   await worker.start()
-  // }
 }
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
@@ -39,10 +35,11 @@
             <Route path="quotes" element={<StatusQuotePage />} />
             <Route path="quotes/pending" element={<StatusQuotePage status="Pending" />} />
             <Route path="quotes/accepted" element={<StatusQuotePage status="Accepted" />} />
+            <Route path="quotes/canceled" element={<StatusQuotePage status="Canceled" />} />
             <Route path="quotes/offered" element={<StatusQuotePage status="Offered" />} />
+            <Route path="quotes/offerexpired" element={<StatusQuotePage status="OfferExpired" />} />
             <Route path="quotes/denied" element={<StatusQuotePage status="Denied" />} />
             <Route path="quotes/rejected" element={<StatusQuotePage status="Rejected" />} />
-            {/* <Route path="quotes/expired" element={<StatusQuotePage status="Rejected" />} /> */}
             <Route path="quotes/:id" element={<QuotePage />} />
             <Route path="settings" element={<SettingsPage />} />
             <Route path="info" element={<InfoPage />} />

src/pages/quotes/QuotePage.tsx

@@ -12,12 +12,12 @@
   adminLookupQuoteQueryKey,
   adminUpdateQuoteMutation,
 } from "@/generated/client/@tanstack/react-query.gen"
-import { activateKeyset } from "@/generated/client/sdk.gen"
+import { activateKeyset, keysetInfo } from "@/generated/client/sdk.gen"
 import { cn, getInitials } from "@/lib/utils"
 import { formatDate, humanReadableDuration } from "@/utils/dates"
 
 import { formatNumber, truncateString } from "@/utils/strings"
-import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
 import { getDeterministicColor } from "@/utils/dev"
 
 import { LoaderIcon } from "lucide-react"
@@ -211,7 +211,15 @@
   )
 }
 
-function QuoteActions({ value, isFetching }: { value: InfoReply; isFetching: boolean }) {
+function QuoteActions({
+  value,
+  isFetching,
+  keysetActive,
+}: {
+  value: InfoReply
+  isFetching: boolean
+  keysetActive: boolean
+}) {
   const [offerFormData, setOfferFormData] = useState<OfferFormResult>()
   const [offerFormDrawerOpen, setOfferFormDrawerOpen] = useState(false)
   const [offerConfirmDrawerOpen, setOfferConfirmDrawerOpen] = useState(false)
@@ -331,42 +339,50 @@
   const onActivateKeyset = () => {
     activateKeysetMutation.mutate()
   }
-
   return (
     <div className="flex items-center gap-2">
-      <DenyConfirmDrawer
-        title="Confirm denying quote"
-        open={denyConfirmDrawerOpen}
-        onOpenChange={setDenyConfirmDrawerOpen}
-        onSubmit={() => {
-          onDenyQuote()
-          setDenyConfirmDrawerOpen(false)
-        }}
-      >
-        <Button
-          className="flex-1"
-          disabled={isFetching || denyQuote.isPending || value.status !== "Pending"}
-          variant={value.status !== "Pending" ? "outline" : "destructive"}
+      {value.status === "Pending" ? (
+        <DenyConfirmDrawer
+          title="Confirm denying quote"
+          open={denyConfirmDrawerOpen}
+          onOpenChange={setDenyConfirmDrawerOpen}
+          onSubmit={() => {
+            onDenyQuote()
+            setDenyConfirmDrawerOpen(false)
+          }}
         >
-          Deny {denyQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
-        </Button>
-      </DenyConfirmDrawer>
-      <OfferFormDrawer
-        title="Offer quote"
-        description="Make an offer to the current holder of this bill"
-        value={value}
-        open={offerFormDrawerOpen}
-        onOpenChange={setOfferFormDrawerOpen}
-        onSubmit={(data) => {
-          setOfferFormData(data)
-          setOfferConfirmDrawerOpen(true)
-          setOfferFormDrawerOpen(false)
-        }}
-      >
-        <Button className="flex-1" disabled={isFetching || offerQuote.isPending || value.status !== "Pending"}>
-          Offer {offerQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
-        </Button>
-      </OfferFormDrawer>
+          <Button
+            className="flex-1"
+            disabled={isFetching || denyQuote.isPending || value.status !== "Pending"}
+            variant={value.status !== "Pending" ? "outline" : "destructive"}
+          >
+            Deny {denyQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
+          </Button>
+        </DenyConfirmDrawer>
+      ) : (
+        <></>
+      )}
+      {value.status === "Pending" ? (
+        <OfferFormDrawer
+          title="Offer quote"
+          description="Make an offer to the current holder of this bill"
+          value={value}
+          open={offerFormDrawerOpen}
+          onOpenChange={setOfferFormDrawerOpen}
+          onSubmit={(data) => {
+            setOfferFormData(data)
+            setOfferConfirmDrawerOpen(true)
+            setOfferFormDrawerOpen(false)
+          }}
+        >
+          <Button className="flex-1" disabled={isFetching || offerQuote.isPending || value.status !== "Pending"}>
+            Offer {offerQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
+          </Button>
+        </OfferFormDrawer>
+      ) : (
+        <></>
+      )}
+
       <OfferConfirmDrawer
         title="Confirm offering quote"
         description="Review your inputs and confirm the offer"
@@ -399,26 +415,31 @@
         </div>
       </OfferConfirmDrawer>
 
-      <ConfirmDrawer
-        title="Confirm activating keyset"
-        description="Are you sure you want to activate the keyset for this quote?"
-        open={activateKeysetConfirmDrawerOpen}
-        onOpenChange={setActivateKeysetConfirmDrawerOpen}
-        onSubmit={() => {
-          onActivateKeyset()
-          setActivateKeysetConfirmDrawerOpen(false)
-        }}
-        submitButtonText="Yes, activate keyset"
-        trigger={
-          <Button
-            className="flex-1"
-            disabled={isFetching || activateKeysetMutation.isPending || value.status !== "Accepted"}
-            variant="default"
-          >
-            Activate Keyset {activateKeysetMutation.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
-          </Button>
-        }
-      />
+      {value.status === "Accepted" && "keyset_id" in value ? (
+        <ConfirmDrawer
+          title="Confirm activating keyset"
+          description="Are you sure you want to activate the keyset for this quote?"
+          open={activateKeysetConfirmDrawerOpen}
+          onOpenChange={setActivateKeysetConfirmDrawerOpen}
+          onSubmit={() => {
+            onActivateKeyset()
+            setActivateKeysetConfirmDrawerOpen(false)
+            keysetActive = true
+          }}
+          submitButtonText="Yes, activate keyset"
+          trigger={
+            <Button
+              className="flex-1"
+              disabled={isFetching || activateKeysetMutation.isPending || keysetActive}
+              variant="default"
+            >
+              Activate Keyset {activateKeysetMutation.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
+            </Button>
+          }
+        />
+      ) : (
+        <></>
+      )}
     </div>
   )
 }
@@ -565,8 +586,6 @@
 function PayeePublicDataCard({ value }: { value?: PayeePublicData }) {
   if (!value) return null
 
-  console.log("Payee public data", value)
-
   if ("Ident" in value) {
     const identData = (value as { Ident: IdentityPublicData }).Ident
     return IdentityPublicDataCard({ value: identData })
@@ -579,6 +598,25 @@
 }
 
 function Quote({ value, isFetching }: { value: InfoReply; isFetching: boolean }) {
+  const shouldFetchKeyset = (value.status === "Offered" || value.status === "Accepted") && "keyset_id" in value
+
+  const keysetId = "keyset_id" in value ? value.keyset_id : ""
+
+  const { data: keysetData } = useQuery({
+    queryKey: ["keyset", keysetId],
+    queryFn: () =>
+      keysetInfo({
+        path: { keyset_id: keysetId },
+      }),
+    enabled: shouldFetchKeyset,
+  })
+
+  let keysetActive = false
+  if (keysetData) {
+    if ("data" in keysetData && keysetData.data !== undefined) {
+      keysetActive = keysetData.data.active
+    }
+  }
   return (
     <div className="flex flex-col gap-1">
       <Table className="my-2">
@@ -589,6 +627,25 @@
               <span className="font-mono">{value.id}</span>
             </TableCell>
           </TableRow>
+          {(value.status === "Offered" || value.status === "Accepted") && "keyset_id" in value ? (
+            <TableRow>
+              <TableCell className="font-bold">Keyset ID: </TableCell>
+              <TableCell className="flex items-center gap-2">
+                {keysetId.length > 0 ? (
+                  <Badge
+                    variant={keysetActive ? "default" : "destructive"}
+                    className={keysetActive ? "bg-blue-500" : "bg-red-500"}
+                  >
+                    {keysetId}
+                  </Badge>
+                ) : (
+                  <></>
+                )}
+              </TableCell>
+            </TableRow>
+          ) : (
+            <></>
+          )}
           <TableRow>
             <TableCell className="font-bold">Status: </TableCell>
             <TableCell>
@@ -601,6 +658,18 @@
             <TableCell className="font-bold">Sum: </TableCell>
             <TableCell>{formatNumber("en", value.bill?.sum)} sat</TableCell>
           </TableRow>
+          {(value.status === "Offered" ||
+            value.status === "Accepted" ||
+            value.status === "Rejected" ||
+            value.status === "OfferExpired") &&
+          "discounted" in value ? (
+            <TableRow>
+              <TableCell className="font-bold">Discounted: </TableCell>
+              <TableCell>{formatNumber("en", value.discounted)} crsat</TableCell>
+            </TableRow>
+          ) : (
+            <></>
+          )}
           <TableRow>
             <TableCell className="font-bold">Maturity date: </TableCell>
             <TableCell>
@@ -646,7 +715,7 @@
         </TableBody>
       </Table>
 
-      <QuoteActions value={value} isFetching={isFetching} />
+      <QuoteActions value={value} isFetching={isFetching} keysetActive={keysetActive} />
     </div>
   )
 }