chore: Auto-format tailwind classes (#119)

- Upgrade yarn, prettier
- Setup react-query lint rules
- Enable formatting of tailwind classes

.eslintrc

@@ -15,6 +15,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
     "next", 
     "next/core-web-vitals", 
     "prettier"
@@ -23,7 +24,9 @@
     "no-console": ["warn"],
     "no-eval": ["error"],
     "no-ex-assign": ["error"],
+    "no-extra-boolean-cast": ["error"],
     "no-constant-condition": ["off"],
+    "guard-for-in": ["error"],
     "@typescript-eslint/ban-ts-comment": ["off"],
     "@typescript-eslint/explicit-module-boundary-types": ["off"],
     "@typescript-eslint/no-explicit-any": ["off"],

.prettierrc

@@ -3,7 +3,9 @@
   "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "all",
-  "importOrder": ["^@hyperlane-xyz/(.*)$", "^../(.*)$", "^./(.*)$"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "tailwindFunctions": ["clsx"]
 }

.vscode/settings.json

@@ -38,4 +38,5 @@
   },
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
+  "tailwindCSS.experimental.classRegex": [["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]
 }

.yarnrc.yml

@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://mskelton.dev/yarn-outdated/v3"
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

package.json

@@ -28,7 +28,7 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@tanstack/eslint-plugin-query": "^5.28.6",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
@@ -41,15 +41,17 @@
     "eslint-config-prettier": "^8.8.0",
     "jest": "^29.6.3",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.13",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.4"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
   "main": "dist/src/index.js",
-  "packageManager": "yarn@4.0.1",
+  "packageManager": "yarn@4.5.0",
   "private": true,
   "repository": {
     "type": "git",

src/AppLayout.tsx

@@ -20,11 +20,11 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
       </Head>
       <div
         style={styles.container}
-        className="relative w-full min-w-screen h-full min-h-screen flex flex-col justify-between bg-blue-500"
+        className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-blue-500"
       >
         {/* <InfoBanner /> */}
         <Header pathName={pathName} />
-        <div className="max-w-5xl mx-auto grow">
+        <div className="mx-auto max-w-5xl grow">
           <main style={styles.main} className="relative min-h-full pt-3">
             {children}
           </main>

src/components/buttons/RadioButtons.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export function RadioButtons({ options, selected, onChange, label }: Props) {
   return (
-    <div className="rounded border border-gray-200 overflow-hidden">
+    <div className="overflow-hidden rounded border border-gray-200">
       <RadioGroup value={selected} onChange={onChange}>
         {label && <RadioGroup.Label className="sr-only">{label}</RadioGroup.Label>}
         <div className="flex items-center divide-x">
@@ -18,8 +18,7 @@ export function RadioButtons({ options, selected, onChange, label }: Props) {
               key={o.value}
               value={o.value}
               className={({ checked }) =>
-                `${checked ? 'bg-blue-500 hover:bg-blue-400' : 'bg-white hover:bg-gray-100'}
-                    relative flex cursor-pointer px-2 py-1.5 outline-none`
+                `${checked ? 'bg-blue-500 hover:bg-blue-400' : 'bg-white hover:bg-gray-100'} relative flex cursor-pointer px-2 py-1.5 outline-none`
               }
             >
               {({ checked }) => (

src/components/errors/ErrorBoundary.tsx

@@ -29,7 +29,7 @@ export class ErrorBoundary extends Component<any, ErrorBoundaryState> {
     if (errorInfo) {
       const details = errorInfo.message || JSON.stringify(errorInfo);
       return (
-        <div className="w-screen h-screen flex items-center justify-center bg-gray-50">
+        <div className="flex h-screen w-screen items-center justify-center bg-gray-50">
           <div className="flex flex-col items-center">
             <Image src={ErrorIcon} width={80} height={80} alt="" />
             <h1 className="mt-5 text-lg">Fatal Error Occurred</h1>

src/components/icons/HelpIcon.tsx

@@ -16,7 +16,7 @@ function _HelpIcon({ text, size = 16 }: { text: string; size?: number }) {
       title="Help"
       width={size}
       height={size}
-      className="border border-gray-400 rounded-full p-px"
+      className="rounded-full border border-gray-400 p-px"
       {...tooltipProps}
     >
       <QuestionMarkIcon height={size} width={size} color={Color.lightGray} className="opacity-50" />

src/components/input/SelectField.tsx

@@ -19,7 +19,7 @@ export function SelectField(props: Props) {
 
   return (
     <select
-      className={`px-2 py-1 text-sm font-light border border-gray-400 rounded bg-transparent invalid:text-gray-400 ${
+      className={`rounded border border-gray-400 bg-transparent px-2 py-1 text-sm font-light invalid:text-gray-400 ${
         classes || ''
       }`}
       {...passThruProps}

src/components/layout/Card.tsx

@@ -7,6 +7,6 @@ interface Props {
 
 export function Card({ className, padding = 'p-4 sm:p-5', children }: PropsWithChildren<Props>) {
   return (
-    <div className={`bg-white rounded-xl overflow-auto ${padding} ${className}`}>{children}</div>
+    <div className={`overflow-auto rounded-xl bg-white ${padding} ${className}`}>{children}</div>
   );
 }

src/components/layout/HrDivider.tsx

@@ -4,5 +4,5 @@ interface Props {
 
 export function HrDivider(props: Props) {
   const { classes } = props;
-  return <hr className={`w-full h-px border-none bg-gray-300 ${classes}`} />;
+  return <hr className={`h-px w-full border-none bg-gray-300 ${classes}`} />;
 }

src/components/nav/Footer.tsx

@@ -33,13 +33,13 @@ const footerLinks3 = [
 
 export function Footer() {
   return (
-    <footer className="text-white px-8 pt-14 pb-5 bg-gradient-to-b from-transparent to-black/40">
-      <div className="flex flex-col sm:flex-row gap-10 items-center justify-between">
+    <footer className="bg-gradient-to-b from-transparent to-black/40 px-8 pb-5 pt-14 text-white">
+      <div className="flex flex-col items-center justify-between gap-10 sm:flex-row">
         <div className="flex items-center justify-center">
-          <div className="ml-2 w-12 sm:w-14 h-12 sm:h-14">
+          <div className="ml-2 h-12 w-12 sm:h-14 sm:w-14">
             <HyperlaneLogo color={Color.white} />
           </div>
-          <div className="text-lg sm:text-xl font-medium ml-6 space-y-1 ">
+          <div className="ml-6 space-y-1 text-lg font-medium sm:text-xl">
             <div>Go interchain</div>
             <div>with Hyperlane</div>
           </div>
@@ -58,7 +58,7 @@ export function Footer() {
               </li>
             ))}
           </ul>
-          <ul className={`${styles.linkCol}  mr-14`}>
+          <ul className={`${styles.linkCol} mr-14`}>
             {footerLinks2.map((item) => (
               <li key={item.title}>
                 <Link

src/components/nav/Header.tsx

@@ -25,24 +25,24 @@ export function Header({ pathName }: { pathName: string }) {
 
   return (
     <header
-      className={`z-10 sticky top-0 px-2 sm:px-6 lg:px-12 w-full bg-blue-500 transition-all ease-in-out duration-200 ${
-        animateHeader ? 'py-1 border-b border-white' : 'py-4 sm:py-5'
+      className={`sticky top-0 z-10 w-full bg-blue-500 px-2 transition-all duration-200 ease-in-out sm:px-6 lg:px-12 ${
+        animateHeader ? 'border-b border-white py-1' : 'py-4 sm:py-5'
       }`}
     >
       <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center">
           <div
             className={`flex items-center ${
               animateHeader && 'scale-90'
-            } transition-all ease-in-out duration-500`}
+            } transition-all duration-500 ease-in-out`}
           >
-            <Image src={Logo} alt="" className="h-7 sm:h-8 w-auto" />
-            <Image src={Name} alt="Hyperlane" className="hidden sm:block h-6 w-auto mt-1 ml-3" />
-            <Image src={Explorer} alt="Explorer" className="h-5 sm:h-6 w-auto mt-1 ml-2.5" />
+            <Image src={Logo} alt="" className="h-7 w-auto sm:h-8" />
+            <Image src={Name} alt="Hyperlane" className="ml-3 mt-1 hidden h-6 w-auto sm:block" />
+            <Image src={Explorer} alt="Explorer" className="ml-2.5 mt-1 h-5 w-auto sm:h-6" />
           </div>
         </Link>
         <nav
-          className={`hidden sm:flex sm:space-x-8 sm:items-center ${
+          className={`hidden sm:flex sm:items-center sm:space-x-8 ${
             !showSearch ? 'md:space-x-10' : ''
           }`}
         >
@@ -66,7 +66,7 @@ export function Header({ pathName }: { pathName: string }) {
           {showSearch && <MiniSearchBar />}
         </nav>
         {/* Dropdown menu, used on mobile */}
-        <div className="relative flex item-center sm:hidden mr-2">
+        <div className="item-center relative mr-2 flex sm:hidden">
           <DropdownMenu
             button={<DropdownButton />}
             buttonClassname="hover:opacity-80 active:opacity-70 transition-all"
@@ -102,7 +102,7 @@ export function Header({ pathName }: { pathName: string }) {
 
 function DropdownButton() {
   return (
-    <div className="px-4 py-1 flex flex-col items-center border border-white bg-pink-500 rounded-lg">
+    <div className="flex flex-col items-center rounded-lg border border-white bg-pink-500 px-4 py-1">
       <WideChevron
         width={10}
         height={14}
@@ -137,12 +137,12 @@ function MobileNavLink({
   return (
     <Link
       href={href}
-      className="py-4 pl-3 flex items-center cursor-pointer hover:underline active:opacity-80 decoration-4 decoration-pink-500 underline-offset-[2px] transition-all"
+      className="flex cursor-pointer items-center py-4 pl-3 decoration-pink-500 decoration-4 underline-offset-[2px] transition-all hover:underline active:opacity-80"
       onClick={closeDropdown}
       rel={isExternal ? 'noopener noreferrer' : undefined}
       target={isExternal ? '_blank' : undefined}
     >
-      <span className="text-xl font-medium text-white capitalize">{children}</span>
+      <span className="text-xl font-medium capitalize text-white">{children}</span>
     </Link>
   );
 }

src/components/nav/InfoBanner.tsx

@@ -4,7 +4,7 @@ export function InfoBanner() {
       href="https://explorer-v2.hyperlane.xyz"
       target="_blank"
       rel="noopener noreferrer"
-      className="block py-1.5 w-full text-white text-center text-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800 transition-all duration-300"
+      className="block w-full bg-blue-600 py-1.5 text-center text-sm text-white transition-all duration-300 hover:bg-blue-700 active:bg-blue-800"
     >
       This is the explorer for Hyperlane version 3.{' '}
       <span className="underline underline-offset-2">Use version 2</span>

src/components/search/MiniSearchBar.tsx

@@ -23,15 +23,15 @@ export function MiniSearchBar() {
   return (
     <Formik<FormValues> initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
-        <div className="p-1 flex items-center bg-white rounded-full transition-all">
+        <div className="flex items-center rounded-full bg-white p-1 transition-all">
           <Field
             id="search"
             name="search"
             type="search"
             placeholder="Hash or address"
-            className="w-32 focus:w-64 py-2 px-2.5 h-8 text-sm font-light placeholder:text-gray-600 rounded-full focus:outline-none transition-[width] ease-in-out duration-500"
+            className="h-8 w-32 rounded-full px-2.5 py-2 text-sm font-light transition-[width] duration-500 ease-in-out placeholder:text-gray-600 focus:w-64 focus:outline-none"
           />
-          <div className="h-8 w-8 flex items-center justify-center rounded-full bg-pink-500">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500">
             <IconButton type="submit" title="Search">
               <SearchIcon width={14} height={14} color={Color.white} />
             </IconButton>

src/components/search/SearchBar.tsx

@@ -20,15 +20,15 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
   };
 
   return (
-    <div className="p-1 flex items-center bg-white w-full rounded-full transition-all duration-500">
+    <div className="flex w-full items-center rounded-full bg-white p-1 transition-all duration-500">
       <input
         value={value}
         onChange={onChange}
         type="search"
         placeholder={placeholder}
-        className="p-1 sm:px-4 md:px-5 flex-1 h-10 sm:h-12 font-light rounded-full placeholder:text-gray-600 focus:outline-none"
+        className="h-10 flex-1 rounded-full p-1 font-light placeholder:text-gray-600 focus:outline-none sm:h-12 sm:px-4 md:px-5"
       />
-      <div className="h-10 sm:h-12 w-10 sm:w-12 flex items-center justify-center rounded-full bg-pink-500">
+      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500 sm:h-12 sm:w-12">
         {isFetching && (
           <div className="scale-[30%] sm:scale-[35%]">
             <Spinner classes="invert" />

src/components/search/SearchFilterBar.tsx

@@ -82,8 +82,8 @@ function ChainSelector({
       <button
         type="button"
         className={clsx(
-          'text-sm sm:min-w-[5.8rem] px-1.5 sm:px-2.5 py-1 flex items-center justify-center font-medium rounded-lg border border-pink-500 hover:opacity-80 active:opacity-70 transition-all',
-          value ? 'bg-pink-500 text-white pr-7 sm:pr-8' : 'text-pink-500',
+          'flex items-center justify-center rounded-lg border border-pink-500 px-1.5 py-1 text-sm font-medium transition-all hover:opacity-80 active:opacity-70 sm:min-w-[5.8rem] sm:px-2.5',
+          value ? 'bg-pink-500 pr-7 text-white sm:pr-8' : 'text-pink-500',
         )}
         onClick={open}
       >
@@ -156,25 +156,25 @@ function DatetimeSelector({
           </>
         }
         buttonClassname={clsx(
-          'text-sm px-2 sm:px-3 py-1 flex items-center justify-center font-medium border border-pink-500 rounded-lg hover:opacity-80 active:opacity-70 transition-all',
-          hasValue ? ' bg-pink-500 text-white pr-7 sm:pr-8' : 'text-pink-500',
+          'flex items-center justify-center rounded-lg border border-pink-500 px-2 py-1 text-sm font-medium transition-all hover:opacity-80 active:opacity-70 sm:px-3',
+          hasValue ? 'bg-pink-500 pr-7 text-white sm:pr-8' : 'text-pink-500',
         )}
         panelClassname="w-60"
       >
         {({ close }) => (
           <div className="p-4" key="date-time-selector">
             <div className="flex items-center justify-between">
-              <h3 className="text-blue-500 font-medium">Time Range</h3>
+              <h3 className="font-medium text-blue-500">Time Range</h3>
               <div className="flex pt-1">
                 <TextButton classes="text-sm font-medium text-pink-500" onClick={onClickClear}>
                   Clear
                 </TextButton>
               </div>
             </div>
             <div className="flex flex-col">
-              <h4 className="mt-3 mb-1 text-gray-500 text-sm font-medium">Start Time</h4>
+              <h4 className="mb-1 mt-3 text-sm font-medium text-gray-500">Start Time</h4>
               <DatetimeField timestamp={startTime} onChange={setStartTime} />
-              <h4 className="mt-3 mb-1 text-gray-500 text-sm font-medium">End Time</h4>
+              <h4 className="mb-1 mt-3 text-sm font-medium text-gray-500">End Time</h4>
               <DatetimeField timestamp={endTime} onChange={setEndTime} />
             </div>
             <SolidButton
@@ -194,7 +194,7 @@ function DatetimeSelector({
 function ClearButton({ onClick }: { onClick: () => void }) {
   return (
     <div className="absolute right-1.5 top-1/2 -translate-y-1/2">
-      <IconButton onClick={onClick} className="bg-pink-300 p-1.5 rounded-full">
+      <IconButton onClick={onClick} className="rounded-full bg-pink-300 p-1.5">
         <XIcon color="white" height={9} width={9} />
       </IconButton>
     </div>

src/components/search/SearchStates.tsx

@@ -12,9 +12,9 @@ export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetc
     // Absolute position for overlaying cross-fade
     <div className="absolute left-0 right-0 top-10">
       <Fade show={show}>
-        <div className="flex justify-center my-10">
-          <div className="flex flex-col items-center justify-center max-w-md px-3 py-5">
-            <div className="flex items-center justify-center scale-90">
+        <div className="my-10 flex justify-center">
+          <div className="flex max-w-md flex-col items-center justify-center px-3 py-5">
+            <div className="flex scale-90 items-center justify-center">
               <Spinner />
             </div>
             <div className="mt-4 text-center font-light leading-loose text-gray-700">
@@ -42,8 +42,8 @@ export function SearchError({
     // Absolute position for overlaying cross-fade
     <div className="absolute left-0 right-0 top-10">
       <Fade show={show}>
-        <div className="flex justify-center my-10">
-          <div className="flex flex-col items-center justify-center max-w-md px-3 py-5">
+        <div className="my-10 flex justify-center">
+          <div className="flex max-w-md flex-col items-center justify-center px-3 py-5">
             <Image src={imgSrc} width={imgWidth} className="opacity-80" alt="" />
             <div className="mt-4 text-center font-light leading-loose text-gray-700">{text}</div>
           </div>

src/features/chains/MissingChainConfigToast.tsx

@@ -8,8 +8,8 @@ export function MissingChainConfigToast({
   const errorDesc = chainId
     ? `chain ID: ${chainId}`
     : domainId
-    ? `domain ID: ${domainId}`
-    : 'unknown message chain';
+      ? `domain ID: ${domainId}`
+      : 'unknown message chain';
   return (
     <div>
       <span>{`No chain config found for ${errorDesc}. You can add a config in the origin/destination chain selector.`}</span>

src/features/deliveryStatus/useMessageDeliveryStatus.tsx

@@ -25,7 +25,7 @@ export function useMessageDeliveryStatus({
   const registry = useRegistry();
 
   const { data, error, isFetching } = useQuery({
-    queryKey: ['messageDeliveryStatus', message, !!multiProvider],
+    queryKey: ['messageDeliveryStatus', message, !!multiProvider, registry, chainMetadataOverrides],
     queryFn: async () => {
       if (!multiProvider || message.status == MessageStatus.Delivered) {
         return { message };