Remove lightning address domain on paste (#2559)

* Move append logic into transform fn

* Remove lightning address domain on paste

* Fix paste of other values

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 }) {
       </div>
     )
 
-    return { ...props, hint: bottomHint, label, readOnly }
+    let append, onPaste
+    const lud16Domain = walletLud16Domain(wallet.name)
+    if (props.name === 'address' && lud16Domain) {
+      append = <InputGroup.Text className='text-monospace'>@{lud16Domain}</InputGroup.Text>
+      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
+      return <Input {...transform(props)} />
-      const lud16Domain = walletLud16Domain(wallet.name)
-      if (props.name === 'address' && lud16Domain) {
-        append = <InputGroup.Text className='text-monospace'>@{lud16Domain}</InputGroup.Text>
-      }
-      return <Input {...transform(props)} append={append} />
     }
     case 'password':
       return <PasswordInput {...transform(props)} />