Support secp256k1 for numbers

GemWallet · Nov 23, 2024 · dfb4b08 · dfb4b08
1 parent a0c5911
commit dfb4b08
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 16 deletions.
diff --git a/...components/pages/AddNewWallet/ImportNewWallet/ImportSecretNumbers/ImportSecretNumbers.tsx b/...components/pages/AddNewWallet/ImportNewWallet/ImportSecretNumbers/ImportSecretNumbers.tsx
@@ -1,12 +1,14 @@
 import { FC, useCallback, useState, FocusEvent } from 'react';
 
-import { Grid, TextField, Typography } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Checkbox, FormControlLabel, Grid, TextField, Tooltip, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
-import { ERROR_RED, LIST_WALLETS_PATH } from '../../../../../constants';
+import { ERROR_RED, LIST_WALLETS_PATH, SECONDARY_GRAY } from '../../../../../constants';
 import { useWallet } from '../../../../../contexts';
 import { PageWithStepper } from '../../../../templates';
 import styles from './styles.module.css';
+import { ECDSA } from 'xrpl';
 
 const schemaInput = new RegExp(/^[0-9]{6}$/);
 
@@ -36,6 +38,7 @@ export const ImportSecretNumbers: FC<ImportSecretNumbersProps> = ({
 }) => {
   const navigate = useNavigate();
   const { importNumbers } = useWallet();
+  const [isSecp256k1, setSecp256k1] = useState(false);
   const [numbersError, setNumbersError] = useState('');
   const [inputErrors, setInputErrors] = useState<InputErrors>({
     numbersA: '',
@@ -71,7 +74,11 @@ export const ImportSecretNumbers: FC<ImportSecretNumbersProps> = ({
     );
 
     if (numbers.find((number) => !schemaInput.test(number)) === undefined) {
-      const isValidNumbers = importNumbers(password, numbers);
+      const isValidNumbers = importNumbers({
+        password,
+        numbers,
+        algorithm: isSecp256k1 ? ECDSA.secp256k1 : undefined
+      });
       if (isValidNumbers) {
         navigate(LIST_WALLETS_PATH);
       } else if (isValidNumbers === false) {
@@ -80,7 +87,7 @@ export const ImportSecretNumbers: FC<ImportSecretNumbersProps> = ({
         setNumbersError('This wallet is already imported');
       }
     }
-  }, [importNumbers, inputErrors, navigate, password]);
+  }, [importNumbers, inputErrors, isSecp256k1, navigate, password]);
 
   return (
     <PageWithStepper
@@ -249,6 +256,26 @@ export const ImportSecretNumbers: FC<ImportSecretNumbersProps> = ({
       <Typography align="center" variant="caption" display="block" style={{ color: ERROR_RED }}>
         {numbersError}
       </Typography>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={isSecp256k1}
+            onChange={() => setSecp256k1(!isSecp256k1)}
+            name="setSecp256k1"
+            color="primary"
+            style={{ transform: 'scale(0.9)' }}
+          />
+        }
+        label={
+          <Typography style={{ display: 'flex', fontSize: '0.9rem' }} color={SECONDARY_GRAY}>
+            Use "secp256k1" algorithm{' '}
+            <Tooltip title="Note: if you don’t know what it means, you should probably keep it unchecked">
+              <InfoOutlinedIcon style={{ marginLeft: '5px' }} fontSize="small" />
+            </Tooltip>
+          </Typography>
+        }
+        style={{ marginTop: '5px' }}
+      />
     </PageWithStepper>
   );
 };
diff --git a/packages/extension/src/components/pages/ImportSecretNumbers/ImportSecretNumbers.tsx b/packages/extension/src/components/pages/ImportSecretNumbers/ImportSecretNumbers.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useState } from 'react';
 
-import { Wallet } from 'xrpl';
+import { ECDSA, Wallet } from 'xrpl';
 
 import { numbersToSeed, WalletToSave } from '../../../utils';
 import { Congratulations } from '../Congratulations';
@@ -17,12 +17,13 @@ export const ImportSecretNumbers: FC = () => {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   }, []);
 
