Bump decode-uri-component from 0.2.0 to 0.2.2 (#121)

Bumps
[decode-uri-component](https://github.com/SamVerschueren/decode-uri-component)
from 0.2.0 to 0.2.2.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.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

@@ -16,7 +16,7 @@
     "ethers": "^5.7.2",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
-    "next": "^13.5.6",
+    "next": "^13.5.7",
     "nextjs-cors": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -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,7 +41,9 @@
     "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"
@@ -49,7 +51,7 @@
   "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>

src/components/nav/Header.tsx

@@ -25,8 +25,8 @@ 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">
@@ -34,15 +34,15 @@ export function Header({ pathName }: { pathName: string }) {
           <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,15 +156,15 @@ 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
@@ -172,9 +172,9 @@ function DatetimeSelector({
               </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/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 };

src/features/messages/MessageDetails.tsx

@@ -99,8 +99,8 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
 
   return (
     <>
-      <Card className="flex items-center justify-between px-1 rounded-full">
-        <h2 className="text-blue-500 font-medium">{`${
+      <Card className="flex items-center justify-between rounded-full px-1">
+        <h2 className="font-medium text-blue-500">{`${
           isIcaMsg ? 'ICA ' : ''
         } Message ${trimToLength(msgId, 6)} to ${getChainDisplayName(
           multiProvider,
@@ -113,7 +113,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
           isError={isError}
         />
       </Card>
-      <div className="flex flex-wrap items-stretch justify-between mt-3 md:mt-4 gap-3 md:gap-4">
+      <div className="mt-3 flex flex-wrap items-stretch justify-between gap-3 md:mt-4 md:gap-4">
         <OriginTransactionCard
           chainId={originChainId}
           domainId={originDomainId}
@@ -170,7 +170,7 @@ function StatusHeader({
   let icon: React.ReactNode;
   if (isFetching) {
     icon = (
-      <div className="w-7 h-7 overflow-hidden flex items-center justify-center">
+      <div className="flex h-7 w-7 items-center justify-center overflow-hidden">
         <div className="scale-[35%]">
           <Spinner />
         </div>
@@ -185,7 +185,7 @@ function StatusHeader({
 
   return (
     <div className="flex items-center">
-      <h3 className="text-blue-500 font-medium lg mr-3">{text}</h3>
+      <h3 className="lg mr-3 font-medium text-blue-500">{text}</h3>
       {icon}
     </div>
   );

src/features/messages/MessageSearch.tsx

@@ -80,9 +80,9 @@ export function MessageSearch() {
         isFetching={isAnyFetching}
         placeholder="Search by address, hash, or message id"
       />
-      <Card className="relative w-full min-h-[38rem] mt-4" padding="">
-        <div className="px-2 pt-3.5 pb-3 sm:px-4 md:px-5 flex items-center justify-between">
-          <h2 className="w-min sm:w-fit pl-0.5 text-blue-500 font-medium">
+      <Card className="relative mt-4 min-h-[38rem] w-full" padding="">
+        <div className="flex items-center justify-between px-2 pb-3 pt-3.5 sm:px-4 md:px-5">
+          <h2 className="w-min pl-0.5 font-medium text-blue-500 sm:w-fit">
             {!hasInput ? 'Latest Messages' : 'Search Results'}
           </h2>
           <SearchFilterBar

src/features/messages/MessageTable.tsx

@@ -25,11 +25,11 @@ export function MessageTable({
   const multiProvider = useMultiProvider();
 
   return (
-    <table className="w-full mb-1">
+    <table className="mb-1 w-full">
       <thead>
         <tr className="border-b border-gray-100">
-          <th className={`${styles.header} xs:text-left pl-3 sm:pl-6`}>Origin</th>
-          <th className={`${styles.header} xs:text-left pl-1 sm:pl-2`}>Destination</th>
+          <th className={`${styles.header} pl-3 xs:text-left sm:pl-6`}>Origin</th>
+          <th className={`${styles.header} pl-1 xs:text-left sm:pl-2`}>Destination</th>
           <th className={`${styles.header} hidden sm:table-cell`}>Sender</th>
           <th className={`${styles.header} hidden sm:table-cell`}>Recipient</th>
           <th className={`${styles.header} hidden lg:table-cell`}>Origin Tx</th>
@@ -40,7 +40,7 @@ export function MessageTable({
         {messageList.map((m) => (
           <tr
             key={`message-${m.id}`}
-            className={`relative cursor-pointer hover:bg-pink-50 active:bg-pink-100 border-b border-blue-50 last:border-0 ${
+            className={`relative cursor-pointer border-b border-blue-50 last:border-0 hover:bg-pink-50 active:bg-pink-100 ${
               isFetching && 'blur-xs'
             } transition-all duration-500`}
           >
@@ -96,7 +96,7 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
       </LinkCell>
       {statusIcon && (
         <LinkCell id={msgId} base64={base64} tdClasses="w-0">
-          <span className="absolute right-4 top-1/2 transform -translate-y-1/2">
+          <span className="absolute right-4 top-1/2 -translate-y-1/2 transform">
             <Image
               src={statusIcon}
               width={18}

src/features/messages/cards/CodeBlock.tsx

@@ -11,7 +11,7 @@ export function LabelAndCodeBlock({ label, value }: { label: string; value: stri
 
 export function CodeBlock({ value }: { value: string }) {
   return (
-    <div className="relative max-w-full break-words py-2 pl-2 pr-9 mt-2 min-h-[2rem] bg-gray-100 text-sm font-mono rounded">
+    <div className="relative mt-2 min-h-[2rem] max-w-full break-words rounded bg-gray-100 py-2 pl-2 pr-9 font-mono text-sm">
       {value}
       <CopyButton
         copyValue={value}

src/features/messages/cards/ContentDetailsCard.tsx

@@ -72,7 +72,7 @@ export function ContentDetailsCard({
       <div className="flex items-center justify-between">
         <Image src={EnvelopeInfo} width={28} height={28} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
-          <h3 className="text-blue-500 font-medium text-md mr-2">Message Details</h3>
+          <h3 className="mr-2 text-md font-medium text-blue-500">Message Details</h3>
           <HelpIcon text="Immutable information about the message itself such as its contents." />
         </div>
       </div>

src/features/messages/cards/GasDetailsCard.tsx

@@ -70,11 +70,11 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
     }, [decimals, message, igpPayments]);
 
   return (
-    <Card className="w-full space-y-4 relative">
+    <Card className="relative w-full space-y-4">
       <div className="flex items-center justify-between">
         <Image src={FuelPump} width={24} height={24} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
-          <h3 className="text-blue-500 font-medium text-md mr-2">Interchain Gas Payments</h3>
+          <h3 className="mr-2 text-md font-medium text-blue-500">Interchain Gas Payments</h3>
           <HelpIcon text="Amounts paid to the Interchain Gas Paymaster for message delivery." />
         </div>
       </div>
@@ -84,12 +84,12 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
           href={docLinks.gas}
           target="_blank"
           rel="noopener noreferrer"
-          className="cursor-pointer text-blue-500 hover:text-blue-400 active:text-blue-300 transition-all"
+          className="cursor-pointer text-blue-500 transition-all hover:text-blue-400 active:text-blue-300"
         >
           Learn more about gas on Hyperlane.
         </a>
       </p>
-      <div className="flex flex-wrap gap-x-4 gap-y-4 mr-36">
+      <div className="mr-36 flex flex-wrap gap-x-4 gap-y-4">
         <KeyValueRow
           label="Payment count:"
           labelWidth="w-28"
@@ -124,11 +124,11 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
         />
       </div>
       {!!paymentsWithAddr.length && (
-        <div className="md:pt-2 pb-8 md:pb-6">
+        <div className="pb-8 md:pb-6 md:pt-2">
           <IgpPaymentsTable payments={paymentsWithAddr} />
         </div>
       )}
-      <div className="absolute right-2 bottom-2">
+      <div className="absolute bottom-2 right-2">
         <RadioButtons
           options={unitOptions}
           selected={decimals}
@@ -142,7 +142,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
 
 function IgpPaymentsTable({ payments }: { payments: Array<GasPayment & { contract: Address }> }) {
   return (
-    <table className="rounded border-collapse overflow-hidden">
+    <table className="border-collapse overflow-hidden rounded">
       <thead>
         <tr>
           <th className={style.th}>IGP Address</th>

src/features/messages/cards/IcaDetailsCard.tsx

@@ -26,11 +26,11 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
   return (
     <Card className="w-full space-y-4">
       <div className="flex items-center justify-between">
-        <div className="relative -top-px -left-0.5">
+        <div className="relative -left-0.5 -top-px">
           <Image src={AccountStar} width={28} height={28} alt="" className="opacity-80" />
         </div>
         <div className="flex items-center pb-1">
-          <h3 className="text-blue-500 font-medium text-md mr-2">ICA Details</h3>
+          <h3 className="mr-2 text-md font-medium text-blue-500">ICA Details</h3>
           <HelpIcon text="Extra information for messages from/to Interchain Accounts." />
         </div>
       </div>
@@ -66,7 +66,7 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
                 <label className="text-sm text-gray-500">{`Function call ${i + 1} of ${
                   decodeResult.calls.length
                 }:`}</label>
-                <div className="mt-2 pl-4 border-l-2 border-gray-400 space-y-2.5">
+                <div className="mt-2 space-y-2.5 border-l-2 border-gray-400 pl-4">
                   <KeyValueRow
                     label="Destination address:"
                     labelWidth="w-32"
@@ -94,7 +94,7 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
           )}
         </>
       ) : (
-        <div className="py-4 text-red-500 italic">
+        <div className="py-4 italic text-red-500">
           Unable to decode ICA message body, no details currently available.
         </div>
       )}

src/features/messages/cards/IsmDetailsCard.tsx

@@ -17,11 +17,11 @@ interface Props {
 
 export function IsmDetailsCard({ ismDetails, blur }: Props) {
   return (
-    <Card className="w-full space-y-4 relative">
+    <Card className="relative w-full space-y-4">
       <div className="flex items-center justify-between">
         <Image src={ShieldLock} width={24} height={24} alt="" className="opacity-80" />
         <div className="flex items-center pb-1">
-          <h3 className="text-blue-500 font-medium text-md mr-2">Interchain Security Modules</h3>
+          <h3 className="mr-2 text-md font-medium text-blue-500">Interchain Security Modules</h3>
           <HelpIcon text="Details about the Interchain Security Modules (ISM) that must verify this message." />
         </div>
       </div>
@@ -31,7 +31,7 @@ export function IsmDetailsCard({ ismDetails, blur }: Props) {
           href={docLinks.ism}
           target="_blank"
           rel="noopener noreferrer"
-          className="cursor-pointer text-blue-500 hover:text-blue-400 active:text-blue-300 transition-all"
+          className="cursor-pointer text-blue-500 transition-all hover:text-blue-400 active:text-blue-300"
         >
           Learn more about ISMs.
         </a>

src/features/messages/cards/KeyValueRow.tsx

@@ -29,9 +29,9 @@ export function KeyValueRow({
   return (
     <div className={`flex items-center pl-px font-light ${classes}`}>
       <label className={`text-sm text-gray-500 ${labelWidth}`}>{label}</label>
-      <div className={`text-sm ml-1 truncate ${displayWidth || ''} ${blurValue && 'blur-xs'}`}>
+      <div className={`ml-1 truncate text-sm ${displayWidth || ''} ${blurValue && 'blur-xs'}`}>
         <span>{!useFallbackVal ? display : 'Unknown'}</span>
-        {subDisplay && !useFallbackVal && <span className="text-xs ml-2">{subDisplay}</span>}
+        {subDisplay && !useFallbackVal && <span className="ml-2 text-xs">{subDisplay}</span>}
       </div>
       {showCopy && !useFallbackVal && (
         <CopyButton copyValue={display} width={13} height={13} classes="ml-1.5" />

src/features/messages/cards/TimelineCard.tsx

@@ -18,7 +18,7 @@ export function TimelineCard({ message, blur }: Props) {
         <h3 className="text-gray-500 font-medium text-md mr-2">Delivery Timeline</h3>
         <HelpIcon size={16} text="A breakdown of the stages for delivering a message" />
       </div> */}
-      <div className={`-mx-2 sm:mx-0 -my-2 font-light ${blur && 'blur-xs'}`}>
+      <div className={`-mx-2 -my-2 font-light sm:mx-0 ${blur && 'blur-xs'}`}>
         <MessageTimeline status={message.status} stage={stage} timings={timings} />
       </div>
     </Card>

src/features/messages/cards/TransactionCard.tsx

@@ -93,11 +93,11 @@ export function DestinationTransactionCard({
   } else if (status === MessageStatus.Failing) {
     content = (
       <DeliveryStatus>
-        <div className="text-sm text-gray-800 leading-relaxed">{`Delivery to destination chain seems to be failing ${
+        <div className="text-sm leading-relaxed text-gray-800">{`Delivery to destination chain seems to be failing ${
           debugResult ? ': ' + debugStatusToDesc[debugResult.status] : ''
         }`}</div>
         {!!debugResult?.description && (
-          <div className="mt-5 text-sm text-gray-800 text-center leading-relaxed break-words">
+          <div className="mt-5 break-words text-center text-sm leading-relaxed text-gray-800">
             {debugResult.description}
           </div>
         )}
@@ -110,10 +110,10 @@ export function DestinationTransactionCard({
         <DeliveryStatus>
           <div className="flex flex-col items-center">
             <div>Delivery status is unknown.</div>
-            <div className="mt-2 text-sm max-w-xs">
+            <div className="mt-2 max-w-xs text-sm">
               Permissionless Interoperability (PI) chains require a config.
             </div>
-            <div className="mt-2 mb-6 text-sm max-w-xs">
+            <div className="mb-6 mt-2 max-w-xs text-sm">
               Please{' '}
               <button className="underline underline-offset-2" onClick={open}>
                 add metadata
@@ -133,7 +133,7 @@ export function DestinationTransactionCard({
         <div className="flex flex-col items-center">
           <div>Delivery to destination chain still in progress.</div>
           {isPiMsg && (
-            <div className="mt-2 text-sm max-w-xs">
+            <div className="mt-2 max-w-xs text-sm">
               Please ensure a relayer is running for this chain.
             </div>
           )}
@@ -146,7 +146,7 @@ export function DestinationTransactionCard({
     content = (
       <DeliveryStatus>
         <div>Delivery to status is currently unknown.</div>
-        <div className="mt-2 text-sm pb-4">
+        <div className="mt-2 pb-4 text-sm">
           {isPiMsg
             ? 'Please ensure your chain config is correct and check back later.'
             : 'Please check again later'}
@@ -173,13 +173,13 @@ function TransactionCard({
   children,
 }: PropsWithChildren<{ chainId: ChainId; title: string; helpText: string }>) {
   return (
-    <Card className="flex flex-col flex-1 min-w-fit space-y-3">
+    <Card className="flex min-w-fit flex-1 flex-col space-y-3">
       <div className="flex items-center justify-between">
-        <div className="relative -top-px -left-0.5">
+        <div className="relative -left-0.5 -top-px">
           <ChainLogo chainId={chainId} />
         </div>
         <div className="flex items-center pb-1">
-          <h3 className="text-blue-500 font-medium text-md mr-2">{title}</h3>
+          <h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
           <HelpIcon text={helpText} />
         </div>
       </div>
@@ -289,7 +289,7 @@ function TransactionDetails({
 function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
   return (
     <>
-      <div className="pb-2 flex-1 flex flex-col items-center justify-center text-gray-700 font-light text-center">
+      <div className="flex flex-1 flex-col items-center justify-center pb-2 text-center font-light text-gray-700">
         <div className="max-w-sm">{children}</div>
       </div>
     </>

src/pages/api-docs.tsx

@@ -4,9 +4,9 @@ import { Card } from '../components/layout/Card';
 
 const ApiDocs: NextPage = () => {
   return (
-    <div className="mt-4 mb-2 px-2 sm:px-6 lg:pr-14 w-full">
+    <div className="mb-2 mt-4 w-full px-2 sm:px-6 lg:pr-14">
       <Card>
-        <h2 className="mt-1 text-lg text-blue-500 font-medium">
+        <h2 className="mt-1 text-lg font-medium text-blue-500">
           Explorer APIs - Overview and documentation
         </h2>
         <p className="mt-3 font-light">
@@ -16,14 +16,14 @@ const ApiDocs: NextPage = () => {
           The APIs are currently available free of charge and without authentication required.
         </p>
 
-        <h3 className="mt-5 text-blue-500 font-medium">Example Request</h3>
-        <div className="mt-2 bg-gray-50 rounded-xl p-2.5 text-sm overflow-auto">
+        <h3 className="mt-5 font-medium text-blue-500">Example Request</h3>
+        <div className="mt-2 overflow-auto rounded-xl bg-gray-50 p-2.5 text-sm">
           <pre>
             <code>{exampleRequest}</code>
           </pre>
         </div>
-        <h3 className="mt-5 text-blue-500 font-medium">Example Response</h3>
-        <div className="mt-2 bg-gray-50 rounded-xl p-2.5 text-sm overflow-auto">
+        <h3 className="mt-5 font-medium text-blue-500">Example Response</h3>
+        <div className="mt-2 overflow-auto rounded-xl bg-gray-50 p-2.5 text-sm">
           <pre>
             <code>{exampleResponse}</code>
           </pre>
@@ -53,7 +53,7 @@ const ApiDocs: NextPage = () => {
             Action:<code className="ml-2">get-status</code>, Parameter (1 required):
           </h5>
           <ul className="mt-1 pl-3">
-            <div className="text-gray-500 italic">Same as get-messages above</div>
+            <div className="italic text-gray-500">Same as get-messages above</div>
           </ul>
           <h5 className="mt-2 text-gray-600">
             Action:<code className="ml-2">search-messages</code>, Parameter (1 required):