feat: walletd prominent receive button

SiaFoundation · Apr 15, 2024 · 63b0337 · 63b0337
1 parent 61de825
commit 63b0337
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git a/.changeset/hot-dancers-peel.md b/.changeset/hot-dancers-peel.md
@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+Added a receive button in addition to the addresses button to make send/receive options more clear. Closes https://github.com/SiaFoundation/walletd/issues/88
diff --git a/apps/walletd/components/Wallet/AddressesButton.tsx b/apps/walletd/components/Wallet/AddressesButton.tsx
@@ -1,5 +1,5 @@
 import { LinkButton } from '@siafoundation/design-system'
-import { ArrowDownLeft16 } from '@siafoundation/react-icons'
+import { ListNumbered16 } from '@siafoundation/react-icons'
 import { routes } from '../../config/routes'
 import { useRouter } from 'next/router'
 
@@ -16,7 +16,7 @@ export function AddressesButton() {
         },
       }}
     >
-      <ArrowDownLeft16 />
+      <ListNumbered16 />
       Addresses
     </LinkButton>
   )

diff --git a/apps/walletd/components/Wallet/WalletActionsMenu.tsx b/apps/walletd/components/Wallet/WalletActionsMenu.tsx
@@ -1,5 +1,9 @@
 import { Button } from '@siafoundation/design-system'
-import { ArrowUpRight16, Settings16 } from '@siafoundation/react-icons'
+import {
+  ArrowDownLeft16,
+  ArrowUpRight16,
+  Settings16,
+} from '@siafoundation/react-icons'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
 import BigNumber from 'bignumber.js'
 import { AddressesButton } from './AddressesButton'
@@ -10,6 +14,7 @@ import { useWallets } from '../../contexts/wallets'
 import { useDialog } from '../../contexts/dialog'
 import { WalletContextMenu } from '../WalletContextMenu'
 import { WalletBalanceWithSf } from './WalletBalanceWithSf'
+import { useAddresses } from '../../contexts/addresses'
 
 export function WalletActionsMenu() {
   const status = useSyncStatus()
@@ -22,6 +27,7 @@ export function WalletActionsMenu() {
     },
   })
   const { wallet } = useWallets()
+  const { dataset } = useAddresses()
   return (
     <div className="flex gap-2">
       <WalletBalanceWithSf
@@ -31,25 +37,44 @@ export function WalletActionsMenu() {
       />
       <AddressesButton />
       {wallet?.metadata.type !== 'watch' && (
-        <Button
-          aria-label="send"
-          size="small"
-          variant="accent"
-          onClick={() => {
-            if (wallet?.metadata.type === 'seed') {
-              openDialog('walletSendSeed', {
-                walletId,
+        <>
+          <Button
+            aria-label="receive"
+            size="small"
+            variant="accent"
+            onClick={() => {
+              const addressLowestIndex = dataset?.sort((a, b) =>
+                a.metadata.index > b.metadata.index ? 1 : -1
+              )[0]?.address
+              openDialog('addressUpdate', {
+                walletId: walletId,
+                address: addressLowestIndex,
               })
-            } else if (wallet?.metadata.type === 'ledger') {
-              openDialog('walletSendLedger', {
-                walletId,
-              })
-            }
-          }}
-        >
-          <ArrowUpRight16 />
-          Send
-        </Button>
+            }}
+          >
+            <ArrowDownLeft16 />
+            Receive
+          </Button>
+          <Button
+            aria-label="send"
+            size="small"
+            variant="accent"
+            onClick={() => {
+              if (wallet?.metadata.type === 'seed') {
+                openDialog('walletSendSeed', {
+                  walletId,
+                })
+              } else if (wallet?.metadata.type === 'ledger') {
+                openDialog('walletSendLedger', {
+                  walletId,
+                })
+              }
+            }}
+          >
+            <ArrowUpRight16 />
+            Send
+          </Button>
+        </>
       )}
       <EventsViewDropdownMenu />
       {wallet && (

diff --git a/apps/walletd/contexts/events/columns.tsx b/apps/walletd/contexts/events/columns.tsx
@@ -122,7 +122,7 @@ export const columns: EventsTableColumn[] = [
         return null
       }
       return (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 items-end">
           {!amountSc.isZero() && (
             <ValueScFiat displayBoth size="12" value={amountSc} />
           )}