Config updates

components/drops/create/compact/CreateDropCompact.tsx

@@ -1,24 +1,22 @@
 "use client";
 
-import { CreateDropScreenType } from "../utils/CreateDropWrapper";
-import type {
-  CreateDropContentHandles,
-} from "../utils/CreateDropContent";
-import CreateDropContent from "../utils/CreateDropContent";
-import type { EditorState } from "lexical";
+import PrimaryButton from "@/components/utils/button/PrimaryButton";
 import type {
   CreateDropConfig,
   MentionedUser,
   ReferencedNft,
 } from "@/entities/IDrop";
-import PrimaryButton from "@/components/utils/button/PrimaryButton";
-import CreateDropSelectedFileIcon from "../utils/file/CreateDropSelectedFileIcon";
-import { CreateDropType, CreateDropViewType } from "../types";
-import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
-import CreateDropSelectedFilePreview from "../utils/file/CreateDropSelectedFilePreview";
-import { forwardRef, useImperativeHandle, useRef } from "react";
 import type { ApiWaveParticipationRequirement } from "@/generated/models/ApiWaveParticipationRequirement";
 import type { ApiWaveRequiredMetadata } from "@/generated/models/ApiWaveRequiredMetadata";
+import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
+import type { EditorState } from "lexical";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { CreateDropType, CreateDropViewType } from "../types";
+import type { CreateDropContentHandles } from "../utils/CreateDropContent";
+import CreateDropContent from "../utils/CreateDropContent";
+import { CreateDropScreenType } from "../utils/CreateDropWrapper";
+import CreateDropSelectedFileIcon from "../utils/file/CreateDropSelectedFileIcon";
+import CreateDropSelectedFilePreview from "../utils/file/CreateDropSelectedFilePreview";
 
 export interface CreateDropCompactHandles {
   clearEditorState: () => void;
@@ -114,10 +112,10 @@ const CreateDropCompact = forwardRef<
     }));
 
     return (
-      <div className={`${getWrapperClasses()}  tw-bg-iron-900`}>
+      <div className={`${getWrapperClasses()} tw-bg-iron-900`}>
         {children}
         <div className="tw-inline-flex tw-w-full tw-items-start tw-gap-x-2 sm:tw-gap-x-3">
-          <div className="tw-w-full tw-flex tw-gap-x-2 sm:tw-gap-x-3">
+          <div className="tw-flex tw-w-full tw-gap-x-2 sm:tw-gap-x-3">
             <div className="tw-w-full">
               <CreateDropContent
                 ref={editorRef}
@@ -164,21 +162,21 @@ const CreateDropCompact = forwardRef<
         {files.map((file, i) => (
           <div key={`drop-compact-file-${i}`} className="tw-mt-3">
             <div className="tw-w-full">
-              <div className="tw-px-4 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-iron-650 hover:tw-ring-iron-600 tw-bg-iron-900 tw-rounded-lg tw-flex tw-items-center tw-gap-x-1 tw-justify-between tw-transition tw-duration-300 tw-ease-out">
+              <div className="tw-flex tw-items-center tw-justify-between tw-gap-x-1 tw-rounded-lg tw-bg-iron-900 tw-px-4 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-iron-650 tw-transition tw-duration-300 tw-ease-out hover:tw-ring-iron-600">
                 <div className="tw-flex tw-items-center tw-gap-x-3 tw-truncate">
                   <CreateDropSelectedFileIcon file={file} />
-                  <p className="tw-mb-0 tw-text-sm tw-font-medium tw-text-iron-50 tw-truncate">
+                  <p className="tw-mb-0 tw-truncate tw-text-sm tw-font-medium tw-text-iron-50">
                     {file.name}
                   </p>
                 </div>
                 <button
                   onClick={() => onFileRemove(file)}
                   type="button"
                   aria-label="Remove file"
-                  className="-tw-mb-0.5 tw-h-8 tw-w-8 tw-flex tw-items-center tw-justify-center tw-bg-transparent tw-border-0 tw-rounded-full hover:tw-bg-iron-800"
+                  className="-tw-mb-0.5 tw-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-transparent hover:tw-bg-iron-800"
                 >
                   <svg
-                    className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-text-red"
+                    className="tw-size-5 tw-flex-shrink-0 tw-text-red"
                     viewBox="0 0 24 24"
                     fill="none"
                     aria-hidden="true"

components/user/xtdh/UserPageXtdhGrantSubmit.tsx

@@ -27,7 +27,7 @@ const hasFutureExpiry = (value: Date): boolean => {
 const isSelectionError = (
   selection: NftPickerChange
 ): selection is NftPickerSelectionError =>
-  Boolean(selection && "type" in selection && selection.type === "error");
+  Boolean(selection && "type" in selection);
 
 const canSubmit = ({
   contract,
@@ -105,39 +105,45 @@ export default function UserPageXtdhGrantSubmit({
     Number.isFinite(maxGrantRate) &&
     amount > maxGrantRate;
 
+  const onSubmitClick = async (): Promise<void> => await onSubmit();
+
   return (
     <div className="tw-flex tw-flex-col tw-gap-2">
       <button
         type="button"
-        onClick={() => {
-          if (!disabled) {
-            onSubmit();
-          }
-        }}
+        onClick={onSubmitClick}
         disabled={disabled}
         className={clsx(
-          "tw-w-full tw-rounded-lg tw-border tw-border-transparent tw-py-3 tw-text-sm tw-font-semibold tw-transition tw-duration-200 tw-ease-out tw-shadow-sm",
+          "tw-w-full tw-rounded-lg tw-border tw-border-transparent tw-py-3 tw-text-sm tw-font-semibold tw-shadow-sm tw-transition tw-duration-200 tw-ease-out",
           disabled
-            ? "tw-cursor-not-allowed tw-bg-iron-700 tw-text-iron-200 tw-shadow-none tw-border-iron-600"
-            : "tw-bg-primary-500 tw-text-black hover:tw-bg-primary-400 hover:tw-border-primary-300"
-        )}>
+            ? "tw-cursor-not-allowed tw-border-iron-600 tw-bg-iron-700 tw-text-iron-200 tw-shadow-none"
+            : "tw-bg-primary-500 tw-text-black hover:tw-border-primary-300 hover:tw-bg-primary-400"
+        )}
+      >
         {isSubmitting ? "Submitting..." : "Submit grant"}
       </button>
 
       {isAmountExceeded && (
-        <p className="tw-m-0 tw-text-sm tw-font-medium tw-text-red-400" role="alert">
-          Amount exceeds your available grant rate ({formatNumberWithCommas(Math.floor(maxGrantRate! * 10) / 10)}).
+        <p
+          className="tw-text-red-400 tw-m-0 tw-text-sm tw-font-medium"
+          role="alert"
+        >
+          Amount exceeds your available grant rate (
+          {formatNumberWithCommas(Math.floor(maxGrantRate * 10) / 10)}).
         </p>
       )}
 
       {errorMessage && (
-        <p className="tw-m-0 tw-text-sm tw-font-medium tw-text-red-400" role="alert">
+        <p
+          className="tw-text-red-400 tw-m-0 tw-text-sm tw-font-medium"
+          role="alert"
+        >
           {errorMessage}
         </p>
       )}
 
       {!errorMessage && successMessage && (
-        <output className="tw-block tw-m-0 tw-text-sm tw-font-medium tw-text-emerald-400">
+        <output className="tw-m-0 tw-block tw-text-sm tw-font-medium tw-text-emerald-400">
           {successMessage}
         </output>
       )}

package.json

@@ -33,6 +33,8 @@
     "lint:single": "npx eslint --config eslint.config.single.mjs",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
+    "format:changed": "bash -lc '{ git diff --name-only -z main...HEAD -- \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" \"*.json\" \"*.css\" \"*.scss\" \":(exclude)generated/**\"; git ls-files --others --exclude-standard -z -- \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" \"*.json\" \"*.css\" \"*.scss\" \":(exclude)generated/**\"; } | xargs -0 prettier --write --ignore-unknown'",
+    "format:uncommitted": "bash -lc '{ git diff --name-only -z HEAD -- \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" \"*.json\" \"*.css\" \"*.scss\" \":(exclude)generated/**\"; git ls-files --others --exclude-standard -z -- \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" \"*.json\" \"*.css\" \"*.scss\" \":(exclude)generated/**\"; } | xargs -0 prettier --write --ignore-unknown'",
     "deadcode:knip": "knip",
     "deadcode:exports": "ts-prune -p tsconfig.ts-prune.json --error",
     "deadcode:deps": "depcheck --ignores=\"eslint,eslint-*,@types/*,jest,ts-jest,playwright,@playwright/test,tailwindcss,postcss,autoprefixer\" --ignore-patterns=\".next,coverage,public,generated,tmp_gen_outp\"",

prettier.config.mjs

@@ -40,6 +40,15 @@ const config = {
   // Plugins
   // =============================================================================
   plugins: ["prettier-plugin-tailwindcss"],
+  tailwindFunctions: ["clsx", "cn", "cva"],
+  tailwindAttributes: [
+    "enter",
+    "enterFrom",
+    "enterTo",
+    "leave",
+    "leaveFrom",
+    "leaveTo",
+  ],
 };
 
 export default config;