diff --git a/wallets/client/components/form/index.js b/wallets/client/components/form/index.js index f88a4bcc..e766341e 100644 --- a/wallets/client/components/form/index.js +++ b/wallets/client/components/form/index.js @@ -14,6 +14,7 @@ import { TemplateLogsProvider, useTestSendPayment, useWalletLogger, useTestCreat import ArrowRight from '@/svgs/arrow-right-s-fill.svg' import InfoIcon from '@/svgs/information-fill.svg' import Link from 'next/link' +import { useFormikContext } from 'formik' import { WalletMultiStepFormContextProvider, Step, useWallet, useWalletProtocols, useProtocol, useProtocolForm } from './hooks' import { Settings } from './settings' @@ -186,6 +187,7 @@ function WalletProtocolFormNavigator () { function WalletProtocolFormField ({ type, ...props }) { const wallet = useWallet() const [protocol] = useProtocol() + const formik = useFormikContext() function transform ({ validate, encrypt, editable, help, share, ...props }) { const [upperHint, bottomHint] = Array.isArray(props.hint) ? props.hint : [null, props.hint] @@ -221,17 +223,28 @@ function WalletProtocolFormField ({ type, ...props }) { ) - return { ...props, hint: bottomHint, label, readOnly } + let append, onPaste + const lud16Domain = walletLud16Domain(wallet.name) + if (props.name === 'address' && lud16Domain) { + append = @{lud16Domain} + onPaste = (e) => { + e.preventDefault() + const value = (e.clipboardData || window.clipboardData).getData('text') + formik.setFieldValue( + props.name, + value.endsWith(`@${lud16Domain}`) + ? value.slice(0, -`@${lud16Domain}`.length) + : value + ) + } + } + + return { ...props, hint: bottomHint, label, readOnly, append, onPaste } } switch (type) { case 'text': { - let append - const lud16Domain = walletLud16Domain(wallet.name) - if (props.name === 'address' && lud16Domain) { - append = @{lud16Domain} - } - return + return } case 'password': return