feat: run linter

projects/dex-ui/src/components/App/App.tsx

@@ -1,16 +1,18 @@
 import React from "react";
+
 import { Route, Routes } from "react-router-dom";
+
+import { Frame } from "src/components/Frame/Frame";
 import { NotFound } from "src/pages/404";
-import { Home } from "src/pages/Home";
+import { Build } from "src/pages/Build";
+import { Create } from "src/pages/Create";
 import { Dev } from "src/pages/Dev";
+import { Home } from "src/pages/Home";
+import { Liquidity } from "src/pages/Liquidity";
+import { Swap } from "src/pages/Swap";
 import { Well } from "src/pages/Well";
 import { Wells } from "src/pages/Wells";
-import { Frame } from "src/components/Frame/Frame";
-import { Build } from "src/pages/Build";
-import { Swap } from "src/pages/Swap";
 import { Settings } from "src/settings";
-import { Liquidity } from "src/pages/Liquidity";
-import { Create } from "src/pages/Create";
 
 export const App = ({}) => {
   const isNotProd = !Settings.PRODUCTION;

projects/dex-ui/src/components/App/OnLoad.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect } from "react";
+
+import { useAccount } from "wagmi";
+
 import { useAllTokensBalance } from "src/tokens/useAllTokenBalance";
 import { FC } from "src/types";
