fix: lint code

.babalrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" },
+      "@emotion/babel-preset-css-prop"
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

.eslintrc.json

@@ -24,6 +24,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "error",
     "import/no-unresolved": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
     "import/extensions": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
@@ -38,6 +39,7 @@
     "@typescript-eslint/no-shadow": "error",
     "react/jsx-props-no-spreading": "off",
     "react/destructuring-assignment": "off",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "no-console": "off"
   }
 }

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint --ext .ts,.tsx src",
+    "format": "prettier **/*.ts **/*.tsx --write"
   },
   "dependencies": {
     "@emotion/react": "^11.10.4",

src/App.tsx

@@ -4,19 +4,13 @@ import { useCallback } from "react";
 import GlobalStyles from "styles/GlobalStyles";
 
 function App() {
-  const renderRoute = useCallback(
-    ({ children, ...props }: RouteObject) => {
-      return (
-        <Route
-          key={`${props.path} ${props.index}`}
-          {...props}
-        >
-          {children?.map(renderRoute)}
-        </Route>
-      );
-    },
-    [],
-  );
+  const renderRoute = useCallback(({ children, ...props }: RouteObject) => {
+    return (
+      <Route key={`${props.path} ${props.index}`} {...props}>
+        {children?.map(renderRoute)}
+      </Route>
+    );
+  }, []);
 
   return (
     <>

src/hooks/useAPI.ts

@@ -1,7 +1,12 @@
 import { useCallback, useMemo } from "react";
-import { Pair, Pool, ReverseSimulation, Simulation} from "types/pair";
+import { Pair, Pool, ReverseSimulation, Simulation } from "types/pair";
 import { useConnectedWallet, useLCDClient } from "@xpla/wallet-provider";
-import { Amount, generateReverseSimulationMsg, generateSimulationMsg, generatePairsMsg } from "utils/dezswap";
+import {
+  Amount,
+  generateReverseSimulationMsg,
+  generateSimulationMsg,
+  generatePairsMsg,
+} from "utils/dezswap";
 import { Pairs } from "types/factory";
 import axios from "axios";
 import { AllowedTokenInfo } from "types/token";
@@ -15,16 +20,18 @@ export const useAPI = () => {
   const connectedWallet = useConnectedWallet();
   const walletAddress = useMemo(
     () => connectedWallet?.walletAddress,
-    [connectedWallet]
+    [connectedWallet],
   );
 
   const getPairs = useCallback(
     async (contractAddress: string, startAfter?: string[]) => {
       if (!contractAddress) {
         return undefined;
       }
-      const res =
-        await lcd.wasm.contractQuery<Pairs>(contractAddress, generatePairsMsg(startAfter));
+      const res = await lcd.wasm.contractQuery<Pairs>(
+        contractAddress,
+        generatePairsMsg(startAfter),
+      );
 
       return res;
     },
@@ -61,22 +68,24 @@ export const useAPI = () => {
 
   const simulate = useCallback(
     async (contractAddress: string, offerAsset: string, amount: Amount) => {
-      const res = await lcd.wasm.contractQuery<Simulation>(contractAddress,
-        generateSimulationMsg(offerAsset, amount)
+      const res = await lcd.wasm.contractQuery<Simulation>(
+        contractAddress,
+        generateSimulationMsg(offerAsset, amount),
       );
       return res;
     },
-    [lcd]
+    [lcd],
   );
 
   const reverseSimulate = useCallback(
     async (contractAddress: string, askAsset: string, amount: Amount) => {
-      const res = await lcd.wasm.contractQuery<ReverseSimulation>(contractAddress,
-        generateReverseSimulationMsg(askAsset, amount)
+      const res = await lcd.wasm.contractQuery<ReverseSimulation>(
+        contractAddress,
+        generateReverseSimulationMsg(askAsset, amount),
       );
       return res;
     },
-    [lcd]
+    [lcd],
   );
 
   const getNativeTokenBalance = useCallback(
@@ -110,10 +119,15 @@ export const useAPI = () => {
     [lcd, walletAddress],
   );
 
-  const getAllowedTokenInfos = useCallback(async (network: string): Promise<Record<string, AllowedTokenInfo>> => {
-    const { data } = await axios.get("https://assets.xpla.io/cw20/tokens.json");
-    return data[network];
-  }, []);
+  const getAllowedTokenInfos = useCallback(
+    async (network: string): Promise<Record<string, AllowedTokenInfo>> => {
+      const { data } = await axios.get(
+        "https://assets.xpla.io/cw20/tokens.json",
+      );
+      return data[network];
+    },
+    [],
+  );
 
   const api = useMemo(
     () => ({

src/hooks/useBalance.ts

@@ -1,7 +1,7 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import { useConnectedWallet } from "@xpla/wallet-provider";
 import { useAPI } from "hooks/useAPI";
-import {isNativeTokenAddress} from "utils/dezswap";
+import { isNativeTokenAddress } from "utils/dezswap";
 
 export const useBalance = (asset: string) => {
   const connectedWallet = useConnectedWallet();
@@ -18,15 +18,18 @@ export const useBalance = (asset: string) => {
       if (isNativeTokenAddress(asset)) {
         api
           .getNativeTokenBalance(asset)
-          .then(
-            (value) => (typeof value !== "undefined" && !isAborted) ? setBalance(`${value}`) : setBalance("0")
+          .then((value) =>
+            typeof value !== "undefined" && !isAborted
+              ? setBalance(`${value}`)
+              : setBalance("0"),
           );
       } else {
         api
           .getTokenBalance(asset)
-          .then(
-            (value) =>
-              (typeof value !== "undefined" && !isAborted) ? setBalance(value) : setBalance("0")
+          .then((value) =>
+            typeof value !== "undefined" && !isAborted
+              ? setBalance(value)
+              : setBalance("0"),
           );
       }
     }
@@ -37,4 +40,4 @@ export const useBalance = (asset: string) => {
   }, [api, connectedWallet, asset]);
 
   return balance;
-}
+};

src/hooks/useLCDClient.ts

@@ -4,7 +4,7 @@ import networks from "constants/network";
 export const useLCDClient = (network: string) => {
   const lcd = new LCDClient({
     URL: networks[network].lcd,
-    chainID: networks[network].lcd
+    chainID: networks[network].lcd,
   });
 
   return { lcd };

src/hooks/useNetwork.ts

@@ -1,8 +1,8 @@
-import {NetworkInfo, useWallet} from "@xpla/wallet-provider";
-import {useMemo} from "react";
+import { NetworkInfo, useWallet } from "@xpla/wallet-provider";
+import { useMemo } from "react";
 
 export const useNetwork = () => {
   const { network } = useWallet();
 
   return useMemo(() => network, [network]);
-};
+};

src/main.tsx

@@ -4,7 +4,7 @@ import App from "App";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import theme from "styles/theme";
-import {QueryClient, QueryClientProvider} from "react-query";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 const queryClient = new QueryClient();
 
@@ -19,6 +19,6 @@ getChainOptions().then((chainOptions) => {
           </BrowserRouter>
         </ThemeProvider>
       </QueryClientProvider>
-    </WalletProvider>
+    </WalletProvider>,
   );
-});
+});

src/pages/Playground/index.tsx

@@ -9,9 +9,7 @@ const Wrapper = styled(Container)`
 `;
 
 function PlaygroundPage() {
-  return (
-    <Wrapper>Hello Dezswap!</Wrapper>
-  );
+  return <Wrapper>Hello Dezswap!</Wrapper>;
 }
 
 export default PlaygroundPage;

src/pages/Pool/Provide/index.tsx

@@ -0,0 +1,14 @@
+import { FormEventHandler, useCallback } from "react";
+
+function ProvidePage() {
+  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+    (event) => {
+      /* TODO: implement */
+    },
+    [],
+  );
+
+  return <form onSubmit={handleSubmit} />;
+}
+
+export default ProvidePage;

src/pages/Pool/Provide/useSimulate.ts

@@ -0,0 +1,5 @@
+const useSimulate = () => {
+  /* TODO: implement */
+};
+
+export default useSimulate;

src/pages/Pool/Swap/index.tsx

@@ -0,0 +1,14 @@
+import { FormEventHandler, useCallback } from "react";
+
+function SwapPage() {
+  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+    (event) => {
+      /* TODO: implement */
+    },
+    [],
+  );
+
+  return <form onSubmit={handleSubmit} />;
+}
+
+export default SwapPage;

src/pages/Pool/Swap/useSimulate.ts

@@ -0,0 +1,5 @@
+const useSimulate = () => {
+  /* TODO: implement */
+};
+
+export default useSimulate;

src/pages/Pool/Withdraw/index.tsx

@@ -0,0 +1,14 @@
+import { FormEventHandler, useCallback } from "react";
+
+function WithdrawPage() {
+  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+    (event) => {
+      /* TODO: implement */
+    },
+    [],
+  );
+
+  return <form onSubmit={handleSubmit} />;
+}
+
+export default WithdrawPage;

src/pages/Pool/Withdraw/useSimulate.ts

@@ -0,0 +1,5 @@
+const useSimulate = () => {
+  /* TODO: implement */
+};
+
+export default useSimulate;

src/polyfills/polyfills.js

@@ -6,4 +6,4 @@ window.Buffer = Buffer;
 window.process = process;
 
 globalThis.Buffer = Buffer;
-globalThis.process = process;
+globalThis.process = process;