feat: walletd resubscribe

Author: alexfreska

.changeset/dull-trees-grow.md

@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+Address generation and addition dialogs now have an option to resubscribe from a specified height.

apps/walletd/contexts/events/index.tsx

@@ -3,12 +3,8 @@ import {
   useDatasetEmptyState,
   useServerFilters,
 } from '@siafoundation/design-system'
-import {
-  useResubscribe,
-  useWalletEvents,
-  useWalletTxPool,
-} from '@siafoundation/react-walletd'
-import { createContext, useCallback, useContext, useMemo } from 'react'
+import { useWalletEvents, useWalletTxPool } from '@siafoundation/react-walletd'
+import { createContext, useContext, useMemo } from 'react'
 import {
   CellContext,
   EventData,
@@ -56,13 +52,6 @@ export function useEventsMain() {
     },
   })
 
-  const _resubscribe = useResubscribe()
-  const resubscribe = useCallback(async () => {
-    _resubscribe.post({
-      payload: 0,
-    })
-  }, [_resubscribe])
-
   const dataset = useMemo<EventData[] | null>(() => {
     if (!responseEvents.data || !responseTxPool.data) {
       return null
@@ -204,7 +193,6 @@ export function useEventsMain() {
     removeFilter,
     removeLastFilter,
     resetFilters,
-    resubscribe,
     offset,
     limit,
   }

apps/walletd/dialogs/FieldResubscribe.tsx

@@ -0,0 +1,100 @@
+import {
+  Alert,
+  ConfigFields,
+  FieldNumber,
+  FieldSwitch,
+  Label,
+  Text,
+} from '@siafoundation/design-system'
+import { Path, UseFormReturn } from 'react-hook-form'
+import { Warning16 } from '@carbon/icons-react'
+import BigNumber from 'bignumber.js'
+import { useResubscribe } from '@siafoundation/react-walletd'
+
+export function getResubscribeFields() {
+  return {
+    shouldResubscribe: {
+      type: 'boolean',
+      title: 'Resubscribe',
+      validation: {},
+    },
+    resubscribeStartHeight: {
+      type: 'number',
+      decimalsLimit: 0,
+      title: 'Start index',
+      validation: {},
+    },
+  } as const
+}
+
+export const defaultResubscribeValues = {
+  shouldResubscribe: false,
+  resubscribeStartHeight: new BigNumber(0),
+}
+
+type Values = typeof defaultResubscribeValues
+
+type Props<V extends Values> = {
+  fields: ConfigFields<V, never>
+  form: UseFormReturn<V>
+}
+
+export function FieldResubscribe<V extends Values>({ form, fields }: Props<V>) {
+  const shouldResubscribe = form.watch('shouldResubscribe' as Path<V>)
+  return (
+    <div className="flex flex-col gap-1 pt-2">
+      <div className="flex flex-col gap-2">
+        <Label color="contrast">Advanced</Label>
+        <Text size="14" color="subtle">
+          Resubscribe to wallet events after adding addresses.
+        </Text>
+      </div>
+      <div className="flex justify-start gap-3">
+        <FieldSwitch
+          form={form}
+          fields={fields}
+          name={'shouldResubscribe' as Path<V>}
+        />
+        {shouldResubscribe && (
+          <FieldNumber
+            form={form}
+            fields={fields}
+            name={'resubscribeStartHeight' as Path<V>}
+          />
+        )}
+      </div>
+      {shouldResubscribe && (
+        <div className="pt-2">
+          <Alert className="!p-2">
+            <div className="flex flex-col gap-1">
+              <div className="flex gap-2 items-center">
+                <Text>
+                  <Warning16 />
+                </Text>
+                <Text weight="medium">Warning</Text>
+              </div>
+              <Text size="14" color="subtle">
+                Only enable this if you are adding addresses with past
+                transactions. Resubscribing processes the blockchain from the
+                specified height - this can take take a long time.
+              </Text>
+            </div>
+          </Alert>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function useTriggerResubscribe() {
+  const resubscribe = useResubscribe()
+  return async (values: Values) => {
+    if (values.shouldResubscribe) {
+      await resubscribe.post({
+        payload: values.resubscribeStartHeight
+          ? values.resubscribeStartHeight.toNumber()
+          : 0,
+      })
+    }
+  }
+}

apps/walletd/dialogs/WalletAddressesAddDialog.tsx

@@ -2,7 +2,6 @@
 import {
   ConfigFields,
   Dialog,
-  FieldSwitch,
   FieldTextArea,
   FormSubmitButton,
   Paragraph,
@@ -12,14 +11,19 @@ import {
 } from '@siafoundation/design-system'
 import {
   WalletAddressMetadata,
-  useResubscribe,
   useWalletAddressAdd,
 } from '@siafoundation/react-walletd'
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
 import { useWallets } from '../contexts/wallets'
 import { isValidAddress } from '@siafoundation/units'
 import { uniq } from '@technically/lodash'
+import {
+  FieldResubscribe,
+  useTriggerResubscribe,
+  getResubscribeFields,
+  defaultResubscribeValues,
+} from './FieldResubscribe'
 
 export type WalletAddressesAddDialogParams = {
   walletId: string
@@ -34,7 +38,7 @@ type Props = {
 
 const defaultValues = {
   addresses: '',
-  shouldResubscribe: false,
+  ...defaultResubscribeValues,
 }
 
 type Values = typeof defaultValues
@@ -84,11 +88,7 @@ function getFields(): ConfigFields<Values, never> {
         },
       },
     },
-    shouldResubscribe: {
-      type: 'boolean',
-      title: 'Resubscribe',
-      validation: {},
-    },
+    ...getResubscribeFields(),
   }
 }
 
@@ -115,7 +115,6 @@ export function WalletAddressesAddDialog({
   const fields = getFields()
 
   const addressAdd = useWalletAddressAdd()
-  const resubscribe = useResubscribe()
   const addAllAddresses = useCallback(
     async (addresses: string) => {
       const addrs = formatAddresses(addresses)
@@ -151,6 +150,7 @@ export function WalletAddressesAddDialog({
     [walletId, addressAdd]
   )
 
+  const triggerResubscribe = useTriggerResubscribe()
   const onSubmit = useCallback(
     async (values: Values) => {
       const result = await addAllAddresses(values.addresses)
@@ -175,14 +175,10 @@ export function WalletAddressesAddDialog({
           `Successfully added ${result.successful} addresses.`
         )
       }
-      if (values.shouldResubscribe) {
-        resubscribe.post({
-          payload: 0,
-        })
-      }
+      triggerResubscribe(values)
       closeAndReset()
     },
-    [addAllAddresses, closeAndReset, resubscribe]
+    [addAllAddresses, closeAndReset, triggerResubscribe]
   )
 
   const addressesText = form.watch('addresses')
@@ -215,7 +211,7 @@ export function WalletAddressesAddDialog({
           Enter multiple addresses separated by spaces or commas.
         </Paragraph>
         <FieldTextArea form={form} fields={fields} name="addresses" />
-        <FieldSwitch form={form} fields={fields} name="shouldResubscribe" />
+        <FieldResubscribe form={form} fields={fields} />
       </div>
     </Dialog>
   )

apps/walletd/dialogs/WalletAddressesGenerateLedgerDialog/index.tsx

@@ -24,6 +24,12 @@ import { useLedger } from '../../contexts/ledger'
 import { LedgerAddress } from './LedgerAddress'
 import { useWalletAddresses } from '../../hooks/useWalletAddresses'
 import { getSDK } from '@siafoundation/sdk'
+import {
+  FieldResubscribe,
+  getResubscribeFields,
+  defaultResubscribeValues,
+  useTriggerResubscribe,
+} from '../FieldResubscribe'
 
 export type WalletAddressesGenerateLedgerDialogParams = {
   walletId: string
@@ -42,6 +48,7 @@ function getDefaultValues(lastIndex: number) {
     ledgerConnected: false,
     index: new BigNumber(lastIndex),
     count: new BigNumber(1),
+    ...defaultResubscribeValues,
   }
 }
 
@@ -78,6 +85,7 @@ function getFields(): ConfigFields<Values, never> {
         max: 1000,
       },
     },
+    ...getResubscribeFields(),
   }
 }
 
@@ -300,16 +308,21 @@ export function WalletAddressesGenerateLedgerDialog({
     defaultValues,
   })
 
-  const onSubmit = useCallback(async () => {
-    if (newGeneratedAddresses.length === 0) {
-      triggerErrorToast(
-        'Add and generate addresses with your Ledger device to continue.'
-      )
-      return
-    }
-    await saveAddresses()
-    closeAndReset()
-  }, [newGeneratedAddresses, saveAddresses, closeAndReset])
+  const triggerResubscribe = useTriggerResubscribe()
+  const onSubmit = useCallback(
+    async (values: Values) => {
+      if (newGeneratedAddresses.length === 0) {
+        triggerErrorToast(
+          'Add and generate addresses with your Ledger device to continue.'
+        )
+        return
+      }
+      await saveAddresses()
+      await triggerResubscribe(values)
+      closeAndReset()
+    },
+    [newGeneratedAddresses, saveAddresses, closeAndReset, triggerResubscribe]
+  )
 
   return (
     <Dialog
@@ -372,6 +385,7 @@ export function WalletAddressesGenerateLedgerDialog({
             )}
           </div>
         </div>
+        <FieldResubscribe form={form} fields={fields} />
       </div>
     </Dialog>
   )