Allow to use eth private key that starts with 0x

.changelog/1923.feature.md

@@ -0,0 +1 @@
+Allow to use eth private key that starts with 0x

src/app/lib/eth-helpers.ts

@@ -1,7 +1,7 @@
 import * as oasis from '@oasisprotocol/client'
 import * as oasisRT from '@oasisprotocol/client-rt'
 import { bytesToHex, isValidPrivate, privateToAddress, toChecksumAddress } from '@ethereumjs/util'
-export { isValidAddress as isValidEthAddress } from '@ethereumjs/util'
+export { isValidAddress as isValidEthAddress, stripHexPrefix } from '@ethereumjs/util'
 
 export const hexToBuffer = (value: string): Buffer => Buffer.from(value, 'hex')
 export const isValidEthPrivateKey = (ethPrivateKey: string): boolean => {

src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/index.test.tsx

@@ -25,7 +25,7 @@ describe('<TransactionRecipient />', () => {
     ticker: 'ROSE',
     transactionForm: {
       recipient: '',
-      ethPrivateKey: '',
+      ethPrivateRawKey: '',
     },
     usesOasisAddress: true,
   } as ParaTimesHook
@@ -123,7 +123,7 @@ describe('<TransactionRecipient />', () => {
       ...mockUseParaTimesEVMcResult,
       transactionForm: {
         ...mockUseParaTimesEVMcResult.transactionForm,
-        ethPrivateKey: '123',
+        ethPrivateRawKey: '123',
       },
     })
     jest.mocked(useParaTimesNavigation).mockReturnValue({
@@ -144,7 +144,7 @@ describe('<TransactionRecipient />', () => {
       ...mockUseParaTimesEVMcResult,
       transactionForm: {
         ...mockUseParaTimesEVMcResult.transactionForm,
-        ethPrivateKey: '----------------------------------------------------------------',
+        ethPrivateRawKey: '----------------------------------------------------------------',
       },
     })
     jest.mocked(useParaTimesNavigation).mockReturnValue({
@@ -160,11 +160,16 @@ describe('<TransactionRecipient />', () => {
   })
 
   it('should navigate to amount selection step when address is valid', async () => {
+    const ethPrivateKey = mockUseParaTimesEVMcResult.evmAccounts[0].ethPrivateKey
+    const ethPrivateKeyWith0xPrefix = `0x${ethPrivateKey}`
+    const setTransactionForm = jest.fn()
     const navigateToAmount = jest.fn()
     jest.mocked(useParaTimes).mockReturnValue({
       ...mockUseParaTimesResult,
+      setTransactionForm,
       transactionForm: {
         recipient: 'oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe',
+        ethPrivateRawKey: ethPrivateKeyWith0xPrefix,
       },
     } as ParaTimesHook)
     jest.mocked(useParaTimesNavigation).mockReturnValue({
@@ -175,6 +180,11 @@ describe('<TransactionRecipient />', () => {
 
     await userEvent.click(screen.getByRole('button', { name: 'Next' }))
 
+    expect(setTransactionForm).toHaveBeenCalledWith({
+      ethPrivateKey: ethPrivateKey,
+      ethPrivateRawKey: ethPrivateKeyWith0xPrefix,
+      recipient: 'oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe',
+    })
     expect(navigateToAmount).toHaveBeenCalled()
   })
 

src/app/pages/ParaTimesPage/TransactionRecipient/index.tsx

@@ -13,6 +13,7 @@ import { useParaTimes } from '../useParaTimes'
 import { useParaTimesNavigation } from '../useParaTimesNavigation'
 import { PasswordField } from 'app/components/PasswordField'
 import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
+import { stripHexPrefix } from '../../../lib/eth-helpers'
 
 export const TransactionRecipient = () => {
   const { t } = useTranslation()
@@ -65,29 +66,35 @@ export const TransactionRecipient = () => {
         onChange={nextValue =>
           setTransactionForm({
             ...nextValue,
-            ethPrivateKey:
-              typeof nextValue.ethPrivateKey === 'object'
-                ? (nextValue.ethPrivateKey as any).value // from suggestions
-                : nextValue.ethPrivateKey,
+            ethPrivateRawKey:
+              typeof nextValue.ethPrivateRawKey === 'object'
+                ? (nextValue.ethPrivateRawKey as any).value // from suggestions
+                : nextValue.ethPrivateRawKey,
           })
         }
-        onSubmit={navigateToAmount}
+        onSubmit={formData => {
+          setTransactionForm({
+            ...formData.value,
+            ethPrivateKey: stripHexPrefix(formData.value.ethPrivateRawKey),
+          })
+          navigateToAmount()
+        }}
         value={transactionForm}
         style={{ width: isMobile ? '100%' : '465px' }}
         {...preventSavingInputsToUserData}
       >
         <Box margin={{ bottom: 'medium' }}>
           {isEvmcParaTime && !isDepositing && (
             <PasswordField
-              inputElementId="ethPrivateKey"
-              name="ethPrivateKey"
-              validate={ethPrivateKey =>
-                !isValidEthPrivateKeyLength(ethPrivateKey)
+              inputElementId="ethPrivateRawKey"
+              name="ethPrivateRawKey"
+              validate={ethPrivateRawKey =>
+                !isValidEthPrivateKeyLength(stripHexPrefix(ethPrivateRawKey))
                   ? t(
                       'paraTimes.validation.invalidEthPrivateKeyLength',
                       'Private key should be 64 characters long',
                     )
-                  : !isValidEthPrivateKey(ethPrivateKey)
+                  : !isValidEthPrivateKey(stripHexPrefix(ethPrivateRawKey))
                   ? t(
                       'paraTimes.validation.invalidEthPrivateKey',
                       'Ethereum-compatible private key is invalid',
@@ -98,7 +105,7 @@ export const TransactionRecipient = () => {
                 'paraTimes.recipient.ethPrivateKeyPlaceholder',
                 'Enter Ethereum-compatible private key',
               )}
-              value={transactionForm.ethPrivateKey}
+              value={transactionForm.ethPrivateRawKey}
               showTip={t('openWallet.privateKey.showPrivateKey', 'Show private key')}
               hideTip={t('openWallet.privateKey.hidePrivateKey', 'Hide private key')}
               suggestions={evmAccounts.map(acc => ({ label: acc.ethAddress, value: acc.ethPrivateKey }))}

src/app/state/paratimes/index.ts

@@ -14,6 +14,7 @@ export const initialState: ParaTimesState = {
     confirmTransferToForeignAccount: false,
     defaultFeeAmount: '',
     ethPrivateKey: '',
+    ethPrivateRawKey: '',
     feeAmount: '',
     feeGas: '',
     paraTime: undefined,

src/app/state/paratimes/types.ts

@@ -23,7 +23,10 @@ export interface TransactionForm {
   confirmTransferToValidator: boolean
   confirmTransferToForeignAccount: boolean
   defaultFeeAmount: string
+  // compatible with oasisRT.signatureSecp256k1
   ethPrivateKey: string
+  // provided by user and used in form inputs allowing back and forth form navigation
+  ethPrivateRawKey: string
   feeAmount: string
   feeGas: string
   paraTime?: ParaTime

src/utils/__fixtures__/test-inputs.ts

@@ -80,6 +80,7 @@ export const privateKeyUnlockedState = {
       confirmTransferToForeignAccount: false,
       defaultFeeAmount: '',
       ethPrivateKey: '',
+      ethPrivateRawKey: '',
       feeAmount: '',
       feeGas: '',
       paraTime: undefined,
@@ -268,6 +269,7 @@ export const walletExtensionV0UnlockedState = {
       confirmTransferToForeignAccount: false,
       defaultFeeAmount: '',
       ethPrivateKey: '',
+      ethPrivateRawKey: '',
       feeAmount: '',
       feeGas: '',
       paraTime: undefined,