Merge pull request #301 from CityOfZion/CU-86a69431g

CU-86a69431g-NEON3 - Implement an icon to paste values into address f…
CityOfZion · Jan 21, 2025 · 7f4655b · 7f4655b
2 parents c1e56e3 + 9a3a198
commit 7f4655b
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 17 deletions.
diff --git a/src/renderer/src/components/Input.tsx b/src/renderer/src/components/Input.tsx
@@ -1,4 +1,5 @@
 import { cloneElement, forwardRef, MouseEvent, useImperativeHandle, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { MdCancel, MdContentCopy, MdContentPasteGo, MdVisibility, MdVisibilityOff } from 'react-icons/md'
 import { StyleHelper } from '@renderer/helpers/StyleHelper'
 import { TestHelper } from '@renderer/helpers/TestHelper'
@@ -50,6 +51,7 @@ export const Input = forwardRef<HTMLInputElement, TInputProps>(
     },
     ref
   ) => {
+    const { t: tCommonGeneral } = useTranslation('common', { keyPrefix: 'general' })
     const isTypePassword = type === 'password'
     const internalRef = useRef<HTMLInputElement>(null)
     const [hidden, setHidden] = useState(isTypePassword)
@@ -172,6 +174,7 @@ export const Input = forwardRef<HTMLInputElement, TInputProps>(
 
               {pastable && (
                 <IconButton
+                  aria-label={tCommonGeneral('pasteFromClipboard')}
                   icon={<MdContentPasteGo aria-hidden={true} />}
                   onClick={handlePaste}
                   colorSchema="neon"

diff --git a/src/renderer/src/components/Textarea.tsx b/src/renderer/src/components/Textarea.tsx
@@ -1,4 +1,5 @@
 import { ChangeEventHandler, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { MdCancel, MdContentPasteGo } from 'react-icons/md'
 import { StyleHelper } from '@renderer/helpers/StyleHelper'
 
@@ -30,6 +31,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TProps>(
     },
     ref
   ) => {
+    const { t: tCommonGeneral } = useTranslation('common', { keyPrefix: 'general' })
     const internalRef = useRef<HTMLTextAreaElement>(null)
 
     const handlePaste = async () => {
@@ -117,10 +119,13 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TProps>(
 
           {pastable && (
             <IconButton
-              icon={<MdContentPasteGo className="text-neon" />}
-              onClick={handlePaste}
+              aria-label={tCommonGeneral('pasteFromClipboard')}
               type="button"
+              colorSchema="neon"
               compacted
+              disabled={props.disabled}
+              icon={<MdContentPasteGo aria-hidden={true} className="text-neon" />}
+              onClick={handlePaste}
             />
           )}
 

diff --git a/src/renderer/src/hooks/usePressOnce.ts b/src/renderer/src/hooks/usePressOnce.ts
@@ -0,0 +1,24 @@
+import { useRef, useState } from 'react'
+
+export const usePressOnce = () => {
+  const [isPressing, setIsPressing] = useState(false)
+  const isPressingRef = useRef(false)
+
+  const handlePressOnce = (callback: (() => void) | (() => Promise<void>)) => async () => {
+    if (isPressing || isPressingRef.current) return
+
+    setIsPressing(true)
+    isPressingRef.current = true
+
+    try {
+      await callback()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsPressing(false)
+      isPressingRef.current = false
+    }
+  }
+
+  return { isPressing, isPressingRef, handlePressOnce }
+}
diff --git a/src/renderer/src/locales/en/common.json b/src/renderer/src/locales/en/common.json
@@ -15,7 +15,9 @@
     "remove": "Remove",
     "copy": "Copy to clipboard",
     "swap": "Swap",
-    "logo": "Neon Wallet's logo"
+    "logo": "Neon Wallet's logo",
+    "pasteFromClipboard": "Paste from clipboard",
+    "pasteFromClipboardError": "Failed to paste from clipboard"
   },
   "walletConnect": {
     "name": "Neon Wallet",

diff --git a/src/renderer/src/routes/modals/AddAddress/index.tsx b/src/renderer/src/routes/modals/AddAddress/index.tsx
@@ -99,6 +99,7 @@ export const AddAddressModal = () => {
             onChange={handleChange}
             clearable
             compacted
+            pastable
             loading={isValidatingAddressOrDomainAddress}
             disabled={!actionData.blockchain}
             error={isValidAddressOrDomainAddress === false}

diff --git a/src/renderer/src/routes/modals/AddCustomNetwork/index.tsx b/src/renderer/src/routes/modals/AddCustomNetwork/index.tsx
@@ -113,6 +113,7 @@ export const AddCustomNetwork = () => {
             compacted
             placeholder={t('urlPlaceholder')}
             label={t('urlLabel')}
+            pastable
             value={actionData.url}
             onChange={setDataFromEventWrapper('url')}
             loading={actionData.validating}

diff --git a/src/renderer/src/routes/modals/DappConnection/index.tsx b/src/renderer/src/routes/modals/DappConnection/index.tsx
@@ -84,6 +84,7 @@ export const DappConnectionModal = () => {
         <Input
           placeholder={t('inputPlaceholder')}
           clearable
+          pastable
           value={actionData.url}
           onChange={handleChange}
           errorMessage={actionState.errors.url}

diff --git a/src/renderer/src/routes/modals/Import/index.tsx b/src/renderer/src/routes/modals/Import/index.tsx
@@ -88,6 +88,7 @@ export const ImportModal = () => {
             onChange={handleChange}
             compacted
             clearable
+            pastable
             multiline={actionData.inputType === 'mnemonic'}
           />
 

diff --git a/src/renderer/src/routes/pages/LoginKey/index.tsx b/src/renderer/src/routes/pages/LoginKey/index.tsx
@@ -59,6 +59,7 @@ export const LoginKeyPage = () => {
             value={actionData.text}
             onChange={handleChange}
             clearable
+            pastable
             multiline={actionData.inputType === 'mnemonic'}
             {...TestHelper.buildTestObject('login-key-textarea')}
           />

diff --git a/src/renderer/src/routes/pages/Send/SendRecipient.tsx b/src/renderer/src/routes/pages/Send/SendRecipient.tsx
@@ -151,6 +151,7 @@ export const SendRecipient = ({
               className="w-full"
               placeholder={t('addressPlaceholder')}
               clearable={false}
+              pastable
               buttons={
                 <IconButton
                   icon={<TbUsers aria-hidden={true} />}

diff --git a/src/renderer/src/routes/pages/Settings/SettingsEncryptKey/index.tsx b/src/renderer/src/routes/pages/Settings/SettingsEncryptKey/index.tsx
@@ -110,6 +110,7 @@ export const SettingsEncryptKeyPage = (): JSX.Element => {
           <div className="flex flex-col gap-4">
             <SettingsEncryptInputStep
               step={1}
+              pastable
               description={t('encryptKey.titleInput1')}
               placeholder={t('encryptKey.inputPrivateKeyPlaceholder')}
               onChange={handlePrivateKeyChange}

diff --git a/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx b/src/renderer/src/routes/pages/Swap/SwapPageContent.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, Fragment, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MdInfoOutline, MdRestartAlt } from 'react-icons/md'
+import { MdContentPasteGo, MdInfoOutline, MdRestartAlt } from 'react-icons/md'
 import { TbDiamond, TbHelp, TbReplace, TbStepInto, TbStepOut, TbUsers, TbWallet } from 'react-icons/tb'
 import { VscCircleFilled } from 'react-icons/vsc'
 import {
@@ -35,6 +35,7 @@ import { useCurrentLoginSessionSelector } from '@renderer/hooks/useAuthSelector'
 import { useBalance } from '@renderer/hooks/useBalances'
 import { useHasContactsByBlockchain } from '@renderer/hooks/useContactSelector'
 import { useModalNavigate } from '@renderer/hooks/useModalRouter'
+import { usePressOnce } from '@renderer/hooks/usePressOnce'
 import { useAppDispatch } from '@renderer/hooks/useRedux'
 import { useSelectedNetworkByBlockchainSelector } from '@renderer/hooks/useSettingsSelector'
 import { bsAggregator, doesBlockchainSupported } from '@renderer/libs/blockchainService'
@@ -63,11 +64,13 @@ type TProps = {
 
 export const SwapPageContent = ({ account }: TProps) => {
   const { t } = useTranslation('pages', { keyPrefix: 'swap' })
+  const { t: tCommonGeneral } = useTranslation('common', { keyPrefix: 'general' })
   const { modalNavigateWrapper, modalNavigate } = useModalNavigate()
   const { networkByBlockchain } = useSelectedNetworkByBlockchainSelector()
   const { currentLoginSessionRef } = useCurrentLoginSessionSelector()
   const { accounts } = useAccountsSelector()
   const dispatch = useAppDispatch()
+  const pressOncePasteAddressToReceive = usePressOnce()
 
   const swapChainsByServiceName = useMemo(() => {
     const chainsByServiceName: Partial<Record<TBlockchainServiceKey, string[]>> = {}
@@ -277,6 +280,17 @@ export const SwapPageContent = ({ account }: TProps) => {
     swapServiceRef.current.setExtraIdToReceive(event.target.value)
   }
 
+  const handlePasteAddressToReceive = async () => {
+    try {
+      const text = await navigator.clipboard.readText()
+
+      await swapServiceRef.current!.setAddressToReceive(text)
+    } catch (error) {
+      ToastHelper.error({ message: tCommonGeneral('pasteFromClipboardError') })
+      console.error(error)
+    }
+  }
+
   const handleChangeAmountToUse = (event: ChangeEvent<HTMLInputElement>) => {
     const amount = NumberHelper.formatString(event.target.value, actionData.selectedTokenToUse.value?.decimals, 24)
 
@@ -649,19 +663,31 @@ export const SwapPageContent = ({ account }: TProps) => {
                 placeholder={t('form.addressToReceivePlaceholder')}
                 clearable={false}
                 buttons={
-                  <IconButton
-                    icon={<TbUsers aria-hidden={true} className="w-5 h-5 min-w-5 min-h-5" />}
-                    colorSchema="neon"
-                    type="button"
-                    onClick={modalNavigateWrapper('select-contact', {
-                      state: {
-                        onSelectContact: handleSelectContactToReceive,
-                        blockchain: tokenToReceiveBlockchain,
-                      },
-                    })}
-                    compacted
-                    disabled={isContactsAndAccountsSelectionDisabled || !hasContactsByBlockchain}
-                  />
+                  <Fragment>
+                    <IconButton
+                      aria-label={tCommonGeneral('pasteFromClipboard')}
+                      colorSchema="neon"
+                      type="button"
+                      compacted
+                      disabled={isRecipientDisabled || pressOncePasteAddressToReceive.isPressing}
+                      icon={<MdContentPasteGo aria-hidden={true} className="w-5 h-5 min-w-5 min-h-5" />}
+                      onClick={pressOncePasteAddressToReceive.handlePressOnce(handlePasteAddressToReceive)}
+                    />
+
+                    <IconButton
+                      icon={<TbUsers aria-hidden={true} className="w-5 h-5 min-w-5 min-h-5" />}
+                      colorSchema="neon"
+                      type="button"
+                      onClick={modalNavigateWrapper('select-contact', {
+                        state: {
+                          onSelectContact: handleSelectContactToReceive,
+                          blockchain: tokenToReceiveBlockchain,
+                        },
+                      })}
+                      compacted
+                      disabled={isContactsAndAccountsSelectionDisabled || !hasContactsByBlockchain}
+                    />
+                  </Fragment>
                 }
                 loading={actionData.selectedAddressToReceive.loading}
                 errorMessage={

diff --git a/src/shared/@types/i18next-resources.d.ts b/src/shared/@types/i18next-resources.d.ts
@@ -17,6 +17,8 @@ interface Resources {
       copy: 'Copy to clipboard'
       swap: 'Swap'
       logo: "Neon Wallet's logo"
+      pasteFromClipboard: 'Paste from clipboard'
+      pasteFromClipboardError: 'Failed to paste from clipboard'
     }
     walletConnect: {
       name: 'Neon Wallet'