refactor: lint

src/app/layout.tsx

@@ -3,10 +3,11 @@ import * as React from 'react';
 
 import '@/styles/globals.css';
 
-import { siteConfig } from '@/constants/config';
+import { Footer } from '@/components/Footer';
 import { Navigation } from '@/components/Navigation';
 import { Providers } from '@/components/Providers';
-import { Footer } from '@/components/Footer';
+
+import { siteConfig } from '@/constants/config';
 
 export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.url),

src/app/page.tsx

@@ -1,13 +1,15 @@
 'use client';
 import Head from 'next/head';
 import * as React from 'react';
+import '@/lib/env';
+
 import '@rainbow-me/rainbowkit/styles.css';
 
-import '@/lib/env';
-import { VaultCard } from '@/components/VaultCard';
-import { SectionLayout } from '@/components/SectionLayout';
 import { data } from '@/data/data';
+
 import { Header } from '@/components/Header';
+import { SectionLayout } from '@/components/SectionLayout';
+import { VaultCard } from '@/components/VaultCard';
 
 export default function HomePage() {
   return (

src/app/vault/[vaultAddress]/page.tsx

@@ -1,12 +1,17 @@
 'use client';
-import { SectionLayout } from '@/components/SectionLayout';
-import { readVaultData } from '@/contractCalls/vault';
-import { useRequest } from '@/hooks/useRequest';
-import { Address } from '@/types/Address';
 import React, { useCallback } from 'react';
+
+import { useRequest } from '@/hooks/useRequest';
+
+import { SectionLayout } from '@/components/SectionLayout';
 import { VaultDisplay } from '@/components/VaultDisplay';
-import { Loading } from '../../../components/Loading';
+
+import { readVaultData } from '@/contractCalls/vault';
+
 import { ErrorComp } from '../../../components/ErrorComp';
+import { Loading } from '../../../components/Loading';
+
+import { Address } from '@/types/Address';
 
 export default function VaultPage({
   params,

src/components/ArrakisAccount.tsx

@@ -1,7 +1,8 @@
 'use client';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 import * as React from 'react';
+
 import Button from '@/components/buttons/Button';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
 
 export const ArrakisAccount = () => {
   return (

src/components/CardProps.tsx

@@ -1,7 +1,8 @@
 'use client';
-import { cn } from '@/lib/utils';
 import React from 'react';
 
+import { cn } from '@/lib/utils';
+
 interface CardProps {
   className?: string;
 }

src/components/Header.tsx

@@ -1,8 +1,9 @@
 'use client';
 import * as React from 'react';
-import { ArrakisConnectButton } from '../components/buttons/ArrakisConnectButton';
+
 import { AnimatedLogo } from '../components/AnimatedLogo';
 import { Arc } from '../components/Arc';
+import { ArrakisConnectButton } from '../components/buttons/ArrakisConnectButton';
 
 export function Header() {
   return (

src/components/Navigation.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import Link from 'next/link';
+import * as React from 'react';
 
 import { ArrakisAccount } from '@/components/ArrakisAccount';
 
@@ -8,7 +8,7 @@ export function Navigation() {
     <div className='absolute text-light top-0 right-0 bottom-0 left-0 z-10 pointer-events-none'>
       <nav className='sticky top-0 flex px-6 py-3 pointer-events-auto align-middle items-center'>
         <div className='flex items-center font-thin text-lg tracking-widest'>
-          <Link href={'/'}>Arrakis</Link>
+          <Link href="/">Arrakis</Link>
           <img
             className='ml-2'
             width='20rem'

src/components/Providers.tsx

@@ -1,8 +1,9 @@
 'use client';
-import * as React from 'react';
 import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import * as React from 'react';
+import { WagmiProvider } from 'wagmi';
+
 import { wagmiConfig } from '@/wagmi';
 
 export const queryClient = new QueryClient();

src/components/TokenInput.tsx

@@ -1,17 +1,19 @@
 'use client';
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
-import { VaultData } from '@/contractCalls/vault';
 import { TokenIcon } from '@/data/tokenIcons';
+
+import { getTokenBalance } from '@/contractCalls/erc20';
+import { VaultData } from '@/contractCalls/vault';
+
+import { Address } from '@/types/Address';
 import {
-  TokenBalance,
+  formatTokenBalance,
   formatTokenBalanceWithUnit,
   makeTokenBalance,
   makeTokenBalanceFromBaseUnit,
-  formatTokenBalance,
+  TokenBalance,
 } from '@/types/Token';
-import { Address } from '@/types/Address';
-import { getTokenBalance } from '@/contractCalls/erc20';
 
 const percentagePrecision = 10000n;
 export function getProportionalAmount1(

src/components/VaultCard.tsx

@@ -1,10 +1,13 @@
 'use client';
+import { useRouter } from 'next/navigation';
 import * as React from 'react';
+
 import { cn } from '@/lib/utils';
-import { useRouter } from 'next/navigation';
-import { StaticVaultData } from '@/types/VaultData';
+
 import { tokenIcons } from '@/data/tokenIcons';
 
+import { StaticVaultData } from '@/types/VaultData';
+
 export function VaultCard({ data }: { data: StaticVaultData }) {
   const router = useRouter();
 

src/components/VaultDisplay.tsx

@@ -1,13 +1,15 @@
 'use client';
-import { AnimatedLogo } from '@/components/AnimatedLogo';
+import React from 'react';
+
 import { Card } from '@/components/CardProps';
+import { Form } from '@/components/form/Form';
 import { SectionLayout } from '@/components/SectionLayout';
 import { VaultDisplayHeader } from '@/components/VaultDisplayHeader';
 import { VaultStat } from '@/components/VaultStat';
-import { Form } from '@/components/form/Form';
+
 import { VaultData } from '@/contractCalls/vault';
+
 import { formatTokenBalanceWithUnit } from '@/types/Token';
-import React from 'react';
 
 export function VaultDisplay({ vaultData }: { vaultData: VaultData }) {
   return (

src/components/VaultDisplayHeader.tsx

@@ -1,8 +1,10 @@
 'use client';
-import { SectionLayout } from '@/components/SectionLayout';
-import { TokenIcon } from '@/data/tokenIcons';
 import React from 'react';
 
+import { TokenIcon } from '@/data/tokenIcons';
+
+import { SectionLayout } from '@/components/SectionLayout';
+
 export interface VaultDisplayHeaderProps {
   token0Symbol: string;
   token1Symbol: string;

src/components/buttons/ArrakisConnectButton.tsx

@@ -1,9 +1,11 @@
 'use client';
-import * as React from 'react';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-import Button from '@/components/buttons/Button';
+import * as React from 'react';
+
 import { cn } from '@/lib/utils';
 
+import Button from '@/components/buttons/Button';
+
 interface ArrakisConnectButtonProps {
   className?: string;
   isDarkBg?: boolean;
@@ -41,16 +43,14 @@ export const ArrakisConnectButton = ({
             ])}
             aria-hidden={!ready}
           >
-            {
-              <Button
+            <Button
                 onClick={openConnectModal}
                 className={cn([connected && ['invisible']])}
                 isDarkBg={isDarkBg}
                 variant='outline'
               >
                 Connect Wallet
               </Button>
-            }
           </div>
         );
       }}

src/components/form/AllowanceForm.tsx

@@ -1,11 +1,14 @@
 'use client';
+import React, { SyntheticEvent, useCallback, useEffect } from 'react';
+
 import Button from '@/components/buttons/Button';
+
 import { addresses } from '@/constants/addresses';
 import { approveToken, getCurrentAllowance } from '@/contractCalls/erc20';
+
 import { Address } from '@/types/Address';
 import { ResponseStatus } from '@/types/ChainResponse';
-import { TokenBalance, formatTokenBalanceWithUnit } from '@/types/Token';
-import React, { SyntheticEvent, useCallback, useEffect } from 'react';
+import { formatTokenBalanceWithUnit,TokenBalance } from '@/types/Token';
 
 interface AllowanceFormProps {
   user: Address;

src/components/form/ConfirmForm.tsx

@@ -1,12 +1,14 @@
 'use client';
+import { waitForTransactionReceipt } from '@wagmi/core';
+import React, { useCallback } from 'react';
+
 import Button from '@/components/buttons/Button';
 import { FormState } from '@/components/form/FormState';
+
+import { wagmiConfig } from '@/wagmi';
+
 import { Hash } from '@/types/Hash';
 import { formatTokenBalanceWithUnit } from '@/types/Token';
-import { wagmiConfig } from '@/wagmi';
-import { waitForTransactionReceipt } from '@wagmi/core';
-import React, { useCallback } from 'react';
-import { set } from 'zod';
 
 interface ConfirmFormProps {
   formState: FormState;

src/components/form/DepositForm.tsx

@@ -1,20 +1,23 @@
 'use client';
-import Button from '@/components/buttons/Button';
-import { VaultData } from '@/contractCalls/vault';
-import {
-  TokenBalance,
-  makeTokenBalance,
-  makeTokenBalanceFromBaseUnit,
-} from '@/types/Token';
 import React, { SyntheticEvent, useCallback, useState } from 'react';
+
 import { ArrakisConnectButton } from '@/components/buttons/ArrakisConnectButton';
+import Button from '@/components/buttons/Button';
+
+import { VaultData } from '@/contractCalls/vault';
+
+import { FormState } from './FormState';
 import {
-  getProportionalAmount1,
   getProportionalAmount0,
+  getProportionalAmount1,
   TokenInput,
 } from '../TokenInput';
-import { FormState } from './FormState';
+
 import { Address } from '@/types/Address';
+import {
+  makeTokenBalanceFromBaseUnit,
+  TokenBalance,
+} from '@/types/Token';
 
 interface DepositFormProps {
   vaultData: VaultData;

src/components/form/Form.tsx

@@ -2,16 +2,19 @@
 import React, { useCallback, useState } from 'react';
 import { useAccount } from 'wagmi';
 
-import { VaultData } from '@/contractCalls/vault';
-import { Address, makeAddress } from '@/types/Address';
-import { DepositForm } from '@/components/form/DepositForm';
+import { cn } from '@/lib/utils';
+
+import { AllowanceForm } from '@/components/form/AllowanceForm';
 import { ConfirmForm } from '@/components/form/ConfirmForm';
+import { DepositForm } from '@/components/form/DepositForm';
 import { FormState } from '@/components/form/FormState';
-import { AllowanceForm } from '@/components/form/AllowanceForm';
-import { makeTokenBalance } from '@/types/Token';
-import { cn } from '@/lib/utils';
+
 import { addLiquidity } from '@/contractCalls/router';
+import { VaultData } from '@/contractCalls/vault';
+
+import { Address, makeAddress } from '@/types/Address';
 import { Hash } from '@/types/Hash';
+import { makeTokenBalance } from '@/types/Token';
 
 enum FormStages {
   DepositForm = 'DepositForm',

src/contractCalls/erc20.ts

@@ -1,16 +1,18 @@
-import { erc20Abi } from '@/abis/erc20.abi';
-import { Address } from '@/types/Address';
-import { Token, TokenBalance, makeTokenBalance } from '@/types/Token';
-import { wagmiConfig } from '@/wagmi';
-
 import {
   readContract,
   readContracts,
   waitForTransactionReceipt,
   writeContract,
 } from '@wagmi/core';
+
+import { erc20Abi } from '@/abis/erc20.abi';
+import { wagmiConfig } from '@/wagmi';
+
 import { ChainResponse, ResponseStatus } from '../types/ChainResponse';
 
+import { Address } from '@/types/Address';
+import { makeTokenBalance,Token, TokenBalance } from '@/types/Token';
+
 export async function approveToken(spender: Address, amount: TokenBalance) {
   const hash = await writeContract(wagmiConfig, {
     abi: erc20Abi,

src/contractCalls/resolver.ts

@@ -1,10 +1,12 @@
+import { readContract } from '@wagmi/core';
+import { Address } from 'viem';
+
 import { arrakisResolverAbi } from '@/abis/arrakisResolver.abi';
 import { addresses } from '@/constants/addresses';
+import { wagmiConfig } from '@/wagmi';
+
 import { ChainResponse, ResponseStatus } from '@/types/ChainResponse';
 import { TokenBalance } from '@/types/Token';
-import { wagmiConfig } from '@/wagmi';
-import { readContract } from '@wagmi/core';
-import { Address } from 'viem';
 
 interface MintAmounts {
   amount0Min: bigint;

src/contractCalls/router.ts

@@ -1,13 +1,15 @@
+import { writeContract } from '@wagmi/core';
+import { zeroAddress } from 'viem';
+
 import { arrakisRouterAbi } from '@/abis/arrakisRouter.abi';
 import { addresses } from '@/constants/addresses';
 import { getMintAmounts } from '@/contractCalls/resolver';
+import { wagmiConfig } from '@/wagmi';
+
 import { Address } from '@/types/Address';
 import { ResponseStatus } from '@/types/ChainResponse';
 import { Hash, makeHash } from '@/types/Hash';
 import { TokenBalance } from '@/types/Token';
-import { wagmiConfig } from '@/wagmi';
-import { writeContract } from '@wagmi/core';
-import { parseGwei, zeroAddress } from 'viem';
 
 export async function addLiquidity(
   amount0: TokenBalance,