Merge pull request #456 from 1Hive/399-pool-form-touchup

399 pool form touchup
1Hive · Oct 10, 2024 · 1a6e1c4 · 1a6e1c4
2 parents 4df1735 + d531128
commit 1a6e1c4
Show file tree

Hide file tree

Showing 22 changed files with 424 additions and 282 deletions.
diff --git a/apps/web/.eslintrc.js b/apps/web/.eslintrc.js
@@ -79,7 +79,7 @@ module.exports = {
     "no-unused-expressions": "error",
     "no-unsafe-optional-chaining": "error",
     "import/extensions": "off",
-    "@typescript-eslint/quotes": ["error", "double"],
+    "@typescript-eslint/quotes": ["error", "double", { avoidEscape: true }],
     "@typescript-eslint/no-use-before-define": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "react/no-array-index-key": "warn",

diff --git a/apps/web/components/CommunityCard.tsx b/apps/web/components/CommunityCard.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { Card } from "./Card";
 import { Statistic } from "./Statistic";
+import TooltipIfOverflow from "./TooltipIfOverflow";
 import { commImg } from "@/assets";
 import { QUERY_PARAMS } from "@/constants/query-params";
 import { useCollectQueryParams } from "@/contexts/collectQueryParams.context";
@@ -43,12 +44,9 @@ export function CommunityCard({
         width={100}
       />
       <div className="flex flex-col gap-2">
-        <div
-          className="flex items-start w-fit max-w-full tooltip"
-          data-tip={name}
-        >
-          <h3 className="truncate tooltip">{name}</h3>
-        </div>
+        <h3 className="flex items-start w-fit max-w-full">
+          <TooltipIfOverflow>{name}</TooltipIfOverflow>
+        </h3>
         <Statistic
           label="members"
           count={membersCount}

diff --git a/apps/web/components/ConnectWalletButton.tsx b/apps/web/components/ConnectWalletButton.tsx
@@ -15,6 +15,7 @@ import {
   useDisconnect,
   useSwitchNetwork,
 } from "wagmi";
+import TooltipIfOverflow from "./TooltipIfOverflow";
 import { walletIcon } from "@/assets";
 import { Button, DisplayNumber } from "@/components";
 import { ChainIcon } from "@/configs/chains";
@@ -164,12 +165,13 @@ export function ConnectWallet() {
                             <Menu.Item as="div" className="flex flex-col gap-2">
                               {isWrongNetwork && (
                                 <Button
-                                  className="overflow-hidden truncate"
                                   onClick={() =>
                                     switchNetwork && switchNetwork(urlChainId)
                                   }
                                 >
-                                  Switch to {chainFromPath?.name ?? ""}
+                                  <TooltipIfOverflow>
+                                    {`Switch to ${chainFromPath?.name ?? ""}`}
+                                  </TooltipIfOverflow>
                                 </Button>
                               )}
 

diff --git a/apps/web/components/Forms/CommunityForm.tsx b/apps/web/components/Forms/CommunityForm.tsx
@@ -268,11 +268,8 @@ export const CommunityForm = ({
                 step: INPUT_TOKEN_MIN_VALUE,
                 min: INPUT_TOKEN_MIN_VALUE,
               }}
-            >
-              <span className="absolute right-4 top-4 text-black">
-                {tokenGarden.symbol}
-              </span>
-            </FormInput>
+              suffix={tokenGarden.symbol}
+            />
           </div>
           <div className="flex flex-col">
             <FormInput
@@ -297,9 +294,8 @@ export const CommunityForm = ({
                   message: "Amount must be greater than 0",
                 },
               }}
-            >
-              <span className="absolute right-4 top-4 text-black">%</span>
-            </FormInput>
+              suffix="%"
+            />
           </div>
           <div className="flex flex-col">
             <FormInput

diff --git a/apps/web/components/Forms/FormAddressInput.tsx b/apps/web/components/Forms/FormAddressInput.tsx
@@ -67,8 +67,8 @@ export const FormAddressInput = ({
   });
 
   useEffect(() => {
-    setInput(value ?? inputRef.current?.value);
-  }, [value ?? inputRef.current?.value]);
+    setInput(inputRef.current?.value);
+  }, [inputRef.current?.value]);
 
   useEffect(() => {
     if (!isMounted()) {
@@ -101,7 +101,7 @@ export const FormAddressInput = ({
   }
 
   return (
-    <div className={`flex flex-col max-w-md ${className ?? ""}`}>
+    <div className={`flex flex-col max-w-md text-sm ${className ?? ""}`}>
       {label && (
         <label htmlFor={registerKey} className="label cursor-pointer">
           <span className="label-text">
@@ -123,7 +123,7 @@ export const FormAddressInput = ({
       >
         <input
           ref={inputRef}
-          className={`input px-0 w-full border-none focus:border-none outline-none focus:outline-none ${readOnly || disabled ? "cursor-not-allowed" : ""}`}
+          className={`input font-mono text-sm px-0 w-full border-none focus:border-none outline-none focus:outline-none ${readOnly || disabled ? "cursor-not-allowed" : ""}`}
           placeholder={placeholder || "Enter address or ENS name"}
           id={registerKey}
           name={registerKey}
@@ -139,17 +139,13 @@ export const FormAddressInput = ({
             ...registerOptions,
           })}
         />
-        {inputRef.current?.value && (
+        {input && (
           // Don't want to use nextJS Image here (and adding remote patterns for the URL)
           // eslint-disable-next-line @next/next/no-img-element
           <img
             alt=""
             className={"!rounded-full ml-2"}
-            src={
-              avatarUrl ? avatarUrl : (
-                blo((inputRef.current?.value ?? "0x") as Address)
-              )
-            }
+            src={avatarUrl ? avatarUrl : blo((input ?? "0x") as Address)}
             width="30"
             height="30"
           />

diff --git a/apps/web/components/Forms/FormCheckBox.tsx b/apps/web/components/Forms/FormCheckBox.tsx
@@ -1,15 +1,19 @@
 import React, { HTMLInputTypeAttribute } from "react";
 import { RegisterOptions } from "react-hook-form";
+import { InfoWrapper } from "../InfoWrapper";
 
 type Props = {
   label: string;
   type: HTMLInputTypeAttribute;
   registerKey: string;
   register: any;
-  errors: any;
+  errors?: any;
+  tooltip?: string;
+  value?: boolean;
   required?: boolean;
   registerOptions?: RegisterOptions;
   defaultChecked?: boolean;
+  onChange?: (event: React.ChangeEventHandler<HTMLInputElement>) => void;
 };
 
 export function FormCheckBox({
@@ -18,23 +22,36 @@ export function FormCheckBox({
   register,
   required = false,
   registerOptions,
-  defaultChecked = false,
+  defaultChecked,
+  value,
+  onChange,
+  tooltip,
 }: Props) {
   return (
     <div className="my-3 flex items-center">
       <input
         defaultChecked={defaultChecked}
         type="checkbox"
-        value=""
+        checked={value}
         id={registerKey}
         {...register(registerKey, {
           required,
           ...registerOptions,
         })}
         className="checkbox-info checkbox"
+        onChange={onChange}
       />
       <label htmlFor={registerKey} className="ms-2 text-sm font-medium ">
-        {label}
+        {tooltip ?
+          <InfoWrapper tooltip={tooltip}>
+            {label}
+            {required && <span className="ml-1">*</span>}
+          </InfoWrapper>
+        : <>
+            {label}
+            {required && <span className="ml-1">*</span>}
+          </>
+        }
       </label>
     </div>
   );

diff --git a/apps/web/components/Forms/FormInput.tsx b/apps/web/components/Forms/FormInput.tsx
@@ -17,7 +17,6 @@ type Props = {
   errors?: any;
   required?: boolean;
   registerOptions?: RegisterOptions;
-  children?: any;
   rows?: number;
   readOnly?: boolean;
   disabled?: boolean;
@@ -27,6 +26,7 @@ type Props = {
   step?: number | string;
   tooltip?: string;
   onChange?: (value: any) => void;
+  suffix?: string;
 };
 
 export function FormInput({
@@ -39,7 +39,6 @@ export function FormInput({
   errors = false,
   required = false,
   registerOptions,
-  children,
   rows,
   readOnly,
   disabled,
@@ -49,6 +48,7 @@ export function FormInput({
   step,
   tooltip,
   onChange,
+  suffix,
 }: Props) {
   const fixedInputClassname =
     "!border-gray-300 focus:border-gray-300 focus:outline-gray-300 cursor-not-allowed bg-transparent";
@@ -152,7 +152,9 @@ export function FormInput({
             />
           </div>
         }
-        {children}
+        {suffix && (
+          <span className="absolute right-4 top-4 text-black">{suffix}</span>
+        )}
       </div>
       {errors && (
         <p className="text-error mt-2 text-sm font-semibold ml-1">

diff --git a/apps/web/components/Forms/FormPreview.tsx b/apps/web/components/Forms/FormPreview.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import MarkdownWrapper from "../MarkdownWrapper";
+import TooltipIfOverflow from "../TooltipIfOverflow";
 
 export type FormRow = { label: string; data: ReactNode };
 
@@ -27,7 +28,10 @@ export function FormPreview({
       </div>
       {title && description && (
         <div className="my-8 flex flex-col">
-          <h3 className="mb-4">{title}</h3>
+          <h3 className="mb-4">
+            <TooltipIfOverflow>{title}</TooltipIfOverflow>
+          </h3>
+
           <MarkdownWrapper>{description}</MarkdownWrapper>
         </div>
       )}

diff --git a/apps/web/components/Forms/FormRadioButton.tsx b/apps/web/components/Forms/FormRadioButton.tsx
@@ -6,6 +6,7 @@ type Props = {
   checked: boolean;
   label: string;
   description?: string;
+  inline?: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -15,10 +16,11 @@ export function FormRadioButton({
   checked,
   label,
   description = "",
+  inline = false,
   onChange,
 }: Props) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className={`flex ${inline ? "items-center" : "flex-col"} gap-2`}>
       <div className="flex items-center gap-2">
         <input
           id={label}
@@ -29,9 +31,11 @@ export function FormRadioButton({
           className="radio radio-info"
           name={registerKey}
         />
-        <label htmlFor={label} className="label cursor-pointer">{label}</label>
+        <label htmlFor={label} className="label font-semibold cursor-pointer">
+          {label}
+        </label>
       </div>
-      <p className="text-sm">{description}</p>
+      <p className="text-sm text-neutral-soft-content">{description}</p>
     </div>
   );
 }
diff --git a/apps/web/components/Forms/FormSelect.tsx b/apps/web/components/Forms/FormSelect.tsx
@@ -8,7 +8,7 @@ type Props = {
   label: string;
   registerKey: any;
   register: any;
-  errors: any;
+  errors?: any;
   required?: boolean;
   registerOptions?: RegisterOptions;
   options: Option[];
@@ -29,7 +29,7 @@ export function FormSelect({
   disabled,
 }: Props) {
   return (
-    <>
+    <div>
       <label htmlFor={registerKey} className="label w-fit">
         {tooltip ?
           <InfoWrapper tooltip={tooltip}>
@@ -62,6 +62,6 @@ export function FormSelect({
           </option>
         ))}
       </select>
-    </>
+    </div>
   );
 }