Skip to content

Commit

Permalink
refactor: wallet send form
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfreska committed Aug 30, 2024
1 parent 81d374f commit 02c02fe
Show file tree
Hide file tree
Showing 16 changed files with 258 additions and 224 deletions.
7 changes: 7 additions & 0 deletions .changeset/bright-swans-type.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'hostd': minor
'renterd': minor
'@siafoundation/design-system': minor
---

The send siacoin feature now validates the entered address.
5 changes: 5 additions & 0 deletions .changeset/proud-paws-fold.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@siafoundation/design-system': minor
---

WalletSendSiacoinDialog no longer uses formik.
56 changes: 27 additions & 29 deletions apps/hostd-e2e/src/specs/wallet.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,19 @@ test('send siacoin with include fee off', async ({ page }) => {
await expect(sendDialog.getByTestId('transactionId')).toBeVisible()

// List.
// TODO: Add this after we migrate to the new events API.
// await sendDialog.getByRole('button', { name: 'Close' }).click()
// await expect(page.getByTestId('eventsTable')).toBeVisible()
// await expect(
// page.getByTestId('eventsTable').locator('tbody tr').first()
// ).toBeVisible()
// await expect(
// page
// .getByTestId('eventsTable')
// .locator('tbody tr')
// .first()
// .getByTestId('amount')
// .getByText(`-${amountWithFeeString}`)
// ).toBeVisible()
await sendDialog.getByRole('button', { name: 'Close' }).click()
await expect(page.getByTestId('eventsTable')).toBeVisible()
await expect(
page.getByTestId('eventsTable').locator('tbody tr').first()
).toBeVisible()
await expect(
page
.getByTestId('eventsTable')
.locator('tbody tr')
.first()
.getByTestId('amount')
.getByText(`-${amountWithFeeString}`)
).toBeVisible()
})

