feat: walletd sf balances

SiaFoundation · Oct 11, 2023 · 170c1e3 · 170c1e3
1 parent ed4cba3
commit 170c1e3
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 10 deletions.
diff --git a/.changeset/gorgeous-cars-impress.md b/.changeset/gorgeous-cars-impress.md
@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+Wallet do now shows siafund balances when greater than 0.
diff --git a/apps/walletd/components/Wallet/WalletActionsMenu.tsx b/apps/walletd/components/Wallet/WalletActionsMenu.tsx
@@ -1,4 +1,4 @@
-import { Button, WalletBalance } from '@siafoundation/design-system'
+import { Button } from '@siafoundation/design-system'
 import { ArrowUpRight16, Settings16 } from '@siafoundation/react-icons'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
 import BigNumber from 'bignumber.js'
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import { useWallets } from '../../contexts/wallets'
 import { useDialog } from '../../contexts/dialog'
 import { WalletContextMenu } from '../WalletContextMenu'
+import { WalletBalanceWithSf } from './WalletBalanceWithSf'
 
 export function WalletActionsMenu() {
   const status = useSyncStatus()
@@ -23,8 +24,9 @@ export function WalletActionsMenu() {
   const { wallet } = useWallets()
   return (
     <div className="flex gap-2">
-      <WalletBalance
+      <WalletBalanceWithSf
         sc={new BigNumber(balance.data?.siacoins || 0)}
+        sf={balance.data?.siafunds || 0}
         isSynced={status.isSynced}
       />
       <AddressesButton />

diff --git a/apps/walletd/components/Wallet/WalletBalanceWithSf.tsx b/apps/walletd/components/Wallet/WalletBalanceWithSf.tsx
@@ -0,0 +1,69 @@
+import { Warning16 } from '@siafoundation/react-icons'
+import { Panel, Separator, Text, Tooltip } from '@siafoundation/design-system'
+import { humanSiacoin, humanSiafund } from '@siafoundation/sia-js'
+import BigNumber from 'bignumber.js'
+import { cx } from 'class-variance-authority'
+
+export function WalletBalanceWithSf({
+  sc,
+  sf,
+  isSynced,
+  syncingMessage,
+}: {
+  sc: BigNumber
+  sf: number
+  isSynced: boolean
+  syncingMessage?: string
+}) {
+  const el = (
+    <>
+      <Tooltip
+        side="bottom"
+        content={humanSiacoin(sc, {
+          dynamicUnits: false,
+        })}
+      >
+        <Text size="12" weight="semibold" className="flex items-center h-full">
+          {humanSiacoin(sc)}
+        </Text>
+      </Tooltip>
+      {!!sf && (
+        <>
+          <Separator variant="vertical" className="h-full" />
+          <Tooltip side="bottom" content={humanSiafund(sf)}>
+            <Text
+              size="12"
+              weight="semibold"
+              className="flex items-center h-full"
+            >
+              {humanSiafund(sf)}
+            </Text>
+          </Tooltip>
+        </>
+      )}
+    </>
+  )
+
+  return (
+    <Panel
+      className={cx(
+        'hidden sm:flex h-7 items-center gap-2',
+        !isSynced ? 'pl-2 pr-3' : 'px-3'
+      )}
+    >
+      {!isSynced && (
+        <Tooltip
+          side="bottom"
+          content={
+            syncingMessage || 'Blockchain is syncing, balance may be incorrect.'
+          }
+        >
+          <Text color="amber" className="flex items-center h-full">
+            <Warning16 />
+          </Text>
+        </Tooltip>
+      )}
+      {el}
+    </Panel>
+  )
+}
diff --git a/apps/walletd/contexts/wallets/columns.tsx b/apps/walletd/contexts/wallets/columns.tsx
@@ -6,6 +6,7 @@ import {
   Tooltip,
   Button,
   ValueSc,
+  ValueSf,
 } from '@siafoundation/design-system'
 import { Locked16, Unlocked16, Draggable16 } from '@siafoundation/react-icons'
 import { humanDate } from '@siafoundation/sia-js'
@@ -75,6 +76,7 @@ export const columns: WalletsTableColumn[] = [
     id: 'balance',
     label: 'balance',
     category: 'general',
+    contentClassName: 'justify-end',
     render: function RenderBalance({ data: { id } }) {
       const balance = useWalletBalance({
         params: {
@@ -85,11 +87,16 @@ export const columns: WalletsTableColumn[] = [
         return null
       }
       return (
-        <ValueSc
-          size="12"
-          variant="value"
-          value={new BigNumber(balance.data.siacoins)}
-        />
+        <div className="flex flex-col gap-1 items-end">
+          <ValueSc
+            size="12"
+            variant="value"
+            value={new BigNumber(balance.data.siacoins)}
+          />
+          {!!balance.data.siafunds && (
+            <ValueSf size="12" variant="value" value={balance.data.siafunds} />
+          )}
+        </div>
       )
     },
   },

diff --git a/libs/design-system/src/app/WalletBalance.tsx b/libs/design-system/src/app/WalletBalance.tsx
@@ -2,7 +2,7 @@ import { Panel } from '../core/Panel'
 import { Text } from '../core/Text'
 import { humanSiacoin } from '@siafoundation/sia-js'
 import BigNumber from 'bignumber.js'
-import { Warning16 } from '@carbon/icons-react'
+import { Warning16 } from '@siafoundation/react-icons'
 import { Tooltip } from '../core/Tooltip'
 
 export function WalletBalance({

diff --git a/libs/design-system/src/components/EntityListItem.tsx b/libs/design-system/src/components/EntityListItem.tsx
@@ -15,7 +15,7 @@ import { humanNumber } from '@siafoundation/sia-js'
 import { formatDistance } from 'date-fns'
 import { upperFirst } from 'lodash'
 import BigNumber from 'bignumber.js'
-import { DotMark16 } from '@carbon/icons-react'
+import { DotMark16 } from '@siafoundation/react-icons'
 import { EntityListItemLayout } from './EntityListItemLayout'
 
 export type EntityListItemProps = {

diff --git a/libs/design-system/src/components/Table.tsx b/libs/design-system/src/components/Table.tsx
@@ -3,7 +3,7 @@ import { Panel } from '../core/Panel'
 import { Text } from '../core/Text'
 import { useCallback } from 'react'
 import { cx } from 'class-variance-authority'
-import { CaretDown16, CaretUp16 } from '@carbon/icons-react'
+import { CaretDown16, CaretUp16 } from '@siafoundation/react-icons'
 import { times } from 'lodash'
 
 type Data = {