diff --git a/.eslintrc.js b/.eslintrc.js
index 0dc8233..4a38777 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,26 +1,28 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-  },
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
+export default {
+    env: {
+        browser: true,
+        es6: true,
+    },
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 2018,
+        sourceType: "module",
+    },
+    plugins: ["@typescript-eslint", "react"],
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        // "plugin:@typescript-eslint/recommended",
+    ],
+    rules: {
+        indent: ["error", 4],
+        "linebreak-style": ["error", "unix"],
+        quotes: ["error", "double"],
+        semi: ["error", "always"],
+        fixToUnknown: false,
+        ignoreRestArgs: false,
     },
-    ecmaVersion: 2018,
-    sourceType: "module",
-  },
-  plugins: ["@typescript-eslint", "react"],
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-  ],
-  rules: {
-    indent: ["error", 4],
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "double"],
-    semi: ["error", "always"],
-  },
 };
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index ccf3043..cd2ecc0 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,5 +1,5 @@
-import React, { useReducer, useState } from "react";
-import io from "socket.io-client";
+import React, { useEffect, useReducer, useRef, useState } from "react";
+import io, { Socket } from "socket.io-client";
 import "./App.css";
 import PixelGrid from "../PixelGrid/PixelGrid";
 import ColorSelect from "../ColorSelect/ColorSelect";
@@ -19,16 +19,25 @@ import { PixelGridContext, initialState, reducer } from "../../stores/store";
  * Jimp
  * ArrayBuffer to image
  */
-const socket: any = io("http://localhost:3001");
 
 function App() {
     // const [pixelData, setPixelData] = useState([]);
     const [currentColor, setColor] = useState("#ff0000");
     const [state, dispatch] = useReducer(reducer, initialState);
+    const socketRef = useRef<Socket | null>(null);
 
-    const handlePixelClick = (
+    useEffect(() => {
+        try {
+            const socket: Socket = io("http://localhost:3001");
+            socketRef.current = socket;
+        } catch (e) {
+            console.log(e);
+        }
+    }, []);
+
+    const handlePixelClick = () => {
         // row: number, col: number
-    ) => {};
+    };
 
     const changeCurrentColor = (color: string) => {
         setColor(color);
diff --git a/src/components/PixelGrid/PixelGrid.tsx b/src/components/PixelGrid/PixelGrid.tsx
index bcb1d05..058db82 100644
--- a/src/components/PixelGrid/PixelGrid.tsx
+++ b/src/components/PixelGrid/PixelGrid.tsx
@@ -21,6 +21,7 @@ import {
     WrapperMouseUp,
     Zoom,
 } from "../../utils/const";
+import { Socket } from "socket.io-client";
 
 const canvasStyle = {
     display: "block",
@@ -31,7 +32,7 @@ interface Props {
     onPickColor: Function;
     currentColor: string;
     onPixelClick: Function;
-    socket: any;
+    socket: Socket | null;
 }
 
 function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
@@ -171,9 +172,8 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
         setCanvasHeight(image.height);
     };
 
-    const mouseUpOnWindow = (
+    const mouseUpOnWindow = () => {
         // e: MouseEvent
-    ) => {
         console.log("window mouseUp");
         draggingRef.current = false;
         if (canvas.current) {
@@ -200,10 +200,10 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
             ctx.current = canvas.current.getContext("2d");
         }
 
-        socket.on("initial-pixel-data", initialPixelData);
-        socket.on("update-dot", updateDot);
+        socket && socket.on("initial-pixel-data", initialPixelData);
+        socket && socket.on("update-dot", updateDot);
         return () => {
-            socket.off();
+            socket && socket.off();
             window.removeEventListener("mousemove", mouseMoveOnWindow);
             window.removeEventListener("mouseup", mouseUpOnWindow);
         };
@@ -217,7 +217,7 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
     };
 
     const renderPickColorBtn = () => {
-        let el = document.getElementById("color-pick-placeholder");
+        const el = document.getElementById("color-pick-placeholder");
         if (el) {
             return ReactDOM.createPortal(
                 <button style={{ marginLeft: "20px" }} onClick={setPickColor}>
@@ -231,14 +231,14 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
 
     const handleCanvasMouseMove = (e: ReactMouseEvent) => {
         if (isPickingColor && ctx.current && canvas.current) {
-            let [x, y] = getMousePos(e.nativeEvent);
+            const [x, y] = getMousePos(e.nativeEvent);
             // console.log(x, y)
-            let pixelColor = Array.from(
+            const pixelColor = Array.from(
                 ctx.current.getImageData(x, y, 1, 1).data
             );
-            let pixelColorCss = `rgba(${pixelColor})`;
+            const pixelColorCss = `rgba(${pixelColor})`;
             // console.log(pixelColor, pixelColorCss)
-            let cursorUrl = makeCursor(pixelColorCss);
+            const cursorUrl = makeCursor(pixelColorCss);
             if (canvas) {
                 canvas.current.style.cursor = `url(${cursorUrl}) 6 6, crosshair`;
             }
diff --git a/src/utils/pay/pay.ts b/src/utils/pay/pay.ts
index eeac963..a6d498f 100644
--- a/src/utils/pay/pay.ts
+++ b/src/utils/pay/pay.ts
@@ -6,8 +6,9 @@ interface PayParam {
     uid: number;
 }
 
+// const prefix = 'www.clicli.cc'
+const prefix = "http://localhost:3001";
+
 export function pay({ price, order, uid }: PayParam) {
-    return get(
-        `https://www.clicli.cc/vip/pay?price=${price}&order=${order}&uid=${uid}`
-    );
+    return get(`${prefix}/vip/pay?price=${price}&order=${order}&uid=${uid}`);
 }