FIX CONFLICTS 🥭

Author: DarianM

frontend/app/components/redesign/Typography.tsx

@@ -20,6 +20,7 @@ type TypographyProps = {
   variant: TextStyleType
   as?: React.ElementType
   className?: string
+  htmlFor?: string
   children: React.ReactNode
 } & React.HTMLAttributes<HTMLElement>
 

frontend/app/components/redesign/components/InputField.tsx

@@ -69,9 +69,8 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
             )}
             id={fieldId}
             name={fieldId}
-            required={required}
-            aria-invalid={!!displayError}
-            aria-describedby={ariaDescriptionId}
+            aria-invalid={!!error}
+            aria-describedby={displayError ? 'input-error' : ariaDescriptionId}
             {...props}
           />
           {ariaDescription && !displayError && (
@@ -82,6 +81,8 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
 
           {displayError && (
             <span
+              id="input-error"
+              role="alert"
               className="absolute right-3 top-full
               -translate-y-1/2
               px-1 text-xs text-text-error bg-white"

frontend/app/components/redesign/components/ToolsWalletAddress.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useId, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Tooltip } from './Tooltip'
 import { InputField } from './InputField'
 import { ToolsSecondaryButton } from './ToolsSecondaryButton'
@@ -20,11 +20,10 @@ interface ToolsWalletAddressProps {
 }
 
 export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
-  const snap = useSnapshot(toolState)
+  const snap = useSnapshot(toolState, { sync: true })
   const uiActions = useUIActions()
   const [error, setError] = useState<ElementErrors>()
   const [isLoading, setIsLoading] = useState(false)
-  const generatedId = useId()
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -98,6 +97,9 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
     if (snap.walletConnectStep !== 'unfilled') {
       toolActions.setConnectWalletStep('unfilled')
     }
+    if (error) {
+      setError(undefined)
+    }
   }
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -107,55 +109,50 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
     }
   }
 
-  const renderStatusMessage = () => {
+  const getStatusMessage = (): {
+    message: string
+    type: 'error' | 'success' | 'info'
+  } => {
     if (snap.walletConnectStep === 'error') {
-      return (
-        <p className="w-full text-style-small-standard !text-red-600">
-          You have not connected your wallet address yet.
-        </p>
-      )
+      return {
+        message: 'You have not connected your wallet address yet.',
+        type: 'error'
+      }
     }
-
     if (!snap.isWalletConnected) {
-      return (
-        <p className="w-full text-style-small-standard">
-          If you&apos;re connecting your wallet address for the first time,
-          you&apos;ll start with the default configuration.
-          <br />
-          You can then customize and save your config as needed.
-        </p>
-      )
+      return {
+        message:
+          "If you're connecting your wallet address for the first time, you'll start with the default configuration. You can then customize and save your config as needed.",
+        type: 'info'
+      }
     }
-
     if (!snap.hasRemoteConfigs) {
-      return (
-        <p className="w-full text-style-small-standard !text-text-success">
-          There are no custom edits for the {toolName} correlated to this wallet
-          address but you can start customizing when you want.
-        </p>
-      )
+      return {
+        message: `There are no custom edits for the ${toolName} correlated to this wallet address but you can start customizing when you want.`,
+        type: 'success'
+      }
     }
 
-    return (
-      <p className="w-full text-style-small-standard !text-text-success">
-        We&apos;ve loaded your configuration.
-        <br />
-        Feel free to keep customizing your {toolName} to fit your style.
-      </p>
-    )
+    return {
+      message: `We've loaded your configuration. Feel free to keep customizing your ${toolName} to fit your style.`,
+      type: 'success'
+    }
   }
+
+  const statusMessage = getStatusMessage()
   return (
     <form
       onSubmit={handleSubmit}
       className={cx(
         'flex flex-col xl:flex-row xl:items-start gap-2xl p-md bg-white rounded-lg',
         snap.walletConnectStep === 'error' && 'border border-red-600'
       )}
-      aria-labelledby={generatedId}
     >
-      <div className="flex flex-col items-start gap-md w-full xl:flex-1 xl:grow">
+      <div className="items-start gap-md w-full xl:flex-1 xl:grow">
         <div className="inline-flex items-center gap-xs">
-          <Heading5 id={generatedId}>Wallet address</Heading5>
+          <Heading5 htmlFor="wallet-address-url" as="label">
+            Wallet address
+          </Heading5>
           <Tooltip>
             Your wallet is required in order for us to save this components
             configuration for you, link it to the original author, and verify
@@ -164,11 +161,7 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
             behalf.
           </Tooltip>
         </div>
-
-        <div
-          id="wallet-address-input"
-          className="flex items-start gap-3 w-full"
-        >
+        <div className="flex items-start gap-3 w-full pt-md">
           <div className="flex-1 min-w-0 h-12">
             <InputField
               ref={inputRef}
@@ -178,11 +171,11 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
                   ? undefined
                   : 'https://walletprovider.com/MyWallet'
               }
-              defaultValue={snap.walletAddress}
-              onBlur={handleWalletAddressChange}
+              value={snap.walletAddress}
+              onChange={handleWalletAddressChange}
               disabled={snap.isWalletConnected}
+              readOnly={isLoading}
               error={error?.fieldErrors.walletAddress}
-              aria-labelledby={generatedId}
             />
           </div>
           {snap.isWalletConnected && (
@@ -200,16 +193,25 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
         </div>
       </div>
 
-      <div
-        id="wallet-address-message"
-        className="flex flex-col w-full xl:max-w-[490px] items-start gap-xs xl:flex-1 xl:grow"
-      >
-        {renderStatusMessage()}
+      <div className="flex flex-col w-full xl:max-w-[490px] items-start gap-xs xl:flex-1 xl:grow">
+        <span
+          id="wallet-status"
+          role={statusMessage.type === 'error' ? 'alert' : 'status'}
+          className={cx(
+            'w-full text-style-small-standard',
+            statusMessage.type === 'error' && '!text-red-600',
+            statusMessage.type === 'success' && '!text-text-success'
+          )}
+        >
+          {statusMessage.message}
+        </span>
+
         {!snap.isWalletConnected && (
           <ToolsSecondaryButton
             type="submit"
             className="xl:w-[143px]"
             disabled={isLoading}
+            aria-busy={isLoading}
           >
             <div className="flex items-center justify-center gap-2">
               {isLoading && <SVGSpinner className="w-4 h-4" />}