diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..1f4f560
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+build/*
+public/*
+src/react-app-env.d.ts
+src/serviceWorker.ts
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..7b74b59
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["prettier"]
+}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..bc8643e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "doubleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}
diff --git a/example.env b/example.env
new file mode 100644
index 0000000..81d5ae3
--- /dev/null
+++ b/example.env
@@ -0,0 +1,4 @@
+REACT_APP_MORALIS_APP_ID=QT6crraMnABRgb5AqrKcurSLNiNRd2JT3HPLLTTm
+REACT_APP_MORALIS_SERVER_URL=https://hjuh3bynravd.usemoralis.com:2053/server
+REACT_APP_CHAIN_ID=0x13881
+# REACT_APP_CHAIN_ID=0xfa
\ No newline at end of file
diff --git a/package.json b/package.json
index f760c55..db7909c 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@alpsfinance/core": "^0.0.3",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.4.2",
@@ -14,17 +15,23 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "@walletconnect/web3-provider": "^1.7.3",
+    "@web3auth/web3auth": "^0.3.3",
     "bignumber.js": "^9.0.2",
     "lodash": "^4.17.21",
+    "magic-sdk": "7.0.0",
     "moralis": "^1.3.2",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "react-moralis": "^1.3.1",
-    "react-scripts": "5.0.0",
+    "react-moralis": "^1.3.2",
+    "react-scripts": "4.0.3",
+    "react-spinners": "^0.11.0",
     "typescript": "^4.0.3",
+    "walletlink": "^2.5.0",
     "web-vitals": "^0.2.4",
+    "web3": "^1.7.1",
     "workbox-background-sync": "^5.1.3",
     "workbox-broadcast-update": "^5.1.3",
     "workbox-cacheable-response": "^5.1.3",
@@ -42,7 +49,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
+    "format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",
+    "isready": "npm run format && npm run lint && npm run build"
   },
   "eslintConfig": {
     "extends": [
@@ -64,6 +74,12 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
-    "@types/react-copy-to-clipboard": "^5.0.2"
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "prettier": "2.4.1",
+    "prettier-eslint": "13.0.0",
+    "prettier-eslint-cli": "5.0.1"
   }
 }
diff --git a/src/AlpsTokenPresale.tsx b/src/AlpsTokenPresale.tsx
index 089c696..4694c27 100644
--- a/src/AlpsTokenPresale.tsx
+++ b/src/AlpsTokenPresale.tsx
@@ -3,23 +3,82 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { Box } from "@mui/material";
 import { calculateTimeLeft } from "./utility/helper";
+import { useMoralis } from "react-moralis";
+import preSaleAbi from "@alpsfinance/core/build/contracts/Presale.json";
+import { CHAIN_SYMBOL, PRESALE_CONTRACT_ADDRESS } from "./constant";
+import { useApiContract } from "react-moralis";
 
 interface Props {
   isLargeScreen: Boolean;
 }
 
 const AlpsTokenPresale: FC<Props> = (props) => {
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(Date.now()));
+  const [currentRound, setCurrentRound] = useState<number>(1);
   const { isLargeScreen } = props;
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-    return () => clearTimeout(timer);
+  const { isAuthenticated } = useMoralis();
+  const getCurrentPresaleRoundFunction = useApiContract({
+    address: PRESALE_CONTRACT_ADDRESS,
+    functionName: "getCurrentPresaleRound",
+    chain: CHAIN_SYMBOL,
+    abi: preSaleAbi.abi,
+  });
+  const { data, runContractFunction } = useApiContract({
+    address: PRESALE_CONTRACT_ADDRESS,
+    functionName: "presaleDetailsMapping",
+    chain: CHAIN_SYMBOL,
+    abi: preSaleAbi.abi,
+    params: { "": (currentRound + 1).toString() },
   });
+  useEffect(() => {
+    if (isAuthenticated)
+      if (currentRound < 2) runContractFunction();
+      else setTimeLeft(calculateTimeLeft(Date.now()));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentRound, isAuthenticated]);
+
+  async function Fetch() {
+    try {
+      const res = await getCurrentPresaleRoundFunction.runContractFunction();
+      setCurrentRound(Number(res));
+      // const nextRound = await getNextRoundFunction.runContractFunction();
+      // console.log(res, nextRound)
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    if (isAuthenticated) Fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated]);
+
+  let timer: any;
+  useEffect(() => {
+    if (data) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      timer = setInterval(() => {
+        const leftTime = calculateTimeLeft(
+          1000 * Number((data as any).startingTime)
+        );
+        if (
+          leftTime.days === 0 &&
+          leftTime.hours === 0 &&
+          leftTime.minutes === 0 &&
+          leftTime.seconds === 0
+        ) {
+          Fetch();
+        }
+        setTimeLeft(leftTime);
+      }, 1000);
+    } else {
+      clearTimeout(timer);
+    }
+    return () => clearInterval(timer);
+  }, [data]);
 
   return (
-    <Grid container justifyContent='center' alignItems='start'>
+    <Grid container justifyContent="center" alignItems="start">
       <Box
         sx={{
           background:
@@ -34,8 +93,8 @@ const AlpsTokenPresale: FC<Props> = (props) => {
             background: "rgba(0, 36, 0, 0.5)",
           }}
         >
-          <Grid container justifyContent='center' alignItems='center' pt={1}>
-            TOKEN PRESALE STARTS IN:
+          <Grid container justifyContent="center" alignItems="center" pt={1}>
+            TOKEN PRESALE ROUND {currentRound + 1} STARTS IN:
           </Grid>
 
           <Grid container spacing={isLargeScreen ? 2 : 0}>
@@ -51,7 +110,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 }}
               >
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -62,7 +121,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 </Box>
 
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -73,7 +132,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 </Box>
 
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -83,7 +142,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                   <Typography fontWeight={600}>minutes </Typography>
                 </Box>
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
diff --git a/src/App.tsx b/src/App.tsx
index 411b075..6ad7af4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import "./App.css";
 import AppBar from "./AppBar";
 import AlpsTokenPresale from "./AlpsTokenPresale";
 import Footer from "./Footer";
-import Timeline from "./Timeline";
+import Timeline from "./timeline";
 import BuyContainer from "./BuyContainer";
 import WrongNetworkModal from "./WrongNetworkModal";
 
@@ -32,22 +32,22 @@ export default function App() {
         <Grid
           container
           spacing={0}
-          alignItems='center'
-          justifyContent='center'
+          alignItems="center"
+          justifyContent="center"
           pt={2}
           sx={{
             color: "white",
             pb: 5,
             mb: 5,
           }}
-          flexDirection='column'
+          flexDirection="column"
         >
           <Grid item xs={12}>
             <Grid
               container
-              direction='column'
-              justifyContent='center'
-              textAlign='center'
+              direction="column"
+              justifyContent="center"
+              textAlign="center"
               spacing={2}
               mb={2}
             >
@@ -63,15 +63,15 @@ export default function App() {
                 container
                 px={3}
                 mt={2}
-                direction='column'
-                justifyContent='center'
-                textAlign='center'
+                direction="column"
+                justifyContent="center"
+                textAlign="center"
               >
                 <Box>
                   <img
-                    src='placeholder.png'
-                    alt='Placeholder'
-                    loading='lazy'
+                    src="placeholder.png"
+                    alt="Placeholder"
+                    loading="lazy"
                     style={{
                       width: "100%",
                       maxWidth: "750px",
@@ -82,11 +82,11 @@ export default function App() {
             </Grid>
           </Grid>
           <BuyContainer isLargeScreen={isLargeScreen} />
-          <Grid item lg={4} textAlign='left' px={isLargeScreen ? 5 : 0}>
-            <Typography variant='h5' sx={{ mb: 2 }}>
+          <Grid item lg={4} textAlign="left" px={isLargeScreen ? 5 : 0}>
+            <Typography variant="h5" sx={{ mb: 2 }}>
               Token Info
             </Typography>
-            <Grid container direction='row' alignItems='center' spacing={1}>
+            <Grid container direction="row" alignItems="center" spacing={1}>
               <Grid item lg={6} sm={7}>
                 <Typography sx={{ display: "inline" }}>Symbol: </Typography>
                 <Typography fontWeight={600} sx={{ display: "inline" }}>
@@ -100,7 +100,7 @@ export default function App() {
                 </Typography>
               </Grid>
             </Grid>
-            <Grid container direction='row' alignItems='center' spacing={1}>
+            <Grid container direction="row" alignItems="center" spacing={1}>
               <Grid item lg={12}>
                 <Typography sx={{ display: "inline" }}>Contract: </Typography>
                 <Typography fontWeight={600} sx={{ display: "inline", mr: 1 }}>
@@ -113,10 +113,10 @@ export default function App() {
                 >
                   <Tooltip
                     title={copied ? "Copied!" : "Copy To Clipboard"}
-                    placement='top'
+                    placement="top"
                     onClose={() => setTimeout(() => setCopied(false), 200)}
                   >
-                    <img src='./copy-icon.svg' alt='Copy to Clipboard' />
+                    <img src="./copy-icon.svg" alt="Copy to Clipboard" />
                   </Tooltip>
                 </CopyToClipboard>
               </Grid>
diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index edaa99b..cf7969c 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -21,14 +21,24 @@ const CustomAppBar: FC = () => {
       const ethAddress = user?.get("ethAddress");
       setWalletAddress(ethAddress.replace(ethAddress.substring(6, 38), "****"));
     }
-    //eslint - disable - next - line;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated]);
 
+  const onLoginW = async () => {
+    const user = await authenticate({ provider: "walletconnect" });
+    console.log(user);
+  };
+
+  const onLoginM = async () => {
+    const user = await authenticate();
+    console.log(user);
+  };
+
   const loginControl = (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
     if (!isAuthenticated) {
-      authenticate();
+      onLoginM();
     } else {
       logout();
     }
@@ -67,7 +77,7 @@ const CustomAppBar: FC = () => {
   const list = (anchor: String) => (
     <Box
       sx={{ width: 250 }}
-      role='presentation'
+      role="presentation"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
@@ -87,8 +97,8 @@ const CustomAppBar: FC = () => {
       </List>
       <List>
         <Button
-          color='inherit'
-          variant='contained'
+          color="inherit"
+          variant="contained"
           sx={{
             borderRadius: 30,
             color: "#0D7E06",
@@ -106,8 +116,8 @@ const CustomAppBar: FC = () => {
 
   return (
     <AppBar
-      position='sticky'
-      color='transparent'
+      position="sticky"
+      color="transparent"
       elevation={0}
       sx={{
         pt: 1.5,
@@ -143,8 +153,8 @@ const CustomAppBar: FC = () => {
             </Link>
           ))}
         <Button
-          color='inherit'
-          variant='contained'
+          color="inherit"
+          variant="contained"
           sx={{
             borderRadius: 30,
             color: "#0D7E06",
@@ -162,8 +172,8 @@ const CustomAppBar: FC = () => {
         </Button>
         <Grid
           container
-          justifyContent='right'
-          alignItems='right'
+          justifyContent="right"
+          alignItems="right"
           sx={{
             "@media (min-width: 780px)": {
               display: "none",
diff --git a/src/BuyContainer.tsx b/src/BuyContainer.tsx
index 4f58020..1ab6fb8 100644
--- a/src/BuyContainer.tsx
+++ b/src/BuyContainer.tsx
@@ -14,40 +14,74 @@ import {
 } from "@mui/material";
 import { useMoralis, useWeb3ExecuteFunction } from "react-moralis";
 import { chainlinkFeedAbi } from "./utility/abi";
-import { preSaleAbi } from "./utility/presaleabi";
 import BigNumber from "bignumber.js";
+import { PRESALE_CONTRACT_ADDRESS } from "./constant";
+import { toPresaleContract, toTokenContract } from "./utility/helper";
+import { ClipLoader } from "react-spinners";
 
 interface props {
   isLargeScreen: Boolean;
 }
+
+type CurrencyData = {
+  value: string;
+  label: string;
+  address: string;
+  aggregatorAddress: string;
+};
+
 const BuyContainer: FC<props> = (props: props) => {
   const { isLargeScreen } = props;
-  const { isAuthenticated, enableWeb3, isWeb3Enabled, Moralis } = useMoralis();
-  const { fetch } = useWeb3ExecuteFunction();
+  const { enableWeb3, isWeb3Enabled, Moralis, user } = useMoralis();
+  const getPriceFunc = useWeb3ExecuteFunction();
+
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  console.log(process.env.NODE_ENV);
+  const chain_id = process.env.NODE_ENV === "development" ? "0x13881" : "0xfa";
 
-  const tokens = [
-    {
-      value: "0",
-      label: "MATIC",
-      contractAddress: "0x0000000000000000000000000000000000000000",
-      oracleAddress: "0xd0D5e3DB44DE05E9F294BB0a3bEEaF030DE24Ada",
-    },
-    {
-      value: "1",
-      label: "USDT",
-      contractAddress: "0x72F09c85234C975Da2B6686e472FE40633fA2Cd9",
-      oracleAddress: "0x92C09849638959196E976289418e5973CC96d645",
-    },
-    {
-      value: "2",
-      label: "DAI",
-      contractAddress: "0x001B3B4d0F3714Ca98ba10F6042DaEbF0B1B7b6F",
-      oracleAddress: "0x0FCAa9c899EC5A91eBc3D5Dd869De833b06fB046",
-    },
-  ];
-  const [selectedToken, setToken] = useState(0);
-  const changeToken = (event: SelectChangeEvent<number>): void => {
-    setToken(Number(event.target.value));
+  const currencies: { [type: string]: CurrencyData[] } = {
+    "0xfa": [
+      {
+        value: "FTM",
+        label: "FTM",
+        address: "0x0000000000000000000000000000000000000000",
+        aggregatorAddress: "0xf4766552D15AE4d256Ad41B6cf2933482B0680dc",
+      },
+      {
+        value: "USDT",
+        label: "USDT",
+        address: "0x8D11eC38a3EB5E956B052f67Da8Bdc9bef8Abf3E",
+        aggregatorAddress: "0x91d5DEFAFfE2854C7D02F50c80FA1fdc8A721e52",
+      },
+      {
+        value: "DAI",
+        label: "DAI",
+        address: "0x049d68029688eAbF473097a2fC38ef61633A3C7A",
+        aggregatorAddress: "0xF64b636c5dFe1d3555A847341cDC449f612307d0",
+      },
+    ],
+    "0x13881": [
+      {
+        value: "MATIC",
+        label: "MATIC",
+        address: "0x0000000000000000000000000000000000000000",
+        aggregatorAddress: "0xd0D5e3DB44DE05E9F294BB0a3bEEaF030DE24Ada",
+      },
+      {
+        value: "LINK",
+        label: "LINK",
+        address: "0x326C977E6efc84E512bB9C30f76E30c160eD06FB",
+        aggregatorAddress: "0x12162c3E810393dEC01362aBf156D7ecf6159528",
+      },
+    ],
+  };
+  const [token, setToken] = useState<CurrencyData>(currencies[chain_id][0]);
+  const changeToken = (event: SelectChangeEvent<string>): void => {
+    setToken(
+      currencies[chain_id].filter(
+        (x: CurrencyData) => x.value === event.target.value
+      )[0]
+    );
   };
   const [amount, setAmount] = useState("0.1");
   const changeAmount = (
@@ -55,53 +89,67 @@ const BuyContainer: FC<props> = (props: props) => {
   ): void => {
     setAmount(event.target.value);
   };
-  const [isCalculating, setIsCalculating] = useState(false);
 
-  const submitHandler = (event: FormEvent<HTMLFormElement>): void => {
+  const [price, setPrice] = useState("1");
+  const submitHandler = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    fetch({
-      params: {
-        abi: preSaleAbi,
-        functionName: "presaleTokens",
-        contractAddress: "0x446D0E6f6d473ef5Ac7DF1bac47a1740c540a1B3",
-        params: {
-          _paymentTokenAddress: tokens[selectedToken].contractAddress,
-          _amount: new BigNumber(amount).multipliedBy("1000000000000000").toString(),
-        },
-        // msgValue: Moralis.Units.ETH(1),
-      },
-      onComplete: () => {
-        setIsCalculating(false);
-      },
-      onError: (result: any) => {
-        console.log(result);
-      },
-      onSuccess: (result: any) => {
-        alert(true);
-      },
-    });
+    console.log(price, amount);
+    if (!isWeb3Enabled) {
+      await enableWeb3();
+    }
+    setIsProcessing(true);
+    try {
+      const ethAddress = user?.get("ethAddress");
+      if (token.address === "0x0000000000000000000000000000000000000000") {
+        const res = await toPresaleContract()
+          .methods.presaleTokens(token.address, Moralis.Units.ETH(amount))
+          .send({
+            from: ethAddress,
+            value: Moralis.Units.ETH(amount),
+          });
+
+        console.log(res);
+      } else {
+        const tokenContract = toTokenContract(token.address);
+        const approve = await tokenContract.methods
+          .allowance(ethAddress, PRESALE_CONTRACT_ADDRESS)
+          .call();
+        console.log(approve < Moralis.Units.ETH(amount));
+        if (approve < Moralis.Units.ETH(amount)) {
+          await tokenContract.methods
+            .approve(PRESALE_CONTRACT_ADDRESS, Moralis.Units.ETH(amount))
+            .send({ from: ethAddress });
+        }
+        const res = await toPresaleContract()
+          .methods.presaleTokens(token.address, Moralis.Units.ETH(amount))
+          .send({ from: ethAddress });
+        console.log(res);
+      }
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setIsProcessing(false);
+    }
   };
 
+  const [isCalculating, setIsCalculating] = useState(false);
+
   useEffect(() => {
-    if (!isWeb3Enabled) {
-      enableWeb3();
-    }
     if (isWeb3Enabled) {
       setIsCalculating(true);
-      fetch({
+      console.log("getting");
+      getPriceFunc.fetch({
         params: {
           abi: chainlinkFeedAbi,
           functionName: "latestRoundData",
-          contractAddress: tokens[selectedToken].oracleAddress,
+          contractAddress: token.aggregatorAddress,
         },
         onComplete: () => {
           setIsCalculating(false);
         },
-        onError: (result: any) => {
-          console.log(result);
-        },
         onSuccess: (result: any) => {
           const { answer } = result;
+          setPrice(answer.toString());
           setAmount(
             String(
               _.ceil(
@@ -115,14 +163,15 @@ const BuyContainer: FC<props> = (props: props) => {
           );
         },
       });
-    } else if (!isCalculating) {
-      setIsCalculating(true);
+    } else {
+      enableWeb3();
     }
     // eslint-disable-next-line
-  }, [isAuthenticated, selectedToken]);
+  }, [isWeb3Enabled, token]);
+
   return (
     <Grid item lg={5} px={isLargeScreen ? 5 : 0} mt={2} mb={2}>
-      <Typography variant='h5' sx={{ mb: 2 }}>
+      <Typography variant="h5" sx={{ mb: 2 }}>
         Presale Round 1
       </Typography>
       <Box
@@ -139,7 +188,7 @@ const BuyContainer: FC<props> = (props: props) => {
         <Typography fontWeight={600} sx={{ ml: 0.5, mb: 1 }}>
           Price: 1 Alps = $0.000125
         </Typography>
-        <Box component='form' autoComplete='off' onSubmit={submitHandler}>
+        <Box component="form" autoComplete="off" onSubmit={submitHandler}>
           <Box
             sx={{
               display: "flex",
@@ -151,7 +200,7 @@ const BuyContainer: FC<props> = (props: props) => {
           >
             <TextField
               required
-              variant='standard'
+              variant="standard"
               value={amount}
               onChange={changeAmount}
               disabled={isCalculating}
@@ -168,14 +217,14 @@ const BuyContainer: FC<props> = (props: props) => {
                 },
               }}
             />
-            <Divider orientation='vertical' flexItem color='white' />
-            <FormControl variant='standard' sx={{ minWidth: 100 }}>
+            <Divider orientation="vertical" flexItem color="white" />
+            <FormControl variant="standard" sx={{ minWidth: 100 }}>
               <Select
-                labelId='demo-simple-select-standard-label'
-                id='demo-simple-select-standard'
-                value={selectedToken}
+                labelId="demo-simple-select-standard-label"
+                id="demo-simple-select-standard"
+                value={token.value}
                 onChange={changeToken}
-                label='Age'
+                label="Age"
                 disableUnderline
                 sx={{
                   pl: 2,
@@ -186,7 +235,7 @@ const BuyContainer: FC<props> = (props: props) => {
                   },
                 }}
               >
-                {tokens.map((option) => (
+                {currencies[chain_id].map((option: any) => (
                   <MenuItem key={option.value} value={option.value}>
                     {option.label}
                   </MenuItem>
@@ -195,8 +244,9 @@ const BuyContainer: FC<props> = (props: props) => {
             </FormControl>
           </Box>
           <Button
-            color='inherit'
-            variant='contained'
+            color="inherit"
+            variant="contained"
+            disabled={isProcessing}
             sx={{
               borderRadius: 2,
               background:
@@ -207,9 +257,13 @@ const BuyContainer: FC<props> = (props: props) => {
               textTransform: "none",
               color: "black",
             }}
-            type='submit'
+            type="submit"
           >
-            Buy
+            {isProcessing ? (
+              <ClipLoader color={"#fff"} loading={isProcessing} size={30} />
+            ) : (
+              "Buy"
+            )}
           </Button>
         </Box>
       </Box>
diff --git a/src/Footer.tsx b/src/Footer.tsx
index 99fa9b1..ea9c4e3 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -8,7 +8,7 @@ import TelegramIcon from "@mui/icons-material/Telegram";
 import { OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material";
 import GitHubIcon from "@mui/icons-material/GitHub";
-import { FaDiscord, FaMedium, FaInstagram } from "react-icons/fa";
+import { FaMedium, FaInstagram } from "react-icons/fa";
 import { IconType } from "react-icons";
 
 interface SocialMediaObject {
@@ -62,30 +62,30 @@ const SocialMediaArray: SocialMediaObject[] = [
 ];
 
 const Footer: FC = () => {
-
   return (
     <Grid
       container
       sx={{
         paddingTop: "3rem",
         paddingBottom: "3rem",
-        background: "linear-gradient(91.05deg, #0D7E06 -25.94%, #002400 98.77%)",
+        background:
+          "linear-gradient(91.05deg, #0D7E06 -25.94%, #002400 98.77%)",
         color: "white",
         p: 2,
       }}
-      justifyContent='center'
-      alignItems='center'
+      justifyContent="center"
+      alignItems="center"
     >
       <Grid
         container
-        justifyContent='center'
-        alignItems='center'
+        justifyContent="center"
+        alignItems="center"
         sx={{
-          pb: 1
+          pb: 1,
         }}
       >
         <Grid item>
-          <Grid container justifyContent='center' alignItems='center'>
+          <Grid container justifyContent="center" alignItems="center">
             {SocialMediaArray.map((socialMedia: SocialMediaObject) => {
               const { name, icon: Icon, color, link } = socialMedia;
               return (
@@ -109,7 +109,12 @@ const Footer: FC = () => {
             })}
           </Grid>
         </Grid>
-        <Grid container justifyContent='center' alignItems='center' sx={{mt: 1}}>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{ mt: 1 }}
+        >
           <Grid item>
             <Typography variant="body2">&copy; 2021 Alps Labs</Typography>
           </Grid>
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
deleted file mode 100644
index a934c14..0000000
--- a/src/Timeline.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { styled } from "@mui/material/styles";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import LinearProgress, {
-  LinearProgressProps,
-  linearProgressClasses,
-} from "@mui/material/LinearProgress";
-import { Box, Button } from "@mui/material";
-import { preSaleAbi } from "./utility/presaleabi";
-import { useMoralis, useWeb3ExecuteFunction } from "react-moralis";
-
-function LinearProgressWithLabel(
-  props: LinearProgressProps & { value: number }
-) {
-  return (
-    <Box sx={{ display: "flex", alignItems: "center" }} mb={2}>
-      <Box sx={{ width: "100%", mr: 1 }}>
-        <LinearProgress
-          {...props}
-          variant='determinate'
-          sx={{
-            height: 10,
-            borderRadius: 5,
-            [`&.${linearProgressClasses.colorPrimary}`]: {
-              backgroundColor: "#C7BFED",
-            },
-            [`& .${linearProgressClasses.bar}`]: {
-              borderRadius: 5,
-              backgroundColor: "#0D7E06",
-            },
-          }}
-        />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant='body2' color='text.secondary'>{`${Math.round(
-          props.value
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  );
-}
-
-const Timeline: FC = () => {
-  const { isWeb3Enabled } = useMoralis();
-  const { fetch } = useWeb3ExecuteFunction();
-  const [progress, setProgress] = useState(-1);
-
-  useEffect(() => {
-    if (isWeb3Enabled && progress === -1) {
-      fetch({
-        params: {
-          abi: preSaleAbi,
-          functionName: "totalSupply",
-          contractAddress: "0x064c13231656A8c10CE6df9e8CC91E9D8CbCce31",
-        },
-        onError: (e: any) => {
-          console.log(e);
-        },
-        onSuccess: (result: any) => {
-          setProgress(result);
-        },
-      });
-    }
-  }, [isWeb3Enabled]);
-
-  return (
-    <Grid
-      container
-      sx={{
-        my: 5,
-      }}
-      justifyContent='center'
-    >
-      <Grid
-        item
-        lg={5}
-        sx={{
-          boxShadow: "0px 3px 11px 4px rgba(18, 209, 6, 0.25)",
-          borderRadius: 3,
-          pt: 2,
-          px: 2,
-        }}
-      >
-        <Typography variant='h5' sx={{ mb: 2 }}>
-          TIMELINE ALPS
-        </Typography>
-        <Typography fontWeight={600}>
-          PRESALE A (18 Feb 2022 - 17 Mar 2022)
-        </Typography>
-        <Typography>Amount: 50,000,000</Typography>
-        <Typography>Unit: $0.000125</Typography>
-        <LinearProgressWithLabel value={progress} />
-        <Typography fontWeight={600}>
-          PRESALE B (18 Mar 2022 - 17 Apr 2022)
-        </Typography>
-        <Typography>Amount: 100,000,000</Typography>
-        <Typography>Unit: $0.000250</Typography>
-        <LinearProgressWithLabel value={progress} />
-        <Typography fontWeight={600}>
-          PRESALE C (18 Apr 2022 - 17 May 2022)
-        </Typography>
-        <Typography>Amount: 100,000,000</Typography>
-        <Typography>Unit: $0.00050</Typography>
-        <LinearProgressWithLabel value={progress} />
-        <Box textAlign='center'>
-          <Button
-            color='inherit'
-            variant='contained'
-            sx={{
-              borderRadius: 5,
-              color: "white",
-              background:
-                "linear-gradient(274.61deg, #0D7E06 18.06%, #00BB89 125.98%)",
-              py: 1,
-              fontWeight: "bold",
-              mb: 4,
-            }}
-            onClick={() => {}}
-          >
-            Read Litepaper
-          </Button>
-        </Box>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default Timeline;
diff --git a/src/WrongNetworkModal.tsx b/src/WrongNetworkModal.tsx
index 94e5eaa..4b1bd2e 100644
--- a/src/WrongNetworkModal.tsx
+++ b/src/WrongNetworkModal.tsx
@@ -25,9 +25,16 @@ const WrongNetworkModal: FC = () => {
 
   useEffect(() => {
     if (isAuthenticated) {
-      if (chainId !== null && chainId !== "0x13881") {
+      if (
+        chainId !== null &&
+        chainId !==
+          (process.env.NODE_ENV === "development" ? "0x13881" : "0xfa")
+      ) {
         setOpen(true);
-      } else if (chainId === "0x13881") {
+      } else if (
+        chainId ===
+        (process.env.NODE_ENV === "development" ? "0x13881" : "0xfa")
+      ) {
         setOpen(false);
       }
     }
@@ -36,21 +43,22 @@ const WrongNetworkModal: FC = () => {
   return (
     <Modal
       open={open}
-      aria-labelledby='modal-modal-title'
-      aria-describedby='modal-modal-description'
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
     >
       <Box sx={style}>
-        <Typography id='modal-modal-title' variant='h6' component='h2'>
+        <Typography id="modal-modal-title" variant="h6" component="h2">
           Wrong Chain!
         </Typography>
-        <Typography id='modal-modal-description' sx={{ mt: 2 }}>
+        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
           Alps Finance only support <b>Fantom Opera Mainnet</b>. Please click
-          button below to change to Fantom Network. (Note: Use Polygon Mumbai for test)
+          button below to change to Fantom Network. (Note: Use Polygon Mumbai
+          for test)
         </Typography>
-        <Grid container justifyContent='center' alignItems='center' pt={1}>
+        <Grid container justifyContent="center" alignItems="center" pt={1}>
           <Button
-            color='inherit'
-            variant='contained'
+            color="inherit"
+            variant="contained"
             sx={{
               borderRadius: 2,
               background:
@@ -60,7 +68,11 @@ const WrongNetworkModal: FC = () => {
               textTransform: "none",
               color: "white",
             }}
-            onClick={() => switchNetwork("0x13881")}
+            onClick={() =>
+              switchNetwork(
+                process.env.NODE_ENV === "development" ? "0x13881" : "0xfa"
+              )
+            }
           >
             Change to Fantom Network
           </Button>
diff --git a/src/constant/index.ts b/src/constant/index.ts
new file mode 100644
index 0000000..e5421a3
--- /dev/null
+++ b/src/constant/index.ts
@@ -0,0 +1,5 @@
+export const CHAIN_SYMBOL = 'mumbai';
+export const PRESALE_CONTRACT_ADDRESS =
+  '0x446D0E6f6d473ef5Ac7DF1bac47a1740c540a1B3';
+export const TOKEN_CONTRACT_ADDRESS =
+  '0xaB87981c7ce36C3773aafacb6560d17BEEfE3Ac5';
diff --git a/src/service-worker.ts b/src/service-worker.ts
index 652a8a4..7a52ff5 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -57,7 +57,8 @@ registerRoute(
 // precache, in this case same-origin .png requests like those from in public/
 registerRoute(
   // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  ({ url }) =>
+    url.origin === self.location.origin && url.pathname.endsWith('.png'),
   // Customize this strategy as needed, e.g., by changing to CacheFirst.
   new StaleWhileRevalidate({
     cacheName: 'images',
diff --git a/src/theme.tsx b/src/theme.tsx
index 8a2da48..109ddd4 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -17,7 +17,7 @@ const theme = createTheme({
     error: {
       main: red.A400,
     },
-  }
-})
+  },
+});
 
 export default theme;
diff --git a/src/timeline/TimeItem.tsx b/src/timeline/TimeItem.tsx
new file mode 100644
index 0000000..ad24759
--- /dev/null
+++ b/src/timeline/TimeItem.tsx
@@ -0,0 +1,117 @@
+import { FC, useEffect, useState } from "react";
+import Typography from "@mui/material/Typography";
+import LinearProgress, {
+  LinearProgressProps,
+  linearProgressClasses,
+} from "@mui/material/LinearProgress";
+import { Box } from "@mui/material";
+import preSaleAbi from "@alpsfinance/core/build/contracts/Presale.json";
+import { useApiContract, useMoralis } from "react-moralis";
+import { CHAIN_SYMBOL, PRESALE_CONTRACT_ADDRESS } from "../constant";
+import { regularNumber } from "../utility/helper";
+
+function LinearProgressWithLabel(
+  props: LinearProgressProps & { value: number }
+) {
+  return (
+    <Box sx={{ display: "flex", alignItems: "center" }} mb={2}>
+      <Box sx={{ width: "100%", mr: 1 }}>
+        <LinearProgress
+          {...props}
+          variant="determinate"
+          sx={{
+            height: 10,
+            borderRadius: 5,
+            [`&.${linearProgressClasses.colorPrimary}`]: {
+              backgroundColor: "#C7BFED",
+            },
+            [`& .${linearProgressClasses.bar}`]: {
+              borderRadius: 5,
+              backgroundColor: "#0D7E06",
+            },
+          }}
+        />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+export type TimeLineData = {
+  round: number;
+  title: string;
+  amount: number;
+  unit: string;
+};
+
+export const TimelineItem: FC<TimeLineData> = ({
+  round,
+  title,
+  amount,
+  unit,
+}) => {
+  const [progress, setProgress] = useState<number>(-1);
+  const { isAuthenticated, Moralis } = useMoralis();
+
+  const { data, runContractFunction } = useApiContract({
+    address: PRESALE_CONTRACT_ADDRESS,
+    functionName: "getPresaleAmountByRound",
+    chain: CHAIN_SYMBOL,
+    abi: preSaleAbi.abi,
+    params: { _presaleRound: round.toString() },
+  });
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      runContractFunction();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    if (data) {
+      setProgress(Number(Moralis.Units.FromWei(data)));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+  // const { isWeb3Enabled, enableWeb3 } = useMoralis();
+  // const { fetch } = useWeb3ExecuteFunction();
+  // const [progress, setProgress] = useState(-1);
+
+  // useEffect(() => {
+  //   console.log(isWeb3Enabled, progress)
+  //   if (!isWeb3Enabled) {
+  //     enableWeb3();
+  //   }
+  //   if (isWeb3Enabled && progress === -1) {
+  //     fetch({
+  //       params: {
+  //         abi: preSaleAbi.abi,
+  //         functionName: "getPresaleAmountByRound",
+  //         contractAddress: PRESALE_CONTRACT_ADDRESS,
+  //         params: {"_presaleRound":0}
+  //       },
+  //       onError: (e: any) => {
+  //         console.log(e);
+  //       },
+  //       onSuccess: (result: any) => {
+  //         console.log('#######', result)
+  //         setProgress(result);
+  //       },
+  //     });
+  //   }
+  // }, [isWeb3Enabled]);
+
+  return (
+    <>
+      <Typography fontWeight={600}>{title}</Typography>
+      <Typography>Amount: {regularNumber(amount)}</Typography>
+      <Typography>Unit: {unit}</Typography>
+      <LinearProgressWithLabel value={progress / amount} />
+    </>
+  );
+};
diff --git a/src/timeline/index.tsx b/src/timeline/index.tsx
new file mode 100644
index 0000000..288cc9c
--- /dev/null
+++ b/src/timeline/index.tsx
@@ -0,0 +1,93 @@
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { Box, Button } from "@mui/material";
+import { TimelineItem, TimeLineData } from "./TimeItem";
+
+const Timeline: React.FC = () => {
+  const timelines: TimeLineData[] = [
+    {
+      round: 0,
+      title: "PRESALE A (7 Mar 2022 - 13 Mar 2022)",
+      amount: 50000000,
+      unit: "$0.025",
+    },
+    {
+      round: 1,
+      title: "PRESALE B (14 Mar 2022 - 20 Mar 2022)",
+      amount: 100000000,
+      unit: "$0.050",
+    },
+    {
+      round: 2,
+      title: "PRESALE C (21 Mar 2022 - 27 Mar 2022)",
+      amount: 100000000,
+      unit: "$0.075",
+    },
+  ];
+
+  return (
+    <Grid
+      container
+      sx={{
+        my: 5,
+      }}
+      justifyContent="center"
+    >
+      <Grid
+        item
+        lg={5}
+        sx={{
+          boxShadow: "0px 3px 11px 4px rgba(18, 209, 6, 0.25)",
+          borderRadius: 3,
+          pt: 2,
+          px: 2,
+        }}
+      >
+        <Typography variant="h5" sx={{ mb: 2 }}>
+          TIMELINE ALPS
+        </Typography>
+        {timelines.map((timeline: TimeLineData, index: number) => (
+          <TimelineItem {...timeline} key={`timeline-${index}`} />
+        ))}
+        {/* <Typography fontWeight={600}>
+          PRESALE A (18 Feb 2022 - 17 Mar 2022)
+        </Typography>
+        <Typography>Amount: 50,000,000</Typography>
+        <Typography>Unit: $0.000125</Typography>
+        <LinearProgressWithLabel value={progress} />
+        <Typography fontWeight={600}>
+          PRESALE B (18 Mar 2022 - 17 Apr 2022)
+        </Typography>
+        <Typography>Amount: 100,000,000</Typography>
+        <Typography>Unit: $0.000250</Typography>
+        <LinearProgressWithLabel value={progress} />
+        <Typography fontWeight={600}>
+          PRESALE C (18 Apr 2022 - 17 May 2022)
+        </Typography>
+        <Typography>Amount: 100,000,000</Typography>
+        <Typography>Unit: $0.00050</Typography>
+        <LinearProgressWithLabel value={progress} /> */}
+        <Box textAlign="center">
+          <Button
+            color="inherit"
+            variant="contained"
+            sx={{
+              borderRadius: 5,
+              color: "white",
+              background:
+                "linear-gradient(274.61deg, #0D7E06 18.06%, #00BB89 125.98%)",
+              py: 1,
+              fontWeight: "bold",
+              mb: 4,
+            }}
+            onClick={() => {}}
+          >
+            Read Litepaper
+          </Button>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Timeline;
diff --git a/src/utility/abi.ts b/src/utility/abi.ts
new file mode 100644
index 0000000..4ade54c
--- /dev/null
+++ b/src/utility/abi.ts
@@ -0,0 +1,49 @@
+export const chainlinkFeedAbi = [
+  {
+    inputs: [],
+    name: 'decimals',
+    outputs: [{ internalType: 'uint8', name: '', type: 'uint8' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'description',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'uint80', name: '_roundId', type: 'uint80' }],
+    name: 'getRoundData',
+    outputs: [
+      { internalType: 'uint80', name: 'roundId', type: 'uint80' },
+      { internalType: 'int256', name: 'answer', type: 'int256' },
+      { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
+      { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
+      { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'latestRoundData',
+    outputs: [
+      { internalType: 'uint80', name: 'roundId', type: 'uint80' },
+      { internalType: 'int256', name: 'answer', type: 'int256' },
+      { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
+      { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
+      { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'version',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
diff --git a/src/utility/abi.tsx b/src/utility/abi.tsx
deleted file mode 100644
index 28a554f..0000000
--- a/src/utility/abi.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-export const chainlinkFeedAbi = [
-  {
-    inputs: [],
-    name: "decimals",
-    outputs: [{ internalType: "uint8", name: "", type: "uint8" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "description",
-    outputs: [{ internalType: "string", name: "", type: "string" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "uint80", name: "_roundId", type: "uint80" }],
-    name: "getRoundData",
-    outputs: [
-      { internalType: "uint80", name: "roundId", type: "uint80" },
-      { internalType: "int256", name: "answer", type: "int256" },
-      { internalType: "uint256", name: "startedAt", type: "uint256" },
-      { internalType: "uint256", name: "updatedAt", type: "uint256" },
-      { internalType: "uint80", name: "answeredInRound", type: "uint80" },
-    ],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "latestRoundData",
-    outputs: [
-      { internalType: "uint80", name: "roundId", type: "uint80" },
-      { internalType: "int256", name: "answer", type: "int256" },
-      { internalType: "uint256", name: "startedAt", type: "uint256" },
-      { internalType: "uint256", name: "updatedAt", type: "uint256" },
-      { internalType: "uint80", name: "answeredInRound", type: "uint80" },
-    ],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "version",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-];
diff --git a/src/utility/helper.ts b/src/utility/helper.ts
new file mode 100644
index 0000000..dce722b
--- /dev/null
+++ b/src/utility/helper.ts
@@ -0,0 +1,55 @@
+import Web3 from 'web3';
+// import preSaleAbi from "@alpsfinance/core/build/contracts/Presale.json";
+import { PRESALE_CONTRACT_ADDRESS } from '../constant';
+import { preSaleAbi } from './presaleabi';
+import { tokenAbi } from './tokenAbi';
+
+export const calculateTimeLeft = (timestamp: number) => {
+  let difference = timestamp - Date.now();
+
+  let timeLeft = {
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+
+  if (difference > 0) {
+    timeLeft = {
+      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((difference / 1000 / 60) % 60),
+      seconds: Math.floor((difference / 1000) % 60),
+    };
+  }
+  return timeLeft;
+};
+
+export const regularNumber = (value: number) => {
+  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+export const toWeb3 = () => {
+  let backupProvider: any = new Web3.providers.HttpProvider(
+    process.env.NODE_ENV === "development" ?
+      `https://rpc-mumbai.maticvigil.com` : 'https://rpc.ftm.tools'
+  );
+  // if (true) {
+  //   backupProvider = new Web3.providers.WebsocketProvider(
+  //     `wss://mainnet.infura.io/ws/v3/${process.env.NEXT_PUBLIC_INFURA_API_KEY}`,
+  //   );
+  // }
+  return new Web3(Web3.givenProvider || backupProvider);
+};
+
+export const toPresaleContract = () => {
+  const web3 = toWeb3();
+  return new web3.eth.Contract(
+    JSON.parse(preSaleAbi),
+    PRESALE_CONTRACT_ADDRESS
+  );
+};
+export const toTokenContract = (address: string) => {
+  const web3 = toWeb3();
+  return new web3.eth.Contract(JSON.parse(tokenAbi), address);
+};
diff --git a/src/utility/helper.tsx b/src/utility/helper.tsx
deleted file mode 100644
index 3823ab9..0000000
--- a/src/utility/helper.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export const calculateTimeLeft = () => {
-  let difference = +new Date(1646067600000) - +new Date();
-
-  let timeLeft = {
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  };
-
-  if (difference > 0) {
-    timeLeft = {
-      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
-      minutes: Math.floor((difference / 1000 / 60) % 60),
-      seconds: Math.floor((difference / 1000) % 60),
-    };
-  }
-
-  return timeLeft;
-};
diff --git a/src/utility/presaleabi.ts b/src/utility/presaleabi.ts
new file mode 100644
index 0000000..4347930
--- /dev/null
+++ b/src/utility/presaleabi.ts
@@ -0,0 +1,2 @@
+export const preSaleAbi =
+  '[{"inputs":[{"internalType":"address","name":"_tokenAddress","type":"address"},{"internalType":"address payable","name":"_presaleReceiver","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"presaleAmountOverdemand","type":"error"},{"inputs":[],"name":"presaleMaximumPresaleAmountInvalid","type":"error"},{"inputs":[],"name":"presaleMimumumUSDPurchaseInvalid","type":"error"},{"inputs":[],"name":"presaleNativeTokenPaymentNotSufficient","type":"error"},{"inputs":[],"name":"presaleNonZeroAddressInvalid","type":"error"},{"inputs":[],"name":"presaleRoundClosed","type":"error"},{"inputs":[],"name":"presaleStartingTimeInvalid","type":"error"},{"inputs":[],"name":"presaleTokenNotAvailable","type":"error"},{"inputs":[],"name":"presaleUSDPriceInvalid","type":"error"},{"inputs":[],"name":"presaleUSDPurchaseNotSufficient","type":"error"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"tokenAddress","type":"address"},{"indexed":false,"internalType":"bool","name":"tokenAvailability","type":"bool"},{"indexed":false,"internalType":"address","name":"aggregatorAddress","type":"address"}],"name":"PresalePaymentTokenUpdated","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"receiverAddress","type":"address"}],"name":"PresaleReceiverUpdated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"presaleRound","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"startingTime","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"usdPrice","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"minimumUSDPurchase","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"maximumPresaleAmount","type":"uint256"}],"name":"PresaleRoundUpdated","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"tokenAddress","type":"address"}],"name":"PresaleTokenUpdated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":true,"internalType":"address","name":"paymentTokenAddress","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"},{"indexed":false,"internalType":"uint256","name":"paymentTokenamount","type":"uint256"}],"name":"TokenPresold","type":"event"},{"inputs":[],"name":"getCurrentPresaleDetails","outputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getCurrentPresaleRound","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_presaleRound","type":"uint256"}],"name":"getPresaleAmountByRound","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getTotalPresaleAmount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getTotalPresaleRound","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"presaleAmountByRoundMapping","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"presaleDetailsMapping","outputs":[{"internalType":"uint256","name":"startingTime","type":"uint256"},{"internalType":"uint256","name":"usdPrice","type":"uint256"},{"internalType":"uint256","name":"minimumUSDPurchase","type":"uint256"},{"internalType":"uint256","name":"maximumPresaleAmount","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"presalePaymentTokenMapping","outputs":[{"internalType":"bool","name":"available","type":"bool"},{"internalType":"address","name":"aggregatorAddress","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"presaleReceiver","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_paymentTokenAddress","type":"address"},{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"presaleTokens","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_tokenAddress","type":"address"},{"internalType":"bool","name":"_tokenAvailability","type":"bool"},{"internalType":"address","name":"_aggregatorAddress","type":"address"}],"name":"setPresalePaymentToken","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address payable","name":"_newPresaleReceiver","type":"address"}],"name":"setPresaleReceiver","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"_presaleRound","type":"uint256"},{"internalType":"uint256","name":"_startingTime","type":"uint256"},{"internalType":"uint256","name":"_usdPrice","type":"uint256"},{"internalType":"uint256","name":"_minimumUSDPurchase","type":"uint256"},{"internalType":"uint256","name":"_maximumPresaleAmount","type":"uint256"}],"name":"setPresaleRound","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_newTokenAddress","type":"address"}],"name":"setPresaleTokenAddress","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"tokenAddress","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalPresaleRound","outputs":[{"internalType":"uint256","name":"_value","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"}]';
diff --git a/src/utility/tokenAbi.ts b/src/utility/tokenAbi.ts
new file mode 100644
index 0000000..5cdb855
--- /dev/null
+++ b/src/utility/tokenAbi.ts
@@ -0,0 +1,2 @@
+export const tokenAbi =
+  '[{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"},{"name":"_data","type":"bytes"}],"name":"transferAndCall","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_subtractedValue","type":"uint256"}],"name":"decreaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"balanceOf","outputs":[{"name":"balance","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_addedValue","type":"uint256"}],"name":"increaseApproval","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"},{"indexed":false,"name":"data","type":"bytes"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"}]';
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..cf722c2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": [
     "src"