test('send siacoin with include fee on', async ({ page }) => {
Expand All @@ -96,7 +95,7 @@ test('send siacoin with include fee on', async ({ page }) => {
const sendDialog = page.getByRole('dialog', { name: 'Send siacoin' })
await fillTextInputByName(page, 'address', receiveAddress)
await fillTextInputByName(page, 'siacoin', amount.toString())
await setSwitchByLabel(page, 'include fee', true)
await setSwitchByLabel(page, 'includeFee', true)
await expect(
sendDialog.getByTestId('networkFee').getByText('0.012 SC')
).toBeVisible()
Expand Down Expand Up @@ -139,18 +138,17 @@ test('send siacoin with include fee on', async ({ page }) => {
await expect(sendDialog.getByTestId('transactionId')).toBeVisible()

// List.
// TODO: Add this after we migrate to the new events API.
// await sendDialog.getByRole('button', { name: 'Close' }).click()
// await expect(page.getByTestId('eventsTable')).toBeVisible()
// await expect(
// page.getByTestId('eventsTable').locator('tbody tr').first()
// ).toBeVisible()
// await expect(
// page
// .getByTestId('eventsTable')
// .locator('tbody tr')
// .first()
// .getByTestId('amount')
// .getByText(`-${amountWithFeeString}`)
// ).toBeVisible()
await sendDialog.getByRole('button', { name: 'Close' }).click()
await expect(page.getByTestId('eventsTable')).toBeVisible()
await expect(
page.getByTestId('eventsTable').locator('tbody tr').first()
).toBeVisible()
await expect(
page
.getByTestId('eventsTable')
.locator('tbody tr')
.first()
.getByTestId('amount')
.getByText(`-${amountString}`)
).toBeVisible()
})
2 changes: 1 addition & 1 deletion apps/hostd/components/Wallet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function Wallet() {
/>
) : null}
<Table
testId="transactionsTable"
testId="eventsTable"
isLoading={dataState === 'loading'}
emptyState={
dataState === 'noneMatchingFilters' ? (
Expand Down
4 changes: 2 additions & 2 deletions apps/hostd/dialogs/HostdSendSiacoinDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import BigNumber from 'bignumber.js'
const standardTxnSize = 1200 // bytes

export function HostdSendSiacoinDialog() {
const { dialog, openDialog, closeDialog } = useDialog()
const { dialog, onOpenChange } = useDialog()
const wallet = useWallet()
const walletSend = useWalletSend()

Expand Down Expand Up @@ -60,7 +60,7 @@ export function HostdSendSiacoinDialog() {
send={send}
fee={fee}
open={dialog === 'sendSiacoin'}
onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
onOpenChange={onOpenChange}
/>
)
}
2 changes: 1 addition & 1 deletion apps/renterd-e2e/src/specs/wallet.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ test('send siacoin with include fee on', async ({ page }) => {
const sendDialog = page.getByRole('dialog', { name: 'Send siacoin' })
await fillTextInputByName(page, 'address', receiveAddress)
await fillTextInputByName(page, 'siacoin', amount.toString())
await setSwitchByLabel(page, 'include fee', true)
await setSwitchByLabel(page, 'includeFee', true)
await expect(
sendDialog.getByTestId('networkFee').getByText('0.012 SC')
).toBeVisible()
Expand Down
4 changes: 2 additions & 2 deletions apps/renterd/dialogs/RenterdSendSiacoinDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import BigNumber from 'bignumber.js'
const standardTxnSize = 1200 // bytes

export function RenterdSendSiacoinDialog() {
const { dialog, openDialog, closeDialog } = useDialog()
const { dialog, onOpenChange } = useDialog()
const wallet = useWallet()

const recommendedFee = useTxPoolRecommendedFee()
Expand Down Expand Up @@ -60,7 +60,7 @@ export function RenterdSendSiacoinDialog() {
send={send}
fee={fee}
open={dialog === 'sendSiacoin'}
onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
onOpenChange={onOpenChange}
/>
)
}
3 changes: 1 addition & 2 deletions apps/walletd/dialogs/_sharedWalletSend/SendFlowDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@ export function SendFlowDialog({
controls={
controls?.form && (
<div className="flex flex-col gap-1">
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
<FormSubmitButton<any> form={controls.form}>
<FormSubmitButton form={controls.form}>
{controls.submitLabel}
</FormSubmitButton>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import BigNumber from 'bignumber.js'
import { Text } from '../../core/Text'
import { CheckmarkFilled32 } from '@siafoundation/react-icons'
import { WalletSendSiacoinReceipt } from './Receipt'
import { SendSiacoinFormData } from './types'
import { SendSiacoinParams } from './types'

type Props = {
data: SendSiacoinFormData
data: SendSiacoinParams
fee: BigNumber
transactionId?: string
}

export function WalletSendSiacoinComplete({
data: { address, hastings, includeFee },
data: { address, hastings },
fee,
transactionId,
}: Props) {
Expand All @@ -20,7 +20,6 @@ export function WalletSendSiacoinComplete({
<WalletSendSiacoinReceipt
address={address}
hastings={hastings}
includeFee={includeFee}
fee={fee}
transactionId={transactionId}
/>
Expand Down
61 changes: 34 additions & 27 deletions libs/design-system/src/app/WalletSendSiacoinDialog/Confirm.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,66 @@
import { useFormik } from 'formik'
import { useForm } from 'react-hook-form'
import BigNumber from 'bignumber.js'
import { WalletSendSiacoinReceipt } from './Receipt'
import { SendSiacoinFormData } from './types'
import { SendSiacoinParams } from './types'
import { triggerErrorToast } from '../../lib/toast'
import { useCallback, useMemo } from 'react'

type Props = {
send: (
params: SendSiacoinFormData
params: SendSiacoinParams & { includeFee: boolean }
) => Promise<{ transactionId?: string; error?: string }>
formData: SendSiacoinFormData
params: SendSiacoinParams
fee: BigNumber
onConfirm: (params: { transactionId?: string }) => void
}

export function useSendSiacoinConfirmForm({
send,
formData,
params,
fee,
onConfirm,
}: Props) {
const { address, hastings, includeFee } = formData || {}
const formik = useFormik({
initialValues: {},
onSubmit: async () => {
const { transactionId, error } = await send({
address,
hastings,
includeFee,
})
const { address, hastings } = params || {}
const form = useForm({
defaultValues: {},
})

if (error) {
formik.setStatus({
error,
})
return
}
const onValid = useCallback(async () => {
const { transactionId, error } = await send({
address,
hastings,
includeFee: false,
})

onConfirm({
transactionId,
if (error) {
triggerErrorToast({
title: 'Error sending siacoin',
body: error,
})
},
})
return
}

onConfirm({
transactionId,
})
}, [onConfirm, address, hastings, send])

const submit = useMemo(() => form.handleSubmit(onValid), [form, onValid])

const form = (
const el = (
<div className="flex flex-col gap-4">
<WalletSendSiacoinReceipt
address={address}
hastings={hastings}
fee={fee}
includeFee={includeFee}
/>
</div>
)

return {
el,
form,
formik,
reset: form.reset,
submit,
}
}
Loading

0 comments on commit 02c02fe

Please sign in to comment.