Merge pull request #208 from Wagalidoom/main

feat: add gnosis and chiado network

.gitignore

@@ -13,3 +13,4 @@ dist/
 # For pyinstaller
 build/
 src/scripts/__pycache__/
+src/vendors/*.pyc

src/react/KeyCreationContext.tsx

@@ -61,7 +61,7 @@ const KeyCreationContextWrapper = ({ children }: { children: React.ReactNode}) =
       setMnemonic,
       numberOfKeys,
       setNumberOfKeys,
-      amount,
+      amount: amount,
       setAmount,
       password,
       setPassword,

src/react/components/VerifyMnemonic.tsx

@@ -87,7 +87,7 @@ const VerifyMnemonic = ({
 
   return (
     <Grid container item xs={10} spacing={2}>
-      { network === Network.MAINNET ? (
+      { network === Network.MAINNET || network === Network.GNOSIS ? (
         mnemonicToVerifyArray.map((value, index) => (
           <Grid item xs={2} key={"verify-mnemonic-grid-key-" + index}>
             <TextField

src/react/constants.ts

@@ -1,15 +1,39 @@
 import { StepKey } from './types';
+import { Network, NetworkConfig } from './types';
 
 export const MNEMONIC_ERROR_SEARCH = "That is not a valid mnemonic";
 export const VALID_MNEMONIC_LENGTHS = [12, 15, 18, 21, 24];
 export const ETH_TO_GWEI = 10 ** 9;
 
+export const getDepositAmountLimits = (network: Network) => {
+  const multiplier = NetworkConfig[network].multiplier;
+  return {
+    min: 1 / multiplier,
+    max: 2048 / multiplier,
+  };
+};
+
+export const formatDepositAmountError = (network: Network): string => {
+  const { min, max } = getDepositAmountLimits(network);
+  return `Amount must be between ${min} and ${max}.`;
+};
+
+export const formatAmountTooltip = (network: Network): string => {
+  const { min, max } = getDepositAmountLimits(network);
+  return `Enter the amount you would like to deposit for each validator. This value must be between ${min} and ${max} and can not have greater precision than 1 gwei. You must have withdrawal credentials defined and set "compounding".`;
+};
+
+export const formatCompoundingTooltip = (network: Network): string => {
+  const { max } = getDepositAmountLimits(network);
+  const value = 32 / NetworkConfig[network].multiplier;
+  return `Compounding Credentials increases your maximum effective balance from ${value} to ${max} ETH.`;
+};
+
 export const errors = {
 	MNEMONIC_LENGTH_ERROR: `The Secret Recovery Phrase must be ${VALID_MNEMONIC_LENGTHS.slice(0, -1).join(", ")}, or ${VALID_MNEMONIC_LENGTHS.slice(-1)} words in length. Please verify each word and try again.`,
 	INVALID_MNEMONIC_ERROR: "The Secret Recovery Phrase provided is invalid. Please double check each word for any spelling errors.",
 	MNEMONICS_DONT_MATCH: "The Secret Recovery Phrase you entered does not match what was given to you. Please try again.",
 	NUMBER_OF_KEYS: "Please input a number between 1 and 1000.",
-  DEPOSIT_AMOUNT: "Amount must be between 1 and 2048.",
 	ADDRESS_FORMAT_ERROR: "Please enter a valid Ethereum address.",
 	WITHDRAW_ADDRESS_REQUIRED: "Please enter an Ethereum address.",
 	PASSWORD_STRENGTH: "Password must be at least 12 characters.",
@@ -30,7 +54,6 @@ export const errors = {
 export const tooltips = {
 	IMPORT_MNEMONIC: "If you've already created a Secret Recovery Phrase, you can use it to regenerate your original keys, create more keys, or generate a BLS to execution change by importing the phrase here.",
 	NUMBER_OF_KEYS: "Enter how many new validator keys you'd like to create.",
-  AMOUNT: "Enter the amount you would like to deposit for each validator. This value must be between 1 and 2048 and can not have greater precision than 1 gwei. You must have withdrawal credentials defined and set \"compounding\".",
 	PASSWORD: "Pick a strong password (at least 12 characters) that will be used to protect your keys.",
 	STARTING_INDEX: "Each key is created sequentially, so we need to know how many you've created with this Secret Recovery Phrase in the past in order to create some new ones for you.",
 	ETH1_WITHDRAW_ADDRESS: "An optional Ethereum address for the withdrawal credentials.",
@@ -39,7 +62,6 @@ export const tooltips = {
 	BTEC_START_INDEX: "The index position for the keys to start generating withdrawal credentials. If you only created 1 validator key using this Secret Recovery Phrase, this is likely going to be 0. If you created many validator keys, this could be a higher value from where you want to start in the list of validators derived from your Secret Recovery Phrase.",
 	BTEC_INDICES: "A list of the chosen validator index number(s) as identified on the beacon chain. You can find your validator indice on beaconcha.in website on your validator page. It will be at the top of that page the form of a title like Validator XXXXX, where XXXXX is going to be your indice.",
 	BLS_CREDENTIALS: "A list of the old BLS withdrawal credentials of the given validator(s). You can find your validator BLS withdrawal credentials on beaconcha.in website on your validator page. It will be in the Deposits tab and it should start with 0x00.",
-  COMPOUNDING: "Compounding Credentials increases your maximum effective balance from 32 to 2048 ETH."
 };
 
 export const stepLabels = {
@@ -49,8 +71,8 @@ export const stepLabels = {
 	[StepKey.KeyGeneration]: 'Create Validator Key Files',
 	[StepKey.Finish]: 'Finish',
 	[StepKey.BTECConfiguration]: 'Configure Withdrawal Address',
-  [StepKey.BTECGeneration]: 'Create Credentials Change',
-  [StepKey.FinishBTEC]: 'Finish'
+	[StepKey.BTECGeneration]: 'Create Credentials Change',
+	[StepKey.FinishBTEC]: 'Finish'
 };
 
 export const CreateMnemonicFlow = [StepKey.MnemonicGeneration, StepKey.KeyConfiguration, StepKey.KeyGeneration, StepKey.Finish];

src/react/modals/NetworkPickerModal.tsx

@@ -57,9 +57,11 @@ const NetworkPickerModal = ({onClose, showModal}: NetworkPickerModalParams) => {
         <FormControl variant="standard" focused>
           <RadioGroup aria-label="gender" name="gender1" value={formNetwork} onChange={onNetworkChange}>
             <FormControlLabel value={Network.MAINNET} control={<Radio />} label={Network.MAINNET} />
+            <FormControlLabel value={Network.GNOSIS} control={<Radio />} label={Network.GNOSIS} />
             <Divider />
             <Typography className="tw-text-xl tw-mt-5 tw-mb-4">Testnets</Typography>
             <FormControlLabel value={Network.HOODI} control={<Radio />} label={Network.HOODI} />
+            <FormControlLabel value={Network.CHIADO} control={<Radio />} label={Network.CHIADO} />
           </RadioGroup>
 
           <Button

src/react/pages/ConfigureValidatorKeys.tsx

@@ -16,8 +16,14 @@ import {
   errors,
   paths,
   tooltips,
+  getDepositAmountLimits,
+  formatDepositAmountError,
+  formatAmountTooltip,
+  formatCompoundingTooltip,
 } from "../constants";
+import { GlobalContext } from "../GlobalContext";
 import { KeyCreationContext } from "../KeyCreationContext";
+import { NetworkConfig } from "../types";
 
 /**
  * Form to provide number of keys, index, password, and optional withdrawal address necessary to
@@ -42,9 +48,13 @@ const ConfigureValidatorKeys = () => {
     compounding,
     setCompounding,
   } = useContext(KeyCreationContext);
+  const { network } = useContext(GlobalContext);
   const history = useHistory();
   const usingExistingFlow = history.location.pathname === paths.CONFIGURE_EXISTING;
 
+  // Get dynamic min/max values based on current network
+  const { min: minAmount, max: maxAmount } = getDepositAmountLimits(network);
+
   const [passwordToVerify, setPasswordToVerify] = useState("");
   const [verifyPassword, setVerifyPassword] = useState(false);
   const [passwordVerifyError, setPasswordVerifyError] = useState(false);
@@ -55,7 +65,7 @@ const ConfigureValidatorKeys = () => {
   const [inputIndex, setInputIndex] = useState(index);
   const [inputIndexError, setInputIndexError] = useState(false);
 
-  const [inputAmount, setInputAmount] = useState(amount);
+  const [inputAmount, setInputAmount] = useState(amount / NetworkConfig[network].multiplier);
   const [inputAmountError, setInputAmountError] = useState(false);
 
   const [inputPassword, setInputPassword] = useState(password);
@@ -136,7 +146,7 @@ const ConfigureValidatorKeys = () => {
       setInputIndexError(false);
     }
 
-    if (inputAmount < 1 || inputAmount > 2048) {
+    if (inputAmount < minAmount || inputAmount > maxAmount) {
       setInputAmountError(true);
       isError = true;
     } else {
@@ -277,34 +287,34 @@ const ConfigureValidatorKeys = () => {
                 />
               </Tooltip>
 
-              <Tooltip title={tooltips.COMPOUNDING}>
-                <FormControlLabel
-                  label="Compounding Credentials (0x02) - Must set a valid Withdrawal Address"
-                  control={
-                    <Checkbox
-                      checked={inputCompounding}
-                      disabled={!inputWithdrawalAddress}
-                      onChange={updateCompounding}
-                    />
-                  }
-                />
-              </Tooltip>
-            </div>
-            <Tooltip title={tooltips.AMOUNT}>
-              <TextField
-                className="tw-flex-1"
-                disabled={!inputCompounding}
-                id="amount"
-                label="Deposit Amount"
-                type="number"
-                variant="outlined"
-                value={inputAmount}
-                onChange={updateAmount}
-                error={inputAmountError}
-                helperText={inputAmountError ? errors.DEPOSIT_AMOUNT : ""}
+            <Tooltip title={formatCompoundingTooltip(network)}>
+              <FormControlLabel
+                label="Compounding Credentials (0x02) - Must set a valid Withdrawal Address"
+                control={
+                  <Checkbox
+                    checked={inputCompounding}
+                    disabled={!inputWithdrawalAddress}
+                    onChange={updateCompounding}
+                  />
+                }
               />
             </Tooltip>
           </div>
+          <Tooltip title={formatAmountTooltip(network)}>
+            <TextField
+              className="tw-flex-1"
+              disabled={!inputCompounding}
+              id="amount"
+              label="Deposit Amount"
+              type="number"
+              variant="outlined"
+              value={inputAmount}
+              onChange={updateAmount}
+              error={inputAmountError}
+              helperText={inputAmountError ? formatDepositAmountError(network) : ""}
+            />
+          </Tooltip>
+        </div>
 
           <div className="tw-w-full tw-flex tw-flex-row tw-gap-4">
             <Tooltip title={tooltips.NUMBER_OF_KEYS}>

src/react/pages/CreateValidatorKeys.tsx

@@ -13,6 +13,7 @@ import {
 } from "../constants";
 import { GlobalContext } from "../GlobalContext";
 import { KeyCreationContext } from "../KeyCreationContext";
+import { NetworkConfig } from "../types";
 
 /**
  * Allows the user to select a destination folder for the validator keys.
@@ -61,7 +62,7 @@ const CreateValidatorKeys = () => {
     }
 
     // Convert user provided amount to integer representation of gwei
-    const gweiAmount = parseInt((amount * ETH_TO_GWEI).toString());
+    const gweiAmount = parseInt((amount * NetworkConfig[network].multiplier * ETH_TO_GWEI).toString());
 
     window.eth2Deposit.generateKeys(
       mnemonic,

src/react/types.ts

@@ -23,4 +23,25 @@ export enum ReuseMnemonicAction {
 export enum Network {
   MAINNET = "Mainnet",
   HOODI = "Hoodi",
+  GNOSIS = "Gnosis",
+  CHIADO = "Chiado",
 }
+
+export interface NetworkConfig {
+  multiplier: number;
+}
+
+export const NetworkConfig: Record<Network, NetworkConfig> = {
+  [Network.MAINNET]: {
+    multiplier: 1,
+  },
+  [Network.HOODI]: {
+    multiplier: 1,
+  },
+  [Network.GNOSIS]: {
+    multiplier: 32,
+  },
+  [Network.CHIADO]: {
+    multiplier: 32,
+  },
+};