fix: renterd hostd wallet balance details

SiaFoundation · Nov 8, 2023 · 16b7df4 · 16b7df4
1 parent e04a35c
commit 16b7df4
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 72 deletions.
diff --git a/.changeset/dry-impalas-impress.md b/.changeset/dry-impalas-impress.md
@@ -0,0 +1,6 @@
+---
+'hostd': minor
+'renterd': minor
+---
+
+The wallet balance tooltip now shows spendable confirmed and unconfirmed values.
diff --git a/apps/hostd/components/HostdAuthedLayout.tsx b/apps/hostd/components/HostdAuthedLayout.tsx
@@ -23,10 +23,12 @@ export function HostdAuthedLayout(
       banner={<HostdTestnetWarningBanner />}
       profile={<Profile />}
       isSynced={isSynced}
-      walletBalance={
-        wallet.data
-          ? new BigNumber(wallet.data.spendable).plus(wallet.data.unconfirmed)
-          : undefined
+      walletBalanceSc={
+        wallet.data && {
+          spendable: new BigNumber(wallet.data.spendable),
+          confirmed: new BigNumber(wallet.data.confirmed),
+          unconfirmed: new BigNumber(wallet.data.unconfirmed),
+        }
       }
       {...props}
     />

diff --git a/apps/hostd/components/Wallet/index.tsx b/apps/hostd/components/Wallet/index.tsx
@@ -89,7 +89,6 @@ export function Wallet() {
         .sort((a, b) => (a.timestamp >= b.timestamp ? 1 : -1)),
     [metrics.data]
   )
-  console.log(balances)
 
   const { isSynced, isWalletSynced, syncPercent, walletScanPercent } =
     useSyncStatus()
@@ -106,11 +105,13 @@ export function Wallet() {
           isWalletSynced={isWalletSynced}
           syncPercent={syncPercent}
           walletScanPercent={walletScanPercent}
-          sc={
+          balanceSc={
             wallet.data
-              ? new BigNumber(wallet.data.spendable).plus(
-                  wallet.data.unconfirmed
-                )
+              ? {
+                  spendable: new BigNumber(wallet.data.spendable),
+                  unconfirmed: new BigNumber(wallet.data.unconfirmed),
+                  confirmed: new BigNumber(wallet.data.confirmed),
+                }
               : undefined
           }
           receiveSiacoin={() => openDialog('addressDetails')}

diff --git a/apps/renterd/components/RenterdAuthedLayout.tsx b/apps/renterd/components/RenterdAuthedLayout.tsx
@@ -23,10 +23,12 @@ export function RenterdAuthedLayout(
       banner={<RenterdTestnetWarningBanner />}
       connectivityRoute={connectivityRoute}
       isSynced={isSynced}
-      walletBalance={
-        wallet.data
-          ? new BigNumber(wallet.data.spendable).plus(wallet.data.unconfirmed)
-          : undefined
+      walletBalanceSc={
+        wallet.data && {
+          spendable: new BigNumber(wallet.data.spendable),
+          confirmed: new BigNumber(wallet.data.confirmed),
+          unconfirmed: new BigNumber(wallet.data.unconfirmed),
+        }
       }
       {...props}
     />

diff --git a/apps/renterd/components/Wallet/index.tsx b/apps/renterd/components/Wallet/index.tsx
@@ -113,11 +113,13 @@ export function Wallet() {
           isWalletSynced={isWalletSynced}
           syncPercent={syncPercent}
           walletScanPercent={walletScanPercent}
-          sc={
+          balanceSc={
             wallet.data
-              ? new BigNumber(wallet.data.spendable).plus(
-                  wallet.data.unconfirmed
-                )
+              ? {
+                  spendable: new BigNumber(wallet.data.spendable),
+                  unconfirmed: new BigNumber(wallet.data.unconfirmed),
+                  confirmed: new BigNumber(wallet.data.confirmed),
+                }
               : undefined
           }
           receiveSiacoin={() => openDialog('addressDetails')}

diff --git a/libs/design-system/src/app/AppAuthedLayout/Sidenav.tsx b/libs/design-system/src/app/AppAuthedLayout/Sidenav.tsx
@@ -20,7 +20,11 @@ type Props = {
   }
   profile: React.ReactNode
   showWallet?: boolean
-  walletBalance?: BigNumber
+  walletBalanceSc?: {
+    unconfirmed: BigNumber
+    confirmed: BigNumber
+    spendable: BigNumber
+  }
   isSynced: boolean
   lock?: () => void
   openSettings: () => void
@@ -32,7 +36,7 @@ export function Sidenav({
   profile,
   isSynced,
   showWallet = true,
-  walletBalance,
+  walletBalanceSc,
   lock,
   openSettings,
   children,
@@ -56,7 +60,7 @@ export function Sidenav({
             <SidenavItemWallet
               routes={routes}
               isSynced={isSynced}
-              walletBalance={walletBalance}
+              walletBalanceSc={walletBalanceSc}
             />
           )}
           <SidenavItem title="Blockchain node" route={routes.node.index}>

diff --git a/libs/design-system/src/app/AppAuthedLayout/SidenavItemWallet.tsx b/libs/design-system/src/app/AppAuthedLayout/SidenavItemWallet.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { WalletIcon } from '@siafoundation/react-icons'
-import { WalletBalanceMini } from '../WalletBalanceMini'
+import { WalletBalanceSideNav } from '../WalletBalanceSideNav'
 import { SidenavItem } from './SidenavItem'
 
 type Routes = {
@@ -10,21 +10,28 @@ type Routes = {
 }
 
 type Props = {
-  walletBalance?: BigNumber
+  walletBalanceSc?: {
+    unconfirmed: BigNumber
+    confirmed: BigNumber
+    spendable: BigNumber
+  }
   isSynced: boolean
   routes: Routes
 }
 
-export function SidenavItemWallet({ walletBalance, isSynced, routes }: Props) {
+export function SidenavItemWallet({
+  walletBalanceSc,
+  isSynced,
+  routes,
+}: Props) {
   return (
     <SidenavItem title="Wallet" route={routes.wallet.view}>
       <div className="flex flex-col gap-3 items-center">
         <WalletIcon />
-        {isSynced && walletBalance && (
-          <WalletBalanceMini
-            wallet={{
-              sc: walletBalance,
-            }}
+        {isSynced && walletBalanceSc && (
+          <WalletBalanceSideNav
+            isSynced={isSynced}
+            balanceSc={walletBalanceSc}
           />
         )}
       </div>

diff --git a/libs/design-system/src/app/AppAuthedLayout/index.tsx b/libs/design-system/src/app/AppAuthedLayout/index.tsx
@@ -27,7 +27,11 @@ type Props = {
   connectivityRoute: string
   isSynced: boolean
   showWallet?: boolean
-  walletBalance?: BigNumber
+  walletBalanceSc?: {
+    unconfirmed: BigNumber
+    confirmed: BigNumber
+    spendable: BigNumber
+  }
   scroll?: boolean
   routes: {
     login: string
@@ -57,7 +61,7 @@ export function AppAuthedLayout({
   connectivityRoute,
   isSynced,
   showWallet,
-  walletBalance,
+  walletBalanceSc,
   routes,
   scroll = true,
   openSettings,
@@ -88,7 +92,7 @@ export function AppAuthedLayout({
             openSettings={openSettings}
             lock={lock}
             showWallet={showWallet}
-            walletBalance={walletBalance}
+            walletBalanceSc={walletBalanceSc}
             isSynced={isSynced}
           >
             {sidenav}

diff --git a/libs/design-system/src/app/WalletBalance.tsx b/libs/design-system/src/app/WalletBalance.tsx
@@ -4,17 +4,22 @@ import { humanSiacoin } from '@siafoundation/sia-js'
 import BigNumber from 'bignumber.js'
 import { Warning16 } from '@siafoundation/react-icons'
 import { Tooltip } from '../core/Tooltip'
+import { ValueSc } from '../components/ValueSc'
 
 export function WalletBalance({
-  sc,
+  balanceSc,
   isSynced,
   syncingMessage,
 }: {
-  sc?: BigNumber
+  balanceSc?: {
+    unconfirmed: BigNumber
+    confirmed: BigNumber
+    spendable: BigNumber
+  }
   isSynced: boolean
   syncingMessage?: string
 }) {
-  if (!sc) {
+  if (!balanceSc) {
     return null
   }
 
@@ -30,18 +35,52 @@ export function WalletBalance({
             <Warning16 className="" />
           </Text>
           <Text size="12" weight="semibold">
-            {humanSiacoin(sc)}
+            {humanSiacoin(balanceSc.spendable.plus(balanceSc.unconfirmed))}
           </Text>
         </Panel>
       </Tooltip>
     )
   }
 
   return (
-    <Panel className="hidden sm:flex h-7 px-3 items-center">
-      <Text size="12" weight="semibold">
-        {humanSiacoin(sc)}
-      </Text>
-    </Panel>
+    <Tooltip
+      content={
+        <div className="flex flex-col gap-1">
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>spendable</Text>
+              <Text color="subtle">All confirmed outputs not in-use.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.spendable} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>confirmed</Text>
+              <Text color="subtle">All confirmed outputs.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.confirmed} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>unconfirmed</Text>
+              <Text color="subtle">All unconfirmed outputs not in-use.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.unconfirmed} />
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <Panel className="hidden sm:flex h-7 px-3 items-center">
+        <Text size="12" weight="semibold">
+          {humanSiacoin(balanceSc.spendable.plus(balanceSc.unconfirmed))}
+        </Text>
+      </Panel>
+    </Tooltip>
   )
 }
diff --git a/libs/design-system/src/app/WalletBalanceMini.tsx b/libs/design-system/src/app/WalletBalanceMini.tsx
diff --git a/libs/design-system/src/app/WalletBalanceSideNav.tsx b/libs/design-system/src/app/WalletBalanceSideNav.tsx
@@ -0,0 +1,83 @@
+import { Text } from '../core/Text'
+import { humanSiacoin } from '@siafoundation/sia-js'
+import BigNumber from 'bignumber.js'
+import { Tooltip } from '../core/Tooltip'
+import { ValueSc } from '../components/ValueSc'
+
+export function WalletBalanceSideNav({
+  balanceSc,
+  isSynced,
+  syncingMessage,
+}: {
+  balanceSc?: {
+    unconfirmed: BigNumber
+    confirmed: BigNumber
+    spendable: BigNumber
+  }
+  isSynced: boolean
+  syncingMessage?: string
+}) {
+  if (!balanceSc) {
+    return null
+  }
+
+  if (!isSynced) {
+    return (
+      <Tooltip
+        side="right"
+        content={
+          syncingMessage || 'Blockchain is syncing, balance may be incorrect.'
+        }
+      >
+        <Text size="12" weight="medium">
+          {humanSiacoin(balanceSc.spendable.plus(balanceSc.unconfirmed), {
+            fixed: 0,
+          })}
+        </Text>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip
+      side="right"
+      content={
+        <div className="flex flex-col gap-1">
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>spendable</Text>
+              <Text color="subtle">All confirmed outputs not in-use.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.spendable} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>confirmed</Text>
+              <Text color="subtle">All confirmed outputs.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.confirmed} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <div className="flex flex-col flex-1">
+              <Text>unconfirmed</Text>
+              <Text color="subtle">All unconfirmed outputs not in-use.</Text>
+            </div>
+            <div className="flex justify-end">
+              <ValueSc variant="value" value={balanceSc.unconfirmed} />
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <Text size="12" weight="medium">
+        {humanSiacoin(balanceSc.spendable.plus(balanceSc.unconfirmed), {
+          fixed: 0,
+        })}
+      </Text>
+    </Tooltip>
+  )
+}