diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx index f47fa81c..51ea6bd0 100644 --- a/src/components/creatorsStaking/Creators/index.tsx +++ b/src/components/creatorsStaking/Creators/index.tsx @@ -188,7 +188,7 @@ const CreatorsSection = () => { useFetchCreatorsSpaces(creatorsSpaceIds) useFetchEraStakes(creatorsSpaceIds, currentEra) useFetchBackerInfoBySpaces(creatorsSpaceIds, myAddress) - useFetchBalanceByNetwork('subsocial', myAddress) + useFetchBalanceByNetwork({ network: 'subsocial', address: myAddress }) return ( diff --git a/src/components/main/TransferPage.tsx b/src/components/main/TransferPage.tsx index 27dca65a..9e62552f 100644 --- a/src/components/main/TransferPage.tsx +++ b/src/components/main/TransferPage.tsx @@ -11,10 +11,12 @@ type TransferPageProps = { asset?: string from?: string to?: string + recipient?: string + amount?: string } const TransferPage: NextPage = (props) => { - const { transferType, asset, from, to } = props + const { transferType, asset, from, to, recipient, amount } = props return ( <> @@ -26,6 +28,8 @@ const TransferPage: NextPage = (props) => { } defaultSelectedToken={{ token: asset || 'DOT', network: from }} to={to} + defaultRecipient={recipient} + amount={amount} /> diff --git a/src/components/transfer/TransferPageLayout.tsx b/src/components/transfer/TransferPageLayout.tsx index 96aff7ba..a4acb8dd 100644 --- a/src/components/transfer/TransferPageLayout.tsx +++ b/src/components/transfer/TransferPageLayout.tsx @@ -19,6 +19,7 @@ type TransferPageLayoutProps = { defaultRecipient?: string transferType?: string to?: string + amount?: string } type Tabs = 'same-chain' | 'cross-chain' @@ -28,7 +29,8 @@ const TransferPageLayout = ({ defaultSelectedToken = DEFAULT_TOKEN, defaultRecipient, transferType, - to + to, + amount, }: TransferPageLayoutProps) => { const { t } = useTranslation() @@ -78,6 +80,7 @@ const TransferPageLayout = ({ }} defaultRecipient={defaultRecipient} onTransferFailed={() => setCurrentState('form')} + defaultAmount={amount} dest={to} onTransferSuccess={() => { setShowSuccessModal(true) diff --git a/src/components/transfer/form-items/AddressFormItem.tsx b/src/components/transfer/form-items/AddressFormItem.tsx index 5dcad59f..9e05a5ea 100644 --- a/src/components/transfer/form-items/AddressFormItem.tsx +++ b/src/components/transfer/form-items/AddressFormItem.tsx @@ -9,6 +9,7 @@ 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 @@ -16,15 +17,21 @@ export type AddressFormItemProps = FormItemProps & { isEthAddress?: boolean validateIsNotSelfErrMsg?: string form: FormInstance + isModal?: boolean } -export function AddressFormItem ({ name, form, ...props }: AddressFormItemProps) { +export function AddressFormItem ({ + name, + form, + ...props +}: AddressFormItemProps) { return ( !checkSameAttributesValues(prev, curr, [ name?.toString() ?? '' ]) - }> + } + > {({ getFieldValue, validateFields, isFieldTouched }) => { const fieldName = name ?? '' const value = getFieldValue(fieldName) @@ -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() @@ -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 = ( {_label} - {showYourAddressTag && {t('transfer.yourAccount')} } + {showYourAddressTag && ( + + {t('transfer.yourAccount')}{' '} + + )} ) return ( - + + disabled={inputProps?.disabled} + value={recipient} + form={form} + withAvatar={false} + revalidate={revalidate} + onSelectAction={onSelectAction} + /> ) } diff --git a/src/components/transfer/form-items/TokenAmountFormItem.tsx b/src/components/transfer/form-items/TokenAmountFormItem.tsx index 9d251bdd..f871c473 100644 --- a/src/components/transfer/form-items/TokenAmountFormItem.tsx +++ b/src/components/transfer/form-items/TokenAmountFormItem.tsx @@ -51,12 +51,13 @@ export type TokenAmountFormItemProps = FormItemProps & { getCrossChainFee?: () => number containerProps?: HTMLProps inputProps?: Omit + defaultAmount?: string } const getTokenData = ( getToken: TokenAmountFormItemProps['getToken'], getSourceChain: TokenAmountFormItemProps['getSourceChain'], - getDestChain: TokenAmountFormItemProps['getDestChain'], + getDestChain: TokenAmountFormItemProps['getDestChain'] ) => { const token = getToken() || '' const sourceChain = getSourceChain() || '' @@ -74,6 +75,7 @@ export function TokenAmountFormItem ({ getCrossChainFee, getSourceChain, getDestChain, + defaultAmount, ...props }: TokenAmountFormItemProps) { const { t } = useTranslation() @@ -81,7 +83,7 @@ export function TokenAmountFormItem ({ const { token, sourceChain, destChain } = getTokenData( getToken, getSourceChain, - getDestChain, + getDestChain ) const { formattedTransferableBalance: currentBalance, tokenDecimal } = useTransferableBalance(token, sourceChain) @@ -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 }) @@ -146,6 +157,7 @@ export function TokenAmountFormItem ({ {...inputProps} disableMaxButton={loading || maxTransfer <= 0} onMaxClick={onMaxClick} + // defaultValue={new BN(defaultAmount || '0').toNumber()} /> @@ -178,11 +190,7 @@ const existentialDepositLink = type ExistentialDepositAlertProps = Pick< TokenAmountFormItemProps, - | 'getDestChain' - | 'getSourceChain' - | 'getToken' - | 'getCrossChainFee' - | 'name' + 'getDestChain' | 'getSourceChain' | 'getToken' | 'getCrossChainFee' | 'name' > & { getFieldValue: (name: NamePath) => any } @@ -201,7 +209,7 @@ function ExistentialDepositAlert ({ const { token, sourceChain, destChain } = getTokenData( getToken, getSourceChain, - getDestChain, + getDestChain ) const crossChainFee = destChain ? getCrossChainFee?.() || 0 : 0 diff --git a/src/components/transfer/transferContent/TransferForm.tsx b/src/components/transfer/transferContent/TransferForm.tsx index 7dcf2f79..a6be7860 100644 --- a/src/components/transfer/transferContent/TransferForm.tsx +++ b/src/components/transfer/transferContent/TransferForm.tsx @@ -64,6 +64,7 @@ export type TransferFormProps = Omit & { isModalVisible?: boolean isModal?: boolean dest?: string + defaultAmount?: string children?: ( formSection: JSX.Element, buttonSection: JSX.Element @@ -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, @@ -88,6 +89,7 @@ export default function TransferForm({ isModalVisible, dest, children, + defaultAmount, ...props }: TransferFormProps) { const { t } = useTranslation() @@ -102,8 +104,8 @@ export default function TransferForm({ const myAddress = useMyAddress() - const [form] = Form.useForm() - const [selectedToken, setSelectedToken] = useState({ + const [ form ] = Form.useForm() + const [ selectedToken, setSelectedToken ] = useState({ network: '', token: '', }) @@ -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 @@ -240,7 +242,7 @@ export default function TransferForm({ useEffect(() => { resetForm() - }, [resetForm]) + }, [ resetForm ]) const onTokenChange = (token: string) => { form.setFieldsValue({ token }) @@ -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) } } @@ -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'), @@ -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'), @@ -434,11 +437,11 @@ export default function TransferForm({ ) return ( ) }} diff --git a/src/components/transfer/utils/index.ts b/src/components/transfer/utils/index.ts index 3ea08d70..8ff8964d 100644 --- a/src/components/transfer/utils/index.ts +++ b/src/components/transfer/utils/index.ts @@ -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 { diff --git a/src/components/utils/inputs/SelectAccountInput.tsx b/src/components/utils/inputs/SelectAccountInput.tsx index 5b62419d..7687996c 100644 --- a/src/components/utils/inputs/SelectAccountInput.tsx +++ b/src/components/utils/inputs/SelectAccountInput.tsx @@ -53,6 +53,7 @@ type SelectAccountInputProps = { disabled?: boolean withAvatar?: boolean revalidate: () => void + onSelectAction?: (value: string) => void } const filterSelectOptions = (adresses: string[], value?: string) => { @@ -77,7 +78,8 @@ export const SelectAccountInput = ({ withAvatar = true, disabled, form, - revalidate + revalidate, + onSelectAction }: SelectAccountInputProps) => { const { extensionStatus } = useMyExtensionAccount() const extensionAddress = useMyExtensionAddresses() @@ -108,6 +110,8 @@ export const SelectAccountInput = ({ const onSelectChange = (value: string) => { form.setFieldsValue({ ['recipient']: value }) + + onSelectAction && onSelectAction(value) } const onSearchHandler = (searchValue: any) => { diff --git a/src/pages/send/[transferType].tsx b/src/pages/send/[transferType].tsx index 7c78c72a..1d8787c4 100644 --- a/src/pages/send/[transferType].tsx +++ b/src/pages/send/[transferType].tsx @@ -5,7 +5,7 @@ import TransferPage from '@/components/main/TransferPage' getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => { fetchData(dispatch) - const { transferType, asset, from, to } = context.query + const { transferType, asset, from, to, recipient, amount } = context.query const assetValue = asset as string @@ -17,6 +17,8 @@ getInitialPropsWithRedux(TransferPage, async ({ dispatch, context }) => { asset: assetValue ? assetValue.toUpperCase() : undefined, from: from as string, to: to as string, + recipient: recipient as string, + amount: amount as string, } }) diff --git a/src/rtk/features/balances/balancesSaga.ts b/src/rtk/features/balances/balancesSaga.ts index 61c97c95..a7764251 100644 --- a/src/rtk/features/balances/balancesSaga.ts +++ b/src/rtk/features/balances/balancesSaga.ts @@ -13,7 +13,7 @@ import { FetchProps, log, isEmptyEntity } from '../../app/util' import { AccountInfoItem } from 'src/components/identity/types' import { setBalancesToStore } from '@/components/table/balancesTable/utils' -function* fetchBalancesWorker(action: PayloadAction) { +function* fetchBalancesWorker (action: PayloadAction) { const { accounts, reload = false } = action.payload try { @@ -51,7 +51,7 @@ function* fetchBalancesWorker(action: PayloadAction) { } } -function* fetchBalancesByNetwork( +function* fetchBalancesByNetwork ( account: string, network: string, reload: boolean @@ -66,7 +66,7 @@ function* fetchBalancesByNetwork( { account, network } ) - const augmentedBalances = [...(balancesEntity.balances ?? [])] + const augmentedBalances = [ ...(balancesEntity.balances ?? []) ] let found = false for (let i = 0; i < augmentedBalances.length; i++) { const balance = augmentedBalances[i] @@ -93,7 +93,7 @@ function* fetchBalancesByNetwork( } } -function* fetchBalancesByNetworkWorker( +function* fetchBalancesByNetworkWorker ( action: PayloadAction ) { const { accounts, network, reload } = action.payload @@ -123,11 +123,11 @@ function* fetchBalancesByNetworkWorker( } } -export function* watchBalances() { +export function* watchBalances () { yield takeEvery(balancesActions.fetchBalances.type, fetchBalancesWorker) } -export function* watchBalancesByNetwork() { +export function* watchBalancesByNetwork () { yield takeEvery( balancesActions.fetchBalanceByNetwork.type, fetchBalancesByNetworkWorker