Skip to content

Commit

Permalink
Add default amount and recipient
Browse files Browse the repository at this point in the history
  • Loading branch information
samchuk-vlad committed Dec 12, 2023
1 parent aad4c52 commit f93c7b7
Show file tree
Hide file tree
Showing 10 changed files with 97 additions and 44 deletions.
2 changes: 1 addition & 1 deletion src/components/creatorsStaking/Creators/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const CreatorsSection = () => {
useFetchCreatorsSpaces(creatorsSpaceIds)
useFetchEraStakes(creatorsSpaceIds, currentEra)
useFetchBackerInfoBySpaces(creatorsSpaceIds, myAddress)
useFetchBalanceByNetwork('subsocial', myAddress)
useFetchBalanceByNetwork({ network: 'subsocial', address: myAddress })

return (
<ModalContextWrapper>
Expand Down
6 changes: 5 additions & 1 deletion src/components/main/TransferPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ type TransferPageProps = {
asset?: string
from?: string
to?: string
recipient?: string
amount?: string
}

const TransferPage: NextPage<TransferPageProps> = (props) => {
const { transferType, asset, from, to } = props
const { transferType, asset, from, to, recipient, amount } = props

return (
<>
Expand All @@ -26,6 +28,8 @@ const TransferPage: NextPage<TransferPageProps> = (props) => {
}
defaultSelectedToken={{ token: asset || 'DOT', network: from }}
to={to}
defaultRecipient={recipient}
amount={amount}
/>
</PageContent>
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/components/transfer/TransferPageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ type TransferPageLayoutProps = {
defaultRecipient?: string
transferType?: string
to?: string
amount?: string
}

type Tabs = 'same-chain' | 'cross-chain'
Expand All @@ -28,7 +29,8 @@ const TransferPageLayout = ({
defaultSelectedToken = DEFAULT_TOKEN,
defaultRecipient,
transferType,
to
to,
amount,
}: TransferPageLayoutProps) => {
const { t } = useTranslation()

Expand Down Expand Up @@ -78,6 +80,7 @@ const TransferPageLayout = ({
}}
defaultRecipient={defaultRecipient}
onTransferFailed={() => setCurrentState('form')}
defaultAmount={amount}
dest={to}
onTransferSuccess={() => {
setShowSuccessModal(true)
Expand Down
55 changes: 42 additions & 13 deletions src/components/transfer/form-items/AddressFormItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,29 @@ import { toGenericAccountId } from 'src/rtk/app/util'
import { useTranslation } from 'react-i18next'
import { useEffect } from 'react'
import SelectAccountInput from '../../utils/inputs/SelectAccountInput'
import { useRouter } from 'next/router'

export type AddressFormItemProps = FormItemProps & {
inputProps?: InputProps
isRequired?: boolean
isEthAddress?: boolean
validateIsNotSelfErrMsg?: string
form: FormInstance<any>
isModal?: boolean
}

export function AddressFormItem ({ name, form, ...props }: AddressFormItemProps) {
export function AddressFormItem ({
name,
form,
...props
}: AddressFormItemProps) {
return (
<Form.Item
noStyle
shouldUpdate={(prev, curr) =>
!checkSameAttributesValues(prev, curr, [ name?.toString() ?? '' ])
}>
}
>
{({ getFieldValue, validateFields, isFieldTouched }) => {
const fieldName = name ?? ''
const value = getFieldValue(fieldName)
Expand Down Expand Up @@ -56,12 +63,14 @@ function AddressInput ({
recipient,
revalidate,
form,
isModal,
label: _label,
...props
}: AddressFormItemProps & { recipient: string; revalidate: () => void }) {
const { t } = useTranslation()
const myAddress = useMyAddress()
const isMyAddress = useIsMyConnectedAddress(recipient)
const router = useRouter()

useEffect(() => {
revalidate()
Expand Down Expand Up @@ -95,26 +104,46 @@ function AddressInput ({
}),
]

const onSelectAction = (value: string) => {
if (!isModal) {
const recipient = value ? { recipient: value } : { }

if(!value) {
delete router.query.recipient
}

router.replace({
pathname: router.pathname,
query: {
...router.query,
...recipient,
},
})
}
}

const showYourAddressTag = isMyAddress && !validateIsNotSelfErrMsg
const label = (
<span>
{_label}
{showYourAddressTag && <Tag color='green' className='ml-1'>{t('transfer.yourAccount')} </Tag>}
{showYourAddressTag && (
<Tag color='green' className='ml-1'>
{t('transfer.yourAccount')}{' '}
</Tag>
)}
</span>
)

return (
<Form.Item
{...props}
label={label}
rules={augmentedRules}>
<Form.Item {...props} label={label} rules={augmentedRules}>
<SelectAccountInput
disabled={inputProps?.disabled}
value={recipient}
form={form}
withAvatar={false}
revalidate={revalidate}
/>
disabled={inputProps?.disabled}
value={recipient}
form={form}
withAvatar={false}
revalidate={revalidate}
onSelectAction={onSelectAction}
/>
</Form.Item>
)
}
24 changes: 16 additions & 8 deletions src/components/transfer/form-items/TokenAmountFormItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,13 @@ export type TokenAmountFormItemProps = FormItemProps & {
getCrossChainFee?: () => number
containerProps?: HTMLProps<HTMLDivElement>
inputProps?: Omit<TokenAmountInputProps, 'onMaxClick'>
defaultAmount?: string
}

const getTokenData = (
getToken: TokenAmountFormItemProps['getToken'],
getSourceChain: TokenAmountFormItemProps['getSourceChain'],
getDestChain: TokenAmountFormItemProps['getDestChain'],
getDestChain: TokenAmountFormItemProps['getDestChain']
) => {
const token = getToken() || ''
const sourceChain = getSourceChain() || ''
Expand All @@ -74,14 +75,15 @@ export function TokenAmountFormItem ({
getCrossChainFee,
getSourceChain,
getDestChain,
defaultAmount,
...props
}: TokenAmountFormItemProps) {
const { t } = useTranslation()
const { setFieldsValue } = form
const { token, sourceChain, destChain } = getTokenData(
getToken,
getSourceChain,
getDestChain,
getDestChain
)
const { formattedTransferableBalance: currentBalance, tokenDecimal } =
useTransferableBalance(token, sourceChain)
Expand Down Expand Up @@ -112,6 +114,15 @@ export function TokenAmountFormItem ({
form.validateFields([ props.name ])
}, [ form, maxTransfer ])

useEffect(() => {
const name = props.name?.toString()
if (name) {
if (defaultAmount)
setFieldsValue({ ['amount']: parseFloat(defaultAmount) })
form.validateFields([ name ])
}
}, [ maxTransfer, defaultAmount ])

const onMaxClick = () => {
const name = props.name?.toString()
if (name) setFieldsValue({ [name]: maxTransfer })
Expand Down Expand Up @@ -146,6 +157,7 @@ export function TokenAmountFormItem ({
{...inputProps}
disableMaxButton={loading || maxTransfer <= 0}
onMaxClick={onMaxClick}
// defaultValue={new BN(defaultAmount || '0').toNumber()}
/>
</Form.Item>
<Form.Item noStyle shouldUpdate>
Expand Down Expand Up @@ -178,11 +190,7 @@ const existentialDepositLink =

type ExistentialDepositAlertProps = Pick<
TokenAmountFormItemProps,
| 'getDestChain'
| 'getSourceChain'
| 'getToken'
| 'getCrossChainFee'
| 'name'
'getDestChain' | 'getSourceChain' | 'getToken' | 'getCrossChainFee' | 'name'
> & {
getFieldValue: (name: NamePath) => any
}
Expand All @@ -201,7 +209,7 @@ function ExistentialDepositAlert ({
const { token, sourceChain, destChain } = getTokenData(
getToken,
getSourceChain,
getDestChain,
getDestChain
)
const crossChainFee = destChain ? getCrossChainFee?.() || 0 : 0

Expand Down
25 changes: 14 additions & 11 deletions src/components/transfer/transferContent/TransferForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export type TransferFormProps = Omit<FormProps, 'form' | 'children'> & {
isModalVisible?: boolean
isModal?: boolean
dest?: string
defaultAmount?: string
children?: (
formSection: JSX.Element,
buttonSection: JSX.Element
Expand All @@ -77,7 +78,7 @@ export const DEFAULT_TOKEN = {
type SelectedTokenChainData = TokenData & {
dest?: string
}
export default function TransferForm({
export default function TransferForm ({
defaultSelectedToken = DEFAULT_TOKEN,
defaultRecipient,
crossChain,
Expand All @@ -88,6 +89,7 @@ export default function TransferForm({
isModalVisible,
dest,
children,
defaultAmount,
...props
}: TransferFormProps) {
const { t } = useTranslation()
Expand All @@ -102,8 +104,8 @@ export default function TransferForm({

const myAddress = useMyAddress()

const [form] = Form.useForm()
const [selectedToken, setSelectedToken] = useState<SelectedTokenChainData>({
const [ form ] = Form.useForm()
const [ selectedToken, setSelectedToken ] = useState<SelectedTokenChainData>({
network: '',
token: '',
})
Expand Down Expand Up @@ -137,16 +139,16 @@ export default function TransferForm({

if (crossChain && !recipient) {
form.setFieldsValue({ [transferFormField('recipient')]: myAddress })
form.validateFields([transferFormField('recipient')])
form.validateFields([ transferFormField('recipient') ])
} else if (!crossChain) {
const isMyAddress =
toGenericAccountId(myAddress) === toGenericAccountId(recipient)
if (isMyAddress) {
form.setFieldsValue({ [transferFormField('recipient')]: '' })
form.validateFields([transferFormField('recipient')])
form.validateFields([ transferFormField('recipient') ])
}
}
}, [crossChain])
}, [ crossChain ])

const resetForm = useCallback(() => {
if (!defaultSelectedToken) return
Expand Down Expand Up @@ -240,7 +242,7 @@ export default function TransferForm({

useEffect(() => {
resetForm()
}, [resetForm])
}, [ resetForm ])

const onTokenChange = (token: string) => {
form.setFieldsValue({ token })
Expand Down Expand Up @@ -316,12 +318,12 @@ export default function TransferForm({
if (!myAddress || !submittedData.current) return
const { sourceChain, destChain, recipient, sender } = submittedData.current
if (sourceChain) {
fetchBalanceByNetwork(dispatch, [sender], sourceChain)
fetchBalanceByNetwork(dispatch, [ sender ], sourceChain)
}
if (destChain) {
const WAIT_TIME = 30 * 1000 // 30 seconds
setTimeout(() => {
fetchBalanceByNetwork(dispatch, [recipient], destChain)
fetchBalanceByNetwork(dispatch, [ recipient ], destChain)
}, WAIT_TIME)
}
}
Expand All @@ -337,7 +339,7 @@ export default function TransferForm({
getCrossChainFee: () => getCrossChainFee(form).balance,
}

const requiredTouchedFields = [transferFormField('amount')]
const requiredTouchedFields = [ transferFormField('amount') ]
if (crossChain) {
requiredTouchedFields.push(
transferFormField('source'),
Expand Down Expand Up @@ -399,6 +401,7 @@ export default function TransferForm({
form={form}
name={transferFormField('amount')}
label={t('transfer.amount')}
defaultAmount={defaultAmount}
inputProps={{
size: 'large',
placeholder: t('transfer.placeholders.amount'),
Expand Down Expand Up @@ -434,11 +437,11 @@ export default function TransferForm({
)
return (
<RecipientInput
inputProps={{ disabled: !!defaultRecipient }}
name={transferFormField('recipient')}
disableTransferToSelf={!crossChain}
destChain={destChain || sourceChain}
form={form}
isModal={isModal}
/>
)
}}
Expand Down
2 changes: 1 addition & 1 deletion src/components/transfer/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export type FormFields = {
export const transferFormField = (name: keyof FormFields) => name

type MinimalFormInstance = { getFieldsValue: FormInstance['getFieldsValue'] }
export function getTransferFormData(
export function getTransferFormData (
form: MinimalFormInstance,
crossChain: boolean
): TransferFormData {
Expand Down
6 changes: 5 additions & 1 deletion src/components/utils/inputs/SelectAccountInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ type SelectAccountInputProps = {
disabled?: boolean
withAvatar?: boolean
revalidate: () => void
onSelectAction?: (value: string) => void
}

const filterSelectOptions = (adresses: string[], value?: string) => {
Expand All @@ -77,7 +78,8 @@ export const SelectAccountInput = ({
withAvatar = true,
disabled,
form,
revalidate
revalidate,
onSelectAction
}: SelectAccountInputProps) => {
const { extensionStatus } = useMyExtensionAccount()
const extensionAddress = useMyExtensionAddresses()
Expand Down Expand Up @@ -108,6 +110,8 @@ export const SelectAccountInput = ({

const onSelectChange = (value: string) => {
form.setFieldsValue({ ['recipient']: value })

onSelectAction && onSelectAction(value)
}

const onSearchHandler = (searchValue: any) => {
Expand Down
Loading

0 comments on commit f93c7b7

Please sign in to comment.