Feat/optional sender

src/features/accounts/components/transaction-sender-link.tsx

@@ -0,0 +1,38 @@
+import { Nfd } from '@/features/nfd/data/types'
+
+import { PropsWithChildren } from 'react'
+import { AddressOrNfdLink } from './address-or-nfd-link'
+import { Address } from '../data/types'
+import { cn } from '@/features/common/utils'
+
+export type Props = PropsWithChildren<{
+  address: Address
+  short?: boolean
+  className?: string
+  showCopyButton?: boolean
+  showQRButton?: boolean
+  nfd?: Nfd
+  autoPopulated?: boolean
+}>
+
+export default function TransactionSenderLink({ address, short, showCopyButton, showQRButton, nfd, autoPopulated }: Props) {
+  return (
+    <div className="flex items-center">
+      <AddressOrNfdLink
+        address={address}
+        short={short}
+        className={cn(autoPopulated && 'text-yellow-500')}
+        showCopyButton={showCopyButton}
+        showQRButton={showQRButton}
+        nfd={nfd}
+      />
+
+      {autoPopulated && (
+        <span className="group ml-1 cursor-help text-yellow-500">
+          <span>?</span>
+          <div className="absolute z-10 hidden rounded-sm border-2 border-gray-300/20 p-1 group-hover:block">auto populated</div>
+        </span>
+      )}
+    </div>
+  )
+}

src/features/forms/components/address-form-item.tsx

@@ -1,7 +1,7 @@
 import { FieldPath, useFormContext } from 'react-hook-form'
 import { FormItemProps } from '@/features/forms/components/form-item'
 import { TextFormItem } from './text-form-item'
-import { addressFieldSchema, optionalAddressFieldSchema } from '@/features/transaction-wizard/data/common'
+import { addressFieldSchema, optionalAddressFieldSchema, optionalSenderFieldShape } from '@/features/transaction-wizard/data/common'
 import { useDebounce } from 'use-debounce'
 import { isNfd, useLoadableForwardLookupNfdResult } from '@/features/nfd/data'
 import { useCallback, useEffect } from 'react'
@@ -11,6 +11,7 @@ import { z } from 'zod'
 
 export type AddressOrNfdFieldSchema = z.infer<typeof addressFieldSchema>
 export type OptionalAddressOrNfdFieldSchema = z.infer<typeof optionalAddressFieldSchema>
