Make the Account # prefix clickable

penumbra-zone · Aug 12, 2024 · 7464087 · 7464087
1 parent 5d28023
commit 7464087
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 37 deletions.
diff --git a/packages/ui/src/AccountSelector/index.tsx b/packages/ui/src/AccountSelector/index.tsx
@@ -8,6 +8,7 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 import { AccountSelectorAddress } from './AccountSelectorAddress';
 import { IbcDepositToggle } from './IbcDepositToggle';
 import { useAccountSelector } from './useAccountSelector';
+import { useRef } from 'react';
 
 const Root = styled.div`
   display: flex;
@@ -19,6 +20,7 @@ const StartAdornment = styled.div`
   ${body}
 
   color: ${props => props.theme.color.text.secondary};
+  cursor: pointer;
 `;
 
 const EndAdornment = styled.div`
@@ -90,13 +92,17 @@ export const AccountSelector = (props: AccountSelectorProps) => {
     loading,
   } = useAccountSelector(props);
 
+  const textInputRef = useRef<HTMLInputElement>(null);
+  const onClickStartAdornment = () => textInputRef.current?.focus();
+
   return (
     <Root>
       <TextInput
         type='number'
         value={index.toString()}
         min={0}
         max={MAX_INDEX}
+        ref={textInputRef}
         onChange={value => {
           /**
            * Don't allow manual account number entry when there's a
@@ -118,7 +124,15 @@ export const AccountSelector = (props: AccountSelectorProps) => {
 
           handleChange(valueAsNumber);
         }}
-        startAdornment={<StartAdornment>Account #</StartAdornment>}
+        startAdornment={
+          <StartAdornment
+            role='button'
+            aria-label='Focus on the account number input'
+            onClick={onClickStartAdornment}
+          >
+            Account #
+          </StartAdornment>
+        }
         endAdornment={
           <EndAdornment>
             <Density compact>

diff --git a/packages/ui/src/TextInput/index.tsx b/packages/ui/src/TextInput/index.tsx
@@ -2,7 +2,7 @@ import styled, { DefaultTheme } from 'styled-components';
 import { small } from '../utils/typography';
 import { ActionType } from '../utils/ActionType';
 import { useDisabled } from '../hooks/useDisabled';
-import { ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 
 const BORDER_BOTTOM_WIDTH = '2px';
 
@@ -92,38 +92,44 @@ export interface TextInputProps {
  * Can be enriched with start and end adornments, which are markup that render
  * inside the text input's visual frame.
  */
-export const TextInput = ({
-  value,
-  onChange,
-  placeholder,
-  actionType = 'default',
-  disabled,
-  type = 'text',
-  startAdornment = null,
-  endAdornment = null,
-  max,
-  min,
-}: TextInputProps) => {
-  disabled = useDisabled(disabled);
-
-  return (
-    <Wrapper $hasStartAdornment={!!startAdornment} $hasEndAdornment={!!endAdornment}>
-      {startAdornment}
-
-      <StyledInput
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        placeholder={placeholder}
-        disabled={disabled}
-        type={type}
-        max={max}
-        min={min}
-        $actionType={actionType}
-        $hasStartAdornment={!!startAdornment}
-        $hasEndAdornment={!!endAdornment}
-      />
-
-      {endAdornment}
-    </Wrapper>
-  );
-};
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder,
+      actionType = 'default',
+      disabled,
+      type = 'text',
+      startAdornment = null,
+      endAdornment = null,
+      max,
+      min,
+    }: TextInputProps,
+    ref,
+  ) => {
+    disabled = useDisabled(disabled);
+
+    return (
+      <Wrapper $hasStartAdornment={!!startAdornment} $hasEndAdornment={!!endAdornment}>
+        {startAdornment}
+
+        <StyledInput
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled}
+          type={type}
+          max={max}
+          min={min}
+          ref={ref}
+          $actionType={actionType}
+          $hasStartAdornment={!!startAdornment}
+          $hasEndAdornment={!!endAdornment}
+        />
+
+        {endAdornment}
+      </Wrapper>
+    );
+  },
+);