chore: add eslint-plugin-prettier

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",

package.json

@@ -11,6 +11,7 @@
     "list-proposals": "yarn run --silent agd query gov proposals -o json | jq -c '.proposals[] | [.proposal_id,.voting_end_time,.status]'",
     "show-block-height": "yarn run --silent agd status|jq -r .SyncInfo.latest_block_height",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
+    "lint:fix": "yarn lint --fix",
     "preview": "vite preview",
     "test": "yarn test:unit",
     "test:unit": "vitest spec",
@@ -57,11 +58,14 @@
     "@vitest/coverage-v8": "^0.34.6",
     "cosmjs-types": "^0.8.0",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "happy-dom": "^12.9.1",
     "postcss": "^8.4.28",
     "postinstall-postinstall": "^2.1.0",
+    "prettier": "^3.1.1",
     "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",

src/App.spec.tsx

@@ -8,7 +8,7 @@ describe("App.tsx", () => {
     render(
       <ContextProviders>
         <App />
-      </ContextProviders>
+      </ContextProviders>,
     );
 
     const titleElement = await screen.findByText("Agoric Gov Proposal Builder");
@@ -19,7 +19,7 @@ describe("App.tsx", () => {
     render(
       <ContextProviders>
         <App />
-      </ContextProviders>
+      </ContextProviders>,
     );
 
     const buttonEl = await screen.findByRole("button", {
@@ -32,7 +32,7 @@ describe("App.tsx", () => {
     render(
       <ContextProviders>
         <App />
-      </ContextProviders>
+      </ContextProviders>,
     );
 
     const navElement = screen.getAllByRole("navigation")[0];
@@ -47,13 +47,13 @@ describe("App.tsx", () => {
     render(
       <ContextProviders>
         <App />
-      </ContextProviders>
+      </ContextProviders>,
     );
 
     const tabListEl = await screen.findByRole("tablist");
     expect(tabListEl).toBeTruthy();
     const tabs = [...tabListEl.querySelectorAll("button")].map(
-      (x) => x.innerText
+      (x) => x.innerText,
     );
     expect(tabs).toEqual([
       "Text Proposal",
@@ -67,7 +67,7 @@ describe("App.tsx", () => {
     render(
       <ContextProviders>
         <App />
-      </ContextProviders>
+      </ContextProviders>,
     );
 
     const footerEl = await screen.findByRole("contentinfo");

src/App.tsx

@@ -34,7 +34,7 @@ const App = () => {
 
   async function signAndBroadcast(
     proposalMsg: EncodeObject,
-    type: "bundle" | "proposal"
+    type: "bundle" | "proposal",
   ) {
     if (!stargateClient) {
       toast.error("Network not connected.", { autoClose: 3000 });
@@ -50,14 +50,14 @@ const App = () => {
       const estimate = await stargateClient.simulate(
         walletAddress,
         [proposalMsg],
-        undefined
+        undefined,
       );
       const adjustment = 1.3;
       const gas = Math.ceil(estimate * adjustment);
       txResult = await stargateClient.signAndBroadcast(
         walletAddress,
         [proposalMsg],
-        makeFeeObject({ gas })
+        makeFeeObject({ gas }),
       );
       assertIsDeliverTxSuccess(txResult);
     } catch (e) {
@@ -100,7 +100,7 @@ const App = () => {
       throw new Error("Invalid bundle.");
     }
     const { compressedBundle, uncompressedSize } = await compressBundle(
-      JSON.parse(vals.bundle)
+      JSON.parse(vals.bundle),
     );
     const proposalMsg = makeInstallBundleMsg({
       compressedBundle,

src/components/BundleForm.tsx

@@ -40,12 +40,12 @@ const BundleForm = forwardRef<BundleFormMethods, BundleFormProps>(
     const swingsetParams = useQuery(swingSetParamsQuery(api));
     const costPerByte = useMemo(
       () => selectStorageCost(swingsetParams),
-      [swingsetParams]
+      [swingsetParams],
     );
     const accountBalances = useQuery(accountBalancesQuery(api, walletAddress));
     const istBalance = useMemo(
       () => selectIstBalance(accountBalances),
-      [accountBalances]
+      [accountBalances],
     );
 
     useImperativeHandle(ref, () => ({
@@ -116,7 +116,7 @@ const BundleForm = forwardRef<BundleFormMethods, BundleFormProps>(
         </div>
       </form>
     );
-  }
+  },
 );
 
 export { BundleForm };

src/components/Button.tsx

@@ -32,7 +32,7 @@ const Button = ({
     className={classNames(
       "items-center justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
       butttonThemeStyles[theme],
-      layoutStyle || "inline-flex w-48"
+      layoutStyle || "inline-flex w-48",
     )}
     onClick={onClick}
   >

src/components/CodeInput.tsx

@@ -39,7 +39,7 @@ const CodeInput = forwardRef<CodeInputMethods, CodeInputProps>(
       costPerByte,
       istBalance,
     },
-    ref
+    ref,
   ) => {
     const [{ filename, size, content }, setState] = useState<
       FileState | Record<string, never>
@@ -133,7 +133,7 @@ const CodeInput = forwardRef<CodeInputMethods, CodeInputProps>(
                   <p
                     className={classNames(
                       "mt-2 text-sm",
-                      !remainingCost ? "text-green-600" : "text-red-600"
+                      !remainingCost ? "text-green-600" : "text-red-600",
                     )}
                   >
                     {!remainingCost
@@ -147,7 +147,7 @@ const CodeInput = forwardRef<CodeInputMethods, CodeInputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export { CodeInput };

src/components/CodeInputGroup.tsx

@@ -76,7 +76,7 @@ const CodeInputGroup = forwardRef<CodeInputGroupMethods, CodeInputGroupProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 export { CodeInputGroup };

src/components/DepositSection.tsx

@@ -21,8 +21,8 @@ export const DepositSection: React.FC<unknown> = () => {
     combine: (
       results: [
         UseQueryResult<DepositParams, unknown>,
-        UseQueryResult<VotingParams, unknown>
-      ]
+        UseQueryResult<VotingParams, unknown>,
+      ],
     ) => {
       const [deposit, voting] = results;
       return {
@@ -35,7 +35,7 @@ export const DepositSection: React.FC<unknown> = () => {
   const accountBalances = useQuery(accountBalancesQuery(api, walletAddress));
   const bldCoins = useMemo(
     () => selectBldCoins(accountBalances),
-    [accountBalances]
+    [accountBalances],
   );
 
   return (

src/components/DragDrop.tsx

@@ -72,7 +72,7 @@ const DragDrop: React.FC<DragDropProps> = ({
       onClick={handleClick}
       className={classNames(
         "flex max-w-2xl justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10",
-        isDragging ? "border-teal-600 bg-gray-300/10" : ""
+        isDragging ? "border-teal-600 bg-gray-300/10" : "",
       )}
     >
       <div className="text-center">

src/components/DropdownMenu.tsx

@@ -34,7 +34,7 @@ const DropdownMenu = ({ title, items, status, label }: DropdownMenuProps) => {
           <div
             className={classNames(
               "w-3 h-3 rounded-full inline-block mr-2 self-center",
-              statusColors[status]
+              statusColors[status],
             )}
           />
           <span className="w-100">{title}</span>
@@ -63,7 +63,7 @@ const DropdownMenu = ({ title, items, status, label }: DropdownMenuProps) => {
                     href={href}
                     className={classNames(
                       active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                      "block px-4 py-2 text-sm"
+                      "block px-4 py-2 text-sm",
                     )}
                   >
                     {label}

src/components/EditableTable.tsx

@@ -42,7 +42,7 @@ const EditableTable = ({
       scope="col"
       className={classNames(
         "px-3 py-3.5 text-left text-sm font-semibold text-gray-900",
-        idx === 0 ? "sm:pl-0" : ""
+        idx === 0 ? "sm:pl-0" : "",
       )}
     >
       {title}
@@ -72,7 +72,7 @@ const EditableTable = ({
           scope="col"
           className={classNames(
             "whitespace-nowrap px-3 py-4 text-sm text-gray-500",
-            "text-gray-900 sm:pl-0"
+            "text-gray-900 sm:pl-0",
           )}
         >
           {row.key}
@@ -89,7 +89,7 @@ const EditableTable = ({
           scope="col"
           className={classNames(
             "whitespace-nowrap text-sm text-gray-500 w-44",
-            editingKey !== row.key ? "px-3 py-4" : ""
+            editingKey !== row.key ? "px-3 py-4" : "",
           )}
         >
           <div style={{ width: "100%", height: "100%" }}>
@@ -125,7 +125,7 @@ const EditableTable = ({
                   throw new Error("Input ref not found.");
                 handleValueChanged(
                   row.key,
-                  inputRefs.current[row.key]?.value as string
+                  inputRefs.current[row.key]?.value as string,
                 );
                 setEditingKey(undefined);
               } else {

src/components/IconButton.tsx

@@ -19,7 +19,7 @@ export const IconButton = ({
       type="button"
       className={classNames(
         "has-tooltip rounded-full bg-teal-600 p-2 text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600",
-        buttonClassName || ""
+        buttonClassName || "",
       )}
       onClick={onClick}
     >

src/components/Modal.tsx

@@ -44,7 +44,7 @@ const Modal = ({ title, open, children, onClose }: ModalProps) => {
                 className={classNames(
                   "relative transform rounded-lg bg-white text-left shadow-xl transition-all",
                   "flex flex-col max-h-[80%] max-w-[70%]",
-                  "overflow-hidden"
+                  "overflow-hidden",
                 )}
               >
                 <div className="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 border-opacity-100 p-4">

src/components/NetworkDropdown.tsx

@@ -22,7 +22,7 @@ const NetworkDropdown = () => {
       })),
     // incl searchString to regenerate links if query params change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [netNames, searchString]
+    [netNames, searchString],
   );
 
   const status = useMemo(() => {

src/components/ParameterChangeForm.tsx

@@ -29,7 +29,7 @@ type ParameterChangeFormProps<T, R extends FormValue[] | undefined> = {
 
 function ParameterChangeFormSectionBase<T, R extends FormValue[] | undefined>(
   { options }: ParameterChangeFormProps<T, R>,
-  ref: React.ForwardedRef<ParameterChangeFormMethods>
+  ref: React.ForwardedRef<ParameterChangeFormMethods>,
 ) {
   const { paramType } = qs.parse(useSearch());
   const { api } = useNetwork();
@@ -39,7 +39,7 @@ function ParameterChangeFormSectionBase<T, R extends FormValue[] | undefined>(
 
   const currentParams = useMemo(
     () => match.selector(paramsQuery),
-    [paramsQuery, match]
+    [paramsQuery, match],
   );
 
   useEffect(() => {
@@ -63,7 +63,7 @@ function ParameterChangeFormSectionBase<T, R extends FormValue[] | undefined>(
   const feeUnit = useMemo(() => {
     if (currentParams && match.transformColumn === "ist") {
       const param = (currentParams as unknown as BeansPerUnit[]).find(
-        (x: BeansPerUnit) => x.key === "feeUnit"
+        (x: BeansPerUnit) => x.key === "feeUnit",
       );
       return param ? Number(param.beans) : null;
     }
@@ -75,14 +75,14 @@ function ParameterChangeFormSectionBase<T, R extends FormValue[] | undefined>(
       if (feeUnit) return Number(value) / feeUnit;
       return value;
     },
-    [feeUnit]
+    [feeUnit],
   );
   const fromIst = useCallback(
     (value: string) => {
       if (feeUnit) return String(Number(value) * feeUnit);
       return value;
     },
-    [feeUnit]
+    [feeUnit],
   );
 
   useImperativeHandle(ref, () => ({
@@ -170,11 +170,11 @@ function ParameterChangeFormSectionBase<T, R extends FormValue[] | undefined>(
 }
 
 const ParameterChangeFormSection = forwardRef(
-  ParameterChangeFormSectionBase
+  ParameterChangeFormSectionBase,
 ) as <T, R extends FormValue[] | undefined>(
   props: ParameterChangeFormProps<T, R> & {
     ref?: React.ForwardedRef<ParameterChangeFormMethods>;
-  }
+  },
 ) => ReturnType<typeof ParameterChangeFormSectionBase>;
 
 export { ParameterChangeFormSection };

src/components/ParamsTypeSelector.tsx

@@ -58,7 +58,7 @@ const ParamsTypeSelector = <T, R extends FormValue[] | undefined>({
                     className={({ active }) =>
                       classNames(
                         active ? "bg-teal-600 text-white" : "text-gray-900",
-                        "cursor-default select-none p-4 text-sm"
+                        "cursor-default select-none p-4 text-sm",
                       )
                     }
                     value={option}
@@ -67,7 +67,7 @@ const ParamsTypeSelector = <T, R extends FormValue[] | undefined>({
                       <div
                         className={classNames(
                           "flex flex-col",
-                          active ? "cursor-pointer" : ""
+                          active ? "cursor-pointer" : "",
                         )}
                       >
                         <div className="flex justify-between">
@@ -96,7 +96,7 @@ const ParamsTypeSelector = <T, R extends FormValue[] | undefined>({
                         <p
                           className={classNames(
                             active ? "teal-600Light" : "text-gray-500",
-                            "mt-2"
+                            "mt-2",
                           )}
                         >
                           {option.description}

src/components/ProposalForm.tsx

@@ -193,7 +193,7 @@ const ProposalForm = forwardRef<ProposalFormMethods, ProposalFormProps>(
         </div>
       </form>
     );
-  }
+  },
 );
 
 export { ProposalForm };