+export type OptionalSenderFieldSchema = z.infer<typeof optionalSenderFieldShape.sender>
 
 export interface AddressFieldProps<TSchema extends Record<string, unknown> = Record<string, unknown>>
   extends Omit<FormItemProps<TSchema>, 'children'> {
@@ -41,9 +42,14 @@ function ResolveNfdAddress({ nfd, onNfdResolved }: ResolveNfdAddressProps) {
 }
 
 export function AddressFormItem({ field, resolvedAddressField, label, ...props }: AddressFormItemProps) {
-  const { watch, setValue } = useFormContext<AddressOrNfdFieldSchema | OptionalAddressOrNfdFieldSchema>()
-  const value = watch(field)
-  const resolvedAddress = watch(resolvedAddressField)
+  const { watch, setValue } = useFormContext<OptionalAddressOrNfdFieldSchema>()
+  const rawValue = watch(field)
+
+  //type guard
+  const value = typeof rawValue === 'string' ? rawValue : ''
+
+  const rawResolved = watch(resolvedAddressField)
+  const resolvedAddress = typeof rawResolved === 'string' ? rawResolved : ''
 
   const setAddress = useCallback((address: string) => setValue(resolvedAddressField, address), [resolvedAddressField, setValue])
   useEffect(() => {

src/features/transaction-wizard/components/account-close-transaction-builder.tsx

@@ -1,5 +1,10 @@
 import { numberSchema } from '@/features/forms/data/common'
-import { addressFieldSchema, commonSchema, optionalAddressFieldSchema, senderFieldSchema } from '../data/common'
+import {
+  addressFieldSchema,
+  commonSchema,
+  optionalAddressFieldSchema,
+  optionalSenderFieldShape,
+} from '@/features/transaction-wizard/data/common'
 import { z } from 'zod'
 import { useCallback, useMemo } from 'react'
 import { zfd } from 'zod-form-data'
@@ -15,8 +20,9 @@ import { TransactionBuilderMode } from '../data'
 import { ZERO_ADDRESS } from '@/features/common/constants'
 import SvgAlgorand from '@/features/common/components/icons/algorand'
 import { TransactionBuilderNoteField } from './transaction-builder-note-field'
-import { asAddressOrNfd, asOptionalAddressOrNfd } from '../mappers/as-address-or-nfd'
+import { asAddressOrNfd, asTransactionSender } from '../mappers/as-address-or-nfd'
 import { ActiveWalletAccount } from '@/features/wallet/types/active-wallet'
+import resolveSenderAddress from '../utils/resolve-sender-address'
 
 const senderLabel = 'Sender'
 const receiverLabel = 'Receiver'
@@ -25,7 +31,7 @@ const closeRemainderToLabel = 'Close remainder to'
 const formSchema = z
   .object({
     ...commonSchema,
-    ...senderFieldSchema,
+    ...optionalSenderFieldShape,
     closeRemainderTo: addressFieldSchema,
     receiver: optionalAddressFieldSchema,
     amount: numberSchema(z.number({ required_error: 'Required', invalid_type_error: 'Required' }).min(0).optional()),
@@ -63,9 +69,9 @@ export function AccountCloseTransactionBuilder({ mode, transaction, activeAccoun
       onSubmit({
         id: transaction?.id ?? randomGuid(),
         type: BuildableTransactionType.AccountClose,
-        sender: data.sender,
+        sender: await resolveSenderAddress(data.sender),
         closeRemainderTo: data.closeRemainderTo,
-        receiver: asOptionalAddressOrNfd(data.receiver),
+        receiver: asAddressOrNfd(data.receiver.value!),
         amount: data.amount,
         fee: data.fee,
         validRounds: data.validRounds,
@@ -77,7 +83,7 @@ export function AccountCloseTransactionBuilder({ mode, transaction, activeAccoun
   const defaultValues = useMemo<Partial<z.infer<typeof formData>>>(() => {
     if (mode === TransactionBuilderMode.Edit && transaction) {
       return {
-        sender: transaction.sender,
+        sender: asTransactionSender(transaction.sender),
         closeRemainderTo: transaction.closeRemainderTo,
         receiver: transaction.receiver,
         amount: transaction.amount,
@@ -114,7 +120,7 @@ export function AccountCloseTransactionBuilder({ mode, transaction, activeAccoun
           {helper.addressField({
             field: 'sender',
             label: senderLabel,
-            helpText: 'Account to be closed. Sends the transaction and pays the fee',
+            helpText: 'Account to be closed. Sends the transaction and pays the fee - optional for simulating ',
             placeholder: ZERO_ADDRESS,
           })}
           {helper.addressField({

src/features/transaction-wizard/components/app-call-transaction-builder.tsx

@@ -1,6 +1,6 @@
 import algosdk from 'algosdk'
 import { bigIntSchema, numberSchema } from '@/features/forms/data/common'
-import { senderFieldSchema, commonSchema, onCompleteFieldSchema, onCompleteOptions } from '@/features/transaction-wizard/data/common'
+import { commonSchema, onCompleteFieldSchema, onCompleteOptions, optionalSenderFieldShape } from '@/features/transaction-wizard/data/common'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
 import { Form } from '@/features/forms/components/form'
@@ -14,12 +14,13 @@ import { BuildAppCallTransactionResult, BuildableTransactionType } from '../mode
 import { randomGuid } from '@/utils/random-guid'
 import { TransactionBuilderMode } from '../data'
 import { TransactionBuilderNoteField } from './transaction-builder-note-field'
-import { asAddressOrNfd } from '../mappers/as-address-or-nfd'
+import { asAddressOrNfd, asTransactionSender } from '../mappers/as-address-or-nfd'
 import { ActiveWalletAccount } from '@/features/wallet/types/active-wallet'
+import resolveSenderAddress from '../utils/resolve-sender-address'
 
 const formData = zfd.formData({
   ...commonSchema,
-  ...senderFieldSchema,
+  ...optionalSenderFieldShape,
   ...onCompleteFieldSchema,
   applicationId: bigIntSchema(z.bigint({ required_error: 'Required', invalid_type_error: 'Required' })),
   extraProgramPages: numberSchema(z.number().min(0).max(3).optional()),
@@ -47,7 +48,7 @@ export function AppCallTransactionBuilder({ mode, transaction, activeAccount, de
         id: transaction?.id ?? randomGuid(),
         type: BuildableTransactionType.AppCall,
         applicationId: BigInt(values.applicationId),
-        sender: values.sender,
+        sender: await resolveSenderAddress(values.sender!),
         onComplete: Number(values.onComplete),
         extraProgramPages: values.extraProgramPages,
         fee: values.fee,
@@ -63,7 +64,7 @@ export function AppCallTransactionBuilder({ mode, transaction, activeAccount, de
     if (mode === TransactionBuilderMode.Edit && transaction) {
       return {
         applicationId: transaction.applicationId !== undefined ? BigInt(transaction.applicationId) : undefined,
-        sender: transaction.sender,
+        sender: asTransactionSender(transaction.sender),
         onComplete: transaction.onComplete.toString(),
         extraProgramPages: transaction.extraProgramPages,
         fee: transaction.fee,
@@ -117,7 +118,7 @@ export function AppCallTransactionBuilder({ mode, transaction, activeAccount, de
           {helper.addressField({
             field: 'sender',
             label: 'Sender',
-            helpText: 'Account to call from. Sends the transaction and pays the fee',
+            helpText: 'Account to call from. Sends the transaction and pays the fee - optional for simulating',
           })}
           {defaultValues.applicationId === 0n &&
             helper.numberField({

src/features/transaction-wizard/components/application-create-transaction-builder.tsx

@@ -1,10 +1,10 @@
 import algosdk from 'algosdk'
 import { numberSchema } from '@/features/forms/data/common'
 import {
-  senderFieldSchema,
   commonSchema,
   onCompleteOptionsForAppCreate,
   onCompleteForAppCreateFieldSchema,
+  optionalSenderFieldShape,
 } from '@/features/transaction-wizard/data/common'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
@@ -19,12 +19,13 @@ import { BuildApplicationCreateTransactionResult, BuildableTransactionType } fro
 import { randomGuid } from '@/utils/random-guid'
 import { TransactionBuilderMode } from '../data'
 import { TransactionBuilderNoteField } from './transaction-builder-note-field'
-import { asAddressOrNfd } from '../mappers/as-address-or-nfd'
+import { asAddressOrNfd, asTransactionSender } from '../mappers/as-address-or-nfd'
 import { ActiveWalletAccount } from '@/features/wallet/types/active-wallet'
+import resolveSenderAddress from '../utils/resolve-sender-address'
 
 const formData = zfd.formData({
   ...commonSchema,
-  ...senderFieldSchema,
+  ...optionalSenderFieldShape,
   ...onCompleteForAppCreateFieldSchema,
   approvalProgram: zfd.text(z.string({ required_error: 'Required', invalid_type_error: 'Required' })),
   clearStateProgram: zfd.text(z.string({ required_error: 'Required', invalid_type_error: 'Required' })),
@@ -57,7 +58,7 @@ export function ApplicationCreateTransactionBuilder({ mode, transaction, activeA
         type: BuildableTransactionType.ApplicationCreate,
         approvalProgram: values.approvalProgram,
         clearStateProgram: values.clearStateProgram,
-        sender: values.sender,
+        sender: await resolveSenderAddress(values.sender!),
         onComplete: Number(values.onComplete),
         extraProgramPages: values.extraProgramPages,
         globalInts: values.globalInts,
@@ -78,7 +79,7 @@ export function ApplicationCreateTransactionBuilder({ mode, transaction, activeA
       return {
         approvalProgram: transaction.approvalProgram,
         clearStateProgram: transaction.clearStateProgram,
-        sender: transaction.sender,
+        sender: asTransactionSender(transaction.sender),
         onComplete: transaction.onComplete.toString(),
         extraProgramPages: transaction.extraProgramPages,
         globalInts: transaction.globalInts,
@@ -140,7 +141,7 @@ export function ApplicationCreateTransactionBuilder({ mode, transaction, activeA
           {helper.addressField({
             field: 'sender',
             label: 'Sender',
-            helpText: 'Account to create from. Sends the transaction and pays the fee',
+            helpText: 'Account to create from. Sends the transaction and pays the fee - optional for simulating',
           })}
           {helper.numberField({
             field: 'globalInts',

src/features/transaction-wizard/components/application-update-transaction-builder.tsx

@@ -1,5 +1,5 @@
 import { bigIntSchema } from '@/features/forms/data/common'
-import { senderFieldSchema, commonSchema } from '@/features/transaction-wizard/data/common'
+import { commonSchema, optionalSenderFieldShape } from '@/features/transaction-wizard/data/common'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
 import { Form } from '@/features/forms/components/form'
@@ -13,12 +13,13 @@ import { BuildApplicationUpdateTransactionResult, BuildableTransactionType } fro
 import { randomGuid } from '@/utils/random-guid'
 import { TransactionBuilderMode } from '../data'
 import { TransactionBuilderNoteField } from './transaction-builder-note-field'
-import { asAddressOrNfd } from '../mappers/as-address-or-nfd'
+import { asAddressOrNfd, asTransactionSender } from '../mappers/as-address-or-nfd'
 import { ActiveWalletAccount } from '@/features/wallet/types/active-wallet'
+import resolveSenderAddress from '../utils/resolve-sender-address'
 
 const formData = zfd.formData({
   ...commonSchema,
-  ...senderFieldSchema,
+  ...optionalSenderFieldShape,
   applicationId: bigIntSchema(z.bigint({ required_error: 'Required', invalid_type_error: 'Required' })),
   approvalProgram: zfd.text(z.string({ required_error: 'Required', invalid_type_error: 'Required' })),
   clearStateProgram: zfd.text(z.string({ required_error: 'Required', invalid_type_error: 'Required' })),
@@ -47,7 +48,7 @@ export function ApplicationUpdateTransactionBuilder({ mode, transaction, activeA
         applicationId: BigInt(values.applicationId),
         approvalProgram: values.approvalProgram,
         clearStateProgram: values.clearStateProgram,
-        sender: values.sender,
+        sender: await resolveSenderAddress(values.sender),
         fee: values.fee,
         validRounds: values.validRounds,
         args: values.args.map((arg) => arg.value),
@@ -63,7 +64,7 @@ export function ApplicationUpdateTransactionBuilder({ mode, transaction, activeA
         applicationId: transaction.applicationId !== undefined ? BigInt(transaction.applicationId) : undefined,
         approvalProgram: transaction.approvalProgram,
         clearStateProgram: transaction.clearStateProgram,
-        sender: transaction.sender,
+        sender: asTransactionSender(transaction.sender),
         fee: transaction.fee,
         validRounds: transaction.validRounds,
         note: transaction.note,
@@ -116,7 +117,7 @@ export function ApplicationUpdateTransactionBuilder({ mode, transaction, activeA
           {helper.addressField({
             field: 'sender',
             label: 'Sender',
-            helpText: 'Account to update from. Sends the transaction and pays the fee',
+            helpText: 'Account to update from. Sends the transaction and pays the fee - optional for simulating',
           })}
           {helper.arrayField({
             field: 'args',

src/features/transaction-wizard/components/asset-clawback-transaction-builder.tsx

@@ -1,5 +1,5 @@
 import { bigIntSchema, decimalSchema } from '@/features/forms/data/common'
-import { addressFieldSchema, commonSchema, receiverFieldSchema, senderFieldSchema } from '../data/common'
+import { addressFieldSchema, commonSchema, optionalSenderFieldShape, receiverFieldSchema } from '../data/common'
 import { z } from 'zod'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { zfd } from 'zod-form-data'
@@ -21,14 +21,15 @@ import { ZERO_ADDRESS } from '@/features/common/constants'
 import { useDebounce } from 'use-debounce'
 import { TransactionBuilderMode } from '../data'
 import { TransactionBuilderNoteField } from './transaction-builder-note-field'
-import { asAddressOrNfd } from '../mappers/as-address-or-nfd'
+import { asAddressOrNfd, asTransactionSender } from '../mappers/as-address-or-nfd'
+import resolveSenderAddress from '../utils/resolve-sender-address'
 
 const clawbackTargetLabel = 'Clawback target'
 
 export const assetClawbackFormSchema = z
   .object({
     ...commonSchema,
-    ...senderFieldSchema,
+    ...optionalSenderFieldShape,
     ...receiverFieldSchema,
     clawbackTarget: addressFieldSchema,
     asset: z
@@ -83,7 +84,7 @@ function FormFields({ helper, asset }: FormFieldsProps) {
       {helper.addressField({
         field: 'sender',
         label: 'Sender',
-        helpText: 'The clawback account of the asset. Sends the transaction and pays the fee',
+        helpText: 'The clawback account of the asset. Sends the transaction and pays the fee - optional for simulating',
         placeholder: ZERO_ADDRESS,
       })}
       {helper.addressField({
@@ -186,7 +187,7 @@ export function AssetClawbackTransactionBuilder({ mode, transaction, onSubmit, o
         id: transaction?.id ?? randomGuid(),
         type: BuildableTransactionType.AssetClawback,
         asset: data.asset,
-        sender: data.sender,
+        sender: await resolveSenderAddress(data.sender),
         receiver: data.receiver,
         clawbackTarget: data.clawbackTarget,
         amount: data.amount!,
@@ -201,7 +202,7 @@ export function AssetClawbackTransactionBuilder({ mode, transaction, onSubmit, o
     if (mode === TransactionBuilderMode.Edit && transaction) {
       return {
         asset: transaction.asset,
-        sender: transaction.sender,
+        sender: asTransactionSender(transaction.sender),
         receiver: transaction.receiver,
         clawbackTarget: transaction.clawbackTarget,
         amount: transaction.amount,