Pectra Validator EL Actions

.env.template

@@ -12,6 +12,12 @@ REACT_APP_IS_MAINNET=true
 REACT_APP_FORTMATIC_KEY=pk_test_D113D979E0D3508F
 # string
 REACT_APP_CONTRACT_ADDRESS=0x00000000219ab540356cBB839Cbe05303d7705Fa
+# string
+# TODO: Replace with Mainnet address
+REACT_APP_COMPOUNDING_CONTRACT_ADDRESS=0x00431F263cE400f4455c2dCf564e53007Ca4bbBb
+# string
+# TODO: Replace with Mainnet address
+REACT_APP_WITHDRAWAL_CONTRACT_ADDRESS=0x0c15F14308530b7CDB8460094BbB9cC28b9AaaAA
 # number
 REACT_APP_ETH_REQUIREMENT=524288
 # number
@@ -35,6 +41,12 @@ REACT_APP_IS_MAINNET=false
 # string
 REACT_APP_CONTRACT_ADDRESS=0x4242424242424242424242424242424242424242
 # string
+# TODO: Replace with Holesky address
+REACT_APP_COMPOUNDING_CONTRACT_ADDRESS=0x00431F263cE400f4455c2dCf564e53007Ca4bbBb
+# string
+# TODO: Replace with Holesky address
+REACT_APP_WITHDRAWAL_CONTRACT_ADDRESS=0x0c15F14308530b7CDB8460094BbB9cC28b9AaaAA
+# string
 REACT_APP_RPC_URL=https://rpc.holesky.ethpandaops.io
 # string
 REACT_APP_BEACONCHAIN_URL=https://holesky.beaconcha.in

package.json

@@ -55,6 +55,7 @@
     "tiny-invariant": "^1.1.0",
     "typescript": "^3.8.3",
     "web3": "^1.7.5",
+    "web3-core": "^1.7.5",
     "web3-utils": "^1.2.6",
     "yarn": "^1.22.13"
   },

src/Routes.tsx