-import { useAccount } from "wagmi";
 
 export const OnLoad: FC<{}> = ({ children }) => {
   const { address, chain } = useAccount();

projects/dex-ui/src/components/BottomDrawer.tsx

@@ -1,10 +1,13 @@
 import React from "react";
-import { FC } from "src/types";
+
 import styled from "styled-components";
-import { BodyXS } from "./Typography";
+
 import x from "src/assets/images/x.svg";
-import { ImageButton } from "./ImageButton";
 import { size } from "src/breakpoints";
+import { FC } from "src/types";
+
+import { ImageButton } from "./ImageButton";
+import { BodyXS } from "./Typography";
 
 interface Composition {
   Header: typeof Header;
@@ -26,7 +29,12 @@ type Props = {
   toggleDrawer?: (isDrawerOpen: boolean) => void;
 };
 
-export const BottomDrawer: FC<Props> & Composition = ({ children, showDrawer, headerText, toggleDrawer }) => {
+export const BottomDrawer: FC<Props> & Composition = ({
+  children,
+  showDrawer,
+  headerText,
+  toggleDrawer
+}) => {
   return (
     <>
       <Container showDrawer={showDrawer} data-trace="true">

projects/dex-ui/src/components/Button.tsx

@@ -1,4 +1,7 @@
 import React, { ButtonHTMLAttributes, CSSProperties, forwardRef } from "react";
+
+import styled from "styled-components";
+
 import {
   CommonCssProps,
   CommonCssStyles,
@@ -7,7 +10,7 @@ import {
   makeCssStyle
 } from "src/utils/ui/styled";
 import { theme } from "src/utils/ui/theme";
-import styled from "styled-components";
+
 import { Spinner } from "./Spinner";
 
 export type ButtonVariant = "outlined" | "contained"; // | "text" (Add Text Variant later)

projects/dex-ui/src/components/Checkbox.tsx

@@ -1,8 +1,11 @@
-import { FC } from "src/types";
 import React from "react";
+
 import styled from "styled-components";
-import { BodyXS } from "./Typography";
+
 import { size } from "src/breakpoints";
+import { FC } from "src/types";
+
+import { BodyXS } from "./Typography";
 
 type Props = {
   label?: string;
@@ -12,12 +15,23 @@ type Props = {
   onClick?: () => void;
 };
 
-export const Checkbox: FC<Props> = ({ label, checked = false, mode, checkboxColor = "black", onClick = () => {} }) => {
+export const Checkbox: FC<Props> = ({
+  label,
+  checked = false,
+  mode,
+  checkboxColor = "black",
+  onClick = () => {}
+}) => {
   return (
     <StyledCheckbox>
       <HiddenCheckbox type="checkbox" role={"checkbox"} checked={checked} readOnly />
       <HoverContainer>
-        <StyledCheckboxContainer checked={checked} onClick={onClick} mode={mode} checkboxColor={checkboxColor}>
+        <StyledCheckboxContainer
+          checked={checked}
+          onClick={onClick}
+          mode={mode}
+          checkboxColor={checkboxColor}
+        >
           {checked && (
             <CheckMark xmlns="http://www.w3.org/2000/svg" width={13} viewBox="0 0 179 129">
               <path
@@ -68,7 +82,8 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 `;
 
 const StyledCheckboxContainer = styled.div<CheckboxProps>`
-  border: 1px solid ${(props) => (props.checkboxColor && props.checked ? props.checkboxColor : "#000")};
+  border: 1px solid
+    ${(props) => (props.checkboxColor && props.checked ? props.checkboxColor : "#000")};
   width: 16px;
   height: 16px;
   position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};

projects/dex-ui/src/components/Create/CreateWellStep1.tsx

@@ -1,13 +1,15 @@
 import React from "react";
+
+import { FormProvider, useForm } from "react-hook-form";
+import styled from "styled-components";
+
 import { Flex } from "src/components/Layout";
 import { Text } from "src/components/Typography";
+import { theme } from "src/utils/ui/theme";
 
-import { FormProvider, useForm } from "react-hook-form";
 import { CreateWellStepProps, useCreateWell } from "./CreateWellProvider";
 import { ComponentInputWithCustom } from "./shared/ComponentInputWithCustom";
 import { CreateWellButtonRow } from "./shared/CreateWellButtonRow";
-import styled from "styled-components";
-import { theme } from "src/utils/ui/theme";
 import { StyledForm } from "../Form";
 
 type FormValues = CreateWellStepProps["step1"];

projects/dex-ui/src/components/Create/CreateWellStep2.tsx

@@ -1,24 +1,28 @@
 import React, { useEffect, useMemo, useState } from "react";
-import styled from "styled-components";
+
 import { FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
-import { getIsValidEthereumAddress } from "src/utils/addresses";
-import { theme } from "src/utils/ui/theme";
-import { Divider, Flex, FlexCard } from "src/components/Layout";
-import { Text } from "src/components/Typography";
-import { CreateWellButtonRow } from "./shared/CreateWellButtonRow";
+import styled from "styled-components";
+
+import { ERC20Token } from "@beanstalk/sdk";
+
+import { images } from "src/assets/images/tokens";
+import { Dropdown } from "src/components/Dropdown";
 import { StyledForm, TextInputField } from "src/components/Form";
 import { XIcon } from "src/components/Icons";
-import { CreateWellStepProps, useCreateWell } from "./CreateWellProvider";
-import { CreateWellFormProgress } from "./shared/CreateWellFormProgress";
-import { ComponentInputWithCustom } from "./shared/ComponentInputWithCustom";
+import { Divider, Flex, FlexCard } from "src/components/Layout";
+import { Text } from "src/components/Typography";
 import { useERC20TokenWithAddress } from "src/tokens/useERC20Token";
-import { ERC20Token } from "@beanstalk/sdk";
+import { getIsValidEthereumAddress } from "src/utils/addresses";
 import useSdk from "src/utils/sdk/useSdk";
+import { theme } from "src/utils/ui/theme";
+import { useBoolean } from "src/utils/ui/useBoolean";
 import BoreWellUtils from "src/wells/boreWell";
 import { useValidateWellFunction } from "src/wells/wellFunction/useValidateWellFunction";
-import { useBoolean } from "src/utils/ui/useBoolean";
-import { Dropdown } from "src/components/Dropdown";
-import { images } from "src/assets/images/tokens";
+
+import { CreateWellStepProps, useCreateWell } from "./CreateWellProvider";
+import { ComponentInputWithCustom } from "./shared/ComponentInputWithCustom";
+import { CreateWellButtonRow } from "./shared/CreateWellButtonRow";
+import { CreateWellFormProgress } from "./shared/CreateWellFormProgress";
 
 const additionalOptions = [
   {

projects/dex-ui/src/components/Create/CreateWellStep3.tsx

@@ -1,14 +1,17 @@
 import React from "react";
+
+import { FormProvider, useForm } from "react-hook-form";
+import styled from "styled-components";
+
 import { Divider, Flex } from "src/components/Layout";
 import { Text } from "src/components/Typography";
 import { theme } from "src/utils/ui/theme";
-import styled from "styled-components";
+import { useWells } from "src/wells/useWells";
+
 import { CreateWellStepProps, useCreateWell } from "./CreateWellProvider";
-import { FormProvider, useForm } from "react-hook-form";
+import { CreateWellButtonRow } from "./shared/CreateWellButtonRow";
 import { CreateWellFormProgress } from "./shared/CreateWellFormProgress";
 import { StyledForm, TextInputField } from "../Form";
-import { useWells } from "src/wells/useWells";
-import { CreateWellButtonRow } from "./shared/CreateWellButtonRow";
 
 export type WellDetailsFormValues = CreateWellStepProps["step3"];
 

projects/dex-ui/src/components/Create/shared/ComponentAccordionCard.tsx

@@ -1,12 +1,15 @@
 import React from "react";
-import styled from "styled-components";
+
 import { Link } from "react-router-dom";
-import { theme } from "src/utils/ui/theme";
+import styled from "styled-components";
+
 import { Box, Flex } from "src/components/Layout";
 import { Text } from "src/components/Typography";
-import { WellComponentInfo } from "../useWhitelistedWellComponents";
-import { AccordionSelectCard } from "../../Selectable";
+import { theme } from "src/utils/ui/theme";
+
 import { Etherscan, Github } from "../../Icons";
+import { AccordionSelectCard } from "../../Selectable";
+import { WellComponentInfo } from "../useWhitelistedWellComponents";
 
 export type WellComponentAccordionCardProps = {
   selected: boolean;

projects/dex-ui/src/components/Create/shared/ComponentInputWithCustom.tsx

@@ -1,16 +1,19 @@
 import React, { useCallback } from "react";
+
 import { FieldValues, Path, PathValue, useFormContext, useWatch } from "react-hook-form";
-import { useWhitelistedWellComponents } from "../useWhitelistedWellComponents";
-import { useBoolean } from "src/utils/ui/useBoolean";
-import { TextInputField } from "../../Form";
+import styled from "styled-components";
+
 import { Flex } from "src/components/Layout";
 import { ToggleSwitch } from "src/components/ToggleSwitch";
-import { WellComponentAccordionCard } from "./ComponentAccordionCard";
 import { Text } from "src/components/Typography";
+import { getIsValidEthereumAddress } from "src/utils/addresses";
 import { theme } from "src/utils/ui/theme";
-import styled from "styled-components";
+import { useBoolean } from "src/utils/ui/useBoolean";
+
+import { WellComponentAccordionCard } from "./ComponentAccordionCard";
+import { TextInputField } from "../../Form";
 import { CircleFilledCheckIcon, CircleEmptyIcon } from "../../Icons";
-import { getIsValidEthereumAddress } from "src/utils/addresses";
+import { useWhitelistedWellComponents } from "../useWhitelistedWellComponents";
 
 type AdditionalOptionProps = {
   value: string;

projects/dex-ui/src/components/Create/shared/CreateWellButtonRow.tsx

@@ -1,13 +1,16 @@
 import React, { useMemo } from "react";
+
 import { useFormContext, useWatch } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import { theme } from "src/utils/ui/theme";
 import styled from "styled-components";
+
+import { ActionWalletButtonWrapper } from "src/components/Wallet";
+import { theme } from "src/utils/ui/theme";
+
 import { ButtonPrimary } from "../../Button";
 import { LeftArrow, RightArrow } from "../../Icons";
 import { Flex } from "../../Layout";
 import { useCreateWell } from "../CreateWellProvider";
-import { ActionWalletButtonWrapper } from "src/components/Wallet";
 
 const ButtonLabels = [
   {
@@ -72,7 +75,7 @@ export const CreateWellButtonRow = ({
   const goNextEnabled = noErrors && hasRequiredValues;
 
   const goBackLabel = ButtonLabels[step].back || "Back";
-  const nextLabel = disabled && disabledMessage || ButtonLabels[step].next || "Next";
+  const nextLabel = (disabled && disabledMessage) || ButtonLabels[step].next || "Next";
 
   return (
     <Flex $fullWidth $direction="row" $justifyContent="space-between" $gap={2}>

projects/dex-ui/src/components/Create/shared/CreateWellFormProgress.tsx

@@ -1,11 +1,14 @@
 import React, { useMemo } from "react";
+
 import { useFormContext, useWatch } from "react-hook-form";
-import { theme } from "src/utils/ui/theme";
-import { CheckIcon, CircleEmptyIcon } from "src/components/Icons";
-import { Flex } from "src/components/Layout";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+
+import { CheckIcon, CircleEmptyIcon } from "src/components/Icons";
+import { Flex } from "src/components/Layout";
 import { Text } from "src/components/Typography";
+import { theme } from "src/utils/ui/theme";
+
 import { FunctionTokenPumpFormValues } from "../CreateWellStep2";
 import { WellDetailsFormValues } from "../CreateWellStep3";
 

projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts

@@ -1,21 +1,22 @@
 import { useMemo } from "react";
+
 import BeanstalkFarmsLogo from "src/assets/images/beanstalk-farms.png";
+import BrendanTwitterPFP from "src/assets/images/brendan-twitter-pfp.png";
+import ClockIcon from "src/assets/images/clock-icon.svg";
+import Code4renaLogo from "src/assets/images/code4rena-logo.png";
+import CyrfinLogo from "src/assets/images/cyrfin-logo.svg";
 import HalbornLogo from "src/assets/images/halborn-logo.png";
+import { AddressMap } from "src/types";
 import {
   WELL_DOT_SOL_ADDRESS,
   toAddressMap,
   MULTI_FLOW_PUMP_V_1PT1_ADDRESS,
   CONSTANT_PRODUCT_2_V2_ADDRESS
 } from "src/utils/addresses";
-import BrendanTwitterPFP from "src/assets/images/brendan-twitter-pfp.png";
-import CyrfinLogo from "src/assets/images/cyrfin-logo.svg";
-import Code4renaLogo from "src/assets/images/code4rena-logo.png";
-import ClockIcon from "src/assets/images/clock-icon.svg";
-import { useWells } from "src/wells/useWells";
+import { usePumps } from "src/wells/pump/usePumps";
 import { useWellImplementations } from "src/wells/useWellImplementations";
+import { useWells } from "src/wells/useWells";
 import { useWellFunctions } from "src/wells/wellFunction/useWellFunctions";
-import { usePumps } from "src/wells/pump/usePumps";
-import { AddressMap } from "src/types";
 
 export enum WellComponentType {
   WellImplementation = "WellImplementation",

projects/dex-ui/src/components/Dropdown.tsx

@@ -1,10 +1,13 @@
 import React from "react";
+
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import styled from "styled-components";
+
 import { theme } from "src/utils/ui/theme";
-import { Flex } from "./Layout";
 import useElementDimensions from "src/utils/ui/useDimensions";
 
+import { Flex } from "./Layout";
+
 export type DropdownProps = {
   open: boolean;
   trigger: React.ReactNode;