chore: refactors

Author: tractorss

web/src/hooks/useTokenAddressValidation.ts

@@ -141,12 +141,7 @@ const useTokenValidation = ({
     error,
   } = useQuery({
     queryKey: [`${tokenType}-validation`, chainId, debouncedAddress],
-    enabled:
-      enabled &&
-      !isUndefined(publicClient) &&
-      !isUndefined(debouncedAddress) &&
-      debouncedAddress.trim() !== "" &&
-      isValidFormat === true,
+    enabled: enabled && !isUndefined(publicClient) && Boolean(isValidFormat),
     staleTime: 300000, // Cache for 5 minutes
     retry: 1, // Only retry once to fail faster
     retryDelay: 1000, // Short retry delay

web/src/pages/Resolver/Parameters/Court.tsx

@@ -112,8 +112,8 @@ const ValidationIcon = styled.div<{ $isValid?: boolean | null; $isValidating?: b
   ${({ $isValidating, $isValid }) => {
     if ($isValidating) {
       return css`
-        border: 2px solid #ccc;
-        border-top-color: #007bff;
+        border: 2px solid ${({ theme }) => theme.stroke};
+        border-top-color: ${({ theme }) => theme.primaryBlue};
         animation: spin 1s linear infinite;
 
         @keyframes spin {
@@ -126,7 +126,7 @@ const ValidationIcon = styled.div<{ $isValid?: boolean | null; $isValidating?: b
 
     if ($isValid === true) {
       return css`
-        background-color: #28a745;
+        background-color: ${({ theme }) => theme.success};
         color: white;
         &::after {
           content: "✓";
@@ -136,7 +136,7 @@ const ValidationIcon = styled.div<{ $isValid?: boolean | null; $isValidating?: b
 
     if ($isValid === false) {
       return css`
-        background-color: #dc3545;
+        background-color: ${({ theme }) => theme.error};
         color: white;
         &::after {
           content: "✗";
@@ -151,17 +151,17 @@ const ValidationIcon = styled.div<{ $isValid?: boolean | null; $isValidating?: b
 `;
 
 const ValidationMessage = styled.small<{ $isError?: boolean }>`
-  color: ${({ $isError }) => ($isError ? "#dc3545" : "#28a745")};
+  color: ${({ $isError, theme }) => ($isError ? theme.error : theme.success)};
   font-size: 14px;
   font-style: italic;
   font-weight: normal;
 `;
 
 const StyledFieldWithValidation = styled(StyledField)<{ $isValid?: boolean | null }>`
   > input {
-    border-color: ${({ $isValid }) => {
-      if ($isValid === true) return "#28a745";
-      if ($isValid === false) return "#dc3545";
+    border-color: ${({ $isValid, theme }) => {
+      if ($isValid === true) return theme.success;
+      if ($isValid === false) return theme.error;
       return "inherit";
     }};
   }
@@ -327,7 +327,7 @@ const Court: React.FC = () => {
           {tokenGateAddress.trim() !== "" && (
             <ValidationContainer>
               <ValidationIcon $isValidating={isValidating} $isValid={isValidToken} />
-              <ValidationMessage $isError={!!validationError}>
+              <ValidationMessage $isError={Boolean(validationError)}>
                 {isValidating && `Validating ${isERC1155 ? "ERC-1155" : "ERC-20 or ERC-721"} token...`}
                 {validationError && validationError}
                 {isValidToken === true && `Valid ${isERC1155 ? "ERC-1155" : "ERC-20 or ERC-721"} token`}