@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 import { supportedLanguages } from './intl';
 import {
   AcknowledgementPage,
+  ActionsPage,
   CongratulationsPage,
   ConnectWalletPage,
   SelectClientPage,
@@ -70,6 +71,7 @@ export enum routesEnum {
   languagesPage = '/languages',
   withdrawals = '/withdrawals',
   btecGuide = '/btec',
+  actionsPage = '/validator-actions',
 }
 const routes: RouteType[] = [
   {
@@ -126,6 +128,7 @@ const routes: RouteType[] = [
   { path: routesEnum.topUpPage, exact: true, component: TopUpPage },
   { path: routesEnum.withdrawals, exact: true, component: Withdrawals },
   { path: routesEnum.btecGuide, exact: true, component: BtecGuide },
+  { path: routesEnum.actionsPage, exact: true, component: ActionsPage },
   { path: routesEnum.landingPage, exact: true, component: LandingPage },
   // NOTE: this wildcard route must be the last index of the routes array
   { path: routesEnum.notFoundPage, component: NotFoundPage },

src/components/AppBar.tsx

@@ -300,6 +300,16 @@ const _AppBar = ({ location }: RouteComponentProps) => {
             <FormattedMessage defaultMessage="Top Up" />
           </BarLinkText>
         </Link>
+        <Link to={routesEnum.actionsPage} className="secondary-link">
+          <BarLinkText
+            level={4}
+            margin="none"
+            className="bar-link-text"
+            active={pathname === routesEnum.actionsPage}
+          >
+            <FormattedMessage defaultMessage="Actions" />
+          </BarLinkText>
+        </Link>
         <Link to={routesEnum.withdrawals} className="mx10 secondary-link">
           <BarLinkText
             level={4}

src/pages/GenerateKeys/NumberInput.tsx → src/components/NumberInput.tsx

@@ -51,39 +51,42 @@ const StyledInput = styled.input`
 `;
 
 interface Props {
-  value: number | string;
+  value: number;
   setValue: (e: number) => void;
   allowDecimals?: boolean;
+  maxValue?: number;
 }
 
 export const NumberInput = ({
   value,
   setValue,
   allowDecimals,
+  maxValue,
 }: Props): JSX.Element => {
   const handleManualInput = (e: any) => {
     const val = e.target.value;
     if (allowDecimals) {
       setValue(val);
     } else {
-      setValue(val.replace(/\./g, '')); // remove "." to force integer input;
+      // remove "." to force integer input;
+      setValue(val.replace(/\./g, ''));
     }
   };
 
   const decrement = () => {
-    if (value > 0) setValue(+value - 1);
+    if (value > 0) {
+      setValue(Math.max(0, +value - 1));
+    }
   };
 
-  const increment = () => setValue(+value + 1);
+  const increment = () => {
+    const newValue = value + 1;
+    setValue(maxValue !== undefined ? Math.min(newValue, maxValue) : newValue);
+  };
 
   return (
     <div className="flex">
-      <StyledInput
-        onChange={handleManualInput}
-        value={value}
-        type={allowDecimals ? 'number' : 'tel'}
-        pattern="^-?[0-9]\d*\.?\d*$"
-      />
+      <StyledInput onChange={handleManualInput} value={value} type="number" />
       <ButtonContainer>
         <StyledButton onClick={increment} style={{ borderBottom: 'none' }}>
           <FormUp size="medium" />

src/components/Select.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Checkmark, FormDown, FormUp } from 'grommet-icons';
+
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+`;
+
+const Trigger = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  position: absolute;
+  top: 100%;
+  inset-inline: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+`;
+
+const Item = styled.div`
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &[data-selected='true'] {
+    background-color: #e0e0e0;
+  }
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  outline: none;
+`;
+
+export type Option = {
+  value: string;
+} & (
+  | {
+      label: string;
+      searchContext?: string;
+    }
+  | {
+      label: React.ReactNode;
+      searchContext: string;
+    }
+);
+
+export type SelectProps = {
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+};
+
+const Select = ({
+  options,
+  value,
+  onChange,
+  placeholder,
+  searchPlaceholder,
+}: SelectProps) => {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleSelect = (choice: string) => {
+    onChange(choice);
+    setIsOpen(false);
+    setSearch('');
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const selectedOption = options.find(option => option.value === value);
+
+  const filteredOptions = options.filter(option => {
+    const hasSearchContext = 'searchContext' in option;
+    const hasStringLabel = typeof option.label === 'string';
+    let fullSearchContext: string;
+
+    if (hasStringLabel && hasSearchContext) {
+      fullSearchContext = `${option.searchContext}${option.label}`;
+    } else if (hasSearchContext) {
+      fullSearchContext = option.searchContext!;
+    } else {
+      fullSearchContext = option.label as string;
+    }
+    return fullSearchContext.toLowerCase().includes(search.toLowerCase());
+  });
+
+  return (
+    <Container ref={containerRef}>
+      <Trigger onClick={() => setIsOpen(!isOpen)}>
+        <span>{selectedOption?.label || placeholder}</span>
+        {isOpen ? <FormUp /> : <FormDown />}
+      </Trigger>
+      {isOpen && (
+        <Content>
+          <SearchInput
+            type="text"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder={
+              searchPlaceholder ||
+              formatMessage({ defaultMessage: 'Type to filter' })
+            }
+          />
+          {filteredOptions.map(option => (
+            <Item
+              key={option.value}
+              data-selected={option.value === value}
+              onClick={() => handleSelect(option.value)}
+            >
+              {option.label}
+              <Checkmark
+                style={{
+                  fill: '#26AB83',
+                  visibility: option.value === value ? 'visible' : 'hidden',
+                }}
+              />
+            </Item>
+          ))}
+        </Content>
+      )}
+    </Container>
+  );
+};
+
+export default Select;

src/pages/TopUp/components/TransactionProgress.tsx → src/components/TransactionStatusModal/TransactionProgress.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { Checkmark, Close } from 'grommet-icons';
-import Spinner from '../../../components/Spinner';
-import { Text } from '../../../components/Text';
-import { stepStatus } from '../types';
+import Spinner from '../Spinner';
+import { Text } from '../Text';
+import { stepStatus } from './types';
 
 const Container = styled.div`
   justify-content: space-around;
@@ -110,7 +110,7 @@ interface TransactionProgressProps {
   confirmOnChainStatus: stepStatus;
 }
 
-const TransactionProgress: React.FC<TransactionProgressProps> = ({
+export const TransactionProgress: React.FC<TransactionProgressProps> = ({
   signTxStatus,
   confirmOnChainStatus,
 }) => {
@@ -131,5 +131,3 @@ const TransactionProgress: React.FC<TransactionProgressProps> = ({
     </Container>
   );
 };
-
-export default TransactionProgress;

src/pages/TopUp/components/TopUpTransactionModal.tsx → src/components/TransactionStatusModal/TransactionStatusModal.tsx

@@ -1,21 +1,23 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Layer } from 'grommet';
-import { Heading } from '../../../components/Heading';
-import { Text } from '../../../components/Text';
-import TransactionProgress from './TransactionProgress';
-import { stepStatus, TransactionStatus } from '../types';
-import { Button } from '../../../components/Button';
-import { EL_TRANSACTION_URL } from '../../../utils/envVars';
-import { Link } from '../../../components/Link';
+import { Heading } from '../Heading';
+import { Text } from '../Text';
+import { TransactionProgress } from './TransactionProgress';
+import { stepStatus, TransactionStatus } from './types';
+import { Button } from '../Button';
+import { EL_TRANSACTION_URL } from '../../utils/envVars';
+import { Link } from '../Link';
 
 interface TopUpTransactionModalProps {
+  headerMessage: string | ReactNode;
   onClose: () => void;
   transactionStatus: TransactionStatus;
   txHash: string;
 }
 
-const TopUpTransactionModal: React.FC<TopUpTransactionModalProps> = ({
+export const TransactionStatusModal: React.FC<TopUpTransactionModalProps> = ({
+  headerMessage,
   onClose,
   transactionStatus,
   txHash,
@@ -54,7 +56,14 @@ const TopUpTransactionModal: React.FC<TopUpTransactionModalProps> = ({
     <Layer position="center" onClickOutside={onClose} onEsc={onClose}>
       <Box pad="medium" gap="small" width="medium">
         <Heading level={3} margin="none">
-          <FormattedMessage defaultMessage="Top-up transaction" />
+          {typeof headerMessage === 'string' ? (
+            <FormattedMessage
+              defaultMessage="{headerMessage}"
+              values={{ headerMessage }}
+            />
+          ) : (
+            headerMessage
+          )}
         </Heading>
         <TransactionProgress
           signTxStatus={signTxStatus}
@@ -89,5 +98,3 @@ const TopUpTransactionModal: React.FC<TopUpTransactionModalProps> = ({
     </Layer>
   );
 };
-
-export default TopUpTransactionModal;

src/components/TransactionStatusModal/index.ts

@@ -0,0 +1,3 @@
+export * from './TransactionStatusModal';
+export * from './TransactionProgress';
+export * from './types';

src/components/TransactionStatusModal/types.ts

@@ -0,0 +1,9 @@
+export type TransactionStatus =
+  | 'not_started'
+  | 'waiting_user_confirmation'
+  | 'user_rejected'
+  | 'confirm_on_chain'
+  | 'error'
+  | 'success';
+
+export type stepStatus = 'loading' | 'staged' | 'complete' | 'error';