Update Dashboard UI #35

stefanbitcr · 2025-05-26T18:03:15Z

📝 Description

Display On Chain Balance
Display Credit Balance
Display Debit Balance
Show initials as avatar rather than stock images
Show logged in Keycloak account as user
Remove pages that aren't currently used
Use a single quote page for all different statuses (deleted other quote listing pages as they are duplicates)
Allow anon types for payee
Remove mock data
Refresh auth token
Only allow keyset activation for accepted quotes

✅ Checklist

Please ensure the following tasks are completed before requesting a review:

My code adheres to the style guidelines of this project.
I have run npm run lint or the equivalent linting command.
I have added or updated tests (if applicable).
My changes have been tested thoroughly in different browsers/resolutions (if applicable).
I have updated the documentation (if applicable).
I have checked that there are no console errors or warnings.
I have verified that the application builds without errors.
I have tested responsiveness for mobile and desktop views (if applicable).

cloudflare-workers-and-pages · 2025-05-26T18:06:23Z

Deploying wildcat-dashboard with Cloudflare Pages

Latest commit:	`099660a`
Status:	✅ Deploy successful!
Preview URL:	https://da87dd1c.wildcat-dashboard.pages.dev
Branch Preview URL:	https://stefan-update2.wildcat-dashboard.pages.dev

View logs

codecov · 2025-05-26T18:07:25Z

Codecov Report

Attention: Patch coverage is 0% with 412 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/pages/balances/BalancesPage.tsx	0.00%	142 Missing ⚠️
src/pages/quotes/QuotePage.tsx	0.00%	80 Missing ⚠️
src/lib/keycloak-user.ts	0.00%	59 Missing ⚠️
src/generated/client/@tanstack/react-query.gen.ts	0.00%	32 Missing ⚠️
src/utils/dev.ts	0.00%	27 Missing ⚠️
src/generated/client/sdk.gen.ts	0.00%	19 Missing ⚠️
src/pages/quotes/StatusQuotePage.tsx	0.00%	14 Missing ⚠️
src/lib/api-client.ts	0.00%	10 Missing ⚠️
src/lib/utils.ts	0.00%	9 Missing ⚠️
src/main.tsx	0.00%	8 Missing ⚠️
... and 3 more

📢 Thoughts on this report? Let us know!

cryptosalomao · 2025-05-26T18:34:10Z

src/components/nav/NavUser.tsx

-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">{user.name}</AvatarFallback>
+                <div
+                  className="w-full h-full flex items-center justify-center text-white font-semibold text-sm"


