chore: Auto-format tailwind classes (#287)

- 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.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

package.json

@@ -51,22 +51,24 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.2.5",
-    "@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.2.7",
     "@types/react-dom": "^18.2.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.41.0",
+    "eslint": "^8.49.0",
     "eslint-config-next": "^13.4.3",
     "eslint-config-prettier": "^8.8.0",
     "jest": "^29.6.3",
     "jest-transform-yaml": "^1.1.2",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
-    "tailwindcss": "^3.3.2",
+    "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.3.3",
     "yaml": "^2.3.4",
@@ -75,7 +77,7 @@
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
   "main": "dist/src/index.js",
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.5.0",
   "private": true,
   "repository": {
     "type": "git",

src/components/animation/SmallSpinner.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 function _SmallSpinner({ className }: { className?: string }) {
   return (
     <svg
-      className={`animate-spin h-5 w-5 text-black ${className}`}
+      className={`h-5 w-5 animate-spin text-black ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"

src/components/banner/WarningBanner.tsx

@@ -17,8 +17,8 @@ export function WarningBanner({
 }>) {
   return (
     <div
-      className={`flex items-center justify-between gap-2 px-4 bg-amber-400 text-sm ${
-        isVisible ? 'max-h-28 py-2 mb-2' : 'max-h-0 mb-0'
+      className={`flex items-center justify-between gap-2 bg-amber-400 px-4 text-sm ${
+        isVisible ? 'mb-2 max-h-28 py-2' : 'mb-0 max-h-0'
       } overflow-hidden transition-all duration-500 ${className}`}
     >
       <div className="flex items-center gap-2">
@@ -28,7 +28,7 @@ export function WarningBanner({
       <button
         type="button"
         onClick={onClick}
-        className="bg-white/30 rounded-full px-2.5 py-1 text-center hover:bg-white/50 active:bg-white/60"
+        className="rounded-full bg-white/30 px-2.5 py-1 text-center hover:bg-white/50 active:bg-white/60"
       >
         {cta}
       </button>

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/layout/AppLayout.tsx

@@ -16,11 +16,11 @@ export function AppLayout({ children }: PropsWithChildren) {
       <div
         style={styles.container}
         id="app-content"
-        className="relative flex flex-col justify-between h-full min-h-screen w-full min-w-screen"
+        className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between"
       >
         <Header />
-        <div className="sm:px-4 mx-auto grow flex items-center max-w-screen-xl">
-          <main className="w-full flex-1 my-4 flex items-center justify-center">{children}</main>
+        <div className="mx-auto flex max-w-screen-xl grow items-center sm:px-4">
+          <main className="my-4 flex w-full flex-1 items-center justify-center">{children}</main>
         </div>
         <Footer />
       </div>

src/components/layout/Card.tsx

@@ -7,7 +7,7 @@ interface Props {
 export function Card({ className, children }: PropsWithChildren<Props>) {
   return (
     <div
-      className={`${cardStyles.padding} relative bg-white rounded-2xl overflow-auto ${className}`}
+      className={`${cardStyles.padding} relative overflow-auto rounded-2xl bg-white ${className}`}
     >
       {children}
     </div>

src/components/nav/Footer.tsx

@@ -21,9 +21,9 @@ const footerLinks3 = [
 
 export function Footer() {
   return (
-    <footer className="text-white relative">
-      <div className="relative z-10 px-8 pb-5 pt-2 sm:pt-0 bg-gradient-to-b from-transparent to-black/40">
-        <div className="flex flex-col sm:flex-row gap-8 sm:gap-10 items-center justify-between">
+    <footer className="relative text-white">
+      <div className="relative z-10 bg-gradient-to-b from-transparent to-black/40 px-8 pb-5 pt-2 sm:pt-0">
+        <div className="flex flex-col items-center justify-between gap-8 sm:flex-row sm:gap-10">
           <FooterLogo />
           <FooterNav />
         </div>
@@ -35,10 +35,10 @@ export function Footer() {
 function FooterLogo() {
   return (
     <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 fill={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>

src/components/nav/Header.tsx

@@ -8,14 +8,14 @@ import Title from '../../images/logos/app-title.svg';
 
 export function Header() {
   return (
-    <header className="px-2 sm:px-6 lg:px-12 pt-3 pb-2 w-full">
+    <header className="w-full px-2 pb-2 pt-3 sm:px-6 lg:px-12">
       <div className="flex items-start justify-between">
-        <Link href="/" className="py-2 flex items-center">
+        <Link href="/" className="flex items-center py-2">
           <Image src={Logo} width={24} alt="" />
-          <Image src={Name} width={130} alt="" className="hidden sm:block mt-0.5 ml-2" />
-          <Image src={Title} width={210} alt="" className="mt-0.5 ml-2 pb-px" />
+          <Image src={Name} width={130} alt="" className="ml-2 mt-0.5 hidden sm:block" />
+          <Image src={Title} width={210} alt="" className="ml-2 mt-0.5 pb-px" />
         </Link>
-        <div className="flex flex-col items-end md:flex-row-reverse md:items-start gap-2">
+        <div className="flex flex-col items-end gap-2 md:flex-row-reverse md:items-start">
           <WalletControlBar />
         </div>
       </div>

src/components/tip/TipCard.tsx

@@ -12,21 +12,21 @@ export function TipCard() {
   const [show, setShow] = useState(config.showTipBox);
   if (!show) return null;
   return (
-    <Card className="w-100 sm:w-[31rem] p-2">
+    <Card className="w-100 p-2 sm:w-[31rem]">
       <h2 className="text-primary-500">Bridge Tokens with Hyperlane Warp Routes!</h2>
       <div className="flex items-end justify-between">
-        <p className="mt-1 text-xs max-w-[75%]">
+        <p className="mt-1 max-w-[75%] text-xs">
           Warp Routes make it easy to permissionlessly take your tokens interchain. Fork this
           template to get started!
         </p>
         <a
           href={links.github}
           target="_blank"
           rel="noopener noreferrer"
-          className="ml-2 px-3 py-1.5 flex items-center bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-xs sm:text-sm text-primary-500 rounded-lg transition-all"
+          className="ml-2 flex items-center rounded-lg bg-gray-100 px-3 py-1.5 text-xs text-primary-500 transition-all hover:bg-gray-200 active:bg-gray-300 sm:text-sm"
         >
           <Image src={InfoCircle} width={12} alt="" />
-          <span className="hidden sm:inline ml-1.5 text-sm">More</span>
+          <span className="ml-1.5 hidden text-sm sm:inline">More</span>
         </a>
       </div>
       <div className="absolute right-3 top-3">

src/context/WarpContext.tsx

@@ -31,7 +31,7 @@ export function WarpContext({ children }: PropsWithChildren<unknown>) {
 
   if (isLoading || !warpContext)
     return (
-      <div className="flex items-center justify-center h-screen bg-primary-500">
+      <div className="flex h-screen items-center justify-center bg-primary-500">
         <Spinner classes="opacity-50" white />
       </div>
     );

src/features/chains/ChainSelectField.tsx

@@ -48,7 +48,7 @@ export function ChainSelectField({ name, label, chains, onChange, disabled }: Pr
           <div className="max-w-[1.4rem] sm:max-w-fit">
             <ChainLogo chainName={field.value} size={32} />
           </div>
-          <div className="flex flex-col gap-1 items-start">
+          <div className="flex flex-col items-start gap-1">
             <label htmlFor={name} className="text-xs text-gray-600">
               {label}
             </label>

src/features/chains/ChainSelectModal.tsx

@@ -31,7 +31,7 @@ export function ChainSelectListModal({
         {sortedChains.map((c) => (
           <button
             key={c}
-            className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
+            className="flex items-center rounded px-2 py-1.5 text-sm transition-all duration-200 hover:bg-gray-100 active:bg-gray-200"
             onClick={onSelectChain(c)}
           >
             <ChainLogo chainName={c} size={16} background={false} />

src/features/tokens/SelectTokenIdField.tsx

@@ -82,14 +82,14 @@ export function SelectTokenIdModal({
           tokenIds.map((id) => (
             <button
               key={id}
-              className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
+              className="flex items-center rounded px-2 py-1.5 text-sm transition-all duration-200 hover:bg-gray-100 active:bg-gray-200"
               onClick={onSelectTokenId(id)}
             >
               <span className="ml-2">{id}</span>
             </button>
           ))
         ) : (
-          <div className="py-1.5 px-2 text-sm text-gray-500 transition-all duration-200">
+          <div className="px-2 py-1.5 text-sm text-gray-500 transition-all duration-200">
             No token ids found
           </div>
         )}

src/features/tokens/TokenListModal.tsx

@@ -107,9 +107,9 @@ export function TokenList({
       {tokens.length ? (
         tokens.map((t, i) => (
           <button
-            className={`-mx-2 py-2 px-2 rounded mb-2 flex items-center ${
+            className={`-mx-2 mb-2 flex items-center rounded px-2 py-2 ${
               t.disabled ? 'opacity-50' : 'hover:bg-gray-200'
-            } transition-all duration-250`}
+            } duration-250 transition-all`}
             key={i}
             type="button"
             disabled={t.disabled}
@@ -118,15 +118,15 @@ export function TokenList({
             <div className="shrink-0">
               <TokenIcon token={t.token} size={30} />
             </div>
-            <div className="ml-2 text-left shrink-0">
-              <div className="text-sm w-14 truncate">{t.token.symbol || 'Unknown'}</div>
-              <div className="text-xs text-gray-500 w-14 truncate">{t.token.name || 'Unknown'}</div>
+            <div className="ml-2 shrink-0 text-left">
+              <div className="w-14 truncate text-sm">{t.token.symbol || 'Unknown'}</div>
+              <div className="w-14 truncate text-xs text-gray-500">{t.token.name || 'Unknown'}</div>
             </div>
-            <div className="ml-2 text-left shrink min-w-0">
-              <div className="text-xs w-full truncate">
+            <div className="ml-2 min-w-0 shrink text-left">
+              <div className="w-full truncate text-xs">
                 {t.token.addressOrDenom || 'Native chain token'}
               </div>
-              <div className=" mt-0.5 text-xs flex space-x-1">
+              <div className="mt-0.5 flex space-x-1 text-xs">
                 <span>{`Decimals: ${t.token.decimals}`}</span>
                 <span>-</span>
                 <span>{`Chain: ${getChainDisplayName(t.token.chainName)}`}</span>
@@ -146,9 +146,9 @@ export function TokenList({
           </button>
         ))
       ) : (
-        <div className="my-8 text-gray-500 text-center">
+        <div className="my-8 text-center text-gray-500">
           <div>No tokens found</div>
-          <div className="mt-2 text-sm ">Try a different destination chain or search query</div>
+          <div className="mt-2 text-sm">Try a different destination chain or search query</div>
         </div>
       )}
     </div>

src/features/tokens/approval.ts

@@ -10,6 +10,7 @@ export function useIsApproveRequired(token?: IToken, amount?: string, enabled =
   const owner = useAccountAddressForChain(token?.chainName);
 
   const { isLoading, isError, error, data } = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: ['useIsApproveRequired', owner, amount, token?.addressOrDenom],
     queryFn: async () => {
       if (!token || !owner || !amount) return false;

src/features/tokens/balances.ts

@@ -10,6 +10,7 @@ import { useAccountAddressForChain } from '../wallet/hooks/multiProtocol';
 
 export function useBalance(chain?: ChainName, token?: IToken, address?: Address) {
   const { isLoading, isError, error, data } = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: ['useBalance', chain, address, token?.addressOrDenom],
     queryFn: () => {
       if (!chain || !token || !address || !isValidAddress(address, token.protocol)) return null;