[@tools-website] Faucet: fund and create new account (#1025)

* feat(faucet): fund and create new account

* chore: changeset file

* chore: resolve PR comments

* chore: run formatter

* chore: code cleanup

* chore: run formatter

* feat: disable button when mainnet is selected

* feat: disable button when mainnet is selected

* chore: resolve comments

* chore: run formatter

* fix: validation on sibmitting form

* fix: hash function for generating account name

* Slightly update asidebar

* fix tests

* chore: add capability of keyset

* chore: run formatter

* fix: e2e test for faucet page

* fix: e2e test for faucet page

* fix: e2e test for faucet page

* chore: reverse keys when generating acc name

* feat: add create principal to generate account name

* Merge main into feat/tools-website/faucet-fund-create-new-accounts

* chore: formatting and code cleanup

* chore: formatting

* Small cleanup

* Fix missing useCallnback dependencies

---------

Co-authored-by: Ghislain Gabrielse <Ghislain@Kadena.io>
Co-authored-by: Sander Looijenga <slooijenga@anwb.nl>

.changeset/twelve-ants-drive.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/tools/locales/en/common.json

@@ -167,6 +167,11 @@
   "Network label": "Network label",
   "Network ID": "Network ID",
   "Network api": "Network api",
+  "The Faucet only runs on Testnet. The Network toggle in the topbar has no effect on the Faucet. It will not fund accounts on Mainnet, only on Testnet.": "The Faucet only runs on Testnet. The Network toggle in the topbar has no effect on the Faucet. It will not fund accounts on Mainnet, only on Testnet.",
+  "Insert valid public key": "Insert valid public key",
+  "Duplicate public key": "Duplicate public key",
+  "Create and Fund Account": "Create and Fund Account",
+  "Please provide one or more public keys": "Please provide one or more public keys",
   "No code to be shown yet": "No code to be shown yet",
   "Click on a module from the left panel to see its code in this panel.": "Click on a module from the left panel to see its code in this panel.",
   "Select/open a module to see the outline of the contract/module": "Select/open a module to see the outline of the contract/module",

packages/apps/tools/src/components/Common/Layout/partials/Header/Header.tsx

@@ -30,7 +30,7 @@ const Header: FC<IHeaderProps> = () => {
   const navItems = [
     {
       label: t('Faucet'),
-      href: routes.FAUCET_EXISTING,
+      href: routes.FAUCET_NEW,
     },
     {
       label: t('Transactions'),

packages/apps/tools/src/components/Global/AccountNameField/index.tsx

@@ -23,6 +23,7 @@ interface IAccountNameFieldProps
     >
   >;
   error?: FieldError;
+  noIcon?: boolean;
 }
 
 export const NAME_VALIDATION = z.string().trim().min(3).max(256);
@@ -32,6 +33,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
   status,
   helperText,
   error,
+  noIcon = false,
   ...rest
 }) => {
   const elementId = 'kd-select-account-input';
@@ -62,7 +64,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
           setSelectedAccount(e.target.value);
           onChange?.(e as unknown as ChangeEvent<HTMLInputElement>);
         }}
-        icon={'KIcon'}
+        icon={noIcon ? 'KIcon' : undefined}
         id={elementId}
       >
         <option value={''}>{t('Select Account')}</option>
@@ -83,7 +85,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
           setSelectedAccount(e.target.value);
           onChange?.(e);
         }}
-        leftIcon={'KIcon'}
+        leftIcon={noIcon ? undefined : 'KIcon'}
       />
     ),
   };

packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx

@@ -0,0 +1,51 @@
+import type { ISelectProps } from '@kadena/react-ui';
+import { InputWrapper, Select } from '@kadena/react-ui';
+
+import type { FC, FormEventHandler } from 'react';
+import React, { useCallback } from 'react';
+
+export type PredKey = 'keys-all' | 'keys-any' | 'keys-2';
+
+export type OnPredSelectChange = (value: PredKey) => void;
+
+const ELEMENT_ID = 'select-pred';
+
+const predicates: Array<PredKey> = ['keys-all', 'keys-any', 'keys-2'];
+
+const PredKeysSelect: FC<
+  Omit<ISelectProps, 'children' | 'value' | 'onChange' | 'icon' | 'id'> & {
+    value: PredKey;
+    onChange: OnPredSelectChange;
+  }
+> = ({ value, onChange, ...rest }) => {
+  const onSelectChange = useCallback<FormEventHandler<HTMLSelectElement>>(
+    (e) => {
+      const pred = predicates.find((pred) => {
+        return pred === e.currentTarget.value;
+      });
+
+      onChange(pred!);
+    },
+    [onChange],
+  );
+
+  const options = predicates.map((pred) => {
+    return <option key={`id-${pred}`}>{pred}</option>;
+  });
+
+  return (
+    <InputWrapper label="Predicate" htmlFor={ELEMENT_ID}>
+      <Select
+        {...rest}
+        id={ELEMENT_ID}
+        onChange={onSelectChange}
+        value={value}
+        ariaLabel="Select Predicate"
+      >
+        {options}
+      </Select>
+    </InputWrapper>
+  );
+};
+
+export { PredKeysSelect };

packages/apps/tools/src/components/Global/PublicKeyField/index.tsx

@@ -0,0 +1,44 @@
+import type { IInputProps, IInputWrapperProps } from '@kadena/react-ui';
+import { TextField } from '@kadena/react-ui';
+
+import useTranslation from 'next-translate/useTranslation';
+import type { FC } from 'react';
+import React from 'react';
+import type { FieldError } from 'react-hook-form';
+
+interface IPublicKeyFieldProps
+  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  inputProps: Partial<
+    Pick<
+      IInputProps,
+      'id' | 'placeholder' | 'ref' | 'name' | 'onChange' | 'onBlur'
+    >
+  >;
+  error?: FieldError;
+}
+
+export const PublicKeyField: FC<IPublicKeyFieldProps> = ({
+  inputProps,
+  status,
+  helperText,
+  error,
+  ...rest
+}) => {
+  const { t } = useTranslation('common');
+
+  return (
+    <TextField
+      label={t('Public Key')}
+      status={error ? 'negative' : status}
+      helperText={helperText}
+      {...rest}
+      inputProps={{
+        id: 'public-key-input',
+        placeholder: t('Enter Public Key'),
+        ...inputProps,
+      }}
+    />
+  );
+};
+
+export default PublicKeyField;

packages/apps/tools/src/components/Global/SidebarMenu/index.tsx

@@ -52,7 +52,7 @@ export const SidebarMenu: FC = (props) => {
   return (
     <StyledSidebar data-testid={'navigation'}>
       {menu.map((item, index) => (
-        <NavLink key={index} href={item.href}>
+        <NavLink aria-label={item.title} key={index} href={item.href}>
           {item.title}
         </NavLink>
       ))}

packages/apps/tools/src/constants/routes.ts

@@ -7,5 +7,6 @@ export default {
   ACCOUNT_TRANSACTIONS_RESULTS: '/account/account-transactions/results',
   MODULE_EXPLORER: '/transactions/module-explorer',
   FAUCET_EXISTING: '/faucet/existing',
+  FAUCET_NEW: '/faucet/new',
   BALANCE: '/balance',
 } as const;