-  const handleSecretNumbers = useCallback((numbers: string[]) => {
+  const handleSecretNumbers = useCallback((numbers: string[], algorithm: ECDSA | undefined) => {
     const seed = numbersToSeed(numbers);
-    const wallet = Wallet.fromSeed(seed);
+    const wallet = Wallet.fromSeed(seed, { algorithm });
     setWallet({
       publicAddress: wallet.address,
-      seed
+      seed,
+      algorithm
     });
     setActiveStep(1);
   }, []);

diff --git a/packages/extension/src/components/pages/ImportSecretNumbers/SecretNumbers/SecretNumbers.tsx b/packages/extension/src/components/pages/ImportSecretNumbers/SecretNumbers/SecretNumbers.tsx
@@ -1,11 +1,13 @@
 import { FC, useCallback, useState, FocusEvent } from 'react';
 
-import { Grid, TextField, Typography } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Checkbox, FormControlLabel, Grid, TextField, Tooltip, Typography } from '@mui/material';
 
-import { ERROR_RED } from '../../../../constants';
+import { ERROR_RED, SECONDARY_GRAY } from '../../../../constants';
 import { useNetwork, useWallet } from '../../../../contexts';
 import { PageWithStepper } from '../../../templates';
 import styles from './styles.module.css';
+import { ECDSA } from 'xrpl';
 
 const schemaInput = new RegExp(/^[0-9]{6}$/);
 
@@ -26,12 +28,13 @@ export interface SecretNumbersProps {
   activeStep: number;
   steps: number;
   onBack: () => void;
-  onNext: (seed: string[]) => void;
+  onNext: (seed: string[], algorithm: ECDSA | undefined) => void;
 }
 
 export const SecretNumbers: FC<SecretNumbersProps> = ({ activeStep, steps, onBack, onNext }) => {
   const { isValidNumbers } = useWallet();
   const { hasOfflineBanner } = useNetwork();
+  const [isSecp256k1, setSecp256k1] = useState(false);
   const [numbersError, setNumbersError] = useState('');
   const [inputErrors, setInputErrors] = useState<InputErrors>({
     numbersA: '',
@@ -68,12 +71,12 @@ export const SecretNumbers: FC<SecretNumbersProps> = ({ activeStep, steps, onBac
 
     if (numbers.find((number) => !schemaInput.test(number)) === undefined) {
       if (isValidNumbers(numbers)) {
-        onNext(numbers);
+        onNext(numbers, isSecp256k1 ? ECDSA.secp256k1 : undefined);
       } else {
         setNumbersError('Your secret numbers are incorrect.');
       }
     }
-  }, [inputErrors, isValidNumbers, onNext]);
+  }, [inputErrors, isSecp256k1, isValidNumbers, onNext]);
 
   return (
     <PageWithStepper
@@ -246,6 +249,26 @@ export const SecretNumbers: FC<SecretNumbersProps> = ({ activeStep, steps, onBac
       <Typography align="center" variant="caption" display="block" style={{ color: ERROR_RED }}>
         {numbersError}
       </Typography>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={isSecp256k1}
+            onChange={() => setSecp256k1(!isSecp256k1)}
+            name="setSecp256k1"
+            color="primary"
+            style={{ transform: 'scale(0.9)' }}
+          />
+        }
+        label={
+          <Typography style={{ display: 'flex', fontSize: '0.9rem' }} color={SECONDARY_GRAY}>
+            Use "secp256k1" algorithm{' '}
+            <Tooltip title="Note: if you don’t know what it means, you should probably keep it unchecked">
+              <InfoOutlinedIcon style={{ marginLeft: '5px' }} fontSize="small" />
+            </Tooltip>
+          </Typography>
+        }
+        style={{ marginTop: '5px' }}
+      />
     </PageWithStepper>
   );
 };
diff --git a/packages/extension/src/contexts/WalletContext/WalletContext.tsx b/packages/extension/src/contexts/WalletContext/WalletContext.tsx
@@ -33,6 +33,15 @@ type ImportSeedProps = {
   walletName?: string;
   algorithm?: ECDSA;
 };
+
+type ImportNumbersProps = {
+  password: string;
+  numbers: string[];
+  walletName?: string;
+  // Default algorithm is: ed25519
+  algorithm?: ECDSA;
+};
+
 export interface WalletContextType {
   signIn: (password: string, rememberSession?: boolean) => boolean;
   signOut: () => void;
@@ -44,7 +53,12 @@ export interface WalletContextType {
   importMnemonic: (password: string, mnemonic: string, walletName?: string) => boolean | undefined;
   isValidNumbers: (numbers: string[]) => boolean;
   isPasswordCorrect: (password: string) => boolean;
-  importNumbers: (password: string, numbers: string[], walletName?: string) => boolean | undefined;
+  importNumbers: ({
+    password,
+    numbers,
+    walletName,
+    algorithm
+  }: ImportNumbersProps) => boolean | undefined;
   getCurrentWallet: () => WalletLedger | undefined;
   getWalletByPublicAddress: (publicAddress: string) => WalletLedger | undefined;
   renameWallet: (name: string, publicAddress: string) => void;
@@ -257,10 +271,10 @@ const WalletProvider: FC<Props> = ({ children }) => {
   );
 
   const importNumbers = useCallback(
-    (password: string, numbers: string[], walletName?: string) => {
+    ({ password, numbers, walletName, algorithm }: ImportNumbersProps) => {
       try {
         const seed = numbersToSeed(numbers);
-        const wallet = Wallet.fromSeed(seed);
+        const wallet = Wallet.fromSeed(seed, { algorithm });
         if (wallets.filter((w) => w.publicAddress === wallet.address).length > 0) {
           return undefined;
         }