You may use the custom background color directly with the bg- class utiltity to avoid creating extra variables and passing it down through properties, for example: bg-[#f59e0b]

Suggested change

className="w-full h-full flex items-center justify-center text-white font-semibold text-sm"

className="w-full h-full flex items-center justify-center text-white font-semibold text-sm bg-[#f59e0b]"

cryptosalomao · 2025-05-26T18:39:05Z

src/pages/balances/BalancesPage.tsx

+  unit: string
+}
+
+export function BalanceText({ amount, unit, children }: PropsWithChildren<{ amount: string; unit: string }>) {


Use the BalanceDisplay here to keep consistency

Suggested change

export function BalanceText({ amount, unit, children }: PropsWithChildren<{ amount: string; unit: string }>) {

export function BalanceText({ amount, unit, children }: PropsWithChildren<BalanceDisplay>) {

cryptosalomao · 2025-05-26T18:45:45Z

src/pages/balances/BalancesPage.tsx

-function PageBody() {
-  const { data } = useSuspenseQuery({
-    queryKey: ["balances"],
-    queryFn: fetchBalances,
+function isErrorResponse<T>(res: { data?: T; error?: unknown }): res is { data: undefined; error: unknown } {
+  return res.error !== undefined
+}


Is there a special reason to stop using tanstack query here? If it's suspense mode, I understand that it may be tricky to handle multiple queries at once with it, but you could still use the useQueries hook to call multiple functions at once, this way you wouldn't have to handle all the individual state updates and errors, and could still access the status imperatively with isLoading, isError, isSuccess && data, etc.

For reference:
https://tanstack.com/query/latest/docs/framework/react/reference/useQueries

cryptosalomao · 2025-05-26T18:47:45Z

src/pages/balances/BalancesPage.tsx

+      if (creditResponse.status === "fulfilled" && !isErrorResponse(creditResponse.value)) {
+        const creditData = creditResponse.value.data
+        if (creditData && "amount" in creditData && "unit" in creditData) {
+          newBalances.credit = {
+            amount: String(creditData.amount),
+            unit: String(creditData.unit),
+          }
+        }
+      } else {
+        console.warn(
+          "Failed to fetch credit balance:",
+          creditResponse.status === "rejected" ? creditResponse.reason : creditResponse.value.error,
+        )
+      }
+
+      // Handle debit balance response
+      if (debitResponse.status === "fulfilled" && !isErrorResponse(debitResponse.value)) {
+        const debitData = debitResponse.value.data
+        if (debitData && "amount" in debitData && "unit" in debitData) {
+          newBalances.debit = {
+            amount: String(debitData.amount),
+            unit: String(debitData.unit),
+          }
+        }
+      } else {
+        console.warn(
+          "Failed to fetch debit balance:",
+          debitResponse.status === "rejected" ? debitResponse.reason : debitResponse.value.error,
+        )
+      }
+
+      if (onchainResponse.status === "fulfilled" && !isErrorResponse(onchainResponse.value)) {
+        const onchainData = onchainResponse.value.data
+        if (onchainData && typeof onchainData === "object" && "confirmed" in onchainData) {
+          console.log("Onchain balance:", onchainData.confirmed)
+          newBalances.bitcoin = {
+            amount: String(onchainData.confirmed),
+            unit: "BTC",
+          }
+        }
+      } else {
+        console.warn(
+          "Failed to fetch onchain balance:",
+          onchainResponse.status === "rejected" ? onchainResponse.reason : onchainResponse.value.error,
+        )
+      }
+
+      setBalances(newBalances)
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"
+      setError(errorMessage)
+      console.error("Failed to fetch balances:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])


I tend to think this is too complicated, because it has several statuses blocks to handle. Let me know if you found @tanstack/react-query not handy in here

cryptosalomao · 2025-05-26T18:48:24Z

src/pages/balances/BalancesPage.tsx

+  useEffect(() => {
+    void fetchAllBalances()
+
+    const interval = setInterval(() => void fetchAllBalances(), 30000)


All good here, just a suggestion to separate the decimals here for better readability xD

Suggested change

const interval = setInterval(() => void fetchAllBalances(), 30000)

const interval = setInterval(() => void fetchAllBalances(), 30_000)

cryptosalomao · 2025-05-26T18:52:28Z

src/pages/quotes/QuotePage.tsx

+function getInitials(name?: string): string {
+  if (!name) return "?"
+  const words = name.trim().split(/\s+/)
+  if (words.length === 1) {
+    return words[0].substring(0, 2).toUpperCase()
+  }
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase()
+}


Maybe move this to it's own utils file? Not sure if it's an early optimization tho, please tell me. Also, we have this very same utility with a cleaner functional approach in our frontend repo:

https://github.com/BitcreditProtocol/E-Bill-frontend/blob/main/src/utils/strings.ts#L11

We have other util functions there too, so please feel free to use as many of those as you want to!

Very clean, I ended up stealing it.

cryptosalomao · 2025-05-26T18:57:20Z

Only a few things and quick improvements suggestions. The major thing is the use of tanstack query that has been reduced in here. It works with anything wrapped in a Promise, so you wouldn't have to handle all the individual statuses (fulfilled, pending, rejection, etc) manually.

I think it's worth the time to try and learn the basics of it to keep redundancy minimal:
https://tanstack.com/query/latest/docs/framework/react/guides/queries#query-basics

Excellent job!

stefanbitcr · 2025-05-26T19:22:15Z

@cryptosalomao Thank you for the review effort! I will take a look at tanstack, indeed my unfamiliarity with it (and react) might be overcomplicating things!

cryptosalomao · 2025-05-26T19:27:35Z

@cryptosalomao Thank you for the review effort! I will take a look at tanstack, indeed my unfamiliarity with it (and react) might be overcomplicating things!

You're welcome! I'm sure you'll find it easy after giving it a try. Let me know if you need extra help and want to jump on a call to address any questions you may have

Stolen from https://github.com/BitcreditProtocol/E-Bill-frontend/blob/d0356f045b0d11a5cc094c698199aa9a04139d77/src/utils/strings.ts#L11

stefanbitcr added 17 commits May 21, 2025 19:56

Remove mocks

f1ef0df

Add debit and credit types

525d7cf

Show balance

f14ccbc

Hide earnings and info from side bar

e3852ea

Update payee data type

b1921a7

Refresh keycloak

c41a982

Display Ecash balance

c28cbd4

Display anon payee

5ddd9b2

Use generic quote page for different statusses

242c39e

Use initials as avatar

7a12cc4

Use correct avatar

cb8cb73

Update balance page

c41165a

Remove dev mode

ae600ad

Remove dev mode

4b1f3ca

Display keycloak user

b98a8a2

Display keycloak user

8cebd48

Fetch on chain balance

476dda9

stefanbitcr requested review from cryptosalomao, mtbitcr and zupzup May 26, 2025 18:03

stefanbitcr self-assigned this May 26, 2025

stefanbitcr added 2 commits May 26, 2025 20:05

Remove comment

df4abb7

Remove unnecessary import

540cfa7

Only allow keyset activation for accepted quotes

2d34a18

cryptosalomao reviewed May 26, 2025

View reviewed changes

Move functional get Initials to utils

8e41cef

Stolen from https://github.com/BitcreditProtocol/E-Bill-frontend/blob/d0356f045b0d11a5cc094c698199aa9a04139d77/src/utils/strings.ts#L11

mtbitcr approved these changes May 27, 2025

View reviewed changes

stefanbitcr added 5 commits May 29, 2025 18:01

Directly set color using bg-

7d38995

Use BalanceDisplay for consistency

9f72f22

Minor changes

dcba10c

Use tanstack useQueries and add timeout

4517455

Remove is pending

099660a

stefanbitcr merged commit d804fbd into master May 29, 2025
5 of 6 checks passed

	className="w-full h-full flex items-center justify-center text-white font-semibold text-sm"
	className="w-full h-full flex items-center justify-center text-white font-semibold text-sm bg-[#f59e0b]"

	export function BalanceText({ amount, unit, children }: PropsWithChildren<{ amount: string; unit: string }>) {
	export function BalanceText({ amount, unit, children }: PropsWithChildren<BalanceDisplay>) {

	const interval = setInterval(() => void fetchAllBalances(), 30000)
	const interval = setInterval(() => void fetchAllBalances(), 30_000)

Update Dashboard UI #35

Update Dashboard UI #35

Uh oh!

Conversation

stefanbitcr commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

✅ Checklist

Uh oh!

cloudflare-workers-and-pages bot commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying wildcat-dashboard with Cloudflare Pages

Uh oh!

codecov bot commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

cryptosalomao May 26, 2025

Choose a reason for hiding this comment

Uh oh!

cryptosalomao May 26, 2025

Choose a reason for hiding this comment

Uh oh!

cryptosalomao May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cryptosalomao May 26, 2025

Choose a reason for hiding this comment

Uh oh!

cryptosalomao May 26, 2025

Choose a reason for hiding this comment

Uh oh!

cryptosalomao May 26, 2025

Choose a reason for hiding this comment

Uh oh!

stefanbitcr May 26, 2025

Choose a reason for hiding this comment

Uh oh!

cryptosalomao commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stefanbitcr commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cryptosalomao commented May 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

stefanbitcr commented May 26, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented May 26, 2025 •

edited

Loading

codecov bot commented May 26, 2025 •

edited

Loading

cryptosalomao May 26, 2025 •

edited

Loading

cryptosalomao commented May 26, 2025 •

edited

Loading

stefanbitcr commented May 26, 2025 •

edited

Loading