chore: improve styles, try mnemonic

package.json

@@ -241,9 +241,8 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
-    "@leather-wallet/tokens": "0.0.5",
     "@ls-lint/ls-lint": "2.2.2",
-    "@pandacss/dev": "0.27.1",
+    "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "4.0.0",

src/app/common/utils.ts

@@ -8,6 +8,7 @@ import {
 import { toUnicode } from 'punycode';
 
 import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants';
+import { isBoolean } from '@shared/utils';
 
 export function createNullArrayOfLength(length: number) {
   return new Array(length).fill(null);
@@ -314,3 +315,7 @@ export function removeTrailingNullCharacters(s: string) {
 export function removeMinusSign(value: string) {
   return value.replace('-', '');
 }
+
+export function propIfDefined(prop: string, value: any) {
+  return isBoolean(value) ? { [prop]: value } : {};
+}

src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx

@@ -1,8 +1,10 @@
-import { wordlist } from '@scure/bip39/wordlists/english';
+import { useState } from 'react';
 
-import { extractPhraseFromString } from '@app/common/utils';
+import { useField } from 'formik';
 
-import { InputField } from './mnemonic-input-field';
+import { useIsFieldDirty } from '@app/common/form-utils';
+import { extractPhraseFromString } from '@app/common/utils';
+import { Input } from '@app/ui/components/input/input';
 
 interface MnemonicWordInputProps {
   fieldNumber: number;
@@ -16,28 +18,41 @@ export function MnemonicWordInput({
   onUpdateWord,
   onPasteEntireKey,
 }: MnemonicWordInputProps) {
+  const name = `${fieldNumber}`;
+  const [field, meta] = useField(name);
+  const [isFocused, setIsFocused] = useState(false);
+  const isDirty = useIsFieldDirty(name);
   return (
-    <InputField
-      name={`${fieldNumber}`}
-      autoCapitalize="off"
-      spellCheck={false}
-      dataTestId={`mnemonic-input-${fieldNumber}`}
-      onUpdateWord={onUpdateWord}
-      onPaste={e => {
-        const pasteValue = extractPhraseFromString(e.clipboardData.getData('text'));
-        if (pasteValue.includes(' ')) {
+    <Input.Root hasError={isDirty && !!meta.error} shrink>
+      <Input.Field
+        // Limitation of the animated label is that we cannot detect
+        // programatically updated inputs. Here we add an empty place holder to
+        // trigger the repositioning of the label
+        autoCapitalize="off"
+        autoComplete="off"
+        spellCheck={false}
+        data-testid={`mnemonic-input-${fieldNumber}`}
+        id={name}
+        type={isFocused ? 'text' : 'password'}
+        onFocus={() => setIsFocused(!isFocused)}
+        {...field}
+        value={value || field.value || ''}
+        // using onChangeCapture + onBlurCapture to keep Formik validation
+        onChangeCapture={(e: any) => {
           e.preventDefault();
-          //assume its a full key
-          onPasteEntireKey(pasteValue);
-        }
-      }}
-      onChange={(e: any) => {
-        e.preventDefault();
-        onUpdateWord(e.target.value);
-      }}
-      wordlist={wordlist}
-      value={value}
-      height="3rem"
-    />
+          onUpdateWord(e.target.value);
+        }}
+        onBlurCapture={() => setIsFocused(!isFocused)}
+        onPaste={e => {
+          const pasteValue = extractPhraseFromString(e.clipboardData.getData('text'));
+          if (pasteValue.includes(' ')) {
+            e.preventDefault();
+            //assume its a full key
+            onPasteEntireKey(pasteValue);
+          }
+        }}
+      />
+      <Input.Label>Word {fieldNumber}</Input.Label>
+    </Input.Root>
   );
 }

src/app/pages/onboarding/set-password/components/password-field.tsx

@@ -7,6 +7,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx';
 import { ValidatedPassword } from '@app/common/validation/validate-password';
 import { EyeIcon } from '@app/ui/components/icons/eye-icon';
 import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon';
+import { Input } from '@app/ui/components/input/input';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { getIndicatorsOfPasswordStrength } from './password-field.utils';
@@ -28,38 +29,33 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps
   return (
     <>
       <Box position="relative">
-        <styled.input
-          _focus={{ border: 'focus' }}
-          autoCapitalize="off"
-          autoComplete="off"
-          autoFocus
-          border="active"
-          borderRadius="sm"
-          data-testid={OnboardingSelectors.NewPasswordInput}
-          disabled={isDisabled}
-          height="64px"
-          key="password-input"
-          p="space.04"
-          placeholder="Set a password"
-          ring="none"
-          type={showPassword ? 'text' : 'password'}
-          textStyle="body.02"
-          width="100%"
-          {...field}
-        />
+        <Input.Root>
+          <Input.Label>Password</Input.Label>
+          <Input.Field
+            autoCapitalize="off"
+            autoComplete="off"
+            autoFocus
+            data-testid={OnboardingSelectors.NewPasswordInput}
+            disabled={isDisabled}
+            key="password-input"
+            type={showPassword ? 'text' : 'password'}
+            width="100%"
+            {...field}
+          />
+        </Input.Root>
         <styled.button
-          _focus={{ bg: 'transparent', boxShadow: 'none' }}
-          _hover={{ bg: 'transparent', boxShadow: 'none' }}
+          _focus={{ bg: 'transparent', outline: 'none' }}
+          _hover={{ bg: 'transparent', outline: 'none' }}
           bg="transparent"
-          boxShadow="none"
+          appearance="none"
           height="20px"
           onClick={() => setShowPassword(!showPassword)}
           position="absolute"
           right="space.04"
-          top="20px"
-          transform="matrix(-1, 0, 0, 1, 0, 0)"
+          top="22px"
           type="button"
           width="20px"
+          zIndex={10}
         >
           {showPassword ? <EyeSlashIcon /> : <EyeIcon />}
         </styled.button>

src/app/ui/components/input/input.stories.tsx

@@ -29,11 +29,32 @@ export const Error: Story = {
   ),
 };
 
+export const Disabled: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Field is disabled</Input.Label>
+      <Input.Field disabled type="text" />
+    </Input.Root>
+  ),
+};
+
 export const DefaultValue: Story = {
   render: () => (
     <Input.Root>
       <Input.Label>Description</Input.Label>
-      <Input.Field value="This is a default value" type="text" />
+      <Input.Field defaultValue="This is a default value" type="text" />
+    </Input.Root>
+  ),
+};
+
+/**
+ * Layout needs to be adjusted in case where there's no label provided
+ * An example of this is our Secret Key input form
+ */
+export const InputNoLabel: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Field defaultValue="This is a default value" type="text" />
     </Input.Root>
   ),
 };