From 7c579d70d3bc203c10993108102fcdfea7c6e86f Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 5 Apr 2024 12:48:59 -0400
Subject: [PATCH] feat: walletd prominent receive button

---
 .changeset/hot-dancers-peel.md                |  5 ++
 .../components/Wallet/AddressesButton.tsx     |  4 +-
 .../components/Wallet/WalletActionsMenu.tsx   | 63 +++++++++++++------
 apps/walletd/contexts/events/columns.tsx      |  2 +-
 4 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/hot-dancers-peel.md

diff --git a/.changeset/hot-dancers-peel.md b/.changeset/hot-dancers-peel.md
new file mode 100644
index 000000000..275b78b8b
--- /dev/null
+++ 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
index 6e25c4977..56d3069d5 100644
--- 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
index daccd9fc7..21a1476b8 100644
--- 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
index 1042cfcd0..658a86520 100644
--- 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} />
           )}