✨ combined modes

.github/workflows/azure-static-web-apps-happy-pebble-07bcb0203.yml

@@ -0,0 +1,46 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - feature/combined-modes
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - feature/combined-modes
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_PEBBLE_07BCB0203 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "build" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_PEBBLE_07BCB0203 }}
+          action: "close"

package.json

@@ -2,6 +2,9 @@
   "name": "staking-launchpad",
   "version": "1.0.1",
   "private": true,
+  "engines": {
+    "node": "16"
+  },
   "dependencies": {
     "@chainsafe/bls": "^2.0.0",
     "@chainsafe/ssz": "^0.6.7",

src/Routes.tsx

@@ -26,6 +26,7 @@ import {
 import ScrollToTop from './utils/ScrollToTop';
 import { Prysm } from './pages/Clients/Consensus/Prysm';
 import { Geth } from './pages/Clients/Execution/Geth';
+import { SelectModePage } from './pages/SelectMode';
 
 type RouteType = {
   path: string;
@@ -39,6 +40,7 @@ export enum routesEnum {
   connectWalletPage = '/connect-wallet',
   generateKeysPage = '/generate-keys',
   acknowledgementPage = '/overview',
+  selectMode = '/select-mode',
   selectClient = '/select-client',
   summaryPage = '/summary',
   uploadValidatorPage = '/upload-deposit-data',
@@ -89,6 +91,11 @@ const routes: RouteType[] = [
     exact: true,
     component: AcknowledgementPage,
   },
+  {
+    path: routesEnum.selectMode,
+    exact: true,
+    component: SelectModePage,
+  },
   { path: routesEnum.summaryPage, exact: true, component: SummaryPage },
   {
     path: routesEnum.uploadValidatorPage,

src/pages/Acknowledgements/AcknowledgementProgressTracker/index.tsx

@@ -49,9 +49,6 @@ export const _AcknowledgementProgressTracker = ({
     [AcknowledgementIdsEnum.keyManagement]: formatMessage({
       defaultMessage: 'Key management',
     }),
-    [AcknowledgementIdsEnum.earlyAdoptionRisks]: formatMessage({
-      defaultMessage: 'Early adoption risks',
-    }),
     [AcknowledgementIdsEnum.checklist]: formatMessage({
       defaultMessage: 'Checklist',
     }),

src/pages/Acknowledgements/index.tsx

@@ -29,6 +29,7 @@ import { WorkflowPageTemplate } from '../../components/WorkflowPage/WorkflowPage
 import { Paper } from '../../components/Paper';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem';
+import { ClientId, DispatchClientUpdate, updateClient } from '../../store/actions/clientActions';
 
 interface OwnProps {}
 interface StateProps {
@@ -39,6 +40,7 @@ interface StateProps {
 interface DispatchProps {
   dispatchAcknowledgementStateUpdate: DispatchAcknowledgementStateUpdateType;
   dispatchWorkflowUpdate: DispatchWorkflowUpdateType;
+  dispatchClientUpdate: DispatchClientUpdate;
 }
 type Props = StateProps & DispatchProps & OwnProps;
 
@@ -47,6 +49,7 @@ const _AcknowledgementPage = ({
   dispatchAcknowledgementStateUpdate,
   workflow,
   dispatchWorkflowUpdate,
+  dispatchClientUpdate
 }: Props): JSX.Element => {
 
 
@@ -80,7 +83,13 @@ const _AcknowledgementPage = ({
     }
   };
 
+  const setClientFxn = (clientId: ClientId) => {
+    dispatchClientUpdate(clientId, 'execution');
+  };
+
   const handleAccept = () => {   
+    const isOneClick = sessionStorage.getItem('oneClick') === 'true';
+    setClientFxn(isOneClick ? ClientId.STEREUM : ClientId.GETH);
     acknowledgementIdsArray.forEach((id) => {
       console.log(workflow);
       dispatchAcknowledgementStateUpdate(id, true);
@@ -123,8 +132,8 @@ const _AcknowledgementPage = ({
       </Subtitle>
       <Paper className="flex flex-column">
         <Accordion>
-        {acknowledgementIdsArray.filter(value => value !== AcknowledgementIdsEnum.confirmation &&  value !== AcknowledgementIdsEnum.terminal).map((value) => (
-          <AccordionItem title={steps[value].title}>          
+          {acknowledgementIdsArray.filter(value => value !== AcknowledgementIdsEnum.confirmation &&  value !== AcknowledgementIdsEnum.terminal).map((value) => (
+            <AccordionItem title={steps[value].title}>          
               <AcknowledgementSection
                 showTitle={false}
                 handleContinueClick={handleContinueClick}
@@ -136,7 +145,7 @@ const _AcknowledgementPage = ({
                 acknowledgementId={value}
                 acknowledgementText={steps[value].acknowledgementText}
               />     
-          </AccordionItem>          
+            </AccordionItem>          
         ))}  
         </Accordion>
         <AcknowledgementFooter>
@@ -175,6 +184,12 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
   dispatchAcknowledgementStateUpdate: (id, value) =>
     dispatch(updateAcknowledgementState(id, value)),
   dispatchWorkflowUpdate: step => dispatch(updateWorkflow(step)),
+  dispatchClientUpdate: (
+      clientId: ClientId,
+      ethClientType: 'execution' | 'consensus'
+    ) => {
+      dispatch(updateClient(clientId, ethClientType));
+    },
 });
 
 export const AcknowledgementPage = connect<

src/pages/Acknowledgements/pageContent.tsx

@@ -193,24 +193,6 @@ export const pageContent = {
       />
     ),
   },
-  [AcknowledgementIdsEnum.earlyAdoptionRisks]: {
-    title: <FormattedMessage defaultMessage="Early adopter risks" />,
-    content: (
-      <Text size="medium" className="my10">
-        <FormattedMessage
-          defaultMessage="You're joining a network in its early stages. As with any new piece of software,
-              there is the potential for software bugs. While unlikely, potential bugs may
-              result in slashing."
-        />
-      </Text>
-    ),
-    acknowledgementText: (
-      <FormattedMessage
-        defaultMessage="I am an early adopter, and I accept that software and design bugs may
-          result in me being slashed."
-      />
-    ),
-  },
   [AcknowledgementIdsEnum.terminal]: {
     title: <FormattedMessage defaultMessage="Using the terminal" />,
     content: (

src/pages/GenerateKeys/Instructions.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { keysTool } from './index';
+import { Paper } from '../../components/Paper';
+import { TextSelectionBox } from '../../components/TextSelectionBox';
+import { Option1 } from './Option1';
+import { Heading } from '../../components/Heading';
+
+interface Props {
+  validatorCount: number | string;
+  withdrawalAddress: string;
+  os: 'mac' | 'linux' | 'windows';
+  chosenTool: keysTool;
+  setChosenTool: (tool: keysTool) => void;
+}
+
+export const Instructions = ({
+  validatorCount,
+  withdrawalAddress,
+  os,
+  chosenTool,
+  setChosenTool,
+}: Props) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Paper className="mt20" style={{ animation: 'fadeIn 1s' }}>
+      <Heading level={2} size="small" color="blueMedium">
+        <FormattedMessage defaultMessage="How do you want to generate your keys?" />
+      </Heading>
+      <div className="my20" style={{ display: 'flex' }}>
+        <TextSelectionBox
+          isActive={chosenTool === keysTool.CLI}
+          onClick={() => setChosenTool(keysTool.CLI)}
+          style={{ marginEnd: '20px' }}
+        >
+          {formatMessage({ defaultMessage: 'Download CLI app' })}
+        </TextSelectionBox>
+      </div>
+      <div>
+        {chosenTool === keysTool.CLI && (
+          <Option1 {...{ validatorCount, withdrawalAddress, os }} />
+        )}
+      </div>
+    </Paper>
+  );
+};