diff --git a/README.md b/README.md
index a74b2d70..4979a410 100644
--- a/README.md
+++ b/README.md
@@ -44,5 +44,5 @@ Smartswap of Rigel Protocol is available on https://smartswap.rigelprotocol.com/
 - Linkedin: [rigelprotocol](https://www.linkedin.com/company/rigelprotocol)
 - Discord: [rigelprotocol](https://discord.com/invite/j86NH95GDD)
 - Email: [support@rigelprotocol](mailto:support@rigelprotocol.com)
-- Telegram: [rigel protocol](https://www.t.me/rigelprotocol)
+- Telegram: [rigeldao](https://t.me/rigeldao)
 - Whitepaper: [Link](www.rigelprotocol.com/whitepaper)
diff --git a/public/index.html b/public/index.html
index 26d4ada9..cfdf8abc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,76 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <base href="/">
+    <base href="/" />
     <meta charset="utf-8" />
     <meta
-    http-equiv="Cache-Control"
-    content="no-cache, no-store, must-revalidate, max-age=0"
-  />
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="0" />
-  <!-- The first thing in any HTML file should be the charset -->
-  <meta charset="utf-8" />
-  <!-- Make the page mobile compatible -->
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate, max-age=0"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <!-- The first thing in any HTML file should be the charset -->
+    <meta charset="utf-8" />
+    <!-- Make the page mobile compatible -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <!-- Allow installing the app to the homescreen -->
-  <meta name="mobile-web-app-capable" content="yes" />
+    <!-- Allow installing the app to the homescreen -->
+    <meta name="mobile-web-app-capable" content="yes" />
 
-  <!-- Allow installing the app to the homescreen -->
-  <meta name="mobile-web-app-capable" content="yes" />
-  <title>
-    RigelProtocol - Dapps for all your Defi Needs
-  </title>
-  <meta
-    name="keywords"
-    content="RigelProtocol, Rigel, Smart Swap, Limit, Set price, Auto invest, AutoTrade, Apply for Farms, Staking, , DEFI, Yield Farm, Secure Swap, High yield Farm"
-  />
-  <meta
-    name="description"
-    content="Rigel Protocol is the blockchain Decentralized protocol for all your Defi Needs.
+    <!-- Allow installing the app to the homescreen -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <title>RigelProtocol - Dapps for all your Defi Needs</title>
+    <meta
+      name="keywords"
+      content="RigelProtocol, Rigel, Smart Swap, Limit, Auto Limit, Auto invest, AutoTrade, Apply for Farms, Staking, , DEFI, Yield Farm, Secure Swap, High yield Farm"
+    />
+    <meta
+      name="description"
+      content="Rigel Protocol is the blockchain Decentralized protocol for all your Defi Needs.
     Several DeFi products featured are  smartswap operations, automated dexes trading, Liquidity mining, Launchpad & Product Token offering services, Influencers & New projects rewarding systems and other innovative features. Available on Binance Smart Chain, Polygon and Oasis "
-  />
+    />
 
-  <meta name="msapplication-TileColor" content="#da532c" />
-  <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
 
-  <!-- Open Graph / Facebook -->
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://smartswap.rigelprotocol.com" />
-  <meta
-    property="og:title"
-    content="RigelProtocol - Dapps for all your Defi Needs"
-  />
-  <meta
-    property="og:description"
-    content="RigelProtocol is a number of Decentralized finance(DEFI) products: Smart swapping exchange, Margin trading, yield farming and cross-chain on both Binance Smart Chain and Ethereum Chain. Highly Secure, Seamless Transactions and low fees "
-  />
-  <meta property="og:image" content="/images/favicon-16x16.svg" />
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-JRRW1SDM6G"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://smartswap.rigelprotocol.com" />
+    <meta
+      property="og:title"
+      content="RigelProtocol - Dapps for all your Defi Needs"
+    />
+    <meta
+      property="og:description"
+      content="RigelProtocol is a number of Decentralized finance(DEFI) products: Smart swapping exchange, Margin trading, yield farming and cross-chain on both Binance Smart Chain and Ethereum Chain. Highly Secure, Seamless Transactions and low fees "
+    />
+    <meta property="og:image" content="/images/favicon-16x16.svg" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-JRRW1SDM6G"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-  gtag('config', 'G-JRRW1SDM6G');
-</script>
-  <!-- Twitter -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta
-    property="twitter:url"
-    content="https://smartswap.rigelprotocol.com/"
-  />
-  <meta
-    property="twitter:title"
-    content="RigelProtocol - Smart Swapping Exchange, Yield Farming, Margin Trading & Cross Chain Protocol"
-  />
-  <meta
-    property="twitter:description"
-    content="RigelProtocol is a number of Decentralized finance(DEFI) products: Smart swapping exchange, Margin trading, yield farming and cross-chain on both Binance Smart Chain and Ethereum Chain. Highly Secure, Seamless Transactions and low fees "
-  />
-  <meta property="twitter:image" content="/images/favicon-16x16.svg" />
+      gtag("config", "G-JRRW1SDM6G");
+    </script>
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta
+      property="twitter:url"
+      content="https://smartswap.rigelprotocol.com/"
+    />
+    <meta
+      property="twitter:title"
+      content="RigelProtocol - Smart Swapping Exchange, Yield Farming, Margin Trading & Cross Chain Protocol"
+    />
+    <meta
+      property="twitter:description"
+      content="RigelProtocol is a number of Decentralized finance(DEFI) products: Smart swapping exchange, Margin trading, yield farming and cross-chain on both Binance Smart Chain and Ethereum Chain. Highly Secure, Seamless Transactions and low fees "
+    />
+    <meta property="twitter:image" content="/images/favicon-16x16.svg" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/favicon-16x16.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/components/Farming/Modals/Filter.tsx b/src/components/Farming/Modals/Filter.tsx
index f6be0701..3b4baa7b 100644
--- a/src/components/Farming/Modals/Filter.tsx
+++ b/src/components/Farming/Modals/Filter.tsx
@@ -92,60 +92,60 @@ const Filter = ({
             <PopoverTrigger>
               <Flex
                 h={10}
-                border='1px'
-                borderRadius='4px'
+                border="1px"
+                borderRadius="4px"
                 borderColor={filterButton}
-                cursor='pointer'
+                cursor="pointer"
                 px={4}
-                alignItems='center'
+                alignItems="center"
               >
                 <Icon mr={2} as={FiFilter} />
-                <Text fontSize='14px'>Filters</Text>
+                <Text fontSize="14px">Filters</Text>
               </Flex>
             </PopoverTrigger>
 
             <PopoverContent
-              borderRadius='6px'
+              borderRadius="6px"
               bg={bgColor}
               borderColor={borderColor}
-              mt='0px'
-              zIndex='1'
+              mt="0px"
+              zIndex="1"
             >
-              <PopoverHeader ml={3} color={textColor} borderBottom='none'>
+              <PopoverHeader ml={3} color={textColor} borderBottom="none">
                 Filters
               </PopoverHeader>
               <PopoverCloseButton
-                bg='none'
+                bg="none"
                 size={"sm"}
                 mt={2}
                 mr={3}
-                cursor='pointer'
+                cursor="pointer"
                 _focus={{ outline: "none" }}
                 p={"7px"}
                 border={"1px solid"}
                 borderColor={textColorTwo}
               />
               <PopoverBody>
-                <Flex mx={2} fontSize='14px' flexDirection='column'>
+                <Flex mx={2} fontSize="14px" flexDirection="column">
                   <Flex
                     mt={3}
-                    cursor='pointer'
-                    border='1px'
+                    cursor="pointer"
+                    border="1px"
                     borderColor={
                       newestToOldest ? filterBorderColor : inactiveButtonBorder
                     }
-                    borderRadius='6px'
+                    borderRadius="6px"
                     p={3}
-                    justifyContent='space-between'
-                    alignItems='center'
+                    justifyContent="space-between"
+                    alignItems="center"
                     bgColor={buttonBgColor}
-                    onClick={() =>{
-                      GFarmingFilterSearch(true)
+                    onClick={() => {
+                      GFarmingFilterSearch(true);
                       handleNewestToOldest(
                         setNewestToOldest,
                         setOldestToNewset,
                         oldestToNewest
-                      )
+                      );
                     }}
                   >
                     <Text>Newest to Oldest</Text>
@@ -155,24 +155,24 @@ const Filter = ({
                     />
                   </Flex>
                   <Flex
-                    cursor='pointer'
+                    cursor="pointer"
                     mt={4}
                     bgColor={buttonBgColor}
-                    border='1px'
+                    border="1px"
                     borderColor={
                       oldestToNewest ? filterBorderColor : inactiveButtonBorder
                     }
-                    borderRadius='6px'
+                    borderRadius="6px"
                     p={3}
-                    justifyContent='space-between'
-                    alignItems='center'
-                    onClick={() =>{
-                      GFarmingFilterSearch(true)
+                    justifyContent="space-between"
+                    alignItems="center"
+                    onClick={() => {
+                      GFarmingFilterSearch(true);
                       handleOldestToNewest(
                         setNewestToOldest,
                         setOldestToNewset,
                         newestToOldest
-                      )
+                      );
                     }}
                   >
                     <Text>Oldest to Newest </Text>
@@ -181,13 +181,12 @@ const Filter = ({
                       color={checkIconColor}
                     />
                   </Flex>
-                  <Flex p={3} flexDirection='column'>
+                  <Flex p={3} flexDirection="column">
                     <Text my={3}>APY Value</Text>
 
                     <RangeSlider
                       onChange={(value) => {
-                          GFarmingFilterSearch(true)
-                        console.log(value);
+                        GFarmingFilterSearch(true);
                         setRange0(value[0]);
                         setRange1(value[1]);
                       }}
@@ -212,18 +211,18 @@ const Filter = ({
                   </Flex>
                   <Flex
                     my={3}
-                    alignItems='center'
-                    justifyContent='space-between'
+                    alignItems="center"
+                    justifyContent="space-between"
                   >
                     <Input
                       value={range0}
                       onChange={(e) => {
                         handleRangeChange(setRange0, e, false);
                       }}
-                      borderRadius='6px'
+                      borderRadius="6px"
                       py={3}
                       px={3}
-                      w='45%'
+                      w="45%"
                       bgColor={buttonBgColor}
                     />
                     -
@@ -232,10 +231,10 @@ const Filter = ({
                       onChange={(e) => {
                         handleRangeChange(setRange1, e, true);
                       }}
-                      borderRadius='6px'
+                      borderRadius="6px"
                       py={3}
                       px={3}
-                      w='45%'
+                      w="45%"
                       bgColor={buttonBgColor}
                     />
                   </Flex>
@@ -243,11 +242,11 @@ const Filter = ({
                     my={3}
                     color={lastButtonColor}
                     bgColor={lastButtonBgColor}
-                    cursor='pointer'
-                    borderRadius='6px'
+                    cursor="pointer"
+                    borderRadius="6px"
                     p={3}
-                    justifyContent='center'
-                    alignItems='center'
+                    justifyContent="center"
+                    alignItems="center"
                     onClick={() => {
                       // FilterFarm();
                       setSavedChanges(true);
diff --git a/src/components/G-analytics/gIndex.ts b/src/components/G-analytics/gIndex.ts
index 42f7d72c..af84fda6 100644
--- a/src/components/G-analytics/gIndex.ts
+++ b/src/components/G-analytics/gIndex.ts
@@ -1,5 +1,4 @@
-import gtag from "ga-gtag"
-
+import gtag from "ga-gtag";
 
 // // page view
 // export const GPageView = (title:string,location:string ) =>{
@@ -11,121 +10,119 @@ import gtag from "ga-gtag"
 
 // button clicked
 export const GButtonClick = (
-  page:string,
-  activityBeenPerformed:string,
-  fromToken:string="null",
-  toToken:string="null"
-  ) =>{
-  gtag('event', 'button_clicked', {
-      page,
-      activityBeenPerformed,
-      fromToken,
-      toToken,
-      message:`${activityBeenPerformed} ${fromToken && fromToken} and ${toToken && toToken}`
-    })
-}
-
+  page: string,
+  activityBeenPerformed: string,
+  fromToken: string = "null",
+  toToken: string = "null"
+) => {
+  gtag("event", "button_clicked", {
+    page,
+    activityBeenPerformed,
+    fromToken,
+    toToken,
+    message: `${activityBeenPerformed} ${fromToken && fromToken} and ${
+      toToken && toToken
+    }`,
+  });
+};
 
 // failed transactions
 export const GFailedTransaction = (
-  page:string,
-  activityBeenPerformed:string,
-  error:string,
-  fromToken:string="null",
-  toToken:string="null"
-  ) => {
-    console.log({error})
-    gtag('event', 'failed_transaction', {
-      page,
-      error,
-      activityBeenPerformed,
-      fromToken,
-      toToken,
-      message:`${activityBeenPerformed} ${fromToken && fromToken} and ${toToken && toToken}`
-    })
-  }
-
+  page: string,
+  activityBeenPerformed: string,
+  error: string,
+  fromToken: string = "null",
+  toToken: string = "null"
+) => {
+  console.log({ error });
+  gtag("event", "failed_transaction", {
+    page,
+    error,
+    activityBeenPerformed,
+    fromToken,
+    toToken,
+    message: `${activityBeenPerformed} ${fromToken && fromToken} and ${
+      toToken && toToken
+    }`,
+  });
+};
 
 // failed transactions
 export const GSuccessfullyTransaction = (
-  page:string,
-  activityBeenPerformed:string,
-  fromToken:string="null",
-  toToken:string="null"
-  ) => {
-    gtag('event', 'successfully_transaction', {
-      page,
-      activityBeenPerformed,
-      fromToken,
-      toToken,
-      message:`${activityBeenPerformed} ${fromToken && fromToken} and ${toToken && toToken}`
-    })
-  }
-
-
+  page: string,
+  activityBeenPerformed: string,
+  fromToken: string = "null",
+  toToken: string = "null"
+) => {
+  gtag("event", "successfully_transaction", {
+    page,
+    activityBeenPerformed,
+    fromToken,
+    toToken,
+    message: `${activityBeenPerformed} ${fromToken && fromToken} and ${
+      toToken && toToken
+    }`,
+  });
+};
 
 export const GTokenDetailsTab = (
-  fromToken:string="null",
-  toToken:string="null"
-  ) => {
-    console.log({fromToken,toToken})
-    gtag('event', 'token_detail_tab', {
-      page:"details tab",
-      fromToken,
-      toToken
-    })
-  }
-
+  fromToken: string = "null",
+  toToken: string = "null"
+) => {
+  gtag("event", "token_detail_tab", {
+    page: "details tab",
+    fromToken,
+    toToken,
+  });
+};
 
 export const GTransactionSetting = (
-  slippage:string,
-  deadline:string | number,
-  gasPrice:string
-  ) => {
-    gtag('event', 'transaction_setting', {
-      page:"transaction setting",
-      slippage: `${slippage}%`,
-      deadline: `${deadline} minutes`,
-      gasPrice
-    })
-  }
-
+  slippage: string,
+  deadline: string | number,
+  gasPrice: string
+) => {
+  gtag("event", "transaction_setting", {
+    page: "transaction setting",
+    slippage: `${slippage}%`,
+    deadline: `${deadline} minutes`,
+    gasPrice,
+  });
+};
 
 export const GMarketHistoryTab = () => {
-    gtag('event', 'market_history', {
-      page:"market tab",
-    })
-  }
-export const GSocialMedia = (account:string) => {
-    gtag('event', 'social_media', {
-     account
-    })
-  }
-export const GWalletConnected = (wallet:string) => {
-    gtag('event', 'wallet_connected_to', {
-     wallet
-    })
-  }
+  gtag("event", "market_history", {
+    page: "market tab",
+  });
+};
+export const GSocialMedia = (account: string) => {
+  gtag("event", "social_media", {
+    account,
+  });
+};
+export const GWalletConnected = (wallet: string) => {
+  gtag("event", "wallet_connected_to", {
+    wallet,
+  });
+};
 export const GRGPBreakdown = () => {
-    gtag('event', 'clicked_on_RGP_breakdown', {
-     clicked:true
-    })
-  }
+  gtag("event", "clicked_on_RGP_breakdown", {
+    clicked: true,
+  });
+};
 export const GDisconnectWallet = () => {
-    gtag('event', 'clicked_on_disconnect_wallet', {
-     clicked:true
-    })
-  }
+  gtag("event", "clicked_on_disconnect_wallet", {
+    clicked: true,
+  });
+};
 export const GSwitchWallet = () => {
-    gtag('event', 'clicked_on_switch_wallet', {
-     clicked:true
-    })
-  }
-export const GNetworkConnectedTo = (network:string ="null") => {
-  if(network!=="null"){
-   gtag('event', 'network_connected_to', {
-     network
-    }) 
-  }
-    
+  gtag("event", "clicked_on_switch_wallet", {
+    clicked: true,
+  });
+};
+export const GNetworkConnectedTo = (network: string = "null") => {
+  if (network !== "null") {
+    gtag("event", "network_connected_to", {
+      network,
+    });
   }
+};
diff --git a/src/components/MarketFreeDropdown.tsx b/src/components/MarketFreeDropdown.tsx
index 88eb09ca..7a2ea6ab 100644
--- a/src/components/MarketFreeDropdown.tsx
+++ b/src/components/MarketFreeDropdown.tsx
@@ -1,68 +1,99 @@
-import React, { useEffect, useState } from "react"
-import { ChevronDownIcon } from "@chakra-ui/icons"
-import { Button, Flex, Img, Menu, MenuButton, MenuItem, MenuList, Text, useColorModeValue } from "@chakra-ui/react"
-import { AvalancheFreeMarketArray, binanceFreeMarketArray, binanceTestFreeMarketArray, polygonFreeMarketArray, polygonTestFreeMarketArray } from "../state/swap/hooks"
-import { useLocation } from "react-router-dom"
+import React, { useEffect, useState } from "react";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  Flex,
+  Img,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import {
+  AvalancheFreeMarketArray,
+  binanceFreeMarketArray,
+  binanceTestFreeMarketArray,
+  polygonFreeMarketArray,
+  polygonTestFreeMarketArray,
+} from "../state/swap/hooks";
+import { useLocation } from "react-router-dom";
 
-
-const MarketFreeDropDown = ({marketType,setMarketType,chainID,switchMarket,type}:{marketType:string,setMarketType:React.Dispatch<React.SetStateAction<string>>,chainID:number | undefined,switchMarket:(market:string)=>void,type?:string}) => {
-  const location = useLocation()
-  console.log({location},location.search.includes("bsc_test"))
-  const [marketArray,setMarketArray] = useState(location.search.includes("bsc_test")? binanceTestFreeMarketArray : binanceFreeMarketArray)
-  useEffect(()=>{
-    console.log({type})
-    if(chainID === 56) setMarketArray(binanceFreeMarketArray)
-    if(chainID === 97) setMarketArray(binanceTestFreeMarketArray)
-    else if(chainID === 137) setMarketArray(polygonFreeMarketArray)
-    else if(chainID === 43113 || chainID === 43114) setMarketArray(AvalancheFreeMarketArray)
-    else if(chainID === 80001) setMarketArray(polygonTestFreeMarketArray)
-  },[chainID])
-    const borderColor = useColorModeValue('#DEE6ED', '#324D68');
-    return (
-        <Menu>
-        <MenuButton
-          variant="ghost"
-          as={Button}
-          transition="all 0.2s"
-          rightIcon={<ChevronDownIcon />}
-          fontWeight={200}
-          _focus={{ color: "#319EF6" }}
-          fontSize="13px"
-          textTransform={'capitalize'}
-          border={`2px solid ${borderColor}`}
-        >
-          <Flex>
-            <Img src={`./images/${marketType}.png`} width="25px" height="25px" mr="1" /> <Text mt="1">{marketType}</Text>
-          </Flex>
-         
-        </MenuButton>
-        <MenuList>
-          {marketArray.map((item:{name:string,image:string},index)=>(
-            <MenuItem
+const MarketFreeDropDown = ({
+  marketType,
+  setMarketType,
+  chainID,
+  switchMarket,
+  type,
+}: {
+  marketType: string;
+  setMarketType: React.Dispatch<React.SetStateAction<string>>;
+  chainID: number | undefined;
+  switchMarket: (market: string) => void;
+  type?: string;
+}) => {
+  const location = useLocation();
+  const [marketArray, setMarketArray] = useState(
+    location.search.includes("bsc_test")
+      ? binanceTestFreeMarketArray
+      : binanceFreeMarketArray
+  );
+  useEffect(() => {
+    if (chainID === 56) setMarketArray(binanceFreeMarketArray);
+    if (chainID === 97) setMarketArray(binanceTestFreeMarketArray);
+    else if (chainID === 137) setMarketArray(polygonFreeMarketArray);
+    else if (chainID === 43113 || chainID === 43114)
+      setMarketArray(AvalancheFreeMarketArray);
+    else if (chainID === 80001) setMarketArray(polygonTestFreeMarketArray);
+  }, [chainID]);
+  const borderColor = useColorModeValue("#DEE6ED", "#324D68");
+  return (
+    <Menu>
+      <MenuButton
+        variant="ghost"
+        as={Button}
+        transition="all 0.2s"
+        rightIcon={<ChevronDownIcon />}
+        fontWeight={200}
+        _focus={{ color: "#319EF6" }}
+        fontSize="13px"
+        textTransform={"capitalize"}
+        border={`2px solid ${borderColor}`}
+      >
+        <Flex>
+          <Img
+            src={`./images/${marketType}.png`}
+            width="25px"
+            height="25px"
+            mr="1"
+          />{" "}
+          <Text mt="1">{marketType}</Text>
+        </Flex>
+      </MenuButton>
+      <MenuList>
+        {marketArray.map((item: { name: string; image: string }, index) => (
+          <MenuItem
             key={index}
             _focus={{ color: "#319EF6" }}
             onClick={() => {
-              
-              console.log({item,marketArray})
               // setMarketType(item.name)
               // switchMarket(item.name.toLowerCase())
-              }} fontSize="13px">
-           <Img 
-           src={`./images/${item.image}`} 
-           width="30px" 
-           height="30px" 
-           mr={2} />
-           {item.name}
+            }}
+            fontSize="13px"
+          >
+            <Img
+              src={`./images/${item.image}`}
+              width="30px"
+              height="30px"
+              mr={2}
+            />
+            {item.name}
           </MenuItem>
-          ))
-  
-          }
-          
-        </MenuList>
-      </Menu>
-  
-    )
-}
-
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
 
-export default MarketFreeDropDown
\ No newline at end of file
+export default MarketFreeDropDown;
diff --git a/src/components/Modals/TransactionsModal/TransactionStateModal.tsx b/src/components/Modals/TransactionsModal/TransactionStateModal.tsx
index f89d18b7..59f5fca8 100644
--- a/src/components/Modals/TransactionsModal/TransactionStateModal.tsx
+++ b/src/components/Modals/TransactionsModal/TransactionStateModal.tsx
@@ -1,157 +1,165 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
-    Text,
-    Spinner,
-    ModalCloseButton,
-    ModalContent,
-    ModalOverlay,
-    Modal,
-    ModalBody,
-    useColorModeValue,
-    useDisclosure,
-    Circle, Button, Link,
-    Flex
+  Text,
+  Spinner,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Modal,
+  ModalBody,
+  useColorModeValue,
+  useDisclosure,
+  Circle,
+  Button,
+  Link,
+  Flex,
 } from "@chakra-ui/react";
-import { CheckIcon, CloseIcon, ArrowUpIcon } from '@chakra-ui/icons'
-import { RootState } from '../../../state';
-import { setCloseModal, TrxState } from '../../../state/application/reducer';
-
+import { CheckIcon, CloseIcon, ArrowUpIcon } from "@chakra-ui/icons";
+import { RootState } from "../../../state";
+import { setCloseModal, TrxState } from "../../../state/application/reducer";
 
 const TransactionStateModal: React.FC = () => {
-    const bgColour = useColorModeValue("#FFFFFF", "#15202B");
-    const textColour = useColorModeValue("#333333", "#F1F5F8");
-    const smallTxtColour = useColorModeValue("#999999", "#DCE5EF");
-    const closeBtnColour = useColorModeValue("#666666", "#DCE5EF");
-    const closeButtonBgColour = useColorModeValue("#319EF6", "#008DFF");
-    const successBgColour = useColorModeValue("#22BB33", "#75F083");
-    const errorBgColour = useColorModeValue("#CC334F", "#FF3358");
-    const transBgColour = useColorModeValue("#2F82D0", "#FF3358");
-
-    const [modalOpen, setModalOpen] = useState(false)
-    const dispatch = useDispatch();
-    const modalDetails = useSelector((state: RootState) => state.application.modal);
-    console.log({ modalDetails })
-    const setOpen = modalDetails === null ? false : true
-
-    function handleCloseModal() {
-        dispatch(setCloseModal())
-    }
-    return (
-        <>
-            <Modal isOpen={setOpen} onClose={handleCloseModal} isCentered>
-                <ModalOverlay />
-                <ModalContent bg={bgColour} color="#fff" borderRadius="6px"
-                    paddingBottom="15px" width="95vw">
-                    <ModalCloseButton
-                        bg="none"
-                        color={closeBtnColour}
-                        cursor="pointer"
-                        _focus={{ outline: 'none' }}
-                        onClick={handleCloseModal}
-                        border={'1px solid'}
-                        size={'sm'}
-                        mt={3}
-                        mr={3}
-                        p={'7px'}
-                    />
-                    <ModalBody align="center" my={2}>
-
-                        {modalDetails?.trxState === TrxState.WaitingForConfirmation ?
-                            <Spinner
-                                thickness="4px"
-                                speed="0.53s"
-                                emptyColor="transparent"
-                                color="#319EF6"
-                                size="xl"
-                                width="100px"
-                                height="100px"
-                                my={10}
-                            /> : modalDetails?.trxState === TrxState.TransactionSuccessful ?
-                                <Circle size="90px" background={successBgColour} my={8}>
-                                    <Circle size="80px" background={bgColour} my={3}>
-                                        <CheckIcon fontSize="40px" color={successBgColour} />
-                                    </Circle>
-                                </Circle> :
-                                modalDetails?.trxState === TrxState.TransactionFailed ?
-                                    <Circle size="90px" background={errorBgColour} my={8}>
-                                        <Circle size="80px" background={bgColour} my={3}>
-                                            <CloseIcon width="30px" height="30" color={errorBgColour} />
-                                        </Circle>
-                                    </Circle> : null}
-
-
-                        <Text fontSize="20px" fontWeight="normal" color={textColour}>
-                            {modalDetails?.trxState === TrxState.TransactionSuccessful ?
-                                "Transaction Succesful" :
-                                modalDetails?.trxState === TrxState.WaitingForConfirmation ?
-                                    modalDetails?.text ?? " Waiting for Confirmation" :
-                                    modalDetails?.trxState === TrxState.TransactionFailed ?
-                                        " Transaction Not Successful" : null}
-                        </Text>
-
-                        {modalDetails?.trxState === TrxState.WaitingForConfirmation ?
-                            <Text fontSize="16px" py={5} fontWeight="bold" color={textColour}>
-                                {modalDetails?.message}
-                            </Text> :
-                            modalDetails?.trxState === TrxState.TransactionFailed ?
-                                <>
-                                    <Text
-                                        py={3}
-                                        fontSize="14px"
-                                        fontWeight="normal"
-                                        color="#008DFF">
-                                        <a href="#" target="_blank">
-                                            Retry
-                                        </a>
-
-                                    </Text>
-                                    <Text
-                                        py={3}
-                                        fontSize="14px"
-                                        fontWeight="normal"
-                                        color={errorBgColour}>
-                                        {modalDetails?.message}
-
-                                    </Text>
-                                </>
-                                : modalDetails?.trxState === TrxState.TransactionSuccessful ? <Text
-                                    py={3}
-                                    fontSize="14px"
-                                    fontWeight="normal"
-                                    color="#008DFF">
-
-                                    {modalDetails?.urlNetwork && (<Link href={`https://${modalDetails?.urlNetwork}`} isExternal> View on Etherscan </Link>)}
-                                </Text> : null}
-
-                        {modalDetails?.trxState === TrxState.WaitingForConfirmation ?
-                            <Text size="12px" color={smallTxtColour}  >
-                                Go to your wallet to confirm this
-                            </Text> :
-                            <Button
-                                variant="brand"
-                                padding="24px 0"
-                                width="100%"
-                                isFullWidth
-                                boxShadow="none"
-                                border="0"
-                                mt={3}
-                                background={closeButtonBgColour}
-                                color="#FFFFFF"
-                                cursor="pointer"
-                                onClick={handleCloseModal}
-                            >
-                                Close
-                            </Button>}
-
-
-                    </ModalBody>
-                </ModalContent>
-            </Modal>
-        </>
-    )
-
-}
-
-
-export default TransactionStateModal
+  const bgColour = useColorModeValue("#FFFFFF", "#15202B");
+  const textColour = useColorModeValue("#333333", "#F1F5F8");
+  const smallTxtColour = useColorModeValue("#999999", "#DCE5EF");
+  const closeBtnColour = useColorModeValue("#666666", "#DCE5EF");
+  const closeButtonBgColour = useColorModeValue("#319EF6", "#008DFF");
+  const successBgColour = useColorModeValue("#22BB33", "#75F083");
+  const errorBgColour = useColorModeValue("#CC334F", "#FF3358");
+  const transBgColour = useColorModeValue("#2F82D0", "#FF3358");
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const dispatch = useDispatch();
+  const modalDetails = useSelector(
+    (state: RootState) => state.application.modal
+  );
+  const setOpen = modalDetails === null ? false : true;
+
+  function handleCloseModal() {
+    dispatch(setCloseModal());
+  }
+  return (
+    <>
+      <Modal isOpen={setOpen} onClose={handleCloseModal} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          bg={bgColour}
+          color="#fff"
+          borderRadius="6px"
+          paddingBottom="15px"
+          width="95vw"
+        >
+          <ModalCloseButton
+            bg="none"
+            color={closeBtnColour}
+            cursor="pointer"
+            _focus={{ outline: "none" }}
+            onClick={handleCloseModal}
+            border={"1px solid"}
+            size={"sm"}
+            mt={3}
+            mr={3}
+            p={"7px"}
+          />
+          <ModalBody align="center" my={2}>
+            {modalDetails?.trxState === TrxState.WaitingForConfirmation ? (
+              <Spinner
+                thickness="4px"
+                speed="0.53s"
+                emptyColor="transparent"
+                color="#319EF6"
+                size="xl"
+                width="100px"
+                height="100px"
+                my={10}
+              />
+            ) : modalDetails?.trxState === TrxState.TransactionSuccessful ? (
+              <Circle size="90px" background={successBgColour} my={8}>
+                <Circle size="80px" background={bgColour} my={3}>
+                  <CheckIcon fontSize="40px" color={successBgColour} />
+                </Circle>
+              </Circle>
+            ) : modalDetails?.trxState === TrxState.TransactionFailed ? (
+              <Circle size="90px" background={errorBgColour} my={8}>
+                <Circle size="80px" background={bgColour} my={3}>
+                  <CloseIcon width="30px" height="30" color={errorBgColour} />
+                </Circle>
+              </Circle>
+            ) : null}
+
+            <Text fontSize="20px" fontWeight="normal" color={textColour}>
+              {modalDetails?.trxState === TrxState.TransactionSuccessful
+                ? "Transaction Succesful"
+                : modalDetails?.trxState === TrxState.WaitingForConfirmation
+                ? modalDetails?.text ?? " Waiting for Confirmation"
+                : modalDetails?.trxState === TrxState.TransactionFailed
+                ? " Transaction Not Successful"
+                : null}
+            </Text>
+
+            {modalDetails?.trxState === TrxState.WaitingForConfirmation ? (
+              <Text fontSize="16px" py={5} fontWeight="bold" color={textColour}>
+                {modalDetails?.message}
+              </Text>
+            ) : modalDetails?.trxState === TrxState.TransactionFailed ? (
+              <>
+                <Text
+                  py={3}
+                  fontSize="14px"
+                  fontWeight="normal"
+                  color="#008DFF"
+                >
+                  <a href="#" target="_blank">
+                    Retry
+                  </a>
+                </Text>
+                <Text
+                  py={3}
+                  fontSize="14px"
+                  fontWeight="normal"
+                  color={errorBgColour}
+                >
+                  {modalDetails?.message}
+                </Text>
+              </>
+            ) : modalDetails?.trxState === TrxState.TransactionSuccessful ? (
+              <Text py={3} fontSize="14px" fontWeight="normal" color="#008DFF">
+                {modalDetails?.urlNetwork && (
+                  <Link href={`https://${modalDetails?.urlNetwork}`} isExternal>
+                    {" "}
+                    View on Etherscan{" "}
+                  </Link>
+                )}
+              </Text>
+            ) : null}
+
+            {modalDetails?.trxState === TrxState.WaitingForConfirmation ? (
+              <Text size="12px" color={smallTxtColour}>
+                Go to your wallet to confirm this
+              </Text>
+            ) : (
+              <Button
+                variant="brand"
+                padding="24px 0"
+                width="100%"
+                isFullWidth
+                boxShadow="none"
+                border="0"
+                mt={3}
+                background={closeButtonBgColour}
+                color="#FFFFFF"
+                cursor="pointer"
+                onClick={handleCloseModal}
+              >
+                Close
+              </Button>
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default TransactionStateModal;
diff --git a/src/components/Navbar/MobileNavDrawer.tsx b/src/components/Navbar/MobileNavDrawer.tsx
index ae45e174..d04c4d23 100644
--- a/src/components/Navbar/MobileNavDrawer.tsx
+++ b/src/components/Navbar/MobileNavDrawer.tsx
@@ -98,7 +98,7 @@ const MobileNavDrawer = () => {
                   activeStyle={{
                     color: "#319EF6",
                   }}
-                  to={chainId ===43114?"/freeswap":"/swap"}
+                  to={chainId === 43114 ? "/freeswap" : "/swap"}
                 >
                   <Flex
                     mb={2}
@@ -110,7 +110,11 @@ const MobileNavDrawer = () => {
                     bgColor={isOn ? SwapBgColor : "transparent"}
                   >
                     <Flex ml={6}>
-                      <Nav label="Swap" to={chainId ===43114?"/freeswap":"/swap"} img={<Img src={SwapIcon} />} />
+                      <Nav
+                        label="Swap"
+                        to={chainId === 43114 ? "/freeswap" : "/swap"}
+                        img={<Img src={SwapIcon} />}
+                      />
                     </Flex>
                     {isOn ? (
                       <ChevronUpIcon mr={2} />
@@ -131,28 +135,60 @@ const MobileNavDrawer = () => {
                       mb={2}
                       onClick={onClose}
                     >
-                      <Nav label="Swap" to={chainId ===43114?"/freeswap":`/swap${search}`} />
+                      <Nav
+                        label="Swap"
+                        to={chainId === 43114 ? "/freeswap" : `/swap${search}`}
+                      />
                     </Text>
                     <Text
                       _hover={{ color: "#319EF6" }}
                       mb={2}
                       onClick={onClose}
                     >
-                                <Nav label="AutoTrade" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON  ? '#' : `/autotrade${search}`} />
+                      <Nav
+                        label="AutoTrade"
+                        to={
+                          chainId !== SupportedChainId.BINANCETEST &&
+                          chainId !== SupportedChainId.BINANCE &&
+                          chainId !== SupportedChainId.POLYGON
+                            ? "#"
+                            : `/autotrade${search}`
+                        }
+                      />
                     </Text>
                     <Text
                       _hover={{ color: "#319EF6" }}
                       mb={2}
                       onClick={onClose}
                     >
-                                <Nav label="Set Price" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON && chainId !== SupportedChainId.AVALANCHE  ? '#' :`/set-price${search}`} />
+                      <Nav
+                        label="Auto Limit"
+                        to={
+                          chainId !== SupportedChainId.BINANCETEST &&
+                          chainId !== SupportedChainId.BINANCE &&
+                          chainId !== SupportedChainId.POLYGON &&
+                          chainId !== SupportedChainId.AVALANCHE
+                            ? "#"
+                            : `/set-price${search}`
+                        }
+                      />
                     </Text>
                     <Text
                       _hover={{ color: "#319EF6" }}
                       mb={2}
                       onClick={onClose}
                     >
-                                  <Nav label="Freeswap" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON && chainId !== SupportedChainId.AVALANCHE  ? '#' :`/freeswap${search}`} />
+                      <Nav
+                        label="Freeswap"
+                        to={
+                          chainId !== SupportedChainId.BINANCETEST &&
+                          chainId !== SupportedChainId.BINANCE &&
+                          chainId !== SupportedChainId.POLYGON &&
+                          chainId !== SupportedChainId.AVALANCHE
+                            ? "#"
+                            : `/freeswap${search}`
+                        }
+                      />
                     </Text>
                   </Flex>
                 </Collapse>
@@ -173,7 +209,11 @@ const MobileNavDrawer = () => {
                     bgColor={isOnFarm ? SwapBgColor : "transparent"}
                   >
                     <Flex ml={6}>
-                      <Nav label="Farm" to="/swap" img={<Img src={FarmingIcon} />} />
+                      <Nav
+                        label="Farm"
+                        to="/swap"
+                        img={<Img src={FarmingIcon} />}
+                      />
                     </Flex>
                     {isOnFarm ? (
                       <ChevronUpIcon mr={2} />
@@ -189,12 +229,20 @@ const MobileNavDrawer = () => {
                     ml={10}
                     mb={3}
                   >
-                          <Flex ml={6} mb={3} onClick={onClose}>
-                  <Nav label="Liquidity" to={chainId ===43114?"/freeswap":"/pool"} active={location === '/add' || location === '/remove' ? true : false} />
-                </Flex>
-                <Flex ml={6} mb={3} onClick={onClose}>
-                  <Nav label="Farm" to={`/farm${search}`} />
-                </Flex>
+                    <Flex ml={6} mb={3} onClick={onClose}>
+                      <Nav
+                        label="Liquidity"
+                        to={chainId === 43114 ? "/freeswap" : "/pool"}
+                        active={
+                          location === "/add" || location === "/remove"
+                            ? true
+                            : false
+                        }
+                      />
+                    </Flex>
+                    <Flex ml={6} mb={3} onClick={onClose}>
+                      <Nav label="Farm" to={`/farm${search}`} />
+                    </Flex>
                   </Flex>
                 </Collapse>
 
@@ -214,7 +262,11 @@ const MobileNavDrawer = () => {
                     bgColor={isOnBridge ? SwapBgColor : "transparent"}
                   >
                     <Flex ml={6}>
-                      <Nav label="Bridge" to="#" img={<Img src={BridgeIcon} />} />
+                      <Nav
+                        label="Bridge"
+                        to="#"
+                        img={<Img src={BridgeIcon} />}
+                      />
                     </Flex>
                     {isOnBridge ? (
                       <ChevronUpIcon mr={2} />
@@ -230,18 +282,24 @@ const MobileNavDrawer = () => {
                     ml={10}
                     mb={3}
                   >
-                          <Flex ml={6} mb={3} onClick={onClose}>
-                  <Nav label="Bridge RGPs on Spherium" to="#" />
-                </Flex>
-                <Flex ml={6} mb={3} onClick={onClose}>
-                  <Nav label="Bridge RGPs on Router" to={chainId ===43114?"/freeswap":"/bridge/router"} />
-                </Flex>
+                    <Flex ml={6} mb={3} onClick={onClose}>
+                      <Nav label="Bridge RGPs on Spherium" to="#" />
+                    </Flex>
+                    <Flex ml={6} mb={3} onClick={onClose}>
+                      <Nav
+                        label="Bridge RGPs on Router"
+                        to={chainId === 43114 ? "/freeswap" : "/bridge/router"}
+                      />
+                    </Flex>
                   </Flex>
                 </Collapse>
 
-
                 <Flex ml={6} mb={3} onClick={onClose}>
-                  <Nav label="NFTs" to={chainId ===43114?"/freeswap":"/nft"} img={<Img src={NFTIcon} />} />
+                  <Nav
+                    label="NFTs"
+                    to={chainId === 43114 ? "/freeswap" : "/nft"}
+                    img={<Img src={NFTIcon} />}
+                  />
                 </Flex>
                 {/* <Flex ml={6} mb={3}>
                   <Link href="#" isExternal onClick={onClose}>
@@ -249,11 +307,11 @@ const MobileNavDrawer = () => {
                   </Link>
                 </Flex> */}
                 <Flex ml={6} color="#999999" mt={5} fontSize="16px" mb={2}>
-                <Img src={DappIcon} mr={4}/>  DAPPS
+                  <Img src={DappIcon} mr={4} /> DAPPS
                 </Flex>
                 <Flex ml={6} mb={3}>
                   <Link href="#">
-                      <Text>SmartSwap</Text>
+                    <Text>SmartSwap</Text>
                   </Link>
                 </Flex>
                 <Flex ml={6} mb={3}>
@@ -262,8 +320,8 @@ const MobileNavDrawer = () => {
                   </Link>
                 </Flex>
                 <Flex ml={6} mb={3}>
-                <Link href="https://smartswap.rigelprotocol.com/smartbid?chain=bsc_test">
-                  <Text>Smart Bid</Text>
+                  <Link href="https://smartswap.rigelprotocol.com/smartbid?chain=bsc_test">
+                    <Text>Smart Bid</Text>
                   </Link>
                 </Flex>
                 {/* <Flex ml={6} mb={3}>
@@ -271,8 +329,8 @@ const MobileNavDrawer = () => {
                 </Flex> */}
 
                 <Flex ml={6} mb={3}>
-                <Link href="https://launchpad.rigelprotocol.com/" isExternal>
-                  <Text>LaunchPad</Text>
+                  <Link href="https://launchpad.rigelprotocol.com/" isExternal>
+                    <Text>LaunchPad</Text>
                   </Link>
                 </Flex>
               </Flex>
diff --git a/src/components/Navbar/SocialMedia.tsx b/src/components/Navbar/SocialMedia.tsx
index 268920f3..4026f46b 100644
--- a/src/components/Navbar/SocialMedia.tsx
+++ b/src/components/Navbar/SocialMedia.tsx
@@ -1,5 +1,5 @@
-import { Box, Flex, Text } from '@chakra-ui/layout';
-import React, { useState } from 'react';
+import { Box, Flex, Text } from "@chakra-ui/layout";
+import React, { useState } from "react";
 import {
   Menu,
   MenuButton,
@@ -10,9 +10,9 @@ import {
   IconButton,
   Link,
   Icon,
-} from '@chakra-ui/react';
-import { IoEllipsisHorizontalOutline } from 'react-icons/io5';
-import { GSocialMedia } from '../G-analytics/gIndex';
+} from "@chakra-ui/react";
+import { IoEllipsisHorizontalOutline } from "react-icons/io5";
+import { GSocialMedia } from "../G-analytics/gIndex";
 
 const SocialMediaLinks = () => {
   const [show, setShow] = useState(false);
@@ -27,35 +27,51 @@ const SocialMediaLinks = () => {
         transition="all 0.2s"
         borderRadius="md"
         borderWidth="1px"
-        _hover={{ bg: 'gray.100' }}
-        _focus={{ boxShadow: 'outline' }}
+        _hover={{ bg: "gray.100" }}
+        _focus={{ boxShadow: "outline" }}
         icon={<IoEllipsisHorizontalOutline />}
-
       />
       <MenuList>
         <a
           target="_blank"
-          href="https://www.linkedin.com/company/rigelprotocol" rel="noreferrer"
+          href="https://www.linkedin.com/company/rigelprotocol"
+          rel="noreferrer"
         >
           <MenuItem>Linkedin</MenuItem>
         </a>
 
-        <a target="_blank" href="https://medium.com/rigelprotocol" rel="noreferrer">
-          <MenuItem onClick={()=>GSocialMedia("Medium")}>Medium</MenuItem>
+        <a
+          target="_blank"
+          href="https://medium.com/rigelprotocol"
+          rel="noreferrer"
+        >
+          <MenuItem onClick={() => GSocialMedia("Medium")}>Medium</MenuItem>
         </a>
         <MenuDivider />
-        <a target="_blank" href="https://www.t.me/rigelprotocol" rel="noreferrer">
-          <MenuItem onClick={()=>GSocialMedia("Telegram")}>Telegram</MenuItem>
+        <a target="_blank" href="https://t.me/rigeldao" rel="noreferrer">
+          <MenuItem onClick={() => GSocialMedia("Telegram")}>Telegram</MenuItem>
         </a>
-        <a target="_blank" href="https://twitter.com/rigelprotocol" rel="noreferrer">
-          <MenuItem onClick={()=>GSocialMedia("Twitter")}>Twitter</MenuItem>
+        <a
+          target="_blank"
+          href="https://twitter.com/rigelprotocol"
+          rel="noreferrer"
+        >
+          <MenuItem onClick={() => GSocialMedia("Twitter")}>Twitter</MenuItem>
         </a>
         <MenuDivider />
-        <a target="_blank" href="https://github.com/rigelprotocol" rel="noreferrer">
-          <MenuItem onClick={()=>GSocialMedia("Github")}>Github</MenuItem>
+        <a
+          target="_blank"
+          href="https://github.com/rigelprotocol"
+          rel="noreferrer"
+        >
+          <MenuItem onClick={() => GSocialMedia("Github")}>Github</MenuItem>
         </a>
-        <a target="_blank" href="https://discord.gg/j86NH95GDD" rel="noreferrer">
-          <MenuItem onClick={()=>GSocialMedia("Discord")}>Discord</MenuItem>
+        <a
+          target="_blank"
+          href="https://discord.gg/j86NH95GDD"
+          rel="noreferrer"
+        >
+          <MenuItem onClick={() => GSocialMedia("Discord")}>Discord</MenuItem>
         </a>
       </MenuList>
     </Menu>
diff --git a/src/components/Navbar/SwapDropdown.tsx b/src/components/Navbar/SwapDropdown.tsx
index f6f9f3f7..4532fb56 100644
--- a/src/components/Navbar/SwapDropdown.tsx
+++ b/src/components/Navbar/SwapDropdown.tsx
@@ -23,15 +23,26 @@ import Router from "../../assets/router1.svg";
 import VectorFire from "../../assets/VectorFIre.svg";
 import { SupportedChainId } from "../../constants/chains";
 
-const Nav = ({ to, label,children,img }: { to: string; label?: string,children?:React.ReactNode,img?:any }) => (
+const Nav = ({
+  to,
+  label,
+  children,
+  img,
+}: {
+  to: string;
+  label?: string;
+  children?: React.ReactNode;
+  img?: any;
+}) => (
   <NavLink
     to={to}
     activeStyle={{
       color: "#319EF6",
     }}
-
   >
-    <Flex justifyContent="space-between">{label} <Img src={img} ml="20px"/></Flex>
+    <Flex justifyContent="space-between">
+      {label} <Img src={img} ml="20px" />
+    </Flex>
     {children}
   </NavLink>
 );
@@ -40,15 +51,17 @@ export function SwapDropdown() {
   const location = useLocation();
   const { chainId } = useActiveWeb3React();
   const name = location.pathname;
-  const {search} = useLocation();
+  const { search } = useLocation();
 
   const useName = () => {
-    console.log(name);
-    if (name.includes('swap') || name.includes('autotrade') || name.includes('set-price')) {
-      console.log(`Correct name is ${name.split("/")}`);
+    if (
+      name.includes("swap") ||
+      name.includes("autotrade") ||
+      name.includes("set-price")
+    ) {
       return name.split("/")[1];
     } else {
-      return 'Swap'
+      return "Swap";
     }
   };
 
@@ -63,7 +76,7 @@ export function SwapDropdown() {
         _focus={{ color: "#319EF6" }}
         fontSize="14px"
         padding="5px 6px"
-        textTransform={'capitalize'}
+        textTransform={"capitalize"}
       >
         {useName()}
       </MenuButton>
@@ -72,126 +85,217 @@ export function SwapDropdown() {
           <Nav label="Swap" to={`/swap${search}`} />
         </MenuItem>
         <MenuItem _focus={{ color: "#319EF6" }}>
-          <Nav label="AutoTrade" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON  && chainId !== SupportedChainId.AVALANCHE && chainId!== SupportedChainId.AVALANCHE_FUJI  ? '#' : `/autotrade${search}`} img={VectorFire}/>
+          <Nav
+            label="AutoTrade"
+            to={
+              chainId !== SupportedChainId.BINANCETEST &&
+              chainId !== SupportedChainId.BINANCE &&
+              chainId !== SupportedChainId.POLYGON &&
+              chainId !== SupportedChainId.AVALANCHE &&
+              chainId !== SupportedChainId.AVALANCHE_FUJI
+                ? "#"
+                : `/autotrade${search}`
+            }
+            img={VectorFire}
+          />
         </MenuItem>
         <MenuItem _focus={{ color: "#319EF6" }}>
-          <Nav label="Set Price" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON && chainId !== SupportedChainId.AVALANCHE && chainId!== SupportedChainId.AVALANCHE_FUJI ? '#' :`/set-price${search}`} />
+          <Nav
+            label="Auto Limit"
+            to={
+              chainId !== SupportedChainId.BINANCETEST &&
+              chainId !== SupportedChainId.BINANCE &&
+              chainId !== SupportedChainId.POLYGON &&
+              chainId !== SupportedChainId.AVALANCHE &&
+              chainId !== SupportedChainId.AVALANCHE_FUJI
+                ? "#"
+                : `/set-price${search}`
+            }
+          />
         </MenuItem>
         <MenuItem _focus={{ color: "#319EF6" }}>
-          <Nav label="Freeswap" to={chainId !== SupportedChainId.BINANCETEST && chainId !== SupportedChainId.BINANCE && chainId !== SupportedChainId.POLYGON && chainId !== SupportedChainId.POLYGONTEST && chainId !== SupportedChainId.AVALANCHE && chainId!== SupportedChainId.AVALANCHE_FUJI   ? '#' :`/freeswap${search}`} img={VectorFire}/>
+          <Nav
+            label="Freeswap"
+            to={
+              chainId !== SupportedChainId.BINANCETEST &&
+              chainId !== SupportedChainId.BINANCE &&
+              chainId !== SupportedChainId.POLYGON &&
+              chainId !== SupportedChainId.POLYGONTEST &&
+              chainId !== SupportedChainId.AVALANCHE &&
+              chainId !== SupportedChainId.AVALANCHE_FUJI
+                ? "#"
+                : `/freeswap${search}`
+            }
+            img={VectorFire}
+          />
         </MenuItem>
       </MenuList>
-    </Menu> 
+    </Menu>
   );
 }
 
 export function BridgeDropdown() {
   const location = useLocation();
   const { chainId } = useActiveWeb3React();
-  const boxShadow=useColorModeValue("0px 4px 6px -4px rgba(178, 193, 230, 0.12), 0px 8px 8px -4px rgba(178, 193, 230, 0.08);","0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)")
-  const bg= useColorModeValue("linear-gradient(90deg, #EEF0FC 0%, #EEFCFC 100%)","linear-gradient(90deg, #0E1644 0%, #0D4544 100%)")
-  const background=useColorModeValue("white","#15202B")
+  const boxShadow = useColorModeValue(
+    "0px 4px 6px -4px rgba(178, 193, 230, 0.12), 0px 8px 8px -4px rgba(178, 193, 230, 0.08);",
+    "0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)"
+  );
+  const bg = useColorModeValue(
+    "linear-gradient(90deg, #EEF0FC 0%, #EEFCFC 100%)",
+    "linear-gradient(90deg, #0E1644 0%, #0D4544 100%)"
+  );
+  const background = useColorModeValue("white", "#15202B");
   return (
-    <Menu >
-    <MenuButton
-
-      variant="ghost"
-      as={Button}
-      transition="all 0.2s"
-      rightIcon={<ChevronDownIcon />}
-      fontWeight={200}
-      _focus={{ color: "#319EF6" }}
-      fontSize="14px"
-      padding="5px 6px"
-      textTransform={'capitalize'}
-    >
-      Bridge
-    </MenuButton>
-    <MenuList 
-    width="408px"
-    height="289px"
-    boxShadow="0px 4px 20px -4px rgba(0, 0, 0, 0.1)"
-borderRadius="6px"
-boxSizing="border-box"
-padding="16px 16px 24px 16px"
-    background={background}>
-       <Tooltip label={chainId === SupportedChainId.AVALANCHE || chainId=== SupportedChainId.AVALANCHE_FUJI ? "coming soon":""}  bg={chainId === SupportedChainId.AVALANCHE || chainId=== SupportedChainId.AVALANCHE_FUJI ?"gray.300":"transparent"} color="black">
-      <MenuItem cursor="pointer" _focus={{ color: "#319EF6" }}
-      py="10px"
-      _hover={{background:`${bg}`,boxShadow:`${boxShadow}`,borderRadius:"6px"}}
-      mt="3px">
-        <Nav to="#">
-          <Flex justifyContent="space-between" w="360px">
-            <Flex>
-              <Box>
-          <Img src={Spherium} alt="Spherium" mt="10px" />
-        </Box>
-        <Box ml="20px">
-        <Text
-      fontWeight="700"
-      fontSize="16px"
-      color="#319EF6"
-      >Bridge RGPs on Spherium</Text>
-      <Text
-      fontWeight="400"
-      fontSize="14px"
-      color="#51627B"
-      mt="3px"
-      >Bridge via hyperbridge.</Text>
-        </Box>
-            </Flex>
-          <Box>
-          <ArrowForwardIcon fontSize="24px" mt="15px"  color="white"/>
-          </Box>
-          </Flex>
-     
-          </Nav>
-      </MenuItem>
-      </Tooltip>
-       <Tooltip label={chainId === SupportedChainId.AVALANCHE || chainId=== SupportedChainId.AVALANCHE_FUJI ? "coming soon" :""}  bg="gray.300" color="black">
-      <MenuItem _focus={{ color: "#319EF6" }} mt="20px"
-       py="10px"
-       _hover={{background:`${bg}`,boxShadow:`${boxShadow}`,borderRadius:"6px"}}
+    <Menu>
+      <MenuButton
+        variant="ghost"
+        as={Button}
+        transition="all 0.2s"
+        rightIcon={<ChevronDownIcon />}
+        fontWeight={200}
+        _focus={{ color: "#319EF6" }}
+        fontSize="14px"
+        padding="5px 6px"
+        textTransform={"capitalize"}
       >
-        <Nav to={chainId ===43114?"/freeswap":"/bridge/router"}>
-          <Flex justifyContent="space-between" w="360px">
-  <Flex>
-        <Box>
-          <Img src={Router} alt="Router" mt="10px" />
-        </Box>
-        <Box ml="20px">
-        <Text
-      fontWeight="700"
-      fontSize="16px"
-      color="#319EF6"
-      >Bridge RGPs on Router</Text>
-      <Text
-      fontWeight="400"
-      fontSize="14px"
-      color="#51627B"
-      mt="3px"
-      >Bridge via Router Voyager</Text>
-        </Box>
-          </Flex>
-          <Box>
-          <ArrowForwardIcon fontSize="24px" mt="15px"  color="white"/>
-          </Box>
+        Bridge
+      </MenuButton>
+      <MenuList
+        width="408px"
+        height="289px"
+        boxShadow="0px 4px 20px -4px rgba(0, 0, 0, 0.1)"
+        borderRadius="6px"
+        boxSizing="border-box"
+        padding="16px 16px 24px 16px"
+        background={background}
+      >
+        <Tooltip
+          label={
+            chainId === SupportedChainId.AVALANCHE ||
+            chainId === SupportedChainId.AVALANCHE_FUJI
+              ? "coming soon"
+              : ""
+          }
+          bg={
+            chainId === SupportedChainId.AVALANCHE ||
+            chainId === SupportedChainId.AVALANCHE_FUJI
+              ? "gray.300"
+              : "transparent"
+          }
+          color="black"
+        >
+          <MenuItem
+            cursor="pointer"
+            _focus={{ color: "#319EF6" }}
+            py="10px"
+            _hover={{
+              background: `${bg}`,
+              boxShadow: `${boxShadow}`,
+              borderRadius: "6px",
+            }}
+            mt="3px"
+          >
+            <Nav to="#">
+              <Flex justifyContent="space-between" w="360px">
+                <Flex>
+                  <Box>
+                    <Img src={Spherium} alt="Spherium" mt="10px" />
+                  </Box>
+                  <Box ml="20px">
+                    <Text fontWeight="700" fontSize="16px" color="#319EF6">
+                      Bridge RGPs on Spherium
+                    </Text>
+                    <Text
+                      fontWeight="400"
+                      fontSize="14px"
+                      color="#51627B"
+                      mt="3px"
+                    >
+                      Bridge via hyperbridge.
+                    </Text>
+                  </Box>
+                </Flex>
+                <Box>
+                  <ArrowForwardIcon fontSize="24px" mt="15px" color="white" />
+                </Box>
+              </Flex>
+            </Nav>
+          </MenuItem>
+        </Tooltip>
+        <Tooltip
+          label={
+            chainId === SupportedChainId.AVALANCHE ||
+            chainId === SupportedChainId.AVALANCHE_FUJI
+              ? "coming soon"
+              : ""
+          }
+          bg="gray.300"
+          color="black"
+        >
+          <MenuItem
+            _focus={{ color: "#319EF6" }}
+            mt="20px"
+            py="10px"
+            _hover={{
+              background: `${bg}`,
+              boxShadow: `${boxShadow}`,
+              borderRadius: "6px",
+            }}
+          >
+            <Nav to={chainId === 43114 ? "/freeswap" : "/bridge/router"}>
+              <Flex justifyContent="space-between" w="360px">
+                <Flex>
+                  <Box>
+                    <Img src={Router} alt="Router" mt="10px" />
+                  </Box>
+                  <Box ml="20px">
+                    <Text fontWeight="700" fontSize="16px" color="#319EF6">
+                      Bridge RGPs on Router
+                    </Text>
+                    <Text
+                      fontWeight="400"
+                      fontSize="14px"
+                      color="#51627B"
+                      mt="3px"
+                    >
+                      Bridge via Router Voyager
+                    </Text>
+                  </Box>
+                </Flex>
+                <Box>
+                  <ArrowForwardIcon fontSize="24px" mt="15px" color="white" />
+                </Box>
+              </Flex>
+            </Nav>
+          </MenuItem>
+        </Tooltip>
+        <Divider background="#DEE6ED" mb="10px" mt="20px" />
+        <MenuItem _focus={{ color: "#319EF6" }} display="block">
+          <Text fontSize="12px" color="#666" mb="10px" fontWeight="500">
+            SUPPORTED CHAINS:
+          </Text>
+          <Flex>
+            <Img
+              src={Binance}
+              alt="Binance"
+              _hover={{
+                boxShadow:
+                  "0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)",
+              }}
+            />
+            <Img
+              src={Polygon}
+              alt="Polygon"
+              ml="20px"
+              _hover={{
+                boxShadow:
+                  "0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)",
+              }}
+            />
           </Flex>
-        
-     
-          </Nav>
-      </MenuItem>
-      </Tooltip>
-      <Divider background="#DEE6ED" mb="10px" mt="20px"/>
-      <MenuItem _focus={{ color: "#319EF6" }} display="block">
-        <Text fontSize="12px" color="#666" mb="10px" fontWeight="500">SUPPORTED CHAINS:</Text>
-        <Flex>
-      <Img src={Binance} alt="Binance" _hover={{boxShadow:"0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)"}}/>
-      <Img src={Polygon} alt="Polygon" ml="20px" _hover={{boxShadow:"0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08)"}}  />
-        </Flex>
-        
         </MenuItem>
-    </MenuList>
-  </Menu>
-  )
-}
\ No newline at end of file
+      </MenuList>
+    </Menu>
+  );
+}
diff --git a/src/components/Navbar/UnsupportNetwork.tsx b/src/components/Navbar/UnsupportNetwork.tsx
index c5edf616..de18688f 100644
--- a/src/components/Navbar/UnsupportNetwork.tsx
+++ b/src/components/Navbar/UnsupportNetwork.tsx
@@ -1,153 +1,149 @@
 import {
-    Modal,
-    Box,
-    Text,
-    Flex,
-    ModalCloseButton,
-    ModalContent,
-    ModalOverlay,
-} from '@chakra-ui/react';
-import React from 'react';
-import { BinanceIcon, EthereumIcon } from '../NetworkConnector/Icons';
-import { useColorModeValue } from '@chakra-ui/react';
-import { CHAIN_INFO } from '../../constants/chains';
-import detectEthereumProvider from '@metamask/detect-provider';
+  Modal,
+  Box,
+  Text,
+  Flex,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+} from "@chakra-ui/react";
+import React from "react";
+import { BinanceIcon, EthereumIcon } from "../NetworkConnector/Icons";
+import { useColorModeValue } from "@chakra-ui/react";
+import { CHAIN_INFO } from "../../constants/chains";
+import detectEthereumProvider from "@metamask/detect-provider";
 
 interface uProps {
-    openModal: boolean
-    setDisplayModal: React.Dispatch<React.SetStateAction<boolean>>
+  openModal: boolean;
+  setDisplayModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-
-
 function UnsupportNetwork({ openModal, setDisplayModal }: uProps) {
-    const mode = useColorModeValue('light', 'dark')
-
-    const checkMetamask = () => {
-        const provider = detectEthereumProvider();
-        return !!provider;
-    };
+  const mode = useColorModeValue("light", "dark");
 
+  const checkMetamask = () => {
+    const provider = detectEthereumProvider();
+    return !!provider;
+  };
 
-    const switchToSupportedNetwrk = async (chain: string) => {
-        if (checkMetamask()) {
-            try {
-                await window.ethereum?.request({
-                    method: 'wallet_switchEthereumChain',
-                    params: [{ chainId: chain }],
-                });
-                // window.location.reload();
-            } catch (switchError) {
-                console.log(switchError)
-                // This error code indicates that the chain has not been added to MetaMask.
-                //  if (switchError.code === 4902) {
-                // addBSCToMetamask();
-                //  }
-                // handle other  errors codes
-            }
-        }
-    };
+  const switchToSupportedNetwrk = async (chain: string) => {
+    if (checkMetamask()) {
+      try {
+        await window.ethereum?.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: chain }],
+        });
+        // window.location.reload();
+      } catch (switchError) {
+        console.log(switchError);
+      }
+    }
+  };
 
-    return (
-        <>
-            <Modal isOpen={openModal} onClose={() => setDisplayModal(false)} size="sm">
-                <ModalOverlay />
-                <ModalContent>
-                    <Flex flexDirection="column" mx={5}>
-                        <Flex my={4}>
-                            <ModalCloseButton
-                                border={
-                                    mode === 'dark' ? '1px solid #FFF' : '1px solid #666666'
-                                }
-                            />
-                        </Flex>
-                        <Flex mt={8}>
-                            <Text
-                                fontSize="20px"
-                                lineHeight="28px"
-                                color={mode === 'dark' ? '#F1F5F8' : '#333333'}
-                            >
-                                Wrong Network
-                            </Text>
-                        </Flex>
-                        <Flex>
-                            <Text
-                                fontSize="16px"
-                                lineHeight="28px"
-                                color={mode === 'dark' ? '#F1F5F8' : '#333333'}
-                                mb={3}
-                            >
-                                Please switch your wallet
-                            </Text>
-                        </Flex>
-                        <Flex
-                            backgroundColor={mode === 'dark' ? '#15202B' : '#FFFFFF'}
-                            border={
-                                mode === 'dark' ? '1px solid #324D68' : '1px solid #DEE6ED'
-                            }
-                            borderRadius="6px"
-                            py={4}
-                            px={3}
-                            mb={3}
-                            cursor="pointer"
-                            onClick={() => {
-                                setDisplayModal(false)
-                                switchToSupportedNetwrk('0x3')
-                                // switchNetwork('0x1', account as string, library as Web3Provider);
-                            }}
-                        >
-                            <Box px={2}>
-                                <EthereumIcon />
-                            </Box>
-                            <Box>{CHAIN_INFO[3]?.label}</Box>
-                        </Flex>
-                        <Flex
-                            backgroundColor={mode === 'dark' ? '#15202B' : '#FFFFFF'}
-                            border={
-                                mode === 'dark' ? '1px solid #324D68' : '1px solid #DEE6ED'
-                            }
-                            borderRadius="6px"
-                            py={4}
-                            px={3}
-                            mb={3}
-                            cursor="pointer"
-                            onClick={() => {
-                                setDisplayModal(false)
-                                switchToSupportedNetwrk('0x38')
-                                // switchNetwork('0x38', account as string, library as Web3Provider);
-                            }}
-                        >
-                            <Box px={2}>
-                                <BinanceIcon />
-                            </Box>
-                            <Box>{CHAIN_INFO[56]?.label} Smart Chain</Box>
-                        </Flex>
-                        <Flex
-                            backgroundColor={mode === 'dark' ? '#15202B' : '#FFFFFF'}
-                            border={
-                                mode === 'dark' ? '1px solid #324D68' : '1px solid #DEE6ED'
-                            }
-                            borderRadius="6px"
-                            px={3}
-                            py={4}
-                            mb={4}
-                            cursor="pointer"
-                            onClick={() => {
-                                setDisplayModal(false)
-                                switchToSupportedNetwrk('0x89')
-                                // switchNetwork('0x89', account as string, library as Web3Provider);
-                            }}
-                        >
-                            <Box px={2}>
-                                <EthereumIcon />
-                            </Box>
-                            <Box>{CHAIN_INFO[137]?.label}</Box>
-                        </Flex>
-                    </Flex>
-                </ModalContent>
-            </Modal>
-        </>
-    );
+  return (
+    <>
+      <Modal
+        isOpen={openModal}
+        onClose={() => setDisplayModal(false)}
+        size="sm"
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <Flex flexDirection="column" mx={5}>
+            <Flex my={4}>
+              <ModalCloseButton
+                border={
+                  mode === "dark" ? "1px solid #FFF" : "1px solid #666666"
+                }
+              />
+            </Flex>
+            <Flex mt={8}>
+              <Text
+                fontSize="20px"
+                lineHeight="28px"
+                color={mode === "dark" ? "#F1F5F8" : "#333333"}
+              >
+                Wrong Network
+              </Text>
+            </Flex>
+            <Flex>
+              <Text
+                fontSize="16px"
+                lineHeight="28px"
+                color={mode === "dark" ? "#F1F5F8" : "#333333"}
+                mb={3}
+              >
+                Please switch your wallet
+              </Text>
+            </Flex>
+            <Flex
+              backgroundColor={mode === "dark" ? "#15202B" : "#FFFFFF"}
+              border={
+                mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"
+              }
+              borderRadius="6px"
+              py={4}
+              px={3}
+              mb={3}
+              cursor="pointer"
+              onClick={() => {
+                setDisplayModal(false);
+                switchToSupportedNetwrk("0x3");
+                // switchNetwork('0x1', account as string, library as Web3Provider);
+              }}
+            >
+              <Box px={2}>
+                <EthereumIcon />
+              </Box>
+              <Box>{CHAIN_INFO[3]?.label}</Box>
+            </Flex>
+            <Flex
+              backgroundColor={mode === "dark" ? "#15202B" : "#FFFFFF"}
+              border={
+                mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"
+              }
+              borderRadius="6px"
+              py={4}
+              px={3}
+              mb={3}
+              cursor="pointer"
+              onClick={() => {
+                setDisplayModal(false);
+                switchToSupportedNetwrk("0x38");
+                // switchNetwork('0x38', account as string, library as Web3Provider);
+              }}
+            >
+              <Box px={2}>
+                <BinanceIcon />
+              </Box>
+              <Box>{CHAIN_INFO[56]?.label} Smart Chain</Box>
+            </Flex>
+            <Flex
+              backgroundColor={mode === "dark" ? "#15202B" : "#FFFFFF"}
+              border={
+                mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"
+              }
+              borderRadius="6px"
+              px={3}
+              py={4}
+              mb={4}
+              cursor="pointer"
+              onClick={() => {
+                setDisplayModal(false);
+                switchToSupportedNetwrk("0x89");
+                // switchNetwork('0x89', account as string, library as Web3Provider);
+              }}
+            >
+              <Box px={2}>
+                <EthereumIcon />
+              </Box>
+              <Box>{CHAIN_INFO[137]?.label}</Box>
+            </Flex>
+          </Flex>
+        </ModalContent>
+      </Modal>
+    </>
+  );
 }
 
-export default UnsupportNetwork;
\ No newline at end of file
+export default UnsupportNetwork;
diff --git a/src/components/NetworkConnector/index.tsx b/src/components/NetworkConnector/index.tsx
index 7cc3f36d..a70b8e3d 100644
--- a/src/components/NetworkConnector/index.tsx
+++ b/src/components/NetworkConnector/index.tsx
@@ -52,6 +52,7 @@ function NetworkIndicator() {
   }
   let query = useQuery();
   const param = query.get("chain");
+  console.log({ param });
 
   const info = chainId ? CHAIN_INFO[chainId] : CHAIN_INFO[ChainId as number];
   const connect = window.localStorage.getItem(connectorKey);
@@ -68,14 +69,31 @@ function NetworkIndicator() {
   }, [chainId]);
 
   useEffect(() => {
-    if (!param && !chainId) {
-      history.push(`${location.pathname}?chain=bsc`);
-    }
+    // if (!param && !chainId) {
+    //   history.push(`${location.pathname}?chain=bsc`);
+    // }
+
+    const url = window.location.href;
+    console.log({ url });
 
-    if (chainId) {
-      history.push(`${location.pathname}?chain=${CHAINDETAILS[chainId]}`);
+    const parsedUrl = new URL(url);
+    // const searchParams = new URLSearchParams(parsedUrl.search);
+    const searchParams = parsedUrl.searchParams;
+    console.log({ searchParams });
+
+    // Append the new parameter
+    if (!param) {
+      searchParams.append("chain", chainId ? CHAINDETAILS[chainId] : "bsc");
     }
 
+    // Update the URL with the new search params
+    parsedUrl.search = searchParams.toString();
+    console.log({ daa: parsedUrl.pathname + parsedUrl.search });
+
+    history.push(parsedUrl.pathname + parsedUrl.search);
+
+    console.log("no chainID");
+
     if (!connect && param) {
       if (param === "bsc") {
         handleUpdateChainId(56);
@@ -87,7 +105,8 @@ function NetworkIndicator() {
         history.push(`${location.pathname}?chain=bsc`);
       }
     }
-  }, [param, chainId]);
+    // }, [param, chainId]);
+  }, [chainId]);
 
   const changeNetwork = async (network: string, id: number) => {
     onClose();
@@ -131,11 +150,10 @@ function NetworkIndicator() {
               <Img w="30px" src={OASISLOGO} />
             ) : info.label == "Avalanche" ? (
               <Img w="30px" src={AVAXLOGO} />
-            ) 
-            // : info.label.toLowerCase() === "Avalanche Fuji TestNet".toLowerCase() ? (
-            //   <Img w="30px" src={AVAXLOGO} />
-            // )
-             : (
+            ) : (
+              // : info.label.toLowerCase() === "Avalanche Fuji TestNet".toLowerCase() ? (
+              //   <Img w="30px" src={AVAXLOGO} />
+              // )
               <EthereumIcon />
             )}
           </Box>
diff --git a/src/constants/chains.ts b/src/constants/chains.ts
index 231fa7c1..9714db74 100644
--- a/src/constants/chains.ts
+++ b/src/constants/chains.ts
@@ -49,7 +49,7 @@ export const L1_CHAIN_IDS = [
   SupportedChainId.AVALANCHE_FUJI,
 ] as const;
 
-export type SupportedL1ChainId = typeof L1_CHAIN_IDS[number];
+export type SupportedL1ChainId = (typeof L1_CHAIN_IDS)[number];
 
 export interface L1ChainInfo {
   readonly blockWaitMsBeforeWarning?: number;
@@ -177,3 +177,18 @@ export const CHAIN_INFO: ChainInfo = {
     nativeCurrency: { name: "ROSE", symbol: "ROSE", decimals: 18 },
   },
 };
+
+const environment = "development";
+const prod = {
+  url: {
+    API_URL: process.env.REACT_APP_PRODUCTION_AUTO_SWAP_SERVER,
+    API_URL_USERS: "",
+  },
+};
+const dev = {
+  url: {
+    API_URL: process.env.REACT_APP_TEST_AUTO_SWAP_SERVER,
+  },
+};
+
+export const SERVER_ENV = process.env.NODE_ENV === "development" ? dev : prod;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index a62bcc3e..e969d749 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -46,7 +46,6 @@ export const getOutPutDataFromEvent = async (
   });
 
   if (duplicateArray.length != 0) {
-    console.log("duplicate data", duplicateArray[0].data.toString());
     const convertedInput = (
       parseInt(duplicateArray[0].data, 16) /
       10 ** seconddecimal
diff --git a/src/hooks/useSwap.ts b/src/hooks/useSwap.ts
index 8aa4600c..17ec9f97 100644
--- a/src/hooks/useSwap.ts
+++ b/src/hooks/useSwap.ts
@@ -31,7 +31,6 @@ export function tryParseAmount<T extends Currency>(
     return undefined;
   }
   try {
-    // console.log(currency);
     const typedValueParsed = ethers.utils
       .parseUnits(value, decimals)
       .toString();
@@ -159,7 +158,11 @@ const useSwap = (
             setAmount("");
           }
           // setLoading(false)
-        } else if (!wrappable && address === ZERO_ADDRESS && pairAddress === ZERO_ADDRESS ) {
+        } else if (
+          !wrappable &&
+          address === ZERO_ADDRESS &&
+          pairAddress === ZERO_ADDRESS
+        ) {
           //   setWrap(true);
           setWrap(false);
           // RGP BNB BUSD USDT
@@ -216,14 +219,6 @@ const useSwap = (
               WNATIVEADDRESSES[ChainId as number]
             ),
           ]);
-          // console.log({  RGPTOKENA,
-          //             RGPTOKENB,
-          //             NATIVETOKENA,
-          //             NATIVETOKENB,
-          //             BUSDTOKENA,
-          //             BUSDTOKENB,
-          //             USDTTOKENA,
-          //             USDTTOKENB,USDTRGP, USDTNATIVE})
           try {
             if (USDTTOKENA !== ZERO_ADDRESS && USDTTOKENB !== ZERO_ADDRESS) {
               if (amountIn !== undefined) {
@@ -576,11 +571,10 @@ const useSwap = (
           setAmount("");
           setPathSymbol("");
           setPath([]);
-          setOppositeAmount("")
+          setOppositeAmount("");
         }
       } catch (e) {
         console.log({ e });
-        console.log(`Error occurs here: ${e}`);
         setAmount("");
       }
     };
diff --git a/src/pages/AddLiquidity/AddLquidityInputs/InputCurrency.tsx b/src/pages/AddLiquidity/AddLquidityInputs/InputCurrency.tsx
index 38156795..1869c4c1 100644
--- a/src/pages/AddLiquidity/AddLquidityInputs/InputCurrency.tsx
+++ b/src/pages/AddLiquidity/AddLquidityInputs/InputCurrency.tsx
@@ -1,21 +1,21 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { Field } from '../../../state/mint/actions';
-import { RouteComponentProps } from 'react-router-dom';
-import InputSelector from '../../Swap/components/sendToken/InputSelector';
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core';
-import { GetAddressTokenBalance } from '../../../state/wallet/hooks';
-import { useWeb3React } from '@web3-react/core';
+import React, { useCallback, useState, useEffect } from "react";
+import { Field } from "../../../state/mint/actions";
+import { RouteComponentProps } from "react-router-dom";
+import InputSelector from "../../Swap/components/sendToken/InputSelector";
+import { Currency, CurrencyAmount } from "@uniswap/sdk-core";
+import { GetAddressTokenBalance } from "../../../state/wallet/hooks";
+import { useWeb3React } from "@web3-react/core";
 import {
   useMintActionHandlers,
   useDerivedMintInfo,
   useMintState,
-} from '../../../state/mint/hooks';
-import { maxAmountSpend } from '../../../utils/maxAmountSpend';
-import { GetAmountsOut } from '../../../utils/getAmountsOut';
-import { SmartSwapRouter } from '../../../utils/Contracts';
-import { SMARTSWAPROUTER } from '../../../utils/addresses';
-import { getAddress } from '../../../utils/hooks/usePools';
-import { ethers } from 'ethers';
+} from "../../../state/mint/hooks";
+import { maxAmountSpend } from "../../../utils/maxAmountSpend";
+import { GetAmountsOut } from "../../../utils/getAmountsOut";
+import { SmartSwapRouter } from "../../../utils/Contracts";
+import { SMARTSWAPROUTER } from "../../../utils/addresses";
+import { getAddress } from "../../../utils/hooks/usePools";
+import { ethers } from "ethers";
 
 interface InputCurrencyProps {
   onUserInput: (value: string) => void;
@@ -65,109 +65,3 @@ const InputCurrency = ({
 };
 
 export default React.memo(InputCurrency);
-
-// const InputCurrency = ({
-//   pairAvailable,
-//   setInputValue,
-//   setOutputValue,
-//   inputValue,
-// }: InputCurrencyProps) => {
-//   const { chainId, library, account } = useWeb3React();
-
-//   const [tokenModal, setTokenModal] = useState(false);
-//   const { currencies, getMaxValue } = useDerivedMintInfo();
-//   const { onCurrencySelection, onUserInput } = useMintActionHandlers();
-
-//   const { independentField, typedValue } = useMintState();
-//   const dependentField =
-//     independentField === Field.CURRENCY_A ? Field.CURRENCY_B : Field.CURRENCY_A;
-
-//   const getAmount = useCallback(
-//     async (value: string, address: string) => {
-//       if (Field.CURRENCY_A && Field.CURRENCY_B && value && address) {
-//         if (pairAvailable) {
-//           try {
-//             const smartswapRouter = await SmartSwapRouter(address);
-
-//             const currencyAAddress = getAddress(currencies.CURRENCY_A);
-//             const currencyBAddress = getAddress(currencies.CURRENCY_B);
-
-//             const formattedValue = value && ethers.utils.parseEther(value);
-//             console.log(formattedValue);
-
-//             const amountOut = await smartswapRouter.getAmountsOut(
-//               formattedValue?.toString(),
-//               [currencyAAddress, currencyBAddress]
-//             );
-
-//             const AmountB =
-//               amountOut &&
-//               ethers.utils.formatEther(amountOut.toString().split(',')[1]);
-//             onUserInput(Field.CURRENCY_B, AmountB);
-//             setInputValue(value);
-//             setOutputValue(AmountB);
-//           } catch (e) {
-//             console.log(e);
-//           }
-//         } else {
-//           setInputValue(value);
-//         }
-//       } else if (value === '') {
-//         onUserInput(Field.CURRENCY_B, '');
-//         setInputValue('');
-//         setOutputValue('');
-//       }
-//     },
-//     [
-//       onUserInput,
-//       chainId,
-//       currencies.CURRENCY_A,
-//       currencies.CURRENCY_B,
-//       pairAvailable,
-//     ]
-//   );
-
-//   const handleTypeInput = useCallback(
-//     (value: string) => {
-//       onUserInput(Field.CURRENCY_A, value);
-//       console.log(SMARTSWAPROUTER[chainId as number]);
-//       getAmount(value, SMARTSWAPROUTER[chainId as number]);
-//     },
-//     [onUserInput, chainId, getAmount]
-//   );
-
-//   console.log(SMARTSWAPROUTER[chainId as number]);
-//   const formattedAmounts = {
-//     [independentField]: typedValue,
-//   };
-
-//   const handleInputSelect = useCallback(
-//     (inputCurrency) => {
-//       onCurrencySelection(Field.CURRENCY_A, inputCurrency);
-//       setTokenModal((state) => !state);
-//     },
-//     [onCurrencySelection]
-//   );
-//   const handleMaxInput = async () => {
-//     const value = await getMaxValue(currencies[Field.CURRENCY_A]);
-//     const maxAmountInput = maxAmountSpend(value, currencies[Field.CURRENCY_B]);
-//     if (maxAmountInput) {
-//       onUserInput(Field.CURRENCY_A, maxAmountInput);
-//     }
-//   };
-//   return (
-//     <InputSelector
-//       onUserInput={handleTypeInput}
-//       onCurrencySelect={handleInputSelect}
-//       currency={currencies[Field.CURRENCY_A]}
-//       otherCurrency={currencies[Field.CURRENCY_B]}
-//       tokenModal={tokenModal}
-//       onMax={handleMaxInput}
-//       setToken={() => setTokenModal((state) => !state)}
-//       value={formattedAmounts[Field.CURRENCY_A]}
-//       max
-//     />
-//   );
-// };
-
-// export default InputCurrency;
diff --git a/src/pages/AddLiquidity/AddLquidityInputs/OutputCurrecy.tsx b/src/pages/AddLiquidity/AddLquidityInputs/OutputCurrecy.tsx
index f495295c..7121f293 100644
--- a/src/pages/AddLiquidity/AddLquidityInputs/OutputCurrecy.tsx
+++ b/src/pages/AddLiquidity/AddLquidityInputs/OutputCurrecy.tsx
@@ -1,20 +1,20 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { Field } from '../../../state/mint/actions';
-import { RouteComponentProps } from 'react-router-dom';
-import InputSelector from '../../Swap/components/sendToken/InputSelector';
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core';
-import { GetAddressTokenBalance } from '../../../state/wallet/hooks';
-import { useWeb3React } from '@web3-react/core';
+import React, { useCallback, useState, useEffect } from "react";
+import { Field } from "../../../state/mint/actions";
+import { RouteComponentProps } from "react-router-dom";
+import InputSelector from "../../Swap/components/sendToken/InputSelector";
+import { Currency, CurrencyAmount } from "@uniswap/sdk-core";
+import { GetAddressTokenBalance } from "../../../state/wallet/hooks";
+import { useWeb3React } from "@web3-react/core";
 import {
   useMintActionHandlers,
   useDerivedMintInfo,
   useMintState,
-} from '../../../state/mint/hooks';
-import { maxAmountSpend } from '../../../utils/maxAmountSpend';
-import { ethers } from 'ethers';
-import { SmartSwapRouter } from '../../../utils/Contracts';
-import { SMARTSWAPROUTER } from '../../../utils/addresses';
-import { getAddress } from '../../../utils/hooks/usePools';
+} from "../../../state/mint/hooks";
+import { maxAmountSpend } from "../../../utils/maxAmountSpend";
+import { ethers } from "ethers";
+import { SmartSwapRouter } from "../../../utils/Contracts";
+import { SMARTSWAPROUTER } from "../../../utils/addresses";
+import { getAddress } from "../../../utils/hooks/usePools";
 
 interface OutputCurrencyProps {
   onUserOutput: (value: string) => void;
@@ -63,171 +63,3 @@ const OutputCurrecy = ({
 };
 
 export default React.memo(OutputCurrecy);
-
-// interface OutputCurrecyProps {
-//   pairAvailable: boolean;
-//   setInputValue: React.Dispatch<React.SetStateAction<string>>;
-//   setOutputValue: React.Dispatch<React.SetStateAction<string>>;
-//   outputValue: string;
-// }
-
-// const OutputCurrecy = ({
-//   pairAvailable,
-//   setInputValue,
-//   setOutputValue,
-//   outputValue,
-// }: OutputCurrecyProps) => {
-//   const { chainId, library, account } = useWeb3React();
-//   const [update, setUpdate] = useState(false);
-
-//   const [tokenModal, setTokenModal] = useState(false);
-//   const { currencies, getMaxValue } = useDerivedMintInfo();
-//   const { onCurrencySelection, onUserInput } = useMintActionHandlers();
-//   const { independentField, typedValue } = useMintState();
-
-//   const dependentField: Field =
-//     independentField === Field.CURRENCY_B ? Field.CURRENCY_A : Field.CURRENCY_B;
-
-//   const getAmount = useCallback(
-//     async (value: string, address: string) => {
-//       if (Field.CURRENCY_A && Field.CURRENCY_B && value && address) {
-//         if (pairAvailable) {
-//           try {
-//             const smartswapRouter = await SmartSwapRouter(address);
-
-//             const currencyAAddress = getAddress(currencies.CURRENCY_A);
-//             const currencyBAddress = getAddress(currencies.CURRENCY_B);
-
-//             const formattedValue = value && ethers.utils.parseEther(value);
-//             console.log(formattedValue);
-
-//             const amountOut = await smartswapRouter.getAmountsOut(
-//               formattedValue?.toString(),
-//               [currencyBAddress, currencyAAddress]
-//             );
-
-//             const AmountA =
-//               amountOut &&
-//               ethers.utils.formatEther(amountOut.toString().split(',')[1]);
-//             onUserInput(Field.CURRENCY_A, AmountA);
-//             setInputValue(AmountA);
-//             setOutputValue(value);
-//           } catch (e) {
-//             console.log(e);
-//           }
-//         } else {
-//           setOutputValue(value);
-//         }
-//       } else if (value === '') {
-//         onUserInput(Field.CURRENCY_A, '');
-//         setInputValue('');
-//         setOutputValue('');
-//       }
-//     },
-//     [
-//       onUserInput,
-//       chainId,
-//       currencies.CURRENCY_A,
-//       currencies.CURRENCY_B,
-//       pairAvailable,
-//       update,
-//       Field.CURRENCY_A,
-//       Field.CURRENCY_B,
-//     ]
-//   );
-
-//   const getAmountWhenSelected = useCallback(
-//     async (value: string, address: string) => {
-//       if (Field.CURRENCY_A && Field.CURRENCY_B && value && address) {
-//         if (pairAvailable) {
-//           try {
-//             const smartswapRouter = await SmartSwapRouter(address);
-
-//             const currencyAAddress = getAddress(currencies.CURRENCY_A);
-//             const currencyBAddress = getAddress(currencies.CURRENCY_B);
-
-//             const formattedValue = value && ethers.utils.parseEther(value);
-//             console.log(formattedValue);
-
-//             const amountOut = await smartswapRouter.getAmountsOut(
-//               formattedValue?.toString(),
-//               [currencyAAddress, currencyBAddress]
-//             );
-
-//             const AmountA =
-//               amountOut &&
-//               ethers.utils.formatEther(amountOut.toString().split(',')[1]);
-//             onUserInput(Field.CURRENCY_B, AmountA);
-//             setInputValue(value);
-//             setOutputValue(AmountA);
-//           } catch (e) {
-//             console.log(e);
-//           }
-//         } else {
-//           setOutputValue(value);
-//           setInputValue(value);
-//         }
-//       } else if (value === '') {
-//         onUserInput(Field.CURRENCY_A, '');
-//         setInputValue('');
-//         setOutputValue('');
-//       }
-//     },
-//     [
-//       onUserInput,
-//       chainId,
-//       currencies.CURRENCY_A,
-//       currencies.CURRENCY_B,
-//       pairAvailable,
-//       update,
-//     ]
-//   );
-
-//   const handleTypeInput = useCallback(
-//     (value: string) => {
-//       onUserInput(Field.CURRENCY_B, value);
-//       console.log(Field.CURRENCY_A);
-//       console.log(Field.CURRENCY_B);
-//       getAmount(value, SMARTSWAPROUTER[chainId as number]);
-//     },
-//     [onUserInput, chainId, getAmount, Field.CURRENCY_A, Field.CURRENCY_B]
-//   );
-
-//   const formattedAmounts = {
-//     [independentField]: typedValue,
-//     // [dependentField]: showWrap
-//     //   ? parsedAmounts[independentField]?.toExact() ?? ''
-//     //   : parsedAmounts[dependentField]?.toSignificant(6) ?? '',
-//     // [dependentField]: ''
-//   };
-
-//   const handleInputSelect = useCallback(
-//     (outputCurrency) => {
-//       onCurrencySelection(Field.CURRENCY_B, outputCurrency);
-//       setTokenModal((state) => !state);
-
-//       console.log('typed value', typedValue);
-
-//       // getAmountWhenSelected(typedValue, SMARTSWAPROUTER[chainId as number]);
-//     },
-//     [onCurrencySelection]
-//     // [],
-//   );
-
-//   console.log(formattedAmounts[Field.CURRENCY_B]);
-
-//   return (
-//     <InputSelector
-//       onCurrencySelect={handleInputSelect}
-//       currency={currencies[Field.CURRENCY_B]}
-//       otherCurrency={currencies[Field.CURRENCY_A]}
-//       tokenModal={tokenModal}
-//       setToken={() => setTokenModal((state) => !state)}
-//       onUserInput={handleTypeInput}
-//       value={formattedAmounts[Field.CURRENCY_B]}
-//       max={false}
-//     />
-//   );
-// };
-
-// export default OutputCurrecy;
diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
index 55efa732..3715dccd 100644
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@@ -29,6 +29,7 @@ import {
   usePriceForNewPool,
   useMintedLiquidity,
   getAddress,
+  useDefaultsFromURLLiquiduitySearch,
 } from "../../utils/hooks/usePools";
 import { maxAmountSpend } from "../../utils/maxAmountSpend";
 import {
@@ -60,6 +61,7 @@ import {
   GFailedTransaction,
   GSuccessfullyTransaction,
 } from "../../components/G-analytics/gIndex";
+import { useCurrency } from "../../hooks/Tokens";
 
 export default function AddLiquidity({
   match: {
@@ -101,10 +103,18 @@ export default function AddLiquidity({
     currencies[Field.OUTPUT]
   );
 
+  const loadedUrlParams = useDefaultsFromURLLiquiduitySearch();
+
   useUpdateUserGasPreference();
   const [userGasPricePercentage, setUserGasPricePercentage] =
     useUserGasPricePercentage();
 
+  const [loadedInputCurrency, loadedOutputCurrency] = [
+    useCurrency(loadedUrlParams?.inputCurrencyId),
+    useCurrency(loadedUrlParams?.outputCurrencyId),
+  ];
+  console.log({ loadedUrlParams, loadedInputCurrency, loadedOutputCurrency });
+
   const [balanceA, setBalanceA] = useState("");
   const [balanceB, setBalanceB] = useState("");
   const [showModal, setShowModal] = useState(false);
@@ -266,7 +276,6 @@ export default function AddLiquidity({
           );
         }
       } catch (err) {
-        console.log(err);
         dispatch(
           setOpenModal({
             message: `${symbol} Approval`,
@@ -402,7 +411,6 @@ export default function AddLiquidity({
           );
         }
       } catch (err) {
-        console.log(err);
         GFailedTransaction(
           "liquidity",
           "liquidity supplied failed",
@@ -534,7 +542,6 @@ export default function AddLiquidity({
           );
         }
       } catch (err: any) {
-        console.log(err);
         GFailedTransaction(
           "liquidity",
           "liquidity supplied failed",
diff --git a/src/pages/FarmingV2/ShowNewFarm.tsx b/src/pages/FarmingV2/ShowNewFarm.tsx
index b48ac615..57ee6fd5 100644
--- a/src/pages/FarmingV2/ShowNewFarm.tsx
+++ b/src/pages/FarmingV2/ShowNewFarm.tsx
@@ -1,2647 +1,2712 @@
-import React, {useEffect, useState} from "react";
-import {ethers} from "ethers";
+import React, { useEffect, useState } from "react";
+import { ethers } from "ethers";
 import Web3 from "web3";
 import {
-    Box,
-    Button,
-    Checkbox,
-    Circle,
-    Divider,
-    Flex,
-    Input,
-    InputGroup,
-    InputRightElement,
-    Modal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalOverlay,
-    Skeleton,
-    Spinner,
-    Text,
-    Tooltip,
-    useColorModeValue,
-    useDisclosure,
-    useMediaQuery,
+  Box,
+  Button,
+  Checkbox,
+  Circle,
+  Divider,
+  Flex,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Skeleton,
+  Spinner,
+  Text,
+  Tooltip,
+  useColorModeValue,
+  useDisclosure,
+  useMediaQuery,
 } from "@chakra-ui/react";
-import {QuestionOutlineIcon} from "@chakra-ui/icons";
-import {SupportedChainId} from "../../constants/chains";
+import { QuestionOutlineIcon } from "@chakra-ui/icons";
+import { SupportedChainId } from "../../constants/chains";
 import Switch from "react-switch";
-import {DARK_THEME, farmSection} from "./index";
-import {addToast} from "../../components/Toast/toastSlice";
-import {useDispatch, useSelector} from "react-redux";
-import {setOpenModal, TrxState} from "../../state/application/reducer";
-import {ExplorerDataType, getExplorerLink} from "../../utils/getExplorerLink";
+import { DARK_THEME, farmSection } from "./index";
+import { addToast } from "../../components/Toast/toastSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { setOpenModal, TrxState } from "../../state/application/reducer";
+import { ExplorerDataType, getExplorerLink } from "../../utils/getExplorerLink";
 import {
-    MasterChefNEWLPContract,
-    RGPSpecialPool,
-    RGPSpecialPool2,
-    rigelToken,
-    smartSwapLPTokenPoolOne,
-    smartSwapLPTokenPoolThree,
-    smartSwapLPTokenPoolTwo,
-    smartSwapLPTokenV2PoolEight,
-    smartSwapLPTokenV2PoolFive,
-    smartSwapLPTokenV2PoolFour,
-    smartSwapLPTokenV2PoolNine,
-    smartSwapLPTokenV2PoolSeven,
-    smartSwapLPTokenV2PoolSix,
-    smartSwapLPTokenV2PoolThirteen,
-    smartSwapLPTokenV2PoolTwelve,
+  MasterChefNEWLPContract,
+  RGPSpecialPool,
+  RGPSpecialPool2,
+  rigelToken,
+  smartSwapLPTokenPoolOne,
+  smartSwapLPTokenPoolThree,
+  smartSwapLPTokenPoolTwo,
+  smartSwapLPTokenV2PoolEight,
+  smartSwapLPTokenV2PoolFive,
+  smartSwapLPTokenV2PoolFour,
+  smartSwapLPTokenV2PoolNine,
+  smartSwapLPTokenV2PoolSeven,
+  smartSwapLPTokenV2PoolSix,
+  smartSwapLPTokenV2PoolThirteen,
+  smartSwapLPTokenV2PoolTwelve,
 } from "../../utils/Contracts";
 import {
-    MASTERCHEFNEWLPADDRESSES,
-    RGP,
-    RGPSPECIALPOOLADDRESSES,
-    RGPSPECIALPOOLADDRESSES2,
-    SMARTSWAPLP_TOKEN12ADDRESSES,
-    SMARTSWAPLP_TOKEN13ADDRESSES,
-    SMARTSWAPLP_TOKEN1ADDRESSES,
-    SMARTSWAPLP_TOKEN2ADDRESSES,
-    SMARTSWAPLP_TOKEN3ADDRESSES,
-    SMARTSWAPLP_TOKEN4ADDRESSES,
-    SMARTSWAPLP_TOKEN5ADDRESSES,
-    SMARTSWAPLP_TOKEN6ADDRESSES,
-    SMARTSWAPLP_TOKEN7ADDRESSES,
-    SMARTSWAPLP_TOKEN8ADDRESSES,
-    SMARTSWAPLP_TOKEN9ADDRESSES,
+  MASTERCHEFNEWLPADDRESSES,
+  RGP,
+  RGPSPECIALPOOLADDRESSES,
+  RGPSPECIALPOOLADDRESSES2,
+  SMARTSWAPLP_TOKEN12ADDRESSES,
+  SMARTSWAPLP_TOKEN13ADDRESSES,
+  SMARTSWAPLP_TOKEN1ADDRESSES,
+  SMARTSWAPLP_TOKEN2ADDRESSES,
+  SMARTSWAPLP_TOKEN3ADDRESSES,
+  SMARTSWAPLP_TOKEN4ADDRESSES,
+  SMARTSWAPLP_TOKEN5ADDRESSES,
+  SMARTSWAPLP_TOKEN6ADDRESSES,
+  SMARTSWAPLP_TOKEN7ADDRESSES,
+  SMARTSWAPLP_TOKEN8ADDRESSES,
+  SMARTSWAPLP_TOKEN9ADDRESSES,
 } from "../../utils/addresses";
-import {clearInputInfo, convertFromWei, convertToNumber} from "../../utils";
-import {useRGPBalance} from "../../utils/hooks/useBalances";
-import {updateFarmAllowances} from "../../state/farm/actions";
-import {useActiveWeb3React} from "../../utils/hooks/useActiveWeb3React";
+import { clearInputInfo, convertFromWei, convertToNumber } from "../../utils";
+import { useRGPBalance } from "../../utils/hooks/useBalances";
+import { updateFarmAllowances } from "../../state/farm/actions";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
 import Joyride from "react-joyride";
-import {steps} from "../../components/Onboarding/YieldSteps";
-import {Contract} from "@ethersproject/contracts";
-import {calculateGas} from "../Swap/components/sendToken";
-import {useUserGasPricePercentage} from "../../state/gas/hooks";
+import { steps } from "../../components/Onboarding/YieldSteps";
+import { Contract } from "@ethersproject/contracts";
+import { calculateGas } from "../Swap/components/sendToken";
+import { useUserGasPricePercentage } from "../../state/gas/hooks";
 
-import {useFetchYieldFarmDetails, useUpdateFarm} from "../../state/newfarm/hooks";
-import {useNewYieldFarmDetails, useUpdateNewFarm} from "../../state/LPFarm/hooks";
 import {
-    GButtonClicked,
-    GButtonIntialized,
-    GFarmingFailedTransaction,
-    GFarmingSpecialPoolReferral,
-    GFarmingSuccessTransaction
+  useFetchYieldFarmDetails,
+  useUpdateFarm,
+} from "../../state/newfarm/hooks";
+import {
+  useNewYieldFarmDetails,
+  useUpdateNewFarm,
+} from "../../state/LPFarm/hooks";
+import {
+  GButtonClicked,
+  GButtonIntialized,
+  GFarmingFailedTransaction,
+  GFarmingSpecialPoolReferral,
+  GFarmingSuccessTransaction,
 } from "../../components/G-analytics/gFarming";
-import {ZERO_ADDRESS} from "../../constants";
-import {State} from "../../state/types";
-
-const ShowNewFarm = ({content, wallet, URLReferrerAddress, LoadingState, section, showYieldfarm, contractID}: {
-    content: {
-        pid: number | string;
-        id: string;
-        totalLiquidity: string;
-        earn: string;
-        img: string;
-        ARYValue: string;
-        lpSymbol: string;
-        tokensStaked: string[];
-        availableToken: string;
-        deposit: string;
-        poolAllowance: any;
-        RGPEarned: string;
-        poolVersion: number | string;
-    };
-    wallet: any;
-    URLReferrerAddress:string;
-    LoadingState: boolean;
-    section: string;
-    showYieldfarm: boolean;
-    contractID: number
+import { ZERO_ADDRESS } from "../../constants";
+import { State } from "../../state/types";
+
+const ShowNewFarm = ({
+  content,
+  wallet,
+  URLReferrerAddress,
+  LoadingState,
+  section,
+  showYieldfarm,
+  contractID,
+}: {
+  content: {
+    pid: number | string;
+    id: string;
+    totalLiquidity: string;
+    earn: string;
+    img: string;
+    ARYValue: string;
+    lpSymbol: string;
+    tokensStaked: string[];
+    availableToken: string;
+    deposit: string;
+    poolAllowance: any;
+    RGPEarned: string;
+    poolVersion: number | string;
+  };
+  wallet: any;
+  URLReferrerAddress: string;
+  LoadingState: boolean;
+  section: string;
+  showYieldfarm: boolean;
+  contractID: number;
 }) => {
-    const mode = useColorModeValue("light", DARK_THEME);
-    const bgColor = useColorModeValue("#FFF", "#15202B");
-    const modalTextColor = useColorModeValue("#333333", "#F1F5F8");
-    const modalTextColor2 = useColorModeValue("#666666", "#DCE6EF");
-
-    const [checked, setChecked] = useState(true);
-    const modal2Disclosure = useDisclosure();
-    const modal1Disclosure = useDisclosure();
-    const filterBorderColor = useColorModeValue("#DEE5ED", "#324D68");
-    const [unstakeButtonValue, setUnstakeButtonValue] = useState("Confirm");
-    const [depositValue, setDepositValue] = useState("Confirm");
-    const [unstakeToken, setUnstakeToken] = useState("");
-    const [inputHasError, setInputHasError] = useState(false);
-    const [errorButtonText, setErrorButtonText] = useState("");
-    const [approveValueForRGP, setApproveValueForRGP] = useState(false);
-    const [approveValueForOtherToken, setApproveValueForOtherToken] =
-        useState(false);
-    const [approvalLoading, setApprovalLoading] = useState(false);
-    const { account, chainId, library } = useActiveWeb3React();
-    const dispatch = useDispatch();
-    const [depositTokenValue, setDepositTokenValue] = useState("");
-    const [referrerAddress, setReferrerAddress] = useState(URLReferrerAddress);
-    const [depositInputHasError, setDepositInputHasError] = useState(false);
-    const [refAddressHasError, setRefAddressHasError] = useState(false);
-    const [depositErrorButtonText, setDepositErrorButtonText] = useState("");
-    const [enoughApproval, setEnoughApproval] = useState(false);
-    const [RGPBalance] = useRGPBalance();
-    const [farmingFee, setFarmingFee] = useState("10");
-    const [FarmingFeeLoading, setFarmingFeeLoading] = useState(true);
-    const [deposited, setDeposited] = useState(false);
-    const [minimumStakeAmount, setMinimumStakeAmount] = useState<string | number>(
-        0
-    );
-    const [isMobileDevice] = useMediaQuery("(max-width: 767px)");
-    const [showReferrerField, setShowReferrerField] = useState(true);
-    const [isReferrerCheck, setIsReferrerCheck] = useState(false);
-    const signer = library?.getSigner();
-    const [reload, setReload] = useState(false);
-    const [contentid, setContentId] = useState(undefined);
-    const [loading, setLoading] = useState(true);
-
-    // const data = useGetFarmData(reload, setReload);
-
-
-
-    const {loadingFarm} = useUpdateNewFarm({reload, setReload, content, contractID});
-
-     useNewYieldFarmDetails({content, section, setLoading, loading, contractID});
-
-
-
-
-    const closeModal = () => {
-        GButtonIntialized("close unstaked",content.deposit,"v2")
-        modal2Disclosure.onClose();
+  const mode = useColorModeValue("light", DARK_THEME);
+  const bgColor = useColorModeValue("#FFF", "#15202B");
+  const modalTextColor = useColorModeValue("#333333", "#F1F5F8");
+  const modalTextColor2 = useColorModeValue("#666666", "#DCE6EF");
+
+  const [checked, setChecked] = useState(true);
+  const modal2Disclosure = useDisclosure();
+  const modal1Disclosure = useDisclosure();
+  const filterBorderColor = useColorModeValue("#DEE5ED", "#324D68");
+  const [unstakeButtonValue, setUnstakeButtonValue] = useState("Confirm");
+  const [depositValue, setDepositValue] = useState("Confirm");
+  const [unstakeToken, setUnstakeToken] = useState("");
+  const [inputHasError, setInputHasError] = useState(false);
+  const [errorButtonText, setErrorButtonText] = useState("");
+  const [approveValueForRGP, setApproveValueForRGP] = useState(false);
+  const [approveValueForOtherToken, setApproveValueForOtherToken] =
+    useState(false);
+  const [approvalLoading, setApprovalLoading] = useState(false);
+  const { account, chainId, library } = useActiveWeb3React();
+  const dispatch = useDispatch();
+  const [depositTokenValue, setDepositTokenValue] = useState("");
+  const [referrerAddress, setReferrerAddress] = useState(URLReferrerAddress);
+  const [depositInputHasError, setDepositInputHasError] = useState(false);
+  const [refAddressHasError, setRefAddressHasError] = useState(false);
+  const [depositErrorButtonText, setDepositErrorButtonText] = useState("");
+  const [enoughApproval, setEnoughApproval] = useState(false);
+  const [RGPBalance] = useRGPBalance();
+  const [farmingFee, setFarmingFee] = useState("10");
+  const [FarmingFeeLoading, setFarmingFeeLoading] = useState(true);
+  const [deposited, setDeposited] = useState(false);
+  const [minimumStakeAmount, setMinimumStakeAmount] = useState<string | number>(
+    0
+  );
+  const [isMobileDevice] = useMediaQuery("(max-width: 767px)");
+  const [showReferrerField, setShowReferrerField] = useState(true);
+  const [isReferrerCheck, setIsReferrerCheck] = useState(false);
+  const signer = library?.getSigner();
+  const [reload, setReload] = useState(false);
+  const [contentid, setContentId] = useState(undefined);
+  const [loading, setLoading] = useState(true);
+
+  // const data = useGetFarmData(reload, setReload);
+
+  const { loadingFarm } = useUpdateNewFarm({
+    reload,
+    setReload,
+    content,
+    contractID,
+  });
+
+  useNewYieldFarmDetails({ content, section, setLoading, loading, contractID });
+
+  const closeModal = () => {
+    GButtonIntialized("close unstaked", content.deposit, "v2");
+    modal2Disclosure.onClose();
+  };
+  // useUpdate(reload, setReload, contentid, setContentId);
+  const [userGasPricePercentage] = useUserGasPricePercentage();
+  const handleSetReferralField = () => {
+    if (showReferrerField === true && URLReferrerAddress === "") {
+      setShowReferrerField(false);
+      setReferrerAddress("0x0000000000000000000000000000000000000000");
+      setIsReferrerCheck(true);
+    } else if (showReferrerField === true && URLReferrerAddress !== "") {
+      setShowReferrerField(false);
+      setReferrerAddress(URLReferrerAddress);
+      setIsReferrerCheck(true);
+    } else if (showReferrerField === false && referrerAddress !== "") {
+      setShowReferrerField(true);
+      setReferrerAddress(referrerAddress);
+      setIsReferrerCheck(false);
+    }
+  };
+  useEffect(() => {
+    const checkEnoughApproval = (allowance: any, balance: any) => {
+      if (allowance && balance) {
+        let approve =
+          content.type === "RGP"
+            ? allowance.gt(ethers.utils.parseEther(balance))
+            : parseFloat(allowance) >= parseFloat(depositTokenValue);
+        approve ? setEnoughApproval(true) : setEnoughApproval(false);
+      }
+      return true;
     };
-    // useUpdate(reload, setReload, contentid, setContentId);
-    const [userGasPricePercentage] = useUserGasPricePercentage();
-    const handleSetReferralField = () => {
-        if (showReferrerField === true && URLReferrerAddress === "") {
-            setShowReferrerField(false);
-            setReferrerAddress("0x0000000000000000000000000000000000000000");
-            setIsReferrerCheck(true);
-        } else if (showReferrerField === true && URLReferrerAddress !== "") {
-            setShowReferrerField(false);
-            setReferrerAddress(URLReferrerAddress);
-            setIsReferrerCheck(true);
-        } else if (showReferrerField === false && referrerAddress !== "") {
-            setShowReferrerField(true);
-            setReferrerAddress(referrerAddress);
-            setIsReferrerCheck(false);
-        }
+    checkEnoughApproval(content.poolAllowance, content.availableToken);
+  }, [depositTokenValue]);
+  useEffect(() => {
+    const poolAllowance = async (contract: Contract) => {
+      if (account) {
+        const rgpApproval = await contract.allowance(
+          account,
+          MASTERCHEFNEWLPADDRESSES[chainId as number][contractID]
+        );
+        return !(rgpApproval.toString() <= 0);
+      }
     };
-    useEffect(()=>{
-        const checkEnoughApproval = (allowance: any, balance: any) => {
-            if (allowance && balance) {
-
-                let approve = content.type === "RGP"
-                    ? allowance.gt(ethers.utils.parseEther(balance))
-                    : parseFloat(allowance) >= parseFloat(depositTokenValue);
-                approve ? setEnoughApproval(true) : setEnoughApproval(false)
-            }
-            return true;
-        };
-        checkEnoughApproval(content.poolAllowance,content.availableToken)
-    },[depositTokenValue])
-    useEffect(() => {
-        const poolAllowance = async (contract: Contract) => {
-            if (account) {
-                const rgpApproval = await contract.allowance(
-                    account,
-                    MASTERCHEFNEWLPADDRESSES[chainId as number][contractID]
-                );
-                return !(rgpApproval.toString() <= 0);
-            }
-        };
-
-        if (!account) {
-            setFarmingFeeLoading(false);
-        }
 
-        const specialPoolV1Allowance = async (contract: Contract) => {
-            if (account) {
-                const rgpApproval = await contract.allowance(
-                    account,
-                    RGPSPECIALPOOLADDRESSES[chainId as number]
-                );
-                return !(rgpApproval.toString() <= 0);
-            }
-        };
-
-        const specialPoolV2Allowance = async (contract: Contract) => {
-            if (account) {
-                const rgpApproval = await contract.allowance(
-                    account,
-                    RGPSPECIALPOOLADDRESSES2[chainId as number]
-                );
-                return !(rgpApproval.toString() <= 0);
-            }
-        };
-
-        const checkForApproval = async () => {
-            const rgp = await rigelToken(RGP[chainId as number], library);
-            const rgpApproval = await poolAllowance(rgp);
-            if (content.deposit === "RGP" && Number(content.id) === 1) {
-                const specialPoolV1Approval = await specialPoolV1Allowance(rgp);
-                changeApprovalButton(true, specialPoolV1Approval);
-            } else if (content.deposit === "RGP" && Number(content.id) === 13) {
-                const specialPoolV2Approval = await specialPoolV2Allowance(rgp);
-                changeApprovalButton(true, specialPoolV2Approval);
-            } else {
-                const pool = await smartSwapLPTokenPoolTwo(content.address, library);
-                const approvalForRGPBNB = await poolAllowance(pool);
-                changeApprovalButton(approvalForRGPBNB, rgpApproval);
-            }
-        };
-
-        function changeApprovalButton(otherTokenApproval, rgpApproval) {
-            if (otherTokenApproval && rgpApproval) {
-                setApproveValueForOtherToken(true);
-                setApproveValueForRGP(true);
-            } else if (otherTokenApproval) {
-                setApproveValueForOtherToken(true);
-            } else if (rgpApproval) {
-                // setApproveValueForOtherToken(false);
-                setApproveValueForRGP(true);
-            } else {
-                setApproveValueForRGP(false);
-                setApproveValueForOtherToken(false);
-            }
-        }
-
-        setApproveValueForRGP(false);
-        setApproveValueForOtherToken(false);
+    if (!account) {
+      setFarmingFeeLoading(false);
+    }
 
-        if (account) {
-            checkForApproval();
-        }
-    }, [wallet, content, account]);
-
-    const RGPSpecialPoolV1Approval = async () => {
-        if (account) {
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `Approving RGP`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                const rgp = await rigelToken(RGP[chainId as number], library);
-                const walletBal = (await rgp.balanceOf(account)) ;
-                const data = await rgp.approve(
-                    RGPSPECIALPOOLADDRESSES[chainId as number],
-                    walletBal,
-                    {
-                        from: account,
-                        // gasLimit: 150000,
-                        // gasPrice: ethers.utils.parseUnits("20", "gwei"),
-                    }
-                );
-                setApprovalLoading(true);
-                const { confirmations, status } = await fetchTransactionData(data);
-                if (confirmations >= 3) {
-                    setApproveValueForRGP(true);
-                    GFarmingSuccessTransaction("special pool", "approval",  "RGP","v1")
-                    dispatch(
-                        setOpenModal({
-                            trxState: TrxState.TransactionSuccessful,
-                            message: `Successful RGP Approval`,
-                        })
-                    );
-                }
-                getAllowances();
-            } catch (error:any) {
-                console.error(error);
-                GFarmingFailedTransaction("special pool", "approval", error.message, "RGP","v1")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
-            setApprovalLoading(false);
-        }
+    const specialPoolV1Allowance = async (contract: Contract) => {
+      if (account) {
+        const rgpApproval = await contract.allowance(
+          account,
+          RGPSPECIALPOOLADDRESSES[chainId as number]
+        );
+        return !(rgpApproval.toString() <= 0);
+      }
     };
 
-    const RGPSpecialPoolV2Approval = async () => {
-        if (account) {
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `Approving RGP`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-
-                const rgp = await rigelToken(RGP[chainId as number], library);
-                const walletBal = (await rgp.balanceOf(account)) ;
-                const data = await rgp.approve(
-                    RGPSPECIALPOOLADDRESSES2[chainId as number],
-                    walletBal,
-                    {
-                        from: account,
-                        // gasLimit: 150000,
-                        // gasPrice: ethers.utils.parseUnits("20", "gwei"),
-                    }
-                );
-                setApprovalLoading(true);
-                const { confirmations, status } = await fetchTransactionData(data);
-                if (confirmations >= 3) {
-                    setApproveValueForRGP(true);
-                    GFarmingSuccessTransaction("special pool", "approval", "RGP","v2")
-                    dispatch(
-                        setOpenModal({
-                            trxState: TrxState.TransactionSuccessful,
-                            message: `Successful RGP Approval`,
-                        })
-                    );
-                }
-                getAllowances();
-            } catch (error:any) {
-                console.error(error);
-                GFarmingFailedTransaction("special pool", "approval", error.message, "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
-            setApprovalLoading(false);
-        }
+    const specialPoolV2Allowance = async (contract: Contract) => {
+      if (account) {
+        const rgpApproval = await contract.allowance(
+          account,
+          RGPSPECIALPOOLADDRESSES2[chainId as number]
+        );
+        return !(rgpApproval.toString() <= 0);
+      }
     };
 
-    const setApprove = (val: string) => {
-        if (approveValueForOtherToken && approveValueForRGP) {
-            GButtonClicked("unstake",content.deposit,"v2")
-            modal2Disclosure.onOpen();
-        } else {
-            GButtonClicked("approval",content.deposit,"v2")
-            checkUser(val);
-        }
+    const checkForApproval = async () => {
+      const rgp = await rigelToken(RGP[chainId as number], library);
+      const rgpApproval = await poolAllowance(rgp);
+      if (content.deposit === "RGP" && Number(content.id) === 1) {
+        const specialPoolV1Approval = await specialPoolV1Allowance(rgp);
+        changeApprovalButton(true, specialPoolV1Approval);
+      } else if (content.deposit === "RGP" && Number(content.id) === 13) {
+        const specialPoolV2Approval = await specialPoolV2Allowance(rgp);
+        changeApprovalButton(true, specialPoolV2Approval);
+      } else {
+        const pool = await smartSwapLPTokenPoolTwo(content.address, library);
+        const approvalForRGPBNB = await poolAllowance(pool);
+        changeApprovalButton(approvalForRGPBNB, rgpApproval);
+      }
     };
 
-    const checkUser = async (val :string) => {
-        if (content.deposit === "RGP" && Number(content.id) === 1) {
-            await RGPSpecialPoolV1Approval();
-            setApproveValueForOtherToken(true);
-            setApproveValueForRGP(true);
-        } else if (content.deposit === "RGP" && Number(content.id) === 13) {
-            await RGPSpecialPoolV2Approval();
-            setApproveValueForOtherToken(true);
-            setApproveValueForRGP(true);
-        } else {
-            const pool = await smartSwapLPTokenPoolTwo(content.address, library);
-            if (!approveValueForOtherToken && !approveValueForRGP) {
-                await RGPApproval();
-                await LPApproval(pool,content.deposit);
-            } else if (!approveValueForRGP) {
-                await RGPApproval();
-            } else {
-                await LPApproval(pool,content.deposit);
-            }
-            setApproveValueForOtherToken(true);
-            setApproveValueForRGP(true);
-        }
-    };
+    function changeApprovalButton(otherTokenApproval, rgpApproval) {
+      if (otherTokenApproval && rgpApproval) {
+        setApproveValueForOtherToken(true);
+        setApproveValueForRGP(true);
+      } else if (otherTokenApproval) {
+        setApproveValueForOtherToken(true);
+      } else if (rgpApproval) {
+        // setApproveValueForOtherToken(false);
+        setApproveValueForRGP(true);
+      } else {
+        setApproveValueForRGP(false);
+        setApproveValueForOtherToken(false);
+      }
+    }
 
-    const openDepositeModal = () => {
-        GButtonClicked("stake",content.deposit,"v2")
-        //if (approveValueForOtherToken && approveValueForRGP) {
-        modal1Disclosure.onOpen();
-        // }
-    };
+    setApproveValueForRGP(false);
+    setApproveValueForOtherToken(false);
 
-    const closeDepositeModal = () => {
-        GButtonClicked("close staked modal",content.deposit,"v2")
-        modal1Disclosure.onClose();
-    };
+    if (account) {
+      checkForApproval();
+    }
+  }, [wallet, content, account]);
 
-    const handleChecked = () => {
-        setChecked(true);
-    };
+  const RGPSpecialPoolV1Approval = async () => {
+    if (account) {
+      try {
+        dispatch(
+          setOpenModal({
+            message: `Approving RGP`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
+        const rgp = await rigelToken(RGP[chainId as number], library);
+        const walletBal = await rgp.balanceOf(account);
+        const data = await rgp.approve(
+          RGPSPECIALPOOLADDRESSES[chainId as number],
+          walletBal,
+          {
+            from: account,
+            // gasLimit: 150000,
+            // gasPrice: ethers.utils.parseUnits("20", "gwei"),
+          }
+        );
+        setApprovalLoading(true);
+        const { confirmations, status } = await fetchTransactionData(data);
+        if (confirmations >= 3) {
+          setApproveValueForRGP(true);
+          GFarmingSuccessTransaction("special pool", "approval", "RGP", "v1");
+          dispatch(
+            setOpenModal({
+              trxState: TrxState.TransactionSuccessful,
+              message: `Successful RGP Approval`,
+            })
+          );
+        }
+        getAllowances();
+      } catch (error: any) {
+        console.error(error);
+        GFarmingFailedTransaction(
+          "special pool",
+          "approval",
+          error.message,
+          "RGP",
+          "v1"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+      setApprovalLoading(false);
+    }
+  };
 
-    const [devpercent, setDevPercent] = useState('');
-
-    useEffect(() => {
-        const RGPfarmingFee = async () => {
-            if (account) {
-                const masterChef = await MasterChefNEWLPContract(
-                    MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                    library
-                );
-                const minFarmingFee = await masterChef.farmingFee();
-                const fee = Web3.utils.fromWei(minFarmingFee.toString());
-                const percentFee = await masterChef.devSetpercentOnExternalPool();
-                const percentageAmount = Web3.utils.fromWei(percentFee.toString());
-                setFarmingFee(fee.toString());
-                setDevPercent(percentageAmount.toString());
-                setFarmingFeeLoading(false);
-            }
-        };
-        RGPfarmingFee();
-    }, [chainId]);
+  const RGPSpecialPoolV2Approval = async () => {
+    if (account) {
+      try {
+        dispatch(
+          setOpenModal({
+            message: `Approving RGP`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
 
-    useEffect(() => {
-        getAllowances();
-    }, [account, deposited]);
-
-    const allowance = (contract: Contract) =>
-        contract.allowance(account, MASTERCHEFNEWLPADDRESSES[chainId as number][contractID]);
-
-    const getAllowances = async () => {
-        if (account) {
-            try {
-                const [
-                    rigel,
-                    pool1,
-                    pool2,
-                    pool3,
-                    pool4,
-                    pool5,
-                    pool6,
-                    pool7,
-                    pool8,
-                    pool9,
-                    pool12,
-                    pool13,
-                ] = await Promise.all([
-                    rigelToken(RGP[chainId as number], library),
-                    smartSwapLPTokenPoolOne(
-                        SMARTSWAPLP_TOKEN1ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenPoolTwo(
-                        SMARTSWAPLP_TOKEN2ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenPoolThree(
-                        SMARTSWAPLP_TOKEN3ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolFour(
-                        SMARTSWAPLP_TOKEN4ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolFive(
-                        SMARTSWAPLP_TOKEN5ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolSix(
-                        SMARTSWAPLP_TOKEN6ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolSeven(
-                        SMARTSWAPLP_TOKEN7ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolEight(
-                        SMARTSWAPLP_TOKEN8ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolNine(
-                        SMARTSWAPLP_TOKEN9ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolTwelve(
-                        SMARTSWAPLP_TOKEN12ADDRESSES[chainId as number],
-                        library
-                    ),
-                    smartSwapLPTokenV2PoolThirteen(
-                        SMARTSWAPLP_TOKEN13ADDRESSES[chainId as number],
-                        library
-                    ),
-                ]);
-
-                const [
-                    pool1Allowance,
-                    pool2Allowance,
-                    pool3Allowance,
-                    pool4Allowance,
-                    pool5Allowance,
-                    pool6Allowance,
-                    pool7Allowance,
-                    pool8Allowance,
-                    pool9Allowance,
-                    pool12Allowance,
-                    pool13Allowance,
-                ] = await Promise.all([
-                    allowance(pool1),
-                    allowance(pool2),
-                    allowance(pool3),
-                    allowance(pool4),
-                    allowance(pool5),
-                    allowance(pool6),
-                    allowance(pool7),
-                    allowance(pool8),
-                    allowance(pool9),
-                    allowance(pool12),
-                    allowance(pool13),
-                ]);
-                let rigelAllowance;
-                if (RGPSPECIALPOOLADDRESSES[chainId as number]) {
-                    rigelAllowance = await rigel.allowance(
-                        account,
-                        RGPSPECIALPOOLADDRESSES[chainId as number]
-                    );
-                } else {
-                    rigelAllowance = pool1Allowance;
-                }
-                if (Number(chainId) === Number(SupportedChainId.BINANCE)) {
-                    dispatch(
-                        updateFarmAllowances([
-                            rigelAllowance,
-                            pool2Allowance,
-                            pool1Allowance,
-                            pool3Allowance,
-                            pool4Allowance,
-                            pool5Allowance,
-                            pool6Allowance,
-                            pool7Allowance,
-                            pool8Allowance,
-                            pool9Allowance,
-                            pool12Allowance,
-                            pool13Allowance,
-                        ])
-                    );
-                } else {
-                    dispatch(
-                        updateFarmAllowances([
-                            rigelAllowance,
-                            pool2Allowance,
-                            pool1Allowance,
-                            pool3Allowance,
-                            pool4Allowance,
-                            pool5Allowance,
-                            pool6Allowance,
-                            pool7Allowance,
-                            pool8Allowance,
-                            pool9Allowance,
-                            pool12Allowance,
-                            pool13Allowance,
-                        ])
-                    );
-                }
-            } catch (error) {
-                console.error(error, "something went wrong");
-            }
+        const rgp = await rigelToken(RGP[chainId as number], library);
+        const walletBal = await rgp.balanceOf(account);
+        const data = await rgp.approve(
+          RGPSPECIALPOOLADDRESSES2[chainId as number],
+          walletBal,
+          {
+            from: account,
+            // gasLimit: 150000,
+            // gasPrice: ethers.utils.parseUnits("20", "gwei"),
+          }
+        );
+        setApprovalLoading(true);
+        const { confirmations, status } = await fetchTransactionData(data);
+        if (confirmations >= 3) {
+          setApproveValueForRGP(true);
+          GFarmingSuccessTransaction("special pool", "approval", "RGP", "v2");
+          dispatch(
+            setOpenModal({
+              trxState: TrxState.TransactionSuccessful,
+              message: `Successful RGP Approval`,
+            })
+          );
         }
+        getAllowances();
+      } catch (error: any) {
+        console.error(error);
+        GFarmingFailedTransaction(
+          "special pool",
+          "approval",
+          error.message,
+          "RGP",
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+      setApprovalLoading(false);
+    }
+  };
+
+  const setApprove = (val: string) => {
+    if (approveValueForOtherToken && approveValueForRGP) {
+      GButtonClicked("unstake", content.deposit, "v2");
+      modal2Disclosure.onOpen();
+    } else {
+      GButtonClicked("approval", content.deposit, "v2");
+      checkUser(val);
+    }
+  };
+
+  const checkUser = async (val: string) => {
+    if (content.deposit === "RGP" && Number(content.id) === 1) {
+      await RGPSpecialPoolV1Approval();
+      setApproveValueForOtherToken(true);
+      setApproveValueForRGP(true);
+    } else if (content.deposit === "RGP" && Number(content.id) === 13) {
+      await RGPSpecialPoolV2Approval();
+      setApproveValueForOtherToken(true);
+      setApproveValueForRGP(true);
+    } else {
+      const pool = await smartSwapLPTokenPoolTwo(content.address, library);
+      if (!approveValueForOtherToken && !approveValueForRGP) {
+        await RGPApproval();
+        await LPApproval(pool, content.deposit);
+      } else if (!approveValueForRGP) {
+        await RGPApproval();
+      } else {
+        await LPApproval(pool, content.deposit);
+      }
+      setApproveValueForOtherToken(true);
+      setApproveValueForRGP(true);
+    }
+  };
+
+  const openDepositeModal = () => {
+    GButtonClicked("stake", content.deposit, "v2");
+    //if (approveValueForOtherToken && approveValueForRGP) {
+    modal1Disclosure.onOpen();
+    // }
+  };
+
+  const closeDepositeModal = () => {
+    GButtonClicked("close staked modal", content.deposit, "v2");
+    modal1Disclosure.onClose();
+  };
+
+  const handleChecked = () => {
+    setChecked(true);
+  };
+
+  const [devpercent, setDevPercent] = useState("");
+
+  useEffect(() => {
+    const RGPfarmingFee = async () => {
+      if (account) {
+        const masterChef = await MasterChefNEWLPContract(
+          MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+          library
+        );
+        const minFarmingFee = await masterChef.farmingFee();
+        const fee = Web3.utils.fromWei(minFarmingFee.toString());
+        const percentFee = await masterChef.devSetpercentOnExternalPool();
+        const percentageAmount = Web3.utils.fromWei(percentFee.toString());
+        setFarmingFee(fee.toString());
+        setDevPercent(percentageAmount.toString());
+        setFarmingFeeLoading(false);
+      }
     };
+    RGPfarmingFee();
+  }, [chainId]);
 
-    //unstateButtton
-
-    useEffect(() => {
-        const getMinimumStakeAmount = async () => {
-            if (account) {
-                try {
-                    const specialPool = await RGPSpecialPool2(
-                        RGPSPECIALPOOLADDRESSES2[chainId as number],
-                        library
-                    );
-                    const minimumAmount = await specialPool.getMinimumStakeAmount();
-                    const minStakeAmount = Web3.utils.fromWei(minimumAmount.toString());
-                    setMinimumStakeAmount(minStakeAmount);
-                } catch (error) {
-                    console.log(error);
-                }
-            }
-        };
-        getMinimumStakeAmount();
-    }, [account]);
-
-    useEffect(() => {
-        setDepositInputHasError(false);
-        setDepositErrorButtonText("");
-        if (!account) {
-            setDepositValue("Connect wallet");
-        }
-        if (depositTokenValue !== "") {
-            if (
-                isNaN(parseFloat(depositTokenValue)) ||
-                !Math.sign(parseFloat(depositTokenValue)) ||
-                Math.sign(parseFloat(depositTokenValue)) == -1
-            ) {
-                setDepositInputHasError(true);
-                setDepositErrorButtonText("Invalid Input");
-                return;
-            } else if (
-                Number(content.poolVersion) === 2 &&
-                parseFloat(content.tokensStaked[1]) <= 0 &&
-                Number(depositTokenValue) < Number(minimumStakeAmount)
-            ) {
-                setDepositInputHasError(true);
-                setDepositErrorButtonText(
-                    `Minimum stake amount is ${minimumStakeAmount}`
-                );
-            }
-            if (parseFloat(depositTokenValue) > parseFloat(content.availableToken)) {
-                setDepositInputHasError(true);
-                setDepositErrorButtonText("Insufficient Balance");
-            }
-        }
-    }, [depositTokenValue]);
-
-    useEffect(() => {
-        setRefAddressHasError(false);
-        if (referrerAddress !== "") {
-            if (!Web3.utils.isAddress(referrerAddress)) {
-                setRefAddressHasError(true);
-                setDepositErrorButtonText("Invalid Address");
-            }
-        }
-    }, [referrerAddress]);
+  useEffect(() => {
+    getAllowances();
+  }, [account, deposited]);
 
-    useEffect(() => {
-        setInputHasError(false);
-        setErrorButtonText("");
+  const allowance = (contract: Contract) =>
+    contract.allowance(
+      account,
+      MASTERCHEFNEWLPADDRESSES[chainId as number][contractID]
+    );
 
-        if (!account) {
-            setUnstakeButtonValue("Connect wallet");
+  const getAllowances = async () => {
+    if (account) {
+      try {
+        const [
+          rigel,
+          pool1,
+          pool2,
+          pool3,
+          pool4,
+          pool5,
+          pool6,
+          pool7,
+          pool8,
+          pool9,
+          pool12,
+          pool13,
+        ] = await Promise.all([
+          rigelToken(RGP[chainId as number], library),
+          smartSwapLPTokenPoolOne(
+            SMARTSWAPLP_TOKEN1ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenPoolTwo(
+            SMARTSWAPLP_TOKEN2ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenPoolThree(
+            SMARTSWAPLP_TOKEN3ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolFour(
+            SMARTSWAPLP_TOKEN4ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolFive(
+            SMARTSWAPLP_TOKEN5ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolSix(
+            SMARTSWAPLP_TOKEN6ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolSeven(
+            SMARTSWAPLP_TOKEN7ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolEight(
+            SMARTSWAPLP_TOKEN8ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolNine(
+            SMARTSWAPLP_TOKEN9ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolTwelve(
+            SMARTSWAPLP_TOKEN12ADDRESSES[chainId as number],
+            library
+          ),
+          smartSwapLPTokenV2PoolThirteen(
+            SMARTSWAPLP_TOKEN13ADDRESSES[chainId as number],
+            library
+          ),
+        ]);
+
+        const [
+          pool1Allowance,
+          pool2Allowance,
+          pool3Allowance,
+          pool4Allowance,
+          pool5Allowance,
+          pool6Allowance,
+          pool7Allowance,
+          pool8Allowance,
+          pool9Allowance,
+          pool12Allowance,
+          pool13Allowance,
+        ] = await Promise.all([
+          allowance(pool1),
+          allowance(pool2),
+          allowance(pool3),
+          allowance(pool4),
+          allowance(pool5),
+          allowance(pool6),
+          allowance(pool7),
+          allowance(pool8),
+          allowance(pool9),
+          allowance(pool12),
+          allowance(pool13),
+        ]);
+        let rigelAllowance;
+        if (RGPSPECIALPOOLADDRESSES[chainId as number]) {
+          rigelAllowance = await rigel.allowance(
+            account,
+            RGPSPECIALPOOLADDRESSES[chainId as number]
+          );
+        } else {
+          rigelAllowance = pool1Allowance;
         }
-        if (unstakeToken !== "") {
-            if (
-                isNaN(parseFloat(unstakeToken)) ||
-                !Math.sign(parseFloat(unstakeToken)) ||
-                Math.sign(parseFloat(unstakeToken)) == -1
-            ) {
-                setInputHasError(true);
-                setErrorButtonText("Invalid Input");
-                return;
-            }
-            if (
-                parseFloat(unstakeToken) >
-                parseFloat(
-                    content.deposit === "RGP"
-                        ? content.tokensStaked[1]
-                        : content.tokenStaked[1]
-                )
-            ) {
-                setInputHasError(true);
-                setErrorButtonText("Insufficient Balance");
-            }
+        if (Number(chainId) === Number(SupportedChainId.BINANCE)) {
+          dispatch(
+            updateFarmAllowances([
+              rigelAllowance,
+              pool2Allowance,
+              pool1Allowance,
+              pool3Allowance,
+              pool4Allowance,
+              pool5Allowance,
+              pool6Allowance,
+              pool7Allowance,
+              pool8Allowance,
+              pool9Allowance,
+              pool12Allowance,
+              pool13Allowance,
+            ])
+          );
+        } else {
+          dispatch(
+            updateFarmAllowances([
+              rigelAllowance,
+              pool2Allowance,
+              pool1Allowance,
+              pool3Allowance,
+              pool4Allowance,
+              pool5Allowance,
+              pool6Allowance,
+              pool7Allowance,
+              pool8Allowance,
+              pool9Allowance,
+              pool12Allowance,
+              pool13Allowance,
+            ])
+          );
         }
-    }, [unstakeToken, account]);
+      } catch (error) {
+        console.error(error, "something went wrong");
+      }
+    }
+  };
+
+  //unstateButtton
 
-    // show max value
-    const showMaxValue = async (deposit: any, input: any) => {
+  useEffect(() => {
+    const getMinimumStakeAmount = async () => {
+      if (account) {
         try {
-            if (input === "deposit") {
-                GButtonClicked(`max_button for ${input}`,content.deposit,"v2")
-                setDepositTokenValue(content.availableToken);
-            } else if (input === "unstake") {
-                setUnstakeToken(
-                    content.deposit === "RGP"
-                        ? content.tokensStaked[1]
-                        : content.tokenStaked[1]
-                );
-            }
-        } catch (e) {
-            console.log(
-                "sorry there is a few error, you are most likely not logged in. Please login to your metamask extensition and try again."
-            );
-        }
+          const specialPool = await RGPSpecialPool2(
+            RGPSPECIALPOOLADDRESSES2[chainId as number],
+            library
+          );
+          const minimumAmount = await specialPool.getMinimumStakeAmount();
+          const minStakeAmount = Web3.utils.fromWei(minimumAmount.toString());
+          setMinimumStakeAmount(minStakeAmount);
+        } catch (error) {}
+      }
     };
+    getMinimumStakeAmount();
+  }, [account]);
+
+  useEffect(() => {
+    setDepositInputHasError(false);
+    setDepositErrorButtonText("");
+    if (!account) {
+      setDepositValue("Connect wallet");
+    }
+    if (depositTokenValue !== "") {
+      if (
+        isNaN(parseFloat(depositTokenValue)) ||
+        !Math.sign(parseFloat(depositTokenValue)) ||
+        Math.sign(parseFloat(depositTokenValue)) == -1
+      ) {
+        setDepositInputHasError(true);
+        setDepositErrorButtonText("Invalid Input");
+        return;
+      } else if (
+        Number(content.poolVersion) === 2 &&
+        parseFloat(content.tokensStaked[1]) <= 0 &&
+        Number(depositTokenValue) < Number(minimumStakeAmount)
+      ) {
+        setDepositInputHasError(true);
+        setDepositErrorButtonText(
+          `Minimum stake amount is ${minimumStakeAmount}`
+        );
+      }
+      if (parseFloat(depositTokenValue) > parseFloat(content.availableToken)) {
+        setDepositInputHasError(true);
+        setDepositErrorButtonText("Insufficient Balance");
+      }
+    }
+  }, [depositTokenValue]);
+
+  useEffect(() => {
+    setRefAddressHasError(false);
+    if (referrerAddress !== "") {
+      if (!Web3.utils.isAddress(referrerAddress)) {
+        setRefAddressHasError(true);
+        setDepositErrorButtonText("Invalid Address");
+      }
+    }
+  }, [referrerAddress]);
 
+  useEffect(() => {
+    setInputHasError(false);
+    setErrorButtonText("");
 
-    async function confirmUnstakeDeposit(val: string) {
-        try {
-            setUnstakeButtonValue("Pending Confirmation");
-            GButtonIntialized("unstake",content.deposit,"v2")
-            dispatch(
-                setOpenModal({
-                    message: `Unstaking ${unstakeToken} ${val}`,
-                    trxState: TrxState.WaitingForConfirmation,
-                })
-            );
-
-            if (account) {
-                if (val === "RGP" && Number(content.id) === 1) {
-                    await RGPUnstake(val);
-                } else if (val === "RGP" && Number(content.id) === 13) {
-                    await RGPUnstakeV2(val);
-                } else {
-                    tokensWithdrawal(content.id,val);
-                }
-            }
-        } catch (err) {
-            console.log(err);
-            dispatch(
-                setOpenModal({
-                    message: `Failed transaction`,
-                    trxState: TrxState.TransactionFailed,
-                })
-            );
+    if (!account) {
+      setUnstakeButtonValue("Connect wallet");
+    }
+    if (unstakeToken !== "") {
+      if (
+        isNaN(parseFloat(unstakeToken)) ||
+        !Math.sign(parseFloat(unstakeToken)) ||
+        Math.sign(parseFloat(unstakeToken)) == -1
+      ) {
+        setInputHasError(true);
+        setErrorButtonText("Invalid Input");
+        return;
+      }
+      if (
+        parseFloat(unstakeToken) >
+        parseFloat(
+          content.deposit === "RGP"
+            ? content.tokensStaked[1]
+            : content.tokenStaked[1]
+        )
+      ) {
+        setInputHasError(true);
+        setErrorButtonText("Insufficient Balance");
+      }
+    }
+  }, [unstakeToken, account]);
+
+  // show max value
+  const showMaxValue = async (deposit: any, input: any) => {
+    try {
+      if (input === "deposit") {
+        GButtonClicked(`max_button for ${input}`, content.deposit, "v2");
+        setDepositTokenValue(content.availableToken);
+      } else if (input === "unstake") {
+        setUnstakeToken(
+          content.deposit === "RGP"
+            ? content.tokensStaked[1]
+            : content.tokenStaked[1]
+        );
+      }
+    } catch (e) {
+      console.log(
+        "sorry there is a few error, you are most likely not logged in. Please login to your metamask extensition and try again."
+      );
+    }
+  };
+
+  async function confirmUnstakeDeposit(val: string) {
+    try {
+      setUnstakeButtonValue("Pending Confirmation");
+      GButtonIntialized("unstake", content.deposit, "v2");
+      dispatch(
+        setOpenModal({
+          message: `Unstaking ${unstakeToken} ${val}`,
+          trxState: TrxState.WaitingForConfirmation,
+        })
+      );
+
+      if (account) {
+        if (val === "RGP" && Number(content.id) === 1) {
+          await RGPUnstake(val);
+        } else if (val === "RGP" && Number(content.id) === 13) {
+          await RGPUnstakeV2(val);
+        } else {
+          tokensWithdrawal(content.id, val);
         }
-
-        setTimeout(() => closeModal(), 400);
-        clearInputInfo(setUnstakeToken, setUnstakeButtonValue, "Confirm");
+      }
+    } catch (err) {
+      console.log(err);
+      dispatch(
+        setOpenModal({
+          message: `Failed transaction`,
+          trxState: TrxState.TransactionFailed,
+        })
+      );
     }
 
-    const fetchTransactionData = async (sendTransaction: any) => {
-        const { confirmations, status, logs } = await sendTransaction.wait(1);
+    setTimeout(() => closeModal(), 400);
+    clearInputInfo(setUnstakeToken, setUnstakeButtonValue, "Confirm");
+  }
 
-        return { confirmations, status, logs };
-    };
+  const fetchTransactionData = async (sendTransaction: any) => {
+    const { confirmations, status, logs } = await sendTransaction.wait(1);
 
-    // withdrawal for the Liquidity Provider tokens for all pools
-    const tokensWithdrawal = async (pid: number,val:string) => {
-        if (account) {
-            try {
-                const lpTokens = await MasterChefNEWLPContract(
-                    MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                    library
-                );
-
-                const { format1, format2, format3 } = await calculateGas(
-                    userGasPricePercentage,
-                    library,
-                    chainId as number
-                );
-
-                const isEIP1559 = await library?.getFeeData();
-                const data = await lpTokens.withdraw(
-                    pid,
-                    ethers.utils.parseEther(unstakeToken.toString()),
-                    {
-                        from: account,
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    }
-                );
-                const { confirmations, status, logs } = await fetchTransactionData(
-                    data
-                );
-                const { hash } = data;
-                const amountUnstaked = convertToNumber(logs[1].data);
-
-                const explorerLink = getExplorerLink(
-                    chainId as number,
-                    hash,
-                    ExplorerDataType.TRANSACTION
-                );
-                GFarmingSuccessTransaction("Farm", "unstake", val,"v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionSuccessful,
-                        message: `Successfully unstaked ${convertFromWei(
-                            amountUnstaked
-                        )} RGP `,
-                    })
-                );
-
-                dispatch(
-                    addToast({
-                        message: `Successfully unstaked ${convertFromWei(
-                            amountUnstaked
-                        )} RGP `,
-                        URL: explorerLink,
-                    })
-                );
-                setReload(true);
-                // dispatch the getTokenStaked action from here when data changes
-                //callRefreshFarm(confirmations, status);
-            } catch (e:any) {
-                console.log(e);
-                GFarmingFailedTransaction("Farm", "unstake", e.message, val,"v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
-        }
-    };
+    return { confirmations, status, logs };
+  };
 
-    const harvestTokens = async (id: string | number) => {
-        if (account) {
-            try {
-                GButtonClicked("harvest",content.deposit,"v2")
-                GButtonIntialized("harvest",content.deposit,"v2")
-                dispatch(
-                    setOpenModal({
-                        message: `Harvesting RGP ${content.RGPEarned} Tokens`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                if (id === 0) {
-                    const { format1, format2, format3 } = await calculateGas(
-                        userGasPricePercentage,
-                        library,
-                        chainId as number
-                    );
-
-                    const isEIP1559 = await library?.getFeeData();
-                    const specialPool = await RGPSpecialPool(
-                        RGPSPECIALPOOLADDRESSES[chainId as number],
-                        library
-                    );
-                    const specialWithdraw = await specialPool.unStake(0, {
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    });
-                    const { confirmations, status, logs } = await fetchTransactionData(
-                        specialWithdraw
-                    );
-
-                    const amountOfRgbSpecial = convertToNumber(logs[1].data);
-
-                    if (confirmations >= 1 && status) {
-                        GFarmingSuccessTransaction("special pool", "harvest", "RGP","v1")
-                        dispatch(
-                            setOpenModal({
-                                trxState: TrxState.TransactionSuccessful,
-                                message: `Successfully Harvested ${convertFromWei(
-                                    amountOfRgbSpecial
-                                )} RGP `,
-                            })
-                        );
-                    }
-                } else if (id === 10793) {
-                    const specialPool = await RGPSpecialPool2(
-                        RGPSPECIALPOOLADDRESSES2[chainId as number],
-                        library
-                    );
-                    const { format1, format2, format3 } = await calculateGas(
-                        userGasPricePercentage,
-                        library,
-                        chainId as number
-                    );
-
-                    const isEIP1559 = await library?.getFeeData();
-                    const specialWithdraw = await specialPool.unStake(0, {
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    });
-                    const { confirmations, status, logs } = await fetchTransactionData(
-                        specialWithdraw
-                    );
-
-                    const amountOfRgbSpecial = convertToNumber(logs[1].data);
-
-                    if (confirmations >= 1 && status) {
-                        GFarmingSuccessTransaction("special pool", "harvest", "RGP","v2")
-                        dispatch(
-                            setOpenModal({
-                                trxState: TrxState.TransactionSuccessful,
-                                message: `Successfully Harvested ${convertFromWei(
-                                    amountOfRgbSpecial
-                                )} RGP `,
-                            })
-                        );
-                    }
-                } else {
-                    const lpTokens = await MasterChefNEWLPContract(
-                        MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                        library
-                    );
-                    const { format1, format2, format3 } = await calculateGas(
-                        userGasPricePercentage,
-                        library,
-                        chainId as number
-                    );
-
-                    const isEIP1559 = await library?.getFeeData();
-                    const withdraw = await lpTokens.withdraw(id, 0, {
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    });
-                    const { confirmations, status, logs } = await fetchTransactionData(
-                        withdraw
-                    );
-                    const amountOfRgb = convertToNumber(logs[1].data);
-                    const { hash } = withdraw;
-
-                    if (confirmations >= 1 && status) {
-                        GFarmingSuccessTransaction("Farm", "harvest", "RGP","v2")
-                        dispatch(
-                            setOpenModal({
-                                trxState: TrxState.TransactionSuccessful,
-                                message: `Successfully Harvested ${convertFromWei(
-                                    amountOfRgb
-                                )} RGP `,
-                            })
-                        );
-                    }
+  // withdrawal for the Liquidity Provider tokens for all pools
+  const tokensWithdrawal = async (pid: number, val: string) => {
+    if (account) {
+      try {
+        const lpTokens = await MasterChefNEWLPContract(
+          MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+          library
+        );
 
-                    const explorerLink = getExplorerLink(
-                        chainId as number,
-                        hash,
-                        ExplorerDataType.TRANSACTION
-                    );
-                    dispatch(
-                        addToast({
-                            message: `Successfully harvested ${convertFromWei(
-                                amountOfRgb
-                            )} RGP `,
-                            URL: explorerLink,
-                        })
-                    );
-                    setReload(true);
-                }
-            } catch (error:any) {
-                GFarmingFailedTransaction( "special pool","harvest", error.message, "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionFailed,
-                        message: `Transaction was not successful`,
-                    })
-                );
-            }
-        }
-    };
+        const { format1, format2, format3 } = await calculateGas(
+          userGasPricePercentage,
+          library,
+          chainId as number
+        );
 
-    // deposit for the Liquidity Provider tokens for all pools
-    const LPDeposit = async (pid: any,val:string) => {
-        if (account) {
-            try {
-                if (parseFloat(content.tokenStaked[1]) == 0) {
-                    if (parseFloat(RGPBalance) < parseFloat(farmingFee)) {
-                        
-                        dispatch(
-                            setOpenModal({
-                                trxState: TrxState.TransactionFailed,
-                                message: `Insufficient RGP, you need at least ${farmingFee} RGP to enter this pool`,
-                            })
-                        );
-                    } else {
-                        const lpTokens = await MasterChefNEWLPContract(
-                            MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                            library
-                        );
-                        const { format1, format2, format3 } = await calculateGas(
-                            userGasPricePercentage,
-                            library,
-                            chainId as number
-                        );
+        const isEIP1559 = await library?.getFeeData();
+        const data = await lpTokens.withdraw(
+          pid,
+          ethers.utils.parseEther(unstakeToken.toString()),
+          {
+            from: account,
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          }
+        );
+        const { confirmations, status, logs } = await fetchTransactionData(
+          data
+        );
+        const { hash } = data;
+        const amountUnstaked = convertToNumber(logs[1].data);
 
-                        const isEIP1559 = await library?.getFeeData();
-
-                        const data = await lpTokens.deposit(
-                            pid,
-                            ethers.utils.parseEther(depositTokenValue.toString()),
-                            {
-                                from: account,
-                                maxPriorityFeePerGas:
-                                    isEIP1559 && chainId === 137
-                                        ? ethers.utils.parseUnits(format1, 9).toString()
-                                        : null,
-                                maxFeePerGas:
-                                    isEIP1559 && chainId === 137
-                                        ? ethers.utils.parseUnits(format2, 9).toString()
-                                        : null,
-                                gasPrice:
-                                    chainId === 137
-                                        ? null
-                                        : chainId === 80001
-                                        ? null
-                                        : ethers.utils.parseUnits(format3, 9).toString(),
-                            }
-                        );
-                        const { confirmations, status, logs } = await fetchTransactionData(
-                            data
-                        );
-                        GFarmingSuccessTransaction("farming", "stake", val,"v2")
-                        dispatch(
-                            setOpenModal({
-                                trxState: TrxState.TransactionSuccessful,
-                                message: `Successfully deposited`,
-                            })
-                        );
+        const explorerLink = getExplorerLink(
+          chainId as number,
+          hash,
+          ExplorerDataType.TRANSACTION
+        );
+        GFarmingSuccessTransaction("Farm", "unstake", val, "v2");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionSuccessful,
+            message: `Successfully unstaked ${convertFromWei(
+              amountUnstaked
+            )} RGP `,
+          })
+        );
 
-                        //callRefreshFarm(confirmations, status);
-                        //temporal
-                        setDeposited(true);
-                    }
-                } else {
-                    const lpTokens = await MasterChefNEWLPContract(
-                        MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                        library
-                    );
-
-                    const { format1, format2, format3 } = await calculateGas(
-                        userGasPricePercentage,
-                        library,
-                        chainId as number
-                    );
-
-                    const isEIP1559 = await library?.getFeeData();
-
-                    const data = await lpTokens.deposit(
-                        pid,
-                        ethers.utils.parseEther(depositTokenValue.toString()),
-                        {
-                            from: account,
-                            maxPriorityFeePerGas:
-                                isEIP1559 && chainId === 137
-                                    ? ethers.utils.parseUnits(format1, 9).toString()
-                                    : null,
-                            maxFeePerGas:
-                                isEIP1559 && chainId === 137
-                                    ? ethers.utils.parseUnits(format2, 9).toString()
-                                    : null,
-                            gasPrice:
-                                chainId === 137
-                                    ? null
-                                    : chainId === 80001
-                                    ? null
-                                    : ethers.utils.parseUnits(format3, 9).toString(),
-                        }
-                    );
-                    // const { confirmations, status } = await fetchTransactionData(data);
-                    const receipt = await data.wait(3);
-                    dispatch(
-                        setOpenModal({
-                            trxState: TrxState.TransactionSuccessful,
-                            message: `Successfully deposited`,
-                        })
-                    );
-                    GFarmingSuccessTransaction("farming", "stake", val,"v2")
-                    setDeposited(true);
-                    setReload(true);
-                    setContentId(content.deposit === "RGP" ? undefined : content.id);
-                    //  callRefreshFarm(confirmations, status);
-                }
-            } catch (error: any) {
-                GFarmingFailedTransaction("farming", "stake", error.message, val,"v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
-        }
-    };
+        dispatch(
+          addToast({
+            message: `Successfully unstaked ${convertFromWei(
+              amountUnstaked
+            )} RGP `,
+            URL: explorerLink,
+          })
+        );
+        setReload(true);
+        // dispatch the getTokenStaked action from here when data changes
+        //callRefreshFarm(confirmations, status);
+      } catch (e: any) {
+        console.log(e);
+        GFarmingFailedTransaction("Farm", "unstake", e.message, val, "v2");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
 
-    const confirmDeposit = async (val: any) => {
-        setDepositValue("Pending Confirmation");
-        GButtonIntialized("deposit",content.deposit,"v2")
+  const harvestTokens = async (id: string | number) => {
+    if (account) {
+      try {
+        GButtonClicked("harvest", content.deposit, "v2");
+        GButtonIntialized("harvest", content.deposit, "v2");
         dispatch(
-            setOpenModal({
-                message: `Staking ${depositTokenValue} ${val}`,
-                trxState: TrxState.WaitingForConfirmation,
-            })
+          setOpenModal({
+            message: `Harvesting RGP ${content.RGPEarned} Tokens`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
         );
-        try {
-            if (account) {
-                if (val === "RGP" && Number(content.id) === 1) {
-                    await RGPuseStake();
-                } else if (val === "RGP" && Number(content.id) === 13) {
-                    await RGPuseStakeV2();
-                } else {
-                    LPDeposit(content.id,val);
-                }
-            }
-        } catch (error:any) {
-            console.log(error);
-            GFarmingFailedTransaction("farming", "stake", error.message, val,"v2")
+        if (id === 0) {
+          const { format1, format2, format3 } = await calculateGas(
+            userGasPricePercentage,
+            library,
+            chainId as number
+          );
+
+          const isEIP1559 = await library?.getFeeData();
+          const specialPool = await RGPSpecialPool(
+            RGPSPECIALPOOLADDRESSES[chainId as number],
+            library
+          );
+          const specialWithdraw = await specialPool.unStake(0, {
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          });
+          const { confirmations, status, logs } = await fetchTransactionData(
+            specialWithdraw
+          );
+
+          const amountOfRgbSpecial = convertToNumber(logs[1].data);
+
+          if (confirmations >= 1 && status) {
+            GFarmingSuccessTransaction("special pool", "harvest", "RGP", "v1");
             dispatch(
-                setOpenModal({
-                    message: `Failed to deposit LP tokens.`,
-                    trxState: TrxState.TransactionFailed,
-                })
+              setOpenModal({
+                trxState: TrxState.TransactionSuccessful,
+                message: `Successfully Harvested ${convertFromWei(
+                  amountOfRgbSpecial
+                )} RGP `,
+              })
             );
+          }
+        } else if (id === 10793) {
+          const specialPool = await RGPSpecialPool2(
+            RGPSPECIALPOOLADDRESSES2[chainId as number],
+            library
+          );
+          const { format1, format2, format3 } = await calculateGas(
+            userGasPricePercentage,
+            library,
+            chainId as number
+          );
+
+          const isEIP1559 = await library?.getFeeData();
+          const specialWithdraw = await specialPool.unStake(0, {
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          });
+          const { confirmations, status, logs } = await fetchTransactionData(
+            specialWithdraw
+          );
+
+          const amountOfRgbSpecial = convertToNumber(logs[1].data);
+
+          if (confirmations >= 1 && status) {
+            GFarmingSuccessTransaction("special pool", "harvest", "RGP", "v2");
+            dispatch(
+              setOpenModal({
+                trxState: TrxState.TransactionSuccessful,
+                message: `Successfully Harvested ${convertFromWei(
+                  amountOfRgbSpecial
+                )} RGP `,
+              })
+            );
+          }
+        } else {
+          const lpTokens = await MasterChefNEWLPContract(
+            MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+            library
+          );
+          const { format1, format2, format3 } = await calculateGas(
+            userGasPricePercentage,
+            library,
+            chainId as number
+          );
+
+          const isEIP1559 = await library?.getFeeData();
+          const withdraw = await lpTokens.withdraw(id, 0, {
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          });
+          const { confirmations, status, logs } = await fetchTransactionData(
+            withdraw
+          );
+          const amountOfRgb = convertToNumber(logs[1].data);
+          const { hash } = withdraw;
+
+          if (confirmations >= 1 && status) {
+            GFarmingSuccessTransaction("Farm", "harvest", "RGP", "v2");
+            dispatch(
+              setOpenModal({
+                trxState: TrxState.TransactionSuccessful,
+                message: `Successfully Harvested ${convertFromWei(
+                  amountOfRgb
+                )} RGP `,
+              })
+            );
+          }
+
+          const explorerLink = getExplorerLink(
+            chainId as number,
+            hash,
+            ExplorerDataType.TRANSACTION
+          );
+          dispatch(
+            addToast({
+              message: `Successfully harvested ${convertFromWei(
+                amountOfRgb
+              )} RGP `,
+              URL: explorerLink,
+            })
+          );
+          setReload(true);
         }
-        setTimeout(() => closeDepositeModal(), 400);
-        //setDeposit(true);
-
-        clearInputInfo(setDepositTokenValue, setDepositValue, "Confirm");
-    };
-
-
-    const RGPuseStake = async () => {
-        if (account) {
-            try {
-                const specialPool = await RGPSpecialPool(
-                    RGPSPECIALPOOLADDRESSES[chainId as number],
-                    library
-                );
-
-                const { format1, format2, format3 } = await calculateGas(
-                    userGasPricePercentage,
-                    library,
-                    chainId as number
-                );
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "harvest",
+          error.message,
+          "RGP",
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionFailed,
+            message: `Transaction was not successful`,
+          })
+        );
+      }
+    }
+  };
+
+  // deposit for the Liquidity Provider tokens for all pools
+  const LPDeposit = async (pid: any, val: string) => {
+    if (account) {
+      try {
+        if (parseFloat(content.tokenStaked[1]) == 0) {
+          if (parseFloat(RGPBalance) < parseFloat(farmingFee)) {
+            dispatch(
+              setOpenModal({
+                trxState: TrxState.TransactionFailed,
+                message: `Insufficient RGP, you need at least ${farmingFee} RGP to enter this pool`,
+              })
+            );
+          } else {
+            const lpTokens = await MasterChefNEWLPContract(
+              MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+              library
+            );
+            const { format1, format2, format3 } = await calculateGas(
+              userGasPricePercentage,
+              library,
+              chainId as number
+            );
 
-                const isEIP1559 = await library?.getFeeData();
+            const isEIP1559 = await library?.getFeeData();
+
+            const data = await lpTokens.deposit(
+              pid,
+              ethers.utils.parseEther(depositTokenValue.toString()),
+              {
+                from: account,
+                maxPriorityFeePerGas:
+                  isEIP1559 && chainId === 137
+                    ? ethers.utils.parseUnits(format1, 9).toString()
+                    : null,
+                maxFeePerGas:
+                  isEIP1559 && chainId === 137
+                    ? ethers.utils.parseUnits(format2, 9).toString()
+                    : null,
+                gasPrice:
+                  chainId === 137
+                    ? null
+                    : chainId === 80001
+                    ? null
+                    : ethers.utils.parseUnits(format3, 9).toString(),
+              }
+            );
+            const { confirmations, status, logs } = await fetchTransactionData(
+              data
+            );
+            GFarmingSuccessTransaction("farming", "stake", val, "v2");
+            dispatch(
+              setOpenModal({
+                trxState: TrxState.TransactionSuccessful,
+                message: `Successfully deposited`,
+              })
+            );
 
-                const data = await specialPool.stake(
-                    ethers.utils.parseEther(depositTokenValue.toString()),
-                    {
-                        from: account,
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    }
-                );
-                const { confirmations, status } = await fetchTransactionData(data);
-                GFarmingSuccessTransaction("special pool", "staking", "RGP","v1")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionSuccessful,
-                        message: `Successfully staked ${depositTokenValue} RGP `,
-                    })
-                );
-                // callRefreshFarm(confirmations, status);
-            } catch (error:any) {
-                console.log(error);
-                GFarmingFailedTransaction("special pool", "stake", error.message, "RGP","v1")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
+            //callRefreshFarm(confirmations, status);
+            //temporal
+            setDeposited(true);
+          }
+        } else {
+          const lpTokens = await MasterChefNEWLPContract(
+            MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+            library
+          );
+
+          const { format1, format2, format3 } = await calculateGas(
+            userGasPricePercentage,
+            library,
+            chainId as number
+          );
+
+          const isEIP1559 = await library?.getFeeData();
+
+          const data = await lpTokens.deposit(
+            pid,
+            ethers.utils.parseEther(depositTokenValue.toString()),
+            {
+              from: account,
+              maxPriorityFeePerGas:
+                isEIP1559 && chainId === 137
+                  ? ethers.utils.parseUnits(format1, 9).toString()
+                  : null,
+              maxFeePerGas:
+                isEIP1559 && chainId === 137
+                  ? ethers.utils.parseUnits(format2, 9).toString()
+                  : null,
+              gasPrice:
+                chainId === 137
+                  ? null
+                  : chainId === 80001
+                  ? null
+                  : ethers.utils.parseUnits(format3, 9).toString(),
             }
+          );
+          // const { confirmations, status } = await fetchTransactionData(data);
+          const receipt = await data.wait(3);
+          dispatch(
+            setOpenModal({
+              trxState: TrxState.TransactionSuccessful,
+              message: `Successfully deposited`,
+            })
+          );
+          GFarmingSuccessTransaction("farming", "stake", val, "v2");
+          setDeposited(true);
+          setReload(true);
+          setContentId(content.deposit === "RGP" ? undefined : content.id);
+          //  callRefreshFarm(confirmations, status);
         }
-    };
-
-    const RGPuseStakeV2 = async () => {
-        if (account) {
-            try {
-                const specialPool = await RGPSpecialPool2(
-                    RGPSPECIALPOOLADDRESSES2[chainId as number],
-                    library
-                );
-                GFarmingSpecialPoolReferral(referrerAddress===ZERO_ADDRESS ? false:true)
-                const data = await specialPool.stake(
-                    ethers.utils.parseEther(depositTokenValue.toString()),
-                    referrerAddress,
-                    {
-                        from: account,
-                        gasLimit: 200000,
-                        gasPrice: ethers.utils.parseUnits("20", "gwei"),
-                    }
-                );
-                await fetchTransactionData(data);
-                GFarmingSuccessTransaction("special pool", "stake", "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionSuccessful,
-                        message: `Successfully staked ${depositTokenValue} RGP `,
-                    })
-                );
-                // callRefreshFarm(confirmations, status);
-            } catch (error:any) {
-                console.log(error);
-                GFarmingFailedTransaction("special pool", "stake", error.message, "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-
-                    })
-                );
-            }
+      } catch (error: any) {
+        GFarmingFailedTransaction("farming", "stake", error.message, val, "v2");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
+
+  const confirmDeposit = async (val: any) => {
+    setDepositValue("Pending Confirmation");
+    GButtonIntialized("deposit", content.deposit, "v2");
+    dispatch(
+      setOpenModal({
+        message: `Staking ${depositTokenValue} ${val}`,
+        trxState: TrxState.WaitingForConfirmation,
+      })
+    );
+    try {
+      if (account) {
+        if (val === "RGP" && Number(content.id) === 1) {
+          await RGPuseStake();
+        } else if (val === "RGP" && Number(content.id) === 13) {
+          await RGPuseStakeV2();
+        } else {
+          LPDeposit(content.id, val);
         }
-    };
+      }
+    } catch (error: any) {
+      GFarmingFailedTransaction("farming", "stake", error.message, val, "v2");
+      dispatch(
+        setOpenModal({
+          message: `Failed to deposit LP tokens.`,
+          trxState: TrxState.TransactionFailed,
+        })
+      );
+    }
+    setTimeout(() => closeDepositeModal(), 400);
+    //setDeposit(true);
+
+    clearInputInfo(setDepositTokenValue, setDepositValue, "Confirm");
+  };
+
+  const RGPuseStake = async () => {
+    if (account) {
+      try {
+        const specialPool = await RGPSpecialPool(
+          RGPSPECIALPOOLADDRESSES[chainId as number],
+          library
+        );
 
-    // withdrawal of funds
-    const RGPUnstake = async () => {
-        if (account) {
-            try {
-                const specialPool = await RGPSpecialPool(
-                    RGPSPECIALPOOLADDRESSES[chainId as number],
-                    library
-                );
-                const { format1, format2, format3 } = await calculateGas(
-                    userGasPricePercentage,
-                    library,
-                    chainId as number
-                );
-
-                const isEIP1559 = await library?.getFeeData();
-                const data = await specialPool.unStake(
-                    ethers.utils.parseEther(unstakeToken.toString()), // user input from onclick shoild be here...
-                    {
-                        from: account,
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    }
-                );
-                const { confirmations, status } = await fetchTransactionData(data);
-                GFarmingSuccessTransaction("special pool", "unstake", "RGP","v1")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionSuccessful,
-                        message: `Successfully unstaked ${unstakeToken} RGP `,
-                    })
-                );
-                // dispatch the getTokenStaked action from here when data changes
-                //  callRefreshFarm(confirmations, status);
-            } catch (e:any) {
-                console.log(e);
-                GFarmingFailedTransaction("special pool", "unstake", e.message, "RGP","v1")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionFailed,
-                        message: `Transaction was not successful`,
-                    })
-                );
-            }
-        }
-    };
+        const { format1, format2, format3 } = await calculateGas(
+          userGasPricePercentage,
+          library,
+          chainId as number
+        );
 
-    const RGPUnstakeV2 = async (val:string) => {
-        if (account) {
-            try {
-                const specialPool = await RGPSpecialPool2(
-                    RGPSPECIALPOOLADDRESSES2[chainId as number],
-                    library
-                );
-                const { format1, format2, format3 } = await calculateGas(
-                    userGasPricePercentage,
-                    library,
-                    chainId as number
-                );
-
-                const isEIP1559 = await library?.getFeeData();
-                const data = await specialPool.unStake(
-                    ethers.utils.parseEther(unstakeToken.toString()), // user input from onclick shoild be here...
-                    {
-                        from: account,
-                        maxPriorityFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format1, 9).toString()
-                                : null,
-                        maxFeePerGas:
-                            isEIP1559 && chainId === 137
-                                ? ethers.utils.parseUnits(format2, 9).toString()
-                                : null,
-                        gasPrice:
-                            chainId === 137
-                                ? null
-                                : chainId === 80001
-                                ? null
-                                : ethers.utils.parseUnits(format3, 9).toString(),
-                    }
-                );
-                const { confirmations, status } = await fetchTransactionData(data);
-                GFarmingSuccessTransaction("special pool", "unstake", "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionSuccessful,
-                        message: `Successfully unstaked ${unstakeToken} RGP `,
-                    })
-                );
-                // dispatch the getTokenStaked action from here when data changes
-                //  callRefreshFarm(confirmations, status);
-            } catch (error:any) {
-                GFarmingFailedTransaction("special pool", "unstake", error.message, "RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        trxState: TrxState.TransactionFailed,
-                        message: `Transaction was not successful`,
-                    })
-                );
-            }
-        }
-    };
+        const isEIP1559 = await library?.getFeeData();
+
+        const data = await specialPool.stake(
+          ethers.utils.parseEther(depositTokenValue.toString()),
+          {
+            from: account,
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          }
+        );
+        const { confirmations, status } = await fetchTransactionData(data);
+        GFarmingSuccessTransaction("special pool", "staking", "RGP", "v1");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionSuccessful,
+            message: `Successfully staked ${depositTokenValue} RGP `,
+          })
+        );
+        // callRefreshFarm(confirmations, status);
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "stake",
+          error.message,
+          "RGP",
+          "v1"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
+
+  const RGPuseStakeV2 = async () => {
+    if (account) {
+      try {
+        const specialPool = await RGPSpecialPool2(
+          RGPSPECIALPOOLADDRESSES2[chainId as number],
+          library
+        );
+        GFarmingSpecialPoolReferral(
+          referrerAddress === ZERO_ADDRESS ? false : true
+        );
+        const data = await specialPool.stake(
+          ethers.utils.parseEther(depositTokenValue.toString()),
+          referrerAddress,
+          {
+            from: account,
+            gasLimit: 200000,
+            gasPrice: ethers.utils.parseUnits("20", "gwei"),
+          }
+        );
+        await fetchTransactionData(data);
+        GFarmingSuccessTransaction("special pool", "stake", "RGP", "v2");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionSuccessful,
+            message: `Successfully staked ${depositTokenValue} RGP `,
+          })
+        );
+        // callRefreshFarm(confirmations, status);
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "stake",
+          error.message,
+          "RGP",
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
+
+  // withdrawal of funds
+  const RGPUnstake = async () => {
+    if (account) {
+      try {
+        const specialPool = await RGPSpecialPool(
+          RGPSPECIALPOOLADDRESSES[chainId as number],
+          library
+        );
+        const { format1, format2, format3 } = await calculateGas(
+          userGasPricePercentage,
+          library,
+          chainId as number
+        );
 
-    const LPApproval = async (contract: any,deposit:string) => {
-        if (account) {
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `Approving LP token`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                const walletBal = (await contract.balanceOf(account)) ;
-                const data = await contract.approve(
-                    MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                    walletBal,
-                    {
-                        from: account,
-                        // gasLimit: 150000,
-                        // gasPrice: ethers.utils.parseUnits("20", "gwei"),
-                    }
-                );
-                setApprovalLoading(true);
-                const { confirmations, status } = await fetchTransactionData(data);
-                GFarmingSuccessTransaction("farming", "approval", deposit,"v2")
-                if (status) {
-                    setApproveValueForOtherToken(true);
-                    dispatch(
-                        setOpenModal({
-                            trxState: TrxState.TransactionSuccessful,
-                            message: `Successful LP token Approval`,
-                        })
-                    );
-                }
-                getAllowances();
-                setReload(true);
-            } catch (e:any) {
-                // props.showErrorMessage(e);
-                // console.log(e:any);
-                GFarmingFailedTransaction("farming", "approval", e.message, deposit ,"v2")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            } finally {
-                setApprovalLoading(false);
-            }
-        }
-    };
+        const isEIP1559 = await library?.getFeeData();
+        const data = await specialPool.unStake(
+          ethers.utils.parseEther(unstakeToken.toString()), // user input from onclick shoild be here...
+          {
+            from: account,
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          }
+        );
+        const { confirmations, status } = await fetchTransactionData(data);
+        GFarmingSuccessTransaction("special pool", "unstake", "RGP", "v1");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionSuccessful,
+            message: `Successfully unstaked ${unstakeToken} RGP `,
+          })
+        );
+        // dispatch the getTokenStaked action from here when data changes
+        //  callRefreshFarm(confirmations, status);
+      } catch (e: any) {
+        console.log(e);
+        GFarmingFailedTransaction(
+          "special pool",
+          "unstake",
+          e.message,
+          "RGP",
+          "v1"
+        );
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionFailed,
+            message: `Transaction was not successful`,
+          })
+        );
+      }
+    }
+  };
+
+  const RGPUnstakeV2 = async (val: string) => {
+    if (account) {
+      try {
+        const specialPool = await RGPSpecialPool2(
+          RGPSPECIALPOOLADDRESSES2[chainId as number],
+          library
+        );
+        const { format1, format2, format3 } = await calculateGas(
+          userGasPricePercentage,
+          library,
+          chainId as number
+        );
 
-    const approveLPToken = async (LPToken: any) => {
-        switch (content?.type) {
-            case "LP":
-                const poolOne = await smartSwapLPTokenPoolOne(content.address, library);
-                LPApproval(poolOne,content.deposit);
-                break;
+        const isEIP1559 = await library?.getFeeData();
+        const data = await specialPool.unStake(
+          ethers.utils.parseEther(unstakeToken.toString()), // user input from onclick shoild be here...
+          {
+            from: account,
+            maxPriorityFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format1, 9).toString()
+                : null,
+            maxFeePerGas:
+              isEIP1559 && chainId === 137
+                ? ethers.utils.parseUnits(format2, 9).toString()
+                : null,
+            gasPrice:
+              chainId === 137
+                ? null
+                : chainId === 80001
+                ? null
+                : ethers.utils.parseUnits(format3, 9).toString(),
+          }
+        );
+        const { confirmations, status } = await fetchTransactionData(data);
+        GFarmingSuccessTransaction("special pool", "unstake", "RGP", "v2");
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionSuccessful,
+            message: `Successfully unstaked ${unstakeToken} RGP `,
+          })
+        );
+        // dispatch the getTokenStaked action from here when data changes
+        //  callRefreshFarm(confirmations, status);
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "unstake",
+          error.message,
+          "RGP",
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            trxState: TrxState.TransactionFailed,
+            message: `Transaction was not successful`,
+          })
+        );
+      }
+    }
+  };
 
-            default:
-                RGPApproval();
-                break;
+  const LPApproval = async (contract: any, deposit: string) => {
+    if (account) {
+      try {
+        dispatch(
+          setOpenModal({
+            message: `Approving LP token`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
+        const walletBal = await contract.balanceOf(account);
+        const data = await contract.approve(
+          MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+          walletBal,
+          {
+            from: account,
+            // gasLimit: 150000,
+            // gasPrice: ethers.utils.parseUnits("20", "gwei"),
+          }
+        );
+        setApprovalLoading(true);
+        const { confirmations, status } = await fetchTransactionData(data);
+        GFarmingSuccessTransaction("farming", "approval", deposit, "v2");
+        if (status) {
+          setApproveValueForOtherToken(true);
+          dispatch(
+            setOpenModal({
+              trxState: TrxState.TransactionSuccessful,
+              message: `Successful LP token Approval`,
+            })
+          );
         }
-    };
-
+        getAllowances();
+        setReload(true);
+      } catch (e: any) {
+        GFarmingFailedTransaction(
+          "farming",
+          "approval",
+          e.message,
+          deposit,
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      } finally {
+        setApprovalLoading(false);
+      }
+    }
+  };
+
+  const approveLPToken = async (LPToken: any) => {
+    switch (content?.type) {
+      case "LP":
+        const poolOne = await smartSwapLPTokenPoolOne(content.address, library);
+        LPApproval(poolOne, content.deposit);
+        break;
+
+      default:
+        RGPApproval();
+        break;
+    }
+  };
 
-    const RGPApproval = async () => {
-        if (account) {
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `Approving RGP`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                const rgp = await rigelToken(RGP[chainId as number], library);
-                const walletBal = (await rgp.balanceOf(account)) ;
-                const data = await rgp.approve(
-                    MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
-                    walletBal,
-                    {
-                        from: account,
-                        // gasLimit: 150000,
-                        // gasPrice: ethers.utils.parseUnits("20", "gwei"),
-                    }
-                );
-                setApprovalLoading(true);
-                const { confirmations, status } = await fetchTransactionData(data);
-                if (confirmations >= 3) {
-                    setApproveValueForRGP(true);
-                    GFarmingSuccessTransaction("farming", "approval", "RGP","v2")
-                    dispatch(
-                        setOpenModal({
-                            trxState: TrxState.TransactionSuccessful,
-                            message: `Successful RGP Approval`,
-                        })
-                    );
-                }
-                getAllowances();
-                setReload(true);
-            } catch (error:any) {
-                console.error(error);
-                GFarmingFailedTransaction("farming", "approval", error.message ,"RGP","v2")
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
-            setApprovalLoading(false);
+  const RGPApproval = async () => {
+    if (account) {
+      try {
+        dispatch(
+          setOpenModal({
+            message: `Approving RGP`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
+        const rgp = await rigelToken(RGP[chainId as number], library);
+        const walletBal = await rgp.balanceOf(account);
+        const data = await rgp.approve(
+          MASTERCHEFNEWLPADDRESSES[chainId as number][contractID],
+          walletBal,
+          {
+            from: account,
+            // gasLimit: 150000,
+            // gasPrice: ethers.utils.parseUnits("20", "gwei"),
+          }
+        );
+        setApprovalLoading(true);
+        const { confirmations, status } = await fetchTransactionData(data);
+        if (confirmations >= 3) {
+          setApproveValueForRGP(true);
+          GFarmingSuccessTransaction("farming", "approval", "RGP", "v2");
+          dispatch(
+            setOpenModal({
+              trxState: TrxState.TransactionSuccessful,
+              message: `Successful RGP Approval`,
+            })
+          );
         }
-    };
+        getAllowances();
+        setReload(true);
+      } catch (error: any) {
+        console.error(error);
+        GFarmingFailedTransaction(
+          "farming",
+          "approval",
+          error.message,
+          "RGP",
+          "v2"
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+      setApprovalLoading(false);
+    }
+  };
 
-    const [run, setRun] = useState(false);
-    const bgColor2 = useColorModeValue("#319EF6", "#4CAFFF");
+  const [run, setRun] = useState(false);
+  const bgColor2 = useColorModeValue("#319EF6", "#4CAFFF");
 
-    useEffect(() => {
-        const visits = window.localStorage.getItem("firstYieldVisit");
-        const farmVisits = window.localStorage.getItem("firstFarmVisit");
-        if (!visits) {
-            window.localStorage.setItem("firstYieldVisit", "1");
-        }
-        if (!visits && farmVisits !== "2") {
-            setRun(true);
-            window.localStorage.setItem("firstYieldVisit", "1");
-        }
-    }, []);
-
-    const approvalButton = (LPToken: any) => (
-        <Button
-            my='2'
-            mx='auto'
-            color='rgba(190, 190, 190, 1)'
-            width='100%'
-            background='rgba(64, 186, 213, 0.15)'
-            cursor='pointer'
-            border='none'
-            borderRadius='0px'
-            padding='10px'
-            height='50px'
-            fontSize='16px'
-            _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
-            onClick={() => {
-                GButtonIntialized("approval",content.deposit,"v2")
-                approveLPToken(LPToken)}}
-        >
-            {approvalLoading ? "Approving..." : "Approve"} {LPToken}
-        </Button>
-    );
-
-    return (
-        <>
-            {loading ? (
-                <Box p='6' border='1px' borderColor={filterBorderColor}>
-                    <Flex
-                        flexDirection={isMobileDevice ? "column" : "row"}
-                        justifyContent={isMobileDevice ? "center" : "space-between"}
-                        alignItems={isMobileDevice ? "center" : undefined}
+  useEffect(() => {
+    const visits = window.localStorage.getItem("firstYieldVisit");
+    const farmVisits = window.localStorage.getItem("firstFarmVisit");
+    if (!visits) {
+      window.localStorage.setItem("firstYieldVisit", "1");
+    }
+    if (!visits && farmVisits !== "2") {
+      setRun(true);
+      window.localStorage.setItem("firstYieldVisit", "1");
+    }
+  }, []);
+
+  const approvalButton = (LPToken: any) => (
+    <Button
+      my="2"
+      mx="auto"
+      color="rgba(190, 190, 190, 1)"
+      width="100%"
+      background="rgba(64, 186, 213, 0.15)"
+      cursor="pointer"
+      border="none"
+      borderRadius="0px"
+      padding="10px"
+      height="50px"
+      fontSize="16px"
+      _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
+      onClick={() => {
+        GButtonIntialized("approval", content.deposit, "v2");
+        approveLPToken(LPToken);
+      }}
+    >
+      {approvalLoading ? "Approving..." : "Approve"} {LPToken}
+    </Button>
+  );
+
+  return (
+    <>
+      {loading ? (
+        <Box p="6" border="1px" borderColor={filterBorderColor}>
+          <Flex
+            flexDirection={isMobileDevice ? "column" : "row"}
+            justifyContent={isMobileDevice ? "center" : "space-between"}
+            alignItems={isMobileDevice ? "center" : undefined}
+          >
+            <Flex flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+
+              <Flex>
+                <Skeleton mr={2} height="20px" w="100px" />
+                <Skeleton height="20px" w="100px" />
+              </Flex>
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+          </Flex>
+        </Box>
+      ) : (
+        <Skeleton isLoaded={!loadingFarm}>
+          <Joyride
+            steps={steps}
+            run={run}
+            continuous={true}
+            scrollToFirstStep={true}
+            showSkipButton={true}
+            styles={{
+              options: {
+                arrowColor: bgColor2,
+                backgroundColor: bgColor2,
+                textColor: "#FFFFFF",
+                primaryColor: bgColor2,
+              },
+            }}
+          />
+          {Number(content.poolVersion) === 2 ? (
+            <Flex
+              flexDirection={["column", "column", "row"]}
+              color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+              background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
+              padding="0 20px"
+              paddingBottom="4px"
+              border={
+                mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
+              }
+              width="100%"
+            >
+              <Box
+                flexBasis="35%"
+                width="100%"
+                textAlign="right"
+                display="flex"
+                justifyContent="space-around"
+              >
+                <Box>
+                  <Flex
+                    my={2}
+                    justify={{ base: "center", md: "none", lg: "none" }}
+                  >
+                    <Text
+                      color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                      fontSize="20px"
+                      marginRight="10px"
+                      fontWeight="bold"
                     >
-                        <Flex flexDirection='column'>
-                            <Skeleton mt='4' mb={2} height='20px' w='208px' />
-
-                            <Flex>
-                                <Skeleton mr={2} height='20px' w='100px' />
-                                <Skeleton height='20px' w='100px' />
-                            </Flex>
-                        </Flex>
-
-                        <Flex ml={2} flexDirection='column'>
-                            <Skeleton mt='4' mb={2} height='20px' w='208px' />
-                            <Skeleton height='20px' w='208px' />
-                        </Flex>
-
-                        <Flex ml={2} flexDirection='column'>
-                            <Skeleton mt='4' mb={2} height='20px' w='208px' />
-                            <Skeleton height='20px' w='208px' />
+                      <Tooltip
+                        hasArrow
+                        label={content.tokensStaked[1]}
+                        bg="gray.300"
+                        color="black"
+                      >
+                        {parseFloat(content.tokensStaked[1]).toFixed(4)}
+                      </Tooltip>
+                    </Text>
+                    <Text
+                      fontSize="16px"
+                      color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                    >
+                      {content.deposit} Tokens Staked
+                    </Text>
+                  </Flex>
+
+                  <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
+                    <Button
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      disabled={
+                        approveValueForRGP &&
+                        approveValueForOtherToken &&
+                        parseFloat(content.tokensStaked[1]) <= 0
+                      }
+                      padding="10px 40px"
+                      cursor="pointer"
+                      onClick={() => {
+                        setApprove(content.deposit);
+                      }}
+                      className={
+                        approveValueForRGP && approveValueForOtherToken
+                          ? "unstake"
+                          : "approve"
+                      }
+                    >
+                      {approveValueForRGP && approveValueForOtherToken
+                        ? "Unstake"
+                        : "Approve"}
+                    </Button>
+                    <Button
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
+                      bg={
+                        mode === DARK_THEME && !approveValueForRGP
+                          ? "#319EF6"
+                          : "#4A739B"
+                      }
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      padding="10px 40px"
+                      cursor="pointer"
+                      disabled={
+                        !approveValueForRGP || !approveValueForOtherToken
+                      }
+                      onClick={openDepositeModal}
+                      className={"deposit"}
+                    >
+                      Deposit
+                    </Button>
+                  </Flex>
+                </Box>
+                <Box
+                  mx={1}
+                  my={3}
+                  display={{ base: "none", md: "block", lg: "block" }}
+                >
+                  <Divider orientation="vertical" height="84px" />
+                </Box>
+              </Box>
+              {/* margin={['0', '0', '0 20px']} */}
+              <Box
+                flexBasis="35%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
+              >
+                {isMobileDevice ? (
+                  <Box width="60%" margin="0 auto">
+                    <Flex my={2}>
+                      <Text
+                        fontSize="20px"
+                        color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
+                      >
+                        {content.RGPEarned}
+                      </Text>{" "}
+                      <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
+                        RGP Earned
+                      </Text>
+                    </Flex>
+                    <Button
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
+                      _hover={{ color: "white" }}
+                      disabled={parseFloat(content.RGPEarned) <= 0}
+                      onClick={() => {
+                        harvestTokens(
+                          content.deposit === "RGP" ? content.pId : content.id
+                        );
+                      }}
+                      className={"harvest"}
+                    >
+                      Harvest
+                    </Button>
+                  </Box>
+                ) : (
+                  <Box margin="0 auto">
+                    <Flex my={2}>
+                      <Text
+                        fontSize="20px"
+                        color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
+                      >
+                        {content.RGPEarned}
+                      </Text>{" "}
+                      <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
+                        RGP Earned
+                      </Text>
+                    </Flex>
+                    <Button
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
+                      _hover={{ color: "white" }}
+                      disabled={parseFloat(content.RGPEarned) <= 0}
+                      onClick={() => {
+                        harvestTokens(
+                          content.deposit === "RGP" ? content.pId : content.id
+                        );
+                      }}
+                      className={"harvest"}
+                    >
+                      Harvest
+                    </Button>
+                  </Box>
+                )}
+                <Box
+                  my={3}
+                  display={{ base: "none", md: "block", lg: "block" }}
+                  mx={1}
+                >
+                  <Divider orientation="vertical" height="84px" />
+                </Box>
+              </Box>
+
+              <Box
+                flexBasis="30%"
+                width="100%"
+                margin={["0", "0", "0 20px"]}
+                justifySelf="end"
+              >
+                <Flex flexDirection="column" alignItems={{ base: "center" }}>
+                  <Flex mb="5px">
+                    <Text marginTop="15px">Auto-Harvest</Text>
+                    <Circle
+                      size="20px"
+                      bg="#fff"
+                      display="inline-flex"
+                      marginLeft="10px"
+                      marginTop="17px"
+                      marginRight="10px"
+                    >
+                      <Tooltip
+                        label="Coming soon"
+                        fontSize="md"
+                        marginTop="15px"
+                      >
+                        <QuestionOutlineIcon color="#120136" cursor="pointer" />
+                      </Tooltip>
+                    </Circle>
+                  </Flex>
+                  <Flex>
+                    <Switch
+                      disabled
+                      onChange={handleChecked}
+                      checked={!checked}
+                      className="react-switch"
+                    />
+                  </Flex>
+                </Flex>
+              </Box>
+            </Flex>
+          ) : (
+            <Flex
+              flexDirection={["column", "column", "row"]}
+              color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+              background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
+              padding="0 20px"
+              paddingBottom="4px"
+              border={
+                mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
+              }
+              width="100%"
+            >
+              <Box
+                flexBasis="35%"
+                width="100%"
+                textAlign="right"
+                display="flex"
+                justifyContent="space-around"
+              >
+                <Box>
+                  <Flex
+                    my={2}
+                    justify={{ base: "center", md: "none", lg: "none" }}
+                  >
+                    <Text
+                      color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                      fontSize="20px"
+                      marginRight="10px"
+                      fontWeight="bold"
+                    >
+                      <Tooltip
+                        hasArrow
+                        label={
+                          content?.type !== "RGP"
+                            ? content?.tokenStaked[1]
+                            : content.tokensStaked[1]
+                        }
+                        bg="gray.300"
+                        color="black"
+                      >
+                        {parseFloat(
+                          content.type !== "RGP"
+                            ? content?.tokenStaked[1]
+                            : content.tokensStaked[1]
+                        ).toFixed(4)}
+                      </Tooltip>
+                    </Text>
+                    <Text
+                      fontSize="16px"
+                      color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                    >
+                      {content.deposit} Tokens Staked
+                    </Text>
+                  </Flex>
+                  <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
+                    <Button
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      disabled={
+                        approveValueForRGP &&
+                        approveValueForOtherToken &&
+                        parseFloat(
+                          content.type !== "RGP"
+                            ? content.tokenStaked[1]
+                            : content.tokensStaked[1]
+                        ) <= 0
+                      }
+                      padding="10px 40px"
+                      cursor="pointer"
+                      onClick={() => setApprove(content.deposit)}
+                      className={
+                        approveValueForRGP && approveValueForOtherToken
+                          ? "unstake"
+                          : "approve"
+                      }
+                    >
+                      {approveValueForRGP && approveValueForOtherToken
+                        ? "Unstake"
+                        : "Approve"}
+                    </Button>
+                    <Button
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
+                      bg={
+                        mode === DARK_THEME && !approveValueForRGP
+                          ? "#319EF6"
+                          : "#4A739B"
+                      }
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      padding="10px 40px"
+                      cursor="pointer"
+                      disabled={
+                        !approveValueForRGP || !approveValueForOtherToken
+                      }
+                      onClick={openDepositeModal}
+                      className={"deposit"}
+                    >
+                      Deposit
+                    </Button>
+                  </Flex>
+                </Box>
+                <Box
+                  mx={1}
+                  my={3}
+                  display={{ base: "none", md: "block", lg: "block" }}
+                >
+                  <Divider orientation="vertical" height="84px" />
+                </Box>
+              </Box>
+              {/* margin={['0', '0', '0 20px']} */}
+              <Box
+                flexBasis="30%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
+              >
+                {isMobileDevice ? (
+                  <Box width="60%" margin="0 auto">
+                    <Flex my={2}>
+                      <Text
+                        fontSize="20px"
+                        color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
+                      >
+                        {content.RGPEarned}
+                      </Text>{" "}
+                      <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
+                        RGP Earned
+                      </Text>
+                    </Flex>
+                    <Button
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
+                      _hover={{ color: "white" }}
+                      disabled={parseFloat(content.RGPEarned) <= 0}
+                      onClick={() => {
+                        harvestTokens(
+                          content.deposit === "RGP" ? content.pId : content.id
+                        );
+                      }}
+                      className={"harvest"}
+                    >
+                      Harvest
+                    </Button>
+                  </Box>
+                ) : (
+                  <Box margin="0 auto">
+                    <Flex my={2}>
+                      <Text
+                        fontSize="20px"
+                        color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
+                      >
+                        {content.RGPEarned}
+                      </Text>{" "}
+                      <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
+                        RGP Earned
+                      </Text>
+                    </Flex>
+                    <Button
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
+                      _hover={{ color: "white" }}
+                      disabled={parseFloat(content.RGPEarned) <= 0}
+                      onClick={() => {
+                        harvestTokens(
+                          content.deposit === "RGP" ? content.pId : content.id
+                        );
+                      }}
+                      className={"harvest"}
+                    >
+                      Harvest
+                    </Button>
+                  </Box>
+                )}
+                <Box
+                  my={3}
+                  display={{ base: "none", md: "block", lg: "block" }}
+                  mx={1}
+                >
+                  <Divider orientation="vertical" height="84px" />
+                </Box>
+              </Box>
+
+              <Box
+                flexBasis="20%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
+              >
+                <Flex flexDirection={"column"} alignItems={"center"}>
+                  <Box>
+                    {
+                      <Flex marginTop="10px" alignItems={"center"}>
+                        <Text fontSize="16px" fontWeight="bold">
+                          {FarmingFeeLoading ? (
+                            <Spinner speed="0.65s" color="#999999" />
+                          ) : (
+                            <Text>
+                              {farmingFee} {" RGP"}
+                            </Text>
+                          )}
+                        </Text>
+                        <Flex flexDirection={["column", "column", "column"]}>
+                          <Text
+                            fontSize="16px"
+                            color={mode === DARK_THEME ? "#999999" : "#999999"}
+                            marginLeft="20px"
+                          >
+                            Farm Fee
+                          </Text>
                         </Flex>
+                      </Flex>
+                    }
+                  </Box>
 
-                        <Flex ml={2} flexDirection='column'>
-                            <Skeleton mt='4' mb={2} height='20px' w='208px' />
-                            <Skeleton height='20px' w='208px' />
+                  <Box>
+                    {
+                      <Flex marginTop="10px" alignItems={"center"}>
+                        <Text fontSize="16px" fontWeight="bold">
+                          {FarmingFeeLoading ? (
+                            <Spinner speed="0.65s" color="#999999" />
+                          ) : (
+                            <Text>
+                              {devpercent} {" %"}
+                            </Text>
+                          )}
+                        </Text>
+                        <Flex flexDirection={["column", "column", "column"]}>
+                          <Text
+                            fontSize="16px"
+                            color={mode === DARK_THEME ? "#999999" : "#999999"}
+                            marginLeft="20px"
+                          >
+                            LP Fee
+                          </Text>
                         </Flex>
-                    </Flex>
+                      </Flex>
+                    }
+                  </Box>
+                </Flex>
+                <Box
+                  my={3}
+                  mx={1}
+                  display={{ base: "none", md: "block", lg: "block" }}
+                >
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
-            ) : (
-                <Skeleton isLoaded={ !loadingFarm}>
-                    <Joyride
-                        steps={steps}
-                        run={run}
-                        continuous={true}
-                        scrollToFirstStep={true}
-                        showSkipButton={true}
-                        styles={{
-                            options: {
-                                arrowColor: bgColor2,
-                                backgroundColor: bgColor2,
-                                textColor: "#FFFFFF",
-                                primaryColor: bgColor2,
-                            },
-                        }}
+              </Box>
+              <Box
+                flexBasis="15%"
+                width="100%"
+                margin={["0", "0", "0 20px"]}
+                justifySelf="end"
+              >
+                <Flex flexDirection="column" alignItems={{ base: "center" }}>
+                  <Flex mb="5px">
+                    <Text marginTop="15px">Auto-Harvest</Text>
+                    <Circle
+                      size="20px"
+                      bg="#fff"
+                      display="inline-flex"
+                      marginLeft="10px"
+                      marginTop="17px"
+                      marginRight="10px"
+                    >
+                      <Tooltip
+                        label="Coming soon"
+                        fontSize="md"
+                        marginTop="15px"
+                      >
+                        <QuestionOutlineIcon color="#120136" cursor="pointer" />
+                      </Tooltip>
+                    </Circle>
+                  </Flex>
+                  <Flex>
+                    <Switch
+                      disabled
+                      onChange={handleChecked}
+                      checked={!checked}
+                      className="react-switch"
                     />
-                    {Number(content.poolVersion) === 2 ? (
-                        <Flex
-                            flexDirection={["column", "column", "row"]}
-                            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                            background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
-                            padding='0 20px'
-                            paddingBottom='4px'
-                            border={
-                                mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
-                            }
-                            width='100%'
+                  </Flex>
+                </Flex>
+              </Box>
+            </Flex>
+          )}
+
+          {Number(content.poolVersion) === 2 ? (
+            <Modal
+              isOpen={modal1Disclosure.isOpen}
+              onClose={closeDepositeModal}
+              isCentered
+            >
+              <ModalOverlay />
+              <ModalContent
+                width="95vw"
+                borderRadius="6px"
+                paddingBottom="20px"
+                bgColor={bgColor}
+                minHeight="40vh"
+              >
+                <ModalHeader
+                  fontSize="20px"
+                  fontWeight="regular"
+                  color={modalTextColor}
+                >
+                  Deposit
+                </ModalHeader>
+
+                <ModalCloseButton
+                  bg="none"
+                  size={"sm"}
+                  mt={3}
+                  mr={3}
+                  cursor="pointer"
+                  _focus={{ outline: "none" }}
+                  p={"7px"}
+                  border={"1px solid"}
+                />
+                <ModalBody py={2}>
+                  <Text
+                    color={modalTextColor}
+                    mb={3}
+                    fontSize="14px"
+                    fontWeight="regular"
+                  >
+                    Enter Amount
+                  </Text>
+                  <InputGroup size="md">
+                    <Input
+                      placeholder="Enter RGP amount to stake"
+                      opacity="0.5"
+                      h="50px"
+                      borderRadius="6px"
+                      name="availableToken"
+                      value={depositTokenValue}
+                      onChange={(e) => setDepositTokenValue(e.target.value)}
+                      border="2px"
+                    />
+                    <InputRightElement marginRight="15px">
+                      <Button
+                        color="rgba(64, 186, 213, 1)"
+                        border="none"
+                        borderRadius="0px"
+                        fontSize="13px"
+                        p="1"
+                        mt="10px"
+                        height="20px"
+                        cursor="pointer"
+                        background="none"
+                        _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
+                        onClick={() => showMaxValue(content.deposit, "deposit")}
+                      >
+                        MAX
+                      </Button>
+                    </InputRightElement>
+                  </InputGroup>
+                  <Text color={modalTextColor2} fontSize="14px" mb={5} mt={3}>
+                    RGP Available: {content.availableToken} {content.deposit}
+                  </Text>
+                  <Box display={showReferrerField ? "block" : "none"}>
+                    <Text color={modalTextColor} fontSize="14px" mb={3}>
+                      Referrer address
+                    </Text>
+                    <InputGroup size="md">
+                      <Input
+                        placeholder="Enter referrer's address here"
+                        opacity="0.5"
+                        h="50px"
+                        borderRadius="6px"
+                        name="referralDetail"
+                        border="2px"
+                        disabled={URLReferrerAddress !== ""}
+                        value={referrerAddress}
+                        onChange={(e) => setReferrerAddress(e.target.value)}
+                      />
+                    </InputGroup>
+                  </Box>
+                  <Checkbox
+                    mt={3}
+                    onChange={handleSetReferralField}
+                    isChecked={isReferrerCheck}
+                    isDisabled={URLReferrerAddress !== ""}
+                  >
+                    No Referrer?
+                  </Checkbox>
+                  <Box mt={4}>
+                    {depositInputHasError || refAddressHasError ? (
+                      <>
+                        {/* Show Error Button */}
+                        <Button
+                          my="2"
+                          variant="brand"
+                          mx="auto"
+                          color={
+                            depositValue === "Confirm" ||
+                            depositValue === "Confirmed"
+                              ? "rgba(190, 190, 190, 1)"
+                              : "#40BAD5"
+                          }
+                          width="100%"
+                          background={
+                            depositValue === "Confirm" ||
+                            depositValue === "Confirmed"
+                              ? "rgba(64, 186, 213, 0.15)"
+                              : "#444159"
+                          }
+                          disabled={
+                            depositValue !== "Confirm" ||
+                            !account ||
+                            !depositTokenValue ||
+                            (setShowReferrerField && referrerAddress === "")
+                          }
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
+                          _hover={
+                            depositValue === "Confirm" ||
+                            depositValue === "Confirmed"
+                              ? { background: "rgba(64, 186, 213, 0.15)" }
+                              : { background: "#444159" }
+                          }
+                          onClick={() => {}}
                         >
-                            <Box
-                                flexBasis='35%'
-                                width='100%'
-                                textAlign='right'
-                                display='flex'
-                                justifyContent='space-around'
-                            >
-                                <Box>
-                                    <Flex
-                                        my={2}
-                                        justify={{ base: "center", md: "none", lg: "none" }}
-                                    >
-                                        <Text
-                                            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                            fontSize='20px'
-                                            marginRight='10px'
-                                            fontWeight='bold'
-                                        >
-                                            <Tooltip
-                                                hasArrow
-                                                label={content.tokensStaked[1]}
-                                                bg='gray.300'
-                                                color='black'
-                                            >
-                                                {parseFloat(content.tokensStaked[1]).toFixed(4)}
-                                            </Tooltip>
-                                        </Text>
-                                        <Text
-                                            fontSize='16px'
-                                            color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
-                                        >
-                                            {content.deposit} Tokens Staked
-                                        </Text>
-                                    </Flex>
-
-                                    <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
-                                        <Button
-                                            w='45%'
-                                            h='40px'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='6'
-                                            disabled={
-                                                approveValueForRGP &&
-                                                approveValueForOtherToken &&
-                                                parseFloat(content.tokensStaked[1]) <= 0
-                                            }
-                                            padding='10px 40px'
-                                            cursor='pointer'
-                                            onClick={() => {
-                                                setApprove(content.deposit)}}
-                                            className={
-                                                approveValueForRGP && approveValueForOtherToken
-                                                    ? "unstake"
-                                                    : "approve"
-                                            }
-                                        >
-                                            {approveValueForRGP && approveValueForOtherToken
-                                                ? "Unstake"
-                                                : "Approve"}
-                                        </Button>
-                                        <Button
-                                            w='45%'
-                                            h='40px'
-                                            borderRadius='6px'
-                                            bg={
-                                                mode === DARK_THEME && !approveValueForRGP
-                                                    ? "#319EF6"
-                                                    : "#4A739B"
-                                            }
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='6'
-                                            padding='10px 40px'
-                                            cursor='pointer'
-                                            disabled={
-                                                !approveValueForRGP || !approveValueForOtherToken
-                                            }
-                                            onClick={openDepositeModal}
-                                            className={"deposit"}
-                                        >
-                                            Deposit
-                                        </Button>
-                                    </Flex>
-                                </Box>
-                                <Box
-                                    mx={1}
-                                    my={3}
-                                    display={{ base: "none", md: "block", lg: "block" }}
-                                >
-                                    <Divider orientation='vertical' height='84px' />
-                                </Box>
-                            </Box>
-                            {/* margin={['0', '0', '0 20px']} */}
-                            <Box
-                                flexBasis='35%'
-                                width='100%'
-                                display='flex'
-                                justifyContent='space-around'
-                            >
-                                {isMobileDevice ? (
-                                    <Box width='60%' margin='0 auto'>
-                                        <Flex my={2}>
-                                            <Text
-                                                fontSize='20px'
-                                                color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                                marginRight='10px'
-                                                textAlign='center'
-                                                fontWeight='bold'
-                                            >
-                                                {content.RGPEarned}
-                                            </Text>{" "}
-                                            <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
-                                                RGP Earned
-                                            </Text>
-                                        </Flex>
-                                        <Button
-                                            w='95%'
-                                            h='40px'
-                                            margin='0 auto'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='2'
-                                            cursor='pointer'
-                                            _hover={{ color: "white" }}
-                                            disabled={parseFloat(content.RGPEarned) <= 0}
-                                            onClick={() => {
-                                                harvestTokens(
-                                                    content.deposit === "RGP" ? content.pId : content.id
-                                                );
-                                            }}
-                                            className={"harvest"}
-                                        >
-                                            Harvest
-                                        </Button>
-                                    </Box>
-                                ) : (
-                                    <Box margin='0 auto'>
-                                        <Flex my={2}>
-                                            <Text
-                                                fontSize='20px'
-                                                color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                                marginRight='10px'
-                                                textAlign='center'
-                                                fontWeight='bold'
-                                            >
-                                                {content.RGPEarned}
-                                            </Text>{" "}
-                                            <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
-                                                RGP Earned
-                                            </Text>
-                                        </Flex>
-                                        <Button
-                                            w='95%'
-                                            h='40px'
-                                            margin='0 auto'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='2'
-                                            cursor='pointer'
-                                            _hover={{ color: "white" }}
-                                            disabled={parseFloat(content.RGPEarned) <= 0}
-                                            onClick={() => {
-                                                harvestTokens(
-                                                    content.deposit === "RGP" ? content.pId : content.id
-                                                );
-                                            }}
-                                            className={"harvest"}
-                                        >
-                                            Harvest
-                                        </Button>
-                                    </Box>
-                                )}
-                                <Box
-                                    my={3}
-                                    display={{ base: "none", md: "block", lg: "block" }}
-                                    mx={1}
-                                >
-                                    <Divider orientation='vertical' height='84px' />
-                                </Box>
-                            </Box>
-
-                            <Box
-                                flexBasis='30%'
-                                width='100%'
-                                margin={["0", "0", "0 20px"]}
-                                justifySelf='end'
-                            >
-                                <Flex flexDirection='column' alignItems={{ base: "center" }}>
-                                    <Flex mb='5px'>
-                                        <Text marginTop='15px'>Auto-Harvest</Text>
-                                        <Circle
-                                            size='20px'
-                                            bg='#fff'
-                                            display='inline-flex'
-                                            marginLeft='10px'
-                                            marginTop='17px'
-                                            marginRight='10px'
-                                        >
-                                            <Tooltip
-                                                label='Coming soon'
-                                                fontSize='md'
-                                                marginTop='15px'
-                                            >
-                                                <QuestionOutlineIcon color='#120136' cursor='pointer' />
-                                            </Tooltip>
-                                        </Circle>
-                                    </Flex>
-                                    <Flex>
-                                        <Switch
-                                            disabled
-                                            onChange={handleChecked}
-                                            checked={!checked}
-                                            className='react-switch'
-                                        />
-                                    </Flex>
-                                </Flex>
-                            </Box>
-                        </Flex>
+                          {depositErrorButtonText}
+                        </Button>
+                      </>
                     ) : (
-                        <Flex
-                            flexDirection={["column", "column", "row"]}
-                            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                            background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
-                            padding='0 20px'
-                            paddingBottom='4px'
-                            border={
-                                mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
+                      <>
+                        {enoughApproval ? (
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={
+                              depositValue !== "Confirm" ||
+                              !account ||
+                              !depositTokenValue ||
+                              (showReferrerField && referrerAddress === "")
                             }
-                            width='100%'
-                        >
-                            <Box
-                                flexBasis='35%'
-                                width='100%'
-                                textAlign='right'
-                                display='flex'
-                                justifyContent='space-around'
-                            >
-                                <Box>
-                                    <Flex
-                                        my={2}
-                                        justify={{ base: "center", md: "none", lg: "none" }}
-                                    >
-                                        <Text
-                                            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                            fontSize='20px'
-                                            marginRight='10px'
-                                            fontWeight='bold'
-                                        >
-                                            <Tooltip
-                                                hasArrow
-                                                label={
-                                                    content?.type !== "RGP"
-                                                        ? content?.tokenStaked[1]
-                                                        : content.tokensStaked[1]
-                                                }
-                                                bg='gray.300'
-                                                color='black'
-                                            >
-                                                {parseFloat(
-                                                    content.type !== "RGP"
-                                                        ? content?.tokenStaked[1]
-                                                        : content.tokensStaked[1]
-                                                ).toFixed(4)}
-                                            </Tooltip>
-                                        </Text>
-                                        <Text
-                                            fontSize='16px'
-                                            color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
-                                        >
-                                            {content.deposit} Tokens Staked
-                                        </Text>
-                                    </Flex>
-                                    <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
-                                        <Button
-                                            w='45%'
-                                            h='40px'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='6'
-                                            disabled={
-                                                approveValueForRGP &&
-                                                approveValueForOtherToken &&
-                                                parseFloat(
-                                                    content.type !== "RGP"
-                                                        ? content.tokenStaked[1]
-                                                        : content.tokensStaked[1]
-                                                ) <= 0
-                                            }
-                                            padding='10px 40px'
-                                            cursor='pointer'
-                                            onClick={() => setApprove(content.deposit)}
-                                            className={
-                                                approveValueForRGP && approveValueForOtherToken
-                                                    ? "unstake"
-                                                    : "approve"
-                                            }
-                                        >
-                                            {approveValueForRGP && approveValueForOtherToken
-                                                ? "Unstake"
-                                                : "Approve"}
-                                        </Button>
-                                        <Button
-                                            w='45%'
-                                            h='40px'
-                                            borderRadius='6px'
-                                            bg={
-                                                mode === DARK_THEME && !approveValueForRGP
-                                                    ? "#319EF6"
-                                                    : "#4A739B"
-                                            }
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='6'
-                                            padding='10px 40px'
-                                            cursor='pointer'
-                                            disabled={
-                                                !approveValueForRGP || !approveValueForOtherToken
-                                            }
-                                            onClick={openDepositeModal}
-                                            className={"deposit"}
-                                        >
-                                            Deposit
-                                        </Button>
-                                    </Flex>
-                                </Box>
-                                <Box
-                                    mx={1}
-                                    my={3}
-                                    display={{ base: "none", md: "block", lg: "block" }}
-                                >
-                                    <Divider orientation='vertical' height='84px' />
-                                </Box>
-                            </Box>
-                            {/* margin={['0', '0', '0 20px']} */}
-                            <Box
-                                flexBasis='30%'
-                                width='100%'
-                                display='flex'
-                                justifyContent='space-around'
-                            >
-                                {isMobileDevice ? (
-                                    <Box width='60%' margin='0 auto'>
-                                        <Flex my={2}>
-                                            <Text
-                                                fontSize='20px'
-                                                color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                                marginRight='10px'
-                                                textAlign='center'
-                                                fontWeight='bold'
-                                            >
-                                                {content.RGPEarned}
-                                            </Text>{" "}
-                                            <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
-                                                RGP Earned
-                                            </Text>
-                                        </Flex>
-                                        <Button
-                                            w='95%'
-                                            h='40px'
-                                            margin='0 auto'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='2'
-                                            cursor='pointer'
-                                            _hover={{ color: "white" }}
-                                            disabled={parseFloat(content.RGPEarned) <= 0}
-                                            onClick={() => {
-                                                harvestTokens(
-                                                    content.deposit === "RGP" ? content.pId : content.id
-                                                );
-                                            }}
-                                            className={"harvest"}
-                                        >
-                                            Harvest
-                                        </Button>
-                                    </Box>
-                                ) : (
-                                    <Box margin='0 auto'>
-                                        <Flex my={2}>
-                                            <Text
-                                                fontSize='20px'
-                                                color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                                                marginRight='10px'
-                                                textAlign='center'
-                                                fontWeight='bold'
-                                            >
-                                                {content.RGPEarned}
-                                            </Text>{" "}
-                                            <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}>
-                                                RGP Earned
-                                            </Text>
-                                        </Flex>
-                                        <Button
-                                            w='95%'
-                                            h='40px'
-                                            margin='0 auto'
-                                            borderRadius='6px'
-                                            bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
-                                            color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                                            border='0'
-                                            mb='4'
-                                            mr='2'
-                                            cursor='pointer'
-                                            _hover={{ color: "white" }}
-                                            disabled={parseFloat(content.RGPEarned) <= 0}
-                                            onClick={() => {
-                                                harvestTokens(
-                                                    content.deposit === "RGP" ? content.pId : content.id
-                                                );
-                                            }}
-                                            className={"harvest"}
-                                        >
-                                            Harvest
-                                        </Button>
-                                    </Box>
-                                )}
-                                <Box
-                                    my={3}
-                                    display={{ base: "none", md: "block", lg: "block" }}
-                                    mx={1}
-                                >
-                                    <Divider orientation='vertical' height='84px' />
-                                </Box>
-                            </Box>
-
-                            <Box
-                                flexBasis='20%'
-                                width='100%'
-                                display='flex'
-                                justifyContent='space-around'
-                            >
-                                <Flex flexDirection={'column'} alignItems={'center'}>
-                                    <Box>
-                                        {
-                                            <Flex marginTop='10px' alignItems={'center'}>
-                                                <Text fontSize='16px' fontWeight='bold'>
-                                                    {FarmingFeeLoading ? (
-                                                        <Spinner speed='0.65s' color='#999999' />
-                                                    ) : (
-                                                        <Text>{farmingFee} {' RGP'}</Text>
-                                                    )}
-                                                </Text>
-                                                <Flex flexDirection={["column", "column", "column"]}>
-                                                    <Text
-                                                        fontSize='16px'
-                                                        color={mode === DARK_THEME ? "#999999" : "#999999"}
-                                                        marginLeft='20px'
-                                                    >
-                                                        Farm Fee
-                                                    </Text>
-                                                </Flex>
-                                            </Flex>
-                                        }
-                                    </Box>
-
-                                    <Box>
-                                        {
-                                            <Flex marginTop='10px' alignItems={'center'}>
-                                                <Text fontSize='16px' fontWeight='bold'>
-                                                    {FarmingFeeLoading ? (
-                                                        <Spinner speed='0.65s' color='#999999' />
-                                                    ) : (
-                                                        <Text>{devpercent} {' %'}</Text>
-                                                    )}
-                                                </Text>
-                                                <Flex flexDirection={["column", "column", "column"]}>
-                                                    <Text
-                                                        fontSize='16px'
-                                                        color={mode === DARK_THEME ? "#999999" : "#999999"}
-                                                        marginLeft='20px'
-                                                    >
-                                                        LP Fee
-                                                    </Text>
-                                                </Flex>
-                                            </Flex>
-                                        }
-                                    </Box>
-
-
-                                </Flex>
-                                <Box
-                                    my={3}
-                                    mx={1}
-                                    display={{ base: "none", md: "block", lg: "block" }}
-                                >
-                                    <Divider orientation='vertical' height='84px' />
-                                </Box>
-                            </Box>
-                            <Box
-                                flexBasis='15%'
-                                width='100%'
-                                margin={["0", "0", "0 20px"]}
-                                justifySelf='end'
-                            >
-                                <Flex flexDirection='column' alignItems={{ base: "center" }}>
-                                    <Flex mb='5px'>
-                                        <Text marginTop='15px'>Auto-Harvest</Text>
-                                        <Circle
-                                            size='20px'
-                                            bg='#fff'
-                                            display='inline-flex'
-                                            marginLeft='10px'
-                                            marginTop='17px'
-                                            marginRight='10px'
-                                        >
-                                            <Tooltip
-                                                label='Coming soon'
-                                                fontSize='md'
-                                                marginTop='15px'
-                                            >
-                                                <QuestionOutlineIcon color='#120136' cursor='pointer' />
-                                            </Tooltip>
-                                        </Circle>
-                                    </Flex>
-                                    <Flex>
-                                        <Switch
-                                            disabled
-                                            onChange={handleChecked}
-                                            checked={!checked}
-                                            className='react-switch'
-                                        />
-                                    </Flex>
-                                </Flex>
-                            </Box>
-                        </Flex>
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                            _hover={
+                              depositValue === "Confirm"
+                                ? { background: "rgba(64, 186, 213, 0.15)" }
+                                : { background: "#444159" }
+                            }
+                            onClick={() => confirmDeposit(content.deposit)}
+                          >
+                            {depositValue}
+                          </Button>
+                        ) : !depositTokenValue ? (
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={true}
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                          >
+                            Enter Amount
+                          </Button>
+                        ) : (
+                          approvalButton(content.deposit)
+                        )}
+                      </>
                     )}
-
-                    {Number(content.poolVersion) === 2 ? (
-                        <Modal
-                            isOpen={modal1Disclosure.isOpen}
-                            onClose={closeDepositeModal}
-                            isCentered
+                  </Box>
+                </ModalBody>
+              </ModalContent>
+            </Modal>
+          ) : (
+            <Modal
+              isOpen={modal1Disclosure.isOpen}
+              onClose={closeDepositeModal}
+              isCentered
+            >
+              <ModalOverlay />
+              <ModalContent
+                width="95vw"
+                borderRadius="6px"
+                paddingBottom="20px"
+                bgColor={bgColor}
+                minHeight="40vh"
+              >
+                <ModalHeader
+                  fontSize="18px"
+                  fontWeight="regular"
+                  align="center"
+                >
+                  Deposit {content.deposit} Tokens
+                </ModalHeader>
+
+                <ModalCloseButton
+                  bg="none"
+                  size={"sm"}
+                  mt={3}
+                  mr={3}
+                  cursor="pointer"
+                  _focus={{ outline: "none" }}
+                  p={"7px"}
+                  border={"1px solid"}
+                />
+                <ModalBody py={2}>
+                  <Text color="gray.400" align="right" mb={3}>
+                    {content.availableToken} {content.deposit} Available
+                  </Text>
+                  <InputGroup size="md">
+                    <Input
+                      placeholder="0"
+                      opacity="0.5"
+                      h="50px"
+                      borderRadius="0px"
+                      name="availableToken"
+                      value={depositTokenValue}
+                      onChange={(e) => setDepositTokenValue(e.target.value)}
+                      border="2px"
+                    />
+                    <InputRightElement marginRight="15px">
+                      <Button
+                        color="rgba(64, 186, 213, 1)"
+                        border="none"
+                        borderRadius="0px"
+                        fontSize="13px"
+                        p="1"
+                        mt="10px"
+                        height="20px"
+                        cursor="pointer"
+                        _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
+                        onClick={() => showMaxValue(content.deposit, "deposit")}
+                      >
+                        MAX
+                      </Button>
+                    </InputRightElement>
+                  </InputGroup>
+                  <Box mt={4}>
+                    {depositInputHasError ? (
+                      <>
+                        {/* Show Error Button */}
+                        <Button
+                          my="2"
+                          variant="brand"
+                          mx="auto"
+                          color={
+                            depositValue === "Confirm" ||
+                            depositValue === "Confirmed"
+                              ? "rgba(190, 190, 190, 1)"
+                              : "#40BAD5"
+                          }
+                          width="100%"
+                          background={
+                            depositValue === "Confirm" ||
+                            depositValue === "Confirmed"
+                              ? "rgba(64, 186, 213, 0.15)"
+                              : "#444159"
+                          }
+                          disabled={depositValue !== "Confirm" || !account}
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
+                          _hover={
+                            depositValue === "Confirm"
+                              ? { background: "rgba(64, 186, 213, 0.15)" }
+                              : { background: "#444159" }
+                          }
+                          onClick={() => {}}
                         >
-                            <ModalOverlay />
-                            <ModalContent
-                                width='95vw'
-                                borderRadius='6px'
-                                paddingBottom='20px'
-                                bgColor={bgColor}
-                                minHeight='40vh'
-                            >
-                                <ModalHeader
-                                    fontSize='20px'
-                                    fontWeight='regular'
-                                    color={modalTextColor}
-                                >
-                                    Deposit
-                                </ModalHeader>
-
-                                <ModalCloseButton
-                                    bg='none'
-                                    size={"sm"}
-                                    mt={3}
-                                    mr={3}
-                                    cursor='pointer'
-                                    _focus={{ outline: "none" }}
-                                    p={"7px"}
-                                    border={"1px solid"}
-                                />
-                                <ModalBody py={2}>
-                                    <Text
-                                        color={modalTextColor}
-                                        mb={3}
-                                        fontSize='14px'
-                                        fontWeight='regular'
-                                    >
-                                        Enter Amount
-                                    </Text>
-                                    <InputGroup size='md'>
-                                        <Input
-                                            placeholder='Enter RGP amount to stake'
-                                            opacity='0.5'
-                                            h='50px'
-                                            borderRadius='6px'
-                                            name='availableToken'
-                                            value={depositTokenValue}
-                                            onChange={(e) => setDepositTokenValue(e.target.value)}
-                                            border='2px'
-                                        />
-                                        <InputRightElement marginRight='15px'>
-                                            <Button
-                                                color='rgba(64, 186, 213, 1)'
-                                                border='none'
-                                                borderRadius='0px'
-                                                fontSize='13px'
-                                                p='1'
-                                                mt='10px'
-                                                height='20px'
-                                                cursor='pointer'
-                                                background='none'
-                                                _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
-                                                onClick={() => showMaxValue(content.deposit, "deposit")}
-                                            >
-                                                MAX
-                                            </Button>
-                                        </InputRightElement>
-                                    </InputGroup>
-                                    <Text color={modalTextColor2} fontSize='14px' mb={5} mt={3}>
-                                        RGP Available: {content.availableToken} {content.deposit}
-                                    </Text>
-                                    <Box display={showReferrerField ? "block" : "none"}>
-                                        <Text color={modalTextColor} fontSize='14px' mb={3}>
-                                            Referrer address
-                                        </Text>
-                                        <InputGroup size='md'>
-                                            <Input
-                                                placeholder="Enter referrer's address here"
-                                                opacity='0.5'
-                                                h='50px'
-                                                borderRadius='6px'
-                                                name='referralDetail'
-                                                border='2px'
-                                                disabled={URLReferrerAddress !== ""}
-                                                value={referrerAddress}
-                                                onChange={(e) => setReferrerAddress(e.target.value)}
-                                            />
-                                        </InputGroup>
-                                    </Box>
-                                    <Checkbox
-                                        mt={3}
-                                        onChange={handleSetReferralField}
-                                        isChecked={isReferrerCheck}
-                                        isDisabled={URLReferrerAddress !== ""}
-                                    >
-                                        No Referrer?
-                                    </Checkbox>
-                                    <Box mt={4}>
-                                        {depositInputHasError || refAddressHasError ? (
-                                            <>
-                                                {/* Show Error Button */}
-                                                <Button
-                                                    my='2'
-                                                    variant='brand'
-                                                    mx='auto'
-                                                    color={
-                                                        depositValue === "Confirm" ||
-                                                        depositValue === "Confirmed"
-                                                            ? "rgba(190, 190, 190, 1)"
-                                                            : "#40BAD5"
-                                                    }
-                                                    width='100%'
-                                                    background={
-                                                        depositValue === "Confirm" ||
-                                                        depositValue === "Confirmed"
-                                                            ? "rgba(64, 186, 213, 0.15)"
-                                                            : "#444159"
-                                                    }
-                                                    disabled={
-                                                        depositValue !== "Confirm" ||
-                                                        !account ||
-                                                        !depositTokenValue ||
-                                                        (setShowReferrerField && referrerAddress === "")
-                                                    }
-                                                    cursor='pointer'
-                                                    border='none'
-                                                    borderRadius='0px'
-                                                    padding='10px'
-                                                    height='50px'
-                                                    fontSize='16px'
-                                                    _hover={
-                                                        depositValue === "Confirm" ||
-                                                        depositValue === "Confirmed"
-                                                            ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                            : { background: "#444159" }
-                                                    }
-                                                    onClick={() => {}}
-                                                >
-                                                    {depositErrorButtonText}
-                                                </Button>
-                                            </>
-                                        ) : (
-                                            <>
-                                                {enoughApproval ? (
-                                                    <Button
-                                                        my='2'
-                                                        mx='auto'
-                                                        variant='brand'
-                                                        width='100%'
-                                                        disabled={
-                                                            depositValue !== "Confirm" ||
-                                                            !account ||
-                                                            !depositTokenValue ||
-                                                            (showReferrerField && referrerAddress === "")
-                                                        }
-                                                        cursor='pointer'
-                                                        border='none'
-                                                        borderRadius='0px'
-                                                        padding='10px'
-                                                        height='50px'
-                                                        fontSize='16px'
-                                                        _hover={
-                                                            depositValue === "Confirm"
-                                                                ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                                : { background: "#444159" }
-                                                        }
-                                                        onClick={() => confirmDeposit(content.deposit)}
-                                                    >
-                                                        {depositValue}
-                                                    </Button>
-                                                ) :  !depositTokenValue ? (
-                                                    <Button
-                                                        my='2'
-                                                        mx='auto'
-                                                        variant='brand'
-                                                        width='100%'
-                                                        disabled={true}
-                                                        cursor='pointer'
-                                                        border='none'
-                                                        borderRadius='0px'
-                                                        padding='10px'
-                                                        height='50px'
-                                                        fontSize='16px'
-                                                    >
-                                                        Enter Amount
-                                                    </Button>
-                                                ) : (
-                                                    approvalButton(content.deposit)
-                                                )}
-                                            </>
-                                        )}
-                                    </Box>
-                                </ModalBody>
-                            </ModalContent>
-                        </Modal>
+                          {depositErrorButtonText}
+                        </Button>
+                      </>
                     ) : (
-                        <Modal
-                            isOpen={modal1Disclosure.isOpen}
-                            onClose={closeDepositeModal}
-                            isCentered
+                      <>
+                        {enoughApproval ? (
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={depositValue !== "Confirm" || !account}
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                            _hover={
+                              depositValue === "Confirm"
+                                ? { background: "rgba(64, 186, 213, 0.15)" }
+                                : { background: "#444159" }
+                            }
+                            onClick={() => confirmDeposit(content.deposit)}
+                          >
+                            {depositValue}
+                          </Button>
+                        ) : !depositTokenValue ? (
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={true}
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                          >
+                            Enter Amount
+                          </Button>
+                        ) : (
+                          approvalButton(content.deposit)
+                        )}
+                        <Button
+                          my="2"
+                          mx="auto"
+                          variant="brand"
+                          width="100%"
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
+                          onClick={closeDepositeModal}
                         >
-                            <ModalOverlay />
-                            <ModalContent
-                                width='95vw'
-                                borderRadius='6px'
-                                paddingBottom='20px'
-                                bgColor={bgColor}
-                                minHeight='40vh'
-                            >
-                                <ModalHeader
-                                    fontSize='18px'
-                                    fontWeight='regular'
-                                    align='center'
-                                >
-                                    Deposit {content.deposit} Tokens
-                                </ModalHeader>
-
-                                <ModalCloseButton
-                                    bg='none'
-                                    size={"sm"}
-                                    mt={3}
-                                    mr={3}
-                                    cursor='pointer'
-                                    _focus={{ outline: "none" }}
-                                    p={"7px"}
-                                    border={"1px solid"}
-                                />
-                                <ModalBody py={2}>
-                                    <Text color='gray.400' align='right' mb={3}>
-                                        {content.availableToken} {content.deposit} Available
-                                    </Text>
-                                    <InputGroup size='md'>
-                                        <Input
-                                            placeholder='0'
-                                            opacity='0.5'
-                                            h='50px'
-                                            borderRadius='0px'
-                                            name='availableToken'
-                                            value={depositTokenValue}
-                                            onChange={(e) => setDepositTokenValue(e.target.value)}
-                                            border='2px'
-                                        />
-                                        <InputRightElement marginRight='15px'>
-                                            <Button
-                                                color='rgba(64, 186, 213, 1)'
-                                                border='none'
-                                                borderRadius='0px'
-                                                fontSize='13px'
-                                                p='1'
-                                                mt='10px'
-                                                height='20px'
-                                                cursor='pointer'
-                                                _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
-                                                onClick={() => showMaxValue(content.deposit, "deposit")}
-                                            >
-                                                MAX
-                                            </Button>
-                                        </InputRightElement>
-                                    </InputGroup>
-                                    <Box mt={4}>
-                                        {depositInputHasError ? (
-                                            <>
-                                                {/* Show Error Button */}
-                                                <Button
-                                                    my='2'
-                                                    variant='brand'
-                                                    mx='auto'
-                                                    color={
-                                                        depositValue === "Confirm" ||
-                                                        depositValue === "Confirmed"
-                                                            ? "rgba(190, 190, 190, 1)"
-                                                            : "#40BAD5"
-                                                    }
-                                                    width='100%'
-                                                    background={
-                                                        depositValue === "Confirm" ||
-                                                        depositValue === "Confirmed"
-                                                            ? "rgba(64, 186, 213, 0.15)"
-                                                            : "#444159"
-                                                    }
-                                                    disabled={depositValue !== "Confirm" || !account}
-                                                    cursor='pointer'
-                                                    border='none'
-                                                    borderRadius='0px'
-                                                    padding='10px'
-                                                    height='50px'
-                                                    fontSize='16px'
-                                                    _hover={
-                                                        depositValue === "Confirm"
-                                                            ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                            : { background: "#444159" }
-                                                    }
-                                                    onClick={() => {}}
-                                                >
-                                                    {depositErrorButtonText}
-                                                </Button>
-                                            </>
-                                        ) : (
-                                            <>
-                                                {enoughApproval ? (
-                                                    <Button
-                                                        my='2'
-                                                        mx='auto'
-                                                        variant='brand'
-                                                        width='100%'
-                                                        disabled={depositValue !== "Confirm" || !account}
-                                                        cursor='pointer'
-                                                        border='none'
-                                                        borderRadius='0px'
-                                                        padding='10px'
-                                                        height='50px'
-                                                        fontSize='16px'
-                                                        _hover={
-                                                            depositValue === "Confirm"
-                                                                ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                                : { background: "#444159" }
-                                                        }
-                                                        onClick={() => confirmDeposit(content.deposit)}
-                                                    >
-                                                        {depositValue}
-                                                    </Button>
-                                                ) :  !depositTokenValue ? (
-                                                    <Button
-                                                        my='2'
-                                                        mx='auto'
-                                                        variant='brand'
-                                                        width='100%'
-                                                        disabled={true}
-                                                        cursor='pointer'
-                                                        border='none'
-                                                        borderRadius='0px'
-                                                        padding='10px'
-                                                        height='50px'
-                                                        fontSize='16px'
-                                                    >
-                                                        Enter Amount
-                                                    </Button>
-                                                ) : (
-                                                    approvalButton(content.deposit)
-                                                )}
-                                                <Button
-                                                    my='2'
-                                                    mx='auto'
-                                                    variant='brand'
-                                                    width='100%'
-                                                    cursor='pointer'
-                                                    border='none'
-                                                    borderRadius='0px'
-                                                    padding='10px'
-                                                    height='50px'
-                                                    fontSize='16px'
-                                                    onClick={closeDepositeModal}
-                                                >
-                                                    Cancel
-                                                </Button>
-                                            </>
-                                        )}
-                                    </Box>
-                                </ModalBody>
-                            </ModalContent>
-                        </Modal>
+                          Cancel
+                        </Button>
+                      </>
                     )}
-
-                    <Modal
-                        isCentered
-                        isOpen={modal2Disclosure.isOpen}
-                        onClose={closeModal}
-                    >
-                        <ModalOverlay />
-                        <ModalContent
-                            width='95vw'
-                            borderRadius='6px'
-                            paddingBottom='20px'
-                            bgColor={bgColor}
-                            minHeight='40vh'
-                        >
-                            <ModalHeader fontSize='18px' fontWeight='regular' align='center'>
-                                Unstake {content.deposit} Tokens
-                            </ModalHeader>
-
-                            <ModalCloseButton
-                                bg='none'
-                                size={"sm"}
-                                mt={3}
-                                mr={3}
-                                cursor='pointer'
-                                _focus={{ outline: "none" }}
-                                p={"7px"}
-                                border={"1px solid"}
-                            />
-
-                            <ModalBody py={2}>
-                                <Text color='gray.400' align='right' mb={3}>
-                                    {`${
-                                        content.type === "RGP"
-                                            ? content.tokensStaked[1]
-                                            : content.tokenStaked[1]
-                                    }
+                  </Box>
+                </ModalBody>
+              </ModalContent>
+            </Modal>
+          )}
+
+          <Modal
+            isCentered
+            isOpen={modal2Disclosure.isOpen}
+            onClose={closeModal}
+          >
+            <ModalOverlay />
+            <ModalContent
+              width="95vw"
+              borderRadius="6px"
+              paddingBottom="20px"
+              bgColor={bgColor}
+              minHeight="40vh"
+            >
+              <ModalHeader fontSize="18px" fontWeight="regular" align="center">
+                Unstake {content.deposit} Tokens
+              </ModalHeader>
+
+              <ModalCloseButton
+                bg="none"
+                size={"sm"}
+                mt={3}
+                mr={3}
+                cursor="pointer"
+                _focus={{ outline: "none" }}
+                p={"7px"}
+                border={"1px solid"}
+              />
+
+              <ModalBody py={2}>
+                <Text color="gray.400" align="right" mb={3}>
+                  {`${
+                    content.type === "RGP"
+                      ? content.tokensStaked[1]
+                      : content.tokenStaked[1]
+                  }
                ${content.deposit} Staked `}
-                                </Text>
-
-                                <InputGroup size='md'>
-                                    <Input
-                                        placeholder='0'
-                                        opacity='0.5'
-                                        h='50px'
-                                        borderRadius='0px'
-                                        name='availableToken'
-                                        border='2px'
-                                        value={unstakeToken}
-                                        onChange={(e) => setUnstakeToken(e.target.value)}
-                                    />
-                                    <InputRightElement marginRight='15px'>
-                                        <Button
-                                            color='rgba(64, 186, 213, 1)'
-                                            border='none'
-                                            borderRadius='0px'
-                                            fontSize='13px'
-                                            p='1'
-                                            mt='10px'
-                                            height='20px'
-                                            cursor='pointer'
-                                            _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
-                                            onClick={() => showMaxValue(content.deposit, "unstake")}
-                                        >
-                                            MAX
-                                        </Button>
-                                    </InputRightElement>
-                                </InputGroup>
-                                <Box mt={4}>
-                                    {inputHasError ? (
-                                        <>
-                                            {/* Show Error Button */}
-                                            <Button
-                                                my='2'
-                                                mx='auto'
-                                                color={
-                                                    unstakeButtonValue === "Confirm" ||
-                                                    unstakeButtonValue === "Confirmed"
-                                                        ? "rgba(190, 190, 190, 1)"
-                                                        : "#40BAD5"
-                                                }
-                                                width='100%'
-                                                background={
-                                                    unstakeButtonValue === "Confirm" ||
-                                                    unstakeButtonValue === "Confirmed"
-                                                        ? "rgba(64, 186, 213, 0.15)"
-                                                        : "#444159"
-                                                }
-                                                disabled={unstakeButtonValue !== "Confirm"}
-                                                cursor='pointer'
-                                                border='none'
-                                                borderRadius='0px'
-                                                padding='10px'
-                                                height='50px'
-                                                fontSize='16px'
-                                                _hover={
-                                                    unstakeButtonValue === "Confirm" ||
-                                                    unstakeButtonValue === "Confirmed"
-                                                        ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                        : { background: "#444159" }
-                                                }
-                                                onClick={() => {}}
-                                            >
-                                                {errorButtonText}
-                                            </Button>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <Button
-                                                my='2'
-                                                variant='brand'
-                                                mx='auto'
-                                                width='100%'
-                                                disabled={
-                                                    unstakeButtonValue !== "Confirm" ||
-                                                    !unstakeToken ||
-                                                    !account
-                                                }
-                                                cursor='pointer'
-                                                border='none'
-                                                borderRadius='0px'
-                                                padding='10px'
-                                                height='50px'
-                                                fontSize='16px'
-                                                _hover={
-                                                    unstakeButtonValue === "Confirm" ||
-                                                    unstakeButtonValue === "Confirmed"
-                                                        ? { background: "rgba(64, 186, 213, 0.15)" }
-                                                        : { background: "#444159" }
-                                                }
-                                                onClick={() => confirmUnstakeDeposit(content.deposit)}
-                                            >
-                                                {unstakeButtonValue}
-                                            </Button>
-                                            <Button
-                                                my='2'
-                                                mx='auto'
-                                                variant='brand'
-                                                width='100%'
-                                                cursor='pointer'
-                                                border='none'
-                                                borderRadius='0px'
-                                                padding='10px'
-                                                height='50px'
-                                                fontSize='16px'
-                                                onClick={closeModal}
-                                            >
-                                                Cancel
-                                            </Button>
-                                        </>
-                                    )}
-                                </Box>
-                            </ModalBody>
-                        </ModalContent>
-                    </Modal>
-                </Skeleton>
-            )}
-        </>
-    );
+                </Text>
+
+                <InputGroup size="md">
+                  <Input
+                    placeholder="0"
+                    opacity="0.5"
+                    h="50px"
+                    borderRadius="0px"
+                    name="availableToken"
+                    border="2px"
+                    value={unstakeToken}
+                    onChange={(e) => setUnstakeToken(e.target.value)}
+                  />
+                  <InputRightElement marginRight="15px">
+                    <Button
+                      color="rgba(64, 186, 213, 1)"
+                      border="none"
+                      borderRadius="0px"
+                      fontSize="13px"
+                      p="1"
+                      mt="10px"
+                      height="20px"
+                      cursor="pointer"
+                      _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
+                      onClick={() => showMaxValue(content.deposit, "unstake")}
+                    >
+                      MAX
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
+                <Box mt={4}>
+                  {inputHasError ? (
+                    <>
+                      {/* Show Error Button */}
+                      <Button
+                        my="2"
+                        mx="auto"
+                        color={
+                          unstakeButtonValue === "Confirm" ||
+                          unstakeButtonValue === "Confirmed"
+                            ? "rgba(190, 190, 190, 1)"
+                            : "#40BAD5"
+                        }
+                        width="100%"
+                        background={
+                          unstakeButtonValue === "Confirm" ||
+                          unstakeButtonValue === "Confirmed"
+                            ? "rgba(64, 186, 213, 0.15)"
+                            : "#444159"
+                        }
+                        disabled={unstakeButtonValue !== "Confirm"}
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
+                        _hover={
+                          unstakeButtonValue === "Confirm" ||
+                          unstakeButtonValue === "Confirmed"
+                            ? { background: "rgba(64, 186, 213, 0.15)" }
+                            : { background: "#444159" }
+                        }
+                        onClick={() => {}}
+                      >
+                        {errorButtonText}
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <Button
+                        my="2"
+                        variant="brand"
+                        mx="auto"
+                        width="100%"
+                        disabled={
+                          unstakeButtonValue !== "Confirm" ||
+                          !unstakeToken ||
+                          !account
+                        }
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
+                        _hover={
+                          unstakeButtonValue === "Confirm" ||
+                          unstakeButtonValue === "Confirmed"
+                            ? { background: "rgba(64, 186, 213, 0.15)" }
+                            : { background: "#444159" }
+                        }
+                        onClick={() => confirmUnstakeDeposit(content.deposit)}
+                      >
+                        {unstakeButtonValue}
+                      </Button>
+                      <Button
+                        my="2"
+                        mx="auto"
+                        variant="brand"
+                        width="100%"
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
+                        onClick={closeModal}
+                      >
+                        Cancel
+                      </Button>
+                    </>
+                  )}
+                </Box>
+              </ModalBody>
+            </ModalContent>
+          </Modal>
+        </Skeleton>
+      )}
+    </>
+  );
 };
 
 export default ShowNewFarm;
diff --git a/src/pages/FarmingV2/ShowProductFarmDetails.tsx b/src/pages/FarmingV2/ShowProductFarmDetails.tsx
index 58a5563a..dce8bfd8 100644
--- a/src/pages/FarmingV2/ShowProductFarmDetails.tsx
+++ b/src/pages/FarmingV2/ShowProductFarmDetails.tsx
@@ -23,17 +23,14 @@ import { addToast } from "../../components/Toast/toastSlice";
 import { useDispatch } from "react-redux";
 import { setOpenModal, TrxState } from "../../state/application/reducer";
 import { getExplorerLink, ExplorerDataType } from "../../utils/getExplorerLink";
-import {
-  rigelToken,
- productStakingContract
-} from "../../utils/Contracts";
+import { rigelToken, productStakingContract } from "../../utils/Contracts";
 
 import { calculateGas } from "../Swap/components/sendToken";
 import {
   MASTERCHEFV2ADDRESSES,
   RGP,
   PRODUCTSTAKINGADDRESSES,
-  RGPADDRESSES
+  RGPADDRESSES,
 } from "../../utils/addresses";
 import { clearInputInfo, convertFromWei, convertToNumber } from "../../utils";
 import { useRGPBalance } from "../../utils/hooks/useBalances";
@@ -47,37 +44,42 @@ import {
   useUpdateFarm,
   useProductFarmDetails,
 } from "../../state/newfarm/hooks";
-import { GButtonClicked, GButtonIntialized, GFarmingFailedTransaction, GFarmingSpecialPoolReferral, GFarmingSuccessTransaction } from "../../components/G-analytics/gFarming";
+import {
+  GButtonClicked,
+  GButtonIntialized,
+  GFarmingFailedTransaction,
+  GFarmingSpecialPoolReferral,
+  GFarmingSuccessTransaction,
+} from "../../components/G-analytics/gFarming";
 import { ZERO_ADDRESS } from "../../constants";
 import ProductModal from "./ProductFarmModal";
 
-
 type FarmDetails = {
   content: {
-    feature:string,
-    percentageProfitShare:string,
-    profitTimeLine:string,
-    totalLiquidity:string,
-    estimatedTotalProfit:string,
-    pid:number,
-    deposit:string,
-    poolAllowance: "",
-    type:string,
-    RGPStaked:string
+    feature: string;
+    percentageProfitShare: string;
+    profitTimeLine: string;
+    totalLiquidity: string;
+    estimatedTotalProfit: string;
+    pid: number;
+    deposit: string;
+    poolAllowance: "";
+    type: string;
+    RGPStaked: string;
   };
-  URLReferrerAddress?:string;
-  wallet:any;
-  refreshSpecialData:() =>void
-}
+  URLReferrerAddress?: string;
+  wallet: any;
+  refreshSpecialData: () => void;
+};
 const ShowProductFarmDetails = ({
   content,
   URLReferrerAddress,
   refreshSpecialData,
-  wallet}:FarmDetails)=>{
-
+  wallet,
+}: FarmDetails) => {
   const { account, chainId, library } = useActiveWeb3React();
   const [depositTokenValue, setDepositTokenValue] = useState("");
-  
+
   const [inputHasError, setInputHasError] = useState(false);
   const [errorButtonText, setErrorButtonText] = useState("");
   // const [referrerAddress, setReferrerAddress] = useState(URLReferrerAddress);
@@ -87,11 +89,13 @@ const ShowProductFarmDetails = ({
   const [approveValueForRGP, setApproveValueForRGP] = useState(false);
   const [refAddressHasError, setRefAddressHasError] = useState(false);
   const filterBorderColor = useColorModeValue("#DEE5ED", "#324D68");
-  const [minimumStakeAmount, setMinimumStakeAmount] = useState<string | number>(0);
+  const [minimumStakeAmount, setMinimumStakeAmount] = useState<string | number>(
+    0
+  );
   const [unstakeToken, setUnstakeToken] = useState("");
   const [depositErrorButtonText, setDepositErrorButtonText] = useState("");
   const [reload, setReload] = useState(false);
-  
+
   const [approvalLoading, setApprovalLoading] = useState(false);
   const [approveValueForOtherToken, setApproveValueForOtherToken] =
     useState(false);
@@ -115,7 +119,6 @@ const ShowProductFarmDetails = ({
     loading,
   });
 
-
   useEffect(async () => {
     setDepositInputHasError(false);
     setDepositErrorButtonText("");
@@ -139,13 +142,13 @@ const ShowProductFarmDetails = ({
         setDepositErrorButtonText(
           `Minimum stake amount is ${minimumStakeAmount}`
         );
-      }else if (parseFloat(depositTokenValue) > parseFloat(RGPBalance)) {
+      } else if (parseFloat(depositTokenValue) > parseFloat(RGPBalance)) {
         setDepositInputHasError(true);
         setDepositErrorButtonText("Insufficient Balance");
-      }else{
-        let priceBalance = await getAllowances()
-        if(priceBalance < depositTokenValue){
-         setApproveValueForRGP(false)
+      } else {
+        let priceBalance = await getAllowances();
+        if (priceBalance < depositTokenValue) {
+          setApproveValueForRGP(false);
         }
       }
     }
@@ -167,16 +170,13 @@ const ShowProductFarmDetails = ({
         setErrorButtonText("Invalid Input");
         return;
       }
-      if (
-        parseFloat(unstakeToken) >
-        parseFloat(content.RGPStaked)
-      ) {
+      if (parseFloat(unstakeToken) > parseFloat(content.RGPStaked)) {
         setInputHasError(true);
         setErrorButtonText("Insufficient Balance");
       }
     }
   }, [unstakeToken, account]);
-  
+
   useEffect(() => {
     const getMinimumStakeAmount = async () => {
       if (account) {
@@ -191,8 +191,8 @@ const ShowProductFarmDetails = ({
           const minStakeAmount = Web3.utils.fromWei(minimumAmount.toString());
           const feeAmount = Web3.utils.fromWei(fee.toString());
           setMinimumStakeAmount(minStakeAmount);
-          setFeeAmount(feeAmount)
-          setAllowUnstake(unstaking)
+          setFeeAmount(feeAmount);
+          setAllowUnstake(unstaking);
         } catch (error) {
           console.log(error);
         }
@@ -202,8 +202,6 @@ const ShowProductFarmDetails = ({
   }, [account]);
 
   useEffect(() => {
-    
-
     if (!account) {
       // setFarmingFeeLoading(false);
     }
@@ -218,16 +216,18 @@ const ShowProductFarmDetails = ({
       }
     };
 
-
     const checkForApproval = async () => {
       const rgp = await rigelToken(RGP[chainId as number], library);
       // if (content.deposit === "RGP" && content.feature === "AT") {
-        const specialPoolV1Approval = await prodductFarmAllowance(rgp);
-        changeApprovalButton(true, specialPoolV1Approval);
-      // } 
+      const specialPoolV1Approval = await prodductFarmAllowance(rgp);
+      changeApprovalButton(true, specialPoolV1Approval);
+      // }
     };
 
-    function changeApprovalButton(otherTokenApproval:Boolean, rgpApproval?:Boolean ) {
+    function changeApprovalButton(
+      otherTokenApproval: Boolean,
+      rgpApproval?: Boolean
+    ) {
       if (otherTokenApproval && rgpApproval) {
         setApproveValueForOtherToken(true);
         setApproveValueForRGP(true);
@@ -249,7 +249,7 @@ const ShowProductFarmDetails = ({
     }
   }, [wallet, content, account]);
 
-  const unstakeProductFarm = async (val:string) => {
+  const unstakeProductFarm = async (val: string) => {
     if (account) {
       try {
         const specialPool = await productStakingContract(
@@ -284,8 +284,8 @@ const ShowProductFarmDetails = ({
           }
         );
         const { confirmations, status } = await fetchTransactionData(data);
-        GFarmingSuccessTransaction("special pool", "unstake", "RGP","v2")
-        refreshSpecialData()
+        GFarmingSuccessTransaction("special pool", "unstake", "RGP", "v2");
+        refreshSpecialData();
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
@@ -294,8 +294,14 @@ const ShowProductFarmDetails = ({
         );
         // dispatch the getTokenStaked action from here when data changes
         //  callRefreshFarm(confirmations, status);
-      } catch (error:any) {
-        GFarmingFailedTransaction("special pool", "unstake", error.message, "RGP","v2")
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "unstake",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
@@ -308,7 +314,7 @@ const ShowProductFarmDetails = ({
 
   async function confirmUnstakeDeposit(val: string) {
     try {
-      GButtonIntialized("unstake product farm",content.deposit,"v2")
+      GButtonIntialized("unstake product farm", content.deposit, "v2");
       dispatch(
         setOpenModal({
           message: `Unstaking ${unstakeToken} ${val}`,
@@ -317,16 +323,15 @@ const ShowProductFarmDetails = ({
       );
 
       if (account) {
-      //   if (val === "RGP" && Number(content.id) === 1) {
-      //     await RGPUnstake(val);
-      //   } else if (val === "RGP" && Number(content.id) === 13) {
-          await unstakeProductFarm(val);
+        //   if (val === "RGP" && Number(content.id) === 1) {
+        //     await RGPUnstake(val);
+        //   } else if (val === "RGP" && Number(content.id) === 13) {
+        await unstakeProductFarm(val);
         // } else {
-          // tokensWithdrawal(content.id,val);
+        // tokensWithdrawal(content.id,val);
         // }
       }
     } catch (err) {
-      console.log(err);
       dispatch(
         setOpenModal({
           message: `Failed transaction`,
@@ -341,7 +346,7 @@ const ShowProductFarmDetails = ({
   const showMaxValue = async (deposit: any, input: any) => {
     try {
       if (input === "deposit") {
-        GButtonClicked(`max_button for ${input}`,content.deposit,"v2")
+        GButtonClicked(`max_button for ${input}`, content.deposit, "v2");
         setDepositTokenValue(RGPBalance);
       } else if (input === "unstake") {
         setUnstakeToken(content.RGPStaked);
@@ -353,7 +358,6 @@ const ShowProductFarmDetails = ({
     }
   };
 
-
   const openDepositeModal = () => {
     //if (approveValueForOtherToken && approveValueForRGP) {
     modal1Disclosure.onOpen();
@@ -361,7 +365,7 @@ const ShowProductFarmDetails = ({
   };
 
   const closeModal = () => {
-    GButtonIntialized("close unstaked",content.deposit,"v2")
+    GButtonIntialized("close unstaked", content.deposit, "v2");
     modal2Disclosure.onClose();
   };
   const FarmProductApproval = async () => {
@@ -373,9 +377,9 @@ const ShowProductFarmDetails = ({
             trxState: TrxState.WaitingForConfirmation,
           })
         );
-        
+
         const rgp = await rigelToken(RGP[chainId as number], library);
-        const walletBal = (await rgp.balanceOf(account));
+        const walletBal = await rgp.balanceOf(account);
         const data = await rgp.approve(
           PRODUCTSTAKINGADDRESSES[chainId as number],
           walletBal,
@@ -389,7 +393,12 @@ const ShowProductFarmDetails = ({
         const { confirmations, status } = await fetchTransactionData(data);
         if (confirmations >= 3) {
           setApproveValueForRGP(true);
-          GFarmingSuccessTransaction("product farm | auto period", "approval", "RGP","v1")
+          GFarmingSuccessTransaction(
+            "product farm | auto trade",
+            "approval",
+            "RGP",
+            "v1"
+          );
           dispatch(
             setOpenModal({
               trxState: TrxState.TransactionSuccessful,
@@ -398,9 +407,15 @@ const ShowProductFarmDetails = ({
           );
         }
         getAllowances();
-      } catch (error:any) {
+      } catch (error: any) {
         console.error(error);
-        GFarmingFailedTransaction("product farm | auto period", "approval", error.message, "RGP","v1")
+        GFarmingFailedTransaction(
+          "product farm | auto trade",
+          "approval",
+          error.message,
+          "RGP",
+          "v1"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -414,15 +429,15 @@ const ShowProductFarmDetails = ({
 
   const setApprove = (val: string) => {
     if (approveValueForOtherToken && approveValueForRGP) {
-      GButtonClicked("unstake",content.deposit,"v2")
+      GButtonClicked("unstake", content.deposit, "v2");
       modal2Disclosure.onOpen();
     } else {
-      GButtonClicked("approval",content.deposit,"v2")
+      GButtonClicked("approval", content.deposit, "v2");
       checkUser(val);
     }
   };
 
-  const checkUser = async (val :string) => {
+  const checkUser = async (val: string) => {
     if (content.deposit === "RGP" && content.feature) {
       await FarmProductApproval();
       setApproveValueForOtherToken(true);
@@ -430,51 +445,35 @@ const ShowProductFarmDetails = ({
     }
   };
 
-
   const closeDepositeModal = () => {
     modal1Disclosure.onClose();
   };
 
- 
-
   const allowance = (contract: Contract) =>
-  contract.allowance(account, PRODUCTSTAKINGADDRESSES[chainId as number]);
- useEffect(() => {
+    contract.allowance(account, PRODUCTSTAKINGADDRESSES[chainId as number]);
+  useEffect(() => {
     getAllowances();
-  }, [account, depositTokenValue,unstakeToken]);
+  }, [account, depositTokenValue, unstakeToken]);
   const getAllowances = async () => {
     if (account) {
       try {
-        const [
-          RGPAllowances
-        ] = await Promise.all([
-          rigelToken(
-            RGPADDRESSES[chainId as number],
-            library
-          ),
+        const [RGPAllowances] = await Promise.all([
+          rigelToken(RGPADDRESSES[chainId as number], library),
         ]);
-        const [
-          productStakingAllowance,
-          ,
-        ] = await Promise.all([
+        const [productStakingAllowance, ,] = await Promise.all([
           allowance(RGPAllowances),
         ]);
         let rigelAllowance;
-          rigelAllowance = productStakingAllowance;
-          console.log({rigelAllowance,productStakingAllowance})
-          dispatch(
-            updateFarmProductAllowances([
-              rigelAllowance,
-            ])
-          );
-          return rigelAllowance
-        
+        rigelAllowance = productStakingAllowance;
+
+        dispatch(updateFarmProductAllowances([rigelAllowance]));
+        return rigelAllowance;
       } catch (error) {
         console.error(error, "something went wrong");
       }
     }
   };
- 
+
   const enoughApproval = (allowance: any, balance: any) => {
     if (allowance && balance) {
       return content.type === "AT"
@@ -494,7 +493,9 @@ const ShowProductFarmDetails = ({
           PRODUCTSTAKINGADDRESSES[chainId as number],
           library
         );
-       GFarmingSpecialPoolReferral(referrerAddress===ZERO_ADDRESS ? false:true)
+        GFarmingSpecialPoolReferral(
+          referrerAddress === ZERO_ADDRESS ? false : true
+        );
         const data = await specialPool.stake(
           ethers.utils.parseEther(depositTokenValue.toString()),
           referrerAddress,
@@ -505,8 +506,13 @@ const ShowProductFarmDetails = ({
           }
         );
         await fetchTransactionData(data);
-        GFarmingSuccessTransaction("Product farm | auto period", "stake", "RGP","v1")
-        refreshSpecialData()
+        GFarmingSuccessTransaction(
+          "Product farm | auto trade",
+          "stake",
+          "RGP",
+          "v1"
+        );
+        refreshSpecialData();
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
@@ -514,27 +520,30 @@ const ShowProductFarmDetails = ({
           })
         );
         // callRefreshFarm(confirmations, status);
-      } catch (error:any) {
-        console.log(error);
-        GFarmingFailedTransaction("Product farm | auto period", "stake", error.message, "RGP","v1")
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "Product farm | auto trade",
+          "stake",
+          error.message,
+          "RGP",
+          "v1"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
             trxState: TrxState.TransactionFailed,
-            
           })
         );
       }
     }
   };
   const approveLPToken = async (LPToken: any) => {
-        checkUser(LPToken);
-
+    checkUser(LPToken);
   };
 
   const confirmDeposit = async (val: any) => {
     setDepositValue("Pending Confirmation");
-    GButtonIntialized("deposit",content.deposit,"v2")
+    GButtonIntialized("deposit", content.deposit, "v2");
     dispatch(
       setOpenModal({
         message: `Staking ${depositTokenValue} ${val}`,
@@ -546,15 +555,20 @@ const ShowProductFarmDetails = ({
         // if (val === "RGP" && Number(content.id) === 1) {
         //   await RGPuseStake();
         // } else if (val === "RGP" && Number(content.id) === 13) {
-          await RGPProductStake();
+        await RGPProductStake();
         // } else {
         //   LPDeposit(content.id,val);
-      
+
         // }
       }
-    } catch (error:any) {
-      console.log(error);
-      GFarmingFailedTransaction("Product farm | auto period", "stake", error.message, val,"v1")
+    } catch (error: any) {
+      GFarmingFailedTransaction(
+        "Product farm | auto trade",
+        "stake",
+        error.message,
+        val,
+        "v1"
+      );
       dispatch(
         setOpenModal({
           message: `Failed to deposit LP tokens.`,
@@ -575,21 +589,22 @@ const ShowProductFarmDetails = ({
   };
   const approvalButton = (LPToken: any) => (
     <Button
-      my='2'
-      mx='auto'
-      color='rgba(190, 190, 190, 1)'
-      width='100%'
-      background='rgba(64, 186, 213, 0.15)'
-      cursor='pointer'
-      border='none'
-      borderRadius='0px'
-      padding='10px'
-      height='50px'
-      fontSize='16px'
+      my="2"
+      mx="auto"
+      color="rgba(190, 190, 190, 1)"
+      width="100%"
+      background="rgba(64, 186, 213, 0.15)"
+      cursor="pointer"
+      border="none"
+      borderRadius="0px"
+      padding="10px"
+      height="50px"
+      fontSize="16px"
       _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
       onClick={() => {
-        GButtonIntialized("approval",content.deposit,"v2")
-        approveLPToken(LPToken)}}
+        GButtonIntialized("approval", content.deposit, "v2");
+        approveLPToken(LPToken);
+      }}
     >
       {approvalLoading ? "Approving..." : "Approve"} {LPToken}
     </Button>
@@ -611,73 +626,73 @@ const ShowProductFarmDetails = ({
     }
   };
 
-return (
-  <>
-  {loading ? (
-     <Box p='6' border='1px' borderColor={filterBorderColor}>
-     <Flex
-       flexDirection={isMobileDevice ? "column" : "row"}
-       justifyContent={isMobileDevice ? "center" : "space-between"}
-       alignItems={isMobileDevice ? "center" : undefined}
-     >
-       <Flex flexDirection='column'>
-         <Skeleton mt='4' mb={2} height='20px' w='208px' />
-
-         <Flex>
-           <Skeleton mr={2} height='20px' w='100px' />
-           <Skeleton height='20px' w='100px' />
-         </Flex>
-       </Flex>
-
-       <Flex ml={2} flexDirection='column'>
-         <Skeleton mt='4' mb={2} height='20px' w='208px' />
-         <Skeleton height='20px' w='208px' />
-       </Flex>
-
-       <Flex ml={2} flexDirection='column'>
-         <Skeleton mt='4' mb={2} height='20px' w='208px' />
-         <Skeleton height='20px' w='208px' />
-       </Flex>
-
-       <Flex ml={2} flexDirection='column'>
-         <Skeleton mt='4' mb={2} height='20px' w='208px' />
-         <Skeleton height='20px' w='208px' />
-       </Flex>
-     </Flex>
-   </Box>
-  ): (
-    <Skeleton isLoaded={!loadingState ? true : false}>
-      <Flex
-  flexDirection={["column", "column", "row"]}
-  color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-  background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
-  padding='0 20px'
-  paddingBottom={["20px","20px","0"]}
-  border={
-    mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
-  }
-  width='100%'
->
-  <Box
-    flexBasis='35%'
-    width='100%'
-    textAlign='right'
-    display='flex'
-    justifyContent='space-around'
-  >
-    <Box>
-      <Flex
-        my={2}
-        mt={6}
-        justify={{ base: "center", md: "none", lg: "none" }}
-      >
-        <Text
-          color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-          fontSize='20px'
-          marginRight='10px'
-          fontWeight='bold'
-        >
-          {/* <Tooltip
+  return (
+    <>
+      {loading ? (
+        <Box p="6" border="1px" borderColor={filterBorderColor}>
+          <Flex
+            flexDirection={isMobileDevice ? "column" : "row"}
+            justifyContent={isMobileDevice ? "center" : "space-between"}
+            alignItems={isMobileDevice ? "center" : undefined}
+          >
+            <Flex flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+
+              <Flex>
+                <Skeleton mr={2} height="20px" w="100px" />
+                <Skeleton height="20px" w="100px" />
+              </Flex>
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
+            </Flex>
+          </Flex>
+        </Box>
+      ) : (
+        <Skeleton isLoaded={!loadingState ? true : false}>
+          <Flex
+            flexDirection={["column", "column", "row"]}
+            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+            background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
+            padding="0 20px"
+            paddingBottom={["20px", "20px", "0"]}
+            border={
+              mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
+            }
+            width="100%"
+          >
+            <Box
+              flexBasis="35%"
+              width="100%"
+              textAlign="right"
+              display="flex"
+              justifyContent="space-around"
+            >
+              <Box>
+                <Flex
+                  my={2}
+                  mt={6}
+                  justify={{ base: "center", md: "none", lg: "none" }}
+                >
+                  <Text
+                    color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                    fontSize="20px"
+                    marginRight="10px"
+                    fontWeight="bold"
+                  >
+                    {/* <Tooltip
             hasArrow
             label={content.tokensStaked[1]}
             bg='gray.300'
@@ -685,250 +700,258 @@ return (
           >
             {parseFloat(content.tokensStaked[1]).toFixed(4)}
           </Tooltip> */}
-          {content.RGPStaked}
-        </Text>
-        <Text
-          fontSize='16px'
-          color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
-        >
-          RGP Tokens Staked
-        </Text>
-      </Flex>
-
-      <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
-      <Tooltip label={approveValueForRGP && !allowUnstake &&'available soon'}>
-        <Button
-          w='45%'
-          h='40px'
-          borderRadius='6px'
-          bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
-          color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-          border='0'
-          mb='4'
-          mr='6'
-          disabled={(approveValueForRGP  && parseFloat(content.RGPStaked) <= 0) ||  (approveValueForRGP && !allowUnstake)}
-          padding='10px 40px'
-          cursor='pointer'
-          onClick={() => {
-            setApprove(content.deposit)}}
-          // className={
-          //   approveValueForRGP && approveValueForOtherToken
-          //     ? "unstake"
-          //     : "approve"
-          // }
-        >
-          {approveValueForRGP
-            ? "Unstake"
-            : "Approve"}
-          
-        </Button>
-        </Tooltip>
-        <Button
-          w='45%'
-          h='40px'
-          borderRadius='6px'
-          bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
-          color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-          border='0'
-          mb='4'
-          mr='6'
-          padding='10px 40px'
-          cursor='pointer'
-          disabled={!approveValueForRGP}
-          onClick={openDepositeModal}
-          className={"deposit"}
-        >
-         Stake
-        </Button>
-      </Flex>
-    </Box>
-    <Box
-      mx={1}
-      my={3}
-      display={{ base: "none", md: "block", lg: "block" }}
-    >
-      <Divider orientation='vertical' height='84px' />
-    </Box>
-  </Box>
-  {/* margin={['0', '0', '0 20px']} */}
-  <Box
-    flexBasis='35%'
-    width='100%'
-    display='flex'
-    justifyContent='space-around'
-  >
-    {isMobileDevice ? (
-      <Box width='100%' margin='0 auto'>
-        <Flex my={2} justifyContent="space-between" px={5}>
-          <Text
-            fontSize='20px'
-            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-            marginRight='10px'
-            textAlign='center'
-            fontWeight='bold'
-          >
-           To be earned
-          </Text>{" "}
-          <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"} textAlign="right" mt="5px">
-            25% Profit Shares
-          </Text>
-        </Flex>
-        
-      </Box>
-    ) : (
-      <Box margin='0 auto'>
-        <Box my={6}>
-          <Text
-            fontSize='20px'
-            color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-            marginRight='10px'
-            textAlign='center'
-            fontWeight='bold'
-          >
-            To be earned
-          </Text>{" "}
-          <Text color={mode === DARK_THEME ? "#DCE5EF" : "#333333"} fontSize='16px'  mt={2}>
-          {content.percentageProfitShare} Profit Shares
-          </Text>
-        </Box>
-      </Box>
-    )}
-    <Box
-      my={3}
-      display={{ base: "none", md: "block", lg: "block" }}
-      mx={1}
-    >
-      <Divider orientation='vertical' height='84px' />
-    </Box>
-  </Box>
-  <Box
-                flexBasis='40%'
-                width='100%'
-                display='flex'
-                justifyContent='space-around'
-                
+                    {content.RGPStaked}
+                  </Text>
+                  <Text
+                    fontSize="16px"
+                    color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                  >
+                    RGP Tokens Staked
+                  </Text>
+                </Flex>
+
+                <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
+                  <Tooltip
+                    label={
+                      approveValueForRGP && !allowUnstake && "available soon"
+                    }
+                  >
+                    <Button
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
+                      bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
+                      color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      disabled={
+                        (approveValueForRGP &&
+                          parseFloat(content.RGPStaked) <= 0) ||
+                        (approveValueForRGP && !allowUnstake)
+                      }
+                      padding="10px 40px"
+                      cursor="pointer"
+                      onClick={() => {
+                        setApprove(content.deposit);
+                      }}
+                      // className={
+                      //   approveValueForRGP && approveValueForOtherToken
+                      //     ? "unstake"
+                      //     : "approve"
+                      // }
+                    >
+                      {approveValueForRGP ? "Unstake" : "Approve"}
+                    </Button>
+                  </Tooltip>
+                  <Button
+                    w="45%"
+                    h="40px"
+                    borderRadius="6px"
+                    bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
+                    color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
+                    border="0"
+                    mb="4"
+                    mr="6"
+                    padding="10px 40px"
+                    cursor="pointer"
+                    disabled={!approveValueForRGP}
+                    onClick={openDepositeModal}
+                    className={"deposit"}
+                  >
+                    Stake
+                  </Button>
+                </Flex>
+              </Box>
+              <Box
+                mx={1}
+                my={3}
+                display={{ base: "none", md: "block", lg: "block" }}
               >
-                <Box mt={6}>
-                  {
-                    <Flex flexDirection={["row", "row", "column"]}>
-                      <Text fontSize='20px'  fontWeight='bold'>
-                       
-                        Estimated Total Profit
-                      </Text>
-                      <Flex alignItems="center" mt={["4","4","0"]} justifyContent="center">
-                        <Text
-                          fontSize='16px'
-                          color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
-                          marginLeft='30px'
-                          textAlign="center"
-                          mt={["-30px","-15px","2"]}
-
-                        >
-                          $ {formatAmount(content.estimatedTotalProfit) }
-                        </Text>{" "}
-                      </Flex>
-                    </Flex>
-                  }
+                <Divider orientation="vertical" height="84px" />
+              </Box>
+            </Box>
+            {/* margin={['0', '0', '0 20px']} */}
+            <Box
+              flexBasis="35%"
+              width="100%"
+              display="flex"
+              justifyContent="space-around"
+            >
+              {isMobileDevice ? (
+                <Box width="100%" margin="0 auto">
+                  <Flex my={2} justifyContent="space-between" px={5}>
+                    <Text
+                      fontSize="20px"
+                      color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                      marginRight="10px"
+                      textAlign="center"
+                      fontWeight="bold"
+                    >
+                      To be earned
+                    </Text>{" "}
+                    <Text
+                      color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                      textAlign="right"
+                      mt="5px"
+                    >
+                      25% Profit Shares
+                    </Text>
+                  </Flex>
                 </Box>
-
-                <Box
-                  my={3}
-                  mx={1}
-                  display={{ base: "none", md: "block", lg: "block" }}
-                >
-                  <Divider orientation='vertical' height='84px' />
+              ) : (
+                <Box margin="0 auto">
+                  <Box my={6}>
+                    <Text
+                      fontSize="20px"
+                      color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
+                      marginRight="10px"
+                      textAlign="center"
+                      fontWeight="bold"
+                    >
+                      To be earned
+                    </Text>{" "}
+                    <Text
+                      color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                      fontSize="16px"
+                      mt={2}
+                    >
+                      {content.percentageProfitShare} Profit Shares
+                    </Text>
+                  </Box>
                 </Box>
+              )}
+              <Box
+                my={3}
+                display={{ base: "none", md: "block", lg: "block" }}
+                mx={1}
+              >
+                <Divider orientation="vertical" height="84px" />
               </Box>
-  <Box
-    flexBasis='30%'
-    width='100%'
-    margin={["0", "0", "10px 20px"]}
-    justifySelf='end'
-  >
-    <Flex flexDirection='column' alignItems={{ base: "center" }}>
-      <Flex mb='5px'>
-        <Text marginTop='15px'>Auto-Harvest</Text>
-        <Circle
-          size='20px'
-          bg='#fff'
-          display='inline-flex'
-          marginLeft='10px'
-          marginTop='17px'
-          marginRight='10px'
-        >
-          <Tooltip
-            label='Coming soon'
-            fontSize='md'
-            marginTop='15px'
-          >
-            <QuestionOutlineIcon color='#120136' cursor='pointer' />
-          </Tooltip>
-        </Circle>
-      </Flex>
-      <Flex>
-        <Switch
-          disabled
-          // onChange={handleChecked}
-          // checked={!checked}
-          className='react-switch'
-        />
-      </Flex>
-    </Flex>
-  </Box>
- <ProductModal 
- modal1Disclosure={modal1Disclosure}
- closeDepositeModal={closeDepositeModal}
- setDepositTokenValue={setDepositTokenValue}
- depositTokenValue = {depositTokenValue}
- showMaxValue = {showMaxValue}
- deposit={content.deposit}
- minimumStakeAmount={minimumStakeAmount}
- RGPBalance={RGPBalance}
- showReferrerField={showReferrerField}
- URLReferrerAddress={URLReferrerAddress}
- setReferrerAddress={setReferrerAddress}
- referrerAddress={referrerAddress}
- handleSetReferralField={handleSetReferralField}
- isReferrerCheck={isReferrerCheck}
- depositInputHasError={depositInputHasError}
- refAddressHasError = {refAddressHasError}
- depositValue={depositValue}
- depositErrorButtonText={depositErrorButtonText}
- confirmDeposit={confirmDeposit}
- enoughApproval={enoughApproval}
- account={account}
- feeAmount={feeAmount}
- allowance={content.poolAllowance}
- approvalButton={approvalButton}
- approveValueForRGP ={approveValueForRGP}
- />
-
-<ProductModal 
- modal1Disclosure={modal2Disclosure}
- closeDepositeModal={closeModal}
- depositTokenValue = {unstakeToken}
- showMaxValue = {showMaxValue}
- deposit={content.deposit}
- minimumStakeAmount={minimumStakeAmount}
- depositInputHasError={inputHasError}
- refAddressHasError = {refAddressHasError}
- depositValue={depositValue}
- setDepositTokenValue={setUnstakeToken}
- depositErrorButtonText={errorButtonText}
- confirmDeposit={confirmUnstakeDeposit}
- enoughApproval={enoughApproval}
- account={account}
- allowance={content.poolAllowance}
- approvalButton={approvalButton}
- approveValueForRGP ={true}
- RGPStaked = {content.RGPStaked}
- />
-
-</Flex>
-    </Skeleton>
-  )}
-  </>
-  
-)
-}
-export default ShowProductFarmDetails
\ No newline at end of file
+            </Box>
+            <Box
+              flexBasis="40%"
+              width="100%"
+              display="flex"
+              justifyContent="space-around"
+            >
+              <Box mt={6}>
+                {
+                  <Flex flexDirection={["row", "row", "column"]}>
+                    <Text fontSize="20px" fontWeight="bold">
+                      Estimated Total Profit
+                    </Text>
+                    <Flex
+                      alignItems="center"
+                      mt={["4", "4", "0"]}
+                      justifyContent="center"
+                    >
+                      <Text
+                        fontSize="16px"
+                        color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
+                        marginLeft="30px"
+                        textAlign="center"
+                        mt={["-30px", "-15px", "2"]}
+                      >
+                        $ {formatAmount(content.estimatedTotalProfit)}
+                      </Text>{" "}
+                    </Flex>
+                  </Flex>
+                }
+              </Box>
+
+              <Box
+                my={3}
+                mx={1}
+                display={{ base: "none", md: "block", lg: "block" }}
+              >
+                <Divider orientation="vertical" height="84px" />
+              </Box>
+            </Box>
+            <Box
+              flexBasis="30%"
+              width="100%"
+              margin={["0", "0", "10px 20px"]}
+              justifySelf="end"
+            >
+              <Flex flexDirection="column" alignItems={{ base: "center" }}>
+                <Flex mb="5px">
+                  <Text marginTop="15px">Auto-Harvest</Text>
+                  <Circle
+                    size="20px"
+                    bg="#fff"
+                    display="inline-flex"
+                    marginLeft="10px"
+                    marginTop="17px"
+                    marginRight="10px"
+                  >
+                    <Tooltip label="Coming soon" fontSize="md" marginTop="15px">
+                      <QuestionOutlineIcon color="#120136" cursor="pointer" />
+                    </Tooltip>
+                  </Circle>
+                </Flex>
+                <Flex>
+                  <Switch
+                    disabled
+                    // onChange={handleChecked}
+                    // checked={!checked}
+                    className="react-switch"
+                  />
+                </Flex>
+              </Flex>
+            </Box>
+            <ProductModal
+              modal1Disclosure={modal1Disclosure}
+              closeDepositeModal={closeDepositeModal}
+              setDepositTokenValue={setDepositTokenValue}
+              depositTokenValue={depositTokenValue}
+              showMaxValue={showMaxValue}
+              deposit={content.deposit}
+              minimumStakeAmount={minimumStakeAmount}
+              RGPBalance={RGPBalance}
+              showReferrerField={showReferrerField}
+              URLReferrerAddress={URLReferrerAddress}
+              setReferrerAddress={setReferrerAddress}
+              referrerAddress={referrerAddress}
+              handleSetReferralField={handleSetReferralField}
+              isReferrerCheck={isReferrerCheck}
+              depositInputHasError={depositInputHasError}
+              refAddressHasError={refAddressHasError}
+              depositValue={depositValue}
+              depositErrorButtonText={depositErrorButtonText}
+              confirmDeposit={confirmDeposit}
+              enoughApproval={enoughApproval}
+              account={account}
+              feeAmount={feeAmount}
+              allowance={content.poolAllowance}
+              approvalButton={approvalButton}
+              approveValueForRGP={approveValueForRGP}
+            />
+
+            <ProductModal
+              modal1Disclosure={modal2Disclosure}
+              closeDepositeModal={closeModal}
+              depositTokenValue={unstakeToken}
+              showMaxValue={showMaxValue}
+              deposit={content.deposit}
+              minimumStakeAmount={minimumStakeAmount}
+              depositInputHasError={inputHasError}
+              refAddressHasError={refAddressHasError}
+              depositValue={depositValue}
+              setDepositTokenValue={setUnstakeToken}
+              depositErrorButtonText={errorButtonText}
+              confirmDeposit={confirmUnstakeDeposit}
+              enoughApproval={enoughApproval}
+              account={account}
+              allowance={content.poolAllowance}
+              approvalButton={approvalButton}
+              approveValueForRGP={true}
+              RGPStaked={content.RGPStaked}
+            />
+          </Flex>
+        </Skeleton>
+      )}
+    </>
+  );
+};
+export default ShowProductFarmDetails;
diff --git a/src/pages/FarmingV2/ShowYieldFarmDetails.tsx b/src/pages/FarmingV2/ShowYieldFarmDetails.tsx
index ce865f25..173f2ecf 100644
--- a/src/pages/FarmingV2/ShowYieldFarmDetails.tsx
+++ b/src/pages/FarmingV2/ShowYieldFarmDetails.tsx
@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from "react";
-import {ethers} from "ethers";
+import React, { useEffect, useState } from "react";
+import { ethers } from "ethers";
 import Web3 from "web3";
 import {
   Box,
@@ -25,15 +25,15 @@ import {
   useDisclosure,
   useMediaQuery,
 } from "@chakra-ui/react";
-import {QuestionOutlineIcon} from "@chakra-ui/icons";
-import {SupportedChainId} from "../../constants/chains";
+import { QuestionOutlineIcon } from "@chakra-ui/icons";
+import { SupportedChainId } from "../../constants/chains";
 import Switch from "react-switch";
-import {DARK_THEME, farmSection} from "./index";
-import {addToast} from "../../components/Toast/toastSlice";
-import {useDispatch, useSelector} from "react-redux";
-import {setOpenModal, TrxState} from "../../state/application/reducer";
+import { DARK_THEME, farmSection } from "./index";
+import { addToast } from "../../components/Toast/toastSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { setOpenModal, TrxState } from "../../state/application/reducer";
 import { setLoadingState } from "../../state/farm/actions";
-import {ExplorerDataType, getExplorerLink} from "../../utils/getExplorerLink";
+import { ExplorerDataType, getExplorerLink } from "../../utils/getExplorerLink";
 import {
   MasterChefV2Contract,
   RGPSpecialPool,
@@ -49,32 +49,38 @@ import {
   RGPSPECIALPOOLADDRESSES2,
   SMARTSWAPLP_TOKEN1ADDRESSES,
 } from "../../utils/addresses";
-import {clearInputInfo, convertFromWei, convertToNumber} from "../../utils";
-import {useRGPBalance} from "../../utils/hooks/useBalances";
-import {updateFarmAllowances} from "../../state/farm/actions";
-import {useActiveWeb3React} from "../../utils/hooks/useActiveWeb3React";
+import { clearInputInfo, convertFromWei, convertToNumber } from "../../utils";
+import { useRGPBalance } from "../../utils/hooks/useBalances";
+import { updateFarmAllowances } from "../../state/farm/actions";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
 import Joyride from "react-joyride";
-import {steps} from "../../components/Onboarding/YieldSteps";
-import {Contract} from "@ethersproject/contracts";
-import {calculateGas} from "../Swap/components/sendToken";
-import {useUserGasPricePercentage} from "../../state/gas/hooks";
+import { steps } from "../../components/Onboarding/YieldSteps";
+import { Contract } from "@ethersproject/contracts";
+import { calculateGas } from "../Swap/components/sendToken";
+import { useUserGasPricePercentage } from "../../state/gas/hooks";
 
-import {useFetchYieldFarmDetails, useUpdateFarm} from "../../state/newfarm/hooks";
-import {useNewYieldFarmDetails, useUpdateNewFarm} from "../../state/LPFarm/hooks";
+import {
+  useFetchYieldFarmDetails,
+  useUpdateFarm,
+} from "../../state/newfarm/hooks";
+import {
+  useNewYieldFarmDetails,
+  useUpdateNewFarm,
+} from "../../state/LPFarm/hooks";
 import {
   GButtonClicked,
   GButtonIntialized,
   GFarmingFailedTransaction,
   GFarmingSpecialPoolReferral,
-  GFarmingSuccessTransaction
+  GFarmingSuccessTransaction,
 } from "../../components/G-analytics/gFarming";
-import {ZERO_ADDRESS} from "../../constants";
+import { ZERO_ADDRESS } from "../../constants";
 
 const ShowYieldFarmDetails = ({
   content,
   wallet,
   URLReferrerAddress,
-   refreshSpecialData,
+  refreshSpecialData,
   LoadingState,
   section,
   showYieldfarm,
@@ -93,11 +99,11 @@ const ShowYieldFarmDetails = ({
     poolAllowance: any;
     RGPEarned: string;
     poolVersion: number | string;
-    type?:string;
+    type?: string;
   };
   wallet: any;
-  URLReferrerAddress:string;
-  refreshSpecialData:()=>void;
+  URLReferrerAddress: string;
+  refreshSpecialData: () => void;
   LoadingState: boolean;
   section: string;
   showYieldfarm: boolean;
@@ -145,19 +151,16 @@ const ShowYieldFarmDetails = ({
 
   // const data = useGetFarmData(reload, setReload);
 
+  const { loadingState } = useUpdateFarm({ reload, setReload, content });
 
-  const {loadingState} = useUpdateFarm({reload, setReload, content});
-
-  useFetchYieldFarmDetails({content, section, setLoading, loading});
+  useFetchYieldFarmDetails({ content, section, setLoading, loading });
 
   //const {loadingFarm} = useUpdateNewFarm({reload, setReload, content});
 
- // useNewYieldFarmDetails({content, section, setLoading, loading});
-
-
+  // useNewYieldFarmDetails({content, section, setLoading, loading});
 
   const closeModal = () => {
-    GButtonIntialized("close unstaked",content.deposit,"v2")
+    GButtonIntialized("close unstaked", content.deposit, "v2");
     modal2Disclosure.onClose();
   };
   // useUpdate(reload, setReload, contentid, setContentId);
@@ -177,22 +180,17 @@ const ShowYieldFarmDetails = ({
       setIsReferrerCheck(false);
     }
   };
-useEffect(()=>{
-  const checkEnoughApproval = (allowance: any, balance: any) => {
-    // console.log("checkEnoughApproval",allowance.toString(),balance);
-    if (allowance && balance) {
-
-      let approve = parseFloat(allowance) >= parseFloat(depositTokenValue);
-      // let approve = content.type === "RGP"
-      //   ? allowance.gte(ethers.utils.parseEther(balance))
-      //   : parseFloat(allowance) >= parseFloat(depositTokenValue);
-        console.log(parseFloat(allowance), parseFloat(depositTokenValue),{approve})
-        approve ? setEnoughApproval(true) : setEnoughApproval(false)
-    }
-    return true;
-  };
-  checkEnoughApproval(content.poolAllowance,content.availableToken)
-},[depositTokenValue])
+  useEffect(() => {
+    const checkEnoughApproval = (allowance: any, balance: any) => {
+      if (allowance && balance) {
+        let approve = parseFloat(allowance) >= parseFloat(depositTokenValue);
+
+        approve ? setEnoughApproval(true) : setEnoughApproval(false);
+      }
+      return true;
+    };
+    checkEnoughApproval(content.poolAllowance, content.availableToken);
+  }, [depositTokenValue]);
   useEffect(() => {
     const poolAllowance = async (contract: Contract) => {
       if (account) {
@@ -224,7 +222,6 @@ useEffect(()=>{
           account,
           RGPSPECIALPOOLADDRESSES2[chainId as number]
         );
-        console.log({rgpApproval})
         return !(rgpApproval.toString() <= 0);
       }
     };
@@ -236,14 +233,13 @@ useEffect(()=>{
         const specialPoolV1Approval = await specialPoolV1Allowance(rgp);
         changeApprovalButton(true, specialPoolV1Approval);
       } else if (content.deposit === "RGP" && Number(content.id) === 13) {
-       
         const specialPoolV2Approval = await specialPoolV2Allowance(rgp);
 
         changeApprovalButton(true, specialPoolV2Approval);
       } else {
         const pool = await smartSwapLPTokenPoolTwo(content.address, library);
         const approvalForRGPBNB = await poolAllowance(pool);
-        console.log({approvalForRGPBNB,rgpApproval})
+
         changeApprovalButton(approvalForRGPBNB, rgpApproval);
       }
     };
@@ -281,7 +277,7 @@ useEffect(()=>{
           })
         );
         const rgp = await rigelToken(RGP[chainId as number], library);
-        const walletBal = (await rgp.balanceOf(account)) ;
+        const walletBal = await rgp.balanceOf(account);
         const data = await rgp.approve(
           RGPSPECIALPOOLADDRESSES[chainId as number],
           walletBal,
@@ -295,7 +291,7 @@ useEffect(()=>{
         const { confirmations, status } = await fetchTransactionData(data);
         if (confirmations >= 3) {
           setApproveValueForRGP(true);
-          GFarmingSuccessTransaction("special pool", "approval",  "RGP","v1")
+          GFarmingSuccessTransaction("special pool", "approval", "RGP", "v1");
           dispatch(
             setOpenModal({
               trxState: TrxState.TransactionSuccessful,
@@ -304,9 +300,15 @@ useEffect(()=>{
           );
         }
         getAllowances();
-      } catch (error:any) {
+      } catch (error: any) {
         console.error(error);
-        GFarmingFailedTransaction("special pool", "approval", error.message, "RGP","v1")
+        GFarmingFailedTransaction(
+          "special pool",
+          "approval",
+          error.message,
+          "RGP",
+          "v1"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -327,9 +329,9 @@ useEffect(()=>{
             trxState: TrxState.WaitingForConfirmation,
           })
         );
-        
+
         const rgp = await rigelToken(RGP[chainId as number], library);
-        const walletBal = (await rgp.balanceOf(account)) ;
+        const walletBal = await rgp.balanceOf(account);
         const data = await rgp.approve(
           RGPSPECIALPOOLADDRESSES2[chainId as number],
           walletBal,
@@ -343,7 +345,7 @@ useEffect(()=>{
         const { confirmations, status } = await fetchTransactionData(data);
         if (confirmations >= 3) {
           setApproveValueForRGP(true);
-          GFarmingSuccessTransaction("special pool", "approval", "RGP","v2")
+          GFarmingSuccessTransaction("special pool", "approval", "RGP", "v2");
           dispatch(
             setOpenModal({
               trxState: TrxState.TransactionSuccessful,
@@ -352,9 +354,15 @@ useEffect(()=>{
           );
         }
         getAllowances();
-      } catch (error:any) {
+      } catch (error: any) {
         console.error(error);
-        GFarmingFailedTransaction("special pool", "approval", error.message, "RGP","v2")
+        GFarmingFailedTransaction(
+          "special pool",
+          "approval",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -367,17 +375,16 @@ useEffect(()=>{
   };
 
   const setApprove = (val: string) => {
-    console.log({approveValueForOtherToken,approveValueForRGP})
     if (approveValueForOtherToken && approveValueForRGP) {
-      GButtonClicked("unstake",content.deposit,"v2")
+      GButtonClicked("unstake", content.deposit, "v2");
       modal2Disclosure.onOpen();
     } else {
-      GButtonClicked("approval",content.deposit,"v2")
+      GButtonClicked("approval", content.deposit, "v2");
       checkUser(val);
     }
   };
 
-  const checkUser = async (val :string) => {
+  const checkUser = async (val: string) => {
     if (content.deposit === "RGP" && Number(content.id) === 1) {
       await RGPSpecialPoolV1Approval();
       setApproveValueForOtherToken(true);
@@ -390,11 +397,11 @@ useEffect(()=>{
       const pool = await smartSwapLPTokenPoolTwo(content.address, library);
       if (!approveValueForOtherToken && !approveValueForRGP) {
         await RGPApproval();
-        await LPApproval(pool,content.deposit);
+        await LPApproval(pool, content.deposit);
       } else if (!approveValueForRGP) {
         await RGPApproval();
       } else {
-        await LPApproval(pool,content.deposit);
+        await LPApproval(pool, content.deposit);
       }
       setApproveValueForOtherToken(true);
       setApproveValueForRGP(true);
@@ -402,14 +409,14 @@ useEffect(()=>{
   };
 
   const openDepositeModal = () => {
-    GButtonClicked("stake",content.deposit,"v2")
+    GButtonClicked("stake", content.deposit, "v2");
     //if (approveValueForOtherToken && approveValueForRGP) {
     modal1Disclosure.onOpen();
     // }
   };
 
   const closeDepositeModal = () => {
-    GButtonClicked("close staked modal",content.deposit,"v2")
+    GButtonClicked("close staked modal", content.deposit, "v2");
     modal1Disclosure.onClose();
   };
 
@@ -443,10 +450,7 @@ useEffect(()=>{
   const getAllowances = async () => {
     if (account) {
       try {
-        const [
-          rigel,
-          pool1,
-        ] = await Promise.all([
+        const [rigel, pool1] = await Promise.all([
           rigelToken(RGP[chainId as number], library),
           smartSwapLPTokenPoolOne(
             SMARTSWAPLP_TOKEN1ADDRESSES[chainId as number],
@@ -454,11 +458,7 @@ useEffect(()=>{
           ),
         ]);
 
-        const [
-          pool1Allowance,
-        ] = await Promise.all([
-          allowance(pool1),
-        ]);
+        const [pool1Allowance] = await Promise.all([allowance(pool1)]);
         let rigelAllowance;
         let rigelAllowance2;
         if (RGPSPECIALPOOLADDRESSES[chainId as number]) {
@@ -469,7 +469,7 @@ useEffect(()=>{
         } else {
           rigelAllowance = pool1Allowance;
         }
-        
+
         if (RGPSPECIALPOOLADDRESSES2[chainId as number]) {
           rigelAllowance2 = await rigel.allowance(
             account,
@@ -477,19 +477,10 @@ useEffect(()=>{
           );
         }
 
-
         if (Number(chainId) === Number(SupportedChainId.BINANCE)) {
-          dispatch(
-            updateFarmAllowances([
-              rigelAllowance2
-            ])
-          );
+          dispatch(updateFarmAllowances([rigelAllowance2]));
         } else {
-          dispatch(
-            updateFarmAllowances([
-              rigelAllowance2
-            ])
-          );
+          dispatch(updateFarmAllowances([rigelAllowance2]));
         }
       } catch (error) {
         console.error(error, "something went wrong");
@@ -595,7 +586,7 @@ useEffect(()=>{
   const showMaxValue = async (deposit: any, input: any) => {
     try {
       if (input === "deposit") {
-        GButtonClicked(`max_button for ${input}`,content.deposit,"v2")
+        GButtonClicked(`max_button for ${input}`, content.deposit, "v2");
         setDepositTokenValue(content.availableToken);
       } else if (input === "unstake") {
         setUnstakeToken(
@@ -610,12 +601,11 @@ useEffect(()=>{
       );
     }
   };
- 
 
   async function confirmUnstakeDeposit(val: string) {
     try {
       setUnstakeButtonValue("Pending Confirmation");
-      GButtonIntialized("unstake",content.deposit,"v2")
+      GButtonIntialized("unstake", content.deposit, "v2");
       dispatch(
         setOpenModal({
           message: `Unstaking ${unstakeToken} ${val}`,
@@ -629,11 +619,10 @@ useEffect(()=>{
         } else if (val === "RGP" && Number(content.id) === 13) {
           await RGPUnstakeV2(val);
         } else {
-          tokensWithdrawal(content.id,val);
+          tokensWithdrawal(content.id, val);
         }
       }
-    } catch (err) {
-      console.log(err);
+    } catch (err: any) {
       dispatch(
         setOpenModal({
           message: `Failed transaction`,
@@ -653,7 +642,7 @@ useEffect(()=>{
   };
 
   // withdrawal for the Liquidity Provider tokens for all pools
-  const tokensWithdrawal = async (pid: number,val:string) => {
+  const tokensWithdrawal = async (pid: number, val: string) => {
     if (account) {
       try {
         const lpTokens = await MasterChefV2Contract(
@@ -700,7 +689,7 @@ useEffect(()=>{
           hash,
           ExplorerDataType.TRANSACTION
         );
-        GFarmingSuccessTransaction("farming", "unstake", val,"v2")
+        GFarmingSuccessTransaction("farming", "unstake", val, "v2");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
@@ -719,11 +708,8 @@ useEffect(()=>{
           })
         );
         setReload(true);
-        // dispatch the getTokenStaked action from here when data changes
-        //callRefreshFarm(confirmations, status);
-      } catch (e:any) {
-        console.log(e);
-        GFarmingFailedTransaction("farming", "unstake", e.message, val,"v2")
+      } catch (e: any) {
+        GFarmingFailedTransaction("farming", "unstake", e.message, val, "v2");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
@@ -736,8 +722,8 @@ useEffect(()=>{
   const harvestTokens = async (id: string | number) => {
     if (account) {
       try {
-        GButtonClicked("harvest",content.deposit,"v2")
-        GButtonIntialized("harvest",content.deposit,"v2")
+        GButtonClicked("harvest", content.deposit, "v2");
+        GButtonIntialized("harvest", content.deposit, "v2");
         dispatch(
           setOpenModal({
             message: `Harvesting RGP ${content.RGPEarned} Tokens`,
@@ -779,7 +765,7 @@ useEffect(()=>{
           const amountOfRgbSpecial = convertToNumber(logs[1].data);
 
           if (confirmations >= 1 && status) {
-            GFarmingSuccessTransaction("special pool", "harvest", "RGP","v1")
+            GFarmingSuccessTransaction("special pool", "harvest", "RGP", "v1");
             dispatch(
               setOpenModal({
                 trxState: TrxState.TransactionSuccessful,
@@ -824,8 +810,8 @@ useEffect(()=>{
           const amountOfRgbSpecial = convertToNumber(logs[1].data);
 
           if (confirmations >= 1 && status) {
-            GFarmingSuccessTransaction("special pool", "harvest", "RGP","v2")
-            refreshSpecialData()
+            GFarmingSuccessTransaction("special pool", "harvest", "RGP", "v2");
+            refreshSpecialData();
             dispatch(
               setOpenModal({
                 trxState: TrxState.TransactionSuccessful,
@@ -834,7 +820,6 @@ useEffect(()=>{
                 )} RGP `,
               })
             );
-
           }
         } else {
           const lpTokens = await MasterChefV2Contract(
@@ -871,7 +856,7 @@ useEffect(()=>{
           const { hash } = withdraw;
 
           if (confirmations >= 1 && status) {
-            GFarmingSuccessTransaction("farming", "harvest", "RGP","v2")
+            GFarmingSuccessTransaction("farming", "harvest", "RGP", "v2");
             dispatch(
               setOpenModal({
                 trxState: TrxState.TransactionSuccessful,
@@ -880,7 +865,7 @@ useEffect(()=>{
                 )} RGP `,
               })
             );
-            refreshSpecialData()
+            refreshSpecialData();
           }
 
           const explorerLink = getExplorerLink(
@@ -898,26 +883,30 @@ useEffect(()=>{
           );
           setReload(true);
         }
-      } catch (error:any) {
-        GFarmingFailedTransaction( "special pool","harvest", error.message, "RGP","v2")
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "harvest",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
             message: `Transaction was not successful`,
           })
         );
-
       }
     }
   };
 
   // deposit for the Liquidity Provider tokens for all pools
-  const LPDeposit = async (pid: any,val:string) => {
+  const LPDeposit = async (pid: any, val: string) => {
     if (account) {
       try {
         if (parseFloat(content.tokenStaked[1]) == 0) {
           if (parseFloat(RGPBalance) < parseFloat(farmingFee)) {
-            
             dispatch(
               setOpenModal({
                 trxState: TrxState.TransactionFailed,
@@ -961,7 +950,7 @@ useEffect(()=>{
             const { confirmations, status, logs } = await fetchTransactionData(
               data
             );
-            GFarmingSuccessTransaction("farming", "stake", val,"v2")
+            GFarmingSuccessTransaction("farming", "stake", val, "v2");
             dispatch(
               setOpenModal({
                 trxState: TrxState.TransactionSuccessful,
@@ -1016,14 +1005,14 @@ useEffect(()=>{
               message: `Successfully deposited`,
             })
           );
-          GFarmingSuccessTransaction("farming", "stake", val,"v2")
+          GFarmingSuccessTransaction("farming", "stake", val, "v2");
           setDeposited(true);
           setReload(true);
           setContentId(content.deposit === "RGP" ? undefined : content.id);
           //  callRefreshFarm(confirmations, status);
         }
       } catch (error: any) {
-        GFarmingFailedTransaction("farming", "stake", error.message, val,"v2")
+        GFarmingFailedTransaction("farming", "stake", error.message, val, "v2");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
@@ -1035,7 +1024,7 @@ useEffect(()=>{
 
   const confirmDeposit = async (val: any) => {
     setDepositValue("Pending Confirmation");
-    GButtonIntialized("deposit",content.deposit,"v2")
+    GButtonIntialized("deposit", content.deposit, "v2");
     dispatch(
       setOpenModal({
         message: `Staking ${depositTokenValue} ${val}`,
@@ -1049,12 +1038,11 @@ useEffect(()=>{
         } else if (val === "RGP" && Number(content.id) === 13) {
           await RGPuseStakeV2();
         } else {
-          LPDeposit(content.id,val);
+          LPDeposit(content.id, val);
         }
       }
-    } catch (error:any) {
-      console.log(error);
-      GFarmingFailedTransaction("farming", "stake", error.message, val,"v2")
+    } catch (error: any) {
+      GFarmingFailedTransaction("farming", "stake", error.message, val, "v2");
       dispatch(
         setOpenModal({
           message: `Failed to deposit LP tokens.`,
@@ -1068,8 +1056,6 @@ useEffect(()=>{
     clearInputInfo(setDepositTokenValue, setDepositValue, "Confirm");
   };
 
- 
-
   const RGPuseStake = async () => {
     if (account) {
       try {
@@ -1107,17 +1093,21 @@ useEffect(()=>{
           }
         );
         const { confirmations, status } = await fetchTransactionData(data);
-        GFarmingSuccessTransaction("special pool", "staking", "RGP","v1")
+        GFarmingSuccessTransaction("special pool", "staking", "RGP", "v1");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
             message: `Successfully staked ${depositTokenValue} RGP `,
           })
         );
-        // callRefreshFarm(confirmations, status);
-      } catch (error:any) {
-        console.log(error);
-        GFarmingFailedTransaction("special pool", "stake", error.message, "RGP","v1")
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "stake",
+          error.message,
+          "RGP",
+          "v1"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -1134,7 +1124,9 @@ useEffect(()=>{
           RGPSPECIALPOOLADDRESSES2[chainId as number],
           library
         );
-       GFarmingSpecialPoolReferral(referrerAddress===ZERO_ADDRESS ? false:true)
+        GFarmingSpecialPoolReferral(
+          referrerAddress === ZERO_ADDRESS ? false : true
+        );
         const data = await specialPool.stake(
           ethers.utils.parseEther(depositTokenValue.toString()),
           referrerAddress,
@@ -1145,10 +1137,10 @@ useEffect(()=>{
           }
         );
         await fetchTransactionData(data);
-        GFarmingSuccessTransaction("special pool", "stake", "RGP","v2") //122
-      
-      refreshSpecialData()
-        
+        GFarmingSuccessTransaction("special pool", "stake", "RGP", "v2"); //122
+
+        refreshSpecialData();
+
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
@@ -1156,15 +1148,19 @@ useEffect(()=>{
           })
         );
         // callRefreshFarm(confirmations, status);
-        setReload(true); 
-      } catch (error:any) {
-        console.log(error);
-        GFarmingFailedTransaction("special pool", "stake", error.message, "RGP","v2")
+        setReload(true);
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "stake",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
             trxState: TrxState.TransactionFailed,
-            
           })
         );
       }
@@ -1207,19 +1203,22 @@ useEffect(()=>{
           }
         );
         const { confirmations, status } = await fetchTransactionData(data);
-        GFarmingSuccessTransaction("special pool", "unstake", "RGP","v1")
+        GFarmingSuccessTransaction("special pool", "unstake", "RGP", "v1");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
             message: `Successfully unstaked ${unstakeToken} RGP `,
           })
         );
-        refreshSpecialData()
-        // dispatch the getTokenStaked action from here when data changes
-        //  callRefreshFarm(confirmations, status);
-      } catch (e:any) {
-        console.log(e);
-        GFarmingFailedTransaction("special pool", "unstake", e.message, "RGP","v1")
+        refreshSpecialData();
+      } catch (e: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "unstake",
+          e.message,
+          "RGP",
+          "v1"
+        );
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
@@ -1230,7 +1229,7 @@ useEffect(()=>{
     }
   };
 
-  const RGPUnstakeV2 = async (val:string) => {
+  const RGPUnstakeV2 = async (val: string) => {
     if (account) {
       try {
         const specialPool = await RGPSpecialPool2(
@@ -1265,19 +1264,25 @@ useEffect(()=>{
           }
         );
         const { confirmations, status } = await fetchTransactionData(data);
-        GFarmingSuccessTransaction("special pool", "unstake", "RGP","v2")
+        GFarmingSuccessTransaction("special pool", "unstake", "RGP", "v2");
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionSuccessful,
             message: `Successfully unstaked ${unstakeToken} RGP `,
           })
         );
-        
-        refreshSpecialData()
+
+        refreshSpecialData();
         // dispatch the getTokenStaked action from here when data changes
         //  callRefreshFarm(confirmations, status);
-      } catch (error:any) {
-        GFarmingFailedTransaction("special pool", "unstake", error.message, "RGP","v2")
+      } catch (error: any) {
+        GFarmingFailedTransaction(
+          "special pool",
+          "unstake",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             trxState: TrxState.TransactionFailed,
@@ -1288,7 +1293,7 @@ useEffect(()=>{
     }
   };
 
-  const LPApproval = async (contract: any,deposit:string) => {
+  const LPApproval = async (contract: any, deposit: string) => {
     if (account) {
       try {
         dispatch(
@@ -1297,7 +1302,7 @@ useEffect(()=>{
             trxState: TrxState.WaitingForConfirmation,
           })
         );
-        const walletBal = (await contract.balanceOf(account)) ;
+        const walletBal = await contract.balanceOf(account);
         const data = await contract.approve(
           MASTERCHEFV2ADDRESSES[chainId as number],
           walletBal,
@@ -1309,7 +1314,7 @@ useEffect(()=>{
         );
         setApprovalLoading(true);
         const { confirmations, status } = await fetchTransactionData(data);
-        GFarmingSuccessTransaction("farming", "approval", deposit,"v2")
+        GFarmingSuccessTransaction("farming", "approval", deposit, "v2");
         if (status) {
           setApproveValueForOtherToken(true);
           dispatch(
@@ -1321,10 +1326,14 @@ useEffect(()=>{
         }
         getAllowances();
         setReload(true);
-      } catch (e:any) {
-        // props.showErrorMessage(e);
-        // console.log(e:any);
-        GFarmingFailedTransaction("farming", "approval", e.message, deposit ,"v2")
+      } catch (e: any) {
+        GFarmingFailedTransaction(
+          "farming",
+          "approval",
+          e.message,
+          deposit,
+          "v2"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -1341,7 +1350,7 @@ useEffect(()=>{
     switch (content?.type) {
       case "LP":
         const poolOne = await smartSwapLPTokenPoolOne(content.address, library);
-        LPApproval(poolOne,content.deposit);
+        LPApproval(poolOne, content.deposit);
         break;
 
       default:
@@ -1350,7 +1359,6 @@ useEffect(()=>{
     }
   };
 
-
   const RGPApproval = async () => {
     if (account) {
       try {
@@ -1361,7 +1369,7 @@ useEffect(()=>{
           })
         );
         const rgp = await rigelToken(RGP[chainId as number], library);
-        const walletBal = (await rgp.balanceOf(account)) ;
+        const walletBal = await rgp.balanceOf(account);
         const data = await rgp.approve(
           MASTERCHEFV2ADDRESSES[chainId as number],
           walletBal,
@@ -1375,7 +1383,7 @@ useEffect(()=>{
         const { confirmations, status } = await fetchTransactionData(data);
         if (confirmations >= 3) {
           setApproveValueForRGP(true);
-          GFarmingSuccessTransaction("farming", "approval", "RGP","v2")
+          GFarmingSuccessTransaction("farming", "approval", "RGP", "v2");
           dispatch(
             setOpenModal({
               trxState: TrxState.TransactionSuccessful,
@@ -1385,9 +1393,15 @@ useEffect(()=>{
         }
         getAllowances();
         setReload(true);
-      } catch (error:any) {
+      } catch (error: any) {
         console.error(error);
-        GFarmingFailedTransaction("farming", "approval", error.message ,"RGP","v2")
+        GFarmingFailedTransaction(
+          "farming",
+          "approval",
+          error.message,
+          "RGP",
+          "v2"
+        );
         dispatch(
           setOpenModal({
             message: `Transaction failed`,
@@ -1416,21 +1430,22 @@ useEffect(()=>{
 
   const approvalButton = (LPToken: any) => (
     <Button
-      my='2'
-      mx='auto'
-      color='rgba(190, 190, 190, 1)'
-      width='100%'
-      background='rgba(64, 186, 213, 0.15)'
-      cursor='pointer'
-      border='none'
-      borderRadius='0px'
-      padding='10px'
-      height='50px'
-      fontSize='16px'
+      my="2"
+      mx="auto"
+      color="rgba(190, 190, 190, 1)"
+      width="100%"
+      background="rgba(64, 186, 213, 0.15)"
+      cursor="pointer"
+      border="none"
+      borderRadius="0px"
+      padding="10px"
+      height="50px"
+      fontSize="16px"
       _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
       onClick={() => {
-        GButtonIntialized("approval",content.deposit,"v2")
-        approveLPToken(LPToken)}}
+        GButtonIntialized("approval", content.deposit, "v2");
+        approveLPToken(LPToken);
+      }}
     >
       {approvalLoading ? "Approving..." : "Approve"} {LPToken}
     </Button>
@@ -1439,39 +1454,39 @@ useEffect(()=>{
   return (
     <>
       {loading ? (
-        <Box p='6' border='1px' borderColor={filterBorderColor}>
+        <Box p="6" border="1px" borderColor={filterBorderColor}>
           <Flex
             flexDirection={isMobileDevice ? "column" : "row"}
             justifyContent={isMobileDevice ? "center" : "space-between"}
             alignItems={isMobileDevice ? "center" : undefined}
           >
-            <Flex flexDirection='column'>
-              <Skeleton mt='4' mb={2} height='20px' w='208px' />
+            <Flex flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
 
               <Flex>
-                <Skeleton mr={2} height='20px' w='100px' />
-                <Skeleton height='20px' w='100px' />
+                <Skeleton mr={2} height="20px" w="100px" />
+                <Skeleton height="20px" w="100px" />
               </Flex>
             </Flex>
 
-            <Flex ml={2} flexDirection='column'>
-              <Skeleton mt='4' mb={2} height='20px' w='208px' />
-              <Skeleton height='20px' w='208px' />
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
             </Flex>
 
-            <Flex ml={2} flexDirection='column'>
-              <Skeleton mt='4' mb={2} height='20px' w='208px' />
-              <Skeleton height='20px' w='208px' />
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
             </Flex>
 
-            <Flex ml={2} flexDirection='column'>
-              <Skeleton mt='4' mb={2} height='20px' w='208px' />
-              <Skeleton height='20px' w='208px' />
+            <Flex ml={2} flexDirection="column">
+              <Skeleton mt="4" mb={2} height="20px" w="208px" />
+              <Skeleton height="20px" w="208px" />
             </Flex>
           </Flex>
         </Box>
       ) : (
-        <Skeleton isLoaded={ !loadingState}>
+        <Skeleton isLoaded={!loadingState}>
           <Joyride
             steps={steps}
             run={run}
@@ -1492,19 +1507,19 @@ useEffect(()=>{
               flexDirection={["column", "column", "row"]}
               color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
               background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
-              padding='0 20px'
-              paddingBottom='4px'
+              padding="0 20px"
+              paddingBottom="4px"
               border={
                 mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
               }
-              width='100%'
+              width="100%"
             >
               <Box
-                flexBasis='35%'
-                width='100%'
-                textAlign='right'
-                display='flex'
-                justifyContent='space-around'
+                flexBasis="35%"
+                width="100%"
+                textAlign="right"
+                display="flex"
+                justifyContent="space-around"
               >
                 <Box>
                   <Flex
@@ -1513,21 +1528,21 @@ useEffect(()=>{
                   >
                     <Text
                       color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                      fontSize='20px'
-                      marginRight='10px'
-                      fontWeight='bold'
+                      fontSize="20px"
+                      marginRight="10px"
+                      fontWeight="bold"
                     >
                       <Tooltip
                         hasArrow
                         label={content.tokensStaked[1]}
-                        bg='gray.300'
-                        color='black'
+                        bg="gray.300"
+                        color="black"
                       >
                         {parseFloat(content.tokensStaked[1]).toFixed(4)}
                       </Tooltip>
                     </Text>
                     <Text
-                      fontSize='16px'
+                      fontSize="16px"
                       color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
                     >
                       {content.deposit} Tokens Staked
@@ -1536,23 +1551,24 @@ useEffect(()=>{
 
                   <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
                     <Button
-                      w='45%'
-                      h='40px'
-                      borderRadius='6px'
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='6'
+                      border="0"
+                      mb="4"
+                      mr="6"
                       disabled={
                         approveValueForRGP &&
                         approveValueForOtherToken &&
                         parseFloat(content.tokensStaked[1]) <= 0
                       }
-                      padding='10px 40px'
-                      cursor='pointer'
+                      padding="10px 40px"
+                      cursor="pointer"
                       onClick={() => {
-                        setApprove(content.deposit)}}
+                        setApprove(content.deposit);
+                      }}
                       className={
                         approveValueForRGP && approveValueForOtherToken
                           ? "unstake"
@@ -1564,20 +1580,20 @@ useEffect(()=>{
                         : "Approve"}
                     </Button>
                     <Button
-                      w='45%'
-                      h='40px'
-                      borderRadius='6px'
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
                       bg={
                         mode === DARK_THEME && !approveValueForRGP
                           ? "#319EF6"
                           : "#4A739B"
                       }
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='6'
-                      padding='10px 40px'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      padding="10px 40px"
+                      cursor="pointer"
                       disabled={
                         !approveValueForRGP || !approveValueForOtherToken
                       }
@@ -1593,25 +1609,25 @@ useEffect(()=>{
                   my={3}
                   display={{ base: "none", md: "block", lg: "block" }}
                 >
-                  <Divider orientation='vertical' height='84px' />
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
               </Box>
               {/* margin={['0', '0', '0 20px']} */}
               <Box
-                flexBasis='35%'
-                width='100%'
-                display='flex'
-                justifyContent='space-around'
+                flexBasis="35%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
               >
                 {isMobileDevice ? (
-                  <Box width='60%' margin='0 auto'>
+                  <Box width="60%" margin="0 auto">
                     <Flex my={2}>
                       <Text
-                        fontSize='20px'
+                        fontSize="20px"
                         color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                        marginRight='10px'
-                        textAlign='center'
-                        fontWeight='bold'
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
                       >
                         {content.RGPEarned}
                       </Text>{" "}
@@ -1620,16 +1636,16 @@ useEffect(()=>{
                       </Text>
                     </Flex>
                     <Button
-                      w='95%'
-                      h='40px'
-                      margin='0 auto'
-                      borderRadius='6px'
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='2'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
                       _hover={{ color: "white" }}
                       disabled={parseFloat(content.RGPEarned) <= 0}
                       onClick={() => {
@@ -1643,14 +1659,14 @@ useEffect(()=>{
                     </Button>
                   </Box>
                 ) : (
-                  <Box margin='0 auto'>
+                  <Box margin="0 auto">
                     <Flex my={2}>
                       <Text
-                        fontSize='20px'
+                        fontSize="20px"
                         color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                        marginRight='10px'
-                        textAlign='center'
-                        fontWeight='bold'
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
                       >
                         {content.RGPEarned}
                       </Text>{" "}
@@ -1659,16 +1675,16 @@ useEffect(()=>{
                       </Text>
                     </Flex>
                     <Button
-                      w='95%'
-                      h='40px'
-                      margin='0 auto'
-                      borderRadius='6px'
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='2'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
                       _hover={{ color: "white" }}
                       disabled={parseFloat(content.RGPEarned) <= 0}
                       onClick={() => {
@@ -1687,33 +1703,33 @@ useEffect(()=>{
                   display={{ base: "none", md: "block", lg: "block" }}
                   mx={1}
                 >
-                  <Divider orientation='vertical' height='84px' />
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
               </Box>
 
               <Box
-                flexBasis='30%'
-                width='100%'
+                flexBasis="30%"
+                width="100%"
                 margin={["0", "0", "0 20px"]}
-                justifySelf='end'
+                justifySelf="end"
               >
-                <Flex flexDirection='column' alignItems={{ base: "center" }}>
-                  <Flex mb='5px'>
-                    <Text marginTop='15px'>Auto-Harvest</Text>
+                <Flex flexDirection="column" alignItems={{ base: "center" }}>
+                  <Flex mb="5px">
+                    <Text marginTop="15px">Auto-Harvest</Text>
                     <Circle
-                      size='20px'
-                      bg='#fff'
-                      display='inline-flex'
-                      marginLeft='10px'
-                      marginTop='17px'
-                      marginRight='10px'
+                      size="20px"
+                      bg="#fff"
+                      display="inline-flex"
+                      marginLeft="10px"
+                      marginTop="17px"
+                      marginRight="10px"
                     >
                       <Tooltip
-                        label='Coming soon'
-                        fontSize='md'
-                        marginTop='15px'
+                        label="Coming soon"
+                        fontSize="md"
+                        marginTop="15px"
                       >
-                        <QuestionOutlineIcon color='#120136' cursor='pointer' />
+                        <QuestionOutlineIcon color="#120136" cursor="pointer" />
                       </Tooltip>
                     </Circle>
                   </Flex>
@@ -1722,7 +1738,7 @@ useEffect(()=>{
                       disabled
                       onChange={handleChecked}
                       checked={!checked}
-                      className='react-switch'
+                      className="react-switch"
                     />
                   </Flex>
                 </Flex>
@@ -1733,30 +1749,30 @@ useEffect(()=>{
               flexDirection={["column", "column", "row"]}
               color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
               background={mode === DARK_THEME ? "#213345" : "#F2F5F8"}
-              padding='0 20px'
-              paddingBottom='4px'
+              padding="0 20px"
+              paddingBottom="4px"
               border={
                 mode === DARK_THEME ? "2px solid #324D68" : "2px solid #DEE6ED"
               }
-              width='100%'
+              width="100%"
             >
               <Box
-                flexBasis='35%'
-                width='100%'
-                textAlign='right'
-                display='flex'
-                justifyContent='space-around'
+                flexBasis="35%"
+                width="100%"
+                textAlign="right"
+                display="flex"
+                justifyContent="space-around"
               >
                 <Box>
-                   <Flex
+                  <Flex
                     my={2}
                     justify={{ base: "center", md: "none", lg: "none" }}
                   >
                     <Text
                       color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                      fontSize='20px'
-                      marginRight='10px'
-                      fontWeight='bold'
+                      fontSize="20px"
+                      marginRight="10px"
+                      fontWeight="bold"
                     >
                       <Tooltip
                         hasArrow
@@ -1765,8 +1781,8 @@ useEffect(()=>{
                             ? content?.tokenStaked[1]
                             : content.tokensStaked[1]
                         }
-                        bg='gray.300'
-                        color='black'
+                        bg="gray.300"
+                        color="black"
                       >
                         {parseFloat(
                           content.type !== "RGP"
@@ -1776,22 +1792,22 @@ useEffect(()=>{
                       </Tooltip>
                     </Text>
                     <Text
-                      fontSize='16px'
+                      fontSize="16px"
                       color={mode === DARK_THEME ? "#DCE5EF" : "#333333"}
                     >
                       {content.deposit} Tokens Staked
                     </Text>
-                  </Flex> 
+                  </Flex>
                   <Flex marginLeft={{ base: "20px", md: "none", lg: "none" }}>
                     <Button
-                      w='45%'
-                      h='40px'
-                      borderRadius='6px'
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4CAFFF" : "#319EF6"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='6'
+                      border="0"
+                      mb="4"
+                      mr="6"
                       disabled={
                         approveValueForRGP &&
                         approveValueForOtherToken &&
@@ -1801,8 +1817,8 @@ useEffect(()=>{
                             : content.tokensStaked[1]
                         ) <= 0
                       }
-                      padding='10px 40px'
-                      cursor='pointer'
+                      padding="10px 40px"
+                      cursor="pointer"
                       onClick={() => setApprove(content.deposit)}
                       className={
                         approveValueForRGP && approveValueForOtherToken
@@ -1815,20 +1831,20 @@ useEffect(()=>{
                         : "Approve"}
                     </Button>
                     <Button
-                      w='45%'
-                      h='40px'
-                      borderRadius='6px'
+                      w="45%"
+                      h="40px"
+                      borderRadius="6px"
                       bg={
                         mode === DARK_THEME && !approveValueForRGP
                           ? "#319EF6"
                           : "#4A739B"
                       }
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='6'
-                      padding='10px 40px'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="6"
+                      padding="10px 40px"
+                      cursor="pointer"
                       disabled={
                         !approveValueForRGP || !approveValueForOtherToken
                       }
@@ -1844,25 +1860,25 @@ useEffect(()=>{
                   my={3}
                   display={{ base: "none", md: "block", lg: "block" }}
                 >
-                  <Divider orientation='vertical' height='84px' />
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
               </Box>
               {/* margin={['0', '0', '0 20px']} */}
               <Box
-                flexBasis='30%'
-                width='100%'
-                display='flex'
-                justifyContent='space-around'
+                flexBasis="30%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
               >
                 {isMobileDevice ? (
-                  <Box width='60%' margin='0 auto'>
+                  <Box width="60%" margin="0 auto">
                     <Flex my={2}>
                       <Text
-                        fontSize='20px'
+                        fontSize="20px"
                         color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                        marginRight='10px'
-                        textAlign='center'
-                        fontWeight='bold'
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
                       >
                         {content.RGPEarned}
                       </Text>{" "}
@@ -1871,16 +1887,16 @@ useEffect(()=>{
                       </Text>
                     </Flex>
                     <Button
-                      w='95%'
-                      h='40px'
-                      margin='0 auto'
-                      borderRadius='6px'
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='2'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
                       _hover={{ color: "white" }}
                       disabled={parseFloat(content.RGPEarned) <= 0}
                       onClick={() => {
@@ -1894,14 +1910,14 @@ useEffect(()=>{
                     </Button>
                   </Box>
                 ) : (
-                  <Box margin='0 auto'>
+                  <Box margin="0 auto">
                     <Flex my={2}>
                       <Text
-                        fontSize='20px'
+                        fontSize="20px"
                         color={mode === DARK_THEME ? "#F1F5F8" : "#333333"}
-                        marginRight='10px'
-                        textAlign='center'
-                        fontWeight='bold'
+                        marginRight="10px"
+                        textAlign="center"
+                        fontWeight="bold"
                       >
                         {content.RGPEarned}
                       </Text>{" "}
@@ -1910,16 +1926,16 @@ useEffect(()=>{
                       </Text>
                     </Flex>
                     <Button
-                      w='95%'
-                      h='40px'
-                      margin='0 auto'
-                      borderRadius='6px'
+                      w="95%"
+                      h="40px"
+                      margin="0 auto"
+                      borderRadius="6px"
                       bg={mode === DARK_THEME ? "#4A739B" : "#999999"}
                       color={mode === DARK_THEME ? "#FFFFFF" : "#FFFFFF"}
-                      border='0'
-                      mb='4'
-                      mr='2'
-                      cursor='pointer'
+                      border="0"
+                      mb="4"
+                      mr="2"
+                      cursor="pointer"
                       _hover={{ color: "white" }}
                       disabled={parseFloat(content.RGPEarned) <= 0}
                       onClick={() => {
@@ -1938,39 +1954,39 @@ useEffect(()=>{
                   display={{ base: "none", md: "block", lg: "block" }}
                   mx={1}
                 >
-                  <Divider orientation='vertical' height='84px' />
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
               </Box>
 
               <Box
-                flexBasis='20%'
-                width='100%'
-                display='flex'
-                justifyContent='space-around'
+                flexBasis="20%"
+                width="100%"
+                display="flex"
+                justifyContent="space-around"
               >
                 <Box>
                   {
-                    <Flex marginTop='10px'>
-                      <Text fontSize='24px' marginTop='15px' fontWeight='bold'>
+                    <Flex marginTop="10px">
+                      <Text fontSize="24px" marginTop="15px" fontWeight="bold">
                         {FarmingFeeLoading ? (
-                          <Spinner speed='0.65s' color='#999999' />
+                          <Spinner speed="0.65s" color="#999999" />
                         ) : (
                           farmingFee
                         )}
                       </Text>
                       <Flex flexDirection={["column", "column", "column"]}>
                         <Text
-                          fontSize='16px'
+                          fontSize="16px"
                           color={mode === DARK_THEME ? "#999999" : "#999999"}
-                          textAlign='right'
-                          marginLeft='30px'
+                          textAlign="right"
+                          marginLeft="30px"
                         >
                           Minimum
                         </Text>{" "}
                         <Text
-                          fontSize='16px'
+                          fontSize="16px"
                           color={mode === DARK_THEME ? "#999999" : "#999999"}
-                          marginLeft='30px'
+                          marginLeft="30px"
                         >
                           Farming Fee
                         </Text>{" "}
@@ -1984,32 +2000,32 @@ useEffect(()=>{
                   mx={1}
                   display={{ base: "none", md: "block", lg: "block" }}
                 >
-                  <Divider orientation='vertical' height='84px' />
+                  <Divider orientation="vertical" height="84px" />
                 </Box>
               </Box>
               <Box
-                flexBasis='15%'
-                width='100%'
+                flexBasis="15%"
+                width="100%"
                 margin={["0", "0", "0 20px"]}
-                justifySelf='end'
+                justifySelf="end"
               >
-                <Flex flexDirection='column' alignItems={{ base: "center" }}>
-                  <Flex mb='5px'>
-                    <Text marginTop='15px'>Auto-Harvest</Text>
+                <Flex flexDirection="column" alignItems={{ base: "center" }}>
+                  <Flex mb="5px">
+                    <Text marginTop="15px">Auto-Harvest</Text>
                     <Circle
-                      size='20px'
-                      bg='#fff'
-                      display='inline-flex'
-                      marginLeft='10px'
-                      marginTop='17px'
-                      marginRight='10px'
+                      size="20px"
+                      bg="#fff"
+                      display="inline-flex"
+                      marginLeft="10px"
+                      marginTop="17px"
+                      marginRight="10px"
                     >
                       <Tooltip
-                        label='Coming soon'
-                        fontSize='md'
-                        marginTop='15px'
+                        label="Coming soon"
+                        fontSize="md"
+                        marginTop="15px"
                       >
-                        <QuestionOutlineIcon color='#120136' cursor='pointer' />
+                        <QuestionOutlineIcon color="#120136" cursor="pointer" />
                       </Tooltip>
                     </Circle>
                   </Flex>
@@ -2018,7 +2034,7 @@ useEffect(()=>{
                       disabled
                       onChange={handleChecked}
                       checked={!checked}
-                      className='react-switch'
+                      className="react-switch"
                     />
                   </Flex>
                 </Flex>
@@ -2034,26 +2050,26 @@ useEffect(()=>{
             >
               <ModalOverlay />
               <ModalContent
-                width='95vw'
-                borderRadius='6px'
-                paddingBottom='20px'
+                width="95vw"
+                borderRadius="6px"
+                paddingBottom="20px"
                 bgColor={bgColor}
-                minHeight='40vh'
+                minHeight="40vh"
               >
                 <ModalHeader
-                  fontSize='20px'
-                  fontWeight='regular'
+                  fontSize="20px"
+                  fontWeight="regular"
                   color={modalTextColor}
                 >
                   Deposit
                 </ModalHeader>
 
                 <ModalCloseButton
-                  bg='none'
+                  bg="none"
                   size={"sm"}
                   mt={3}
                   mr={3}
-                  cursor='pointer'
+                  cursor="pointer"
                   _focus={{ outline: "none" }}
                   p={"7px"}
                   border={"1px solid"}
@@ -2062,33 +2078,33 @@ useEffect(()=>{
                   <Text
                     color={modalTextColor}
                     mb={3}
-                    fontSize='14px'
-                    fontWeight='regular'
+                    fontSize="14px"
+                    fontWeight="regular"
                   >
                     Enter Amount
                   </Text>
-                  <InputGroup size='md'>
+                  <InputGroup size="md">
                     <Input
-                      placeholder='Enter RGP amount to stake'
-                      opacity='0.5'
-                      h='50px'
-                      borderRadius='6px'
-                      name='availableToken'
+                      placeholder="Enter RGP amount to stake"
+                      opacity="0.5"
+                      h="50px"
+                      borderRadius="6px"
+                      name="availableToken"
                       value={depositTokenValue}
                       onChange={(e) => setDepositTokenValue(e.target.value)}
-                      border='2px'
+                      border="2px"
                     />
-                    <InputRightElement marginRight='15px'>
+                    <InputRightElement marginRight="15px">
                       <Button
-                        color='rgba(64, 186, 213, 1)'
-                        border='none'
-                        borderRadius='0px'
-                        fontSize='13px'
-                        p='1'
-                        mt='10px'
-                        height='20px'
-                        cursor='pointer'
-                        background='none'
+                        color="rgba(64, 186, 213, 1)"
+                        border="none"
+                        borderRadius="0px"
+                        fontSize="13px"
+                        p="1"
+                        mt="10px"
+                        height="20px"
+                        cursor="pointer"
+                        background="none"
                         _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
                         onClick={() => showMaxValue(content.deposit, "deposit")}
                       >
@@ -2096,21 +2112,21 @@ useEffect(()=>{
                       </Button>
                     </InputRightElement>
                   </InputGroup>
-                  <Text color={modalTextColor2} fontSize='14px' mb={5} mt={3}>
+                  <Text color={modalTextColor2} fontSize="14px" mb={5} mt={3}>
                     RGP Available: {content.availableToken} {content.deposit}
                   </Text>
                   <Box display={showReferrerField ? "block" : "none"}>
-                    <Text color={modalTextColor} fontSize='14px' mb={3}>
+                    <Text color={modalTextColor} fontSize="14px" mb={3}>
                       Referrer address
                     </Text>
-                    <InputGroup size='md'>
+                    <InputGroup size="md">
                       <Input
                         placeholder="Enter referrer's address here"
-                        opacity='0.5'
-                        h='50px'
-                        borderRadius='6px'
-                        name='referralDetail'
-                        border='2px'
+                        opacity="0.5"
+                        h="50px"
+                        borderRadius="6px"
+                        name="referralDetail"
+                        border="2px"
                         disabled={URLReferrerAddress !== ""}
                         value={referrerAddress}
                         onChange={(e) => setReferrerAddress(e.target.value)}
@@ -2130,16 +2146,16 @@ useEffect(()=>{
                       <>
                         {/* Show Error Button */}
                         <Button
-                          my='2'
-                          variant='brand'
-                          mx='auto'
+                          my="2"
+                          variant="brand"
+                          mx="auto"
                           color={
                             depositValue === "Confirm" ||
                             depositValue === "Confirmed"
                               ? "rgba(190, 190, 190, 1)"
                               : "#40BAD5"
                           }
-                          width='100%'
+                          width="100%"
                           background={
                             depositValue === "Confirm" ||
                             depositValue === "Confirmed"
@@ -2152,12 +2168,12 @@ useEffect(()=>{
                             !depositTokenValue ||
                             (setShowReferrerField && referrerAddress === "")
                           }
-                          cursor='pointer'
-                          border='none'
-                          borderRadius='0px'
-                          padding='10px'
-                          height='50px'
-                          fontSize='16px'
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
                           _hover={
                             depositValue === "Confirm" ||
                             depositValue === "Confirmed"
@@ -2173,22 +2189,22 @@ useEffect(()=>{
                       <>
                         {enoughApproval ? (
                           <Button
-                            my='2'
-                            mx='auto'
-                            variant='brand'
-                            width='100%'
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
                             disabled={
                               depositValue !== "Confirm" ||
                               !account ||
                               !depositTokenValue ||
                               (showReferrerField && referrerAddress === "")
                             }
-                            cursor='pointer'
-                            border='none'
-                            borderRadius='0px'
-                            padding='10px'
-                            height='50px'
-                            fontSize='16px'
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
                             _hover={
                               depositValue === "Confirm"
                                 ? { background: "rgba(64, 186, 213, 0.15)" }
@@ -2199,21 +2215,21 @@ useEffect(()=>{
                             {depositValue}
                           </Button>
                         ) : !depositTokenValue ? (
-                            <Button
-                                my='2'
-                                mx='auto'
-                                variant='brand'
-                                width='100%'
-                                disabled={true}
-                                cursor='pointer'
-                                border='none'
-                                borderRadius='0px'
-                                padding='10px'
-                                height='50px'
-                                fontSize='16px'
-                            >
-                              Enter Amount
-                            </Button>
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={true}
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                          >
+                            Enter Amount
+                          </Button>
                         ) : (
                           approvalButton(content.deposit)
                         )}
@@ -2231,55 +2247,55 @@ useEffect(()=>{
             >
               <ModalOverlay />
               <ModalContent
-                width='95vw'
-                borderRadius='6px'
-                paddingBottom='20px'
+                width="95vw"
+                borderRadius="6px"
+                paddingBottom="20px"
                 bgColor={bgColor}
-                minHeight='40vh'
+                minHeight="40vh"
               >
                 <ModalHeader
-                  fontSize='18px'
-                  fontWeight='regular'
-                  align='center'
+                  fontSize="18px"
+                  fontWeight="regular"
+                  align="center"
                 >
                   Deposit {content.deposit} Tokens
                 </ModalHeader>
 
                 <ModalCloseButton
-                  bg='none'
+                  bg="none"
                   size={"sm"}
                   mt={3}
                   mr={3}
-                  cursor='pointer'
+                  cursor="pointer"
                   _focus={{ outline: "none" }}
                   p={"7px"}
                   border={"1px solid"}
                 />
                 <ModalBody py={2}>
-                  <Text color='gray.400' align='right' mb={3}>
+                  <Text color="gray.400" align="right" mb={3}>
                     {content.availableToken} {content.deposit} Available
                   </Text>
-                  <InputGroup size='md'>
+                  <InputGroup size="md">
                     <Input
-                      placeholder='0'
-                      opacity='0.5'
-                      h='50px'
-                      borderRadius='0px'
-                      name='availableToken'
+                      placeholder="0"
+                      opacity="0.5"
+                      h="50px"
+                      borderRadius="0px"
+                      name="availableToken"
                       value={depositTokenValue}
                       onChange={(e) => setDepositTokenValue(e.target.value)}
-                      border='2px'
+                      border="2px"
                     />
-                    <InputRightElement marginRight='15px'>
+                    <InputRightElement marginRight="15px">
                       <Button
-                        color='rgba(64, 186, 213, 1)'
-                        border='none'
-                        borderRadius='0px'
-                        fontSize='13px'
-                        p='1'
-                        mt='10px'
-                        height='20px'
-                        cursor='pointer'
+                        color="rgba(64, 186, 213, 1)"
+                        border="none"
+                        borderRadius="0px"
+                        fontSize="13px"
+                        p="1"
+                        mt="10px"
+                        height="20px"
+                        cursor="pointer"
                         _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
                         onClick={() => showMaxValue(content.deposit, "deposit")}
                       >
@@ -2292,16 +2308,16 @@ useEffect(()=>{
                       <>
                         {/* Show Error Button */}
                         <Button
-                          my='2'
-                          variant='brand'
-                          mx='auto'
+                          my="2"
+                          variant="brand"
+                          mx="auto"
                           color={
                             depositValue === "Confirm" ||
                             depositValue === "Confirmed"
                               ? "rgba(190, 190, 190, 1)"
                               : "#40BAD5"
                           }
-                          width='100%'
+                          width="100%"
                           background={
                             depositValue === "Confirm" ||
                             depositValue === "Confirmed"
@@ -2309,12 +2325,12 @@ useEffect(()=>{
                               : "#444159"
                           }
                           disabled={depositValue !== "Confirm" || !account}
-                          cursor='pointer'
-                          border='none'
-                          borderRadius='0px'
-                          padding='10px'
-                          height='50px'
-                          fontSize='16px'
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
                           _hover={
                             depositValue === "Confirm"
                               ? { background: "rgba(64, 186, 213, 0.15)" }
@@ -2329,17 +2345,17 @@ useEffect(()=>{
                       <>
                         {enoughApproval ? (
                           <Button
-                            my='2'
-                            mx='auto'
-                            variant='brand'
-                            width='100%'
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
                             disabled={depositValue !== "Confirm" || !account}
-                            cursor='pointer'
-                            border='none'
-                            borderRadius='0px'
-                            padding='10px'
-                            height='50px'
-                            fontSize='16px'
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
                             _hover={
                               depositValue === "Confirm"
                                 ? { background: "rgba(64, 186, 213, 0.15)" }
@@ -2349,36 +2365,36 @@ useEffect(()=>{
                           >
                             {depositValue}
                           </Button>
-                        ) :  !depositTokenValue ? (
-                            <Button
-                                my='2'
-                                mx='auto'
-                                variant='brand'
-                                width='100%'
-                                disabled={true}
-                                cursor='pointer'
-                                border='none'
-                                borderRadius='0px'
-                                padding='10px'
-                                height='50px'
-                                fontSize='16px'
-                            >
-                              Enter Amount
-                            </Button>
+                        ) : !depositTokenValue ? (
+                          <Button
+                            my="2"
+                            mx="auto"
+                            variant="brand"
+                            width="100%"
+                            disabled={true}
+                            cursor="pointer"
+                            border="none"
+                            borderRadius="0px"
+                            padding="10px"
+                            height="50px"
+                            fontSize="16px"
+                          >
+                            Enter Amount
+                          </Button>
                         ) : (
                           approvalButton(content.deposit)
                         )}
                         <Button
-                          my='2'
-                          mx='auto'
-                          variant='brand'
-                          width='100%'
-                          cursor='pointer'
-                          border='none'
-                          borderRadius='0px'
-                          padding='10px'
-                          height='50px'
-                          fontSize='16px'
+                          my="2"
+                          mx="auto"
+                          variant="brand"
+                          width="100%"
+                          cursor="pointer"
+                          border="none"
+                          borderRadius="0px"
+                          padding="10px"
+                          height="50px"
+                          fontSize="16px"
                           onClick={closeDepositeModal}
                         >
                           Cancel
@@ -2398,29 +2414,29 @@ useEffect(()=>{
           >
             <ModalOverlay />
             <ModalContent
-              width='95vw'
-              borderRadius='6px'
-              paddingBottom='20px'
+              width="95vw"
+              borderRadius="6px"
+              paddingBottom="20px"
               bgColor={bgColor}
-              minHeight='40vh'
+              minHeight="40vh"
             >
-              <ModalHeader fontSize='18px' fontWeight='regular' align='center'>
+              <ModalHeader fontSize="18px" fontWeight="regular" align="center">
                 Unstake {content.deposit} Tokens
               </ModalHeader>
 
               <ModalCloseButton
-                bg='none'
+                bg="none"
                 size={"sm"}
                 mt={3}
                 mr={3}
-                cursor='pointer'
+                cursor="pointer"
                 _focus={{ outline: "none" }}
                 p={"7px"}
                 border={"1px solid"}
               />
 
               <ModalBody py={2}>
-                <Text color='gray.400' align='right' mb={3}>
+                <Text color="gray.400" align="right" mb={3}>
                   {`${
                     content.type === "RGP"
                       ? content.tokensStaked[1]
@@ -2429,27 +2445,27 @@ useEffect(()=>{
                ${content.deposit} Staked `}
                 </Text>
 
-                <InputGroup size='md'>
+                <InputGroup size="md">
                   <Input
-                    placeholder='0'
-                    opacity='0.5'
-                    h='50px'
-                    borderRadius='0px'
-                    name='availableToken'
-                    border='2px'
+                    placeholder="0"
+                    opacity="0.5"
+                    h="50px"
+                    borderRadius="0px"
+                    name="availableToken"
+                    border="2px"
                     value={unstakeToken}
                     onChange={(e) => setUnstakeToken(e.target.value)}
                   />
-                  <InputRightElement marginRight='15px'>
+                  <InputRightElement marginRight="15px">
                     <Button
-                      color='rgba(64, 186, 213, 1)'
-                      border='none'
-                      borderRadius='0px'
-                      fontSize='13px'
-                      p='1'
-                      mt='10px'
-                      height='20px'
-                      cursor='pointer'
+                      color="rgba(64, 186, 213, 1)"
+                      border="none"
+                      borderRadius="0px"
+                      fontSize="13px"
+                      p="1"
+                      mt="10px"
+                      height="20px"
+                      cursor="pointer"
                       _hover={{ background: "rgba(64, 186, 213, 0.15)" }}
                       onClick={() => showMaxValue(content.deposit, "unstake")}
                     >
@@ -2462,15 +2478,15 @@ useEffect(()=>{
                     <>
                       {/* Show Error Button */}
                       <Button
-                        my='2'
-                        mx='auto'
+                        my="2"
+                        mx="auto"
                         color={
                           unstakeButtonValue === "Confirm" ||
                           unstakeButtonValue === "Confirmed"
                             ? "rgba(190, 190, 190, 1)"
                             : "#40BAD5"
                         }
-                        width='100%'
+                        width="100%"
                         background={
                           unstakeButtonValue === "Confirm" ||
                           unstakeButtonValue === "Confirmed"
@@ -2478,12 +2494,12 @@ useEffect(()=>{
                             : "#444159"
                         }
                         disabled={unstakeButtonValue !== "Confirm"}
-                        cursor='pointer'
-                        border='none'
-                        borderRadius='0px'
-                        padding='10px'
-                        height='50px'
-                        fontSize='16px'
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
                         _hover={
                           unstakeButtonValue === "Confirm" ||
                           unstakeButtonValue === "Confirmed"
@@ -2498,21 +2514,21 @@ useEffect(()=>{
                   ) : (
                     <>
                       <Button
-                        my='2'
-                        variant='brand'
-                        mx='auto'
-                        width='100%'
+                        my="2"
+                        variant="brand"
+                        mx="auto"
+                        width="100%"
                         disabled={
                           unstakeButtonValue !== "Confirm" ||
                           !unstakeToken ||
                           !account
                         }
-                        cursor='pointer'
-                        border='none'
-                        borderRadius='0px'
-                        padding='10px'
-                        height='50px'
-                        fontSize='16px'
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
                         _hover={
                           unstakeButtonValue === "Confirm" ||
                           unstakeButtonValue === "Confirmed"
@@ -2524,16 +2540,16 @@ useEffect(()=>{
                         {unstakeButtonValue}
                       </Button>
                       <Button
-                        my='2'
-                        mx='auto'
-                        variant='brand'
-                        width='100%'
-                        cursor='pointer'
-                        border='none'
-                        borderRadius='0px'
-                        padding='10px'
-                        height='50px'
-                        fontSize='16px'
+                        my="2"
+                        mx="auto"
+                        variant="brand"
+                        width="100%"
+                        cursor="pointer"
+                        border="none"
+                        borderRadius="0px"
+                        padding="10px"
+                        height="50px"
+                        fontSize="16px"
                         onClick={closeModal}
                       >
                         Cancel
diff --git a/src/pages/FarmingV2/YieldFarm.tsx b/src/pages/FarmingV2/YieldFarm.tsx
index e3c48f28..bea2fb65 100644
--- a/src/pages/FarmingV2/YieldFarm.tsx
+++ b/src/pages/FarmingV2/YieldFarm.tsx
@@ -87,20 +87,6 @@ const YieldFarm = ({
     selectedField === farmSection.NEW_LP ||
     selectedField === farmSection.SECOND_NEW_LP;
 
-  // useEffect(() => {
-  //   const getSingleFarm = async () => {
-  //     await content2;
-  //
-  //     if (symbolName[2] === content2?.deposit) {
-  //       myRef.current.scrollIntoView({behavior: 'smooth'});
-  //       setShowYieldFarm(true)
-  //     }
-  //
-  //   };
-  //   getSingleFarm();
-  //
-  // }, [symbolName, params]);
-
   const totalLiquidityValue = () => {
     if (farmDataLoading) return <Spinner speed="0.65s" color="#333333" />;
 
@@ -109,8 +95,6 @@ const YieldFarm = ({
     }
   };
 
-  // console.log(loading);
-
   return (
     <>
       <Flex
diff --git a/src/pages/FarmingV2/index.tsx b/src/pages/FarmingV2/index.tsx
index 41b9bbd8..4d225b17 100644
--- a/src/pages/FarmingV2/index.tsx
+++ b/src/pages/FarmingV2/index.tsx
@@ -197,14 +197,6 @@ export function Index() {
     }
   }, [location, selector]);
 
-  // console.log(count);
-
-  // useMemo(() => {
-  //   if (searchedDataResult !== undefined) {
-  //     setSearchedFarmData(searchedDataResult);
-  //   }
-  // }, [searchedDataResult]);
-
   useUpdateUserGasPreference();
 
   useFilterFarms({
diff --git a/src/pages/Nft/Modals/ComfirmPurchase.tsx b/src/pages/Nft/Modals/ComfirmPurchase.tsx
index 790babec..df2dd106 100644
--- a/src/pages/Nft/Modals/ComfirmPurchase.tsx
+++ b/src/pages/Nft/Modals/ComfirmPurchase.tsx
@@ -1,360 +1,401 @@
 import {
-    Box, Button, Divider,
-    Flex, Image, Modal, ModalBody, ModalCloseButton,
-    ModalContent, ModalHeader, ModalOverlay,
-    Select, Spinner, Text, useColorModeValue
-} from '@chakra-ui/react'
-import React, {useEffect, useState} from 'react';
-import {useNft, useNFTAllowance} from "../../../hooks/useNFT";
-import {getERC20Token} from "../../../utils/utilsFunctions";
-import {setOpenModal, TrxState} from "../../../state/application/reducer";
-import {SMARTSWAPNFTSALES} from "../../../utils/addresses";
-import {ExplorerDataType, getExplorerLink} from "../../../utils/getExplorerLink";
-import {addToast} from "../../../components/Toast/toastSlice";
-import {useActiveWeb3React} from "../../../utils/hooks/useActiveWeb3React";
-import {useDispatch} from "react-redux";
-import {RigelNFT} from "../../../utils/Contracts";
-import { GNFTFailedApprovalTransaction, GNFTFailedTransaction, GNFTSuccessfullyApprovalTransaction, GNFTSuccessfullyTransaction } from '../../../components/G-analytics/gNFTs';
-import { Web3Provider } from '@ethersproject/providers';
-import { createAlchemyWeb3 } from '@alch/alchemy-web3';
-import { Percent } from '@uniswap/sdk-core';
-import JSBI from 'jsbi';
-import { ethers } from 'ethers';
-import { useUserGasPricePercentage } from '../../../state/gas/hooks';
-import { calculateGas } from '../../Swap/components/sendToken';
-
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Image,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Spinner,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import { useNft, useNFTAllowance } from "../../../hooks/useNFT";
+import { getERC20Token } from "../../../utils/utilsFunctions";
+import { setOpenModal, TrxState } from "../../../state/application/reducer";
+import { SMARTSWAPNFTSALES } from "../../../utils/addresses";
+import {
+  ExplorerDataType,
+  getExplorerLink,
+} from "../../../utils/getExplorerLink";
+import { addToast } from "../../../components/Toast/toastSlice";
+import { useActiveWeb3React } from "../../../utils/hooks/useActiveWeb3React";
+import { useDispatch } from "react-redux";
+import { RigelNFT } from "../../../utils/Contracts";
+import {
+  GNFTFailedApprovalTransaction,
+  GNFTFailedTransaction,
+  GNFTSuccessfullyApprovalTransaction,
+  GNFTSuccessfullyTransaction,
+} from "../../../components/G-analytics/gNFTs";
+import { Web3Provider } from "@ethersproject/providers";
+import { createAlchemyWeb3 } from "@alch/alchemy-web3";
+import { Percent } from "@uniswap/sdk-core";
+import JSBI from "jsbi";
+import { ethers } from "ethers";
+import { useUserGasPricePercentage } from "../../../state/gas/hooks";
+import { calculateGas } from "../../Swap/components/sendToken";
 
 type comfirmPurchaseModalProps = {
-    isOpen: boolean,
-    close: () => void,
-    id: number,
-    image: string,
-    name: string,
-    mint?:boolean
-}
-
-const ComfirmPurchase = ({ isOpen,
-                             close, id, image, name, mint }:
-                             comfirmPurchaseModalProps) => {
-    const { chainId, library, account } = useActiveWeb3React();
-    const textColor = useColorModeValue("#333333", "#F1F5F8");
-    const lightTextColor = useColorModeValue("#666666", "grey");
-    const [currency, setCurrency] = useState('');
-    const [checkTokenApproval, setCheckTokenApproval] = useState(0);
-    const dispatch = useDispatch();
-    const {firstToken, secondToken, prices, unsoldItems, nftId} = useNft(id);
-    const {hasTokenABeenApproved, hasTokenBBeenApproved, loadInfo} = useNFTAllowance(checkTokenApproval, prices.firstTokenPrice, currency, nftId[0],firstToken.address,secondToken.address);
-
-     const [error, setError] = useState('');
-
-
-     useEffect(() => {
-         if (currency === firstToken.symbol && parseFloat(firstToken.balance) < parseFloat(prices.firstTokenPrice)) {
-             setError(`Insufficient ${firstToken.symbol}`)
-         } else if (currency === secondToken.symbol && parseFloat(secondToken.balance) < parseFloat(prices.secondTokenPrice)) {
-             setError(`Insufficient ${secondToken.symbol}`)
-         } else {
-             setError('')
-         }
-     }, [currency]);
+  isOpen: boolean;
+  close: () => void;
+  id: number;
+  image: string;
+  name: string;
+  mint?: boolean;
+};
 
+const ComfirmPurchase = ({
+  isOpen,
+  close,
+  id,
+  image,
+  name,
+  mint,
+}: comfirmPurchaseModalProps) => {
+  const { chainId, library, account } = useActiveWeb3React();
+  const textColor = useColorModeValue("#333333", "#F1F5F8");
+  const lightTextColor = useColorModeValue("#666666", "grey");
+  const [currency, setCurrency] = useState("");
+  const [checkTokenApproval, setCheckTokenApproval] = useState(0);
+  const dispatch = useDispatch();
+  const { firstToken, secondToken, prices, unsoldItems, nftId } = useNft(id);
+  const { hasTokenABeenApproved, hasTokenBBeenApproved, loadInfo } =
+    useNFTAllowance(
+      checkTokenApproval,
+      prices.firstTokenPrice,
+      currency,
+      nftId[0],
+      firstToken.address,
+      secondToken.address
+    );
 
-     
+  const [error, setError] = useState("");
 
+  useEffect(() => {
+    if (
+      currency === firstToken.symbol &&
+      parseFloat(firstToken.balance) < parseFloat(prices.firstTokenPrice)
+    ) {
+      setError(`Insufficient ${firstToken.symbol}`);
+    } else if (
+      currency === secondToken.symbol &&
+      parseFloat(secondToken.balance) < parseFloat(prices.secondTokenPrice)
+    ) {
+      setError(`Insufficient ${secondToken.symbol}`);
+    } else {
+      setError("");
+    }
+  }, [currency]);
 
-    const approveTokens = async (address: string, symbol: string) => {
-        if (account) {
-            const token = await getERC20Token(address, library);
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `${symbol} Approval`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                const walletBal = (await token.balanceOf(account));
-                const approval = await token.approve(
-                    SMARTSWAPNFTSALES[chainId as number],
-                    walletBal,
-                    {
-                        from: account,
-                    }
-                );
-                const { confirmations } = await approval.wait(1);
-                const { hash } = approval;
-                if (confirmations >= 1) {
-                    const explorerLink = getExplorerLink(
-                        chainId as number,
-                        hash,
-                        ExplorerDataType.TRANSACTION
-                    );
-                    setCheckTokenApproval(checkTokenApproval + 1);
-                    GNFTSuccessfullyApprovalTransaction(
-                        "NFT",
-                        "approving token",
-                        symbol)
+  const approveTokens = async (address: string, symbol: string) => {
+    if (account) {
+      const token = await getERC20Token(address, library);
+      try {
+        dispatch(
+          setOpenModal({
+            message: `${symbol} Approval`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
+        const walletBal = await token.balanceOf(account);
+        const approval = await token.approve(
+          SMARTSWAPNFTSALES[chainId as number],
+          walletBal,
+          {
+            from: account,
+          }
+        );
+        const { confirmations } = await approval.wait(1);
+        const { hash } = approval;
+        if (confirmations >= 1) {
+          const explorerLink = getExplorerLink(
+            chainId as number,
+            hash,
+            ExplorerDataType.TRANSACTION
+          );
+          setCheckTokenApproval(checkTokenApproval + 1);
+          GNFTSuccessfullyApprovalTransaction("NFT", "approving token", symbol);
 
-                    dispatch(
-                        setOpenModal({
-                            message: `${symbol} Approval Successful`,
-                            trxState: TrxState.TransactionSuccessful,
-                        })
-                    );
+          dispatch(
+            setOpenModal({
+              message: `${symbol} Approval Successful`,
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
 
-                    dispatch(
-                        addToast({
-                            message: `Approve ${symbol}`,
-                            URL: explorerLink,
-                        })
-                    );
-                }
-            } catch (err:any) {
-                console.log(err);
-                GNFTFailedApprovalTransaction(
-                    "NFT",
-                    "approving token",
-                    err.message,
-                    symbol);
-                dispatch(
-                    setOpenModal({
-                        message: `${symbol} Approval`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
+          dispatch(
+            addToast({
+              message: `Approve ${symbol}`,
+              URL: explorerLink,
+            })
+          );
         }
-    };
-
-    const buyNFT = async () => {
-        if (account) {
-            try {
-                dispatch(
-                    setOpenModal({
-                        message: `Purchasing NFT`,
-                        trxState: TrxState.WaitingForConfirmation,
-                    })
-                );
-                console.log({firstToken,secondToken})
+      } catch (err: any) {
+        GNFTFailedApprovalTransaction(
+          "NFT",
+          "approving token",
+          err.message,
+          symbol
+        );
+        dispatch(
+          setOpenModal({
+            message: `${symbol} Approval`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
 
-                const isEIP1559 = await library?.getFeeData();
-                // const { format1, format2, format3 } = await calculateGas(
-                //     useUserGasPricePercentage,
-                //     library,
-                //     chainId as number
-                //   );
-                const nftContract = await RigelNFT(SMARTSWAPNFTSALES[chainId as number], library);
-                // const data = await nftContract._mintBatch(account,["1"],["1"], "0x0000000000000000000000000000000000000000000000000000000000000000")
-                console.log({firstToken,secondToken})
-                const data = await nftContract.mint(id, currency === 'USDT' ?  secondToken.address : firstToken.address)
+  const buyNFT = async () => {
+    if (account) {
+      try {
+        dispatch(
+          setOpenModal({
+            message: `Purchasing NFT`,
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
 
-                const { confirmations } = await data.wait(3);
-                const { hash } = data;
+        const isEIP1559 = await library?.getFeeData();
 
-                if (confirmations >= 3) {
-                    const explorerLink = getExplorerLink(
-                        chainId as number,
-                        hash,
-                        ExplorerDataType.TRANSACTION
-                    );
+        const nftContract = await RigelNFT(
+          SMARTSWAPNFTSALES[chainId as number],
+          library
+        );
+        const data = await nftContract.mint(
+          id,
+          currency === "USDT" ? secondToken.address : firstToken.address
+        );
 
-                    dispatch(
-                        setOpenModal({
-                            message: "Transaction Successful",
-                            trxState: TrxState.TransactionSuccessful,
-                        })
-                    );
-                    GNFTSuccessfullyTransaction(
-                        "NFT",
-                        "purchasing NFT",
-                        currency==="USDT"? "USDT": "BUSD",
-                        name,
-                        image)
+        const { confirmations } = await data.wait(3);
+        const { hash } = data;
 
-                    dispatch(
-                        addToast({
-                            message: `Successfully Purchased RIGEL GIFT CARD ${id} NFT`,
-                            URL: explorerLink,
-                        })
-                    );
-                    close();
-                }
+        if (confirmations >= 3) {
+          const explorerLink = getExplorerLink(
+            chainId as number,
+            hash,
+            ExplorerDataType.TRANSACTION
+          );
 
+          dispatch(
+            setOpenModal({
+              message: "Transaction Successful",
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
+          GNFTSuccessfullyTransaction(
+            "NFT",
+            "purchasing NFT",
+            currency === "USDT" ? "USDT" : "BUSD",
+            name,
+            image
+          );
 
-            } catch (e:any) {
-                console.log(e);
-                GNFTFailedTransaction(
-                    "NFT",
-                    "purchasing NFT",
-                    e.message,
-                    currency==="USDT"? "USDT": "BUSD",
-                    name,
-                    image)
-                dispatch(
-                    setOpenModal({
-                        message: `Transaction Failed`,
-                        trxState: TrxState.TransactionFailed,
-                    })
-                );
-            }
+          dispatch(
+            addToast({
+              message: `Successfully Purchased RIGEL GIFT CARD ${id} NFT`,
+              URL: explorerLink,
+            })
+          );
+          close();
         }
-    };
+      } catch (e: any) {
+        GNFTFailedTransaction(
+          "NFT",
+          "purchasing NFT",
+          e.message,
+          currency === "USDT" ? "USDT" : "BUSD",
+          name,
+          image
+        );
+        dispatch(
+          setOpenModal({
+            message: `Transaction Failed`,
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    }
+  };
 
   return (
-        <Modal isOpen={isOpen} onClose={close}>
-            <ModalOverlay />
-            <ModalContent>
-                <ModalHeader textColor={textColor}>Confirm Purchase</ModalHeader>
-                <ModalCloseButton />
-                <Divider marginTop={'-1.5'}  borderColor={'#DEE5ED'} />
-                <ModalBody>
-                    <Box
-                        marginTop={4}
-                        textAlign="center"
-                        borderWidth="1px"
-                        borderColor={'#DEE5ED'}
-                        padding="25px 0"
-                        fontWeight="normal"
-                        borderRadius={8}
-                    >
-                        <Flex
-                            flexDirection="column"
-                            alignItems="center"
-                            justifyContent="center"
-                        >
-
-                            <Image width={54} height={54} src={image} alt="logo" />
-                            <Text paddingTop={3} fontSize={20} color={textColor} >{name}</Text>
-
-                            <Text paddingTop={3} fontSize={20} color={textColor} >NFT ID: {id}</Text>
-
-                            <Text paddingTop={2} textColor={textColor} > <span style={{color: lightTextColor}}>Created by:</span>  RigelProtocol</Text>
-                        </Flex>
-                    </Box>
-                    <Box
-                        borderWidth="1px"
-                        borderColor={'#DEE5ED'}
-                        fontWeight="normal"
-                        marginTop={4}
-                        borderRadius={8}
-                    >
-
-                        <Select placeholder={'Choose Token to Pay With'}
-                                value={currency}
-                                onChange={(e) => {
-                            setCurrency(e.target.value)
-                        }}>
-                            <option value={firstToken.symbol}>{firstToken.symbol} - {firstToken.balance}</option>
-                            <option value={secondToken.symbol}>{secondToken.symbol} - {secondToken.balance}</option>
-                        </Select>
-
-                    </Box>
+    <Modal isOpen={isOpen} onClose={close}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader textColor={textColor}>Confirm Purchase</ModalHeader>
+        <ModalCloseButton />
+        <Divider marginTop={"-1.5"} borderColor={"#DEE5ED"} />
+        <ModalBody>
+          <Box
+            marginTop={4}
+            textAlign="center"
+            borderWidth="1px"
+            borderColor={"#DEE5ED"}
+            padding="25px 0"
+            fontWeight="normal"
+            borderRadius={8}
+          >
+            <Flex
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Image width={54} height={54} src={image} alt="logo" />
+              <Text paddingTop={3} fontSize={20} color={textColor}>
+                {name}
+              </Text>
 
-                    <Box
-                        padding={3}
-                        borderWidth="1px"
-                        borderColor={'#DEE5ED'}
-                        fontWeight="normal"
-                        marginTop={4}
-                        borderRadius={8}
-                    >
-                        {currency !== 'USDT' ?
-                            <Flex mt="1" justifyContent="space-between" alignContent="center">
-                                <Text color={lightTextColor} >Price</Text>
-                                <Text textColor={textColor}>{prices.firstTokenPrice} {firstToken.symbol}</Text>
-                            </Flex>
-                            :
-                            <Flex mt="1" justifyContent="space-between" alignContent="center">
-                                <Text color={lightTextColor} >Price</Text>
-                                <Text textColor={textColor}>{prices.secondTokenPrice} USDT</Text>
-                            </Flex>
-                        }
-                        <Flex mt="1" justifyContent="space-between" alignContent="center">
-                            <Text/>
-                            <Text color={lightTextColor} > ≈ </Text>
-                        </Flex>
-                    </Box>
-                    {
-                    error 
-                    ? 
-                     <Button
-                                mt={5}
-                                mb={2}
-                                w={'full'}
-                                variant='brand'
-                                color={'white'}
-                                disabled={currency === '' || error !== ''}
-                                boxShadow={'0 5px 20px 0px rgba(24, 39, 75, 0.06),'}
-                                _hover={{bg: 'blue.500'}}
-                                _focus={{bg: 'blue.500'}}
-                                onClick={() => buyNFT()}
-                            >
-                                {error}
-                            </Button>
+              <Text paddingTop={3} fontSize={20} color={textColor}>
+                NFT ID: {id}
+              </Text>
 
-                        : 
-                        currency === firstToken.symbol && !hasTokenABeenApproved ?
-                            <Button
-                                mt={5}
-                                mb={2}
-                                w={'full'}
-                                variant='brand'
-                                color={'white'}
-                                boxShadow={'0 5px 20px 0px rgba(24, 39, 75, 0.06),'}
-                                _hover={{bg: 'blue.500'}}
-                                _focus={{bg: 'blue.500'}}
-                                onClick={() => approveTokens(firstToken.address, firstToken.symbol)}
-                            >
-                                 Approve {firstToken.symbol}
-                            </Button>
-                        : currency === secondToken.symbol && !hasTokenBBeenApproved ?
-                            <Button
-                                mt={5}
-                                mb={2}
-                                w={'full'}
-                                variant='brand'
-                                color={'white'}
-                                boxShadow={'0 5px 20px 0px rgba(24, 39, 75, 0.06),'}
-                                _hover={{bg: 'blue.500'}}
-                                _focus={{bg: 'blue.500'}}
-                                onClick={() => approveTokens(secondToken.address, secondToken.symbol)}
-                            >
-                                 Approve {secondToken.symbol}
-                            </Button>
-                            : loadInfo ?
-                                <Button
-                                    mt={5}
-                                    mb={2}
-                                    w={'full'}
-                                    variant='brand'
-                                    color={'white'}
-                                    disabled={currency === '' || error !== ''}
-                                    boxShadow={'0 5px 20px 0px rgba(24, 39, 75, 0.06),'}
-                                    _hover={{bg: 'blue.500'}}
-                                    _focus={{bg: 'blue.500'}}
-                                >
-                                    <Spinner speed="0.65s" />
-                                </Button>
-                                :
-                            <Button
-                                mt={5}
-                                mb={2}
-                                w={'full'}
-                                variant='brand'
-                                color={'white'}
-                                disabled={currency === '' || error !== '' || !mint}
-                                boxShadow={'0 5px 20px 0px rgba(24, 39, 75, 0.06),'}
-                                _hover={{bg: 'blue.500'}}
-                                _focus={{bg: 'blue.500'}}
-                                onClick={() => buyNFT()}
-                            >
-                                Buy Now
-                            </Button>
-                    }
+              <Text paddingTop={2} textColor={textColor}>
+                {" "}
+                <span style={{ color: lightTextColor }}>Created by:</span>{" "}
+                RigelProtocol
+              </Text>
+            </Flex>
+          </Box>
+          <Box
+            borderWidth="1px"
+            borderColor={"#DEE5ED"}
+            fontWeight="normal"
+            marginTop={4}
+            borderRadius={8}
+          >
+            <Select
+              placeholder={"Choose Token to Pay With"}
+              value={currency}
+              onChange={(e) => {
+                setCurrency(e.target.value);
+              }}
+            >
+              <option value={firstToken.symbol}>
+                {firstToken.symbol} - {firstToken.balance}
+              </option>
+              <option value={secondToken.symbol}>
+                {secondToken.symbol} - {secondToken.balance}
+              </option>
+            </Select>
+          </Box>
 
-                </ModalBody>
-            </ModalContent>
-        </Modal>
-    )
+          <Box
+            padding={3}
+            borderWidth="1px"
+            borderColor={"#DEE5ED"}
+            fontWeight="normal"
+            marginTop={4}
+            borderRadius={8}
+          >
+            {currency !== "USDT" ? (
+              <Flex mt="1" justifyContent="space-between" alignContent="center">
+                <Text color={lightTextColor}>Price</Text>
+                <Text textColor={textColor}>
+                  {prices.firstTokenPrice} {firstToken.symbol}
+                </Text>
+              </Flex>
+            ) : (
+              <Flex mt="1" justifyContent="space-between" alignContent="center">
+                <Text color={lightTextColor}>Price</Text>
+                <Text textColor={textColor}>
+                  {prices.secondTokenPrice} USDT
+                </Text>
+              </Flex>
+            )}
+            <Flex mt="1" justifyContent="space-between" alignContent="center">
+              <Text />
+              <Text color={lightTextColor}> ≈ </Text>
+            </Flex>
+          </Box>
+          {error ? (
+            <Button
+              mt={5}
+              mb={2}
+              w={"full"}
+              variant="brand"
+              color={"white"}
+              disabled={currency === "" || error !== ""}
+              boxShadow={"0 5px 20px 0px rgba(24, 39, 75, 0.06),"}
+              _hover={{ bg: "blue.500" }}
+              _focus={{ bg: "blue.500" }}
+              onClick={() => buyNFT()}
+            >
+              {error}
+            </Button>
+          ) : currency === firstToken.symbol && !hasTokenABeenApproved ? (
+            <Button
+              mt={5}
+              mb={2}
+              w={"full"}
+              variant="brand"
+              color={"white"}
+              boxShadow={"0 5px 20px 0px rgba(24, 39, 75, 0.06),"}
+              _hover={{ bg: "blue.500" }}
+              _focus={{ bg: "blue.500" }}
+              onClick={() =>
+                approveTokens(firstToken.address, firstToken.symbol)
+              }
+            >
+              Approve {firstToken.symbol}
+            </Button>
+          ) : currency === secondToken.symbol && !hasTokenBBeenApproved ? (
+            <Button
+              mt={5}
+              mb={2}
+              w={"full"}
+              variant="brand"
+              color={"white"}
+              boxShadow={"0 5px 20px 0px rgba(24, 39, 75, 0.06),"}
+              _hover={{ bg: "blue.500" }}
+              _focus={{ bg: "blue.500" }}
+              onClick={() =>
+                approveTokens(secondToken.address, secondToken.symbol)
+              }
+            >
+              Approve {secondToken.symbol}
+            </Button>
+          ) : loadInfo ? (
+            <Button
+              mt={5}
+              mb={2}
+              w={"full"}
+              variant="brand"
+              color={"white"}
+              disabled={currency === "" || error !== ""}
+              boxShadow={"0 5px 20px 0px rgba(24, 39, 75, 0.06),"}
+              _hover={{ bg: "blue.500" }}
+              _focus={{ bg: "blue.500" }}
+            >
+              <Spinner speed="0.65s" />
+            </Button>
+          ) : (
+            <Button
+              mt={5}
+              mb={2}
+              w={"full"}
+              variant="brand"
+              color={"white"}
+              disabled={currency === "" || error !== "" || !mint}
+              boxShadow={"0 5px 20px 0px rgba(24, 39, 75, 0.06),"}
+              _hover={{ bg: "blue.500" }}
+              _focus={{ bg: "blue.500" }}
+              onClick={() => buyNFT()}
+            >
+              Buy Now
+            </Button>
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
 };
 
-export default React.memo(ComfirmPurchase)
\ No newline at end of file
+export default React.memo(ComfirmPurchase);
diff --git a/src/pages/Nft/ViewNFT.tsx b/src/pages/Nft/ViewNFT.tsx
index aa4a0b38..227a1f4e 100644
--- a/src/pages/Nft/ViewNFT.tsx
+++ b/src/pages/Nft/ViewNFT.tsx
@@ -1,186 +1,230 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react";
 import {
-    Button,
-    Center, Flex, Grid,
-    GridItem, Image, Skeleton, Stack,
-    Text, useColorModeValue, useMediaQuery
-} from '@chakra-ui/react';
-import {ArrowBackIcon} from "@chakra-ui/icons";
+  Button,
+  Center,
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Skeleton,
+  Stack,
+  Text,
+  useColorModeValue,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import { ArrowBackIcon } from "@chakra-ui/icons";
 import ComfirmPurchase from "./Modals/ComfirmPurchase";
 import ClaimNFTModal from "./Modals/ClaimNFTModal";
-import PolygonImage from '../../assets/polygon-logo.svg';
-import {Link} from 'react-router-dom';
-import { useLocation , withRouter} from "react-router-dom";
-import {useActiveWeb3React} from "../../utils/hooks/useActiveWeb3React";
-import {SupportedChainId} from "../../constants/chains";
-import {useNft, useNftName} from "../../hooks/useNFT";
+import PolygonImage from "../../assets/polygon-logo.svg";
+import { Link } from "react-router-dom";
+import { useLocation, withRouter } from "react-router-dom";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
+import { SupportedChainId } from "../../constants/chains";
+import { useNft, useNftName } from "../../hooks/useNFT";
 
 export type NftProps = {
-    nftName: string,
-    image: string,
-    isFeatured?: boolean,
-    id: number,
-    priceUSD?: string,
-    priceRGP?: string,
-    number?: string,
-    total: number,
-    unsold: number
+  nftName: string;
+  image: string;
+  isFeatured?: boolean;
+  id: number;
+  priceUSD?: string;
+  priceRGP?: string;
+  number?: string;
+  total: number;
+  unsold: number;
 };
 
-
-
 export const ViewNFT = function () {
-    const [purchaseModal, setOpenPerchaseModal] = useState(false);
-    const [clamModal, setOpenClamModal] = useState(false);
-    const location = useLocation();
-    const idTile = location.pathname.split('/');
-    const viewId = Number(idTile[2]);
-
-    const { chainId } = useActiveWeb3React();
-
-    const { firstToken, secondToken ,prices, unsoldItems , nftId, loadData,mint} = useNft(viewId);
-    // console.log({viewId, firstToken, secondToken ,prices, unsoldItems , nftId, loadData});
-    // const {name, nftImage, loading} = useNftName(nftId[0]);
-    const {name, nftImage, loading} = useNftName(viewId);
-
-    const [isMobileDevice] = useMediaQuery("(max-width: 750px)");
-
-    const textColor = useColorModeValue("#333333", "#F1F5F8");
-    const lightTextColor = useColorModeValue("#666666", "grey");
-  
-    return (
-        <>
-            <Link to={'/nft'}>
-                <Flex alignItems={'center'} p={'40px'}>
-                    <ArrowBackIcon w={6} h={6}/>
-                    <Text fontSize={'20px'}>Back</Text>
-                </Flex>
-            </Link>
-
-            <Center py={8} marginBottom={8}>
-                <Stack
-                    w={{ sm: '100%', md: '540px', lg: '950px' }}
-                    direction={{ base: 'column', md: 'row' }}
-                    bg={useColorModeValue('white', 'gray.900')}
-                    p={2}
-                >
-                    <Flex flex={1} justifyContent={'center'} alignItems={'center'}>
-                        {loading ?  <Skeleton
-                            height='90%'
-                            w={isMobileDevice ? '90%': '408px'}
-                        /> :
-                        <Image
-                            borderRadius="lg"
-                            objectFit="cover"
-                            height={'90%'}
-                            width={isMobileDevice ? '60%' : '100%'}
-                            src={nftImage}
-                            m={2}
-                        />
-                        }
-                    </Flex>
-                    <Stack
-                        flex={1}
-                        pl={10}
-                        paddingRight={5}
-                    >
-                        <Text color={textColor} fontSize={30} fontWeight={700}>
-                           {name}
-                        </Text>
-                        <Flex mt="1" justifyContent="space-between" alignContent="center">
-
-
-                            <Grid
-                                templateRows='repeat(1, 1fr)'
-                                templateColumns='repeat(5, 1fr)'
-                            >
-                                <GridItem rowSpan={2}><Image mt={3} src="/images/Smartswap.png" /> </GridItem>
-                                <GridItem colSpan={2}><Text color={lightTextColor} >Creator</Text> </GridItem>
-                                <GridItem colSpan={4}><Text color={textColor}  >Rigel Protocol</Text> </GridItem>
-                            </Grid>
-                            <Flex
-                                flexDirection="column"
-                                justifyContent="center"
-                            >
-                                <Text color={lightTextColor}>Number</Text>
-                                <Text color={textColor}>{viewId}</Text>
-                            </Flex>
-                        </Flex>
-                        <Text mt={2}>
-                            The Rigelprotocol NFTs enable users to earn  high dispute fee up to tier B from our platform!
-                            These NFTs also give its holders the ability to mine various popular cryptos like MOBOX, SXP, SHIB, CAKE.
-                         </Text>
-
-                        <Grid pt={4} templateColumns='repeat(5, 2fr)' gap={0}>
-                            <GridItem colSpan={1}   >
-                                <Text color={lightTextColor}>Blockchain</Text>
-                            </GridItem>
-                            <GridItem colStart={3} colEnd={6}>   <Text color={lightTextColor}>Investment to claim</Text>
-                            </GridItem>
-                            <GridItem colSpan={1} >
-                                {
-                                    chainId === SupportedChainId.BINANCETEST || chainId === SupportedChainId.BINANCE ? (
-                                        <Flex mt="1" alignContent="center">
-                                            <Text fontWeight={400} color={textColor} >BSC</Text>
-                                            <Image ml={2} alt="bsc" src="/images/binance.svg" />
-                                        </Flex>
-                                    ) : (
-                                        <Flex mt="1" alignItems="center">
-                                            <Text fontWeight={400} color={textColor}>Polygon</Text>
-                                            <Image boxSize={'25px'} alt="polygon" src={PolygonImage} />
-                                        </Flex>
-                                    )
-
-                            }
-                            </GridItem>
-                            <GridItem colStart={3} colEnd={6}>
-                                <Text fontWeight={400} color={textColor}>NIL</Text>
-                            </GridItem>
-                            <GridItem colSpan={2} pt={2} >
-                                <Text color={lightTextColor}>Appraised Value</Text>
-                            </GridItem>
-                            <GridItem colStart={3} pt={2} colEnd={6}><Text color={lightTextColor}>Total Supply</Text>
-                            </GridItem>
-
-                            <GridItem colSpan={2} >
-                                <Text color={textColor} fontWeight={400}>750 USD</Text>
-                            </GridItem>
-                            <GridItem  color={textColor} colStart={3} colEnd={6}><Text fontWeight={400} >{nftId.length}</Text>
-                            </GridItem>
-                        </Grid>
-                        <Flex pt={5} mt="1" justifyContent="space-between" alignContent="center">
-                            <Text align={'left'} color={lightTextColor}>  Price    </Text>
-                            <Text color={lightTextColor} >  ≈</Text>
-                        </Flex>
-                        <Flex mt="1" justifyContent="space-between" alignContent="center">
-                            <Text color={textColor} fontWeight={700} fontSize={28}>
-                                {prices.firstTokenPrice} USD
-                            </Text>
-                            <Text color={lightTextColor}>
-                                {(100.54 * parseFloat(prices.firstTokenPrice)).toFixed(2)} RGP
-                            </Text>
-                        </Flex>
-                        <Flex t="1" pt={3} justifyContent="space-between" alignContent="center">
-                            <Button onClick={() => setOpenPerchaseModal(true)} width={'45%'} variant={'brand'}>Buy NFT</Button>
-                            <Button
-                                textColor={'#319EF6'}
-                                borderRadius="6px"
-                                borderColor={'#319EF6'}
-                                variant='outline'
-                                width={'45%'}
-                                onClick={() => setOpenClamModal(true)}
-                                disabled={true}
-                            >
-                                Claim NFT</Button>
-                        </Flex>
-                    </Stack>
-                </Stack>
-            </Center>
-            <ComfirmPurchase isOpen={purchaseModal} close={() => setOpenPerchaseModal(false)} id={viewId} image={nftImage} name={name} mint={mint}/>
-            <ClaimNFTModal isOpen={clamModal} close={() => setOpenClamModal(false)} />
-
-        </>
-    )
+  const [purchaseModal, setOpenPerchaseModal] = useState(false);
+  const [clamModal, setOpenClamModal] = useState(false);
+  const location = useLocation();
+  const idTile = location.pathname.split("/");
+  const viewId = Number(idTile[2]);
+
+  const { chainId } = useActiveWeb3React();
+
+  const {
+    firstToken,
+    secondToken,
+    prices,
+    unsoldItems,
+    nftId,
+    loadData,
+    mint,
+  } = useNft(viewId);
+  const { name, nftImage, loading } = useNftName(viewId);
+
+  const [isMobileDevice] = useMediaQuery("(max-width: 750px)");
+
+  const textColor = useColorModeValue("#333333", "#F1F5F8");
+  const lightTextColor = useColorModeValue("#666666", "grey");
+
+  return (
+    <>
+      <Link to={"/nft"}>
+        <Flex alignItems={"center"} p={"40px"}>
+          <ArrowBackIcon w={6} h={6} />
+          <Text fontSize={"20px"}>Back</Text>
+        </Flex>
+      </Link>
+
+      <Center py={8} marginBottom={8}>
+        <Stack
+          w={{ sm: "100%", md: "540px", lg: "950px" }}
+          direction={{ base: "column", md: "row" }}
+          bg={useColorModeValue("white", "gray.900")}
+          p={2}
+        >
+          <Flex flex={1} justifyContent={"center"} alignItems={"center"}>
+            {loading ? (
+              <Skeleton height="90%" w={isMobileDevice ? "90%" : "408px"} />
+            ) : (
+              <Image
+                borderRadius="lg"
+                objectFit="cover"
+                height={"90%"}
+                width={isMobileDevice ? "60%" : "100%"}
+                src={nftImage}
+                m={2}
+              />
+            )}
+          </Flex>
+          <Stack flex={1} pl={10} paddingRight={5}>
+            <Text color={textColor} fontSize={30} fontWeight={700}>
+              {name}
+            </Text>
+            <Flex mt="1" justifyContent="space-between" alignContent="center">
+              <Grid
+                templateRows="repeat(1, 1fr)"
+                templateColumns="repeat(5, 1fr)"
+              >
+                <GridItem rowSpan={2}>
+                  <Image mt={3} src="/images/Smartswap.png" />{" "}
+                </GridItem>
+                <GridItem colSpan={2}>
+                  <Text color={lightTextColor}>Creator</Text>{" "}
+                </GridItem>
+                <GridItem colSpan={4}>
+                  <Text color={textColor}>Rigel Protocol</Text>{" "}
+                </GridItem>
+              </Grid>
+              <Flex flexDirection="column" justifyContent="center">
+                <Text color={lightTextColor}>Number</Text>
+                <Text color={textColor}>{viewId}</Text>
+              </Flex>
+            </Flex>
+            <Text mt={2}>
+              The Rigelprotocol NFTs enable users to earn high dispute fee up to
+              tier B from our platform! These NFTs also give its holders the
+              ability to mine various popular cryptos like MOBOX, SXP, SHIB,
+              CAKE.
+            </Text>
+
+            <Grid pt={4} templateColumns="repeat(5, 2fr)" gap={0}>
+              <GridItem colSpan={1}>
+                <Text color={lightTextColor}>Blockchain</Text>
+              </GridItem>
+              <GridItem colStart={3} colEnd={6}>
+                {" "}
+                <Text color={lightTextColor}>Investment to claim</Text>
+              </GridItem>
+              <GridItem colSpan={1}>
+                {chainId === SupportedChainId.BINANCETEST ||
+                chainId === SupportedChainId.BINANCE ? (
+                  <Flex mt="1" alignContent="center">
+                    <Text fontWeight={400} color={textColor}>
+                      BSC
+                    </Text>
+                    <Image ml={2} alt="bsc" src="/images/binance.svg" />
+                  </Flex>
+                ) : (
+                  <Flex mt="1" alignItems="center">
+                    <Text fontWeight={400} color={textColor}>
+                      Polygon
+                    </Text>
+                    <Image boxSize={"25px"} alt="polygon" src={PolygonImage} />
+                  </Flex>
+                )}
+              </GridItem>
+              <GridItem colStart={3} colEnd={6}>
+                <Text fontWeight={400} color={textColor}>
+                  NIL
+                </Text>
+              </GridItem>
+              <GridItem colSpan={2} pt={2}>
+                <Text color={lightTextColor}>Appraised Value</Text>
+              </GridItem>
+              <GridItem colStart={3} pt={2} colEnd={6}>
+                <Text color={lightTextColor}>Total Supply</Text>
+              </GridItem>
+
+              <GridItem colSpan={2}>
+                <Text color={textColor} fontWeight={400}>
+                  750 USD
+                </Text>
+              </GridItem>
+              <GridItem color={textColor} colStart={3} colEnd={6}>
+                <Text fontWeight={400}>{nftId.length}</Text>
+              </GridItem>
+            </Grid>
+            <Flex
+              pt={5}
+              mt="1"
+              justifyContent="space-between"
+              alignContent="center"
+            >
+              <Text align={"left"} color={lightTextColor}>
+                {" "}
+                Price{" "}
+              </Text>
+              <Text color={lightTextColor}> ≈</Text>
+            </Flex>
+            <Flex mt="1" justifyContent="space-between" alignContent="center">
+              <Text color={textColor} fontWeight={700} fontSize={28}>
+                {prices.firstTokenPrice} USD
+              </Text>
+              <Text color={lightTextColor}>
+                {(100.54 * parseFloat(prices.firstTokenPrice)).toFixed(2)} RGP
+              </Text>
+            </Flex>
+            <Flex
+              t="1"
+              pt={3}
+              justifyContent="space-between"
+              alignContent="center"
+            >
+              <Button
+                onClick={() => setOpenPerchaseModal(true)}
+                width={"45%"}
+                variant={"brand"}
+              >
+                Buy NFT
+              </Button>
+              <Button
+                textColor={"#319EF6"}
+                borderRadius="6px"
+                borderColor={"#319EF6"}
+                variant="outline"
+                width={"45%"}
+                onClick={() => setOpenClamModal(true)}
+                disabled={true}
+              >
+                Claim NFT
+              </Button>
+            </Flex>
+          </Stack>
+        </Stack>
+      </Center>
+      <ComfirmPurchase
+        isOpen={purchaseModal}
+        close={() => setOpenPerchaseModal(false)}
+        id={viewId}
+        image={nftImage}
+        name={name}
+        mint={mint}
+      />
+      <ClaimNFTModal isOpen={clamModal} close={() => setOpenClamModal(false)} />
+    </>
+  );
 };
 export default withRouter(ViewNFT);
-
diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
index 9ab86772..aeaca671 100644
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@@ -17,7 +17,10 @@ import { useUpdateUserGasPreference } from "../../state/gas/hooks";
 import { clearSearchResult } from "../../state/farming/action";
 import { useDispatch } from "react-redux";
 import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
-import { GClickedAddLiquidity, GClickedAddNewLiquidity } from "../../components/G-analytics/gLiquidity";
+import {
+  GClickedAddLiquidity,
+  GClickedAddNewLiquidity,
+} from "../../components/G-analytics/gLiquidity";
 
 const Index = () => {
   const mode = useColorModeValue("light", "dark");
@@ -92,39 +95,39 @@ const Index = () => {
         startToure={startWelcomeRide}
         openModal={welcomeModal}
         closeModal={() => {
-      window.localStorage.setItem("firstLiquidtyVisit", "2");
-          setWelcomeModal((state) => !state)
+          window.localStorage.setItem("firstLiquidtyVisit", "2");
+          setWelcomeModal((state) => !state);
         }}
         textHeader={"Welcome to RigelProtocol SmartSwap"}
-        welcomeText='With liquidity, you have the option of earning more by depositing tokens to join liquidity pools and receive LP tokens.'
+        welcomeText="With liquidity, you have the option of earning more by depositing tokens to join liquidity pools and receive LP tokens."
       />
       <Flex
         mx={5}
-        justifyContent='center'
-        alignItems='center'
-        flexDirection='column'
-        minHeight='70vh'
-        rounded='lg'
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
+        minHeight="70vh"
+        rounded="lg"
         mb={["110px", "110px", "4"]}
       >
         <Box
-          minHeight='100%'
+          minHeight="100%"
           w={["100%", "100%", "29.5%", "29.5%"]}
-          rounded='lg'
+          rounded="lg"
         >
           <Box
             mt={5}
             p={5}
             backgroundColor={mode === "dark" ? "#15202B" : "#FFFFFF"}
             border={mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"}
-            borderRadius='6px'
+            borderRadius="6px"
           >
-            <Flex justifyContent='left' mb={4} flexDirection='column'>
-              <Flex justifyContent='space-between'>
+            <Flex justifyContent="left" mb={4} flexDirection="column">
+              <Flex justifyContent="space-between">
                 <Text
-                  fontSize='16px'
+                  fontSize="16px"
                   color={mode === "dark" ? "#F1F5F8" : "rgba(51, 51, 51, 1)"}
-                  className='Liquidity'
+                  className="Liquidity"
                 >
                   Liquidity
                 </Text>
@@ -137,59 +140,59 @@ const Index = () => {
               </Flex>
 
               <Text
-                fontSize='14px'
+                fontSize="14px"
                 color={mode === "dark" ? "#DCE5EF" : "#666666"}
                 mt={2}
-                cursor='pointer'
+                cursor="pointer"
               >
                 Join liquidity pools to receive LP tokens
               </Text>
             </Flex>
 
             <Flex
-              justifyContent='space-between'
+              justifyContent="space-between"
               flexDirection={["column", "column", "column", "column"]}
             >
-              <Link to='/add'>
+              <Link to="/add">
                 <Button
-                  d='block'
+                  d="block"
                   w={["100%", "100%", "100%", "100%"]}
                   marginTop={["20px", "0px", "20px", "0px"]}
-                  className='AddLiquidity'
-                  h='50px'
+                  className="AddLiquidity"
+                  h="50px"
                   my={4}
-                  border='none'
-                  fontSize='lg'
-                  cursor='pointer'
-                  boxShadow='0px 1px 7px rgba(41, 45, 50, 0.08)'
-                  lineHeight='24px'
-                  color='#FFFFFF'
-                  bg='#319EF6'
-                  borderRadius='6px'
+                  border="none"
+                  fontSize="lg"
+                  cursor="pointer"
+                  boxShadow="0px 1px 7px rgba(41, 45, 50, 0.08)"
+                  lineHeight="24px"
+                  color="#FFFFFF"
+                  bg="#319EF6"
+                  borderRadius="6px"
                   _hover={{ outline: "none", background: "#319EF6" }}
                   _active={{ outline: "none", background: "#319EF6" }}
-                  onClick={()=>GClickedAddLiquidity()}
+                  onClick={() => GClickedAddLiquidity()}
                 >
                   Add Liquidity
                 </Button>
               </Link>
-              <Link to='/add'>
+              <Link to="/add">
                 <Button
-                  d='block'
+                  d="block"
                   w={["100%", "100%", "100%", "100%"]}
                   marginTop={["20px", "0px", "20px", "0px"]}
                   _hover={{ bgColor: "transparent" }}
                   _active={{ bgColor: "transparent" }}
-                  h='50px'
+                  h="50px"
                   my={4}
-                  color='#319EF6'
-                  fontSize='lg'
-                  cursor='pointer'
-                  lineHeight='24px'
-                  borderRadius='6px'
-                  bg='transparent'
-                  border=' 2px solid #319EF6'
-                  className='CreatePair'
+                  color="#319EF6"
+                  fontSize="lg"
+                  cursor="pointer"
+                  lineHeight="24px"
+                  borderRadius="6px"
+                  bg="transparent"
+                  border=" 2px solid #319EF6"
+                  className="CreatePair"
                   onClick={() => GClickedAddNewLiquidity()}
                 >
                   Create a pair
@@ -197,57 +200,57 @@ const Index = () => {
               </Link>
             </Flex>
 
-            <Flex justifyContent='center' mx={5} my={4} className='importPools'>
+            <Flex justifyContent="center" mx={5} my={4} className="importPools">
               <Text
-                fontSize='sm'
+                fontSize="sm"
                 color={mode === "dark" ? "#DCE5EF" : "#666666"}
               >
                 Dont see a pool you joined?
               </Text>
-              <Text fontSize='sm' color='blue.300' ml={3} cursor='pointer'>
-                <Link to='/find'> Import it </Link>
+              <Text fontSize="sm" color="blue.300" ml={3} cursor="pointer">
+                <Link to="/find"> Import it </Link>
               </Text>
             </Flex>
           </Box>
           <Box
             backgroundColor={mode === "dark" ? "#15202B" : "#FFFFFF"}
             border={mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"}
-            borderRadius='6px'
+            borderRadius="6px"
             my={4}
-            w='100%'
-            className='LiquidityPosition'
+            w="100%"
+            className="LiquidityPosition"
           >
             <Flex
               mx={5}
-              justifyContent='space-between'
-              alignItems='center'
-              rounded='lg'
+              justifyContent="space-between"
+              alignItems="center"
+              rounded="lg"
               my={4}
             >
               <Text
                 color={mode === "dark" ? "#F1F5F8" : "#000000"}
-                fontSize='md'
+                fontSize="md"
               >
                 My Liquidity Positions
               </Text>
             </Flex>
             {loading ? (
               <Flex
-                color='#fff'
-                h='100px'
-                mb='10px'
-                justifyContent='center'
-                alignItems='center'
+                color="#fff"
+                h="100px"
+                mb="10px"
+                justifyContent="center"
+                alignItems="center"
                 px={4}
                 mx={5}
                 backgroundColor={mode === "dark" ? "#213345" : "#F2F5F8"}
                 border={
                   mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"
                 }
-                borderRadius='6px'
+                borderRadius="6px"
               >
                 <Text
-                  fontSize='sm'
+                  fontSize="sm"
                   color={mode === "dark" ? "#DCE5EF" : "#666666"}
                 >
                   Loading...
@@ -255,29 +258,29 @@ const Index = () => {
               </Flex>
             ) : liquidityLength === 0 ? (
               <Flex
-                color='#fff'
-                h='100px'
-                mb='10px'
-                justifyContent='center'
-                alignItems='center'
+                color="#fff"
+                h="100px"
+                mb="10px"
+                justifyContent="center"
+                alignItems="center"
                 px={3}
                 mx={5}
                 backgroundColor={mode === "dark" ? "#213345" : "#F2F5F8"}
                 border={
                   mode === "dark" ? "1px solid #324D68" : "1px solid #DEE6ED"
                 }
-                borderRadius='6px'
+                borderRadius="6px"
               >
                 <Text
-                  fontSize='sm'
+                  fontSize="sm"
                   color={mode === "dark" ? "#DCE5EF" : "#666666"}
                 >
                   No Liquidity Found.
                 </Text>
               </Flex>
             ) : (
-              <Flex mb={5} justify='center'>
-                <Box w='100%'>
+              <Flex mb={5} justify="center">
+                <Box w="100%">
                   {liquidities?.map((liquid, index) => (
                     <Liquidities key={`${index}key`} pair={liquid} />
                   ))}
diff --git a/src/pages/Pool/liquidityDetails.tsx b/src/pages/Pool/liquidityDetails.tsx
index 1b405285..e27ff844 100644
--- a/src/pages/Pool/liquidityDetails.tsx
+++ b/src/pages/Pool/liquidityDetails.tsx
@@ -4,7 +4,10 @@ import { useHistory } from "react-router-dom";
 import { WNATIVEADDRESSES } from "../../utils/addresses";
 import { SupportedChainSymbols } from "../../utils/constants/chains";
 import { useWeb3React } from "@web3-react/core";
-import { GAddLiquidity, GRemoveLiquidity } from "../../components/G-analytics/gLiquidity";
+import {
+  GAddLiquidity,
+  GRemoveLiquidity,
+} from "../../components/G-analytics/gLiquidity";
 
 const LiquidityDetails = (props: LiquidityDetail) => {
   const borderColor = useColorModeValue("#DEE5ED", "#324D68");
@@ -31,30 +34,30 @@ const LiquidityDetails = (props: LiquidityDetail) => {
   };
   return (
     <Flex
-      w='100%'
-      h='100%'
-      justifyContent='center'
-      flexDirection='column'
-      align='center'
+      w="100%"
+      h="100%"
+      justifyContent="center"
+      flexDirection="column"
+      align="center"
     >
       <Flex
-        h='100%'
+        h="100%"
         p={3}
-        w='100%'
+        w="100%"
         color={textColor}
         bgColor={bgColor}
-        flexDirection='column'
-        border='1px'
-        borderRadius='6px'
-        fontSize='14px'
+        flexDirection="column"
+        border="1px"
+        borderRadius="6px"
+        fontSize="14px"
         borderColor={borderColor}
         mb={3}
       >
-        <Flex py={2} justify='space-between'>
+        <Flex py={2} justify="space-between">
           <Text>Your total pool tokens:</Text>
           <Text>{props.pair.poolToken}</Text>
         </Flex>
-        <Flex py={2} justify='space-between'>
+        <Flex py={2} justify="space-between">
           <Text>
             Pooled{" "}
             {props.pair.path[0].token == "WBNB"
@@ -72,7 +75,7 @@ const LiquidityDetails = (props: LiquidityDetail) => {
           </Text>
           <Text>{props.pair.pooledToken0}</Text>
         </Flex>
-        <Flex py={2} justify='space-between'>
+        <Flex py={2} justify="space-between">
           <Text>
             Pooled{" "}
             {props.pair.path[1].token == "WBNB"
@@ -89,49 +92,52 @@ const LiquidityDetails = (props: LiquidityDetail) => {
           </Text>
           <Text>{props.pair.pooledToken1}</Text>
         </Flex>
-        <Flex py={2} justify='space-between'>
+        <Flex py={2} justify="space-between">
           <Text>Your pool share:</Text>
           <Text>{parseFloat(props.pair.poolShare).toFixed(6)}%</Text>
         </Flex>
       </Flex>
-      <Flex mt={-1} alignItems='center' w='100%' justifyContent='space-between'>
+      <Flex mt={-1} alignItems="center" w="100%" justifyContent="space-between">
         <Button
           color={addButtonColor}
-          h='40px'
+          h="40px"
           bgColor={addButtonBgColor}
-          w='48%'
+          w="48%"
           py={3}
           mb={2}
           _hover={{ bgColor: addButtonBgColor, color: addButtonColor }}
           _active={{ bgColor: addButtonBgColor, color: addButtonColor }}
-          onClick={() =>{
-            GAddLiquidity(props.pair.path[0].token,props.pair.path[1].token)
+          onClick={() => {
+            GAddLiquidity(props.pair.path[0].token, props.pair.path[1].token);
             history.push(
               `/add/${checkCurrencyId(
                 props.pair.path[0].fromPath
               )}/${checkCurrencyId(props.pair.path[1].toPath)}`
-            )}
-          }
+            );
+          }}
         >
           Add
         </Button>
         <Button
-          border='1px'
+          border="1px"
           _hover={{ bgColor: removeButtonBgColor, color: removeButtonColor }}
           _active={{ bgColor: removeButtonBgColor, color: removeButtonColor }}
           bgColor={removeButtonBgColor}
           borderColor={removeButtonBorderColor}
           color={removeButtonColor}
-          h='40px'
-          w='48%'
+          h="40px"
+          w="48%"
           mb={2}
           py={3}
-          onClick={() =>{
-            GRemoveLiquidity(props.pair.path[0].token,props.pair.path[1].token)
+          onClick={() => {
+            GRemoveLiquidity(
+              props.pair.path[0].token,
+              props.pair.path[1].token
+            );
             history.push(
               `/remove/${props.pair.path[0].fromPath}/${props.pair.path[1].toPath}`
-            )}
-          }
+            );
+          }}
           // as={<Link to="/remove" />}
         >
           Remove
diff --git a/src/pages/Swap/AutoTime.tsx b/src/pages/Swap/AutoTime.tsx
index 66a28a0f..b9627032 100644
--- a/src/pages/Swap/AutoTime.tsx
+++ b/src/pages/Swap/AutoTime.tsx
@@ -1,22 +1,30 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import ShowDetails from './components/details/ShowDetails';
-import History from './components/history/History';
-import From from './components/sendToken/From';
-import To from './components/sendToken/To';
-import SwapSettings from './components/sendToken/SwapSettings';
-import { useActiveWeb3React } from '../../utils/hooks/useActiveWeb3React';
-import { VectorIcon, ExclamationIcon, SwitchIcon } from '../../theme/components/Icons';
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import ShowDetails from "./components/details/ShowDetails";
+import History from "./components/history/History";
+import From from "./components/sendToken/From";
+import To from "./components/sendToken/To";
+import SwapSettings from "./components/sendToken/SwapSettings";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
+import {
+  VectorIcon,
+  ExclamationIcon,
+  SwitchIcon,
+} from "../../theme/components/Icons";
 import {
   AvalancheMarketArray,
   useDerivedSwapInfo,
   useSwapActionHandlers,
   useSwapState,
-} from '../../state/swap/hooks';
-import { binanceTestMarketArray,polygonMarketArray,binanceMarketArray } from "../../state/swap/hooks"
-import { getERC20Token } from '../../utils/utilsFunctions';
-import { Field } from '../../state/swap/actions';
-import Web3 from 'web3';
-import { ethers } from 'ethers';
+} from "../../state/swap/hooks";
+import {
+  binanceTestMarketArray,
+  polygonMarketArray,
+  binanceMarketArray,
+} from "../../state/swap/hooks";
+import { getERC20Token } from "../../utils/utilsFunctions";
+import { Field } from "../../state/swap/actions";
+import Web3 from "web3";
+import { ethers } from "ethers";
 
 import {
   Box,
@@ -42,68 +50,88 @@ import {
   Tab,
   Img,
   AlertDescription,
-  Spinner
-} from '@chakra-ui/react';
-import AutoTimeModal from './modals/autoTimeModal';
+  Spinner,
+} from "@chakra-ui/react";
+import AutoTimeModal from "./modals/autoTimeModal";
 import { useUserSlippageTolerance } from "../../state/user/hooks";
-import { useSelector,useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../state";
-import { autoSwapV2, rigelToken } from '../../utils/Contracts';
-import { RGPADDRESSES, OTHERMARKETADDRESSES,MARKETAUTOSWAPADDRESSES, OTHERMARKETFACTORYADDRESSES, RGP, USDT } from '../../utils/addresses';
+import { autoSwapV2, rigelToken } from "../../utils/Contracts";
+import {
+  RGPADDRESSES,
+  OTHERMARKETADDRESSES,
+  MARKETAUTOSWAPADDRESSES,
+  OTHERMARKETFACTORYADDRESSES,
+  RGP,
+  USDT,
+} from "../../utils/addresses";
 import { setOpenModal, TrxState } from "../../state/application/reducer";
-import { changeFrequencyTodays } from '../../utils/utilsFunctions';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { refreshTransactionTab } from '../../state/transaction/actions';
-import MarketDropDown from '../../components/MarketDropDown';
-import { GButtonClick, GFailedTransaction, GSuccessfullyTransaction } from '../../components/G-analytics/gIndex';
-import { useHistory, useLocation } from 'react-router-dom';
-import { GetAddressTokenBalance } from '../../state/wallet/hooks';
-import BridgeCard from './components/bridgeCard';
-
-
+import { changeFrequencyTodays } from "../../utils/utilsFunctions";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import { refreshTransactionTab } from "../../state/transaction/actions";
+import MarketDropDown from "../../components/MarketDropDown";
+import {
+  GButtonClick,
+  GFailedTransaction,
+  GSuccessfullyTransaction,
+} from "../../components/G-analytics/gIndex";
+import { useHistory, useLocation } from "react-router-dom";
+import { GetAddressTokenBalance } from "../../state/wallet/hooks";
+import BridgeCard from "./components/bridgeCard";
+import { SERVER_ENV } from "../../constants/chains";
 
 const SetPrice = () => {
-  const [isMobileDevice] = useMediaQuery('(max-width: 750px)');
+  const [isMobileDevice] = useMediaQuery("(max-width: 750px)");
   const dispatch = useDispatch();
   const location = useLocation().pathname;
-  const borderColor = useColorModeValue('#DEE6ED', '#324D68');
-  const iconColor = useColorModeValue('#666666', '#DCE6EF');
-  const textColorOne = useColorModeValue('#333333', '#F1F5F8');
-  const routerBgcolor = useColorModeValue('#F2F5F8', '#213345');
+  const borderColor = useColorModeValue("#DEE6ED", "#324D68");
+  const iconColor = useColorModeValue("#666666", "#DCE6EF");
+  const textColorOne = useColorModeValue("#333333", "#F1F5F8");
+  const routerBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const buttonBgcolor = useColorModeValue("#319EF6", "#4CAFFF");
-  const color = useColorModeValue('#999999', '#7599BD');
+  const color = useColorModeValue("#999999", "#7599BD");
   const switchBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const lightmode = useColorModeValue(true, false);
-  const borderTwo = useColorModeValue('#319EF6', '#4CAFFF');
-  const { account, library, chainId } = useActiveWeb3React()
+  const borderTwo = useColorModeValue("#319EF6", "#4CAFFF");
+  const { account, library, chainId } = useActiveWeb3React();
 
   const { independentField, typedValue } = useSwapState();
 
-  const [hasBeenApproved, setHasBeenApproved] = useState(false)
-  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false)
-  const [transactionSigned, setTransactionSigned] = useState(false)
-  const [selectedFrequency, setSelectedFrequency] = useState("5")
-  const [marketType, setMarketType] = useState(chainId === 43114 ? "Tradejoe" :"Smartswap")
-  const [percentageChange, setPercentageChange] = useState<string>("0")
-  const [approvalForFee, setApprovalForFee] = useState("")
-  const [fee, setFee] = useState("")
-  const [approvalForToken, setApprovalForToken] = useState("")
-  const [showModal, setShowModal] = useState(false)
-  const [totalNumberOfTransaction,setTotalNumberOfTransaction] = useState("1")
-  const [situation,setSituation] = useState("above")
-  const [userOutputPrice, setUserOutputPrice] = useState<number>(0)
-  const [currentToPrice,setCurrentToPrice] = useState("0")
-  const [quantity,setQuantity] = useState< string>("0")
-  const [showNewChangesText,setShowNewChangesText] = useState(false)
+  const [hasBeenApproved, setHasBeenApproved] = useState(false);
+  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false);
+  const [transactionSigned, setTransactionSigned] = useState(false);
+  const [selectedFrequency, setSelectedFrequency] = useState("5");
+  const [marketType, setMarketType] = useState(
+    chainId === 43114 ? "Tradejoe" : "Smartswap"
+  );
+  const [percentageChange, setPercentageChange] = useState<string>("0");
+  const [approvalForFee, setApprovalForFee] = useState("");
+  const [fee, setFee] = useState("");
+  const [approvalForToken, setApprovalForToken] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [totalNumberOfTransaction, setTotalNumberOfTransaction] = useState("1");
+  const [situation, setSituation] = useState("above");
+  const [userOutputPrice, setUserOutputPrice] = useState<number>(0);
+  const [currentToPrice, setCurrentToPrice] = useState("0");
+  const [quantity, setQuantity] = useState<string>("0");
+  const [showNewChangesText, setShowNewChangesText] = useState(false);
   const [insufficientBalance, setInsufficientBalance] = useState(false);
   const [insufficientFee, setInsufficientFee] = useState(false);
-  const [dataSignature,setDataSignature] = useState<{mess:string,signature:string}>({
-    mess:"",
-    signature:""
-  })
+  const [dataSignature, setDataSignature] = useState<{
+    mess: string;
+    signature: string;
+  }>({
+    mess: "",
+    signature: "",
+  });
 
-  const routerHistory = useHistory()
-  const { onCurrencySelection, onUserInput, onSwitchTokens, onMarketSelection, } = useSwapActionHandlers();
+  const routerHistory = useHistory();
+  const {
+    onCurrencySelection,
+    onUserInput,
+    onSwitchTokens,
+    onMarketSelection,
+  } = useSwapActionHandlers();
 
   const {
     currencies,
@@ -114,7 +142,7 @@ const SetPrice = () => {
     pathSymbol,
     pathArray,
     oppositeAmount,
-    unitAmount
+    unitAmount,
   } = useDerivedSwapInfo();
 
   const handleTypeInput = useCallback(
@@ -129,76 +157,86 @@ const SetPrice = () => {
     },
     [onUserInput]
   );
- useEffect(()=>{
-  setMarketType(chainId === 43114 ? "Tradejoe" :"Smartswap")
-   let market = location.split("/").length===3? location.split("/")[2]:""
-   let item =checkIfMarketExists(market,chainId)
-   console.log({item})
-   if (account) {
-    if(item){
-      setMarketType(item.name)
-      getFee(item.name)
-    }else{
-        setMarketType(chainId === 43114 ? "Tradejoe" :"Smartswap")
-    // checkIfSignatureExists()
-    console.log({marketType})
-    getFee(chainId === 43114 ? "Tradejoe" :"Smartswap")
+  useEffect(() => {
+    setMarketType(chainId === 43114 ? "Tradejoe" : "Smartswap");
+    let market = location.split("/").length === 3 ? location.split("/")[2] : "";
+    let item = checkIfMarketExists(market, chainId);
+    console.log({ item });
+    if (account) {
+      if (item) {
+        setMarketType(item.name);
+        getFee(item.name);
+      } else {
+        setMarketType(chainId === 43114 ? "Tradejoe" : "Smartswap");
+        // checkIfSignatureExists()
+        console.log({ marketType });
+        getFee(chainId === 43114 ? "Tradejoe" : "Smartswap");
+      }
     }
-  
-  }
- },[location,chainId,marketType,account])
-
-  const switchMarket = (market:string)=>{
-    routerHistory.push(`/autotrade/${market}`)
-  }
+  }, [location, chainId, marketType, account]);
 
+  const switchMarket = (market: string) => {
+    routerHistory.push(`/autotrade/${market}`);
+  };
 
-  
   const deadline = useSelector<RootState, number>(
     (state) => state.user.userDeadline
   );
   const [allowedSlippage] = useUserSlippageTolerance();
-  const getFee =async (marketType:string="Smartswap") => {
-    console.log(marketType,MARKETAUTOSWAPADDRESSES[marketType][chainId as number],"Kekek")
-    const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[marketType][chainId as number], library);
-    try{
-      const amountToApprove = await autoSwapV2Contract.fee()
-      console.log({amountToApprove},amountToApprove.toString())
-    const fee = ethers.utils.formatUnits(amountToApprove.toString(), 6)
-    // const fee= "10"
-    setFee(fee)
-    return fee 
-    }catch(e){
-      console.log("ERROR",e)
+  const getFee = async (marketType: string = "Smartswap") => {
+    console.log(
+      marketType,
+      MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+      "Kekek"
+    );
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+      library
+    );
+    try {
+      const amountToApprove = await autoSwapV2Contract.fee();
+      console.log({ amountToApprove }, amountToApprove.toString());
+      const fee = ethers.utils.formatUnits(amountToApprove.toString(), 6);
+      // const fee= "10"
+      setFee(fee);
+      return fee;
+    } catch (e) {
+      console.log("ERROR", e);
     }
-   
-  }
-  const checkIfMarketExists = (market:string,chainId:number| undefined) => {
-    let marketArray:any
-    if(chainId === 56) marketArray = binanceMarketArray
-    else if(chainId === 97) marketArray = binanceTestMarketArray
-    else if(chainId === 137) marketArray = polygonMarketArray
-    else if(chainId ===43114) marketArray= AvalancheMarketArray
-    if(marketArray && marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())){
-      let item = marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())
-      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1))
-      return item
+  };
+  const checkIfMarketExists = (market: string, chainId: number | undefined) => {
+    let marketArray: any;
+    if (chainId === 56) marketArray = binanceMarketArray;
+    else if (chainId === 97) marketArray = binanceTestMarketArray;
+    else if (chainId === 137) marketArray = polygonMarketArray;
+    else if (chainId === 43114) marketArray = AvalancheMarketArray;
+    if (
+      marketArray &&
+      marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      )
+    ) {
+      let item = marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      );
+      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1));
+      return item;
     }
-    return null
-  }
+    return null;
+  };
   const parsedAmounts = useMemo(
     () =>
       showWrap
         ? {
-          [Field.INPUT]: typedValue,
-          [Field.OUTPUT]: typedValue,
-        }
+            [Field.INPUT]: typedValue,
+            [Field.OUTPUT]: typedValue,
+          }
         : {
-          [Field.INPUT]:
-            independentField === Field.INPUT ? parsedAmount : bestTrade,
-          [Field.OUTPUT]:
-            independentField === Field.OUTPUT ? parsedAmount : bestTrade,
-        },
+            [Field.INPUT]:
+              independentField === Field.INPUT ? parsedAmount : bestTrade,
+            [Field.OUTPUT]:
+              independentField === Field.OUTPUT ? parsedAmount : bestTrade,
+          },
     [independentField, parsedAmount, showWrap, bestTrade]
   );
   const dependentField: Field =
@@ -214,43 +252,46 @@ const SetPrice = () => {
     currencies[Field.INPUT] ?? undefined
   );
   useEffect(() => {
-    const checkBalance = async ()=>{
-    
-      if(chainId === 43114){
-        let fee = await getFee(chainId === 43114 ? "Tradejoe" :"Smartswap")
-        const token = await getERC20Token(
-          USDT[chainId as number],
-          library
-        );
+    const checkBalance = async () => {
+      if (chainId === 43114) {
+        let fee = await getFee(chainId === 43114 ? "Tradejoe" : "Smartswap");
+        const token = await getERC20Token(USDT[chainId as number], library);
         const value = await token.balanceOf(account);
         const usdtBalance = ethers.utils.formatUnits(value.toString(), 6);
-        console.log({usdtBalance},"kkeoke")
-        if(fee && parseFloat(usdtBalance) < parseFloat(fee)){
-          setInsufficientFee(true)
-        }else{
-          setInsufficientFee(false)
+        console.log({ usdtBalance }, "kkeoke");
+        if (fee && parseFloat(usdtBalance) < parseFloat(fee)) {
+          setInsufficientFee(true);
+        } else {
+          setInsufficientFee(false);
         }
       }
-    
-     if(currencies[Field.INPUT]?.symbol==="USDT"){
-      let fee = await getFee(chainId === 43114 ? "Tradejoe" :"Smartswap")
-      let amount = fee ? parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee) : parseFloat(formattedAmounts[Field.INPUT])
-      if(amount > parseFloat(balance) ){
-        setInsufficientBalance(true);
-      }else{
-        setInsufficientBalance(false);
+
+      if (currencies[Field.INPUT]?.symbol === "USDT") {
+        let fee = await getFee(chainId === 43114 ? "Tradejoe" : "Smartswap");
+        let amount = fee
+          ? parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee)
+          : parseFloat(formattedAmounts[Field.INPUT]);
+        if (amount > parseFloat(balance)) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
+      } else {
+        if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
       }
-    }else{
-     if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
-      setInsufficientBalance(true);
-    } else {
-      setInsufficientBalance(false);
-    } 
-    } 
-    }
-    
-   checkBalance()
-  }, [balance, formattedAmounts[Field.INPUT],totalNumberOfTransaction,chainId]);
+    };
+
+    checkBalance();
+  }, [
+    balance,
+    formattedAmounts[Field.INPUT],
+    totalNumberOfTransaction,
+    chainId,
+  ]);
   // useEffect(() => {
   //   async function runCheck() {
   //     if (!inputError) {
@@ -261,29 +302,30 @@ const SetPrice = () => {
   // }, [inputError, formattedAmounts[Field.INPUT], currencies[Field.INPUT],totalNumberOfTransaction])
 
   useMemo(() => {
-    if(parseFloat(percentageChange) >0 && formattedAmounts[Field.OUTPUT]){
-        const actualRecievedAmount = (parseFloat(percentageChange) / 100) * parseFloat(formattedAmounts[Field.OUTPUT]) + parseFloat(formattedAmounts[Field.OUTPUT])
-        setUserOutputPrice(actualRecievedAmount)
-    }else  if(parseFloat(percentageChange) <=0 && formattedAmounts[Field.OUTPUT]){
-      setUserOutputPrice(parseFloat(formattedAmounts[Field.OUTPUT]))
-    }else{
-      setUserOutputPrice(0)
+    if (parseFloat(percentageChange) > 0 && formattedAmounts[Field.OUTPUT]) {
+      const actualRecievedAmount =
+        (parseFloat(percentageChange) / 100) *
+          parseFloat(formattedAmounts[Field.OUTPUT]) +
+        parseFloat(formattedAmounts[Field.OUTPUT]);
+      setUserOutputPrice(actualRecievedAmount);
+    } else if (
+      parseFloat(percentageChange) <= 0 &&
+      formattedAmounts[Field.OUTPUT]
+    ) {
+      setUserOutputPrice(parseFloat(formattedAmounts[Field.OUTPUT]));
+    } else {
+      setUserOutputPrice(0);
     }
-    
-    
-  }, [percentageChange,formattedAmounts[Field.OUTPUT]]);
-  const minimumAmountToReceive = useCallback(
-    () =>{
-      let data
-      if(percentageChange && userOutputPrice){
-       data = ((100 - Number(allowedSlippage / 100)) / 100) * userOutputPrice
-      }else{
-        data=0
-      }
-      return data
-    },      
-    [allowedSlippage, bestTrade,userOutputPrice]
-  );
+  }, [percentageChange, formattedAmounts[Field.OUTPUT]]);
+  const minimumAmountToReceive = useCallback(() => {
+    let data;
+    if (percentageChange && userOutputPrice) {
+      data = ((100 - Number(allowedSlippage / 100)) / 100) * userOutputPrice;
+    } else {
+      data = 0;
+    }
+    return data;
+  }, [allowedSlippage, bestTrade, userOutputPrice]);
   const minimum = minimumAmountToReceive().toFixed(
     currencies[Field.OUTPUT]?.decimals
   );
@@ -295,7 +337,7 @@ const SetPrice = () => {
       }
     }
   }, [currentToPrice, receivedAmount]);
- 
+
   useEffect(() => {
     let interval;
     if (showNewChangesText) {
@@ -308,368 +350,492 @@ const SetPrice = () => {
     }
   }, [showNewChangesText, showModal]);
 
- 
-  
-    useEffect(() => {      
-      onMarketSelection(OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],OTHERMARKETADDRESSES[marketType][chainId as number])
+  useEffect(() => {
+    onMarketSelection(
+      OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],
+      OTHERMARKETADDRESSES[marketType][chainId as number]
+    );
     // }
-  }, [chainId,marketType])
-  
-  useEffect(()=>{
-    let active = true
-  checkForApproval()
-  return () => { active = false }
-    async function checkForApproval()  {
-    if(!inputError && account){
-    // check approval for RGP and the other token
-    // const RGPBalance = await checkApprovalForRGP(RGPADDRESSES[chainId as number]) ?? "0"
-    const RGPBalance = await checkApprovalForRGP(USDT[chainId as number]) ?? "0"
-    const tokenBalance = currencies[Field.INPUT]?.isNative ? 1 : await checkApproval(currencies[Field.INPUT]?.wrapped?.address)
-    const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
-    if (parseFloat(RGPBalance) >= parseFloat(fee)*frequency) {
-      setHasBeenApproved(true)
-      setApprovalForFee("")
-      // setApprovalForToken("")
-    }else{
-      setApprovalForFee("USDT")
-    }
-    if(currencies[Field.INPUT]?.wrapped?.symbol === "USDT" &&(tokenBalance >= (parseFloat(formattedAmounts[Field.INPUT]) * frequency)+(parseFloat(fee)*frequency))){// 
-      setHasBeenApproved(true)
-      // setApprovalForFee("")
-      setApprovalForToken("")
-    }
-    if(tokenBalance >= (parseFloat(formattedAmounts[Field.INPUT]) * frequency) || currencies[Field.INPUT]?.isNative ){
-      setHasBeenApproved(true)
-      // setApprovalForFee("")
-      setApprovalForToken("")
-    } else{
-      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
-    }
-    console.log(parseFloat(RGPBalance),tokenBalance,parseFloat(formattedAmounts[Field.INPUT]) * frequency)
-    if ( 
-      (!currencies[Field.INPUT]?.isNative && currencies[Field.INPUT]?.wrapped?.symbol === "USDT" )
-       && (parseFloat(RGPBalance) < (parseFloat(fee)*frequency)||
-          (tokenBalance < parseFloat(formattedAmounts[Field.INPUT]) * frequency))
+  }, [chainId, marketType]);
+
+  useEffect(() => {
+    let active = true;
+    checkForApproval();
+    return () => {
+      active = false;
+    };
+    async function checkForApproval() {
+      if (!inputError && account) {
+        // check approval for RGP and the other token
+        // const RGPBalance = await checkApprovalForRGP(RGPADDRESSES[chainId as number]) ?? "0"
+        const RGPBalance =
+          (await checkApprovalForRGP(USDT[chainId as number])) ?? "0";
+        const tokenBalance = currencies[Field.INPUT]?.isNative
+          ? 1
+          : await checkApproval(currencies[Field.INPUT]?.wrapped?.address);
+        const frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
+        if (parseFloat(RGPBalance) >= parseFloat(fee) * frequency) {
+          setHasBeenApproved(true);
+          setApprovalForFee("");
+          // setApprovalForToken("")
+        } else {
+          setApprovalForFee("USDT");
+        }
+        if (
+          currencies[Field.INPUT]?.wrapped?.symbol === "USDT" &&
+          tokenBalance >=
+            parseFloat(formattedAmounts[Field.INPUT]) * frequency +
+              parseFloat(fee) * frequency
         ) {
-      setHasBeenApproved(false)
-      setApprovalForFee("USDT")
-      setApprovalForToken("USDT")
-    }
-    if ( (!currencies[Field.INPUT]?.isNative &&currencies[Field.INPUT]?.wrapped.symbol !== "USDT") && (tokenBalance < parseFloat(formattedAmounts[Field.INPUT]) * frequency)) {
-      setHasBeenApproved(false)
-     
-      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
+          //
+          setHasBeenApproved(true);
+          // setApprovalForFee("")
+          setApprovalForToken("");
+        }
+        if (
+          tokenBalance >=
+            parseFloat(formattedAmounts[Field.INPUT]) * frequency ||
+          currencies[Field.INPUT]?.isNative
+        ) {
+          setHasBeenApproved(true);
+          // setApprovalForFee("")
+          setApprovalForToken("");
+        } else {
+          setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
+        }
+        console.log(
+          parseFloat(RGPBalance),
+          tokenBalance,
+          parseFloat(formattedAmounts[Field.INPUT]) * frequency
+        );
+        if (
+          !currencies[Field.INPUT]?.isNative &&
+          currencies[Field.INPUT]?.wrapped?.symbol === "USDT" &&
+          (parseFloat(RGPBalance) < parseFloat(fee) * frequency ||
+            tokenBalance <
+              parseFloat(formattedAmounts[Field.INPUT]) * frequency)
+        ) {
+          setHasBeenApproved(false);
+          setApprovalForFee("USDT");
+          setApprovalForToken("USDT");
+        }
+        if (
+          !currencies[Field.INPUT]?.isNative &&
+          currencies[Field.INPUT]?.wrapped.symbol !== "USDT" &&
+          tokenBalance < parseFloat(formattedAmounts[Field.INPUT]) * frequency
+        ) {
+          setHasBeenApproved(false);
+
+          setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
+        }
+        if (!active) {
+          return;
+        }
+      }
     }
-    if (!active) { return }
-  }
-  }
-  } ,[inputError, typedValue,totalNumberOfTransaction,marketType,transactionSigned])
+  }, [
+    inputError,
+    typedValue,
+    totalNumberOfTransaction,
+    marketType,
+    transactionSigned,
+  ]);
 
-  const runTransaction = () =>{
+  const runTransaction = () => {
     setShowModal(!showModal);
-   setQuantityValue()
-   
-  }
+    setQuantityValue();
+  };
 
   const signTransaction = async () => {
-      try {
-        if(account !== undefined) {
+    try {
+      if (account !== undefined) {
         let web3 = new Web3(Web3.givenProvider);
-        const permitHash = "0x6e71edae12b1b97f4d1f60370fef10105fa2faae0126114a169c64845d6126c9";
+        const permitHash =
+          "0x6e71edae12b1b97f4d1f60370fef10105fa2faae0126114a169c64845d6126c9";
         // const permitHash = process.env.REACT_APP_PERMIT_HASH;
 
-         const mess = permitHash &&  web3.utils.soliditySha3(permitHash)
-        console.log({permitHash,mess})
-         if(account && mess){
-          let signature = await web3.eth.personal.sign(mess, account,"12348844");
-        setDataSignature({mess,signature})
-        setTransactionSigned(true)
-         }
- 
-
-    } else {
-      dispatch(
-        setOpenModal({
-          message: "connect wallet",
-          trxState: TrxState.TransactionFailed,
-        })
-      );
+        const mess = permitHash && web3.utils.soliditySha3(permitHash);
+        console.log({ permitHash, mess });
+        if (account && mess) {
+          let signature = await web3.eth.personal.sign(
+            mess,
+            account,
+            "12348844"
+          );
+          setDataSignature({ mess, signature });
+          setTransactionSigned(true);
+        }
+      } else {
+        dispatch(
+          setOpenModal({
+            message: "connect wallet",
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+    } catch (e) {
+      console.log(e);
     }
-  }catch(e){
-    console.log(e)
-  }
-
-  }
+  };
 
-  const approveOneOrTwoTokens = async (tokenApprovingFor:string) => {
+  const approveOneOrTwoTokens = async (tokenApprovingFor: string) => {
     if (currencies[Field.INPUT]?.isNative) {
       setHasBeenApproved(true);
-      setApprovalForToken("")
+      setApprovalForToken("");
     }
-    
-    GButtonClick("auto_period",`Approve ${tokenApprovingFor} ${tokenApprovingFor ==="USDT" ? "for fee" : ""}`,currencies[Field.INPUT]?.symbol)
 
-        dispatch(
-          setOpenModal({
-            message: `Approve ${tokenApprovingFor} ${tokenApprovingFor ==="USDT" ? "for fee" : ""}`,
-            trxState: TrxState.WaitingForConfirmation,
-          })
+    GButtonClick(
+      "auto_period",
+      `Approve ${tokenApprovingFor} ${
+        tokenApprovingFor === "USDT" ? "for fee" : ""
+      }`,
+      currencies[Field.INPUT]?.symbol
+    );
+
+    dispatch(
+      setOpenModal({
+        message: `Approve ${tokenApprovingFor} ${
+          tokenApprovingFor === "USDT" ? "for fee" : ""
+        }`,
+        trxState: TrxState.WaitingForConfirmation,
+      })
+    );
+    try {
+      if (tokenApprovingFor === "USDT") {
+        const usdt = await getERC20Token(USDT[chainId as number], library);
+        console.log({ usdt });
+        // const token = await getERC20Token(address, library);
+        const usdtDecimal = await usdt.decimals();
+        console.log({ usdtDecimal });
+        const frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
+        const walletBal = await usdt.balanceOf(account);
+        console.log({ walletBal, usdtDecimal });
+        let walletBalString = parseFloat(
+          ethers.utils.formatUnits(walletBal.toString(), usdtDecimal)
         );
-        try{
 
-        if (tokenApprovingFor === "USDT") {
-          const usdt = await getERC20Token(USDT[chainId as number], library);
-          console.log({usdt})
-          // const token = await getERC20Token(address, library);
-          const usdtDecimal = await usdt.decimals();
-          console.log({usdtDecimal})
-        const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
-          const walletBal = (await usdt.balanceOf(account));
-          console.log({walletBal,usdtDecimal})
-         let walletBalString = parseFloat(ethers.utils.formatUnits(walletBal.toString(), usdtDecimal)) 
+        const amountToApprove =
+          walletBalString >
+          parseFloat(formattedAmounts[Field.INPUT]) * frequency
+            ? walletBalString
+            : parseFloat(formattedAmounts[Field.INPUT]) * frequency;
+        console.log({ amountToApprove, walletBal, walletBalString });
 
-                   const amountToApprove = walletBalString > parseFloat(formattedAmounts[Field.INPUT]) * frequency ? walletBalString : parseFloat(formattedAmounts[Field.INPUT]) * frequency
-          console.log({amountToApprove,walletBal,walletBalString})
-          
-          const approveTransaction = await usdt.approve(
-            MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
-            ethers.utils.parseUnits(amountToApprove.toString(),usdtDecimal).toString(),
-            {
-              from: account,
-            }
-          );
-          // setArr =setArr.filter(item=>item!=="RGP")
-          const { confirmations } = await approveTransaction.wait(1);
-          if (confirmations >= 1 ) {
-            dispatch(
-              setOpenModal({
-                message: `Approval Successful.`,
-                trxState: TrxState.TransactionSuccessful,
-              })
-            );
+        const approveTransaction = await usdt.approve(
+          MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+          ethers.utils
+            .parseUnits(amountToApprove.toString(), usdtDecimal)
+            .toString(),
+          {
+            from: account,
           }
-          GSuccessfullyTransaction("auto_period",`Approval ${tokenApprovingFor} ${tokenApprovingFor ==="USDT" ? "for fee" : ""}`,currencies[Field.INPUT]?.symbol)
-            setApprovalForFee("")
-          // setArr && setApproval(setArr)
-        } else {
-        const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
-          const address = currencies[Field.INPUT]?.wrapped.address;
-          const token = address && await getERC20Token(address, library);
-          const walletBal = token && (await token?.balanceOf(account));
-          let walletBalString = parseFloat(ethers.utils.formatUnits(walletBal.toString(), currencies[Field.INPUT]?.decimals)) 
-          const amountToApprove = walletBalString > parseFloat(formattedAmounts[Field.INPUT]) * frequency ? walletBalString : parseFloat(formattedAmounts[Field.INPUT]) * frequency
-          console.log({amountToApprove,walletBal})
-          const approveTransaction = token && await token?.approve(
+        );
+        // setArr =setArr.filter(item=>item!=="RGP")
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
+          dispatch(
+            setOpenModal({
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
+        }
+        GSuccessfullyTransaction(
+          "auto_period",
+          `Approval ${tokenApprovingFor} ${
+            tokenApprovingFor === "USDT" ? "for fee" : ""
+          }`,
+          currencies[Field.INPUT]?.symbol
+        );
+        setApprovalForFee("");
+        // setArr && setApproval(setArr)
+      } else {
+        const frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
+        const address = currencies[Field.INPUT]?.wrapped.address;
+        const token = address && (await getERC20Token(address, library));
+        const walletBal = token && (await token?.balanceOf(account));
+        let walletBalString = parseFloat(
+          ethers.utils.formatUnits(
+            walletBal.toString(),
+            currencies[Field.INPUT]?.decimals
+          )
+        );
+        const amountToApprove =
+          walletBalString >
+          parseFloat(formattedAmounts[Field.INPUT]) * frequency
+            ? walletBalString
+            : parseFloat(formattedAmounts[Field.INPUT]) * frequency;
+        console.log({ amountToApprove, walletBal });
+        const approveTransaction =
+          token &&
+          (await token?.approve(
             MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
-            ethers.utils.parseUnits(amountToApprove.toString(),currencies[Field.INPUT]?.decimals).toString(),
+            ethers.utils
+              .parseUnits(
+                amountToApprove.toString(),
+                currencies[Field.INPUT]?.decimals
+              )
+              .toString(),
             {
               from: account,
             }
+          ));
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
+          dispatch(
+            setOpenModal({
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
           );
-          const { confirmations } = await approveTransaction.wait(1);
-          if (confirmations >= 1) {
-            dispatch(
-              setOpenModal({
-                message: `Approval Successful.`,
-                trxState: TrxState.TransactionSuccessful,
-              })
-            );
-          }
-          
-          GSuccessfullyTransaction("auto_period","Approval",currencies[Field.INPUT]?.symbol)
         }
-      }catch(e:any){
-        GFailedTransaction("straight_swap","approval",e.message,currencies[Field.INPUT]?.symbol)
-      }
-        setApprovalForToken("")
-      
-
-  }
-
 
-const setQuantityValue =() =>{
-  let value
- const quantity = typedValue && parseFloat(typedValue) * parseInt(totalNumberOfTransaction)
- if(currencies[Field.INPUT]?.isNative){
-     setQuantity(`${quantity}`)
-     value=quantity
-}else{
-  setQuantity(typedValue)
-  value = typedValue
-}
- return value
-}
-
-  const sendTransactionToDatabase = async () => {
-    GButtonClick("auto_period","sending transaction to database",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-    try{
-      
-     
-    const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[marketType][chainId as number], library);
-    dispatch(
-      setOpenModal({
-        message: `Signing initial transaction between ${currencies[Field.INPUT]?.symbol} and ${currencies[Field.OUTPUT]?.symbol}`,
-        trxState: TrxState.WaitingForConfirmation,
-      })
-    );
-    let currentDate = new Date();
-    let futureDate = currentDate.getTime() + deadline;
-    let data, response
-    let value = setQuantityValue()
-    console.log({value})
-    try{ 
-       
-       if (currencies[Field.INPUT]?.isNative) {
-   
-      
-      data = await autoSwapV2Contract.setPeriodToSwapETHForTokens(
-        pathArray,
-        futureDate,
-        { value: Web3.utils.toWei(value.toString(), 'ether') }
-      )
-      const fetchTransactionData = async (sendTransaction: any) => {
-        const { confirmations, status, logs } = await sendTransaction.wait(1);
-        return { confirmations, status, logs };
-      };
-      const { confirmations, status, logs } = await fetchTransactionData(data)
-      if (confirmations >= 1 && status) {
-        response = true
+        GSuccessfullyTransaction(
+          "auto_period",
+          "Approval",
+          currencies[Field.INPUT]?.symbol
+        );
       }
+    } catch (e: any) {
+      GFailedTransaction(
+        "straight_swap",
+        "approval",
+        e.message,
+        currencies[Field.INPUT]?.symbol
+      );
+    }
+    setApprovalForToken("");
+  };
+
+  const setQuantityValue = () => {
+    let value;
+    const quantity =
+      typedValue && parseFloat(typedValue) * parseInt(totalNumberOfTransaction);
+    if (currencies[Field.INPUT]?.isNative) {
+      setQuantity(`${quantity}`);
+      value = quantity;
     } else {
-      response = true
-      // quantity = typedValue
+      setQuantity(typedValue);
+      value = typedValue;
     }
-    }catch(e){
-      console.log({e})
-      dispatch(
-      setOpenModal({
-        message: "Signing initial transaction",
-        trxState: TrxState.TransactionFailed,
-      })
+    return value;
+  };
+
+  const sendTransactionToDatabase = async () => {
+    GButtonClick(
+      "auto_period",
+      "sending transaction to database",
+      currencies[Field.INPUT]?.symbol,
+      currencies[Field.OUTPUT]?.symbol
     );
-    }
-    // setQuantity(quantity)
-    let orderID = await autoSwapV2Contract.orderCount()
-   
-    if (response && value) {
+    try {
+      const autoSwapV2Contract = await autoSwapV2(
+        MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+        library
+      );
       dispatch(
         setOpenModal({
-          message: "Storing Transaction",
+          message: `Signing initial transaction between ${
+            currencies[Field.INPUT]?.symbol
+          } and ${currencies[Field.OUTPUT]?.symbol}`,
           trxState: TrxState.WaitingForConfirmation,
         })
       );
-      const changeFrequencyToday = changeFrequencyTodays(selectedFrequency)//
-      const response = await fetch(`https://autoswap-server.herokuapp.com/auto/add`, {
-        method: "POST",
-        mode: "cors",
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
-        headers: {
-          'Content-Type': 'application/json'
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: JSON.stringify({
-          address: account,
-          chainID: chainId,
-          frequency: selectedFrequency,
-          frequencyNumber: changeFrequencyToday.days,
-          presentDate: changeFrequencyToday.today,
-          presentInterval: changeFrequencyToday.interval,
-          fromAddress: currencies[Field.INPUT]?.isNative ? "native" : currencies[Field.INPUT]?.wrapped.address,
-          toAddress: currencies[Field.OUTPUT]?.isNative ? "native" : currencies[Field.OUTPUT]?.wrapped.address,
-          dataSignature,
-          percentageChange,
-          fromNumberOfDecimals: currencies[Field.INPUT]?.isNative ? 18 : currencies[Field.INPUT]?.wrapped.decimals,
-          toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative ? 18 : currencies[Field.OUTPUT]?.wrapped.decimals,
-          fromPrice: `${value}`,
-          currentToPrice: formattedAmounts[Field.OUTPUT],
-          orderID: currencies[Field.INPUT]?.isNative ? parseInt(orderID.toString()) : parseInt(orderID.toString()) + 1,
-          type: "Auto Time",
-          userExpectedPrice: userOutputPrice,
-          totalNumberOfTransaction:parseInt(totalNumberOfTransaction),
-          slippage:Number(allowedSlippage / 100),
-          pathArray,
-          minimum,
-          situation,
-          pathSymbol,
-          market:marketType
-        })
-      })
-      let res =await response.json()
-      console.log({res})
+      let currentDate = new Date();
+      let futureDate = currentDate.getTime() + deadline;
+      let data, response;
+      let value = setQuantityValue();
+      console.log({ value });
+      try {
+        if (currencies[Field.INPUT]?.isNative) {
+          data = await autoSwapV2Contract.setPeriodToSwapETHForTokens(
+            pathArray,
+            futureDate,
+            { value: Web3.utils.toWei(value.toString(), "ether") }
+          );
+          const fetchTransactionData = async (sendTransaction: any) => {
+            const { confirmations, status, logs } = await sendTransaction.wait(
+              1
+            );
+            return { confirmations, status, logs };
+          };
+          const { confirmations, status, logs } = await fetchTransactionData(
+            data
+          );
+          if (confirmations >= 1 && status) {
+            response = true;
+          }
+        } else {
+          response = true;
+          // quantity = typedValue
+        }
+      } catch (e) {
+        console.log({ e });
+        dispatch(
+          setOpenModal({
+            message: "Signing initial transaction",
+            trxState: TrxState.TransactionFailed,
+          })
+        );
+      }
+      // setQuantity(quantity)
+      let orderID = await autoSwapV2Contract.orderCount();
+
+      if (response && value) {
+        dispatch(
+          setOpenModal({
+            message: "Storing Transaction",
+            trxState: TrxState.WaitingForConfirmation,
+          })
+        );
+        const changeFrequencyToday = changeFrequencyTodays(selectedFrequency); //
+        const response = await fetch(
+          `${SERVER_ENV.url.API_URL ?? "http://localhost:8000"}/auto/add`,
+          {
+            method: "POST",
+            mode: "cors",
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              address: account,
+              chainID: chainId,
+              frequency: selectedFrequency,
+              frequencyNumber: changeFrequencyToday.days,
+              presentDate: changeFrequencyToday.today,
+              presentInterval: changeFrequencyToday.interval,
+              fromAddress: currencies[Field.INPUT]?.isNative
+                ? "native"
+                : currencies[Field.INPUT]?.wrapped.address,
+              toAddress: currencies[Field.OUTPUT]?.isNative
+                ? "native"
+                : currencies[Field.OUTPUT]?.wrapped.address,
+              dataSignature,
+              percentageChange,
+              fromNumberOfDecimals: currencies[Field.INPUT]?.isNative
+                ? 18
+                : currencies[Field.INPUT]?.wrapped.decimals,
+              toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative
+                ? 18
+                : currencies[Field.OUTPUT]?.wrapped.decimals,
+              fromPrice: `${value}`,
+              currentToPrice: formattedAmounts[Field.OUTPUT],
+              orderID: currencies[Field.INPUT]?.isNative
+                ? parseInt(orderID.toString())
+                : parseInt(orderID.toString()) + 1,
+              type: "Auto Time",
+              userExpectedPrice: userOutputPrice,
+              totalNumberOfTransaction: parseInt(totalNumberOfTransaction),
+              slippage: Number(allowedSlippage / 100),
+              pathArray,
+              minimum,
+              situation,
+              pathSymbol,
+              market: marketType,
+            }),
+          }
+        );
+        let res = await response.json();
+        console.log({ res });
+        dispatch(
+          setOpenModal({
+            message: "Successfully stored Transaction",
+            trxState: TrxState.TransactionSuccessful,
+          })
+        );
+        GSuccessfullyTransaction(
+          "auto_period",
+          "storing transaction to the database",
+          currencies[Field.INPUT]?.symbol,
+          currencies[Field.OUTPUT]?.symbol
+        );
+        dispatch(refreshTransactionTab({ refresh: Math.random() }));
+        onUserInput(Field.INPUT, "");
+        // setSignatureFromDataBase(true)
+        // setCheckedItem(false)
+        setShowNewChangesText(false);
+      }
+    } catch (e) {
+      console.log({ e });
+      GFailedTransaction(
+        "auto_period",
+        "storing transaction to database",
+        "error",
+        currencies[Field.INPUT]?.symbol,
+        currencies[Field.OUTPUT]?.symbol
+      );
       dispatch(
         setOpenModal({
-          message: "Successfully stored Transaction",
-          trxState: TrxState.TransactionSuccessful,
+          message: "Storing Transaction failed",
+          trxState: TrxState.TransactionFailed,
         })
       );
-      GSuccessfullyTransaction("auto_period","storing transaction to the database",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-      dispatch(refreshTransactionTab({ refresh:Math.random() }))
-      onUserInput(Field.INPUT, "");
-      // setSignatureFromDataBase(true)
-      // setCheckedItem(false)
-      setShowNewChangesText(false);
     }
-  }catch(e){
-    console.log({e})
-    GFailedTransaction("auto_period","storing transaction to database","error",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-    dispatch(
-      setOpenModal({
-        message: "Storing Transaction failed",
-        trxState: TrxState.TransactionFailed,
-      })
-    );
-  }
-
-  }
-
+  };
 
-  const checkApproval = async (tokenAddress?: string):Promise<string | void> => {
+  const checkApproval = async (
+    tokenAddress?: string
+  ): Promise<string | void> => {
     if (currencies[Field.INPUT]?.isNative) {
       return setHasBeenApproved(true);
     }
     try {
-      if(tokenAddress){
-         const status = await getERC20Token(tokenAddress, library);
-      const check = await status.allowance(
-        account,
-        MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
-        {
-          from: account,
-        }
-      )
-      let frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
+      if (tokenAddress) {
+        const status = await getERC20Token(tokenAddress, library);
+        const check = await status.allowance(
+          account,
+          MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+          {
+            from: account,
+          }
+        );
+        let frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
 
-      const approveBalance = ethers.utils.formatUnits(check.toString(), currencies[Field.INPUT]?.decimals) 
-      return approveBalance
+        const approveBalance = ethers.utils.formatUnits(
+          check.toString(),
+          currencies[Field.INPUT]?.decimals
+        );
+        return approveBalance;
       }
-     
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-
-  }
+  };
   const checkApprovalForRGP = async (tokenAddress: string) => {
-
     try {
       // const status = await rigelToken(tokenAddress, library);
       const status = await getERC20Token(tokenAddress, library);
-      const decimals = await status.decimals()
+      const decimals = await status.decimals();
       const check = await status.allowance(
         account,
         MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
         {
           from: account,
         }
-      )
-      const approveBalance = ethers.utils.formatUnits(check,decimals).toString()
-      console.log({approveBalance})
-      return approveBalance
+      );
+      const approveBalance = ethers.utils
+        .formatUnits(check, decimals)
+        .toString();
+      console.log({ approveBalance });
+      return approveBalance;
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-
-  }
+  };
 
   return (
     <Box fontSize="xl">
@@ -682,11 +848,14 @@ const setQuantityValue =() =>{
       >
         {isMobileDevice ? (
           <Box mb="90px">
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <ShowDetails />
             </Box>
 
-            <Box mx={4} mb={4} w={['100%', '100%', '45%', '29.5%']}
+            <Box
+              mx={4}
+              mb={4}
+              w={["100%", "100%", "45%", "29.5%"]}
               borderColor={borderColor}
               borderWidth="1px"
               borderRadius="6px"
@@ -705,9 +874,21 @@ const setQuantityValue =() =>{
               <Flex justifyContent="center" onClick={onSwitchTokens}>
                 <SwitchIcon />
               </Flex>
-              <Box borderColor={borderColor} borderWidth="1px" borderRadius="6px"  px={3} py={3}  mt={4}>
-
-                <Box display="flex" justifyContent="space-between" alignItems="center" mb={1} width="100%">
+              <Box
+                borderColor={borderColor}
+                borderWidth="1px"
+                borderRadius="6px"
+                px={3}
+                py={3}
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  mb={1}
+                  width="100%"
+                >
                   <To
                     onUserOutput={handleTypeOutput}
                     onCurrencySelection={onCurrencySelection}
@@ -718,13 +899,34 @@ const setQuantityValue =() =>{
                     display={true}
                   />
                 </Box>
-                <Box  borderColor={borderTwo} borderWidth="2px" borderRadius="6px" mt={5} pt={4} pb={4} pr={2} pl={2} bg={routerBgcolor}>
+                <Box
+                  borderColor={borderTwo}
+                  borderWidth="2px"
+                  borderRadius="6px"
+                  mt={5}
+                  pt={4}
+                  pb={4}
+                  pr={2}
+                  pl={2}
+                  bg={routerBgcolor}
+                >
                   <Flex>
-                  <MarketDropDown marketType={marketType} setMarketType={setMarketType} chainID={chainId} switchMarket={switchMarket}/>
+                    <MarketDropDown
+                      marketType={marketType}
+                      setMarketType={setMarketType}
+                      chainID={chainId}
+                      switchMarket={switchMarket}
+                    />
 
                     <Spacer />
                     <VStack>
-                      <Text fontSize="24px" color={textColorOne} isTruncated width="160px" textAlign="right">
+                      <Text
+                        fontSize="24px"
+                        color={textColorOne}
+                        isTruncated
+                        width="160px"
+                        textAlign="right"
+                      >
                         {formattedAmounts[Field.OUTPUT]}
                       </Text>
                       {/* <Text fontSize="14px" color={color}  width="160px">
@@ -736,23 +938,46 @@ const setQuantityValue =() =>{
               </Box>
 
               <Box mt={5}>
-                <Center borderColor={iconColor} borderWidth="1px" borderRadius={4} w="20px" h="20px" cursor="pointer">
+                <Center
+                  borderColor={iconColor}
+                  borderWidth="1px"
+                  borderRadius={4}
+                  w="20px"
+                  h="20px"
+                  cursor="pointer"
+                >
                   <VectorIcon />
                 </Center>
                 <Spacer />
-                {currencies[Field.INPUT] && currencies[Field.OUTPUT] && 
+                {currencies[Field.INPUT] && currencies[Field.OUTPUT] && (
                   <>
                     <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.INPUT]?.symbol} = {unitAmount && parseFloat(unitAmount) >0 ? unitAmount :inputError==="Insufficient Liquidity for this Trade." ? "--" :  <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.OUTPUT]?.symbol}
+                      1 {currencies[Field.INPUT]?.symbol} ={" "}
+                      {unitAmount && parseFloat(unitAmount) > 0 ? (
+                        unitAmount
+                      ) : inputError ===
+                        "Insufficient Liquidity for this Trade." ? (
+                        "--"
+                      ) : (
+                        <Spinner speed="0.65s" color="#999999" size="xs" />
+                      )}{" "}
+                      {currencies[Field.OUTPUT]?.symbol}
                     </Text>
                     <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.OUTPUT]?.symbol} = {oppositeAmount && parseFloat(oppositeAmount)>0 ? oppositeAmount :inputError==="Insufficient Liquidity for this Trade." ? "--" :    <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.INPUT]?.symbol}
+                      1 {currencies[Field.OUTPUT]?.symbol} ={" "}
+                      {oppositeAmount && parseFloat(oppositeAmount) > 0 ? (
+                        oppositeAmount
+                      ) : inputError ===
+                        "Insufficient Liquidity for this Trade." ? (
+                        "--"
+                      ) : (
+                        <Spinner speed="0.65s" color="#999999" size="xs" />
+                      )}{" "}
+                      {currencies[Field.INPUT]?.symbol}
                     </Text>
                     <ExclamationIcon />
                   </>
-
-                }
-
+                )}
               </Box>
               <Box display="flex" mt={5}>
                 <VStack>
@@ -762,15 +987,24 @@ const setQuantityValue =() =>{
                     </Text>
                     <ExclamationIcon />
                   </Flex>
-                  <InputGroup size="md" borderRadius="4px" borderColor={borderColor}>
-                    <Input placeholder="0" w="60px" value={percentageChange} type="number" onChange={e => {
-                      if (parseFloat(e.target.value) > 100) {
-                        setPercentageChange("100")
-                      } else {
-                        setPercentageChange(e.target.value)
-                      }
-
-                    }} />
+                  <InputGroup
+                    size="md"
+                    borderRadius="4px"
+                    borderColor={borderColor}
+                  >
+                    <Input
+                      placeholder="0"
+                      w="60px"
+                      value={percentageChange}
+                      type="number"
+                      onChange={(e) => {
+                        if (parseFloat(e.target.value) > 100) {
+                          setPercentageChange("100");
+                        } else {
+                          setPercentageChange(e.target.value);
+                        }
+                      }}
+                    />
                     <InputRightAddon children="%" fontSize="16px" />
                   </InputGroup>
                 </VStack>
@@ -783,78 +1017,94 @@ const setQuantityValue =() =>{
                     <ExclamationIcon />
                   </Flex>
                   <Menu>
-      <MenuButton
-        variant="ghost"
-        as={Button}
-        transition="all 0.2s"
-        rightIcon={<ChevronDownIcon />}
-        fontWeight={200}
-        _focus={{ color: "#319EF6" }}
-        fontSize="13px"
-        textTransform={'capitalize'}
-        border ="1px solid white"
-      >
-      5 minutes
-      </MenuButton>
-      <MenuList>
-        {["5","30","60","daily","weekly","monthly"].map((item:string,index)=>(
-          <MenuItem key={index} _focus={{ color: "#319EF6" }} onClick={(e) => setSelectedFrequency(item)} fontSize="13px">
-         {parseInt(item) ? `${item} minutes` : item}
-        </MenuItem>
-        ))
-
-        }
-        
-      </MenuList>
-    </Menu>
+                    <MenuButton
+                      variant="ghost"
+                      as={Button}
+                      transition="all 0.2s"
+                      rightIcon={<ChevronDownIcon />}
+                      fontWeight={200}
+                      _focus={{ color: "#319EF6" }}
+                      fontSize="13px"
+                      textTransform={"capitalize"}
+                      border="1px solid white"
+                    >
+                      5 minutes
+                    </MenuButton>
+                    <MenuList>
+                      {["5", "30", "60", "daily", "weekly", "monthly"].map(
+                        (item: string, index) => (
+                          <MenuItem
+                            key={index}
+                            _focus={{ color: "#319EF6" }}
+                            onClick={(e) => setSelectedFrequency(item)}
+                            fontSize="13px"
+                          >
+                            {parseInt(item) ? `${item} minutes` : item}
+                          </MenuItem>
+                        )
+                      )}
+                    </MenuList>
+                  </Menu>
                 </VStack>
               </Box>
               <Flex mt={5} justifyContent="space-between">
                 <VStack>
                   <Flex>
-                  <Text fontSize="14px" mr={2} ml="-63px">
+                    <Text fontSize="14px" mr={2} ml="-63px">
                       Range
                     </Text>
                     <ExclamationIcon />
                   </Flex>
                   <Box>
                     <Tabs
-            colorScheme="#2D276A"
-            background="#F2F5F8"
-            borderRadius="4px"
-            // ml="-63px"
-          >
-            <TabList>
-              <Tab
-                // padding="8px 34px"
-                padding="7px"
-                background={situation==="above" ? "#319EF6" : ""}
-                color={situation!=="above" ? "#319EF6" : ""}
-                borderRadius="4px"
-                border="none"
-                onClick={() => setSituation('above')}
-                                isDisabled ={parseFloat(percentageChange)<=0 || percentageChange ===""?true:false}
-              >
-                Above
-              </Tab>
-              <Tab
-                padding="7px"
-                background={situation==="below" ? "#319EF6" : ""}
-                color={situation!=="below" ? "#319EF6" : ""}
-                border="none"
-                borderRadius="4px"
-                onClick={() => setSituation('below')}
-                                isDisabled ={parseFloat(percentageChange)<=0 || percentageChange ===""?true:false}
-              >
-                Below
-              </Tab>
-            </TabList>
-          </Tabs>
+                      colorScheme="#2D276A"
+                      background="#F2F5F8"
+                      borderRadius="4px"
+                      // ml="-63px"
+                    >
+                      <TabList>
+                        <Tab
+                          // padding="8px 34px"
+                          padding="7px"
+                          background={situation === "above" ? "#319EF6" : ""}
+                          color={situation !== "above" ? "#319EF6" : ""}
+                          borderRadius="4px"
+                          border="none"
+                          onClick={() => setSituation("above")}
+                          isDisabled={
+                            parseFloat(percentageChange) <= 0 ||
+                            percentageChange === ""
+                              ? true
+                              : false
+                          }
+                        >
+                          Above
+                        </Tab>
+                        <Tab
+                          padding="7px"
+                          background={situation === "below" ? "#319EF6" : ""}
+                          color={situation !== "below" ? "#319EF6" : ""}
+                          border="none"
+                          borderRadius="4px"
+                          onClick={() => setSituation("below")}
+                          isDisabled={
+                            parseFloat(percentageChange) <= 0 ||
+                            percentageChange === ""
+                              ? true
+                              : false
+                          }
+                        >
+                          Below
+                        </Tab>
+                      </TabList>
+                    </Tabs>
                   </Box>
-          
                 </VStack>
                 <Flex mt={10} justifyContent="space-between">
-                  <Text fontSize="13px">Fee:</Text> <Text fontSize="13px" opacity="0.7" ml={1}>{fee} USDT</Text>
+                  <Text fontSize="13px">Fee:</Text>{" "}
+                  <Text fontSize="13px" opacity="0.7" ml={1}>
+                    {fee} USDT
+                  </Text>
                 </Flex>
                 <VStack>
                   <Flex>
@@ -863,141 +1113,175 @@ const setQuantityValue =() =>{
                     </Text>
                     <ExclamationIcon />
                   </Flex>
-                  <InputGroup size="md" borderRadius="4px" borderColor={borderColor}>
-                    <Input placeholder="0" w="80px" value={totalNumberOfTransaction} type="number" onChange={e => {
-                      setTotalNumberOfTransaction(e.target.value)
-                    }} />
-                    <InputRightAddon children="times" fontSize="16px"padding="3px" />
+                  <InputGroup
+                    size="md"
+                    borderRadius="4px"
+                    borderColor={borderColor}
+                  >
+                    <Input
+                      placeholder="0"
+                      w="80px"
+                      value={totalNumberOfTransaction}
+                      type="number"
+                      onChange={(e) => {
+                        setTotalNumberOfTransaction(e.target.value);
+                      }}
+                    />
+                    <InputRightAddon
+                      children="times"
+                      fontSize="16px"
+                      padding="3px"
+                    />
                   </InputGroup>
                 </VStack>
               </Flex>
               <Box mt={5}>
-              {insufficientBalance || inputError ?( 
-            <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientBalance}
-              color={inputError ? color : "#FFFFFF"}
-              bgColor={inputError ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-              {inputError
-                ? inputError
-                : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${currencies[Field.INPUT]?.symbol==="RGP" ? "for USDT":""}`}
-            </Button>) :  insufficientFee ?  <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientFee}
-              color={insufficientFee ? color : "#FFFFFF"}
-              bgColor={insufficientFee ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-Insufficient USDT for fee
-            </Button> :  !transactionSigned ? <Button
+                {insufficientBalance || inputError ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientBalance}
+                    color={inputError ? color : "#FFFFFF"}
+                    bgColor={inputError ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    {inputError
+                      ? inputError
+                      : `Insufficient ${
+                          currencies[Field.INPUT]?.symbol
+                        } Balance ${
+                          currencies[Field.INPUT]?.symbol === "RGP"
+                            ? "for USDT"
+                            : ""
+                        }`}
+                  </Button>
+                ) : insufficientFee ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientFee}
+                    color={insufficientFee ? color : "#FFFFFF"}
+                    bgColor={insufficientFee ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    Insufficient USDT for fee
+                  </Button>
+                ) : !transactionSigned ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
-                    
                     onClick={() => {
-                      setCurrentToPrice(receivedAmount)
-                      setShowModal(!showModal)
-                      GButtonClick("auto_period","sign wallet",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
+                      setCurrentToPrice(receivedAmount);
+                      setShowModal(!showModal);
+                      GButtonClick(
+                        "auto_period",
+                        "sign wallet",
+                        currencies[Field.INPUT]?.symbol,
+                        currencies[Field.OUTPUT]?.symbol
+                      );
                     }}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Sign Wallet
-                  </Button> :  approvalForToken ? <Button
+                  </Button>
+                ) : approvalForToken ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForToken)}
+                    onClick={() => approveOneOrTwoTokens(approvalForToken)}
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve {approvalForToken}
-                  </Button> : approvalForFee ? <Button
+                  </Button>
+                ) : approvalForFee ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForFee)}
+                    onClick={() => approveOneOrTwoTokens(approvalForFee)}
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve USDT for fee
-                  </Button> : <Button
+                  </Button>
+                ) : (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
-                    onClick={()=>
-                      {
-                      setCurrentToPrice(receivedAmount)
-                      signatureFromDataBase ? 
-                      setShowModal(!showModal)
-                     : sendTransactionToDatabase()
+                    onClick={() => {
+                      setCurrentToPrice(receivedAmount);
+                      signatureFromDataBase
+                        ? setShowModal(!showModal)
+                        : sendTransactionToDatabase();
                     }}
                     // onClick={sendTransactionToDatabase}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Send Transaction
                   </Button>
-                }
-
+                )}
               </Box>
-            <BridgeCard />
+              <BridgeCard />
             </Box>
 
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <History />
             </Box>
           </Box>
         ) : (
           <>
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <ShowDetails />
             </Box>
 
             <Box
-              mx={4} mb={4} w={['100%', '100%', '45%', '29.5%']}
+              mx={4}
+              mb={4}
+              w={["100%", "100%", "45%", "29.5%"]}
               borderColor={borderColor}
               borderWidth="1px"
               borderRadius="6px"
@@ -1017,10 +1301,20 @@ Insufficient USDT for fee
                 <SwitchIcon />
               </Flex>
 
-              <Box borderColor={borderColor} borderWidth="1px" borderRadius="6px" px={3} py={3} mt={4}>
-
-                <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
-
+              <Box
+                borderColor={borderColor}
+                borderWidth="1px"
+                borderRadius="6px"
+                px={3}
+                py={3}
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  mb={1}
+                >
                   <To
                     onUserOutput={handleTypeOutput}
                     onCurrencySelection={onCurrencySelection}
@@ -1031,15 +1325,35 @@ Insufficient USDT for fee
                   />
                 </Box>
 
-              
-                <Box  borderColor={borderTwo} borderWidth="2px" borderRadius="6px" mt={5} pt={4} pb={4} pr={2} pl={2} bg={routerBgcolor}>
+                <Box
+                  borderColor={borderTwo}
+                  borderWidth="2px"
+                  borderRadius="6px"
+                  mt={5}
+                  pt={4}
+                  pb={4}
+                  pr={2}
+                  pl={2}
+                  bg={routerBgcolor}
+                >
                   <Flex>
-                  <MarketDropDown marketType={marketType} setMarketType={setMarketType} chainID={chainId} switchMarket={switchMarket}/>
+                    <MarketDropDown
+                      marketType={marketType}
+                      setMarketType={setMarketType}
+                      chainID={chainId}
+                      switchMarket={switchMarket}
+                    />
 
                     <Spacer />
                     <VStack>
-                      <Text fontSize="24px" color={textColorOne} textAlign="right" isTruncated width="160px" >
-                      {formattedAmounts[Field.OUTPUT]}
+                      <Text
+                        fontSize="24px"
+                        color={textColorOne}
+                        textAlign="right"
+                        isTruncated
+                        width="160px"
+                      >
+                        {formattedAmounts[Field.OUTPUT]}
                       </Text>
                     </VStack>
                   </Flex>
@@ -1047,20 +1361,35 @@ Insufficient USDT for fee
               </Box>
 
               <Box mt={5}>
-              {currencies[Field.INPUT] && currencies[Field.OUTPUT] && 
+                {currencies[Field.INPUT] && currencies[Field.OUTPUT] && (
                   <>
                     <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.INPUT]?.symbol} = {unitAmount && parseFloat(unitAmount) >0 ? unitAmount :inputError==="Insufficient Liquidity for this Trade." ? "--" :  <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.OUTPUT]?.symbol}
+                      1 {currencies[Field.INPUT]?.symbol} ={" "}
+                      {unitAmount && parseFloat(unitAmount) > 0 ? (
+                        unitAmount
+                      ) : inputError ===
+                        "Insufficient Liquidity for this Trade." ? (
+                        "--"
+                      ) : (
+                        <Spinner speed="0.65s" color="#999999" size="xs" />
+                      )}{" "}
+                      {currencies[Field.OUTPUT]?.symbol}
                     </Text>
                     <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.OUTPUT]?.symbol} = {oppositeAmount && parseFloat(oppositeAmount)>0 ? oppositeAmount :inputError==="Insufficient Liquidity for this Trade." ? "--" :    <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.INPUT]?.symbol}
+                      1 {currencies[Field.OUTPUT]?.symbol} ={" "}
+                      {oppositeAmount && parseFloat(oppositeAmount) > 0 ? (
+                        oppositeAmount
+                      ) : inputError ===
+                        "Insufficient Liquidity for this Trade." ? (
+                        "--"
+                      ) : (
+                        <Spinner speed="0.65s" color="#999999" size="xs" />
+                      )}{" "}
+                      {currencies[Field.INPUT]?.symbol}
                     </Text>
                     <ExclamationIcon />
                   </>
-
-                }
-
-
+                )}
               </Box>
               <Box display="flex" mt={5}>
                 <VStack>
@@ -1070,15 +1399,24 @@ Insufficient USDT for fee
                     </Text>
                     <ExclamationIcon />
                   </Flex>
-                  <InputGroup size="md" borderRadius="4px" borderColor={borderColor}>
-                    <Input placeholder="0" w="60px" value={percentageChange} type="number" onChange={e => {
-                      if (parseFloat(e.target.value) > 100) {
-                        setPercentageChange("100")
-                      } else {
-                        setPercentageChange(e.target.value)
-                      }
-
-                    }} />
+                  <InputGroup
+                    size="md"
+                    borderRadius="4px"
+                    borderColor={borderColor}
+                  >
+                    <Input
+                      placeholder="0"
+                      w="60px"
+                      value={percentageChange}
+                      type="number"
+                      onChange={(e) => {
+                        if (parseFloat(e.target.value) > 100) {
+                          setPercentageChange("100");
+                        } else {
+                          setPercentageChange(e.target.value);
+                        }
+                      }}
+                    />
                     <InputRightAddon children="%" fontSize="16px" />
                   </InputGroup>
                 </VStack>
@@ -1091,79 +1429,103 @@ Insufficient USDT for fee
                     <ExclamationIcon />
                   </Flex>
                   <Menu>
-      <MenuButton
-        variant="ghost"
-        as={Button}
-        transition="all 0.2s"
-        rightIcon={<ChevronDownIcon />}
-        fontWeight={200}
-        _focus={{ color: "#319EF6" }}
-        fontSize="13px"
-        textTransform={'capitalize'}
-        border ="1px solid white"
-        padding={1}
-      >
-      {parseInt(selectedFrequency) ? `${selectedFrequency} minutes` : selectedFrequency}
-      </MenuButton>
-      <MenuList>
-        {["5","10","30","60","daily","weekly","monthly"].map((item:string,index)=>(
-          <MenuItem key={index} _focus={{ color: "#319EF6" }} onClick={(e) => setSelectedFrequency(item)} fontSize="13px">
-         {parseInt(item) ? `${item} minutes` : item}
-        </MenuItem>
-        ))
-
-        }
-        
-      </MenuList>
-    </Menu>
+                    <MenuButton
+                      variant="ghost"
+                      as={Button}
+                      transition="all 0.2s"
+                      rightIcon={<ChevronDownIcon />}
+                      fontWeight={200}
+                      _focus={{ color: "#319EF6" }}
+                      fontSize="13px"
+                      textTransform={"capitalize"}
+                      border="1px solid white"
+                      padding={1}
+                    >
+                      {parseInt(selectedFrequency)
+                        ? `${selectedFrequency} minutes`
+                        : selectedFrequency}
+                    </MenuButton>
+                    <MenuList>
+                      {[
+                        "5",
+                        "10",
+                        "30",
+                        "60",
+                        "daily",
+                        "weekly",
+                        "monthly",
+                      ].map((item: string, index) => (
+                        <MenuItem
+                          key={index}
+                          _focus={{ color: "#319EF6" }}
+                          onClick={(e) => setSelectedFrequency(item)}
+                          fontSize="13px"
+                        >
+                          {parseInt(item) ? `${item} minutes` : item}
+                        </MenuItem>
+                      ))}
+                    </MenuList>
+                  </Menu>
                 </VStack>
               </Box>
               <Flex mt={5} justifyContent="space-between">
                 <VStack>
                   <Flex>
-                  <Text fontSize="14px" mr={2} ml="-63px">
+                    <Text fontSize="14px" mr={2} ml="-63px">
                       Range
                     </Text>
                     <ExclamationIcon />
                   </Flex>
                   <Box>
                     <Tabs
-            colorScheme="#2D276A"
-            background="#F2F5F8"
-            borderRadius="4px"
-            // ml="-63px"
-          >
-            <TabList>
-              <Tab
-                // padding="8px 34px"
-                padding="7px"
-                background={situation==="above" ? "#319EF6" : ""}
-                color={situation!=="above" ? "#319EF6" : ""}
-                borderRadius="4px"
-                border="none"
-                onClick={() => setSituation('above')}
-                                isDisabled ={parseFloat(percentageChange)<=0 || percentageChange ===""?true:false}
-              >
-                Above
-              </Tab>
-              <Tab
-                padding="7px"
-                background={situation==="below" ? "#319EF6" : ""}
-                color={situation!=="below" ? "#319EF6" : ""}
-                border="none"
-                borderRadius="4px"
-                onClick={() => setSituation('below')}
-                                isDisabled ={parseFloat(percentageChange)<=0 || percentageChange ===""?true:false}
-              >
-                Below
-              </Tab>
-            </TabList>
-          </Tabs>
+                      colorScheme="#2D276A"
+                      background="#F2F5F8"
+                      borderRadius="4px"
+                      // ml="-63px"
+                    >
+                      <TabList>
+                        <Tab
+                          // padding="8px 34px"
+                          padding="7px"
+                          background={situation === "above" ? "#319EF6" : ""}
+                          color={situation !== "above" ? "#319EF6" : ""}
+                          borderRadius="4px"
+                          border="none"
+                          onClick={() => setSituation("above")}
+                          isDisabled={
+                            parseFloat(percentageChange) <= 0 ||
+                            percentageChange === ""
+                              ? true
+                              : false
+                          }
+                        >
+                          Above
+                        </Tab>
+                        <Tab
+                          padding="7px"
+                          background={situation === "below" ? "#319EF6" : ""}
+                          color={situation !== "below" ? "#319EF6" : ""}
+                          border="none"
+                          borderRadius="4px"
+                          onClick={() => setSituation("below")}
+                          isDisabled={
+                            parseFloat(percentageChange) <= 0 ||
+                            percentageChange === ""
+                              ? true
+                              : false
+                          }
+                        >
+                          Below
+                        </Tab>
+                      </TabList>
+                    </Tabs>
                   </Box>
-          
                 </VStack>
                 <Flex mt={10} justifyContent="space-between">
-                  <Text>Fee:</Text> <Text fontSize="16px" opacity="0.7" ml={1}>{fee} USDT</Text>
+                  <Text>Fee:</Text>{" "}
+                  <Text fontSize="16px" opacity="0.7" ml={1}>
+                    {fee} USDT
+                  </Text>
                 </Flex>
                 <VStack>
                   <Flex>
@@ -1172,128 +1534,160 @@ Insufficient USDT for fee
                     </Text>
                     <ExclamationIcon />
                   </Flex>
-                  <InputGroup size="md" borderRadius="4px" borderColor={borderColor}>
-                    <Input placeholder="0" w="80px" value={totalNumberOfTransaction} type="number" onChange={e => {
-                      setTotalNumberOfTransaction(e.target.value)
-                    }} />
-                    <InputRightAddon children="times" fontSize="16px"padding="3px" />
+                  <InputGroup
+                    size="md"
+                    borderRadius="4px"
+                    borderColor={borderColor}
+                  >
+                    <Input
+                      placeholder="0"
+                      w="80px"
+                      value={totalNumberOfTransaction}
+                      type="number"
+                      onChange={(e) => {
+                        setTotalNumberOfTransaction(e.target.value);
+                      }}
+                    />
+                    <InputRightAddon
+                      children="times"
+                      fontSize="16px"
+                      padding="3px"
+                    />
                   </InputGroup>
                 </VStack>
               </Flex>
               <Box mt={5}>
-                {insufficientBalance || inputError ?( 
-            <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientBalance}
-              color={inputError ? color : "#FFFFFF"}
-              bgColor={inputError ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-              {inputError
-                ? inputError
-                : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${currencies[Field.INPUT]?.symbol==="RGP" && "for fee"}`}
-            </Button>): insufficientFee ?  <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientFee}
-              color={insufficientFee ? color : "#FFFFFF"}
-              bgColor={insufficientFee ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-Insufficient USDT for fee
-            </Button>  : !transactionSigned ? <Button
+                {insufficientBalance || inputError ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientBalance}
+                    color={inputError ? color : "#FFFFFF"}
+                    bgColor={inputError ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    {inputError
+                      ? inputError
+                      : `Insufficient ${
+                          currencies[Field.INPUT]?.symbol
+                        } Balance ${
+                          currencies[Field.INPUT]?.symbol === "RGP" && "for fee"
+                        }`}
+                  </Button>
+                ) : insufficientFee ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientFee}
+                    color={insufficientFee ? color : "#FFFFFF"}
+                    bgColor={insufficientFee ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    Insufficient USDT for fee
+                  </Button>
+                ) : !transactionSigned ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
-                    
                     onClick={() => {
-                      setCurrentToPrice(receivedAmount)
-                      setShowModal(!showModal)
-                      GButtonClick("auto_period","sign wallet",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
+                      setCurrentToPrice(receivedAmount);
+                      setShowModal(!showModal);
+                      GButtonClick(
+                        "auto_period",
+                        "sign wallet",
+                        currencies[Field.INPUT]?.symbol,
+                        currencies[Field.OUTPUT]?.symbol
+                      );
                     }}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Sign Wallet
-                  </Button> :  approvalForToken ? <Button
+                  </Button>
+                ) : approvalForToken ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForToken)}
-                   color={inputError ? color : "#FFFFFF"}
+                    onClick={() => approveOneOrTwoTokens(approvalForToken)}
+                    color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve {approvalForToken}
-                  </Button> : approvalForFee ? <Button
+                  </Button>
+                ) : approvalForFee ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForFee)}
-                   color={inputError ? color : "#FFFFFF"}
+                    onClick={() => approveOneOrTwoTokens(approvalForFee)}
+                    color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve USDT for fee
-                  </Button>: <Button
+                  </Button>
+                ) : (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
-                    onClick={()=>
-                      {
-                      setCurrentToPrice(receivedAmount)
-                      signatureFromDataBase ? runTransaction() : sendTransactionToDatabase()
+                    onClick={() => {
+                      setCurrentToPrice(receivedAmount);
+                      signatureFromDataBase
+                        ? runTransaction()
+                        : sendTransactionToDatabase();
                     }}
                     // onClick={sendTransactionToDatabase}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Send Transaction
                   </Button>
-                }
-
+                )}
               </Box>
-         
-                <BridgeCard/>  
-                 </Box>
-            <Box mx={5} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+
+              <BridgeCard />
+            </Box>
+            <Box mx={5} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <History />
             </Box>
           </>
@@ -1323,7 +1717,7 @@ Insufficient USDT for fee
         market={marketType}
       />
     </Box>
-  )
-}
+  );
+};
 
-export default SetPrice
+export default SetPrice;
diff --git a/src/pages/Swap/InstantSwap.tsx b/src/pages/Swap/InstantSwap.tsx
index 55365c4c..b9885a1e 100644
--- a/src/pages/Swap/InstantSwap.tsx
+++ b/src/pages/Swap/InstantSwap.tsx
@@ -1,21 +1,29 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import ShowDetails from './components/details/ShowDetails';
-import History from './components/history/History';
-import From from './components/sendToken/From';
-import To from './components/sendToken/To';
-import SwapSettings from './components/sendToken/SwapSettings';
-import { useActiveWeb3React } from '../../utils/hooks/useActiveWeb3React';
-import { VectorIcon, ExclamationIcon, SwitchIcon } from '../../theme/components/Icons';
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import ShowDetails from "./components/details/ShowDetails";
+import History from "./components/history/History";
+import From from "./components/sendToken/From";
+import To from "./components/sendToken/To";
+import SwapSettings from "./components/sendToken/SwapSettings";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
+import {
+  VectorIcon,
+  ExclamationIcon,
+  SwitchIcon,
+} from "../../theme/components/Icons";
 import {
   useDerivedSwapInfo,
   useSwapActionHandlers,
   useSwapState,
-} from '../../state/swap/hooks';
-import { binanceTestFreeMarketArray,binanceFreeMarketArray,polygonFreeMarketArray } from "../../state/swap/hooks"
-import { getERC20Token } from '../../utils/utilsFunctions';
-import { Field } from '../../state/swap/actions';
-import Web3 from 'web3';
-import { ethers } from 'ethers';
+} from "../../state/swap/hooks";
+import {
+  binanceTestFreeMarketArray,
+  binanceFreeMarketArray,
+  polygonFreeMarketArray,
+} from "../../state/swap/hooks";
+import { getERC20Token } from "../../utils/utilsFunctions";
+import { Field } from "../../state/swap/actions";
+import Web3 from "web3";
+import { ethers } from "ethers";
 
 import {
   Box,
@@ -41,72 +49,101 @@ import {
   Tab,
   Img,
   AlertDescription,
-  Spinner
-} from '@chakra-ui/react';
-import AutoTimeModal from './modals/autoTimeModal';
+  Spinner,
+} from "@chakra-ui/react";
+import AutoTimeModal from "./modals/autoTimeModal";
 import { io } from "socket.io-client";
 import { useUserSlippageTolerance } from "../../state/user/hooks";
-import { useSelector,useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../state";
-import { autoSwapV2, rigelToken } from '../../utils/Contracts';
-import { RGPADDRESSES, OTHERMARKETADDRESSES,MARKETFREESWAPADDRESSES, OTHERMARKETFACTORYADDRESSES, RGP } from '../../utils/addresses';
-import { setOpenModal, setRefresh, TrxState } from "../../state/application/reducer";
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { refreshTransactionTab } from '../../state/transaction/actions';
-import { GButtonClick, GFailedTransaction, GSuccessfullyTransaction } from '../../components/G-analytics/gIndex';
-import { useHistory, useLocation } from 'react-router-dom';
-import { GetAddressTokenBalance } from '../../state/wallet/hooks';
-import { addToast } from '../../components/Toast/toastSlice';
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink';
-import { maxAmountSpend } from '../../utils/maxAmountSpend';
-import MarketFreeDropDown from '../../components/MarketFreeDropdown';
-import BridgeCard from './components/bridgeCard';
-
-
+import { autoSwapV2, rigelToken } from "../../utils/Contracts";
+import {
+  RGPADDRESSES,
+  OTHERMARKETADDRESSES,
+  MARKETFREESWAPADDRESSES,
+  OTHERMARKETFACTORYADDRESSES,
+  RGP,
+} from "../../utils/addresses";
+import {
+  setOpenModal,
+  setRefresh,
+  TrxState,
+} from "../../state/application/reducer";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import { refreshTransactionTab } from "../../state/transaction/actions";
+import {
+  GButtonClick,
+  GFailedTransaction,
+  GSuccessfullyTransaction,
+} from "../../components/G-analytics/gIndex";
+import { useHistory, useLocation } from "react-router-dom";
+import { GetAddressTokenBalance } from "../../state/wallet/hooks";
+import { addToast } from "../../components/Toast/toastSlice";
+import { ExplorerDataType, getExplorerLink } from "../../utils/getExplorerLink";
+import { maxAmountSpend } from "../../utils/maxAmountSpend";
+import MarketFreeDropDown from "../../components/MarketFreeDropdown";
+import BridgeCard from "./components/bridgeCard";
+import { SERVER_ENV } from "../../constants/chains";
 
 const InstantSwap = () => {
-  const [isMobileDevice] = useMediaQuery('(max-width: 750px)');
+  const [isMobileDevice] = useMediaQuery("(max-width: 750px)");
   const dispatch = useDispatch();
   const location = useLocation();
-  const pathname = useLocation().pathname
-  console.log({location},location.search.includes("bsc_test"))
-  const borderColor = useColorModeValue('#DEE6ED', '#324D68');
-  const iconColor = useColorModeValue('#666666', '#DCE6EF');
-  const textColorOne = useColorModeValue('#333333', '#F1F5F8');
-  const routerBgcolor = useColorModeValue('#F2F5F8', '#213345');
+  const pathname = useLocation().pathname;
+
+  const borderColor = useColorModeValue("#DEE6ED", "#324D68");
+  const iconColor = useColorModeValue("#666666", "#DCE6EF");
+  const textColorOne = useColorModeValue("#333333", "#F1F5F8");
+  const routerBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const buttonBgcolor = useColorModeValue("#319EF6", "#4CAFFF");
-  const color = useColorModeValue('#999999', '#7599BD');
+  const color = useColorModeValue("#999999", "#7599BD");
   const switchBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const lightmode = useColorModeValue(true, false);
-  const borderTwo = useColorModeValue('#319EF6', '#4CAFFF');
-  const { account, library, chainId } = useActiveWeb3React()
+  const borderTwo = useColorModeValue("#319EF6", "#4CAFFF");
+  const { account, library, chainId } = useActiveWeb3React();
 
   const { independentField, typedValue } = useSwapState();
 
-  const [hasBeenApproved, setHasBeenApproved] = useState(false)
-  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false)
-  const [transactionSigned, setTransactionSigned] = useState(false)
-  const [socket,setSocket] = useState <any>(null)
-  const [marketType, setMarketType] = useState(location.search.includes("bsc_test") || location.search.includes("pn_mumbai") ? "Smartswap" : location.search.includes("bsc") ? "Pancakeswap" : location.search.includes("avalanche") ?"Tradejoe" : "Quickswap")
-  const [percentageChange, setPercentageChange] = useState<string>("0")
-  const [approvalForFee, setApprovalForFee] = useState("")
-  const [fee, setFee] = useState("")
-  const [approvalForToken, setApprovalForToken] = useState("")
-  const [showModal, setShowModal] = useState(false)
-  const [totalNumberOfTransaction,setTotalNumberOfTransaction] = useState("1")
-  const [situation,setSituation] = useState("above")
-  const [userOutputPrice, setUserOutputPrice] = useState<number>(0)
-  const [currentToPrice,setCurrentToPrice] = useState("0")
-  const [quantity,setQuantity] = useState< string>("0")
-  const [showNewChangesText,setShowNewChangesText] = useState(false)
+  const [hasBeenApproved, setHasBeenApproved] = useState(false);
+  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false);
+  const [transactionSigned, setTransactionSigned] = useState(false);
+  const [socket, setSocket] = useState<any>(null);
+  const [marketType, setMarketType] = useState(
+    location.search.includes("bsc_test") ||
+      location.search.includes("pn_mumbai")
+      ? "Smartswap"
+      : location.search.includes("bsc")
+      ? "Pancakeswap"
+      : location.search.includes("avalanche")
+      ? "Tradejoe"
+      : "Quickswap"
+  );
+  const [percentageChange, setPercentageChange] = useState<string>("0");
+  const [approvalForFee, setApprovalForFee] = useState("");
+  const [fee, setFee] = useState("");
+  const [approvalForToken, setApprovalForToken] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [totalNumberOfTransaction, setTotalNumberOfTransaction] = useState("1");
+  const [userOutputPrice, setUserOutputPrice] = useState<number>(0);
+  const [currentToPrice, setCurrentToPrice] = useState("0");
+  const [quantity, setQuantity] = useState<string>("0");
+  const [showNewChangesText, setShowNewChangesText] = useState(false);
   const [insufficientBalance, setInsufficientBalance] = useState(false);
-  const [dataSignature,setDataSignature] = useState<{mess:string,signature:string}>({
-    mess:"",
-    signature:""
-  })
+  const [dataSignature, setDataSignature] = useState<{
+    mess: string;
+    signature: string;
+  }>({
+    mess: "",
+    signature: "",
+  });
 
-  const routerHistory = useHistory()
-  const { onCurrencySelection, onUserInput, onSwitchTokens, onMarketSelection, } = useSwapActionHandlers();
+  const routerHistory = useHistory();
+  const {
+    onCurrencySelection,
+    onUserInput,
+    onSwitchTokens,
+    onMarketSelection,
+  } = useSwapActionHandlers();
 
   const {
     currencies,
@@ -118,9 +155,9 @@ const InstantSwap = () => {
     pathSymbol,
     pathArray,
     oppositeAmount,
-    unitAmount
+    unitAmount,
   } = useDerivedSwapInfo();
- 
+
   const handleTypeInput = useCallback(
     (value: string) => {
       onUserInput(Field.INPUT, value);
@@ -133,107 +170,107 @@ const InstantSwap = () => {
     },
     [onUserInput]
   );
- useEffect(()=>{
-  setMarketType(location.search.includes("bsc_test") || location.search.includes("pn_mumbai") ? "Smartswap" : location.search.includes("bsc") ? "Pancakeswap" : location.search.includes("avalanche") ?"Tradejoe" : "Quickswap")
-   let market = pathname.split("/").length===3? pathname.split("/")[2]:""
-   checkIfMarketExists(market,chainId)
-
- },[pathname,chainId])
+  useEffect(() => {
+    setMarketType(
+      location.search.includes("bsc_test") ||
+        location.search.includes("pn_mumbai")
+        ? "Smartswap"
+        : location.search.includes("bsc")
+        ? "Pancakeswap"
+        : location.search.includes("avalanche")
+        ? "Tradejoe"
+        : "Quickswap"
+    );
+    let market = pathname.split("/").length === 3 ? pathname.split("/")[2] : "";
+    checkIfMarketExists(market, chainId);
+  }, [pathname, chainId]);
 
-  const switchMarket = (market:string)=>{
-    routerHistory.push(`/freeswap/${market}`)
-  }
+  const switchMarket = (market: string) => {
+    routerHistory.push(`/freeswap/${market}`);
+  };
   useEffect(() => {
     async function checkIfSignatureExists() {
-      
-        setTransactionSigned(false)
-        setSignatureFromDataBase(false)
+      setTransactionSigned(false);
+      setSignatureFromDataBase(false);
     }
     if (account) {
-      checkIfSignatureExists()
-      getFee()
+      checkIfSignatureExists();
+      getFee();
     }
-  }, [account,chainId,marketType])
-  useEffect(
-    () => {
-  setSocket(io("https://autoswap-server.herokuapp.com"));//https://autoswap-server.herokuapp.com
-  
-    },
-    []
-  )
+  }, [account, chainId, marketType]);
+  useEffect(() => {
+    setSocket(io(SERVER_ENV.url.API_URL ?? "http://localhost:8000"));
+  }, []);
 
   useEffect(() => {
-    socket?.on("instant",(res:any)=>{
-        setShowNewChangesText(false);
-        setHasBeenApproved(true);
-        const explorerLink = getExplorerLink(
-          chainId as number,
-          res.transactionHash,
-          ExplorerDataType.TRANSACTION
-        );
-        console.log({formattedAmounts,currencies,Field})
-       
-        // setDataSignature({mess:"",signature:""})
-        // setTransactionSigned(false)
-        // setSignatureFromDataBase(false)
-      
-        // dispatch(
-        //   addToast({
-        //     message: `Swap ${formattedAmounts[Field.INPUT]} ${
-        //       currencies[Field.INPUT]?.symbol
-        //     } for ${formattedAmounts[Field.OUTPUT]} ${currencies[Field.OUTPUT]?.symbol}`,
-        //     URL: explorerLink,
-        //   })
-        // );
-            // onUserInput(Field.INPUT, "");
-        dispatch(
-          setOpenModal({
-            message: `Swap Successful.`,
-            trxState: TrxState.TransactionSuccessful,
-          })
-        )
-    })
-    
-}, [socket]);
+    socket?.on("instant", (res: any) => {
+      setShowNewChangesText(false);
+      setHasBeenApproved(true);
+      const explorerLink = getExplorerLink(
+        chainId as number,
+        res.transactionHash,
+        ExplorerDataType.TRANSACTION
+      );
+
+      dispatch(
+        setOpenModal({
+          message: `Swap Successful.`,
+          trxState: TrxState.TransactionSuccessful,
+        })
+      );
+    });
+  }, [socket]);
 
   const [allowedSlippage] = useUserSlippageTolerance();
-  const getFee =async () => {
-    const autoSwapV2Contract = await autoSwapV2(MARKETFREESWAPADDRESSES[marketType][chainId as number], library);
-    try{
-      const amountToApprove = await autoSwapV2Contract.fee()
-      console.log({amountToApprove},MARKETFREESWAPADDRESSES[marketType][chainId as number])
-    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether")
-    // const fee= "10"
-    setFee(fee)
-    return fee 
-    }catch(e){
-      console.log("ERROR",e)
+  const getFee = async () => {
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETFREESWAPADDRESSES[marketType][chainId as number],
+      library
+    );
+    try {
+      const amountToApprove = await autoSwapV2Contract.fee();
+      console.log(
+        { amountToApprove },
+        MARKETFREESWAPADDRESSES[marketType][chainId as number]
+      );
+      const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether");
+      // const fee= "10"
+      setFee(fee);
+      return fee;
+    } catch (e) {
+      console.log("ERROR", e);
     }
-   
-  }
-  const checkIfMarketExists = (market:string,chainId:number| undefined) => {
-    let marketArray:any
-    if(chainId === 56) marketArray = binanceFreeMarketArray
-    else if(chainId === 97) marketArray = binanceTestFreeMarketArray
-    else if(chainId === 137) marketArray = polygonFreeMarketArray
-    if(marketArray && marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())){
-      let item = marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())
-      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1))
+  };
+  const checkIfMarketExists = (market: string, chainId: number | undefined) => {
+    let marketArray: any;
+    if (chainId === 56) marketArray = binanceFreeMarketArray;
+    else if (chainId === 97) marketArray = binanceTestFreeMarketArray;
+    else if (chainId === 137) marketArray = polygonFreeMarketArray;
+    if (
+      marketArray &&
+      marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      )
+    ) {
+      let item = marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      );
+      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1));
     }
-  }
+  };
   const parsedAmounts = useMemo(
     () =>
       showWrap
         ? {
-          [Field.INPUT]: typedValue,
-          [Field.OUTPUT]: typedValue,
-        }
+            [Field.INPUT]: typedValue,
+            [Field.OUTPUT]: typedValue,
+          }
         : {
-          [Field.INPUT]:
-            independentField === Field.INPUT ? parsedAmount : bestTrade,
-          [Field.OUTPUT]:
-            independentField === Field.OUTPUT ? parsedAmount : bestTrade,
-        },
+            [Field.INPUT]:
+              independentField === Field.INPUT ? parsedAmount : bestTrade,
+            [Field.OUTPUT]:
+              independentField === Field.OUTPUT ? parsedAmount : bestTrade,
+          },
     [independentField, parsedAmount, showWrap, bestTrade]
   );
   const dependentField: Field =
@@ -249,59 +286,67 @@ const InstantSwap = () => {
     currencies[Field.INPUT] ?? undefined
   );
   useEffect(() => {
-    const checkBalance = async ()=>{
-     if(currencies[Field.INPUT]?.symbol==="RGP"){
-      let fee =await getFee()
-      let amount = fee ? parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee) : parseFloat(formattedAmounts[Field.INPUT])
-      if(amount > parseFloat(balance) ){
-        setInsufficientBalance(true);
-      }else{
-        setInsufficientBalance(false);
+    const checkBalance = async () => {
+      if (currencies[Field.INPUT]?.symbol === "RGP") {
+        let fee = await getFee();
+        let amount = fee
+          ? parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee)
+          : parseFloat(formattedAmounts[Field.INPUT]);
+        if (amount > parseFloat(balance)) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
+      } else {
+        if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
       }
-    }else{
-     if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
-      setInsufficientBalance(true);
-    } else {
-      setInsufficientBalance(false);
-    } 
-    } 
-    }
-    
-   checkBalance()
-  }, [balance, formattedAmounts[Field.INPUT],totalNumberOfTransaction]);
+    };
+
+    checkBalance();
+  }, [balance, formattedAmounts[Field.INPUT], totalNumberOfTransaction]);
   useEffect(() => {
     async function runCheck() {
       if (!inputError) {
-        await checkForApproval()
+        await checkForApproval();
       }
     }
-    runCheck()
-  }, [inputError, formattedAmounts[Field.INPUT],totalNumberOfTransaction,transactionSigned])
+    runCheck();
+  }, [
+    inputError,
+    formattedAmounts[Field.INPUT],
+    totalNumberOfTransaction,
+    transactionSigned,
+  ]);
 
   useMemo(() => {
-    if(parseFloat(percentageChange) >0 && formattedAmounts[Field.OUTPUT]){
-        const actualRecievedAmount = (parseFloat(percentageChange) / 100) * parseFloat(formattedAmounts[Field.OUTPUT]) + parseFloat(formattedAmounts[Field.OUTPUT])
-        setUserOutputPrice(actualRecievedAmount)
-    }else  if(parseFloat(percentageChange) <=0 && formattedAmounts[Field.OUTPUT]){
-      setUserOutputPrice(parseFloat(formattedAmounts[Field.OUTPUT]))
-    }else{
-      setUserOutputPrice(0)
+    if (parseFloat(percentageChange) > 0 && formattedAmounts[Field.OUTPUT]) {
+      const actualRecievedAmount =
+        (parseFloat(percentageChange) / 100) *
+          parseFloat(formattedAmounts[Field.OUTPUT]) +
+        parseFloat(formattedAmounts[Field.OUTPUT]);
+      setUserOutputPrice(actualRecievedAmount);
+    } else if (
+      parseFloat(percentageChange) <= 0 &&
+      formattedAmounts[Field.OUTPUT]
+    ) {
+      setUserOutputPrice(parseFloat(formattedAmounts[Field.OUTPUT]));
+    } else {
+      setUserOutputPrice(0);
     }
-    
-    
-  }, [percentageChange,formattedAmounts[Field.OUTPUT]]);
-  const minimumAmountToReceive = useCallback(
-    () =>{
-      let data
-      if(userOutputPrice){
-       data = ((100 - Number(allowedSlippage / 100)) / 100) * userOutputPrice
-      }else{
-        data=0
-      }
-      return data
-    },      
-    [allowedSlippage, bestTrade,userOutputPrice]
-  );
+  }, [percentageChange, formattedAmounts[Field.OUTPUT]]);
+  const minimumAmountToReceive = useCallback(() => {
+    let data;
+    if (userOutputPrice) {
+      data = ((100 - Number(allowedSlippage / 100)) / 100) * userOutputPrice;
+    } else {
+      data = 0;
+    }
+    return data;
+  }, [allowedSlippage, bestTrade, userOutputPrice]);
   const minimum = minimumAmountToReceive().toFixed(
     currencies[Field.OUTPUT]?.decimals
   );
@@ -313,11 +358,11 @@ const InstantSwap = () => {
       }
     }
   }, [currentToPrice, receivedAmount]);
- 
+
   useEffect(() => {
     let interval;
     if (showNewChangesText) {
-      interval = setInterval(() => setShowNewChangesText(false), 3000);
+      // interval = setInterval(() => setShowNewChangesText(false), 3000);
       //  return clearInterval(interval)
     }
     if (!showModal) {
@@ -326,79 +371,109 @@ const InstantSwap = () => {
     }
   }, [showNewChangesText, showModal]);
 
- 
-  
-    useEffect(() => {      
-      console.log({marketType})
-      console.log(OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],OTHERMARKETADDRESSES[marketType][chainId as number])
-      onMarketSelection(OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],OTHERMARKETADDRESSES[marketType][chainId as number])
+  useEffect(() => {
+    console.log({ marketType });
+    console.log(
+      OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],
+      OTHERMARKETADDRESSES[marketType][chainId as number]
+    );
+    onMarketSelection(
+      OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],
+      OTHERMARKETADDRESSES[marketType][chainId as number]
+    );
     // }
-  }, [chainId,marketType])
-  
-  const checkForApproval = async () => { 
-    const autoSwapV2Contract = await autoSwapV2(MARKETFREESWAPADDRESSES[marketType][chainId as number], library);
-    
-    // check approval for RGP and the other token
-    // const RGPBalance = await checkApprovalForRGP(RGPADDRESSES[chainId as number]) ?? "0"
-    const RGPBalance = "10" ?? "0"
-    const tokenBalance = currencies[Field.INPUT]?.isNative ? 1 : await checkApproval(currencies[Field.INPUT]?.wrapped.address)
-    const amountToApprove = await autoSwapV2Contract.fee()
-    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether")
-    
-    // const fee ="10"
-    const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
+  }, [chainId, marketType]);
+
+  const checkForApproval = async () => {
+    console.log("checking for approval....");
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETFREESWAPADDRESSES[marketType][chainId as number],
+      library
+    );
+    const RGPBalance = "10" ?? "0";
+    const tokenBalance = currencies[Field.INPUT]?.isNative
+      ? 1
+      : await checkApproval(currencies[Field.INPUT]?.wrapped.address);
+    const amountToApprove = await autoSwapV2Contract.fee();
+    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether");
+    console.log({ tokenBalance });
+    const frequency =
+      parseInt(totalNumberOfTransaction) > 1
+        ? parseInt(totalNumberOfTransaction)
+        : 1;
     if (parseFloat(RGPBalance) >= parseFloat(fee)) {
-      setHasBeenApproved(true)
-      setApprovalForFee("")
-      // setApprovalForToken("")
-    }else{
-      setApprovalForFee("RGP")
+      setHasBeenApproved(true);
+      setApprovalForFee("");
+    } else {
+      setApprovalForFee("RGP");
     }
-    if((parseFloat(tokenBalance) >= (parseFloat(formattedAmounts[Field.INPUT]) * frequency)+parseFloat(fee)) && currencies[Field.INPUT]?.wrapped?.symbol === "RGP"){
-      setHasBeenApproved(true)
-      // setApprovalForFee("")
-      setApprovalForToken("")
+    if (
+      parseFloat(tokenBalance) >=
+        parseFloat(formattedAmounts[Field.INPUT]) * frequency +
+          parseFloat(fee) &&
+      currencies[Field.INPUT]?.wrapped?.symbol === "RGP"
+    ) {
+      setHasBeenApproved(true);
+      setApprovalForToken("");
     }
-    if(parseFloat(tokenBalance) >= (parseFloat(formattedAmounts[Field.INPUT]) * frequency) || currencies[Field.INPUT]?.isNative ){
-      setHasBeenApproved(true)
+    if (
+      parseFloat(tokenBalance) >=
+        parseFloat(formattedAmounts[Field.INPUT]) * frequency ||
+      currencies[Field.INPUT]?.isNative
+    ) {
+      setHasBeenApproved(true);
       // setApprovalForFee("")
-      setApprovalForToken("")
-    } else{
-      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
+      setApprovalForToken("");
+    } else {
+      console.log(
+        "currencies[Field.INPUT]?.wrapped?.symbol",
+        currencies[Field.INPUT]?.wrapped?.symbol,
+        1
+      );
+      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
     }
-    if (parseFloat(RGPBalance) < parseFloat(fee) || (parseFloat(tokenBalance) < parseFloat(formattedAmounts[Field.INPUT]) * frequency && (!currencies[Field.INPUT]?.isNative && currencies[Field.INPUT]?.wrapped?.symbol === "RGP" ))) {
-      setHasBeenApproved(false)
-      setApprovalForFee("RGP")
-      setApprovalForToken("RGP")
+    if (
+      parseFloat(RGPBalance) < parseFloat(fee) ||
+      (parseFloat(tokenBalance) <
+        parseFloat(formattedAmounts[Field.INPUT]) * frequency &&
+        !currencies[Field.INPUT]?.isNative &&
+        currencies[Field.INPUT]?.wrapped?.symbol === "RGP")
+    ) {
+      setHasBeenApproved(false);
+      setApprovalForFee("RGP");
+      setApprovalForToken("RGP");
     }
-    if (parseFloat(tokenBalance) < parseFloat(formattedAmounts[Field.INPUT]) * frequency && (!currencies[Field.INPUT]?.isNative &&currencies[Field.INPUT]?.wrapped.symbol !== "RGP")) {
-      setHasBeenApproved(false)
-     
-      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
+    if (
+      parseFloat(tokenBalance) <
+        parseFloat(formattedAmounts[Field.INPUT]) * frequency &&
+      !currencies[Field.INPUT]?.isNative &&
+      currencies[Field.INPUT]?.wrapped.symbol !== "RGP"
+    ) {
+      setHasBeenApproved(false);
+
+      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
     }
-  }
+  };
 
-  const runTransaction = () =>{
+  const runTransaction = () => {
     setShowModal(!showModal);
-   setQuantityValue()
-   
-  }
+    setQuantityValue();
+  };
 
   const signTransaction = async () => {
     if (account !== undefined) {
       // try {
-        let web3 = new Web3(Web3.givenProvider);
-        const permitHash = "0x6e71edae12b1b97f4d1f60370fef10105fa2faae0126114a169c64845d6126c9";
-        // const permitHash = process.env.REACT_APP_PERMIT_HASH;
-         const mess = permitHash &&  web3.utils.soliditySha3(permitHash)
-        
-         if(account && mess){
-          let signature = await web3.eth.personal.sign(mess, account,"12348844");
-        setDataSignature({mess,signature})
-        setTransactionSigned(true)
-         }
- 
+      let web3 = new Web3(Web3.givenProvider);
+      const permitHash =
+        "0x6e71edae12b1b97f4d1f60370fef10105fa2faae0126114a169c64845d6126c9";
+      // const permitHash = process.env.REACT_APP_PERMIT_HASH;
+      const mess = permitHash && web3.utils.soliditySha3(permitHash);
 
+      if (account && mess) {
+        let signature = await web3.eth.personal.sign(mess, account, "12348844");
+        setDataSignature({ mess, signature });
+        setTransactionSigned(true);
+      }
     } else {
       dispatch(
         setOpenModal({
@@ -407,259 +482,352 @@ const InstantSwap = () => {
         })
       );
     }
-
-  }
-  const approveOneOrTwoTokens = async (tokenApprovingFor:string) => {
+  };
+  const approveOneOrTwoTokens = async (tokenApprovingFor: string) => {
     if (currencies[Field.INPUT]?.isNative) {
       setHasBeenApproved(true);
-      setApprovalForToken("")
+      setApprovalForToken("");
     }
-    
-    GButtonClick("auto_period",`Approve ${tokenApprovingFor} ${tokenApprovingFor ==="RGP" ? "for fee" : ""}`,currencies[Field.INPUT]?.symbol)
 
-        dispatch(
-          setOpenModal({
-            message: `Approve ${tokenApprovingFor} ${tokenApprovingFor ==="RGP" ? "for fee" : ""}`,
-            trxState: TrxState.WaitingForConfirmation,
-          })
-        );
-        try{
+    GButtonClick(
+      "auto_period",
+      `Approve ${tokenApprovingFor} ${
+        tokenApprovingFor === "RGP" ? "for fee" : ""
+      }`,
+      currencies[Field.INPUT]?.symbol
+    );
 
-        if (tokenApprovingFor === "RGP") {
-          const address = RGPADDRESSES[chainId as number];
-          const rgp = await rigelToken(RGP[chainId as number], library);
-          const token = await getERC20Token(address, library);
+    dispatch(
+      setOpenModal({
+        message: `Approve ${tokenApprovingFor} ${
+          tokenApprovingFor === "RGP" ? "for fee" : ""
+        }`,
+        trxState: TrxState.WaitingForConfirmation,
+      })
+    );
+    try {
+      if (tokenApprovingFor === "RGP") {
+        const address = RGPADDRESSES[chainId as number];
+        const rgp = await rigelToken(RGP[chainId as number], library);
+        const token = await getERC20Token(address, library);
 
-        const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
-          const walletBal = (await token.balanceOf(account));
-         let walletBalString = parseFloat(ethers.utils.formatUnits(walletBal.toString(), currencies[Field.INPUT]?.decimals)) 
+        const frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
+        const walletBal = await token.balanceOf(account);
+        let walletBalString = parseFloat(
+          ethers.utils.formatUnits(
+            walletBal.toString(),
+            currencies[Field.INPUT]?.decimals
+          )
+        );
 
-                   const amountToApprove = walletBalString > parseFloat(formattedAmounts[Field.INPUT]) * frequency ? walletBalString : parseFloat(formattedAmounts[Field.INPUT]) * frequency
-          console.log({amountToApprove,walletBal,walletBalString})
-          
-          const approveTransaction = await rgp.approve(
-            MARKETFREESWAPADDRESSES[marketType][chainId as number],
-            ethers.utils.parseUnits(amountToApprove.toString(),currencies[Field.INPUT]?.decimals).toString(),
-            {
-              from: account,
-            }
-          );
-          // setArr =setArr.filter(item=>item!=="RGP")
-          const { confirmations } = await approveTransaction.wait(1);
-          if (confirmations >= 1 ) {
-            dispatch(
-              setOpenModal({
-                message: `Approval Successful.`,
-                trxState: TrxState.TransactionSuccessful,
-              })
-            );
+        const amountToApprove =
+          walletBalString >
+          parseFloat(formattedAmounts[Field.INPUT]) * frequency
+            ? walletBalString
+            : parseFloat(formattedAmounts[Field.INPUT]) * frequency;
+        console.log({ amountToApprove, walletBal, walletBalString });
+
+        const approveTransaction = await rgp.approve(
+          MARKETFREESWAPADDRESSES[marketType][chainId as number],
+          ethers.utils
+            .parseUnits(
+              amountToApprove.toString(),
+              currencies[Field.INPUT]?.decimals
+            )
+            .toString(),
+          {
+            from: account,
           }
-          GSuccessfullyTransaction("auto_period",`Approval ${tokenApprovingFor} ${tokenApprovingFor ==="RGP" ? "for fee" : ""}`,currencies[Field.INPUT]?.symbol)
-            setApprovalForFee("")
-          // setArr && setApproval(setArr)
-        } else {
-        const frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
-          const address = currencies[Field.INPUT]?.wrapped.address;
-          const token = address && await getERC20Token(address, library);
-          const walletBal = token && (await token?.balanceOf(account));
-          let walletBalString = parseFloat(ethers.utils.formatUnits(walletBal.toString(), currencies[Field.INPUT]?.decimals)) 
-          const amountToApprove = walletBalString > parseFloat(formattedAmounts[Field.INPUT]) * frequency ? walletBalString : parseFloat(formattedAmounts[Field.INPUT]) * frequency
-          console.log({amountToApprove,walletBal})
-          const approveTransaction = token && await token?.approve(
+        );
+        // setArr =setArr.filter(item=>item!=="RGP")
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
+          dispatch(
+            setOpenModal({
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
+        }
+        GSuccessfullyTransaction(
+          "auto_period",
+          `Approval ${tokenApprovingFor} ${
+            tokenApprovingFor === "RGP" ? "for fee" : ""
+          }`,
+          currencies[Field.INPUT]?.symbol
+        );
+        setApprovalForFee("");
+        // setArr && setApproval(setArr)
+      } else {
+        const frequency =
+          parseInt(totalNumberOfTransaction) > 1
+            ? parseInt(totalNumberOfTransaction)
+            : 1;
+        const address = currencies[Field.INPUT]?.wrapped.address;
+        const token = address && (await getERC20Token(address, library));
+        const walletBal = token && (await token?.balanceOf(account));
+        let walletBalString = parseFloat(
+          ethers.utils.formatUnits(
+            walletBal.toString(),
+            currencies[Field.INPUT]?.decimals
+          )
+        );
+        const amountToApprove =
+          walletBalString >
+          parseFloat(formattedAmounts[Field.INPUT]) * frequency
+            ? walletBalString
+            : parseFloat(formattedAmounts[Field.INPUT]) * frequency;
+        console.log({ amountToApprove, walletBal });
+        const approveTransaction =
+          token &&
+          (await token?.approve(
             MARKETFREESWAPADDRESSES[marketType][chainId as number],
-            ethers.utils.parseUnits(amountToApprove.toString(),currencies[Field.INPUT]?.decimals).toString(),
+            ethers.utils
+              .parseUnits(
+                amountToApprove.toString(),
+                currencies[Field.INPUT]?.decimals
+              )
+              .toString(),
             {
               from: account,
             }
+          ));
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
+          dispatch(
+            setOpenModal({
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
           );
-          const { confirmations } = await approveTransaction.wait(1);
-          if (confirmations >= 1) {
-            dispatch(
-              setOpenModal({
-                message: `Approval Successful.`,
-                trxState: TrxState.TransactionSuccessful,
-              })
-            );
-          }
-          
-          GSuccessfullyTransaction("freeswap","Approval",currencies[Field.INPUT]?.symbol)
         }
-      }catch(e:any){
-        GFailedTransaction("freeswap","approval",e.message,currencies[Field.INPUT]?.symbol)
-      }
-        setApprovalForToken("")
-      
 
-  }
-
-
-const setQuantityValue =() =>{
-  let value
- const quantity = typedValue && parseFloat(typedValue) * parseInt(totalNumberOfTransaction)
- if(currencies[Field.INPUT]?.isNative){
-     setQuantity(`${quantity}`)
-     value=quantity
-}else{
-  setQuantity(typedValue)
-  value = typedValue
-}
- return value
-}
-
-const handleMaxInput = async () => {
-  const value = await getMaxValue(currencies[Field.INPUT], library);
-  const maxAmountInput = maxAmountSpend(value, currencies[Field.INPUT]);
-  if (maxAmountInput) {
-    onUserInput(Field.INPUT, maxAmountInput);
-  }
-};
-
-  const sendTransactionToDatabase = async () => {
-    GButtonClick("auto_period","sending transaction to database",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-    try{
-      
-     
-    const autoSwapV2Contract = await autoSwapV2(MARKETFREESWAPADDRESSES[marketType][chainId as number], library);
-    let value = setQuantityValue()
-    dispatch(
-      setOpenModal({
-        message: `Swapping ${formattedAmounts[Field.INPUT]} ${
+        GSuccessfullyTransaction(
+          "freeswap",
+          "Approval",
           currencies[Field.INPUT]?.symbol
-        } for ${formattedAmounts[Field.OUTPUT]} ${
-          currencies[Field.OUTPUT]?.symbol
-        }`,
-        trxState: TrxState.WaitingForConfirmation,
-        text:"Processing"
-      })
-    );
-    let currentDate = new Date();
-    let futureDate = currentDate.getTime() + 20;
-    let data, response
-    try{ 
-       
-       if (currencies[Field.INPUT]?.isNative) {
-   console.log(currencies[Field.INPUT],currencies)
-      console.log({value},Web3.utils.toWei(value.toString(), 'ether'),"uuuu",futureDate,pathArray)
-      data = await autoSwapV2Contract.setPeriodToSwapETHForTokens(
-        pathArray,
-        futureDate,
-        { value: Web3.utils.toWei(value.toString(), 'ether') }
-      )
-      const fetchTransactionData = async (sendTransaction: any) => {
-        const { confirmations, status, logs } = await sendTransaction.wait(1);
-        return { confirmations, status, logs };
-      };
-      const { confirmations, status, logs } = await fetchTransactionData(data)
-      if (confirmations >= 1 && status) {
-        response = true
+        );
       }
-    } else {
-      response = true
-      // quantity = typedValue
-    }
-    }catch(e){
-      console.log({e})
-    
+    } catch (e: any) {
+      GFailedTransaction(
+        "freeswap",
+        "approval",
+        e.message,
+        currencies[Field.INPUT]?.symbol
+      );
     }
-    // setQuantity(quantity)
-    let orderID = await autoSwapV2Contract.orderCount()
-   
-    if (response && value) {
-     
-      const response = await fetch(`https://autoswap-server.herokuapp.com/auto/instant`, {
-        method: "POST",
-        mode: "cors",
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
-        headers: {
-          'Content-Type': 'application/json'
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: JSON.stringify({
-          address: account,
-          chainID: chainId,
-          fromAddress: currencies[Field.INPUT]?.isNative ? "native" : currencies[Field.INPUT]?.wrapped.address,
-          toAddress: currencies[Field.OUTPUT]?.isNative ? "native" : currencies[Field.OUTPUT]?.wrapped.address,
-          dataSignature,
-          fromNumberOfDecimals: currencies[Field.INPUT]?.isNative ? 18 : currencies[Field.INPUT]?.wrapped.decimals,
-          type:"free",
-          toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative ? 18 : currencies[Field.OUTPUT]?.wrapped.decimals,
-          fromPrice: `${value}`,
-          currentToPrice: formattedAmounts[Field.OUTPUT],
-          orderID: currencies[Field.INPUT]?.isNative ? parseInt(orderID.toString()) : parseInt(orderID.toString()) + 1,
-          slippage:Number(allowedSlippage / 100),
-          pathArray,
-          minimum,
-          pathSymbol,
-          market:marketType
-        })
-      })
-      let resi =await response.json()
-      console.log({resi}) 
-        //  dispatch(refreshTransactionTab({ refresh:Math.random() }))
-        // dispatch(setRefresh()) 
-        // dispatch(
-        //   setOpenModal({
-        //     message: `Swap Successful.`,
-        //     trxState: TrxState.TransactionSuccessful,
-        //   })
-        // );
-         
-  
+    setApprovalForToken("");
+  };
 
-        
-      // else{
-      //   dispatch(
-      //     setOpenModal({
-      //       message: `Swap Failed.`,
-      //       trxState: TrxState.TransactionFailed,
-      //     })
-      //   ); 
-      // }
-      // GFailedTransaction("instant_swap","swapping transaction in the database","error",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-  
-     
-      // setShowNewChangesText(false);
+  const setQuantityValue = () => {
+    let value;
+    const quantity =
+      typedValue && parseFloat(typedValue) * parseInt(totalNumberOfTransaction);
+    if (currencies[Field.INPUT]?.isNative) {
+      setQuantity(`${quantity}`);
+      value = quantity;
+    } else {
+      setQuantity(typedValue);
+      value = typedValue;
     }
-  }
-  catch(e){
-    console.log({e},"koo4ok4koo4")
-    GFailedTransaction("auto_period","storing transaction to database","error",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
-    // dispatch(
-    //   setOpenModal({
-    //     message: "Swapping Transaction failed",
-    //     trxState: TrxState.TransactionFailed,
-    //   })
-    // );
-  }
-
-  }
-
+    return value;
+  };
 
-  const checkApproval = async (tokenAddress: string):Promise<string | void> => {
-    if (currencies[Field.INPUT]?.isNative) {
-      return setHasBeenApproved(true);
+  const handleMaxInput = async () => {
+    const value = await getMaxValue(currencies[Field.INPUT], library);
+    const maxAmountInput = maxAmountSpend(value, currencies[Field.INPUT]);
+    if (maxAmountInput) {
+      onUserInput(Field.INPUT, maxAmountInput);
     }
+  };
+
+  const sendTransactionToDatabase = async () => {
+    GButtonClick(
+      "auto_period",
+      "sending transaction to database",
+      currencies[Field.INPUT]?.symbol,
+      currencies[Field.OUTPUT]?.symbol
+    );
     try {
-      const status = await getERC20Token(tokenAddress, library);
-      const check = await status.allowance(
-        account,
+      const autoSwapV2Contract = await autoSwapV2(
         MARKETFREESWAPADDRESSES[marketType][chainId as number],
-        {
-          from: account,
+        library
+      );
+      let value = setQuantityValue();
+      dispatch(
+        setOpenModal({
+          message: `Swapping ${formattedAmounts[Field.INPUT]} ${
+            currencies[Field.INPUT]?.symbol
+          } for ${formattedAmounts[Field.OUTPUT]} ${
+            currencies[Field.OUTPUT]?.symbol
+          }`,
+          trxState: TrxState.WaitingForConfirmation,
+          text: "Processing",
+        })
+      );
+      let currentDate = new Date();
+      let futureDate = currentDate.getTime() + 20;
+      let data, response;
+      try {
+        if (currencies[Field.INPUT]?.isNative) {
+          console.log(currencies[Field.INPUT], currencies);
+          console.log(
+            { value },
+            Web3.utils.toWei(value.toString(), "ether"),
+            "uuuu",
+            futureDate,
+            pathArray
+          );
+          data = await autoSwapV2Contract.setPeriodToSwapETHForTokens(
+            pathArray,
+            futureDate,
+            { value: Web3.utils.toWei(value.toString(), "ether") }
+          );
+          const fetchTransactionData = async (sendTransaction: any) => {
+            const { confirmations, status, logs } = await sendTransaction.wait(
+              1
+            );
+            return { confirmations, status, logs };
+          };
+          const { confirmations, status, logs } = await fetchTransactionData(
+            data
+          );
+          if (confirmations >= 1 && status) {
+            response = true;
+          }
+        } else {
+          response = true;
+          // quantity = typedValue
         }
-      )
-      let frequency = parseInt(totalNumberOfTransaction) > 1 ? parseInt(totalNumberOfTransaction) : 1
+      } catch (e) {
+        console.log({ e });
+      }
+      // setQuantity(quantity)
+      let orderID = await autoSwapV2Contract.orderCount();
+
+      if (response && value) {
+        const date = new Date();
+        let today = date.getTime() / (1000 * 60);
+        const response = await fetch(
+          `${SERVER_ENV.url.API_URL ?? "http://localhost:8000"}/auto/add`,
+          {
+            method: "POST",
+            mode: "cors",
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              address: account,
+              chainID: chainId,
+              presentDate: today,
+              presentInterval: 5,
+              percentageChange: "0",
+              frequency: "free",
+              userExpectedPrice: "0",
+              totalNumberOfTransaction: 1,
+              frequencyNumber: 1,
+              fromAddress: currencies[Field.INPUT]?.isNative
+                ? "native"
+                : currencies[Field.INPUT]?.wrapped.address,
+              toAddress: currencies[Field.OUTPUT]?.isNative
+                ? "native"
+                : currencies[Field.OUTPUT]?.wrapped.address,
+              dataSignature,
+              fromNumberOfDecimals: currencies[Field.INPUT]?.isNative
+                ? 18
+                : currencies[Field.INPUT]?.wrapped.decimals,
+              type: "free",
+              toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative
+                ? 18
+                : currencies[Field.OUTPUT]?.wrapped.decimals,
+              fromPrice: `${value}`,
+              currentToPrice: formattedAmounts[Field.OUTPUT],
+              orderID: currencies[Field.INPUT]?.isNative
+                ? parseInt(orderID.toString())
+                : parseInt(orderID.toString()) + 1,
+              slippage: Number(allowedSlippage / 100),
+              pathArray,
+              minimum,
+              pathSymbol,
+              market: marketType,
+            }),
+          }
+        );
+        let instantSwapResponse = await response.json();
+        console.log({ instantSwapResponse });
+        if (instantSwapResponse.transaction) {
+          dispatch(refreshTransactionTab({ refresh: Math.random() }));
+          dispatch(setRefresh());
+          dispatch(
+            setOpenModal({
+              message: `Swap Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
+        }
+
+        // else{
+        //   dispatch(
+        //     setOpenModal({
+        //       message: `Swap Failed.`,
+        //       trxState: TrxState.TransactionFailed,
+        //     })
+        //   );
+        // }
+        // GFailedTransaction("instant_swap","swapping transaction in the database","error",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
 
-      const approveBalance = ethers.utils.formatUnits(check.toString(), currencies[Field.INPUT]?.decimals) 
-      return parseFloat(approveBalance)
+        // setShowNewChangesText(false);
+      }
     } catch (e) {
-      console.log(e)
+      console.log({ e }, "koo4ok4koo4");
+      GFailedTransaction(
+        "auto_period",
+        "storing transaction to database",
+        "error",
+        currencies[Field.INPUT]?.symbol,
+        currencies[Field.OUTPUT]?.symbol
+      );
+      // dispatch(
+      //   setOpenModal({
+      //     message: "Swapping Transaction failed",
+      //     trxState: TrxState.TransactionFailed,
+      //   })
+      // );
     }
+  };
 
-  }
-  const checkApprovalForRGP = async (tokenAddress: string) => {
+  const checkApproval = async (
+    tokenAddress: string
+  ): Promise<string | void> => {
+    if (currencies[Field.INPUT]?.isNative) {
+      return setHasBeenApproved(true);
+    } else {
+      try {
+        const erc20Token = await getERC20Token(tokenAddress, library);
+        const check = await erc20Token.allowance(
+          account,
+          MARKETFREESWAPADDRESSES[marketType][chainId as number],
+          {
+            from: account,
+          }
+        );
 
+        const approveBalance = ethers.utils.formatUnits(
+          check.toString(),
+          currencies[Field.INPUT]?.decimals
+        );
+        return parseFloat(approveBalance);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  };
+  const checkApprovalForRGP = async (tokenAddress: string) => {
     try {
       const status = await rigelToken(tokenAddress, library);
       const check = await status.allowance(
@@ -668,14 +836,13 @@ const handleMaxInput = async () => {
         {
           from: account,
         }
-      )
-      const approveBalance = ethers.utils.formatEther(check).toString()
-      return approveBalance
+      );
+      const approveBalance = ethers.utils.formatEther(check).toString();
+      return approveBalance;
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-
-  }
+  };
 
   return (
     <Box fontSize="xl">
@@ -688,11 +855,14 @@ const handleMaxInput = async () => {
       >
         {isMobileDevice ? (
           <Box mb="90px">
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <ShowDetails />
             </Box>
 
-            <Box mx={4} mb={4} w={['100%', '100%', '45%', '29.5%']}
+            <Box
+              mx={4}
+              mb={4}
+              w={["100%", "100%", "45%", "29.5%"]}
               borderColor={borderColor}
               borderWidth="1px"
               borderRadius="6px"
@@ -702,36 +872,69 @@ const handleMaxInput = async () => {
             >
               <SwapSettings />
               <From
-          onUserInput={handleTypeInput}
-          onCurrencySelection={onCurrencySelection}
-          currency={currencies[Field.INPUT]}
-          otherCurrency={currencies[Field.OUTPUT]}
-          onMax={handleMaxInput}
-          value={formattedAmounts[Field.INPUT]}
-          placeholder="0.0"
-        />
+                onUserInput={handleTypeInput}
+                onCurrencySelection={onCurrencySelection}
+                currency={currencies[Field.INPUT]}
+                otherCurrency={currencies[Field.OUTPUT]}
+                onMax={handleMaxInput}
+                value={formattedAmounts[Field.INPUT]}
+                placeholder="0.0"
+              />
               <Flex justifyContent="center" onClick={onSwitchTokens}>
                 <SwitchIcon />
               </Flex>
-              <Box borderColor={borderColor} borderWidth="1px" borderRadius="6px"  px={3} py={3}  mt={4}>
-
-                <Box display="flex" justifyContent="space-between" alignItems="center" mb={1} width="100%">
-                <To
-          onCurrencySelection={onCurrencySelection}
-          currency={currencies[Field.OUTPUT]}
-          otherCurrency={currencies[Field.INPUT]}
-          value={formattedAmounts[Field.OUTPUT]}
-          onUserOutput={handleTypeOutput}
-          placeholder="0.0"
-        />
+              <Box
+                borderColor={borderColor}
+                borderWidth="1px"
+                borderRadius="6px"
+                px={3}
+                py={3}
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  mb={1}
+                  width="100%"
+                >
+                  <To
+                    onCurrencySelection={onCurrencySelection}
+                    currency={currencies[Field.OUTPUT]}
+                    otherCurrency={currencies[Field.INPUT]}
+                    value={formattedAmounts[Field.OUTPUT]}
+                    onUserOutput={handleTypeOutput}
+                    placeholder="0.0"
+                  />
                 </Box>
-                <Box  borderColor={borderTwo} borderWidth="2px" borderRadius="6px" mt={5} pt={4} pb={4} pr={2} pl={2} bg={routerBgcolor}>
+                <Box
+                  borderColor={borderTwo}
+                  borderWidth="2px"
+                  borderRadius="6px"
+                  mt={5}
+                  pt={4}
+                  pb={4}
+                  pr={2}
+                  pl={2}
+                  bg={routerBgcolor}
+                >
                   <Flex>
-                  <MarketFreeDropDown marketType={marketType} setMarketType={setMarketType} chainID={chainId} switchMarket={switchMarket}/>
+                    <MarketFreeDropDown
+                      marketType={marketType}
+                      setMarketType={setMarketType}
+                      chainID={chainId}
+                      switchMarket={switchMarket}
+                    />
 
                     <Spacer />
                     <VStack>
-                      <Text fontSize="24px" color={textColorOne} isTruncated width="160px" textAlign="right">
+                      <Text
+                        fontSize="24px"
+                        color={textColorOne}
+                        isTruncated
+                        width="160px"
+                        textAlign="right"
+                      >
                         {formattedAmounts[Field.OUTPUT]}
                       </Text>
                       {/* <Text fontSize="14px" color={color}  width="160px">
@@ -743,120 +946,141 @@ const handleMaxInput = async () => {
               </Box>
 
               <Flex mt={10} justifyContent="space-between">
-                  <Text fontSize="16px">Fee:</Text> <Text fontSize="16px" opacity="0.7" ml={1}>{currencies[Field.INPUT]?.isNative ? "Not Free" : "Free"}</Text>
-                </Flex>
-            
+                <Text fontSize="16px">Fee:</Text>{" "}
+                <Text fontSize="16px" opacity="0.7" ml={1}>
+                  {currencies[Field.INPUT]?.isNative ? "Not Free" : "Free"}
+                </Text>
+              </Flex>
+
               <Box mt={5}>
-              {insufficientBalance || inputError ?( 
-            <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientBalance}
-              color={inputError ? color : "#FFFFFF"}
-              bgColor={inputError ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-              {inputError
-                ? inputError
-                : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${currencies[Field.INPUT]?.symbol==="RGP" ? "for fee":""}`}
-            </Button>) : !transactionSigned ? <Button
+                {insufficientBalance || inputError ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientBalance}
+                    color={inputError ? color : "#FFFFFF"}
+                    bgColor={inputError ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    {inputError
+                      ? inputError
+                      : `Insufficient ${
+                          currencies[Field.INPUT]?.symbol
+                        } Balance ${
+                          currencies[Field.INPUT]?.symbol === "RGP"
+                            ? "for fee"
+                            : ""
+                        }`}
+                  </Button>
+                ) : !transactionSigned ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
-                    
                     onClick={() => {
-                      setCurrentToPrice(receivedAmount)
-                      setShowModal(!showModal)
-                      GButtonClick("auto_period","sign wallet",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
+                      setCurrentToPrice(receivedAmount);
+                      setShowModal(!showModal);
+                      GButtonClick(
+                        "auto_period",
+                        "sign wallet",
+                        currencies[Field.INPUT]?.symbol,
+                        currencies[Field.OUTPUT]?.symbol
+                      );
                     }}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Sign Wallet
-                  </Button> :  approvalForToken ? <Button
+                  </Button>
+                ) : approvalForToken ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForToken)}
+                    onClick={() => approveOneOrTwoTokens(approvalForToken)}
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve {approvalForToken}
-                  </Button> : approvalForFee ? <Button
+                  </Button>
+                ) : approvalForFee ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForFee)}
+                    onClick={() => approveOneOrTwoTokens(approvalForFee)}
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve RGP for fee
-                  </Button> : <Button
+                  </Button>
+                ) : (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
-                    onClick={()=>
-                      {
-                      setCurrentToPrice(receivedAmount)
-                      signatureFromDataBase ? 
-                      setShowModal(!showModal)
-                     : sendTransactionToDatabase()
+                    onClick={() => {
+                      setCurrentToPrice(receivedAmount);
+                      signatureFromDataBase
+                        ? setShowModal(!showModal)
+                        : sendTransactionToDatabase();
                     }}
                     // onClick={sendTransactionToDatabase}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Send Transaction
                   </Button>
-                }
-
+                )}
               </Box>
-              <BridgeCard/> 
+              <BridgeCard />
             </Box>
 
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <History />
             </Box>
           </Box>
         ) : (
           <>
-            <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <ShowDetails />
             </Box>
 
             <Box
-              mx={4} mb={4} w={['100%', '100%', '45%', '29.5%']}
+              mx={4}
+              mb={4}
+              w={["100%", "100%", "45%", "29.5%"]}
               borderColor={borderColor}
               borderWidth="1px"
               borderRadius="6px"
@@ -866,37 +1090,60 @@ const handleMaxInput = async () => {
             >
               <SwapSettings />
               <From
-          onUserInput={handleTypeInput}
-          onCurrencySelection={onCurrencySelection}
-          currency={currencies[Field.INPUT]}
-          otherCurrency={currencies[Field.OUTPUT]}
-          onMax={handleMaxInput}
-          value={formattedAmounts[Field.INPUT]}
-          placeholder="0.0"
-        />
+                onUserInput={handleTypeInput}
+                onCurrencySelection={onCurrencySelection}
+                currency={currencies[Field.INPUT]}
+                otherCurrency={currencies[Field.OUTPUT]}
+                onMax={handleMaxInput}
+                value={formattedAmounts[Field.INPUT]}
+                placeholder="0.0"
+              />
               <Flex justifyContent="center" onClick={onSwitchTokens}>
                 <SwitchIcon />
               </Flex>
 
-              <Box borderColor={borderColor} borderWidth="1px" borderRadius="6px" px={3} py={3} mt={4}>
-
-                <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
-
-                <To
-          onCurrencySelection={onCurrencySelection}
-          currency={currencies[Field.OUTPUT]}
-          otherCurrency={currencies[Field.INPUT]}
-          value={formattedAmounts[Field.OUTPUT]}
-          onUserOutput={handleTypeOutput}
-          placeholder="0.0"
-        />
-
+              <Box
+                borderColor={borderColor}
+                borderWidth="1px"
+                borderRadius="6px"
+                px={3}
+                py={3}
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  mb={1}
+                >
+                  <To
+                    onCurrencySelection={onCurrencySelection}
+                    currency={currencies[Field.OUTPUT]}
+                    otherCurrency={currencies[Field.INPUT]}
+                    value={formattedAmounts[Field.OUTPUT]}
+                    onUserOutput={handleTypeOutput}
+                    placeholder="0.0"
+                  />
                 </Box>
 
-              
-                <Box  borderColor={borderTwo} borderWidth="2px" borderRadius="6px" mt={5} pt={4} pb={4} pr={2} pl={2} bg={routerBgcolor}>
+                <Box
+                  borderColor={borderTwo}
+                  borderWidth="2px"
+                  borderRadius="6px"
+                  mt={5}
+                  pt={4}
+                  pb={4}
+                  pr={2}
+                  pl={2}
+                  bg={routerBgcolor}
+                >
                   <Flex>
-                  <MarketFreeDropDown marketType={marketType} setMarketType={setMarketType} chainID={chainId} switchMarket={switchMarket}/>
+                    <MarketFreeDropDown
+                      marketType={marketType}
+                      setMarketType={setMarketType}
+                      chainID={chainId}
+                      switchMarket={switchMarket}
+                    />
 
                     <Spacer />
                     <VStack>
@@ -908,108 +1155,126 @@ const handleMaxInput = async () => {
                 </Box>
               </Box>
 
-             
-               <Flex mt={10} justifyContent="space-between">
-               <Text fontSize="16px">Fee:</Text> <Text fontSize="16px" opacity="0.7" ml={1}>{currencies[Field.INPUT]?.isNative ? "Not Free" : "Free"}</Text>
-                </Flex>
+              <Flex mt={10} justifyContent="space-between">
+                <Text fontSize="16px">Fee:</Text>{" "}
+                <Text fontSize="16px" opacity="0.7" ml={1}>
+                  {currencies[Field.INPUT]?.isNative ? "Not Free" : "Free"}
+                </Text>
+              </Flex>
               <Box mt={5}>
-                {insufficientBalance || inputError ?( 
-            <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientBalance}
-              color={inputError ? color : "#FFFFFF"}
-              bgColor={inputError ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-              {inputError
-                ? inputError
-                : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${currencies[Field.INPUT]?.symbol==="RGP" && "for fee"}`}
-            </Button>) : !transactionSigned ? <Button
+                {insufficientBalance || inputError ? (
+                  <Button
+                    w="100%"
+                    borderRadius="6px"
+                    border={lightmode ? "2px" : "none"}
+                    borderColor={borderColor}
+                    h="48px"
+                    p="5px"
+                    mt={1}
+                    disabled={inputError !== undefined || insufficientBalance}
+                    color={inputError ? color : "#FFFFFF"}
+                    bgColor={inputError ? switchBgcolor : buttonBgcolor}
+                    fontSize="18px"
+                    boxShadow={lightmode ? "base" : "lg"}
+                    _hover={{ bgColor: buttonBgcolor }}
+                  >
+                    {inputError
+                      ? inputError
+                      : `Insufficient ${
+                          currencies[Field.INPUT]?.symbol
+                        } Balance ${
+                          currencies[Field.INPUT]?.symbol === "RGP" && "for fee"
+                        }`}
+                  </Button>
+                ) : !transactionSigned ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
-                    
                     onClick={() => {
-                      setCurrentToPrice(receivedAmount)
-                      setShowModal(!showModal)
-                      GButtonClick("auto_period","sign wallet",currencies[Field.INPUT]?.symbol,currencies[Field.OUTPUT]?.symbol)
+                      setCurrentToPrice(receivedAmount);
+                      setShowModal(!showModal);
+                      GButtonClick(
+                        "auto_period",
+                        "sign wallet",
+                        currencies[Field.INPUT]?.symbol,
+                        currencies[Field.OUTPUT]?.symbol
+                      );
                     }}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Sign Wallet
-                  </Button> :  approvalForToken ? <Button
+                  </Button>
+                ) : approvalForToken ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForToken)}
-                   color={inputError ? color : "#FFFFFF"}
+                    onClick={() => approveOneOrTwoTokens(approvalForToken)}
+                    color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve {approvalForToken}
-                  </Button> : approvalForFee ? <Button
+                  </Button>
+                ) : approvalForFee ? (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForFee)}
-                   color={inputError ? color : "#FFFFFF"}
+                    onClick={() => approveOneOrTwoTokens(approvalForFee)}
+                    color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Approve RGP for fee
-                  </Button> : <Button
+                  </Button>
+                ) : (
+                  <Button
                     w="100%"
                     borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
+                    border={lightmode ? "2px" : "none"}
                     borderColor={borderColor}
                     h="48px"
                     p="5px"
                     color={inputError ? color : "#FFFFFF"}
                     bgColor={buttonBgcolor}
-                    onClick={()=>
-                      {
-                      setCurrentToPrice(receivedAmount)
-                      signatureFromDataBase ? runTransaction() : sendTransactionToDatabase()
+                    onClick={() => {
+                      setCurrentToPrice(receivedAmount);
+                      signatureFromDataBase
+                        ? runTransaction()
+                        : sendTransactionToDatabase();
                     }}
                     // onClick={sendTransactionToDatabase}
                     fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
+                    boxShadow={lightmode ? "base" : "lg"}
                     _hover={{ bgColor: buttonBgcolor }}
                   >
                     Send Transaction
                   </Button>
-                }
-
+                )}
               </Box>
-              <BridgeCard /> 
+              <BridgeCard />
             </Box>
 
-            <Box mx={5} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+            <Box mx={5} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
               <History />
             </Box>
           </>
@@ -1027,7 +1292,9 @@ const handleMaxInput = async () => {
         buttonText={signatureFromDataBase ? "Send Transaction" : "Sign Wallet"}
         fromDeposited={formattedAmounts[Field.INPUT]}
         toDeposited={userOutputPrice.toString()}
-        signSignature={signatureFromDataBase ? sendTransactionToDatabase : signTransaction}
+        signSignature={
+          signatureFromDataBase ? sendTransactionToDatabase : signTransaction
+        }
         minimumAmountToRecieve={minimum}
         slippage={Number(allowedSlippage / 100)}
         showNewChangesText={showNewChangesText}
@@ -1036,7 +1303,7 @@ const handleMaxInput = async () => {
         market={marketType}
       />
     </Box>
-  )
-}
+  );
+};
 
-export default InstantSwap
+export default InstantSwap;
diff --git a/src/pages/Swap/SetPrice.tsx b/src/pages/Swap/SetPrice.tsx
index 6b524320..ae68c4b4 100644
--- a/src/pages/Swap/SetPrice.tsx
+++ b/src/pages/Swap/SetPrice.tsx
@@ -1,13 +1,18 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
-import ShowDetails from './components/details/ShowDetails';
-import History from './components/history/History';
-import { VectorIcon, ExclamationIcon, SwitchIcon, RightIcon } from '../../theme/components/Icons';
-import To from './components/sendToken/To';
-import SetPriceModal from './modals/setPriceModal';
-import From from './components/sendToken/From';
-import { useActiveWeb3React } from '../../utils/hooks/useActiveWeb3React';
-import Web3 from 'web3';
-import SwapSettings from './components/sendToken/SwapSettings';
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import ShowDetails from "./components/details/ShowDetails";
+import History from "./components/history/History";
+import {
+  VectorIcon,
+  ExclamationIcon,
+  SwitchIcon,
+  RightIcon,
+} from "../../theme/components/Icons";
+import To from "./components/sendToken/To";
+import SetPriceModal from "./modals/setPriceModal";
+import From from "./components/sendToken/From";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
+import Web3 from "web3";
+import SwapSettings from "./components/sendToken/SwapSettings";
 import {
   Box,
   Flex,
@@ -26,49 +31,63 @@ import {
   Input,
   Square,
   Slider,
-  Spinner
-} from '@chakra-ui/react';
-import { ethers } from 'ethers';
-import { getERC20Token } from '../../utils/utilsFunctions';
+  Spinner,
+} from "@chakra-ui/react";
+import { ethers } from "ethers";
+import { getERC20Token } from "../../utils/utilsFunctions";
 import {
   useDerivedSwapInfo,
   useSwapActionHandlers,
   useSwapState,
-} from '../../state/swap/hooks';
-import CInput from './components/sendToken/Input';
-import { Field } from '../../state/swap/actions';
-import { maxAmountSpend } from '../../utils/maxAmountSpend';
-import { autoSwapV2, rigelToken } from '../../utils/Contracts';
-import { RGPADDRESSES, MARKETAUTOSWAPADDRESSES, OTHERMARKETFACTORYADDRESSES, OTHERMARKETADDRESSES } from '../../utils/addresses';
-import { RGP } from '../../utils/addresses';
-import { useDispatch,useSelector } from "react-redux";
+} from "../../state/swap/hooks";
+import CInput from "./components/sendToken/Input";
+import { Field } from "../../state/swap/actions";
+import { maxAmountSpend } from "../../utils/maxAmountSpend";
+import { autoSwapV2, rigelToken } from "../../utils/Contracts";
+import {
+  RGPADDRESSES,
+  MARKETAUTOSWAPADDRESSES,
+  OTHERMARKETFACTORYADDRESSES,
+  OTHERMARKETADDRESSES,
+} from "../../utils/addresses";
+import { RGP } from "../../utils/addresses";
+import { useDispatch, useSelector } from "react-redux";
 import { setOpenModal, TrxState } from "../../state/application/reducer";
 import { RootState } from "../../state";
-import { refreshTransactionTab } from '../../state/transaction/actions';
-import { useUserSlippageTolerance } from '../../state/user/hooks';
-import { binanceTestMarketArray,polygonMarketArray,binanceMarketArray } from "../../state/swap/hooks"
-import MarketDropDown from '../../components/MarketDropDown';
-import { useHistory } from 'react-router-dom';
-import SliderComponent from '../../components/Slider';
-import { useLocation } from 'react-router-dom';
-import { GetAddressTokenBalance } from '../../state/wallet/hooks';
-
+import { refreshTransactionTab } from "../../state/transaction/actions";
+import { useUserSlippageTolerance } from "../../state/user/hooks";
+import {
+  binanceTestMarketArray,
+  polygonMarketArray,
+  binanceMarketArray,
+} from "../../state/swap/hooks";
+import MarketDropDown from "../../components/MarketDropDown";
+import { useHistory } from "react-router-dom";
+import SliderComponent from "../../components/Slider";
+import { useLocation } from "react-router-dom";
+import { GetAddressTokenBalance } from "../../state/wallet/hooks";
+import { SERVER_ENV } from "../../constants/chains";
 
 const SetPrice = () => {
-  const [isMobileDevice] = useMediaQuery('(max-width: 750px)');
-  const borderColor = useColorModeValue('#DEE6ED', '#324D68');
-  const iconColor = useColorModeValue('#666666', '#DCE6EF');
-  const textColorOne = useColorModeValue('#333333', '#F1F5F8');
+  const [isMobileDevice] = useMediaQuery("(max-width: 750px)");
+  const borderColor = useColorModeValue("#DEE6ED", "#324D68");
+  const iconColor = useColorModeValue("#666666", "#DCE6EF");
+  const textColorOne = useColorModeValue("#333333", "#F1F5F8");
   const lightmode = useColorModeValue(true, false);
-  const routerBgcolor = useColorModeValue('#F2F5F8', '#213345');
+  const routerBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const buttonBgcolor = useColorModeValue("#319EF6", "#4CAFFF");
   const switchBgcolor = useColorModeValue("#F2F5F8", "#213345");
   const dispatch = useDispatch();
-  const color = useColorModeValue('#999999', '#7599BD');
+  const color = useColorModeValue("#999999", "#7599BD");
   const location = useLocation().pathname;
 
-  const { onCurrencySelection, onUserInput, onSwitchTokens,onMarketSelection } = useSwapActionHandlers();
-  const { account, chainId, library } = useActiveWeb3React()
+  const {
+    onCurrencySelection,
+    onUserInput,
+    onSwitchTokens,
+    onMarketSelection,
+  } = useSwapActionHandlers();
+  const { account, chainId, library } = useActiveWeb3React();
 
   const {
     currencies,
@@ -80,54 +99,61 @@ const SetPrice = () => {
     pathSymbol,
     pathArray,
     unitAmount,
-    oppositeAmount
+    oppositeAmount,
   } = useDerivedSwapInfo();
 
-  const [URL, setURL] = useState("https://autoswap-server.herokuapp.com")//https://autoswap-server.herokuapp.com
-  const [transactionSigned, setTransactionSigned] = useState(false)
-  const [disableInput, setDisableInput] = useState(true)
-  const [initialFromPrice, setInitialFromPrice] = useState("")
-  const [initialToPrice, setInitialToPrice] = useState("")
-  const [basePrice, setBasePrice] = useState("")
-  const [differenceInPrice, setDifferenceInPrice] = useState(0)
-  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false)
-  
-  const [positiveSliderValue, setPositiveSliderValue] = useState(0)
-  const [negativeSliderValue, setNegativeSliderValue] = useState(-1)
-  const [showTooltip, setShowTooltip] = useState(false)
-  const [toPrice, setToPrice] = useState(0)
-  const [showModal, setShowModal] = useState(false)
-  const [hasBeenApproved, setHasBeenApproved] = useState(false)
-  const [approvalForFee, setApprovalForFee] = useState("")
-  const [marketType, setMarketType] = useState("Smartswap")
-  const [approvalForToken, setApprovalForToken] = useState("")
+  const [URL, setURL] = useState(
+    SERVER_ENV.url.API_URL ?? "http://localhost:8000"
+  );
+  const [transactionSigned, setTransactionSigned] = useState(false);
+  const [disableInput, setDisableInput] = useState(true);
+  const [initialFromPrice, setInitialFromPrice] = useState("");
+  const [initialToPrice, setInitialToPrice] = useState("");
+  const [basePrice, setBasePrice] = useState("");
+  const [differenceInPrice, setDifferenceInPrice] = useState(0);
+  const [signatureFromDataBase, setSignatureFromDataBase] = useState(false);
+
+  const [positiveSliderValue, setPositiveSliderValue] = useState(0);
+  const [negativeSliderValue, setNegativeSliderValue] = useState(-1);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [toPrice, setToPrice] = useState(0);
+  const [showModal, setShowModal] = useState(false);
+  const [hasBeenApproved, setHasBeenApproved] = useState(false);
+  const [approvalForFee, setApprovalForFee] = useState("");
+  const [marketType, setMarketType] = useState("Smartswap");
+  const [approvalForToken, setApprovalForToken] = useState("");
   const [insufficientBalance, setInsufficientBalance] = useState(false);
-  const [totalNumberOfTransaction, setTotalNumberOfTransaction] = useState("1")
-  const [approval, setApproval] = useState<String[]>([])
-  const [fee, setFee] = useState("")
-  const [name, setName] = useState("+")
-  const [shakeInput, setShakeInput] = useState<boolean>(false)
-  const [dataSignature,setDataSignature] = useState<{mess:string,signature:string}>({
-    mess:"",
-    signature:""
-  })
-  
-  const routerHistory = useHistory()
-  useEffect(() => {      
-    onMarketSelection(OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],OTHERMARKETADDRESSES[marketType][chainId as number])
-  // }
-}, [chainId,marketType])
-useEffect(() => {
-  async function checkIfSignatureExists() {
-    
-      setTransactionSigned(false)
-      setSignatureFromDataBase(false)
-  }
-  if (account) {
-    checkIfSignatureExists()
-    getFee()
-  }
-}, [account])
+  const [totalNumberOfTransaction, setTotalNumberOfTransaction] = useState("1");
+  const [approval, setApproval] = useState<String[]>([]);
+  const [fee, setFee] = useState("");
+  const [name, setName] = useState("+");
+  const [shakeInput, setShakeInput] = useState<boolean>(false);
+  const [dataSignature, setDataSignature] = useState<{
+    mess: string;
+    signature: string;
+  }>({
+    mess: "",
+    signature: "",
+  });
+
+  const routerHistory = useHistory();
+  useEffect(() => {
+    onMarketSelection(
+      OTHERMARKETFACTORYADDRESSES[marketType][chainId as number],
+      OTHERMARKETADDRESSES[marketType][chainId as number]
+    );
+    // }
+  }, [chainId, marketType]);
+  useEffect(() => {
+    async function checkIfSignatureExists() {
+      setTransactionSigned(false);
+      setSignatureFromDataBase(false);
+    }
+    if (account) {
+      checkIfSignatureExists();
+      getFee();
+    }
+  }, [account]);
 
   const [balance] = GetAddressTokenBalance(
     currencies[Field.INPUT] ?? undefined
@@ -136,173 +162,193 @@ useEffect(() => {
   const deadline = useSelector<RootState, number>(
     (state) => state.user.userDeadline
   );
-  useEffect(()=>{
-    let market = location.split("/").length===3? location.split("/")[2]:""
-    checkIfMarketExists(market,chainId)
- 
-  },[location,chainId])
-  useEffect(()=>{
- if(parseFloat(initialToPrice) >0){
-      const percent = (name==="+" ? positiveSliderValue/100 : negativeSliderValue/100) * parseFloat(basePrice)
-      const value = parseFloat(basePrice) + percent
-
-      value > 0 ? setInitialToPrice(value.toString()) : setInitialToPrice("0")
-      
-    } 
-  },[positiveSliderValue,negativeSliderValue])
-  
-  const checkIfMarketExists = (market:string,chainId:number| undefined) => {
-    let marketArray:any
-    if(chainId === 56) marketArray = binanceMarketArray
-    else if(chainId === 97) marketArray = binanceTestMarketArray
-    else if(chainId === 137) marketArray = polygonMarketArray
-    if(marketArray && marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())){
-      let item = marketArray.find((item:any)=> item.name.toLowerCase() ===market.toLowerCase())
-      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1))
+  useEffect(() => {
+    let market = location.split("/").length === 3 ? location.split("/")[2] : "";
+    checkIfMarketExists(market, chainId);
+  }, [location, chainId]);
+  useEffect(() => {
+    if (parseFloat(initialToPrice) > 0) {
+      const percent =
+        (name === "+" ? positiveSliderValue / 100 : negativeSliderValue / 100) *
+        parseFloat(basePrice);
+      const value = parseFloat(basePrice) + percent;
+
+      value > 0 ? setInitialToPrice(value.toString()) : setInitialToPrice("0");
+    }
+  }, [positiveSliderValue, negativeSliderValue]);
+
+  const checkIfMarketExists = (market: string, chainId: number | undefined) => {
+    let marketArray: any;
+    if (chainId === 56) marketArray = binanceMarketArray;
+    else if (chainId === 97) marketArray = binanceTestMarketArray;
+    else if (chainId === 137) marketArray = polygonMarketArray;
+    if (
+      marketArray &&
+      marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      )
+    ) {
+      let item = marketArray.find(
+        (item: any) => item.name.toLowerCase() === market.toLowerCase()
+      );
+      setMarketType(item.name.charAt(0).toUpperCase() + item.name.slice(1));
     }
-  }
+  };
 
   const { independentField, typedValue } = useSwapState();
 
   useEffect(() => {
     async function runCheck() {
-      if (account  && currencies[Field.INPUT]) {
-
-        await checkForApproval()
+      if (account && currencies[Field.INPUT]) {
+        await checkForApproval();
       }
     }
-    runCheck()
-  }, [currencies[Field.INPUT],typedValue, account])
+    runCheck();
+  }, [currencies[Field.INPUT], typedValue, account]);
 
-  const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT;
+  const dependentField: Field =
+    independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT;
   const [allowedSlippage] = useUserSlippageTolerance();
 
   useEffect(() => {
-    if(parseFloat(initialFromPrice) >0 && negativeSliderValue===-1  && positiveSliderValue===0 && unitAmount && oppositeAmount){
-      setInitialToPrice(unitAmount)
-      setBasePrice(unitAmount)
+    if (
+      parseFloat(initialFromPrice) > 0 &&
+      negativeSliderValue === -1 &&
+      positiveSliderValue === 0 &&
+      unitAmount &&
+      oppositeAmount
+    ) {
+      setInitialToPrice(unitAmount);
+      setBasePrice(unitAmount);
     }
     if (parseFloat(initialToPrice) > 0 && parseFloat(initialFromPrice) > 0) {
-      setDisableInput(false)
+      setDisableInput(false);
       // setShakeInput
-      let difference = parseFloat(initialToPrice) / parseFloat(initialFromPrice)
-      setDifferenceInPrice(difference)
+      let difference =
+        parseFloat(initialToPrice) / parseFloat(initialFromPrice);
+      setDifferenceInPrice(difference);
       if (typedValue) {
-        setToPrice(parseFloat(typedValue) * difference)
+        setToPrice(parseFloat(typedValue) * difference);
       }
     } else {
-      setDisableInput(true)
+      setDisableInput(true);
     }
-  }, [initialToPrice, initialFromPrice, typedValue])
- 
+  }, [initialToPrice, initialFromPrice, typedValue]);
+
   const parsedAmounts = useMemo(
     () =>
       showWrap
         ? {
-          [Field.INPUT]: typedValue,
-          [Field.OUTPUT]: typedValue,
-        }
+            [Field.INPUT]: typedValue,
+            [Field.OUTPUT]: typedValue,
+          }
         : {
-          [Field.INPUT]:
-            independentField === Field.INPUT ? parsedAmount : bestTrade,
-          [Field.OUTPUT]:
-            independentField === Field.OUTPUT ? parsedAmount : bestTrade,
-        },
+            [Field.INPUT]:
+              independentField === Field.INPUT ? parsedAmount : bestTrade,
+            [Field.OUTPUT]:
+              independentField === Field.OUTPUT ? parsedAmount : bestTrade,
+          },
     [independentField, parsedAmount, showWrap, bestTrade]
   );
 
   const formattedAmounts = {
     [independentField]: typedValue,
     [dependentField]: showWrap
-      ? parsedAmounts[independentField] ?? '' //?.toExact() ?? ''
-      : parsedAmounts[dependentField] ?? '', //?.toSignificant(6) ?? '',
+      ? parsedAmounts[independentField] ?? "" //?.toExact() ?? ''
+      : parsedAmounts[dependentField] ?? "", //?.toSignificant(6) ?? '',
   };
   useEffect(() => {
-    const checkBalance = async ()=>{
-     if(currencies[Field.INPUT]?.symbol==="RGP"){
-      let fee =await getFee()
-      let amount = parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee)
-      if(amount > parseFloat(balance) ){
-        setInsufficientBalance(true);
-      }else{
-        setInsufficientBalance(false);
+    const checkBalance = async () => {
+      if (currencies[Field.INPUT]?.symbol === "RGP") {
+        let fee = await getFee();
+        let amount =
+          parseFloat(formattedAmounts[Field.INPUT]) + parseFloat(fee);
+        if (amount > parseFloat(balance)) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
+      } else {
+        if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
+          setInsufficientBalance(true);
+        } else {
+          setInsufficientBalance(false);
+        }
       }
-    }else{
-     if (balance < parseFloat(formattedAmounts[Field.INPUT])) {
-      setInsufficientBalance(true);
+    };
+
+    checkBalance();
+  }, [balance, formattedAmounts[Field.INPUT]]);
+  const minimumAmountToReceive = useCallback(() => {
+    let data;
+    if (toPrice) {
+      data = ((100 - Number(allowedSlippage / 100)) / 100) * toPrice;
     } else {
-      setInsufficientBalance(false);
-    } 
-    } 
+      data = 0;
     }
-    
-  checkBalance()
-  }, [balance, formattedAmounts[Field.INPUT]]);
-  const minimumAmountToReceive = useCallback(
-    () =>{
-      let data
-      if(toPrice){
-       data = ((100 - Number(allowedSlippage / 100)) / 100) * toPrice
-      }else{
-        data=0
-      }
-      return data
-    },      
-    [allowedSlippage, bestTrade,toPrice]
-  );
-  const getFee =async () => {
-    const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[marketType][chainId as number], library);
-    const amountToApprove = await autoSwapV2Contract.fee()
-    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether")
-    setFee(fee)
-    return fee
-  }
+    return data;
+  }, [allowedSlippage, bestTrade, toPrice]);
+  const getFee = async () => {
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+      library
+    );
+    const amountToApprove = await autoSwapV2Contract.fee();
+    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether");
+    setFee(fee);
+    return fee;
+  };
   const minimum = minimumAmountToReceive().toFixed(
     currencies[Field.OUTPUT]?.decimals
   );
-  const switchMarket = (market:string)=>{
-    routerHistory.push(`/set-price/${market}`)
-  }
+  const switchMarket = (market: string) => {
+    routerHistory.push(`/set-price/${market}`);
+  };
   const sendTransactionToDatabase = async () => {
-    const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[marketType][chainId as number], library);
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+      library
+    );
     dispatch(
       setOpenModal({
-        message: `Signing initial transaction between ${currencies[Field.INPUT]?.symbol} and ${currencies[Field.OUTPUT]?.symbol}`,
+        message: `Signing initial transaction between ${
+          currencies[Field.INPUT]?.symbol
+        } and ${currencies[Field.OUTPUT]?.symbol}`,
         trxState: TrxState.WaitingForConfirmation,
       })
     );
     let minutesToAdd = 20;
     let currentDate = new Date();
     let futureDate = currentDate.getTime() + minutesToAdd;
-    let data, response,quantity
+    let data, response, quantity;
     if (currencies[Field.INPUT]?.isNative) {
-      quantity = typedValue && parseFloat(typedValue) * parseInt(totalNumberOfTransaction)
+      quantity =
+        typedValue &&
+        parseFloat(typedValue) * parseInt(totalNumberOfTransaction);
       data = await autoSwapV2Contract.setPeriodToSwapETHForTokens(
-
         currencies[Field.OUTPUT]?.wrapped.address,
         futureDate,
         // signedTransaction?.mess,
         // signedTransaction?.r,
         // signedTransaction?.s,
         // signedTransaction?.v,
-        { value: Web3.utils.toWei(quantity.toString(), 'ether') }
-      )
+        { value: Web3.utils.toWei(quantity.toString(), "ether") }
+      );
       const fetchTransactionData = async (sendTransaction: any) => {
         const { confirmations, status, logs } = await sendTransaction.wait(1);
 
         return { confirmations, status, logs };
       };
-      const { confirmations, status, logs } = await fetchTransactionData(data)
+      const { confirmations, status, logs } = await fetchTransactionData(data);
       if (confirmations >= 1 && status) {
-        response = true
+        response = true;
       }
     } else {
-      response = true
-      quantity= typedValue
+      response = true;
+      quantity = typedValue;
     }
 
-
-    let orderID = await autoSwapV2Contract.orderCount()
+    let orderID = await autoSwapV2Contract.orderCount();
 
     if (response) {
       dispatch(
@@ -315,10 +361,10 @@ useEffect(() => {
       const response = await fetch(`${URL}/auto/add`, {
         method: "POST",
         mode: "cors",
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "same-origin", // include, *same-origin, omit
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
           // 'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: JSON.stringify({
@@ -328,41 +374,49 @@ useEffect(() => {
           frequencyNumber: 1,
           presentDate: 0,
           presentInterval: 0,
-          fromAddress: currencies[Field.INPUT]?.isNative ? "native" : currencies[Field.INPUT]?.wrapped.address,
-          toAddress: currencies[Field.OUTPUT]?.isNative ? "native" : currencies[Field.OUTPUT]?.wrapped.address,
+          fromAddress: currencies[Field.INPUT]?.isNative
+            ? "native"
+            : currencies[Field.INPUT]?.wrapped.address,
+          toAddress: currencies[Field.OUTPUT]?.isNative
+            ? "native"
+            : currencies[Field.OUTPUT]?.wrapped.address,
           userExpectedPrice: toPrice,
-          percentageChange:"100",
-          fromNumberOfDecimals: currencies[Field.INPUT]?.isNative ? 18 : currencies[Field.INPUT]?.wrapped.decimals,
-          toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative ? 18 : currencies[Field.OUTPUT]?.wrapped.decimals,
+          percentageChange: "100",
+          fromNumberOfDecimals: currencies[Field.INPUT]?.isNative
+            ? 18
+            : currencies[Field.INPUT]?.wrapped.decimals,
+          toNumberOfDecimals: currencies[Field.OUTPUT]?.isNative
+            ? 18
+            : currencies[Field.OUTPUT]?.wrapped.decimals,
           fromPrice: quantity,
           currentToPrice: formattedAmounts[Field.OUTPUT],
-          orderID: currencies[Field.INPUT]?.isNative ? parseInt(orderID.toString()) : parseInt(orderID.toString()) + 1,
-          type: "Set Price",
+          orderID: currencies[Field.INPUT]?.isNative
+            ? parseInt(orderID.toString())
+            : parseInt(orderID.toString()) + 1,
+          type: "Auto Limit",
           initialToPrice,
           initialFromPrice,
           dataSignature,
-          totalNumberOfTransaction:parseInt(totalNumberOfTransaction),
-          slippage:Number(allowedSlippage / 100),
+          totalNumberOfTransaction: parseInt(totalNumberOfTransaction),
+          slippage: Number(allowedSlippage / 100),
           minimum,
           pathArray,
           pathSymbol,
-          market:marketType
-        })
-      })
-      const res = await response.json()
+          market: marketType,
+        }),
+      });
+      const res = await response.json();
       dispatch(
         setOpenModal({
           message: "Successfully stored Transaction",
           trxState: TrxState.TransactionSuccessful,
         })
       );
-      dispatch(refreshTransactionTab({ refresh:Math.random() }))
+      dispatch(refreshTransactionTab({ refresh: Math.random() }));
       onUserInput(Field.INPUT, "");
-      setApproval([])
+      setApproval([]);
     }
-
-  }
-
+  };
 
   const handleMaxInput = async () => {
     const value = await getMaxValue(currencies[Field.INPUT]);
@@ -378,22 +432,19 @@ useEffect(() => {
     [onUserInput]
   );
 
-
   const signTransaction = async () => {
     if (account !== undefined) {
       // try {
-        let web3 = new Web3(Web3.givenProvider);
-        const permitHash = process.env.REACT_APP_PERMIT_HASH;
-
-        const mess = permitHash &&  web3.utils.soliditySha3(permitHash)
-        
-         if(account && mess){
-          let signature = await web3.eth.personal.sign(mess, account,"12348844");
-        setDataSignature({mess,signature})
-        setTransactionSigned(true)
-         }
- 
+      let web3 = new Web3(Web3.givenProvider);
+      const permitHash = process.env.REACT_APP_PERMIT_HASH;
+
+      const mess = permitHash && web3.utils.soliditySha3(permitHash);
 
+      if (account && mess) {
+        let signature = await web3.eth.personal.sign(mess, account, "12348844");
+        setDataSignature({ mess, signature });
+        setTransactionSigned(true);
+      }
     } else {
       dispatch(
         setOpenModal({
@@ -402,121 +453,135 @@ useEffect(() => {
         })
       );
     }
-
-  }
-  const approveOneOrTwoTokens = async (tokenApprovingFor:string) => {
-      if (currencies[Field.INPUT]?.isNative) {
-        setHasBeenApproved(true);
-        setApproval(approval.filter(t => t !== currencies[Field.INPUT]?.name))
-      }
-        try {
+  };
+  const approveOneOrTwoTokens = async (tokenApprovingFor: string) => {
+    if (currencies[Field.INPUT]?.isNative) {
+      setHasBeenApproved(true);
+      setApproval(approval.filter((t) => t !== currencies[Field.INPUT]?.name));
+    }
+    try {
+      dispatch(
+        setOpenModal({
+          message: `Approve ${tokenApprovingFor} ${
+            tokenApprovingFor === "RGP" ? "for fee" : ""
+          }`,
+          trxState: TrxState.WaitingForConfirmation,
+        })
+      );
+      if (tokenApprovingFor === "RGP") {
+        const address = RGPADDRESSES[chainId as number];
+        const rgp = await rigelToken(RGP[chainId as number], library);
+        const token = await getERC20Token(address, library);
+
+        const walletBal = (await token.balanceOf(account)) + 4e18;
+        const approveTransaction = await rgp.approve(
+          MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+          walletBal,
+          {
+            from: account,
+          }
+        );
+        // setArr =setArr.filter(item=>item!=="RGP")
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
           dispatch(
             setOpenModal({
-              message: `Approve ${tokenApprovingFor} ${tokenApprovingFor ==="RGP" ? "for fee" : ""}`,
-              trxState: TrxState.WaitingForConfirmation,
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
             })
           );
-          if (tokenApprovingFor === "RGP") {
-            const address = RGPADDRESSES[chainId as number];
-            const rgp = await rigelToken(RGP[chainId as number], library);
-            const token = await getERC20Token(address, library);
-  
-            const walletBal = (await token.balanceOf(account)) + 4e18;
-            const approveTransaction = await rgp.approve(
-              MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
-              walletBal,
-              {
-                from: account,
-              }
-            );
-            // setArr =setArr.filter(item=>item!=="RGP")
-            const { confirmations } = await approveTransaction.wait(1);
-            if (confirmations >= 1 ) {
-              dispatch(
-                setOpenModal({
-                  message: `Approval Successful.`,
-                  trxState: TrxState.TransactionSuccessful,
-                })
-              );
-            }
-              setApprovalForFee("")
-            // setArr && setApproval(setArr)
-          } else {
-            const address = currencies[Field.INPUT]?.wrapped.address;
-            const token = address && await getERC20Token(address, library);
-            const walletBal = (await token?.balanceOf(account)) + 4e18;
-            const approveTransaction = await token?.approve(
-              MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
-              walletBal,
-              {
-                from: account,
-              }
-            );
-            const { confirmations } = await approveTransaction.wait(1);
-            if (confirmations >= 1) {
-              dispatch(
-                setOpenModal({
-                  message: `Approval Successful.`,
-                  trxState: TrxState.TransactionSuccessful,
-                })
-              );
-            }
-            // setArr && setApproval(setArr.filter(item=>item!==currencies[Field.INPUT]?.wrapped.symbol))
+        }
+        setApprovalForFee("");
+        // setArr && setApproval(setArr)
+      } else {
+        const address = currencies[Field.INPUT]?.wrapped.address;
+        const token = address && (await getERC20Token(address, library));
+        const walletBal = (await token?.balanceOf(account)) + 4e18;
+        const approveTransaction = await token?.approve(
+          MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+          walletBal,
+          {
+            from: account,
           }
-          setApprovalForToken("")
-        } catch (e) {
-          console.log(e)
+        );
+        const { confirmations } = await approveTransaction.wait(1);
+        if (confirmations >= 1) {
+          dispatch(
+            setOpenModal({
+              message: `Approval Successful.`,
+              trxState: TrxState.TransactionSuccessful,
+            })
+          );
         }
-      // } else {
-      //   dispatch(
-      //     setOpenModal({
-      //       message: `Approval Failed.`,
-      //       trxState: TrxState.TransactionFailed,
-      //     })
-      //   );
-      // }
-  
-    }
-    const checkForApproval = async () => {
-      const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[marketType][chainId as number], library);
-      
-      // check approval for RGP and the other token
-      const RGPBalance = await checkApprovalForRGP(RGPADDRESSES[chainId as number]) ?? "0"
-      const tokenBalance = currencies[Field.INPUT]?.isNative ? 1 : await checkApproval(currencies[Field.INPUT]?.wrapped.address)
-      const amountToApprove = await autoSwapV2Contract.fee()
-      const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether")
-      let approvalArray:any=[]
-      if (parseFloat(RGPBalance) >= parseFloat(fee)) {
-        setHasBeenApproved(true)
-        approvalArray=[]
-        setApprovalForFee("")
-        // setApprovalForToken("")
-      }else{
-        setApprovalForFee("RGP")
-      }
-      if(parseFloat(tokenBalance) >= parseFloat(formattedAmounts[Field.INPUT])){
-        setHasBeenApproved(true)
-        approvalArray=[]
-        // setApprovalForFee("")
-        setApprovalForToken("")
-      } else{
-        setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
-      }
-      if (parseFloat(RGPBalance) < parseFloat(fee) || (parseFloat(tokenBalance) < Number(formattedAmounts[Field.INPUT]) && (!currencies[Field.INPUT]?.isNative && currencies[Field.INPUT]?.wrapped?.symbol === "RGP" ))) {
-        setHasBeenApproved(false)
-        approvalArray.push("RGP")
-        setApprovalForFee("RGP")
-        setApprovalForToken("RGP")
-      }
-      if (parseFloat(tokenBalance) < Number(formattedAmounts[Field.INPUT]) && (!currencies[Field.INPUT]?.isNative &&currencies[Field.INPUT]?.wrapped.symbol !== "RGP")) {
-        setHasBeenApproved(false)
-        approvalArray.push(currencies[Field.INPUT]?.wrapped?.symbol)
-        setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "")
+        // setArr && setApproval(setArr.filter(item=>item!==currencies[Field.INPUT]?.wrapped.symbol))
       }
-     
-      setApproval(Array.from(new Set(approvalArray)))
-      
+      setApprovalForToken("");
+    } catch (e) {
+      console.log(e);
+    }
+    // } else {
+    //   dispatch(
+    //     setOpenModal({
+    //       message: `Approval Failed.`,
+    //       trxState: TrxState.TransactionFailed,
+    //     })
+    //   );
+    // }
+  };
+  const checkForApproval = async () => {
+    const autoSwapV2Contract = await autoSwapV2(
+      MARKETAUTOSWAPADDRESSES[marketType][chainId as number],
+      library
+    );
+
+    // check approval for RGP and the other token
+    const RGPBalance =
+      (await checkApprovalForRGP(RGPADDRESSES[chainId as number])) ?? "0";
+    const tokenBalance = currencies[Field.INPUT]?.isNative
+      ? 1
+      : await checkApproval(currencies[Field.INPUT]?.wrapped.address);
+    const amountToApprove = await autoSwapV2Contract.fee();
+    const fee = Web3.utils.fromWei(amountToApprove.toString(), "ether");
+    let approvalArray: any = [];
+    if (parseFloat(RGPBalance) >= parseFloat(fee)) {
+      setHasBeenApproved(true);
+      approvalArray = [];
+      setApprovalForFee("");
+      // setApprovalForToken("")
+    } else {
+      setApprovalForFee("RGP");
+    }
+    if (parseFloat(tokenBalance) >= parseFloat(formattedAmounts[Field.INPUT])) {
+      setHasBeenApproved(true);
+      approvalArray = [];
+      // setApprovalForFee("")
+      setApprovalForToken("");
+    } else {
+      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
+    }
+    if (
+      parseFloat(RGPBalance) < parseFloat(fee) ||
+      (parseFloat(tokenBalance) < Number(formattedAmounts[Field.INPUT]) &&
+        !currencies[Field.INPUT]?.isNative &&
+        currencies[Field.INPUT]?.wrapped?.symbol === "RGP")
+    ) {
+      setHasBeenApproved(false);
+      approvalArray.push("RGP");
+      setApprovalForFee("RGP");
+      setApprovalForToken("RGP");
     }
+    if (
+      parseFloat(tokenBalance) < Number(formattedAmounts[Field.INPUT]) &&
+      !currencies[Field.INPUT]?.isNative &&
+      currencies[Field.INPUT]?.wrapped.symbol !== "RGP"
+    ) {
+      setHasBeenApproved(false);
+      approvalArray.push(currencies[Field.INPUT]?.wrapped?.symbol);
+      setApprovalForToken(currencies[Field.INPUT]?.wrapped?.symbol ?? "");
+    }
+
+    setApproval(Array.from(new Set(approvalArray)));
+  };
   const checkApproval = async (tokenAddress: string) => {
     if (currencies[Field.INPUT]?.isNative) {
       return setHasBeenApproved(true);
@@ -529,17 +594,15 @@ useEffect(() => {
         {
           from: account,
         }
-      )
-        const balance =await status.balanceOf(account)
+      );
+      const balance = await status.balanceOf(account);
       const approveBalance = ethers.utils.formatEther(check).toString();
-      return approveBalance
+      return approveBalance;
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-
-  }
+  };
   const checkApprovalForRGP = async (tokenAddress: string) => {
-
     try {
       const status = await rigelToken(tokenAddress, library);
       const check = await status.allowance(
@@ -548,16 +611,14 @@ useEffect(() => {
         {
           from: account,
         }
-      )
+      );
 
       const approveBalance = ethers.utils.formatEther(check).toString();
-      return approveBalance
+      return approveBalance;
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-
-  }
-
+  };
 
   return (
     <Box fontSize="xl">
@@ -568,42 +629,67 @@ useEffect(() => {
         justifyContent="center"
         flexWrap="wrap"
       >
-        <Box mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+        <Box mx={4} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
           <ShowDetails />
         </Box>
 
         <Box
-          mx={4} w={['100%', '100%', '45%', '29.5%']} mb={4}
-          borderColor={borderColor} borderWidth="1px"
-          borderRadius="6px" pl={3} pr={3} pb={5}
+          mx={4}
+          w={["100%", "100%", "45%", "29.5%"]}
+          mb={4}
+          borderColor={borderColor}
+          borderWidth="1px"
+          borderRadius="6px"
+          pl={3}
+          pr={3}
+          pb={5}
           // h="550px"
         >
           <SwapSettings />
           <Flex justifyContent="space-between">
-             <Box>
-                  <Flex>
-                    <Text fontSize="14px" mr={2} my={2}>
-                      Frequency <ExclamationIcon />
-                    </Text>
-                    
-                  </Flex>
-                  <InputGroup size="md" borderRadius="4px" borderColor={borderColor}>
-                    <Input placeholder="0" w="80px" value={totalNumberOfTransaction} type="number" onChange={e => {
-                      parseInt(e.target.value)<=0 ? setTotalNumberOfTransaction("1") :
-                      setTotalNumberOfTransaction(e.target.value)
-                    }} />
-                    <InputRightAddon children="times" fontSize="16px"padding="3px" />
-                  </InputGroup>
-                </Box>
-                
-                <Box>
+            <Box>
+              <Flex>
                 <Text fontSize="14px" mr={2} my={2}>
-                      Router <ExclamationIcon />
-                    </Text>
-                    <MarketDropDown marketType={marketType} setMarketType={setMarketType} chainID={chainId} switchMarket={switchMarket}/>
-                </Box>
+                  Frequency <ExclamationIcon />
+                </Text>
+              </Flex>
+              <InputGroup
+                size="md"
+                borderRadius="4px"
+                borderColor={borderColor}
+              >
+                <Input
+                  placeholder="0"
+                  w="80px"
+                  value={totalNumberOfTransaction}
+                  type="number"
+                  onChange={(e) => {
+                    parseInt(e.target.value) <= 0
+                      ? setTotalNumberOfTransaction("1")
+                      : setTotalNumberOfTransaction(e.target.value);
+                  }}
+                />
+                <InputRightAddon
+                  children="times"
+                  fontSize="16px"
+                  padding="3px"
+                />
+              </InputGroup>
+            </Box>
+
+            <Box>
+              <Text fontSize="14px" mr={2} my={2}>
+                Router <ExclamationIcon />
+              </Text>
+              <MarketDropDown
+                marketType={marketType}
+                setMarketType={setMarketType}
+                chainID={chainId}
+                switchMarket={switchMarket}
+              />
+            </Box>
           </Flex>
-         
+
           <From
             onUserInput={handleTypeInput}
             onCurrencySelection={onCurrencySelection}
@@ -613,23 +699,21 @@ useEffect(() => {
             value={formattedAmounts[Field.INPUT]}
             disable={disableInput}
             placeholder="3"
-            onHover={()=>disableInput && setShakeInput(!shakeInput)}
+            onHover={() => disableInput && setShakeInput(!shakeInput)}
           />
           <Flex justifyContent="center" onClick={onSwitchTokens}>
             <SwitchIcon />
           </Flex>
           <To
-          onUserOutput={()=>{}}
+            onUserOutput={() => {}}
             onCurrencySelection={onCurrencySelection}
             currency={currencies[Field.OUTPUT]}
             otherCurrency={currencies[Field.INPUT]}
-            value={toPrice===0 ?"": `${toPrice}`}
+            value={toPrice === 0 ? "" : `${toPrice}`}
             disable={disableInput}
             placeholder="6"
-            onHover={()=>disableInput && setShakeInput(!shakeInput)}
+            onHover={() => disableInput && setShakeInput(!shakeInput)}
           />
-          
-          
 
           <Box my={5}>
             {/* <Center borderColor={iconColor} borderWidth="1px" borderRadius={4} w="20px" h="20px">
@@ -637,45 +721,57 @@ useEffect(() => {
             </Center> */}
             {/* <Flex>
             <Text fontSize="14px" color={iconColor} mr={2}>
-              Set Price
+              Auto Limit
             </Text>
             <ExclamationIcon />
           </Flex>
             <Spacer /> */}
-             {currencies[Field.INPUT] && currencies[Field.OUTPUT] &&
-                  <>
-                    <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.INPUT]?.symbol} = {unitAmount && parseFloat(unitAmount) >0 ? unitAmount :  <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.OUTPUT]?.symbol}
-                    </Text>
-                    <Text fontSize="14px" mr={2} color={textColorOne}>
-                      1 {currencies[Field.OUTPUT]?.symbol} = {oppositeAmount && parseFloat(oppositeAmount)>0 ? oppositeAmount :  <Spinner speed='0.65s' color='#999999' size="xs" />} {currencies[Field.INPUT]?.symbol}
-                    </Text>
-                    <ExclamationIcon />
-                  </>
-
-                }
-
+            {currencies[Field.INPUT] && currencies[Field.OUTPUT] && (
+              <>
+                <Text fontSize="14px" mr={2} color={textColorOne}>
+                  1 {currencies[Field.INPUT]?.symbol} ={" "}
+                  {unitAmount && parseFloat(unitAmount) > 0 ? (
+                    unitAmount
+                  ) : (
+                    <Spinner speed="0.65s" color="#999999" size="xs" />
+                  )}{" "}
+                  {currencies[Field.OUTPUT]?.symbol}
+                </Text>
+                <Text fontSize="14px" mr={2} color={textColorOne}>
+                  1 {currencies[Field.OUTPUT]?.symbol} ={" "}
+                  {oppositeAmount && parseFloat(oppositeAmount) > 0 ? (
+                    oppositeAmount
+                  ) : (
+                    <Spinner speed="0.65s" color="#999999" size="xs" />
+                  )}{" "}
+                  {currencies[Field.INPUT]?.symbol}
+                </Text>
+                <ExclamationIcon />
+              </>
+            )}
           </Box>
           {/* <Input placeholder="0.00" size="lg" borderRadius={4} borderColor={borderColor} /> */}
 
           <Flex justifyContent="space-between">
-          <Flex mt={10} justifyContent="space-between">
-                  <Text fontSize="16px">Fee:</Text> <Text fontSize="16px" opacity="0.7" ml={1}>{fee} RGP</Text>
-                </Flex>
-            <SliderComponent 
-          setSliderValue={setPositiveSliderValue}
-          sliderValue={positiveSliderValue}
-          setShowTooltip={setShowTooltip}
-          showTooltip={showTooltip}
-          start={1}
-          stop={100}
-          width="45%"
-          name="+"
-          setName={setName}
+            <Flex mt={10} justifyContent="space-between">
+              <Text fontSize="16px">Fee:</Text>{" "}
+              <Text fontSize="16px" opacity="0.7" ml={1}>
+                {fee} RGP
+              </Text>
+            </Flex>
+            <SliderComponent
+              setSliderValue={setPositiveSliderValue}
+              sliderValue={positiveSliderValue}
+              setShowTooltip={setShowTooltip}
+              showTooltip={showTooltip}
+              start={1}
+              stop={100}
+              width="45%"
+              name="+"
+              setName={setName}
             />
           </Flex>
           <HStack>
-          
             <CInput
               currency={currencies[Field.INPUT]}
               initialFromPrice={initialFromPrice}
@@ -697,44 +793,47 @@ useEffect(() => {
             />
           </HStack>
           <Flex justifyContent="flex-end">
-          <SliderComponent 
-            setSliderValue={setNegativeSliderValue}
-            sliderValue={negativeSliderValue}
-            setShowTooltip={setShowTooltip}
-            showTooltip={showTooltip}
-            start={-100}
-          stop={0}
-          width="45%"
-          name="-"
-          setName={setName}
+            <SliderComponent
+              setSliderValue={setNegativeSliderValue}
+              sliderValue={negativeSliderValue}
+              setShowTooltip={setShowTooltip}
+              showTooltip={showTooltip}
+              start={-100}
+              stop={0}
+              width="45%"
+              name="-"
+              setName={setName}
             />
           </Flex>
 
-         
           <Box mt={5}>
-            {insufficientBalance || inputError ?( 
-            <Button
-              w='100%'
-              borderRadius='6px'
-              border={lightmode ? "2px" : "none"}
-              borderColor={borderColor}
-              h='48px'
-              p='5px'
-              mt={1}
-              disabled={inputError !== undefined || insufficientBalance}
-              color={inputError ? color : "#FFFFFF"}
-              bgColor={inputError ? switchBgcolor : buttonBgcolor}
-              fontSize='18px'
-              boxShadow={lightmode ? "base" : "lg"}
-              _hover={{ bgColor: buttonBgcolor }}
-            >
-              {inputError
-                ? inputError
-                : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${currencies[Field.INPUT]?.symbol==="RGP" && "for fee"}`}
-            </Button>) : !transactionSigned ? <Button
+            {insufficientBalance || inputError ? (
+              <Button
                 w="100%"
                 borderRadius="6px"
-                border={lightmode ? '2px' : 'none'}
+                border={lightmode ? "2px" : "none"}
+                borderColor={borderColor}
+                h="48px"
+                p="5px"
+                mt={1}
+                disabled={inputError !== undefined || insufficientBalance}
+                color={inputError ? color : "#FFFFFF"}
+                bgColor={inputError ? switchBgcolor : buttonBgcolor}
+                fontSize="18px"
+                boxShadow={lightmode ? "base" : "lg"}
+                _hover={{ bgColor: buttonBgcolor }}
+              >
+                {inputError
+                  ? inputError
+                  : `Insufficient ${currencies[Field.INPUT]?.symbol} Balance ${
+                      currencies[Field.INPUT]?.symbol === "RGP" && "for fee"
+                    }`}
+              </Button>
+            ) : !transactionSigned ? (
+              <Button
+                w="100%"
+                borderRadius="6px"
+                border={lightmode ? "2px" : "none"}
                 borderColor={borderColor}
                 // onClick={signTransaction}
                 onClick={() => setShowModal(!showModal)}
@@ -743,88 +842,97 @@ useEffect(() => {
                 color={inputError ? color : "#FFFFFF"}
                 bgColor={buttonBgcolor}
                 fontSize="18px"
-                boxShadow={lightmode ? 'base' : 'lg'}
+                boxShadow={lightmode ? "base" : "lg"}
                 _hover={{ bgColor: buttonBgcolor }}
               >
                 Sign Wallet
-              </Button>  :  approvalForToken ? <Button
-                    w="100%"
-                    borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
-                    borderColor={borderColor}
-                    h="48px"
-                    p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForToken)}
-                    color={inputError ? color : "#FFFFFF"}
-                    bgColor={buttonBgcolor}
-                    fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
-                    _hover={{ bgColor: buttonBgcolor }}
-                  >
-                    Approve {approvalForToken}
-                  </Button> : approvalForFee ? <Button
-                    w="100%"
-                    borderRadius="6px"
-                    border={lightmode ? '2px' : 'none'}
-                    borderColor={borderColor}
-                    h="48px"
-                    p="5px"
-                    onClick={()=>approveOneOrTwoTokens(approvalForFee)}
-                    color={inputError ? color : "#FFFFFF"}
-                    bgColor={buttonBgcolor}
-                    fontSize="18px"
-                    boxShadow={lightmode ? 'base' : 'lg'}
-                    _hover={{ bgColor: buttonBgcolor }}
-                  >
-                    Approve RGP for fee
-                  </Button>  : <Button
+              </Button>
+            ) : approvalForToken ? (
+              <Button
+                w="100%"
+                borderRadius="6px"
+                border={lightmode ? "2px" : "none"}
+                borderColor={borderColor}
+                h="48px"
+                p="5px"
+                onClick={() => approveOneOrTwoTokens(approvalForToken)}
+                color={inputError ? color : "#FFFFFF"}
+                bgColor={buttonBgcolor}
+                fontSize="18px"
+                boxShadow={lightmode ? "base" : "lg"}
+                _hover={{ bgColor: buttonBgcolor }}
+              >
+                Approve {approvalForToken}
+              </Button>
+            ) : approvalForFee ? (
+              <Button
                 w="100%"
                 borderRadius="6px"
-                border={lightmode ? '2px' : 'none'}
+                border={lightmode ? "2px" : "none"}
                 borderColor={borderColor}
                 h="48px"
                 p="5px"
+                onClick={() => approveOneOrTwoTokens(approvalForFee)}
                 color={inputError ? color : "#FFFFFF"}
                 bgColor={buttonBgcolor}
-                onClick={() => signatureFromDataBase ? setShowModal(!showModal) : sendTransactionToDatabase()}
+                fontSize="18px"
+                boxShadow={lightmode ? "base" : "lg"}
+                _hover={{ bgColor: buttonBgcolor }}
+              >
+                Approve RGP for fee
+              </Button>
+            ) : (
+              <Button
+                w="100%"
+                borderRadius="6px"
+                border={lightmode ? "2px" : "none"}
+                borderColor={borderColor}
+                h="48px"
+                p="5px"
+                color={inputError ? color : "#FFFFFF"}
+                bgColor={buttonBgcolor}
+                onClick={() =>
+                  signatureFromDataBase
+                    ? setShowModal(!showModal)
+                    : sendTransactionToDatabase()
+                }
                 // onClick={sendTransactionToDatabase}
                 fontSize="18px"
-                boxShadow={lightmode ? 'base' : 'lg'}
+                boxShadow={lightmode ? "base" : "lg"}
                 _hover={{ bgColor: buttonBgcolor }}
               >
                 Send Transaction
               </Button>
-            }
-         
+            )}
           </Box>
-
         </Box>
 
-        <Box mx={5} w={['100%', '100%', '45%', '29.5%']} mb={4}>
+        <Box mx={5} w={["100%", "100%", "45%", "29.5%"]} mb={4}>
           <History />
         </Box>
-
       </Flex>
       <SetPriceModal
         showModal={showModal}
         setShowModal={setShowModal}
         from={currencies[Field.INPUT]?.symbol}
         to={currencies[Field.OUTPUT]?.symbol}
-        title="Confirm set price"
+        title="Confirm Auto Limit"
         inputLogo={currencies[Field.INPUT]?.logoURI}
         outputLogo={currencies[Field.OUTPUT]?.logoURI}
         buttonText={signatureFromDataBase ? "Send Transaction" : "Sign Wallet"}
         fromDeposited={formattedAmounts[Field.INPUT]}
         toDeposited={toPrice}
         frequency={totalNumberOfTransaction}
-        signSignature={signatureFromDataBase ? sendTransactionToDatabase : signTransaction}
+        signSignature={
+          signatureFromDataBase ? sendTransactionToDatabase : signTransaction
+        }
         fromPrice={typedValue}
         pathSymbol={pathSymbol}
         minimumAmountToRecieve={minimum}
         slippage={Number(allowedSlippage / 100)}
       />
     </Box>
-  )
-}
+  );
+};
 
-export default SetPrice
+export default SetPrice;
diff --git a/src/pages/Swap/components/history/History.tsx b/src/pages/Swap/components/history/History.tsx
index 5c803e70..57a15afb 100644
--- a/src/pages/Swap/components/history/History.tsx
+++ b/src/pages/Swap/components/history/History.tsx
@@ -1,48 +1,51 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text, Flex, useColorModeValue, Spinner } from '@chakra-ui/react';
-import { CloseIcon, AddIcon, RemoveIcon } from '../../../../theme/components/Icons';
-import { removeSideTab, checkSideTab } from '../../../../utils/utilsFunctions';
-import TransactionHistory from './TransactionHistory';
+import React, { useState, useEffect } from "react";
+import { Box, Text, Flex, useColorModeValue, Spinner } from "@chakra-ui/react";
+import {
+  CloseIcon,
+  AddIcon,
+  RemoveIcon,
+} from "../../../../theme/components/Icons";
+import { removeSideTab, checkSideTab } from "../../../../utils/utilsFunctions";
+import TransactionHistory from "./TransactionHistory";
 import useAccountHistory from "../../../../utils/hooks/useAccountHistory";
 import useMarketHistory from "../../../../utils/hooks/useMarketHistory";
 import { DataType } from "./TransactionHistory";
 import MarketHistory from "./MarketHistory";
-import { transactionTab,refreshTransactionTab } from "../../../../state/transaction/actions";
+import {
+  transactionTab,
+  refreshTransactionTab,
+} from "../../../../state/transaction/actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../../../../state";
-import ConfirmationModal from '../../../../components/Modals/confirmationModal';
-import { TrxState, setOpenModal } from '../../../../state/application/reducer';
-import useOpenOrders from '../../../../utils/hooks/useOpenOrders';
+import ConfirmationModal from "../../../../components/Modals/confirmationModal";
+import { TrxState, setOpenModal } from "../../../../state/application/reducer";
+import useOpenOrders from "../../../../utils/hooks/useOpenOrders";
 import { io } from "socket.io-client";
 
-import { GMarketHistoryTab } from '../../../../components/G-analytics/gIndex';
-import { SupportedChainSymbols } from '../../../../utils/constants/chains';
-import { autoSwapV2 } from '../../../../utils/Contracts';
-import { MARKETAUTOSWAPADDRESSES } from '../../../../utils/addresses';
-import { useActiveWeb3React } from '../../../../utils/hooks/useActiveWeb3React';
-import Web3 from 'web3';
-import { useLocation } from 'react-router-dom';
+import { GMarketHistoryTab } from "../../../../components/G-analytics/gIndex";
+import { SupportedChainSymbols } from "../../../../utils/constants/chains";
+import { autoSwapV2 } from "../../../../utils/Contracts";
+import { MARKETAUTOSWAPADDRESSES } from "../../../../utils/addresses";
+import { useActiveWeb3React } from "../../../../utils/hooks/useActiveWeb3React";
+import Web3 from "web3";
+import { useLocation } from "react-router-dom";
+import { SERVER_ENV } from "../../../../constants/chains";
 
 const History = () => {
-  
-  const activeTabColor = useColorModeValue('#333333', '#F1F5F8');
-  const nonActiveTabColor = useColorModeValue('#CCCCCC', '#4A739B');
-  const iconColor = useColorModeValue('#666666', '#DCE5EF');
-  const borderColor = useColorModeValue('#DEE5ED', '#324D68');
-  const [data, setData] = useState<DataType | null>(null)
-  const [showModal, setShowModal] = useState(false)
-  const [socket,setSocket] = useState <any>(null)
+  const activeTabColor = useColorModeValue("#333333", "#F1F5F8");
+  const nonActiveTabColor = useColorModeValue("#CCCCCC", "#4A739B");
+  const iconColor = useColorModeValue("#666666", "#DCE5EF");
+  const borderColor = useColorModeValue("#DEE5ED", "#324D68");
+  const [data, setData] = useState<DataType | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [socket, setSocket] = useState<any>(null);
   // const [sideBarRemoved, setSideBarRemoved] = useState<Boolean>(false);
 
-  useEffect(
-    () => {
-  setSocket(io("https://autoswap-server.herokuapp.com"));//https://autoswap-server.herokuapp.com
-  
-    },
-    []
-  )
- 
-  const { account, chainId, library } = useActiveWeb3React()
+  useEffect(() => {
+    setSocket(io(SERVER_ENV.url.API_URL ?? "http://localhost:8000"));
+  }, []);
+
+  const { account, chainId, library } = useActiveWeb3React();
   const [show, setShow] = useState<Boolean>(true);
   const [typeOfModal, setTypeOfModal] = useState(0);
   const [open, setOpen] = useState<Boolean>(false);
@@ -50,79 +53,89 @@ const History = () => {
   const [notification, setNotification] = useState(0);
   const location = useLocation().pathname;
   const [address, setAddress] = useState("");
-  const [URL, setURL] = useState("https://autoswap-server.herokuapp.com")//https://autoswap-server.herokuapp.com
+  const [URL, setURL] = useState(SERVER_ENV ?? "http://localhost:8000");
   const [showOrder, setShowOrder] = useState(false);
   const [type, setType] = useState("");
 
-  const sideBarRemoved = useSelector((state: RootState) => state.transactions.removeSideTab);
+  const sideBarRemoved = useSelector(
+    (state: RootState) => state.transactions.removeSideTab
+  );
 
   const { historyData, loading, locationData } = useAccountHistory(socket);
   const { marketHistoryData, loadMarketData } = useMarketHistory(socket);
   const { openOrderData, loadOpenOrders } = useOpenOrders(socket);
 
   const userData = Object.keys(historyData).map((i) => historyData[i]);
-  const historyArray = Object.keys(marketHistoryData).map((i) => marketHistoryData[i]);
-  const openOrderArray = Object.keys(openOrderData).map((i) => openOrderData[i]);
+  const historyArray = Object.keys(marketHistoryData).map(
+    (i) => marketHistoryData[i]
+  );
+  const openOrderArray = Object.keys(openOrderData).map(
+    (i) => openOrderData[i]
+  );
 
   const dispatch = useDispatch<AppDispatch>();
- const autoTimeNotification = useSelector((state: RootState) => state.transactions.autoTimeNotification);
- const setPriceNotification = useSelector((state: RootState) => state.transactions.setPriceNotification);
- const addr = useSelector((state: RootState) => state.transactions.address);
-
+  const autoTimeNotification = useSelector(
+    (state: RootState) => state.transactions.autoTimeNotification
+  );
+  const setPriceNotification = useSelector(
+    (state: RootState) => state.transactions.setPriceNotification
+  );
+  const addr = useSelector((state: RootState) => state.transactions.address);
 
   useEffect(() => {
-  
-    const isActive = checkSideTab('history');
-    dispatch(transactionTab({ removeSideTab: isActive }))
-
+    const isActive = checkSideTab("history");
+    dispatch(transactionTab({ removeSideTab: isActive }));
   }, []);
   useEffect(() => {
     if (location.includes("autotrade") || location.includes("set-price")) {
-        setOpen(true)
+      setOpen(true);
     }
-}, [location, chainId])
+  }, [location, chainId]);
   useEffect(() => {
-    if(locationData ==="auto"){
-      setNotification(autoTimeNotification)
-    }else if(locationData==="price"){
-      setNotification(setPriceNotification)
+    if (locationData === "auto") {
+      setNotification(autoTimeNotification);
+    } else if (locationData === "price") {
+      setNotification(setPriceNotification);
     }
-    
-    setAddress(addr)
-  }, [setPriceNotification,autoTimeNotification,addr]);
- 
+
+    setAddress(addr);
+  }, [setPriceNotification, autoTimeNotification, addr]);
+
   const deleteDataFromDatabase = async () => {
     // if (data && data.name === "Auto Time") {
-      console.log({typeOfModal})
-      if(data && typeOfModal===1){
-        dispatch(
-          setOpenModal({
-            message: "Deleting Order...",
-            trxState: TrxState.WaitingForConfirmation,
-          })
+    console.log({ typeOfModal });
+    if (data && typeOfModal === 1) {
+      dispatch(
+        setOpenModal({
+          message: "Deleting Order...",
+          trxState: TrxState.WaitingForConfirmation,
+        })
+      );
+      let response;
+      if (data.token1.symbol === SupportedChainSymbols[data.chainID]) {
+        const autoSwapV2Contract = await autoSwapV2(
+          MARKETAUTOSWAPADDRESSES[data.market][chainId as number],
+          library
         );
-        let response;
-      if(data.token1.symbol ===SupportedChainSymbols[data.chainID]){
-       
-        const autoSwapV2Contract = await autoSwapV2(MARKETAUTOSWAPADDRESSES[data.market][chainId as number], library);
-        console.log({data})
-        console.log(data.orderID)
-       const res= await autoSwapV2Contract.cancelOrder(data.orderID)
+        console.log({ data });
+        console.log(data.orderID);
+        const res = await autoSwapV2Contract.cancelOrder(data.orderID);
         const fetchTransactionData = async (sendTransaction: any) => {
           const { confirmations, status, logs } = await sendTransaction.wait(1);
-  
+
           return { confirmations, status, logs };
         };
-        const { confirmations, status, logs } = await fetchTransactionData(res)
+        const { confirmations, status, logs } = await fetchTransactionData(res);
         if (confirmations >= 1 && status) {
-          response = true
+          response = true;
         }
-       
-      }else{
-        response = true
+      } else {
+        response = true;
       }
-      const result = await fetch(`${URL}/auto/data/${data._id}/${data.id}`, { method: 'DELETE' })
-      const res = await result.json()
+      const result = await fetch(`${URL}/auto/data/${data._id}/${data.id}`, {
+        method: "DELETE",
+      });
+      const res = await result.json();
       if (res === "success") {
         dispatch(
           setOpenModal({
@@ -131,25 +144,30 @@ const History = () => {
           })
         );
       }
-   
-      } else if(data && typeOfModal ===2){
-          setOpenModal({
-        message: data.status === 2 ? "Suspending Transaction..." : "Resuming Transaction",
+    } else if (data && typeOfModal === 2) {
+      setOpenModal({
+        message:
+          data.status === 2
+            ? "Suspending Transaction..."
+            : "Resuming Transaction",
         trxState: TrxState.WaitingForConfirmation,
-      })
+      });
 
-        const result = await fetch(`${URL}/auto/update/${data.id}/${data._id}`, {
+      const result = await fetch(`${URL}/auto/update/${data.id}/${data._id}`, {
         mode: "cors",
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "same-origin", // include, *same-origin, omit
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
           // 'Content-Type': 'application/x-www-form-urlencoded',
         },
         method: "PUT",
-        body: data.status === 2 ? JSON.stringify({ status: 3 }) : JSON.stringify({ status: 2 })
-      })
-      const res = await result.json()
+        body:
+          data.status === 2
+            ? JSON.stringify({ status: 3 })
+            : JSON.stringify({ status: 2 }),
+      });
+      const res = await result.json();
       if (res === "success") {
         dispatch(
           setOpenModal({
@@ -158,138 +176,133 @@ const History = () => {
           })
         );
       }
+    }
 
-      }
-
-     
+    setShowModal(false);
 
-    setShowModal(false)
-    
-    dispatch(refreshTransactionTab({ refresh:Math.random() }))
-  }
-  const confirmDeletion = async (data: DataType,value:number,type:string) => {
-    setData(data)
-    setTypeOfModal(value)
-    setType(type)
-    setShowModal(true)
-  }
+    dispatch(refreshTransactionTab({ refresh: Math.random() }));
+  };
+  const confirmDeletion = async (
+    data: DataType,
+    value: number,
+    type: string
+  ) => {
+    setData(data);
+    setTypeOfModal(value);
+    setType(type);
+    setShowModal(true);
+  };
 
   return (
     <Flex
       border="1px"
       borderColor={borderColor}
       borderRadius="6px"
-      display={sideBarRemoved ? "none":"block"}
+      display={sideBarRemoved ? "none" : "block"}
       alignItems="center"
-
     >
       <Box w="100%" pl={3} my={4} pr={3}>
         <Flex alignItems="center" justifyContent="space-between" px={1}>
           <Flex>
-          {locationData!=="swap" && !locationData.includes("freeswap") &&   <Text
+            {locationData !== "swap" && !locationData.includes("freeswap") && (
+              <Text
+                fontWeight="400"
+                mr={3}
+                fontSize="16px"
+                className="History"
+                color={
+                  !showMarketHistory && !show
+                    ? activeTabColor
+                    : nonActiveTabColor
+                }
+                cursor="pointer"
+                onClick={() => {
+                  setShowMarketHistory(false);
+                  setShow(false);
+                  setShowOrder(true);
+                }}
+              >
+                Open Orders
+              </Text>
+            )}
+            <Text
               fontWeight="400"
               mr={3}
               fontSize="16px"
-              className='History'
-              color={!showMarketHistory && !show ? activeTabColor : nonActiveTabColor}
+              className="History"
+              color={
+                !showMarketHistory && !showOrder
+                  ? activeTabColor
+                  : nonActiveTabColor
+              }
               cursor="pointer"
+              position="relative"
               onClick={() => {
+                GMarketHistoryTab();
                 setShowMarketHistory(false);
-                setShow(false);
-                setShowOrder(true)
+                setShowOrder(false);
+                setShow(true);
               }}
             >
-              Open Orders
+              {locationData === "swap" || locationData.includes("freeswap")
+                ? "Transaction History"
+                : "Orders"}
             </Text>
-}
             <Text
               fontWeight="400"
-              mr={3}
-              fontSize="16px"
-              className='History'
-              color={!showMarketHistory && !showOrder ? activeTabColor : nonActiveTabColor}
               cursor="pointer"
-              position='relative'
+              fontSize="16px"
+              color={showMarketHistory ? activeTabColor : nonActiveTabColor}
               onClick={() => {
-                GMarketHistoryTab()
-                setShowMarketHistory(false);
+                GMarketHistoryTab();
+                setShowMarketHistory(true);
                 setShowOrder(false);
-                setShow(true)
-                
+                setShow(false);
               }}
             >
-              {locationData==="swap" || locationData.includes("freeswap") ?"Transaction History" : "Orders"} 
-              {/* {locationData ==="swap" && autoTimeNotification>0 ? <Flex background={nonActiveTabColor}
-              width="20px" 
-              height="20px" 
-              borderRadius="50%" 
-              justifyContent="center" 
-              alignItems="center" 
-              position="absolute" 
-              top="-9px"
-              right="0px"
-              fontSize="12px">{autoTimeNotification}
-                </Flex> : locationData ==="price" && setPriceNotification>0 && <Flex background={nonActiveTabColor}
-              width="20px" 
-              height="20px" 
-              borderRadius="50%" 
-              justifyContent="center" 
-              alignItems="center" 
-              position="absolute" 
-              top="-9px"
-              right="0px"
-              fontSize="12px">{setPriceNotification}
-                </Flex>
-              } */}
-            </Text>
-            <Text fontWeight="400" cursor="pointer" fontSize="16px" color={showMarketHistory ? activeTabColor : nonActiveTabColor} onClick={() => {
-              GMarketHistoryTab()
-              setShowMarketHistory(true);
-              setShowOrder(false);
-              setShow(false)
-            }}>
               Market History
             </Text>
           </Flex>
           <Flex alignItems="center" fontWeight="bold" rounded={100} bg="#">
-            {open ? (<Flex
-              border="2px"
-              alignItems="center"
-              justifyContent="center"
-              mr={2}
-              color={iconColor}
-              borderColor={iconColor}
-              w="22px"
-              h="22px"
-              borderRadius="6px"
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              <RemoveIcon />
-
-            </Flex>) : (<Flex
-              border="2px"
-              alignItems="center"
-              justifyContent="center"
-              mr={2}
-              color={iconColor}
-              borderColor={iconColor}
-              w="22px"
-              h="22px"
-              borderRadius="6px"
-              onClick={() => {
-                setOpen(true);
-                GMarketHistoryTab()
-                setShow(true);
-                setShowMarketHistory(false);
-                setShowOrder(false);
-              }}
-            >
-              <AddIcon onClick={() => setOpen(true)} />
-
-
-            </Flex>)}
+            {open ? (
+              <Flex
+                border="2px"
+                alignItems="center"
+                justifyContent="center"
+                mr={2}
+                color={iconColor}
+                borderColor={iconColor}
+                w="22px"
+                h="22px"
+                borderRadius="6px"
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <RemoveIcon />
+              </Flex>
+            ) : (
+              <Flex
+                border="2px"
+                alignItems="center"
+                justifyContent="center"
+                mr={2}
+                color={iconColor}
+                borderColor={iconColor}
+                w="22px"
+                h="22px"
+                borderRadius="6px"
+                onClick={() => {
+                  setOpen(true);
+                  GMarketHistoryTab();
+                  setShow(true);
+                  setShowMarketHistory(false);
+                  setShowOrder(false);
+                }}
+              >
+                <AddIcon onClick={() => setOpen(true)} />
+              </Flex>
+            )}
             <Flex
               border="2px"
               alignItems="center"
@@ -302,52 +315,80 @@ const History = () => {
               cursor="pointer"
               onClick={() => {
                 dispatch(transactionTab({ removeSideTab: true }));
-                removeSideTab('history');
+                removeSideTab("history");
               }}
             >
               <CloseIcon />
             </Flex>
           </Flex>
         </Flex>
-
       </Box>
-     {!locationData.includes("freeswap") ? <Box
-        overflowY={'scroll'}
-        maxHeight={'80vh'}
-      >
-        <Flex justifyContent={'center'}>
-          {(open && loadMarketData )|| (open && loading )|| (open && loadOpenOrders) ?
-            (<Spinner my={3} size={'md'} />)
-          : <></>
-         }
-        </Flex>
-              {/* market history */}
-        {open && showMarketHistory && marketHistoryData && historyArray.map((data: DataType,index) =>{
-          return (
-          <MarketHistory key={index} data={data} />
-        )})}
-  {/* all orders of user */}
-        {open && show && historyData && userData.map((data: DataType, index) => (
-          <TransactionHistory key={index} data={data} deleteData={confirmDeletion} /> 
-        ))
-      }
-      {/* pending user order */}
-        {open && showOrder && openOrderData.length >0 ? openOrderArray.map((data: DataType, index) => (
-          <TransactionHistory key={index} data={data} deleteData={confirmDeletion} />
-        )): openOrderData.length===0 && showOrder && open &&
-        <Text pl={4} py={3}>No open order at the moment</Text>
-        }
-      </Box>:<>
-     {open && <Text ml="10px">coming soon...</Text>}
-      </>
-      }
+      {!locationData.includes("freeswap") ? (
+        <Box overflowY={"scroll"} maxHeight={"80vh"}>
+          <Flex justifyContent={"center"}>
+            {(open && loadMarketData) ||
+            (open && loading) ||
+            (open && loadOpenOrders) ? (
+              <Spinner my={3} size={"md"} />
+            ) : (
+              <></>
+            )}
+          </Flex>
+          {/* market history */}
+          {open &&
+            showMarketHistory &&
+            marketHistoryData &&
+            historyArray.map((data: DataType, index) => {
+              return <MarketHistory key={index} data={data} />;
+            })}
+          {/* all orders of user */}
+          {open &&
+            show &&
+            historyData &&
+            userData.map((data: DataType, index) => (
+              <TransactionHistory
+                key={index}
+                data={data}
+                deleteData={confirmDeletion}
+              />
+            ))}
+          {/* pending user order */}
+          {open && showOrder && openOrderData.length > 0
+            ? openOrderArray.map((data: DataType, index) => (
+                <TransactionHistory
+                  key={index}
+                  data={data}
+                  deleteData={confirmDeletion}
+                />
+              ))
+            : openOrderData.length === 0 &&
+              showOrder &&
+              open && (
+                <Text pl={4} py={3}>
+                  No open order at the moment
+                </Text>
+              )}
+        </Box>
+      ) : (
+        <>{open && <Text ml="10px">coming soon...</Text>}</>
+      )}
       <ConfirmationModal
         showModal={showModal}
         setShowModal={setShowModal}
         deleteDataFromDatabase={deleteDataFromDatabase}
-        text={`You are about to ${ data?.status===3 ? "resume" :  type==="delete" ? "delete" :"suspend" } an ${data?.name} transaction. ${data?.status===3 ?"This will continue running all transaction that was stopped." : "This will prevent future transaction from been auto enabled for you. Do you want to continue"}`}
+        text={`You are about to ${
+          data?.status === 3
+            ? "resume"
+            : type === "delete"
+            ? "delete"
+            : "suspend"
+        } an ${data?.name} transaction. ${
+          data?.status === 3
+            ? "This will continue running all transaction that was stopped."
+            : "This will prevent future transaction from been auto enabled for you. Do you want to continue"
+        }`}
       />
     </Flex>
   );
 };
-export default React.memo(History);
\ No newline at end of file
+export default React.memo(History);
diff --git a/src/pages/Swap/components/history/MarketHistory.tsx b/src/pages/Swap/components/history/MarketHistory.tsx
index 81b55d45..f47dfeec 100644
--- a/src/pages/Swap/components/history/MarketHistory.tsx
+++ b/src/pages/Swap/components/history/MarketHistory.tsx
@@ -1,65 +1,90 @@
-import { Flex,Grid, Text, Box,useColorModeValue, Tooltip, Link, Img } from '@chakra-ui/react'
-import React from 'react'
-import { ArrowRightIcon } from '../../../../theme/components/Icons';
-import {DataType} from "./TransactionHistory";
-import TokenIcon from '../../../../assets/Null-24.svg';
-import { ExplorerDataType, getExplorerLink } from '../../../../utils/getExplorerLink';
+import {
+  Flex,
+  Grid,
+  Text,
+  Box,
+  useColorModeValue,
+  Tooltip,
+  Link,
+  Img,
+} from "@chakra-ui/react";
+import React from "react";
+import { ArrowRightIcon } from "../../../../theme/components/Icons";
+import { DataType } from "./TransactionHistory";
+import TokenIcon from "../../../../assets/Null-24.svg";
+import {
+  ExplorerDataType,
+  getExplorerLink,
+} from "../../../../utils/getExplorerLink";
 
-const MarketHistory = ({data} : {data: DataType}) => {
-    const activeTabColor = useColorModeValue('#333333', '#F1F5F8');
-    const nonActiveTabColor = useColorModeValue('#CCCCCC', '#4A739B');
-    const borderColor = useColorModeValue('#DEE5ED', '#324D68');
-    const successColor = useColorModeValue('#22bb33', '#75f083');
+const MarketHistory = ({ data }: { data: DataType }) => {
+  const activeTabColor = useColorModeValue("#333333", "#F1F5F8");
+  const nonActiveTabColor = useColorModeValue("#CCCCCC", "#4A739B");
+  const borderColor = useColorModeValue("#DEE5ED", "#324D68");
+  const successColor = useColorModeValue("#22bb33", "#75f083");
 
-    return (
-        <Flex  >
-        <Box
-          width="100%"
-          m={4}
-          border_top="0"
-          justifyContent="space-between"
-          px={4}
-          py={4}
-          border="1px"
-          borderColor={borderColor}
-          borderRadius={'6px'}
-        >
-          <Flex justifyContent="space-between">
-            <Text
-              color={activeTabColor}
-              fontSize="14px"
-              lineHeight="0"
-              mt={3}
-              mb={2}
-            >
-              Operation
+  return (
+    <Flex>
+      <Box
+        width="100%"
+        m={4}
+        border_top="0"
+        justifyContent="space-between"
+        px={4}
+        py={4}
+        border="1px"
+        borderColor={borderColor}
+        borderRadius={"6px"}
+      >
+        <Flex justifyContent="space-between">
+          <Text
+            color={activeTabColor}
+            fontSize="14px"
+            lineHeight="0"
+            mt={3}
+            mb={2}
+          >
+            Operation
+          </Text>
+          <Box>
+            {data.market && (
+              <Img
+                src={`./images/${data.market}.png`}
+                width="30px"
+                height="30px"
+                alt="83883"
+                mr={2}
+              />
+            )}
+          </Box>
+        </Flex>
+
+        <Flex py={2}>
+          <Flex mr={4}>
+            <img
+              src={data.token1Icon || TokenIcon}
+              width={25}
+              height={25}
+              alt="l"
+            />
+            <Text fontSize="sm" color={activeTabColor} ml={2}>
+              {data.amountIn} <span>{data.token1.symbol}</span>
             </Text>
-            <Box>
-        {data.market &&<Img 
-           src={`./images/${data.market}.png`} 
-           width="30px" 
-           height="30px"
-           alt="83883" 
-           mr={2} />}
-        </Box>
           </Flex>
-            
-            <Flex py={2}>
-            <Flex mr={4}>
-              <img src={data.token1Icon || TokenIcon} width={25} height={25} alt="l" />
-              <Text fontSize="sm" color={activeTabColor} ml={2}>
-                {data.amountIn} <span>{data.token1.symbol}</span>
-              </Text>
-            </Flex>
-           <ArrowRightIcon/>
-            <Flex ml={4}>
-              <img src={data.token2Icon || TokenIcon} width={25} height={25} alt="l" />
-              <Text fontSize="sm" color={activeTabColor} ml={2}>
-                {data.amountOut} <span>{data.token2.symbol}</span>
-              </Text>
-            </Flex>
+          <ArrowRightIcon />
+          <Flex ml={4}>
+            <img
+              src={data.token2Icon || TokenIcon}
+              width={25}
+              height={25}
+              alt="l"
+            />
+            <Text fontSize="sm" color={activeTabColor} ml={2}>
+              {data.amountOut} <span>{data.token2.symbol}</span>
+            </Text>
           </Flex>
-          <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
+        </Flex>
+        <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
           <Box>
             <Text
               fontSize="12px"
@@ -74,7 +99,7 @@ const MarketHistory = ({data} : {data: DataType}) => {
             </Text>
           </Box>
           <Box>
-            {data.name === "Set Price" ?
+            {data.name === "Auto Limit" ? (
               <>
                 <Tooltip label={`current ${data.token2.symbol} output`}>
                   <Text
@@ -88,11 +113,18 @@ const MarketHistory = ({data} : {data: DataType}) => {
                   </Text>
                 </Tooltip>
                 <Tooltip label={data.currentToPrice}>
-                <Text color={activeTabColor} fontSize="14px" fontWeight="regular" cursor="pointer">
-                  {data.currentToPrice && parseFloat(data.currentToPrice).toFixed(2)}
-                </Text>
+                  <Text
+                    color={activeTabColor}
+                    fontSize="14px"
+                    fontWeight="regular"
+                    cursor="pointer"
+                  >
+                    {data.currentToPrice &&
+                      parseFloat(data.currentToPrice).toFixed(2)}
+                  </Text>
                 </Tooltip>
-              </> :
+              </>
+            ) : (
               <>
                 <Tooltip label="If Price(Above)">
                   <Text
@@ -106,12 +138,15 @@ const MarketHistory = ({data} : {data: DataType}) => {
                   </Text>
                 </Tooltip>
 
-                <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
+                <Text
+                  color={activeTabColor}
+                  fontSize="14px"
+                  fontWeight="regular"
+                >
                   {data.currentToPrice}%
                 </Text>
               </>
-            }
-
+            )}
           </Box>
           <Box>
             <Text
@@ -123,55 +158,64 @@ const MarketHistory = ({data} : {data: DataType}) => {
               Interval
             </Text>
             <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
-              {data.frequency && (data.frequency === "5" || data.frequency === "30") ? `${data.frequency} minutes` : data.frequency}
+              {data.frequency &&
+              (data.frequency === "5" || data.frequency === "30")
+                ? `${data.frequency} minutes`
+                : data.frequency}
             </Text>
           </Box>
         </Grid>
-            
-          <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
-              <Box>
-                <Text
-                  fontSize="12px"
-                  lineHeight="0"
-                  color={nonActiveTabColor}
-                  mb="8px"
-                >
-                  Time
-                </Text>
-                <Text    color={activeTabColor} fontSize="14px" fontWeight="regular">
-                {data.time ? data.time :"-"}
-                </Text>
-              </Box>
-              <Box>
-                <Text
-                  color={nonActiveTabColor}
-                  fontSize="12px"
-                  lineHeight="0"
-                  mb="8px"
-                >
-                Status
-                </Text>
-                <Text    color={successColor} fontSize="14px" fontWeight="regular">
-                Completed
-                </Text>
-              </Box>
-              
-            </Grid>
-            {data?.chainID && data.transactionHash &&
-            <Flex justifyContent="right">
-                  <Box cursor="pointer">
-                  <Link href={getExplorerLink(parseInt(data?.chainID), data.transactionHash, ExplorerDataType.TRANSACTION)} target="_blank" isExternal textDecoration="underline" fontSize="13px">
-                    View Transaction
-                    </Link>
-                  </Box>
-            </Flex>
-        }
-        
-          
+
+        <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
+          <Box>
+            <Text
+              fontSize="12px"
+              lineHeight="0"
+              color={nonActiveTabColor}
+              mb="8px"
+            >
+              Time
+            </Text>
+            <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
+              {data.time ? data.time : "-"}
+            </Text>
           </Box>
-          
-        </Flex>
-    )
+          <Box>
+            <Text
+              color={nonActiveTabColor}
+              fontSize="12px"
+              lineHeight="0"
+              mb="8px"
+            >
+              Status
+            </Text>
+            <Text color={successColor} fontSize="14px" fontWeight="regular">
+              Completed
+            </Text>
+          </Box>
+        </Grid>
+        {data?.chainID && data.transactionHash && (
+          <Flex justifyContent="right">
+            <Box cursor="pointer">
+              <Link
+                href={getExplorerLink(
+                  parseInt(data?.chainID),
+                  data.transactionHash,
+                  ExplorerDataType.TRANSACTION
+                )}
+                target="_blank"
+                isExternal
+                textDecoration="underline"
+                fontSize="13px"
+              >
+                View Transaction
+              </Link>
+            </Box>
+          </Flex>
+        )}
+      </Box>
+    </Flex>
+  );
 };
 
-export default MarketHistory
+export default MarketHistory;
diff --git a/src/pages/Swap/components/history/TransactionHistory.tsx b/src/pages/Swap/components/history/TransactionHistory.tsx
index 529e4bfc..9a2fb4da 100644
--- a/src/pages/Swap/components/history/TransactionHistory.tsx
+++ b/src/pages/Swap/components/history/TransactionHistory.tsx
@@ -1,51 +1,70 @@
-import { Flex, Grid, Text, Box, useColorModeValue, Button, Tooltip,Link, Img } from '@chakra-ui/react';
-import React from 'react';
-import { ArrowRightIcon } from '../../../../theme/components/Icons';
-import TokenIcon from '../../../../assets/Null-24.svg';
-import { ExplorerDataType, getExplorerLink } from '../../../../utils/getExplorerLink';
+import {
+  Flex,
+  Grid,
+  Text,
+  Box,
+  useColorModeValue,
+  Button,
+  Tooltip,
+  Link,
+  Img,
+} from "@chakra-ui/react";
+import React from "react";
+import { ArrowRightIcon } from "../../../../theme/components/Icons";
+import TokenIcon from "../../../../assets/Null-24.svg";
+import {
+  ExplorerDataType,
+  getExplorerLink,
+} from "../../../../utils/getExplorerLink";
 export interface TokenDetails {
-  name: string,
-  symbol: string,
-  address: string,
-  decimals: number
+  name: string;
+  symbol: string;
+  address: string;
+  decimals: number;
 }
 
 export interface DataType {
-  token1Icon: string,
-  token2Icon: string,
-  token1: TokenDetails,
-  token2: TokenDetails,
-  amountIn: string,
-  amountOut: string,
-  time: string,
-  name: string,
-  frequency: string,
-  id: string,
-  _id?: string,
-  transactionHash: string,
-  error: [String],
-  status: number | string,
-  currentToPrice?: string,
-  chainID: string,
-  initialFromPrice?:string,
-  initialToPrice?:string,
-  rate?:string,
-  situation?:string,
-  pathSymbol?:string,
-  market:string
-  orderID:string
+  token1Icon: string;
+  token2Icon: string;
+  token1: TokenDetails;
+  token2: TokenDetails;
+  amountIn: string;
+  amountOut: string;
+  time: string;
+  name: string;
+  frequency: string;
+  id: string;
+  _id?: string;
+  transactionHash: string;
+  error: [String];
+  status: number | string;
+  currentToPrice?: string;
+  chainID: string;
+  initialFromPrice?: string;
+  initialToPrice?: string;
+  rate?: string;
+  situation?: string;
+  pathSymbol?: string;
+  market: string;
+  orderID: string;
 }
 
-const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData: (data: DataType,value:number,type:string)=>void }) => {
-  console.log(data.market.toLowerCase() ==="lydia" &&{data})
-  const activeTabColor = useColorModeValue('#333333', '#F1F5F8');
-  const nonActiveTabColor = useColorModeValue('#666666', '#4A739B');
-  const borderColor = useColorModeValue('#DEE5ED', '#324D68');
-  const pendingColor = useColorModeValue('#c8d41b', '#c8d41b');
-  const successColor = useColorModeValue('#22bb33', '#22bb33');
-  const failedColor = useColorModeValue('#FF4243', "#FF4243");
+const TransactionHistory = ({
+  data,
+  deleteData,
+}: {
+  data: DataType;
+  deleteData: (data: DataType, value: number, type: string) => void;
+}) => {
+  console.log(data.market.toLowerCase() === "lydia" && { data });
+  const activeTabColor = useColorModeValue("#333333", "#F1F5F8");
+  const nonActiveTabColor = useColorModeValue("#666666", "#4A739B");
+  const borderColor = useColorModeValue("#DEE5ED", "#324D68");
+  const pendingColor = useColorModeValue("#c8d41b", "#c8d41b");
+  const successColor = useColorModeValue("#22bb33", "#22bb33");
+  const failedColor = useColorModeValue("#FF4243", "#FF4243");
   return (
-    <Flex  >
+    <Flex>
       <Box
         width="100%"
         m={4}
@@ -55,45 +74,57 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
         py={4}
         border="1px"
         borderColor={borderColor}
-        borderRadius={'6px'}
+        borderRadius={"6px"}
       >
         <Flex justifyContent="space-between">
-           <Text
-          color={activeTabColor}
-          fontSize="14px"
-          lineHeight="0"
-          mt={3}
-          mb={2}
-        >
-          Operation
-        </Text>
-        <Box>
-        {data.market &&<Img 
-           src={`./images/${data.market}.png`} 
-           width="30px" 
-           height="30px"
-           alt="83883" 
-           mr={2} />}
-        </Box>
+          <Text
+            color={activeTabColor}
+            fontSize="14px"
+            lineHeight="0"
+            mt={3}
+            mb={2}
+          >
+            Operation
+          </Text>
+          <Box>
+            {data.market && (
+              <Img
+                src={`./images/${data.market}.png`}
+                width="30px"
+                height="30px"
+                alt="83883"
+                mr={2}
+              />
+            )}
+          </Box>
         </Flex>
-       
+
         <Flex py={2}>
           <Flex mr={4}>
-            <img src={data.token1Icon || TokenIcon} width={25} height={25} alt="l" />
+            <img
+              src={data.token1Icon || TokenIcon}
+              width={25}
+              height={25}
+              alt="l"
+            />
             <Text fontSize="sm" color={activeTabColor} ml={2}>
               {data.amountIn} <span>{data.token1.symbol}</span>
             </Text>
           </Flex>
           <ArrowRightIcon />
           <Flex ml={4}>
-            <img src={data.token2Icon || TokenIcon} width={25} height={25} alt="l" />
+            <img
+              src={data.token2Icon || TokenIcon}
+              width={25}
+              height={25}
+              alt="l"
+            />
             <Text fontSize="sm" color={activeTabColor} ml={2}>
-            {data.amountOut} <span>{data.token2.symbol}</span>
+              {data.amountOut} <span>{data.token2.symbol}</span>
             </Text>
           </Flex>
         </Flex>
 
-
         <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
           <Box>
             <Text
@@ -109,7 +140,7 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
             </Text>
           </Box>
           <Box>
-            {data.name === "Set Price" ?
+            {data.name === "Auto Limit" ? (
               <>
                 <Tooltip label={`current ${data.token2.symbol} output`}>
                   <Text
@@ -123,59 +154,78 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
                   </Text>
                 </Tooltip>
                 <Tooltip label={data.currentToPrice}>
-                <Text color={activeTabColor} fontSize="14px" fontWeight="regular" cursor="pointer">
-                  {data.currentToPrice && parseFloat(data.currentToPrice).toFixed(2)}
-                </Text>
-                </Tooltip>
-              </> : data.name==="Auto Time" &&
-              <>
-                <Tooltip label="If Price(Above)">
                   <Text
-                    color={nonActiveTabColor}
-                    fontSize="12px"
-                    lineHeight="0"
-                    mb="8px"
+                    color={activeTabColor}
+                    fontSize="14px"
+                    fontWeight="regular"
                     cursor="pointer"
                   >
-                    IPA
+                    {data.currentToPrice &&
+                      parseFloat(data.currentToPrice).toFixed(2)}
                   </Text>
                 </Tooltip>
-
-                <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
-                  {data.currentToPrice}%({data.situation})
-                </Text>
               </>
-            }
+            ) : (
+              data.name === "Auto Time" && (
+                <>
+                  <Tooltip label="If Price(Above)">
+                    <Text
+                      color={nonActiveTabColor}
+                      fontSize="12px"
+                      lineHeight="0"
+                      mb="8px"
+                      cursor="pointer"
+                    >
+                      IPA
+                    </Text>
+                  </Tooltip>
 
+                  <Text
+                    color={activeTabColor}
+                    fontSize="14px"
+                    fontWeight="regular"
+                  >
+                    {data.currentToPrice}%({data.situation})
+                  </Text>
+                </>
+              )
+            )}
           </Box>
-         {data.frequency && data.frequency!=="price" ? <Box>
-            <Text
-              color={nonActiveTabColor}
-              fontSize="12px"
-              lineHeight="0"
-              mb="8px"
-            >
-              Interval
-            </Text>
-            <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
-              {data.frequency && (data.frequency === "5" || data.frequency === "30") ? `${data.frequency} minutes` : data.frequency}
-            </Text>
-          </Box> : <Box>
-          <Tooltip label="Execution price">
-            <Text
-              color={nonActiveTabColor}
-              fontSize="12px"
-              lineHeight="0"
-              mb="8px"
-            >
-              
-              E / Price...
-            </Text>
-            </Tooltip>
-            <Text color={activeTabColor} fontSize="11px" fontWeight="regular">
-              {data.initialFromPrice} {data.token1.symbol} &#8594; {data.initialToPrice} {data.token2.symbol}
-            </Text>
-          </Box>} 
+          {data.frequency && data.frequency !== "price" ? (
+            <Box>
+              <Text
+                color={nonActiveTabColor}
+                fontSize="12px"
+                lineHeight="0"
+                mb="8px"
+              >
+                Interval
+              </Text>
+              <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
+                {data.frequency &&
+                (data.frequency === "5" || data.frequency === "30")
+                  ? `${data.frequency} minutes`
+                  : data.frequency}
+              </Text>
+            </Box>
+          ) : (
+            <Box>
+              <Tooltip label="Execution price">
+                <Text
+                  color={nonActiveTabColor}
+                  fontSize="12px"
+                  lineHeight="0"
+                  mb="8px"
+                >
+                  E / Price...
+                </Text>
+              </Tooltip>
+              <Text color={activeTabColor} fontSize="11px" fontWeight="regular">
+                {data.initialFromPrice} {data.token1.symbol} &#8594;{" "}
+                {data.initialToPrice} {data.token2.symbol}
+              </Text>
+            </Box>
+          )}
         </Grid>
 
         <Grid templateColumns="repeat(3, 2fr)" gap={7} py={2}>
@@ -189,42 +239,53 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
               Time
             </Text>
             <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
-              {data.time ? data.time :"-"}
+              {data.time ? data.time : "-"}
             </Text>
           </Box>
-         {(data.status <= 3) && <Box>
-           <Box mb="15px">
-<Text
-              fontSize="12px"
-              lineHeight="0"
-              color={nonActiveTabColor}
-              mb="8px"
-            >
-              Route
-            </Text>
-            
-            <Text color={activeTabColor} fontSize="13px" fontWeight="regular">
-              {data.pathSymbol}
-            </Text>
-           </Box>
-           <Box>
-            {data.status===2 &&  <Tooltip label="Number of transaction completed">
-<Text
-              fontSize="12px"
-              lineHeight="0"
-              color={nonActiveTabColor}
-              mb="8px"
-            >
-              Number
-            </Text>
-           </Tooltip>}
-            
-            <Text color={activeTabColor} fontSize="14px" fontWeight="regular">
-              {data.rate}
-            </Text>
-           </Box>
-          
-          </Box>}
+          {data.status <= 3 && (
+            <Box>
+              <Box mb="15px">
+                <Text
+                  fontSize="12px"
+                  lineHeight="0"
+                  color={nonActiveTabColor}
+                  mb="8px"
+                >
+                  Route
+                </Text>
+
+                <Text
+                  color={activeTabColor}
+                  fontSize="13px"
+                  fontWeight="regular"
+                >
+                  {data.pathSymbol}
+                </Text>
+              </Box>
+              <Box>
+                {data.status === 2 && (
+                  <Tooltip label="Number of transaction completed">
+                    <Text
+                      fontSize="12px"
+                      lineHeight="0"
+                      color={nonActiveTabColor}
+                      mb="8px"
+                    >
+                      Number
+                    </Text>
+                  </Tooltip>
+                )}
+
+                <Text
+                  color={activeTabColor}
+                  fontSize="14px"
+                  fontWeight="regular"
+                >
+                  {data.rate}
+                </Text>
+              </Box>
+            </Box>
+          )}
           <Box>
             <Text
               color={nonActiveTabColor}
@@ -234,26 +295,49 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
             >
               Status
             </Text>
-            <Text color={data.status === 0 ? failedColor : (data.status === 2 || data.status===3) ? pendingColor : successColor} fontSize="14px" fontWeight="regular">
+            <Text
+              color={
+                data.status === 0
+                  ? failedColor
+                  : data.status === 2 || data.status === 3
+                  ? pendingColor
+                  : successColor
+              }
+              fontSize="14px"
+              fontWeight="regular"
+            >
               {/* Completed */}
-              {data.status === 1 || data.status === "10" ? "Completed" : data.status === 0 ? "Failed" : data.status === 2 ? "Pending" : data.status === 3 ? "Suspended" : ""}
+              {data.status === 1 || data.status === "10"
+                ? "Completed"
+                : data.status === 0
+                ? "Failed"
+                : data.status === 2
+                ? "Pending"
+                : data.status === 3
+                ? "Suspended"
+                : ""}
             </Text>
-            {(data.name === "Auto Time" || data.name==="Set Price") && data.id && (data.status ===2 || data.status ===3) ? <Button
-              border={`1px solid ${data.status===2 ?pendingColor : successColor}`}
-              border-radius="6px" backgroundColor="transparent" 
-              mt="2" 
-              onClick={() => deleteData(data,2,"pause")} 
+            {(data.name === "Auto Time" || data.name === "Auto Limit") &&
+            data.id &&
+            (data.status === 2 || data.status === 3) ? (
+              <Button
+                border={`1px solid ${
+                  data.status === 2 ? pendingColor : successColor
+                }`}
+                border-radius="6px"
+                backgroundColor="transparent"
+                mt="2"
+                onClick={() => deleteData(data, 2, "pause")}
               >
-              {data.status===2 ? "Pause" : "Resume"}
-            </Button> : <></>}
-
-            
-
+                {data.status === 2 ? "Pause" : "Resume"}
+              </Button>
+            ) : (
+              <></>
+            )}
           </Box>
-         
-                 <Box>
-         
-            {data.error.length > 0 &&
+
+          <Box>
+            {data.error.length > 0 && (
               <>
                 <Text
                   color={nonActiveTabColor}
@@ -263,37 +347,55 @@ const TransactionHistory = ({ data, deleteData }: { data: DataType, deleteData:
                 >
                   Error
                 </Text>
-                <Text color={data.error.length > 0 ? failedColor : successColor} fontSize="14px" fontWeight="regular">
+                <Text
+                  color={data.error.length > 0 ? failedColor : successColor}
+                  fontSize="14px"
+                  fontWeight="regular"
+                >
                   {data.error[0]}
                 </Text>
               </>
-           }
-
+            )}
           </Box>
-          
         </Grid>
-        { data.transactionHash && data.chainID ?
-            <Flex justifyContent="right">
-              
-                  <Box cursor="pointer">
-                  <Link href={getExplorerLink(parseInt(data.chainID), data.transactionHash, ExplorerDataType.TRANSACTION)} target="_blank" isExternal textDecoration="underline" fontSize="13px">
-                    View Transaction
-                    </Link>
-                  </Box>
-            </Flex> : (data.status===2 || data.status===3) &&  
+        {data.transactionHash && data.chainID ? (
+          <Flex justifyContent="right">
+            <Box cursor="pointer">
+              <Link
+                href={getExplorerLink(
+                  parseInt(data.chainID),
+                  data.transactionHash,
+                  ExplorerDataType.TRANSACTION
+                )}
+                target="_blank"
+                isExternal
+                textDecoration="underline"
+                fontSize="13px"
+              >
+                View Transaction
+              </Link>
+            </Box>
+          </Flex>
+        ) : (
+          (data.status === 2 || data.status === 3) && (
             <Flex justifyContent="right">
               <Box>
-             <Text fontSize="14px" textDecoration="underline" cursor="pointer" color="red.300" onClick={() => deleteData(data,1,"delete")}>
-              Delete
-            </Text>
-          </Box>
+                <Text
+                  fontSize="14px"
+                  textDecoration="underline"
+                  cursor="pointer"
+                  color="red.300"
+                  onClick={() => deleteData(data, 1, "delete")}
+                >
+                  Delete
+                </Text>
+              </Box>
             </Flex>
-            
-        }
-        
+          )
+        )}
       </Box>
     </Flex>
-  )
+  );
 };
 
-export default TransactionHistory
+export default TransactionHistory;
diff --git a/src/pages/Swap/components/sendToken/index.tsx b/src/pages/Swap/components/sendToken/index.tsx
index 0784873d..165eae88 100644
--- a/src/pages/Swap/components/sendToken/index.tsx
+++ b/src/pages/Swap/components/sendToken/index.tsx
@@ -11,7 +11,7 @@ import {
   useSwapActionHandlers,
   useSwapState,
 } from "../../../../state/swap/hooks";
-import { useCurrency } from "../../../../hooks/Tokens";
+import { useCurrency, useToken } from "../../../../hooks/Tokens";
 import ConfirmModal from "../../modals/confirmModal";
 import { Field } from "../../../../state/swap/actions";
 import { maxAmountSpend } from "../../../../utils/maxAmountSpend";
@@ -61,6 +61,7 @@ import {
   GFailedTransaction,
   GSuccessfullyTransaction,
 } from "../../../../components/G-analytics/gIndex";
+import { useLocation } from "react-router-dom";
 
 export const calculateGas = async (
   percentage: number,
@@ -89,7 +90,10 @@ export const calculateGas = async (
         : GasPrice
     )
     .quotient.toString();
-    console.log({baseFeeThirtyPercent,percentage},new Percent(percentage.toString(), "100"))
+  console.log(
+    { baseFeeThirtyPercent, percentage },
+    new Percent(percentage.toString(), "100")
+  );
 
   const addPriorityFee = JSBI.add(
     JSBI.BigInt(maxPriorityPerGasFormatted),
@@ -109,20 +113,21 @@ export const calculateGas = async (
   const format1 = ethers.utils.formatUnits(addPriorityFee.toString(), 9);
   const format2 = ethers.utils.formatUnits(maxFee.toString(), 9);
   const format3 = ethers.utils.formatUnits(addGasFee.toString(), 9);
-  console.log({format1, format2, format3})
+  console.log({ format1, format2, format3 });
   return { format1, format2, format3 };
 };
 
 const SendToken = () => {
   const history = useHistory();
+  const location = useLocation();
   const loadedUrlParams = useDefaultsFromURLSearch();
   const dispatch = useDispatch();
-
   // token warning stuff
   const [loadedInputCurrency, loadedOutputCurrency] = [
     useCurrency(loadedUrlParams?.inputCurrencyId),
     useCurrency(loadedUrlParams?.outputCurrencyId),
   ];
+  console.log({ loadedUrlParams });
   const [dismissTokenWarning, setDismissTokenWarning] =
     useState<boolean>(false);
 
@@ -152,7 +157,8 @@ const SendToken = () => {
 
   const handleDismissTokenWarning = useCallback(() => {
     setDismissTokenWarning(true);
-    history.push("/swap");
+    console.log("reset is here");
+    // history.push("/swap");
   }, [history]);
 
   const borderColor = useColorModeValue("#DEE5ED", "#324D68");
@@ -164,6 +170,12 @@ const SendToken = () => {
   const [showModal, setShowModal] = useState(false);
   const [currentToPrice, setCurrentToPrice] = useState("");
   const [showNewChangesText, setShowNewChangesText] = useState(false);
+  function useQuery() {
+    return new URLSearchParams(location.search);
+  }
+  let query = useQuery();
+  const outputCurrency = query.get("inputCurrencyId");
+  const inputCurrency = query.get("outputCurrencyId");
 
   const { onCurrencySelection, onUserInput, onSwitchTokens } =
     useSwapActionHandlers();
@@ -298,6 +310,13 @@ const SendToken = () => {
     }
   }, [balance, formattedAmounts[Field.INPUT]]);
 
+  useEffect(() => {
+    if (inputCurrency) {
+      console.log({ inputCurrency });
+      onCurrencySelection(Field.INPUT, inputCurrency);
+    }
+  }, [inputCurrency, outputCurrency]);
+
   const checkApproval = async () => {
     if (currencies[Field.INPUT]?.isNative) {
       return setHasBeenApproved(true);
@@ -391,7 +410,7 @@ const SendToken = () => {
           })
         );
       }
-    } catch (e:any) {
+    } catch (e: any) {
       GFailedTransaction(
         "straight_swap",
         "approval",
@@ -478,11 +497,11 @@ const SendToken = () => {
               : ethers.utils.parseUnits(format3, 9).toString(),
         }
       );
-      console.log({sendTransaction})
+      console.log({ sendTransaction });
       const { confirmations, events } = await sendTransaction.wait(3);
 
       const { hash } = sendTransaction;
-      console.log({confirmations,events,hash})
+      console.log({ confirmations, events, hash });
       const outputAmount = await getOutPutDataFromEvent(
         to,
         events,
@@ -557,7 +576,11 @@ const SendToken = () => {
         chainId as number
       );
       console.log({ format1, format2, format3 });
-      console.log(ethers.utils.parseUnits(format1, 9).toString(),ethers.utils.parseUnits(format2, 9).toString(),ethers.utils.parseUnits(format3, 9).toString())
+      console.log(
+        ethers.utils.parseUnits(format1, 9).toString(),
+        ethers.utils.parseUnits(format2, 9).toString(),
+        ethers.utils.parseUnits(format3, 9).toString()
+      );
 
       const isEIP1559 = await library?.getFeeData();
       const sendTransaction = await route.swapETHForExactTokens(
@@ -684,7 +707,7 @@ const SendToken = () => {
 
       // const format1 = ethers.utils.formatUnits(addPriorityFee.toString(), 9);
       // const format2 = ethers.utils.formatUnits(maxFee.toString(), 9);
-        console.log({pathArray})
+      console.log({ pathArray });
 
       const { format1, format2, format3 } = await calculateGas(
         userGasPricePercentage,
@@ -765,7 +788,7 @@ const SendToken = () => {
         );
         onUserInput(Field.INPUT, "");
       }
-    } catch (e:any) {
+    } catch (e: any) {
       console.log(e?.message);
       GFailedTransaction(
         "straight_swap",
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 8e4d6a3f..6ab101da 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,592 +1,827 @@
 /** @format */
 
-import { Box, Flex } from '@chakra-ui/layout';
-import { Text,Img } from '@chakra-ui/react';
-import React, { useEffect, useState } from 'react';
-import DarkLogo from '../../assets/logo/LogoRGPImage.svg';
+import { Box, Flex } from "@chakra-ui/layout";
+import { Text, Img } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import DarkLogo from "../../assets/logo/LogoRGPImage.svg";
 // import DarkLogo from '../../assets/logo/ChristmasRigelLogo.svg';
-import External from '../../assets/external.svg';
-import SmartSwap from '../../assets/smartswap-dark.svg';
-import Swap from '../../assets/swap.svg';
-import Liquidity from '../../assets/liquidity.svg';
-import YieldFarm from '../../assets/yieldfarm.svg';
-import Speed from '../../assets/speed_2.gif';
-import Security from '../../assets/security_2.gif';
-import Fees from '../../assets/fees.gif';
-import Github from '../../assets/Vectorgithub.svg';
-import Linkedin from '../../assets/Vectorlinkedin.svg';
-import Twitter from '../../assets/Vectortwitter.svg';
-import Discord from '../../assets/Vectordiscord.svg';
-import Telegram from '../../assets/Vectortelegram.svg';
-import Medium from '../../assets/Vectormedium.svg';
-import Polygon from '../../assets/Platformpolygon.svg';
-import Close from '../../assets/closeSquare.svg';
-import Ethereum from '../../assets/Groupethereum.svg';
-import Oasis from '../../assets/Oasis.svg';
-import Binance from '../../assets/Groupbinance.svg';
-import { Link } from 'react-router-dom';
-import "./landingpage.css"
+import External from "../../assets/external.svg";
+import SmartSwap from "../../assets/smartswap-dark.svg";
+import Swap from "../../assets/swap.svg";
+import Liquidity from "../../assets/liquidity.svg";
+import YieldFarm from "../../assets/yieldfarm.svg";
+import Speed from "../../assets/speed_2.gif";
+import Security from "../../assets/security_2.gif";
+import Fees from "../../assets/fees.gif";
+import Github from "../../assets/Vectorgithub.svg";
+import Linkedin from "../../assets/Vectorlinkedin.svg";
+import Twitter from "../../assets/Vectortwitter.svg";
+import Discord from "../../assets/Vectordiscord.svg";
+import Telegram from "../../assets/Vectortelegram.svg";
+import Medium from "../../assets/Vectormedium.svg";
+import Polygon from "../../assets/Platformpolygon.svg";
+import Close from "../../assets/closeSquare.svg";
+import Ethereum from "../../assets/Groupethereum.svg";
+import Oasis from "../../assets/Oasis.svg";
+import Binance from "../../assets/Groupbinance.svg";
+import { Link } from "react-router-dom";
+import "./landingpage.css";
 
 const Index = () => {
-  const [minNav1,setMinNav1] = useState(false)
-  const [minNav2,setMinNav2] = useState(false)
-  const [minNav3,setMinNav3] = useState(false)
-  const [navBar,setNavBar] = useState(false)
+  const [minNav1, setMinNav1] = useState(false);
+  const [minNav2, setMinNav2] = useState(false);
+  const [minNav3, setMinNav3] = useState(false);
+  const [navBar, setNavBar] = useState(false);
 
   return (
-    <div style={{background:"#000C15"}} onClick={(e)=>{
-      if(e.target.className !=="subList" && e.target.className !=="downArrow" && e.target.className !=="list"){
-      setMinNav1(false)
-      setMinNav2(false)
-      setMinNav3(false)
-      }
-    }}>
-       <header className='mainHeader'>
+    <div
+      style={{ background: "#000C15" }}
+      onClick={(e) => {
+        if (
+          e.target.className !== "subList" &&
+          e.target.className !== "downArrow" &&
+          e.target.className !== "list"
+        ) {
+          setMinNav1(false);
+          setMinNav2(false);
+          setMinNav3(false);
+        }
+      }}
+    >
+      <header className="mainHeader">
         <div className="header">
-         <nav>
-          <div className="headerTop">
-           <div className="logo">
-            <a href="/">
-             {/* <img src="../" alt="logo" className="logo-img" />
-              */}
-               <Img src={DarkLogo} />
-            </a>
-           </div>
-     
-           <div className="menuToggle" onClick={()=>setNavBar(!navBar)}>
-             {
-             navBar ? <img src={Close} alt="" /> : <div className="barsText">
-             <div className="bars"></div>
-             <div className="bars"></div>
-             <div className="bars"></div>
-            </div>
-            }
-           
-           </div>
-          </div>
-     
-      <ul className="menu" style={{"right":navBar ? 0 : "100%"}}>
-          
-           <li className="multi_navbar" onClick={()=>{
-  setMinNav2(false)
-  setMinNav1(!minNav1) 
-           }}>
-            <div className="multi_navbar_flex">
-             <div className="multi_navbar_ul_div_heading"><a className='subList'>Company</a></div>
-             <div><i className="downArrow"></i></div>
-            </div>
-            {minNav1 &&  <ul className="multi_navbar_ul">
-             <div className="multi_navbar_ul_div">
-              <div>
-               <li className='list'>
-                <a href="https://rigelprotocol.com/about.html" target="_blank"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">About us</p>
-                  <div>
-                   <p>Learn more about rigelProtocol</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-                <a href="https://rigelprotocol.com/career.html" target="_blank"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Career</p>
-                  <div>
-                   <p>See Available positions</p>
-                  </div>
-                 </div>
+          <nav>
+            <div className="headerTop">
+              <div className="logo">
+                <a href="/">
+                  {/* <img src="../" alt="logo" className="logo-img" />
+                   */}
+                  <Img src={DarkLogo} />
                 </a>
-               </li>
-               <li className='list'>
-                <a
-                 href="https://rigelprotocol.com/press.html" target="_blank"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Press resources</p>
-                  <div>
-                   <p>  Press & media</p>
+              </div>
+
+              <div className="menuToggle" onClick={() => setNavBar(!navBar)}>
+                {navBar ? (
+                  <img src={Close} alt="" />
+                ) : (
+                  <div className="barsText">
+                    <div className="bars"></div>
+                    <div className="bars"></div>
+                    <div className="bars"></div>
                   </div>
-                 </div>
-                </a>
-               </li>
-            
+                )}
               </div>
-             </div>
-            </ul>}
-           
-           </li>
-           <li className="multi_navbar multi_navbar_2" onClick={()=>{
-setMinNav1(false)
-setMinNav2(!minNav2)
-           }}>
-            <div className="multi_navbar_flex">
-             <div className="multi_navbar_ul_div_heading"><a className='subList'>DApps</a></div>
-             <div><i className="downArrow"></i></div>
             </div>
-            {minNav2 && <ul className="multi_navbar_ul multi_navbar_ul_2">
-             <div className="multi_navbar_ul_div">
-              <div>
-               <li className='list'>
-                <a
-                 href="#"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">SmartSwap</p>
+
+            <ul className="menu" style={{ right: navBar ? 0 : "100%" }}>
+              <li
+                className="multi_navbar"
+                onClick={() => {
+                  setMinNav2(false);
+                  setMinNav1(!minNav1);
+                }}
+              >
+                <div className="multi_navbar_flex">
+                  <div className="multi_navbar_ul_div_heading">
+                    <a className="subList">Company</a>
+                  </div>
                   <div>
-                   <p>Swap tokens directly</p>
+                    <i className="downArrow"></i>
+                  </div>
+                </div>
+                {minNav1 && (
+                  <ul className="multi_navbar_ul">
+                    <div className="multi_navbar_ul_div">
+                      <div>
+                        <li className="list">
+                          <a
+                            href="https://rigelprotocol.com/about.html"
+                            target="_blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">About us</p>
+                              <div>
+                                <p>Learn more about rigelProtocol</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://rigelprotocol.com/career.html"
+                            target="_blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">Career</p>
+                              <div>
+                                <p>See Available positions</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://rigelprotocol.com/press.html"
+                            target="_blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">Press resources</p>
+                              <div>
+                                <p> Press & media</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                      </div>
+                    </div>
+                  </ul>
+                )}
+              </li>
+              <li
+                className="multi_navbar multi_navbar_2"
+                onClick={() => {
+                  setMinNav1(false);
+                  setMinNav2(!minNav2);
+                }}
+              >
+                <div className="multi_navbar_flex">
+                  <div className="multi_navbar_ul_div_heading">
+                    <a className="subList">DApps</a>
                   </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-                <a
-                 href="https://gift.rigelprotocol.com/"
-                 target="blank"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Gift Dapp</p>
                   <div>
-                   <p>Gifts token in a fun way.</p>
+                    <i className="downArrow"></i>
                   </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-               <a href="https://smartswap.rigelprotocol.com/#/autotrade" target="_blank">
-                {/* <a
+                </div>
+                {minNav2 && (
+                  <ul className="multi_navbar_ul multi_navbar_ul_2">
+                    <div className="multi_navbar_ul_div">
+                      <div>
+                        <li className="list">
+                          <a href="#">
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">SmartSwap</p>
+                              <div>
+                                <p>Swap tokens directly</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://giftdapp.rigelprotocol.com/"
+                            target="blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">Gift Dapp</p>
+                              <div>
+                                <p>Gifts token in a fun way.</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://smartswap.rigelprotocol.com/#/autotrade"
+                            target="_blank"
+                          >
+                            {/* <a
                 href="smartbid.html"
                 > */}
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">AutoTrade</p>
-                  <div>
-                   <p>Auto invests in any crypto of your choice</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-               <a href="https://smartswap.rigelprotocol.com/#/smartbid" target="_blank">
-                {/* <a
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">AutoTrade</p>
+                              <div>
+                                <p>Auto invests in any crypto of your choice</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://smartswap.rigelprotocol.com/#/smartbid"
+                            target="_blank"
+                          >
+                            {/* <a
                 href="smartbid.html"
                 > */}
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">SmartBid</p>
-                  <div>
-                   <p>Bid on tokens.</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-               <a  href="https://smartswap.rigelprotocol.com/#/Farm-v2" target="_blank">
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Farms</p>
-                  <div>
-                   <p>Stake Liquidity Pair Tokens from any pool.</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-                {/* <a
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">SmartBid</p>
+                              <div>
+                                <p>Bid on tokens.</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          <a
+                            href="https://smartswap.rigelprotocol.com/#/Farm-v2"
+                            target="_blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">Farms</p>
+                              <div>
+                                <p>
+                                  Stake Liquidity Pair Tokens from any pool.
+                                </p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                        <li className="list">
+                          {/* <a
                  href="launchpad.html"
                 > */}
-                   <a href="https://launchpad.rigelprotocol.com" target="_blank" >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">LaunchPad</p>
-                  <div>
-                   <p>Join Project hosted on rigelProtocol</p>
-                  </div>
-                 </div>
+                          <a
+                            href="https://launchpad.rigelprotocol.com"
+                            target="_blank"
+                          >
+                            <div className="multi_navbar_ul_div_item">
+                              <p className="multi_nav_head">LaunchPad</p>
+                              <div>
+                                <p>Join Project hosted on rigelProtocol</p>
+                              </div>
+                            </div>
+                          </a>
+                        </li>
+                      </div>
+                    </div>
+                  </ul>
+                )}
+              </li>
+              <li>
+                <a href="https://rigelprotocol.com/events.html">Events</a>
+              </li>
+              <li>
+                <a href="https://medium.com/rigelprotocol" target="_blank">
+                  <Flex>
+                    Blog <img src={External} style={{ marginLeft: "6px" }} />
+                  </Flex>
                 </a>
-               </li>
-            
-              </div>
-             </div>
-            </ul>}
-            
-           </li>
-           <li>
-            <a href="https://rigelprotocol.com/events.html">Events</a>
-           </li>
-           <li> 
-             <a href="https://medium.com/rigelprotocol" target="_blank">
-             <Flex>Blog <img src={External} style={{marginLeft:"6px"}} />
-             </Flex>
-               </a>
-           
-           </li>
-          {/* <div className="header__nav__button header__nav__bottom">
+              </li>
+              {/* <div className="header__nav__button header__nav__bottom">
             <button className="button">
               <span><a>Launch DApps</a></span>
               <i className="downArrow"></i>
             </button>
            </div>  */}
-          </ul>
-          <div className="header__nav__button__wrapper">
-           <div className="header__nav__button multi_navbar">
-            <button className="button " onClick={()=>{
-setMinNav1(false)
-setMinNav2(false)
-setMinNav3(!minNav3)
-           }}>
-              {/* <span><Link to="/swap">Launch DApps<i className="downArrow"></i></Link></span> */}
-              <div className="multi_navbar_ul_div_heading"><a className='subList'>Launch DApps</a></div>
-             <div style={{marginTop:"-5px"}}><i className="downArrow"></i></div>
-  {minNav3 && <ul className="multi_navbar_ul">
-             <div className="multi_navbar_ul_div">
-              <div>
-               <li className='list'>
-                <a
-                 href="#"
+            </ul>
+            <div className="header__nav__button__wrapper">
+              <div className="header__nav__button multi_navbar">
+                <button
+                  className="button "
+                  onClick={() => {
+                    setMinNav1(false);
+                    setMinNav2(false);
+                    setMinNav3(!minNav3);
+                  }}
                 >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">SmartSwap</p>
-                  <div>
-                   <p>Swap tokens directly</p>
+                  {/* <span><Link to="/swap">Launch DApps<i className="downArrow"></i></Link></span> */}
+                  <div className="multi_navbar_ul_div_heading">
+                    <a className="subList">Launch DApps</a>
                   </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-                <a
-                 href="https://gift.rigelprotocol.com/"
-                 target="blank"
-                >
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Gift Dapp</p>
-                  <div>
-                   <p>Gifts token in a fun way.</p>
+                  <div style={{ marginTop: "-5px" }}>
+                    <i className="downArrow"></i>
                   </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-               <a
-  data-toggle="tooltip"
-  data-placement="bottom"
-  title="coming soon"
-  href="#" style={{cursor:"not-allowed"}}>
-                {/* <a
+                  {minNav3 && (
+                    <ul className="multi_navbar_ul">
+                      <div className="multi_navbar_ul_div">
+                        <div>
+                          <li className="list">
+                            <a href="#">
+                              <div className="multi_navbar_ul_div_item">
+                                <p className="multi_nav_head">SmartSwap</p>
+                                <div>
+                                  <p>Swap tokens directly</p>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <li className="list">
+                            <a
+                              href="https://giftdapp.rigelprotocol.com/"
+                              target="blank"
+                            >
+                              <div className="multi_navbar_ul_div_item">
+                                <p className="multi_nav_head">Gift Dapp</p>
+                                <div>
+                                  <p>Gifts token in a fun way.</p>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <li className="list">
+                            <a
+                              data-toggle="tooltip"
+                              data-placement="bottom"
+                              title="coming soon"
+                              href="#"
+                              style={{ cursor: "not-allowed" }}
+                            >
+                              {/* <a
                 href="smartbid.html"
                 > */}
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">SmartBid</p>
-                  <div>
-                   <p>Bid on tokens.</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-               <a
-  data-toggle="tooltip"
-  data-placement="bottom"
-  title="coming soon"
-  href="#" style={{cursor:"not-allowed"}}>
-                {/* <a
+                              <div className="multi_navbar_ul_div_item">
+                                <p className="multi_nav_head">SmartBid</p>
+                                <div>
+                                  <p>Bid on tokens.</p>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <li className="list">
+                            <a
+                              data-toggle="tooltip"
+                              data-placement="bottom"
+                              title="coming soon"
+                              href="#"
+                              style={{ cursor: "not-allowed" }}
+                            >
+                              {/* <a
                 href="leverage-exchange.html"
                 > */}
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">Leverage Exchange</p>
-                  <div>
-                   <p>Trade using decentralized tokens.</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-               <li className='list'>
-                {/* <a
+                              <div className="multi_navbar_ul_div_item">
+                                <p className="multi_nav_head">
+                                  Leverage Exchange
+                                </p>
+                                <div>
+                                  <p>Trade using decentralized tokens.</p>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <li className="list">
+                            {/* <a
                  href="launchpad.html"
                 > */}
-                   <a
-  data-toggle="tooltip"
-  data-placement="bottom"
-  title="coming soon"
-  href="#" style={{cursor:"not-allowed"}}>
-                 <div className="multi_navbar_ul_div_item">
-                   <p className="multi_nav_head">LaunchPad</p>
-                  <div>
-                   <p>Join Project hosted on rigelProtocol</p>
-                  </div>
-                 </div>
-                </a>
-               </li>
-            
+                            <a
+                              data-toggle="tooltip"
+                              data-placement="bottom"
+                              title="coming soon"
+                              href="#"
+                              style={{ cursor: "not-allowed" }}
+                            >
+                              <div className="multi_navbar_ul_div_item">
+                                <p className="multi_nav_head">LaunchPad</p>
+                                <div>
+                                  <p>Join Project hosted on rigelProtocol</p>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                        </div>
+                      </div>
+                    </ul>
+                  )}
+                </button>
               </div>
-             </div>
-            </ul>}
-            
-            </button> 
-          
-           </div>
-          </div>
-         </nav>
+            </div>
+          </nav>
         </div>
-       </header>
-   <div className="wrapper">
-     <main>
+      </header>
+      <div className="wrapper">
+        <main>
+          <section className="section__1">
+            <div className="section__1__center">
+              <h1>a SMART way to Swap</h1>
+              <p>
+                Direct cross chain swapping without order books, deposits or
+                coin wrapping. High Yield Annual Interest for RGP token holders
+                and Liquidity Providers.
+              </p>
+              <Flex justifyContent="center">
+                <Link to="/swap">
+                  <button className="button">Launch DApp</button>
+                </Link>
+              </Flex>
+            </div>
+          </section>
 
-       
-       <section className="section__1">
-<div className="section__1__center">
-  <h1>a SMART way to Swap</h1>
-  <p>Direct cross chain swapping without order books, deposits or coin wrapping. High Yield Annual Interest for RGP token holders and Liquidity Providers.</p>
-  <Flex justifyContent="center">
-     <Link to="/swap">
- <button className="button">
-    Launch DApp
-  </button>
- </Link> 
-  </Flex>
+          <section className="section__2">
+            <Img src={SmartSwap} />
+          </section>
 
-</div>
-       </section>
+          <section className="section__3">
+            <div className="section__3__heading">
+              <h2>Swap.Liquidity.Farm</h2>
+              <p>
+                You have a wide range of functions to perfom with the SmartSwap,
+                either swapping out tokens, providing liquidity or yield Farm.
+              </p>
+            </div>
+            <div className="section__3__top">
+              <div>
+                <img src={Swap} alt="" />
+              </div>
+              <div className="section__3__text">
+                <h3>Swap</h3>
+                <p>
+                  To get leverage tokens to trade with, you need to have
+                  deposited a certain amount of tokens. So to get started, you
+                  go to the{" "}
+                  <Link
+                    to="/swap"
+                    style={{ color: "#9BD0FD", textDecoration: "underline" }}
+                  >
+                    SmartSwap Dapp
+                  </Link>{" "}
+                  and deposit tokens in the desired token you would like to
+                  trade with.
+                </p>
+                <div className="section__3__top__button">
+                  <Link to="/swap">
+                    <button className="button">
+                      Launch DApp <span>&#8594;</span>
+                    </button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="section__3__top">
+              <div className="section__3__text">
+                <h3>Liquidity</h3>
+                <p>
+                  After depositing your trading token, you can now select a pair
+                  with said token and then set your spillage and leverage
+                  settings. You get up to 100x leverage for the amount of your
+                  deposited tokens for you to trade with.
+                </p>
+                <div className="section__3__top__button">
+                  <Link to="/pool">
+                    <button className="button">
+                      Launch DApp <span>&#8594;</span>
+                    </button>
+                  </Link>
+                </div>
+              </div>
+              <div>
+                <img src={Liquidity} alt="" />
+              </div>
+            </div>
+            <div className="section__3__top">
+              <div>
+                <img src={YieldFarm} alt="" />
+              </div>
+              <div className="section__3__text">
+                <h3>Yield Farm</h3>
+                <p>
+                  When you trade with the leverage you earn more back. From your
+                  earning your leveraged tokens are automatically removed with
+                  interest and you get to keep more earnings.
+                </p>
+                <div className="section__3__top__button">
+                  <Link to="/Farm-V2">
+                    <button className="button">
+                      Launch DApp <span>&#8594;</span>
+                    </button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </section>
 
-       
-       <section className="section__2">
-         <Img src={SmartSwap} /> 
-       </section>
-        
-        <section className="section__3">
-          <div className="section__3__heading">
-    <h2>Swap.Liquidity.Farm</h2>
-          <p>You have a wide range of functions to perfom with the SmartSwap, either swapping out tokens, providing liquidity or yield Farm.</p>
-          </div>
-         <div className="section__3__top">
-          <div>
-            <img src={Swap} alt="" />
-                    </div>
-           <div className="section__3__text">
-             <h3>Swap</h3>
-             <p>To get leverage tokens to trade with, you need to have deposited a certain amount of tokens. So to get started, you go to the <Link to="/swap" style={{color:"#9BD0FD",textDecoration:"underline"}}>SmartSwap Dapp</Link>  and deposit tokens in the desired token you would like to trade with.</p>
-             <div className="section__3__top__button">
+          <section className="section__4">
+            <div className="section__4__container">
+              <div className="section__4__img__container">
+                <div>
+                  <img src={Ethereum} alt="Ethereum" />
+                </div>
+                <div>
+                  <img src={Binance} alt="Binance" />
+                </div>
+                <div>
+                  <img src={Polygon} alt="Polygon" />
+                </div>
+                <div>
+                  <img src={Oasis} alt="Oasis" />
+                </div>
+              </div>
+              <div className="section__4__text">
+                <h2>Built across multiple platforms</h2>
+                <p>
+                  Built on Ethereum, Binance SmartChain, & Polygon to give you
+                  the freedom to experience more inclusivity and an extra layer
+                  of security when using our platforms.
+                </p>
+              </div>
+            </div>
+            <div className="section__4__grid">
+              <div>
+                <div className="section__4__grid__img">
+                  <img src={Security} alt="security" width="60px" />
+                </div>
+                <Box mt="4">
+                  <h4>Extra layer of security</h4>
+                  <p>
+                    Easily exchange between your assets without giving control
+                    of your funds to anyone.
+                  </p>
+                </Box>
+              </div>
+              <div>
+                <div className="section__4__grid__img">
+                  <img src={Fees} alt="fees" width="60px" />
+                </div>
+                <Box mt="4">
+                  <h4>Low transaction fees</h4>
+                  <p>
+                    We offer you the best transaction experience with the lowest
+                    fees available.
+                  </p>
+                </Box>
+              </div>
+              <div>
+                <div className="section__4__grid__img">
+                  <img src={Speed} alt="speed" width="60px" />
+                </div>
+                <Box mt="4">
+                  <h4>Speed of light</h4>
+                  <p>
+                    Your transactions are processed at lightning-fast speed.
+                  </p>
+                </Box>
+              </div>
+            </div>
+          </section>
+          <section className="section__5">
+            <h4>SmartSwap BluePrints</h4>
+            <div className="section__5__link">
+              <div>
+                <h6>Swap</h6>
+                <p>
+                  <Link to="/swap">Swap</Link>
+                </p>
+                <p>
+                  <Link to="/autotrade">Auto Time</Link>
+                </p>
+                <p>
+                  <Link to="/set-price">Auto Limit</Link>
+                </p>
+              </div>
+              <div>
+                <h6>Liquidity</h6>
+                <p>
+                  <Link to="/add">Add Liquidity</Link>
+                </p>
+                <p>
+                  <Link to="/pool">Create Liquidity Pair</Link>
+                </p>
+                <p>
+                  <Link to="/find">Import Liquidity Pool</Link>
+                </p>
+              </div>
+              <div>
+                <h6>Farm</h6>
+                <p>
+                  <Link to="/Farm-V2">Liquidity Pools</Link>
+                </p>
+                <p>
+                  <Link to="/Farm-V2/staking-RGP">Staking</Link>
+                </p>
+                <p>Other Farms</p>
+                <p>
+                  <a href="" target="_blank">
+                    List your Project
+                  </a>
+                </p>
+              </div>
+              <div>
+                <h6>Legal</h6>
+                <p>
+                  <a
+                    href="https://rigelprotocol.com/design-compliance.html"
+                    target="_blank"
+                  >
+                    Design Compliance
+                  </a>
+                </p>
+                <p>
+                  <a
+                    href="https://rigelprotocol.com/privacy-policy.html"
+                    target="_blank"
+                  >
+                    Privacy Policy
+                  </a>
+                </p>
+                <p>
+                  <a
+                    href="https://rigelprotocol.com/terms-and-condition.html"
+                    target="_blank"
+                  >
+                    Terms & Conditions
+                  </a>
+                </p>
+              </div>
+              <div>
+                <h6>Contact</h6>
+                <p>
+                  <a href="https://twitter.com/rigelprotocol" target="_blank">
+                    Twitter
+                  </a>
+                </p>
+                <p>
+                  {" "}
+                  <a href="https://t.me/rigeldao" target="_blank">
+                    Telegram
+                  </a>
+                </p>
+                <p>
+                  <a href="https://medium.com/rigelprotocol" target="_blank">
+                    Medium
+                  </a>
+                </p>
+              </div>
+            </div>
+          </section>
+        </main>
+        <footer className="mainFooter">
+          <div className="footer__top">
+            <h3>Start your defi journey</h3>
+            <p>
+              Build your defi portfolio with DApps that guarantee you fast
+              transaction times, low transaction fees and the best user
+              experience.
+            </p>
+            <div className="footer__top__button">
               <Link to="/swap">
-               <button className="button">
-                 Launch DApp <span>&#8594;</span> 
-               </button>
+                <button className="button">Launch App</button>
               </Link>
-              
-             </div>
-           </div>
-         </div>
-         <div className="section__3__top">
-           <div className="section__3__text">
-             <h3>Liquidity</h3>
-             <p>After depositing your trading token, you can now select a pair with said token and then set your spillage and leverage settings. You get up to 100x leverage for the amount of your deposited tokens for you to trade with.</p>
-             <div className="section__3__top__button">
-             <Link to="/pool">
-               <button className="button">
-                 Launch DApp <span>&#8594;</span>
-               </button>
-               </Link>
-             </div>
-           </div>
-           <div>
-           <img src={Liquidity} alt="" />
-                    </div>
-         </div>
-         <div className="section__3__top">
+            </div>
+          </div>
+          <div className="footer__link">
             <div>
-            <img src={YieldFarm} alt="" />
-           </div>
-           <div className="section__3__text">
-             <h3>Yield Farm</h3>
-             <p>When you trade with the leverage you earn more back. From your earning your leveraged tokens are automatically removed with interest and you get to keep more earnings.</p>
-             <div className="section__3__top__button">
-               <Link to="/Farm-V2">
-                     <button className="button">
-                 Launch DApp <span>&#8594;</span>
-               </button>
-               </Link>
-           
-             </div>
-           </div>
-          
-         </div>
-        </section>
-     
-     <section className="section__4">
-       <div className="section__4__container">
-         <div className="section__4__img__container">
-        <div>
-        <img src={Ethereum} alt="Ethereum" />
-        </div>
-        <div>
-        <img src={Binance} alt="Binance" />
-        </div>
-        <div>
-        <img src={Polygon} alt="Polygon" />
-        </div>
-        <div>
-        <img src={Oasis} alt="Oasis" />
-        </div>
-       </div>
-       <div className="section__4__text">
-         <h2>Built across multiple platforms</h2>
-         <p>Built on Ethereum, Binance SmartChain, & Polygon to give you the freedom to experience more inclusivity and an extra layer of security when using our platforms.</p>
-       </div> 
-      </div>
-       <div className="section__4__grid">
-         <div>
-           <div className="section__4__grid__img">
-             <img src={Security} alt="security" width="60px"/>
-           </div>
-           <Box mt="4">
- <h4>Extra layer of security</h4>
-           <p>Easily exchange between your assets without giving control of your funds to anyone.</p>
-           </Box>
-          
-         </div>
-         <div>
-           <div className="section__4__grid__img">
-             <img src={Fees} alt="fees" width="60px"/>
-           </div>
-           <Box mt="4">
-              <h4>Low transaction fees</h4>
-           <p>We offer you the best transaction experience with the lowest fees available.</p>
-           </Box>
-          
-         </div>
-         <div>
-           <div className="section__4__grid__img">
-             <img src={Speed} alt="speed" width="60px"/>
-           </div>
-           <Box mt="4">
-<h4>Speed of light</h4>
-           <p>Your transactions are processed at lightning-fast speed.</p>
-           </Box>
-           
-         </div>
-       
-       </div>
-       
-     </section>
-     <section className='section__5'>
-       <h4>SmartSwap BluePrints</h4>
-       <div className='section__5__link'>
-         <div>
-           <h6>Swap</h6>
-           <p><Link to="/swap">Swap</Link></p>
-           <p><Link to="/autotrade">Auto Time</Link></p>
-           <p><Link to="/set-price">Set Price</Link></p>
-         </div>
-         <div>
-           <h6>Liquidity</h6>
-           <p><Link to="/add">Add Liquidity</Link></p>
-           <p><Link to="/pool">Create Liquidity Pair</Link></p>
-           <p><Link to="/find">Import Liquidity Pool</Link></p>
-         </div>
-         <div>
-           <h6>Farm</h6>
-           <p><Link to="/Farm-V2">Liquidity Pools</Link></p>
-           <p><Link to="/Farm-V2/staking-RGP">Staking</Link></p>
-           <p>Other Farms</p>
-           <p><a href="" target="_blank">List your Project</a></p>
-         </div>
-         <div>
-           <h6>Legal</h6>
-           <p><a href="https://rigelprotocol.com/design-compliance.html" target="_blank">Design Compliance</a></p>
-           <p><a href="https://rigelprotocol.com/privacy-policy.html" target="_blank">Privacy Policy</a></p>
-           <p><a href="https://rigelprotocol.com/terms-and-condition.html" target="_blank">Terms & Conditions</a></p>
-         </div>
-         <div>
-           <h6>Contact</h6>
-           <p><a href="https://twitter.com/rigelprotocol" target="_blank">Twitter</a></p>
-           <p> <a href="https://www.t.me/rigelprotocol" target="_blank">Telegram</a></p>
-           <p><a href="https://medium.com/rigelprotocol" target="_blank">Medium</a></p>
-         </div>
-       </div>
-     </section>
-     </main>
-     <footer className='mainFooter'>
-      <div className="footer__top">
-        <h3>Start your defi journey</h3>
-        <p>Build your defi portfolio with DApps that guarantee you fast transaction times, low transaction fees and the best user experience.</p>
-        <div className="footer__top__button">
-          <Link to="/swap">
-            
-        <button className="button">Launch App</button>
-          </Link>
-        </div>
-      </div>
-      <div className="footer__link">
-        <div>
-          <img src="./assets/images/Darklogo.svg" alt="" />
-          <p>DApps with the best experience and low fees.</p>
-          <Box className="social__media__icon" mt="4">
-              <a  href="https://www.linkedin.com/company/rigelprotocol"
-              target="_blank">
-                 <img src={Linkedin} alt="" />
-              </a>
-            <a href="https://www.t.me/rigelprotocol" target="_blank">
-              <img src={Telegram} alt="" />
-            </a>
-            <a href="https://discord.gg/j86NH95GDD" target="_blank">
-              <img src={Discord} alt="" />
-            </a>
-            <a href="https://twitter.com/rigelprotocol" target="_blank">
-              <img src={Twitter} alt="" />
-            </a>
-            <a href="https://medium.com/rigelprotocol" target="_blank">
-              <img src={Medium} alt="" />
-            </a>
-            <a href="https://github.com/rigelprotocol" target="_blank">
-              <img src={Github} alt="" />
-            </a>
-          </Box>
-        </div>
-        <div className="footer__container">
-           <div className="footer__li__link">
-<div>
-<p>Products</p>
-<ul>
- <li><a href="https://smartswap.rigelprotocol.com/" target="_blank">SmartSwap</a></li>
- <li><a href="https://gift.rigelprotocol.com/" target="_blank">Gift DApp</a> </li>
- <li> <a href="https://smartswap.rigelprotocol.com/autotrade?chain=bsc" target="_blank"
-  >Autotrade
-</a></li>
- <li> <a
-   target="_blank" href="https://smartswap.rigelprotocol.com/smartbid?chain=bsc"
-  >SmartBid</a></li>
- <li><a
-  href="https://launchpad.rigelprotocol.com/"  target="_blank">LaunchPad</a></li>
-</ul>
-</div>
-<div>
-<p>Company</p>
-<ul>
- <li><a href="https://rigelprotocol.com/about.html" target="_blank">About us</a> </li>
- <li><a className="inner-page-link" href="https://rigelprotocol.com/#roadMaps" target="_blank">Road Map</a></li>
- <li><a className="inner-page-link" href="https://rigelprotocol.com/#partners" target="_blank">Partners</a></li>
- <li><a href="https://rigelprotocol.com/press.html" target="_blank">Press Resources</a></li>
-</ul>
-</div>
-<div>
-<p>Support</p>
-<ul>
- <li><a href="https://rigelprotocol.com/faqs.html" target="_blank">FAQs</a> </li>
- <li><a href="https://medium.com/rigelprotocol" target="_blank">Blog</a></li>
-</ul>
-</div>
-<div>
-<p>Legal</p>
-<ul>
- <li><a href="https://rigelprotocol.com/design-compliance.html" target="_blank">Design Compliance</a> </li>
- <li><a href="https://rigelprotocol.com/privacy-policy.html" target="_blank">Private Policy</a> </li>
- <li><a href="https://rigelprotocol.com/terms-and-condition.html" target="_blank">Terms & Conditions</a> </li>
- <li><a href="https://rigelprotocol.com/AML" target="_blank">Anti-Money Laundering Policy</a> </li>
-</ul>
-</div>
-        </div> 
-        </div>
-      
+              <img src="./assets/images/Darklogo.svg" alt="" />
+              <p>DApps with the best experience and low fees.</p>
+              <Box className="social__media__icon" mt="4">
+                <a
+                  href="https://www.linkedin.com/company/rigelprotocol"
+                  target="_blank"
+                >
+                  <img src={Linkedin} alt="" />
+                </a>
+                <a href="https://t.me/rigeldao" target="_blank">
+                  <img src={Telegram} alt="" />
+                </a>
+                <a href="https://discord.gg/j86NH95GDD" target="_blank">
+                  <img src={Discord} alt="" />
+                </a>
+                <a href="https://twitter.com/rigelprotocol" target="_blank">
+                  <img src={Twitter} alt="" />
+                </a>
+                <a href="https://medium.com/rigelprotocol" target="_blank">
+                  <img src={Medium} alt="" />
+                </a>
+                <a href="https://github.com/rigelprotocol" target="_blank">
+                  <img src={Github} alt="" />
+                </a>
+              </Box>
+            </div>
+            <div className="footer__container">
+              <div className="footer__li__link">
+                <div>
+                  <p>Products</p>
+                  <ul>
+                    <li>
+                      <a
+                        href="https://smartswap.rigelprotocol.com/"
+                        target="_blank"
+                      >
+                        SmartSwap
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://giftdapp.rigelprotocol.com/"
+                        target="_blank"
+                      >
+                        Gift DApp
+                      </a>{" "}
+                    </li>
+                    <li>
+                      {" "}
+                      <a
+                        href="https://smartswap.rigelprotocol.com/autotrade?chain=bsc"
+                        target="_blank"
+                      >
+                        Autotrade
+                      </a>
+                    </li>
+                    <li>
+                      {" "}
+                      <a
+                        target="_blank"
+                        href="https://smartswap.rigelprotocol.com/smartbid?chain=bsc"
+                      >
+                        SmartBid
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://launchpad.rigelprotocol.com/"
+                        target="_blank"
+                      >
+                        LaunchPad
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div>
+                  <p>Company</p>
+                  <ul>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/about.html"
+                        target="_blank"
+                      >
+                        About us
+                      </a>{" "}
+                    </li>
+                    <li>
+                      <a
+                        className="inner-page-link"
+                        href="https://rigelprotocol.com/#roadMaps"
+                        target="_blank"
+                      >
+                        Road Map
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        className="inner-page-link"
+                        href="https://rigelprotocol.com/#partners"
+                        target="_blank"
+                      >
+                        Partners
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/press.html"
+                        target="_blank"
+                      >
+                        Press Resources
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div>
+                  <p>Support</p>
+                  <ul>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/faqs.html"
+                        target="_blank"
+                      >
+                        FAQs
+                      </a>{" "}
+                    </li>
+                    <li>
+                      <a
+                        href="https://medium.com/rigelprotocol"
+                        target="_blank"
+                      >
+                        Blog
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div>
+                  <p>Legal</p>
+                  <ul>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/design-compliance.html"
+                        target="_blank"
+                      >
+                        Design Compliance
+                      </a>{" "}
+                    </li>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/privacy-policy.html"
+                        target="_blank"
+                      >
+                        Private Policy
+                      </a>{" "}
+                    </li>
+                    <li>
+                      <a
+                        href="https://rigelprotocol.com/terms-and-condition.html"
+                        target="_blank"
+                      >
+                        Terms & Conditions
+                      </a>{" "}
+                    </li>
+                    <li>
+                      <a href="https://rigelprotocol.com/AML" target="_blank">
+                        Anti-Money Laundering Policy
+                      </a>{" "}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </footer>
       </div>
-    </footer>
-   </div>
     </div>
   );
 };
diff --git a/src/state/LPFarm/actions.ts b/src/state/LPFarm/actions.ts
index 941c469b..ef36236c 100644
--- a/src/state/LPFarm/actions.ts
+++ b/src/state/LPFarm/actions.ts
@@ -1,21 +1,20 @@
 import { createAction } from "@reduxjs/toolkit";
+import { Field } from "../swap/actions";
 
-export const updateFarms = createAction<{ value: any[] }>(
-    "lpfarm/updateFarms"
-);
+export const updateFarms = createAction<{ value: any[] }>("lpfarm/updateFarms");
 
 export const updateSpecialPool = createAction<{ value: any[] }>(
-    "lpfarm/updateSpecialPool"
+  "lpfarm/updateSpecialPool"
 );
 
 export const updateLoadingState = createAction<{ value: boolean }>(
-    "lpfarm/updateLoadingState"
+  "lpfarm/updateLoadingState"
 );
 
 export const updateChainId = createAction<{ value: number }>(
-    "lpfarm/updateChainId"
+  "lpfarm/updateChainId"
 );
 
 export const updateAllowance = createAction<{
-    value: any;
+  value: any;
 }>("lpfarm/updateAllowance");
diff --git a/src/state/lists/hooks.ts b/src/state/lists/hooks.ts
index 6ca32eef..79459285 100644
--- a/src/state/lists/hooks.ts
+++ b/src/state/lists/hooks.ts
@@ -1,143 +1,157 @@
-import {useMemo,useCallback, useEffect} from "react"
-import DEFAULT_TOKEN_LIST from "../../utils/constants/tokenList/rigelprotocol-default.tokenList.json"
-import { TokenList } from '@uniswap/token-lists'
-import {WrappedTokenInfo} from "./WrappedTokenInfo"
+import { useMemo, useCallback, useEffect } from "react";
+import DEFAULT_TOKEN_LIST from "../../utils/constants/tokenList/rigelprotocol-default.tokenList.json";
+import { TokenList } from "@uniswap/token-lists";
+import { WrappedTokenInfo } from "./WrappedTokenInfo";
 // import { TagInfo } from "./WrappedTokenInfo"
-import { Tags } from "@uniswap/token-lists"
-import { DEFAULT_LIST_OF_LISTS } from "../../utils/constants/lists"
-import { AppDispatch, RootState } from ".."
-import { UNSUPPORTED_LIST_URLS } from "../../utils/constants/lists"
-import UNSUPPORTED_TOKEN_LIST from '../../utils/constants/tokenList/rigelprotocol-unsupported.tokenlist.json'
-import { useAllInactiveTokens } from "../../hooks/Tokens"
+import { Tags } from "@uniswap/token-lists";
+import { DEFAULT_LIST_OF_LISTS } from "../../utils/constants/lists";
+import { AppDispatch, RootState } from "..";
+import { UNSUPPORTED_LIST_URLS } from "../../utils/constants/lists";
+import UNSUPPORTED_TOKEN_LIST from "../../utils/constants/tokenList/rigelprotocol-unsupported.tokenlist.json";
+import { useAllInactiveTokens } from "../../hooks/Tokens";
 
-import { useDispatch, useSelector } from 'react-redux'
-type TagDetails = Tags[keyof Tags]
+import { useDispatch, useSelector } from "react-redux";
+type TagDetails = Tags[keyof Tags];
 export interface TagInfo extends TagDetails {
-  id: string
+  id: string;
 }
 
 export type TokenAddressMap = Readonly<{
-    [chainId: number]: Readonly<{ [tokenAddress: string]: { token: WrappedTokenInfo; list: TokenList } }>
-  }>
+  [chainId: number]: Readonly<{
+    [tokenAddress: string]: { token: WrappedTokenInfo; list: TokenList };
+  }>;
+}>;
 
-  const listCache: WeakMap<TokenList, TokenAddressMap> | null =
-  typeof WeakMap !== 'undefined' ? new WeakMap<TokenList, TokenAddressMap>() : null
+const listCache: WeakMap<TokenList, TokenAddressMap> | null =
+  typeof WeakMap !== "undefined"
+    ? new WeakMap<TokenList, TokenAddressMap>()
+    : null;
+
+export function useAllLists(): RootState["lists"]["byUrl"] {
+  return useSelector((state: RootState) => state.lists.byUrl);
+}
 
-  export function useAllLists(): RootState['lists']['byUrl'] {
-    return useSelector((state:RootState) => state.lists.byUrl)
-  }
-  
 // use ordering of default list of lists to assign priority
 function sortByListPriority(urlA: string, urlB: string) {
-  const first = DEFAULT_LIST_OF_LISTS.includes(urlA) ? DEFAULT_LIST_OF_LISTS.indexOf(urlA) : Number.MAX_SAFE_INTEGER
-  const second = DEFAULT_LIST_OF_LISTS.includes(urlB) ? DEFAULT_LIST_OF_LISTS.indexOf(urlB) : Number.MAX_SAFE_INTEGER
+  const first = DEFAULT_LIST_OF_LISTS.includes(urlA)
+    ? DEFAULT_LIST_OF_LISTS.indexOf(urlA)
+    : Number.MAX_SAFE_INTEGER;
+  const second = DEFAULT_LIST_OF_LISTS.includes(urlB)
+    ? DEFAULT_LIST_OF_LISTS.indexOf(urlB)
+    : Number.MAX_SAFE_INTEGER;
 
   // need reverse order to make sure mapping includes top priority last
-  if (first < second) return 1
-  if (first > second) return -1
-  return 0
+  if (first < second) return 1;
+  if (first > second) return -1;
+  return 0;
 }
 
-  export function listToTokenMap(list: TokenList): TokenAddressMap {
-    const result = listCache?.get(list)
-    if (result) return result
-  
-    const map = list.tokens.reduce<TokenAddressMap>((tokenMap, tokenInfo) => {
-      const tags: TagInfo[] =
+export function listToTokenMap(list: TokenList): TokenAddressMap {
+  const result = listCache?.get(list);
+  if (result) return result;
+
+  const map = list.tokens.reduce<TokenAddressMap>((tokenMap, tokenInfo) => {
+    const tags: TagInfo[] =
       tokenInfo.tags
         ?.map((tagId) => {
-          if (!list.tags?.[tagId]) return undefined
-          return { ...list.tags[tagId], id: tagId }
+          if (!list.tags?.[tagId]) return undefined;
+          return { ...list.tags[tagId], id: tagId };
         })
-        ?.filter((x): x is TagInfo => Boolean(x)) ?? []
-      const token = new WrappedTokenInfo(tokenInfo, tags)
-      if (tokenMap[token.chainId]?.[token.address] !== undefined) {
-        console.error(new Error(`Duplicate token! ${token.address}`))
-        return tokenMap
-      }
-      return {
-        ...tokenMap,
-        [token.chainId]: {
-          ...tokenMap[token.chainId],
-          [token.address]: {
-            token,
-            list,
-          },
+        ?.filter((x): x is TagInfo => Boolean(x)) ?? [];
+    const token = new WrappedTokenInfo(tokenInfo, tags);
+    if (tokenMap[token.chainId]?.[token.address] !== undefined) {
+      console.error(new Error(`Duplicate token! ${token.address}`));
+      return tokenMap;
+    }
+    return {
+      ...tokenMap,
+      [token.chainId]: {
+        ...tokenMap[token.chainId],
+        [token.address]: {
+          token,
+          list,
         },
-      }
-    }, {})
-    listCache?.set(list, map)
-    return map
-  }
+      },
+    };
+  }, {});
+  listCache?.set(list, map);
+  return map;
+}
 
 // merge tokens contained within lists from urls
-function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMap {
-  const lists = useAllLists()
+function useCombinedTokenMapFromUrls(
+  urls: string[] | undefined
+): TokenAddressMap {
+  const lists = useAllLists();
   return useMemo(() => {
-    if (!urls) return {}
+    if (!urls) return {};
     return (
       urls
         .slice()
         // sort by priority so top priority goes last
         .sort(sortByListPriority)
         .reduce((allTokens, currentUrl) => {
-          const current = lists[currentUrl]?.current
-          if (!current) return allTokens
+          const current = lists[currentUrl]?.current;
+          if (!current) return allTokens;
           try {
-            return combineMaps(allTokens, listToTokenMap(current))
+            return combineMaps(allTokens, listToTokenMap(current));
           } catch (error) {
-            console.error('Could not show token list due to error', error)
-            return allTokens
+            console.error("Could not show token list due to error", error);
+            return allTokens;
           }
         }, {})
-    )
-  }, [lists, urls])
+    );
+  }, [lists, urls]);
 }
 // filter out unsupported lists
 export function useActiveListUrls(): string[] | undefined {
-  let data= useSelector<RootState, RootState['lists']['activeListUrls']>((state) => state.lists.activeListUrls)
-  return data?.filter(
-    (url) => !UNSUPPORTED_LIST_URLS.includes(url),
-  )
+  let data = useSelector<RootState, RootState["lists"]["activeListUrls"]>(
+    (state) => state.lists.activeListUrls
+  );
+  return data?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url));
 }
 export function useInactiveListUrls(): string[] {
-  const lists = useAllLists()
-  const allActiveListUrls = useActiveListUrls()
-  return Object.keys(lists).filter((url) => !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url))
+  const lists = useAllLists();
+  const allActiveListUrls = useActiveListUrls();
+  return Object.keys(lists).filter(
+    (url) =>
+      !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url)
+  );
 }
 
 // all tokens from inactive lists
 export function useCombinedInactiveList(): TokenAddressMap {
-  const allInactiveListUrls: string[] = useInactiveListUrls()
-  return useCombinedTokenMapFromUrls(allInactiveListUrls)
+  const allInactiveListUrls: string[] = useInactiveListUrls();
+  return useCombinedTokenMapFromUrls(allInactiveListUrls);
 }
 
-
-function combineMaps(map1: TokenAddressMap,  map2: TokenAddressMap): TokenAddressMap {
+function combineMaps(
+  map1: TokenAddressMap,
+  map2: TokenAddressMap
+): TokenAddressMap {
   return {
     1: { ...map1[1], ...map2[1] }, // mainnet
-    3: {  ...map1[3],...map2[3] }, // ropsten
+    3: { ...map1[3], ...map2[3] }, // ropsten
     4: { ...map1[4], ...map2[4] }, // rinkeby
-    56: {...map1[56],...map2[56] }, // bsc mainnet
-    97: {...map1[97], ...map2[97] }, // bsc testnet
-    137: {...map1[137], ...map2[137] }, // matic
-    80001: {...map1[80001], ...map2[80001] }, // matic testnet
-    42261: {...map1[42261], ...map2[42261] }, // oasis testnet
-    42262: {...map1[42262], ...map2[42262] }, // oasis mainnet
-    43114: {...map1[43114], ...map2[43114] }, // avalanche
-    43113: {...map1[43113], ...map2[43113] }, // fuji
-  }
+    56: { ...map1[56], ...map2[56] }, // bsc mainnet
+    97: { ...map1[97], ...map2[97] }, // bsc testnet
+    137: { ...map1[137], ...map2[137] }, // matic
+    80001: { ...map1[80001], ...map2[80001] }, // matic testnet
+    42261: { ...map1[42261], ...map2[42261] }, // oasis testnet
+    42262: { ...map1[42262], ...map2[42262] }, // oasis mainnet
+    43114: { ...map1[43114], ...map2[43114] }, // avalanche
+    43113: { ...map1[43113], ...map2[43113] }, // fuji
+  };
 }
 
-export const useCombinedActiveList= () => {
-  const activeListUrls = useActiveListUrls()
-  const activeTokens = useCombinedTokenMapFromUrls(activeListUrls)
-  const defaultTokenMap = listToTokenMap(DEFAULT_TOKEN_LIST)
-  return combineMaps(activeTokens,defaultTokenMap)
- 
-}
+export const useCombinedActiveList = () => {
+  const activeListUrls = useActiveListUrls();
+  const activeTokens = useCombinedTokenMapFromUrls(activeListUrls);
+  const defaultTokenMap = listToTokenMap(DEFAULT_TOKEN_LIST);
+  return combineMaps(activeTokens, defaultTokenMap);
+};
 
 export function useIsListActive(url: string): boolean {
-  const activeListUrls = useActiveListUrls()
-  return Boolean(activeListUrls?.includes(url))
-}
\ No newline at end of file
+  const activeListUrls = useActiveListUrls();
+  return Boolean(activeListUrls?.includes(url));
+}
diff --git a/src/state/mint/actions.ts b/src/state/mint/actions.ts
index a1bf1f44..63159df3 100644
--- a/src/state/mint/actions.ts
+++ b/src/state/mint/actions.ts
@@ -1,19 +1,28 @@
-import { createAction } from '@reduxjs/toolkit';
+import { createAction } from "@reduxjs/toolkit";
 
 export enum Field {
-  INPUT = 'INPUT',
-  OUTPUT = 'OUTPUT',
+  INPUT = "INPUT",
+  OUTPUT = "OUTPUT",
 }
 
 export const selectCurrency = createAction<{
   field: Field;
   currencyId: string | undefined;
-}>('mint/selectCurrency');
-export const typeInput =
-  createAction<{ field: Field; typedValue: string; no: boolean }>(
-    'mint/typeInputMint'
-  );
-export const resetMintState = createAction<void>('mint/resetMintState');
+}>("mint/selectCurrency");
+export const typeInput = createAction<{
+  field: Field;
+  typedValue: string;
+  no: boolean;
+}>("mint/typeInputMint");
+export const resetMintState = createAction<void>("mint/resetMintState");
 export const replaceMintState = createAction<{ inputCurrencyId?: string }>(
-  'mint/replaceMintState'
+  "mint/replaceMintState"
 );
+
+export const replaceLiquidityState = createAction<{
+  field: Field;
+  typedValue: string;
+  inputCurrencyId?: string;
+  outputCurrencyId?: string;
+  recipient: string | null;
+}>("liquidity/replaceLiquidityState");
diff --git a/src/state/mint/hooks.ts b/src/state/mint/hooks.ts
index 85a5e5e8..7b937b1b 100644
--- a/src/state/mint/hooks.ts
+++ b/src/state/mint/hooks.ts
@@ -1,27 +1,27 @@
-import {Currency} from '@uniswap/sdk-core';
-
-import JSBI from 'jsbi';
-import { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '../index';
-
-import { Field, selectCurrency, typeInput } from './actions';
-import { useActiveWeb3React } from '../../utils/hooks/useActiveWeb3React';
-import { AppDispatch } from '../index';
-import { useNativeBalance } from '../../utils/hooks/useBalances';
-import { useCurrency } from '../../hooks/Tokens';
-import { getERC20Token } from '../../utils/utilsFunctions';
-import { isAddress, ParseFloat } from '../../utils';
-import { ethers } from 'ethers';
-import { parseUnits } from '@ethersproject/units';
+import { Currency } from "@uniswap/sdk-core";
+
+import JSBI from "jsbi";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../index";
+
+import { Field, selectCurrency, typeInput } from "./actions";
+import { useActiveWeb3React } from "../../utils/hooks/useActiveWeb3React";
+import { AppDispatch } from "../index";
+import { useNativeBalance } from "../../utils/hooks/useBalances";
+import { useCurrency } from "../../hooks/Tokens";
+import { getERC20Token } from "../../utils/utilsFunctions";
+import { isAddress, ParseFloat } from "../../utils";
+import { ethers } from "ethers";
+import { parseUnits } from "@ethersproject/units";
 // import {useMint}
-import { useMint } from '../../hooks/useMint';
-import { ZERO_ADDRESS } from '../../constants';
-import {Web3Provider} from "@ethersproject/providers";
+import { useMint } from "../../hooks/useMint";
+import { ZERO_ADDRESS } from "../../constants";
+import { Web3Provider } from "@ethersproject/providers";
 const ZERO = JSBI.BigInt(0);
 
-export function useMintState(): RootState['mint'] {
-  return useSelector<RootState, RootState['mint']>((state) => state.mint);
+export function useMintState(): RootState["mint"] {
+  return useSelector<RootState, RootState["mint"]>((state) => state.mint);
 }
 
 export function tryParseAmount<T extends Currency>(
@@ -33,7 +33,7 @@ export function tryParseAmount<T extends Currency>(
   }
   try {
     const typedValueParsed = parseUnits(value, currency.decimals).toString();
-    if (typedValueParsed !== '0') {
+    if (typedValueParsed !== "0") {
       return typedValueParsed;
     }
   } catch (error) {
@@ -45,8 +45,8 @@ export function tryParseAmount<T extends Currency>(
 }
 
 export function useMintActionHandlers(): {
-  onCurrencyFor: (currencyAddress: string,field: Field, ) => void;
-   onCurrencySelection: (field: Field, currency: Currency) => void;
+  onCurrencyFor: (currencyAddress: string, field: Field) => void;
+  onCurrencySelection: (field: Field, currency: Currency) => void;
   onUserInput: (field: Field, typedValue: string, no: boolean) => void;
 } {
   const { chainId, account, library } = useActiveWeb3React();
@@ -69,20 +69,16 @@ export function useMintActionHandlers(): {
             ? currency.address
             : currency.isNative
             ? currency.symbol
-            : '',
+            : "",
         })
       );
     },
     [dispatch]
   );
 
-
   const onCurrencyFor = useCallback(
-    ( currencyAddress: string,field: Field,) => {
-      dispatch(
-        selectCurrency( {field: field,
-          currencyId: currencyAddress})
-      );
+    (currencyAddress: string, field: Field) => {
+      dispatch(selectCurrency({ field: field, currencyId: currencyAddress }));
     },
     [dispatch]
   );
@@ -96,8 +92,8 @@ export function useMintActionHandlers(): {
   return {
     onCurrencySelection,
     onUserInput,
-    onCurrencyFor
-    };
+    onCurrencyFor,
+  };
 }
 
 export function useDerivedMintInfo(): {
@@ -150,12 +146,19 @@ export function useDerivedMintInfo(): {
       return balance ? JSBI.BigInt(balance.toString()) : undefined;
     } else if (isAddress(currency.address)) {
       const token = await getERC20Token(
-        currency.address ? currency.address : '', library
+        currency.address ? currency.address : "",
+        library
+      );
+      const [balance, decimals] = await Promise.all([
+        token.balanceOf(account),
+        token.decimals(),
+      ]);
+      const amount = ParseFloat(
+        ethers.utils.formatUnits(balance.toString(), decimals),
+        4
       );
-      const [balance, decimals] = await Promise.all([token.balanceOf(account), token.decimals()]);
-      const amount = ParseFloat(ethers.utils.formatUnits(balance.toString(), decimals),4);
-      console.log({amount})
-      return amount === '0.0' ? '0' :  amount;
+      console.log({ amount });
+      return amount === "0.0" ? "0" : amount;
     }
   };
 
@@ -165,6 +168,6 @@ export function useDerivedMintInfo(): {
     bestTrade,
     parsedAmount,
     showWrap,
-    address
+    address,
   };
 }
diff --git a/src/state/mint/reducer.ts b/src/state/mint/reducer.ts
index f49e28db..64612ad4 100644
--- a/src/state/mint/reducer.ts
+++ b/src/state/mint/reducer.ts
@@ -1,11 +1,12 @@
-import { createReducer } from '@reduxjs/toolkit';
+import { createReducer } from "@reduxjs/toolkit";
 import {
   Field,
   resetMintState,
   typeInput,
   selectCurrency,
   replaceMintState,
-} from './actions';
+  replaceLiquidityState,
+} from "./actions";
 
 export interface MintState {
   readonly independentField: Field;
@@ -22,15 +23,15 @@ export interface MintState {
 
 export const initialState: MintState = {
   independentField: Field.INPUT,
-  typedValue: '',
+  typedValue: "",
   [Field.INPUT]: {
-    currencyId: '',
+    currencyId: "",
   },
   [Field.OUTPUT]: {
-    currencyId: '',
+    currencyId: "",
   },
   recipient: null,
-  otherTypedValue: '',
+  otherTypedValue: "",
 };
 
 // const initialState: MintState = {
@@ -82,6 +83,43 @@ export const initialState: MintState = {
 
 export default createReducer<MintState>(initialState, (builder) =>
   builder
+    .addCase(
+      replaceLiquidityState,
+      (
+        state,
+        {
+          payload: {
+            typedValue,
+            recipient,
+            field,
+            inputCurrencyId,
+            outputCurrencyId,
+          },
+        }
+      ) => {
+        console.log({
+          typedValue,
+          recipient,
+          field,
+          inputCurrencyId,
+          outputCurrencyId,
+        });
+        // return {
+        //   ...state,
+        //   [Field.INPUT]: {
+        //     currencyId: inputCurrencyId,
+        //   },
+        //   [Field.OUTPUT]: {
+        //     currencyId: outputCurrencyId,
+        //   },
+        //   independentField: field,
+        //   typedValue,
+        //   recipient,
+        //   percentageChange:"0",
+        // };
+      }
+    )
+
     .addCase(replaceMintState, (state, { payload: { inputCurrencyId } }) => {
       return {
         ...state,
@@ -129,7 +167,7 @@ export default createReducer<MintState>(initialState, (builder) =>
           ...state,
           independentField: field,
           typedValue,
-          otherTypedValue: '',
+          otherTypedValue: "",
         };
       }
     })
diff --git a/src/state/swap/actions.ts b/src/state/swap/actions.ts
index 8590baa2..26be4004 100644
--- a/src/state/swap/actions.ts
+++ b/src/state/swap/actions.ts
@@ -10,13 +10,15 @@ export const selectCurrency = createAction<{
   currencyId: string | undefined;
 }>("swap/selectCurrency");
 export const selectMarketFactory = createAction<{
-  marketFactory: string | undefined,marketRouterAddress: string | undefined
+  marketFactory: string | undefined;
+  marketRouterAddress: string | undefined;
 }>("swap/selectMarketFactory");
 export const selectMarketRouterAddress = createAction<{
   marketRouterAddress: string | undefined;
 }>("swap/selectMarketRouterAddress");
-export const typeInput =
-  createAction<{ field: Field; typedValue: string }>("swap/typeInput");
+export const typeInput = createAction<{ field: Field; typedValue: string }>(
+  "swap/typeInput"
+);
 export const switchCurrencies = createAction<void>("swap/switchCurrencies");
 
 export const replaceSwapState = createAction<{
diff --git a/src/state/swap/hooks.ts b/src/state/swap/hooks.ts
index dc7dceac..5e3be947 100644
--- a/src/state/swap/hooks.ts
+++ b/src/state/swap/hooks.ts
@@ -204,7 +204,7 @@ export function useDerivedSwapInfo(): {
   if (parseFloat(typedValue) > 0 && pathArray?.length === 0 && !wrap) {
     inputError = "Insufficient Liquidity for this Trade.";
   }
-  if (address === ZERO_ADDRESS ) {
+  if (address === ZERO_ADDRESS) {
     inputError = "Insufficient Liquidity for this Trade.";
   }
 
@@ -252,15 +252,17 @@ function validatedRecipient(recipient: any): string | null {
 function parseCurrencyFromURLParameter(urlParam: any, symbol = ""): string {
   if (typeof urlParam === "string") {
     const valid = isAddress(urlParam);
+    console.log({ valid });
     if (valid) return valid;
     if (valid === false) return symbol;
   }
   return urlParam ?? "";
 }
-function queryParametersToSwapState(
+export function queryParametersToSwapState(
   parsedQs: any,
   chainId: number | undefined
 ) {
+  console.log({ parsedQs });
   let inputCurrency = parseCurrencyFromURLParameter(parsedQs.inputCurrency);
   let outputCurrency = parseCurrencyFromURLParameter(parsedQs.outputCurrency);
   const symbol = SupportedChainSymbols[chainId ?? 56];
@@ -323,8 +325,7 @@ export const binanceTestFreeMarketArray = [
 export const AvalancheFreeMarketArray = [
   { name: "Tradejoe", image: "tradejoe.png" },
   // { name: "Pangolin", image: "Pangolin.png" },
-
-]
+];
 
 // updates the swap state to use the defaults for a given network
 export function useDefaultsFromURLSearch() {
@@ -352,6 +353,10 @@ export function useDefaultsFromURLSearch() {
         recipient: null,
       })
     );
+    console.log({
+      inputCurrencyId: parsed[Field.INPUT].currencyId,
+      outputCurrencyId: parsed[Field.OUTPUT].currencyId,
+    });
     setResult({
       inputCurrencyId: parsed[Field.INPUT].currencyId,
       outputCurrencyId: parsed[Field.OUTPUT].currencyId,
diff --git a/src/utils/addresses.ts b/src/utils/addresses.ts
index 2ee7fe73..5d632966 100644
--- a/src/utils/addresses.ts
+++ b/src/utils/addresses.ts
@@ -7,11 +7,10 @@ export const RGPADDRESSES: { [key: string]: string } = {
   "80001": "0x8E62F88FD28F95cE0dD0557c8419215b5599CE64",
   "42261": "0x2d2cd8ED2ec05A55162308332C40C3eF1994F59D",
   "42262": "0x4AF5ff1A60a6eF6C7c8f9C4E304cD9051fCa3Ec0",
-  "43114":"0x4AF5ff1A60a6eF6C7c8f9C4E304cD9051fCa3Ec0",
-  "43113":"0x59F48ce93eb317f4628C68BbcF6CB7937a25662D" //fuji testnet
+  "43114": "0x4AF5ff1A60a6eF6C7c8f9C4E304cD9051fCa3Ec0",
+  "43113": "0x59F48ce93eb317f4628C68BbcF6CB7937a25662D", //fuji testnet
 };
 
-
 export const CHAINDETAILS = {
   "1": "eth",
   "3": "eth_test",
@@ -21,8 +20,8 @@ export const CHAINDETAILS = {
   "80001": "pn_mumbai",
   "42261": "oasis_test",
   "42262": "oasis",
-  "43114":"avalanche",
-  "43113":"avalanche_fuji"
+  "43114": "avalanche",
+  "43113": "avalanche_fuji",
 };
 
 //Smartswap factory addresses
@@ -35,8 +34,8 @@ export const SMARTSWAPFACTORYADDRESSES: { [key: string]: string } = {
   "80001": "0xC8F273a1656d26BB8ECBc8B267e53304533600c4",
   "42261": "0xF9d14C9516AF795ee2b5dca7479f927EEaC1EDdb",
   "42262": "0xCE2ca7C47813E86008B0f9D5d5661356c130997f",
-  "43114":"0x",
-  "43113":"0xdA0b4e0b60e874D056161900b81F045e77b24b18", //fuji testnet
+  "43114": "0x",
+  "43113": "0xdA0b4e0b60e874D056161900b81F045e77b24b18", //fuji testnet
 };
 
 //SMARTSWAP ROUTER
@@ -49,8 +48,8 @@ export const SMARTSWAPROUTER: { [key: string]: string } = {
   "80001": "0xaEBC5E5aC2Ad8680978Ce11d03048A4E2889DEbA",
   "42261": "0x3c5AAa6cAA82CC62327C7A0849e4d854B1905A3d",
   "42262": "0xFf672dB2558c8A78813EA3F61303460fcec656F7",
-  "43113":"0x869F66539297FFfE66216818889d50Dc2c24265B", // testnet fuji
-  "43114":"0xA52aBE4676dbfd04Df42eF7755F01A3c41f28D27"
+  "43113": "0x869F66539297FFfE66216818889d50Dc2c24265B", // testnet fuji
+  "43114": "0xA52aBE4676dbfd04Df42eF7755F01A3c41f28D27",
 };
 
 export const IPFS: { [key: string]: string } = {
@@ -74,7 +73,7 @@ export const SMARTSWAPNFTSALES: { [key: string]: string } = {
   "97": "0x40a480f760C964e06165aB4dE9fD05d62264E000",
   "137": "0xb6f05A0C3b03423E99e3FA6c50BF98e0bffdd6f5",
   "80001": "0x14bb910FAbCe47159BFBb48b049E65D0cb3039Cb",
-  "43114":"0x",
+  "43114": "0x",
 };
 
 //SmartSwapNFTTwo
@@ -86,7 +85,7 @@ export const SMARTSWAPNFTTWO: { [key: string]: string } = {
   "97": "0x0694aD39a394A05C24f842612c3E86051A723cF1",
   "137": "0xCff5eb5f88b40905035310118B7dDF4bef8155dd",
   "80001": "0x4798a90d74ba3Fef77D38B0a07E8172FC5602629",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 //SmartBid
@@ -97,7 +96,7 @@ export const SMARTBID1: { [key: string]: string } = {
   "97": "0x96C65EFeEDb7a7dDa8A8e2630BD5e07534ED294B",
   "137": "0x9b5af1EcC50b0676cA004Dd5b693d9aaDe85F4A8",
   "80001": "0x",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTBID2: { [key: string]: string } = {
@@ -107,7 +106,7 @@ export const SMARTBID2: { [key: string]: string } = {
   "97": "0xA24B732838793Afb53731C84f2A613cf2709BBfB",
   "137": "0x8236774AE8d4D9d52cd5C5930Eb8b5f1e2CA67D2",
   "80001": "0x",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 //Native Wrapped
@@ -120,8 +119,8 @@ export const WNATIVEADDRESSES: { [key: string]: string } = {
   "80001": "0x9d91d1f8Ac4CF6C698a1a15c738323E2ad6F23E4",
   "42261": "0x8E62F88FD28F95cE0dD0557c8419215b5599CE64",
   "42262": "0x21C718C22D52d0F3a789b752D4c2fD5908a8A733",
-  "43114":"0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
-  "43113":"0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
+  "43114": "0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
+  "43113": "0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
 };
 
 export const WNATIVEADDRESSESSYMBOL: { [key: string]: string } = {
@@ -133,8 +132,8 @@ export const WNATIVEADDRESSESSYMBOL: { [key: string]: string } = {
   "80001": "0x9d91d1f8Ac4CF6C698a1a15c738323E2ad6F23E4",
   "42261": "0x8E62F88FD28F95cE0dD0557c8419215b5599CE64",
   "42262": "0x21C718C22D52d0F3a789b752D4c2fD5908a8A733",
-  "43114":"0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
-  "43113":"0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
+  "43114": "0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
+  "43113": "0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
 };
 
 export const SYMBOLS: { [key: string]: { [key: string]: string } } = {
@@ -155,8 +154,8 @@ export const SYMBOLS: { [key: string]: { [key: string]: string } } = {
     "42262": "0x21C718C22D52d0F3a789b752D4c2fD5908a8A733",
   },
   AVAX: {
-    "43114":"0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
-    "43113":"0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
+    "43114": "0xB31f66AA3C1e785363F0875A1B74E27b85FD66c7",
+    "43113": "0x9F34cca17962be33DEDDF0FD9EB6409744535e9b", // testnet fuji
   },
 };
 
@@ -169,7 +168,7 @@ export const MASTERCHEFV2ADDRESSES: { [key: string]: string } = {
   "80001": "0x4B3B531bbbf7821A6f3019f82B461da760a184Ae",
   "42261": "0xFCAD25Ce875EA7eaBdcf99cdF57692376F1DbdF1",
   "42262": "0x1A700c1810387F4178b3944373388de76A88F804",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const MASTERCHEFNEWLPADDRESSES: { [key: string]: string | any } = {
@@ -203,7 +202,6 @@ export const MASTERCHEFNEWLPADDRESSES: { [key: string]: string | any } = {
   },
 };
 
-
 export const MARKETAUTOSWAPADDRESSES: {
   [key: string]: { [key: string]: string };
 } = {
@@ -220,14 +218,15 @@ export const MARKETAUTOSWAPADDRESSES: {
     "137": "0x748CDf88B4e3f42A00650949E7A16bc90B2C4c3a",
   },
   Tradejoe: {
-    "43114":"0x3E4673bC0f62d36FA6F81973750A8107464320D2",
-    "43113":"0x" // testnet fuji
+    "43114": "0x3E4673bC0f62d36FA6F81973750A8107464320D2",
+    "43113": "0x", // testnet fuji
+  },
+  Lydia: {
+    "43114": "0x84bcBBE6Ff81cb58d80c85171A78fbB8835c4596",
+    "43113": "0x", // testnet fuji
   },
-  Lydia:{
-    "43114":"0x84bcBBE6Ff81cb58d80c85171A78fbB8835c4596",
-    "43113":"0x" // testnet fuji
-  }
 };
+
 export const MARKETFREESWAPADDRESSES: {
   [key: string]: { [key: string]: string };
 } = {
@@ -235,7 +234,7 @@ export const MARKETFREESWAPADDRESSES: {
     "56": "0x",
     "97": "0x0Fb048390D8344039473E3C460eD4D2368c0cDDd",
     "137": "0x",
-    "80001":"0x832c868A31DA33D40f69AF0c599E2C420a6e86c2"
+    "80001": "0x832c868A31DA33D40f69AF0c599E2C420a6e86c2",
   },
   Pancakeswap: {
     "56": "0x7A3B6A66b6a4a74EeF3C0a291fa5621Ec252529b",
@@ -245,13 +244,13 @@ export const MARKETFREESWAPADDRESSES: {
     "137": "0x7c366961554c0E628C078FC990Df585b261b92f9",
   },
   Tradejoe: {
-    "43114":"0xb588B24fc7b63317F22F2896333Cb9a5F6A12701",
-    "43113":"0x" // testnet fuji
+    "43114": "0xb588B24fc7b63317F22F2896333Cb9a5F6A12701",
+    "43113": "0x", // testnet fuji
+  },
+  Lydia: {
+    "43114": "0x",
+    "43113": "0x", // testnet fuji
   },
-  Lydia:{
-    "43114":"0x",
-    "43113":"0x" // testnet fuji
-  }
 };
 
 export const FREESWAPACCOUNT: { [key: string]: string } = {
@@ -261,8 +260,7 @@ export const FREESWAPACCOUNT: { [key: string]: string } = {
   "137": "0xeBD0329E00B92898C9Ad614b001FdBD1d0e3E19D",
   "43113": "0x2fd48250aEdFE45D6BB9c22e4893F75A655D8e79",
   "43114": "0xeBD0329E00B92898C9Ad614b001FdBD1d0e3E19D",
-  
-}
+};
 export const OTHERMARKETADDRESSES: {
   [key: string]: { [key: string]: string };
 } = {
@@ -282,16 +280,16 @@ export const OTHERMARKETADDRESSES: {
     "80001": "0xaEBC5E5aC2Ad8680978Ce11d03048A4E2889DEbA",
     "42261": "0x3c5AAa6cAA82CC62327C7A0849e4d854B1905A3d",
     "42262": "0xFf672dB2558c8A78813EA3F61303460fcec656F7",
-    "43114":"0x"
+    "43114": "0x",
   },
   Tradejoe: {
-    "43114":"0x60aE616a2155Ee3d9A68541Ba4544862310933d4",
-    "43113":"0x" // testnet fuji
+    "43114": "0x60aE616a2155Ee3d9A68541Ba4544862310933d4",
+    "43113": "0x", // testnet fuji
+  },
+  Lydia: {
+    "43114": "0xA52aBE4676dbfd04Df42eF7755F01A3c41f28D27",
+    "43113": "0x", // testnet fuji
   },
-  Lydia:{
-    "43114":"0xA52aBE4676dbfd04Df42eF7755F01A3c41f28D27",
-    "43113":"0x" // testnet fuji
-  }
   // "Sushiswap":{
   //   "56": "0x",
   //   "97": "0x"
@@ -316,16 +314,16 @@ export const OTHERMARKETFACTORYADDRESSES: {
     "80001": "0xC8F273a1656d26BB8ECBc8B267e53304533600c4",
     "42261": "0xF9d14C9516AF795ee2b5dca7479f927EEaC1EDdb",
     "42262": "0xCE2ca7C47813E86008B0f9D5d5661356c130997f",
-    "43114":"0x"
+    "43114": "0x",
   },
   Tradejoe: {
-    "43114":"0x9Ad6C38BE94206cA50bb0d90783181662f0Cfa10",
-    "43113":"0x" // testnet fuji
+    "43114": "0x9Ad6C38BE94206cA50bb0d90783181662f0Cfa10",
+    "43113": "0x", // testnet fuji
+  },
+  Lydia: {
+    "43114": "0xe0C1bb6DF4851feEEdc3E14Bd509FEAF428f7655",
+    "43113": "0x", // testnet fuji
   },
-  Lydia:{
-    "43114":"0xe0C1bb6DF4851feEEdc3E14Bd509FEAF428f7655",
-    "43113":"0x" // testnet fuji
-  }
   // "Sushiswap":{
   //   "56": "0x",
   //   "97": "0x"
@@ -339,7 +337,7 @@ export const AUTOSWAPSTATEADDRESSES: { [key: string]: string } = {
   "97": "0x97C982a4033d5fceD06Eedbee1Be10778E811D85",
   "137": "0xeBD0329E00B92898C9Ad614b001FdBD1d0e3E19D",
   "80001": "0x",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const RGPSPECIALPOOLADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -348,7 +346,7 @@ export const RGPSPECIALPOOLADDRESSES: { [key: string]: string } = {
   "97": "0x7fE2Ec631716FeF3657BcB8d80CffBB2A34F7617",
   "137": "0x60715e85cba9892addc49830cf0655cf5fb09c3a",
   "80001": "0x60715e85cba9892addc49830cf0655cf5fb09c3a",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const PRODUCTSTAKINGADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -357,7 +355,7 @@ export const PRODUCTSTAKINGADDRESSES: { [key: string]: string } = {
   "97": "0xD6D68fDCdDd66032de6bDdA2238C897419e194f1",
   "137": "0x5568f795aaf37b08274727b576567c580d3481d5",
   "80001": "0x",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const RGPSPECIALPOOLADDRESSES2: { [key: string]: string } = {
@@ -369,7 +367,7 @@ export const RGPSPECIALPOOLADDRESSES2: { [key: string]: string } = {
   "80001": "0x68faD2316B3f61516B2C35CEc4aCA5D5316dF00C",
   "42261": "0x9D5b588E5DaAC8055886D055418425c96faF9F56",
   "42262": "0x9D5b588E5DaAC8055886D055418425c96faF9F56",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN1ADDRESSES: { [key: string]: string } = {
@@ -381,7 +379,7 @@ export const SMARTSWAPLP_TOKEN1ADDRESSES: { [key: string]: string } = {
   "80001": "0x3D1f9e40cF80bdaadE5b38D45F136b9c3188c94F",
   "42261": "0xE25250b58CA392c708Dd81E1D3929618842ae1e1",
   "42262": "0xd483159966Ad9E91aC9DD092FCbB0070Ce9fE31e",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const SMARTSWAPLP_TOKEN2ADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -392,7 +390,7 @@ export const SMARTSWAPLP_TOKEN2ADDRESSES: { [key: string]: string } = {
   "80001": "0x04D71B3c43744bc2cDD30b57209C8EC189511AD6",
   "42261": "0x7cd4f262E0b9C41A462f4994F080d693aBC77c25",
   "42262": "0x93b2F92E302834103fF007fa677cd4141C2A6042",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const SMARTSWAPLP_TOKEN3ADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -403,7 +401,7 @@ export const SMARTSWAPLP_TOKEN3ADDRESSES: { [key: string]: string } = {
   "80001": "0x636a3eAacc6ab7B443305F0b39aaDe9DCB3f2A14",
   "42261": "0x2a3288Fda2eC1C6C6C91cA327A5060d3d5aef43D",
   "42262": "0x1a7D29455A551Cb778746AecaB43f1d26A262Bc3",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const SMARTSWAPLP_TOKEN4ADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -412,7 +410,7 @@ export const SMARTSWAPLP_TOKEN4ADDRESSES: { [key: string]: string } = {
   "97": "0x30d8621d919b69c0D7920A7dC8936d457F3f8965",
   "137": "0x0e879267413b63d7d354a8b88aeeba013b13d6c9",
   "80001": "0x0E879267413B63D7d354A8b88AEEBa013b13d6C9",
-  "43114":"0x"
+  "43114": "0x",
 };
 export const SMARTSWAPLP_TOKEN5ADDRESSES: { [key: string]: string } = {
   "1": "0x",
@@ -421,7 +419,7 @@ export const SMARTSWAPLP_TOKEN5ADDRESSES: { [key: string]: string } = {
   "97": "0x816b823d9C7F30327B2c626DEe4aD731Dc9D3641",
   "137": "0x7f14147c97efdc682ec4dda8b557dfc0b495517f",
   "80001": "0x7f14147C97EfDc682eC4dDA8B557DFC0b495517F",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN6ADDRESSES: { [key: string]: string } = {
@@ -431,7 +429,7 @@ export const SMARTSWAPLP_TOKEN6ADDRESSES: { [key: string]: string } = {
   "97": "0x5906a2f01a2fC5d6147f233970531797aD03F624",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN7ADDRESSES: { [key: string]: string } = {
@@ -441,7 +439,7 @@ export const SMARTSWAPLP_TOKEN7ADDRESSES: { [key: string]: string } = {
   "97": "0xE25E2907749df9B21C23196469ff40C597c4914D",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN8ADDRESSES: { [key: string]: string } = {
@@ -451,7 +449,7 @@ export const SMARTSWAPLP_TOKEN8ADDRESSES: { [key: string]: string } = {
   "97": "0x52D48BcDe6EE6f31c8d80fCDd7ac0B07710f9449",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN9ADDRESSES: { [key: string]: string } = {
@@ -461,7 +459,7 @@ export const SMARTSWAPLP_TOKEN9ADDRESSES: { [key: string]: string } = {
   "97": "0x6F2eF79CB0f64D3Ad0f72174Aae8EC47033E82Fb",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN12ADDRESSES: { [key: string]: string } = {
@@ -471,7 +469,7 @@ export const SMARTSWAPLP_TOKEN12ADDRESSES: { [key: string]: string } = {
   "97": "0x67475ffAb02F2d1061077d2519404AFCEDe2FCb6",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const SMARTSWAPLP_TOKEN13ADDRESSES: { [key: string]: string } = {
@@ -481,7 +479,7 @@ export const SMARTSWAPLP_TOKEN13ADDRESSES: { [key: string]: string } = {
   "97": "0x612fAC88D7310f4371018E8d76111Efd2221D30c",
   "137": "0x",
   "80001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 export const RGP: { [key: string]: string } = {
@@ -493,9 +491,8 @@ export const RGP: { [key: string]: string } = {
   "80001": "0x8E62F88FD28F95cE0dD0557c8419215b5599CE64",
   "42261": "0x2d2cd8ED2ec05A55162308332C40C3eF1994F59D",
   "42262": "0x4AF5ff1A60a6eF6C7c8f9C4E304cD9051fCa3Ec0",
-  "43114":"0x",
-  "43113":"0x59F48ce93eb317f4628C68BbcF6CB7937a25662D" //fuji testnet
-
+  "43114": "0x",
+  "43113": "0x59F48ce93eb317f4628C68BbcF6CB7937a25662D", //fuji testnet
 };
 
 //BUSD addresses
@@ -506,7 +503,7 @@ export const BUSD: { [key: string]: string } = {
   "97": "0x10249E900B919FDEe9e2ED38b4cd83C4df857254",
   "137": "0xdAb529f40E671A1D4bF91361c21bf9f0C9712ab7",
   "8001": "",
-  "43114":"0x"
+  "43114": "0x",
 };
 
 //USDT addresses
@@ -519,7 +516,7 @@ export const USDT: { [key: string]: string } = {
   "80001": "0x7E1cF971de65eB065A72595B3Ac9e1b9Cc630564",
   "42262": "0xdC19A122e268128B5eE20366299fc7b5b199C8e3",
   "42261": "0xa30b641533D2509089CeF6F097a5BFB62dF7BC8b",
-  "43114":"0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7"
+  "43114": "0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7",
 };
 
 export const USDC: { [key: string]: string } = {
diff --git a/src/utils/constants/tokenList/rigelprotocol-default.tokenList.json b/src/utils/constants/tokenList/rigelprotocol-default.tokenList.json
index c39ecfb2..e55fdcc4 100644
--- a/src/utils/constants/tokenList/rigelprotocol-default.tokenList.json
+++ b/src/utils/constants/tokenList/rigelprotocol-default.tokenList.json
@@ -34,6 +34,23 @@
       "decimals": 18,
       "logoURI": "https://pancakeswap.finance/images/tokens/0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c.png"
     },
+    {
+      "name": "Tether USD",
+      "symbol": "USDT",
+      "address": "0x55d398326f99059fF775485246999027B3197955",
+      "chainId": 56,
+      "decimals": 18,
+      "logoURI": "https://raw.githubusercontent.com/compound-finance/token-list/master/assets/asset_USDT.svg"
+    },
+
+    {
+      "name": "FDUSD Token",
+      "symbol": "FDUSD",
+      "address": "0x14f4F032998326365943D326bFA2e31Ed716bfC5",
+      "chainId": 56,
+      "decimals": 18,
+      "logoURI": "https://www.bscscan.com/token/images/fdusd_32.png"
+    },
     {
       "name": "BUSD Token",
       "symbol": "BUSD",
@@ -42,6 +59,7 @@
       "decimals": 18,
       "logoURI": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/binance/assets/BUSD-BD1/logo.png"
     },
+
     {
       "name": "Axie Infinity Shard",
       "symbol": "AXS",
@@ -50,14 +68,7 @@
       "logoURI": "https://www.bscscan.com/token/images/axieinfinity_32.png",
       "address": "0x715D400F88C167884bbCc41C5FeA407ed4D2f8A0"
     },
-    {
-      "name": "Tether USD",
-      "symbol": "USDT",
-      "address": "0x55d398326f99059fF775485246999027B3197955",
-      "chainId": 56,
-      "decimals": 18,
-      "logoURI": "https://raw.githubusercontent.com/compound-finance/token-list/master/assets/asset_USDT.svg"
-    },
+
     {
       "name": "AXSToken",
       "symbol": "AXS",
diff --git a/src/utils/hooks/useAccountHistory.ts b/src/utils/hooks/useAccountHistory.ts
index d245262b..acfdbda2 100644
--- a/src/utils/hooks/useAccountHistory.ts
+++ b/src/utils/hooks/useAccountHistory.ts
@@ -1,442 +1,517 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useWeb3React } from '@web3-react/core';
+import { useEffect, useMemo, useState } from "react";
+import { useWeb3React } from "@web3-react/core";
 // import mainToken from '../../utils/main-token.json';
-import mainToken from "../../utils/constants/tokenList/rigelprotocol-main-tokenlist.json"
-import TokenLogo from '../../assets/Null-24.svg';
+import mainToken from "../../utils/constants/tokenList/rigelprotocol-main-tokenlist.json";
+import TokenLogo from "../../assets/Null-24.svg";
 import { getERC20Token } from "../utilsFunctions";
-import { ethers } from 'ethers';
-import SmartSwapRouter02 from '../abis/swapAbiForDecoder.json';
-import FreeswapContract from "../abis/autoswap.json"
+import { ethers } from "ethers";
+import SmartSwapRouter02 from "../abis/swapAbiForDecoder.json";
+import FreeswapContract from "../abis/autoswap.json";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state";
-import { useLocation } from 'react-router-dom';
-import { SMARTSWAPROUTER, WNATIVEADDRESSES, AUTOSWAPSTATEADDRESSES, MARKETFREESWAPADDRESSES, FREESWAPACCOUNT, MARKETAUTOSWAPADDRESSES } from "../addresses";
-import Web3 from 'web3';
+import { useLocation } from "react-router-dom";
+import {
+  SMARTSWAPROUTER,
+  WNATIVEADDRESSES,
+  AUTOSWAPSTATEADDRESSES,
+  MARKETFREESWAPADDRESSES,
+  FREESWAPACCOUNT,
+  MARKETAUTOSWAPADDRESSES,
+} from "../addresses";
+import Web3 from "web3";
 import { useNativeBalance } from "../../utils/hooks/useBalances";
-import { ParseFloat } from '..';
-import { notificationTab } from '../../state/transaction/actions';
-import { ZERO_ADDRESS } from '../../constants';
-import { SupportedChainName, SupportedChainSymbols } from '../constants/chains';
-import { useActiveWeb3React } from './useActiveWeb3React';
+import { ParseFloat } from "..";
+import { notificationTab } from "../../state/transaction/actions";
+import { ZERO_ADDRESS } from "../../constants";
+import { SupportedChainName, SupportedChainSymbols } from "../constants/chains";
+import { useActiveWeb3React } from "./useActiveWeb3React";
+import { SERVER_ENV } from "../../constants/chains";
 
-const abiDecoder = require('abi-decoder');
+const abiDecoder = require("abi-decoder");
 
 export function timeConverter(UNIX_timestamp: any) {
-    const a = new Date(UNIX_timestamp * 1000);
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    const year = a.getFullYear();
-    const month = months[a.getMonth()];
-    const date = a.getDate();
-    const hour = a.getHours() < 10 ? `0${a.getHours()}` : a.getHours();
-    const min = a.getMinutes()<10 ? `0${a.getMinutes()}` : a.getMinutes();
-    const sec = a.getSeconds() < 10 ? `0${a.getSeconds()}` : a.getSeconds();
-    return date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec;
+  const a = new Date(UNIX_timestamp * 1000);
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  const year = a.getFullYear();
+  const month = months[a.getMonth()];
+  const date = a.getDate();
+  const hour = a.getHours() < 10 ? `0${a.getHours()}` : a.getHours();
+  const min = a.getMinutes() < 10 ? `0${a.getMinutes()}` : a.getMinutes();
+  const sec = a.getSeconds() < 10 ? `0${a.getSeconds()}` : a.getSeconds();
+  return date + " " + month + " " + year + " " + hour + ":" + min + ":" + sec;
 }
 
 export const APIENDPOINT: { [key: string]: string } = {
-    "1": "",
-    "3": "",
-    "56": "api.bscscan.com/api",
-    "97": "api-testnet.bscscan.com/api",
-    "137": "api.polygonscan.com/api",
-    "80001": "api-testnet.polygonscan.com/api",
-    "42261": "testnet.explorer.emerald.oasis.dev/api",
-    "42262": "explorer.emerald.oasis.dev/api",
-    "43114": "api.avax-test.network/ext/bc/C/rpc",
-    "43113": "api.avax.network/ext/bc/C/rpc",
+  "1": "",
+  "3": "",
+  "56": "api.bscscan.com/api",
+  "97": "api-testnet.bscscan.com/api",
+  "137": "api.polygonscan.com/api",
+  "80001": "api-testnet.polygonscan.com/api",
+  "42261": "testnet.explorer.emerald.oasis.dev/api",
+  "42262": "explorer.emerald.oasis.dev/api",
+  "43114": "api.avax-test.network/ext/bc/C/rpc",
+  "43113": "api.avax.network/ext/bc/C/rpc",
 };
 
 export const APIKEY: { [key: string]: string } = {
-    "1": "",
-    "3": "",
-    "56": "AATZWFQ47VX3Y1DN7M97BJ5FEJR6MGRQSD",
-    "97": "AATZWFQ47VX3Y1DN7M97BJ5FEJR6MGRQSD",
-    "137": "89B4F6NVVEVGC8EMDCJVRJMVGSCVHHZTR7",
-    "80001": "89B4F6NVVEVGC8EMDCJVRJMVGSCVHHZTR7",
-    "42261": "",
-    "42262": "",
-    "43114": "",
-    "43113": "",
+  "1": "",
+  "3": "",
+  "56": "AATZWFQ47VX3Y1DN7M97BJ5FEJR6MGRQSD",
+  "97": "AATZWFQ47VX3Y1DN7M97BJ5FEJR6MGRQSD",
+  "137": "89B4F6NVVEVGC8EMDCJVRJMVGSCVHHZTR7",
+  "80001": "89B4F6NVVEVGC8EMDCJVRJMVGSCVHHZTR7",
+  "42261": "",
+  "42262": "",
+  "43114": "",
+  "43113": "",
 };
 
 interface DataIncoming {
-    inputAmount: string,
-    outputAmount: string,
-    tokenIn: string,
-    tokenOut: string,
-    time: string,
-    name: string,
-    frequency: string,
-    id: string,
-    transactionHash: string,
-    error: [],
-    status: number,
-    currentToPrice?: string,
-    chainID?:string,
-    orderID?:string,
-    initialFromPrice?:string,
-    initialToPrice?:string,
-    situation?:string,
-    pathSymbol?:string,
-    market?:string,
-    totalTransaction?:string
+  inputAmount: string;
+  outputAmount: string;
+  tokenIn: string;
+  tokenOut: string;
+  time: string;
+  name: string;
+  frequency: string;
+  id: string;
+  transactionHash: string;
+  error: [];
+  status: number;
+  currentToPrice?: string;
+  chainID?: string;
+  orderID?: string;
+  initialFromPrice?: string;
+  initialToPrice?: string;
+  situation?: string;
+  pathSymbol?: string;
+  market?: string;
+  totalTransaction?: string;
 }
 let web3 = new Web3(Web3.givenProvider);
 export const formatAmount = (number: string, decimals: any) => {
-    const num = ethers.BigNumber.from(number).toString();
-    let res = ethers.utils.formatUnits(num, decimals)
-    res = ParseFloat(res, 3)
-    return res;
+  const num = ethers.BigNumber.from(number).toString();
+  let res = ethers.utils.formatUnits(num, decimals);
+  res = ParseFloat(res, 3);
+  return res;
 };
 
 export const getTokenSymbol = (symbol: string) => {
-    const tokenList = mainToken;
-    let tokenIcon = tokenList.tokens.find(token => token.symbol === symbol);
+  const tokenList = mainToken;
+  let tokenIcon = tokenList.tokens.find((token) => token.symbol === symbol);
 
-    if (!tokenIcon) {
-        return TokenLogo
-    }
+  if (!tokenIcon) {
+    return TokenLogo;
+  }
 
-    return tokenIcon.logoURI
+  return tokenIcon.logoURI;
 };
 
-
-
-
-const useAccountHistory = (socket:any) => {
-    const { account, chainId, library } = useActiveWeb3React();
-    const [loading, setLoading] = useState(false);
-    const [historyData, setHistoryData] = useState({} as any);
-    const [stateAccount, setStateAccount] = useState(account)
-    const [locationData, setLocationData] = useState("swap")
-    const [URL, setURL] = useState("https://autoswap-server.herokuapp.com")//
-    const dispatch =useDispatch()
-    const [contractAddress, setContractAddress] = useState(SMARTSWAPROUTER[chainId as number])
-    const tokenList = async (addressName: string) => {
-        const token = await getERC20Token(addressName, library);
-        const name = token.name();
-        const symbol = token.symbol();
-        const { address } = token;
-        const decimals = token.decimals();
-        const standardToken = await Promise.all([name, symbol, address, decimals]);
-        const resolveToken = {
-            name: standardToken[0],
-            symbol: standardToken[1],
-            address: standardToken[2],
-            decimals: standardToken[3]
-        };
-        return address !== '0x' ? resolveToken : null;
+const useAccountHistory = (socket: any) => {
+  const { account, chainId, library } = useActiveWeb3React();
+  const [loading, setLoading] = useState(false);
+  const [historyData, setHistoryData] = useState({} as any);
+  const [stateAccount, setStateAccount] = useState(account);
+  const [locationData, setLocationData] = useState("swap");
+  const [URL, setURL] = useState(
+    SERVER_ENV.url.API_URL ?? "http://localhost:8000"
+  );
+  const dispatch = useDispatch();
+  const [contractAddress, setContractAddress] = useState(
+    SMARTSWAPROUTER[chainId as number]
+  );
+  const tokenList = async (addressName: string) => {
+    const token = await getERC20Token(addressName, library);
+    const name = token.name();
+    const symbol = token.symbol();
+    const { address } = token;
+    const decimals = token.decimals();
+    const standardToken = await Promise.all([name, symbol, address, decimals]);
+    const resolveToken = {
+      name: standardToken[0],
+      symbol: standardToken[1],
+      address: standardToken[2],
+      decimals: standardToken[3],
     };
+    return address !== "0x" ? resolveToken : null;
+  };
 
-
-
-
-    function decodeInput(input: string, ABI: any) {
-        abiDecoder.addABI(ABI);
-        let decoder = abiDecoder.decodeMethod(input);
-        return decoder
+  function decodeInput(input: string, ABI: any) {
+    abiDecoder.addABI(ABI);
+    let decoder = abiDecoder.decodeMethod(input);
+    return decoder;
+  }
+  const refreshPage = useSelector(
+    (state: RootState) => state.transactions.refresh
+  );
+  const location = useLocation().pathname;
+  const [, Symbol, Name] = useNativeBalance();
+  useEffect(() => {
+    if (location.includes("autotrade")) {
+      setLocationData("auto");
+      setStateAccount(AUTOSWAPSTATEADDRESSES[chainId as number]);
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : chainId === 43114
+          ? "Tradejoe"
+          : "Pancakeswap";
+      console.log({ market });
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else if (location.includes("set-price")) {
+      setLocationData("price");
+      setStateAccount(AUTOSWAPSTATEADDRESSES[chainId as number]);
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : chainId === 43114
+          ? "Tradejoe"
+          : "Pancakeswap";
+      console.log({ market });
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else if (location.includes("freeswap")) {
+      setLocationData("freeswap");
+      setStateAccount(account);
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : chainId === 43114
+          ? "Tradejoe"
+          : "Pancakeswap";
+      console.log({ market });
+      console.log(MARKETFREESWAPADDRESSES[market][chainId as number], market);
+      setContractAddress(MARKETFREESWAPADDRESSES[market][chainId as number]);
+    } else {
+      setLocationData("swap");
+      setStateAccount(account);
+      setContractAddress(SMARTSWAPROUTER[chainId as number]);
     }
-   const refreshPage = useSelector((state: RootState) => state.transactions.refresh);
-    const location = useLocation().pathname;
-    const [, Symbol, Name,] = useNativeBalance()
-    useEffect(() => {
-        if (location.includes("autotrade")) {
-            setLocationData("auto")
-            setStateAccount(AUTOSWAPSTATEADDRESSES[chainId as number])
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : chainId ===43114? "Tradejoe" :  "Pancakeswap" 
-            console.log({market})
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else if (location.includes("set-price")) {
-            setLocationData("price")
-            setStateAccount(AUTOSWAPSTATEADDRESSES[chainId as number]) 
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : chainId ===43114? "Tradejoe" :  "Pancakeswap" 
-            console.log({market})
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else if(location.includes("freeswap")){
-            setLocationData("freeswap")
-            setStateAccount(account)
-     let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1): chainId ===43114? "Tradejoe" :  "Pancakeswap" 
-     console.log({market})
-     console.log(MARKETFREESWAPADDRESSES[market][chainId as number],market)
-            setContractAddress(MARKETFREESWAPADDRESSES[market][chainId as number])
-        } else {
-            setLocationData("swap")
-            setStateAccount(account)
-            setContractAddress(SMARTSWAPROUTER[chainId as number])
-        }
-        loadAccountHistory();
-    }, [chainId, account,location, contractAddress,refreshPage,locationData]);
-   
-    useEffect(() => {
-        socket?.on("success",()=>{
-            loadAccountHistory();
-        })
-        socket?.on("cleared",(page:string)=>{
-            if(page==="auto"){
-               dispatch(notificationTab({ autoTimeNotification:0})) 
-            }else{
-                dispatch(notificationTab({ setPriceNotification:0})) 
-            }
-            
-        })
-        
-    }, [socket]);
-
-    const getTransactionFromDatabase = async (address: string) => {
-        const data = await fetch(`${URL}/auto/data/all/${address}`)
-        const trans = await fetch(`${URL}/auto`)
-        const transaction = await data.json()
-        const database = await trans.json()
-        console.log({database,transaction})
-        return { transaction, database }
-    }
-    const api = APIENDPOINT[chainId as number];
-    const apikey = APIKEY[chainId as number];
-    const loadAccountHistory = async () => {
-        if (account && locationData) {
-            setLoading(true);
-            try {
-            let userData = []
-            if (location.includes("/swap")) {
-                const uri = `https://${api}?module=account&action=txlist&address=${account}&startblock=0
-                &endblock=latest&sort=desc&apikey=${apikey}`;
+    loadAccountHistory();
+  }, [chainId, account, location, contractAddress, refreshPage, locationData]);
 
-                const data = await fetch(uri);
-                const jsondata = await data.json();
-                const SwapTrx = jsondata.result.filter((item: any) => item.to == contractAddress);
-                
-                const dataFiltered = SwapTrx
-                    .filter((items: any) => decodeInput(items.input, SmartSwapRouter02) !== undefined) // && items.transactionHash !== "1"
-                    .map((items: any) => (
-                        {
-                        value: items.value,
-                        transactionObj: decodeInput(items.input, SmartSwapRouter02).params,
-                        timestamp: items.timeStamp,
-                        transactionFee: items.gasPrice * items.gasUsed,
-                        // name: decodeInput(items.input, locationData === "auto" ? AUTOSWAP : SmartSwapRouter02).name,
-                        transactionHash: items.hash,
-                        status: 10,
-                        chainID:items.chainID ,
-                        market:"",
-                        orderID:"",
-                    }));
+  useEffect(() => {
+    socket?.on("success", () => {
+      loadAccountHistory();
+    });
+    socket?.on("cleared", (page: string) => {
+      if (page === "auto") {
+        dispatch(notificationTab({ autoTimeNotification: 0 }));
+      } else {
+        dispatch(notificationTab({ setPriceNotification: 0 }));
+      }
+    });
+  }, [socket]);
 
-                const dataToUse = dataFiltered.length > 5 ? dataFiltered.splice(0, 5) : dataFiltered;
-                userData = dataToUse.map((data: any) => ({
-                    inputAmount:
-                        Number(data.value) > 0 ? data.value : data.transactionObj[0].value,
-                    outputAmount:
-                        Number(data.value) > 0
-                            ? data.transactionObj[0].value
-                            : data.transactionObj[1].value,
-                    tokenIn:
-                        Number(data.value) > 0
-                            ? data.transactionObj[1].value[0]
-                            : data.transactionObj[2].value[0],
-                    tokenOut:
-                        Number(data.value) > 0
-                            ? data.transactionObj[1].value[data.transactionObj[1].value.length - 1]
-                            : data.transactionObj[2].value[data.transactionObj[2].value.length - 1],
-                    time: timeConverter(data.timestamp),
-                    // name: data.name,
-                    frequency: "--",
-                    id: "",
-                    transactionHash: data.transactionHash,
-                    error: [],
-                    status: "10",
-                    situation:"",
-                    chainID:chainId,
-                    market:"",
-                    orderID:"",
-                }));
-            }
-            // else if(location.includes("freeswap")){
-            //     const uri = `https://${api}?module=account&action=txlist&address=${FREESWAPACCOUNT[chainId ?? 56]}&startblock=0
-            //     &endblock=latest&sort=desc&apikey=${apikey}`;
+  const getTransactionFromDatabase = async (address: string) => {
+    const data = await fetch(`${URL}/auto/data/all/${address}`);
+    const trans = await fetch(`${URL}/auto`);
+    const transaction = await data.json();
+    const database = await trans.json();
+    console.log({ database, transaction });
+    return { transaction, database };
+  };
+  const api = APIENDPOINT[chainId as number];
+  const apikey = APIKEY[chainId as number];
+  const loadAccountHistory = async () => {
+    if (account && locationData) {
+      setLoading(true);
+      try {
+        let userData = [];
+        if (location.includes("/swap")) {
+          const uri = `https://${api}?module=account&action=txlist&address=${account}&startblock=0
+                &endblock=latest&sort=desc&apikey=${apikey}`;
 
-            //     const data = await fetch(uri);
-            //     const jsondata = await data.json();
-            //     const SwapTrx = jsondata.result.filter((item: any) => item.to.toLowerCase() == contractAddress.toLowerCase());
-            //     console.log({SwapTrx,contractAddress,jsondata},FREESWAPACCOUNT[chainId ?? 56],)
-            //     const dataFiltered = SwapTrx
-            //     .filter((items: any) => decodeInput(items.input, FreeswapContract) !== undefined) 
-            //     .map((items: any) => (
-            //         {
-            //         value: items.value,
-            //         transactionObj: decodeInput(items.input, SmartSwapRouter02).params,
-            //         timestamp: items.timeStamp,
-            //         transactionFee: items.gasPrice * items.gasUsed,
-            //         // name: decodeInput(items.input, locationData === "auto" ? AUTOSWAP : SmartSwapRouter02).name,
-            //         transactionHash: items.hash,
-            //         status: 10,
-            //         chainID:items.chainID ,
-            //         market:"",
-            //         orderID:"",
-            //     }));
+          const data = await fetch(uri);
+          const jsondata = await data.json();
+          const SwapTrx = jsondata.result.filter(
+            (item: any) => item.to == contractAddress
+          );
 
-            // const dataToUse = dataFiltered.length > 5 ? dataFiltered.splice(0, 5) : dataFiltered;
-            // userData = dataToUse.map((data: any) => ({
-            //     inputAmount:
-            //         Number(data.value) > 0 ? data.value : data.transactionObj[3].value,
-            //     outputAmount:
-            //         Number(data.value) > 0
-            //             ? data.transactionObj[0].value
-            //             : data.transactionObj[1].value,
-            //     tokenIn:
-            //         Number(data.value) > 0
-            //             ? data.transactionObj[1].value[0]
-            //             : data.transactionObj[2].value[0],
-            //     tokenOut:
-            //         Number(data.value) > 0
-            //             ? data.transactionObj[1].value[data.transactionObj[1].value.length - 1]
-            //             : data.transactionObj[2].value[data.transactionObj[2].value.length - 1],
-            //     time: timeConverter(data.timestamp),
-            //     // name: data.name,
-            //     frequency: "--",
-            //     id: "",
-            //     transactionHash: data.transactionHash,
-            //     error: [],
-            //     status: "10",
-            //     situation:"",
-            //     chainID:chainId,
-            //     market:"",
-            //     orderID:"",
-            // }));
-            // console.log({userData,dataToUse})
-            // }
+          const dataFiltered = SwapTrx.filter(
+            (items: any) =>
+              decodeInput(items.input, SmartSwapRouter02) !== undefined
+          ) // && items.transactionHash !== "1"
+            .map((items: any) => ({
+              value: items.value,
+              transactionObj: decodeInput(items.input, SmartSwapRouter02)
+                .params,
+              timestamp: items.timeStamp,
+              transactionFee: items.gasPrice * items.gasUsed,
+              // name: decodeInput(items.input, locationData === "auto" ? AUTOSWAP : SmartSwapRouter02).name,
+              transactionHash: items.hash,
+              status: 10,
+              chainID: items.chainID,
+              market: "",
+              orderID: "",
+            }));
 
-             else if ( location.includes("autotrade") || location.includes("set-price")) {
-                const { transaction, database } = await getTransactionFromDatabase(account)
-                console.log({transaction,database})
-                if (transaction.length > 0) {
-                    
-                    dispatch(notificationTab({ 
-                    autoTimeNotification:transaction[0].autoTimeNotification,
-                    setPriceNotification:transaction[0].setPriceNotification,
-                    address:transaction[0].address }))
-                    const collapsedTransaction = transaction[0].transaction
-                    let result = []
-                    if (locationData === "auto") {
-                        result = collapsedTransaction.filter((data: any) => data.typeOfTransaction === "Auto Time")
-                        
-                        // result = newArray
-                    } else if (locationData === "price") {
-                        result = collapsedTransaction.filter((data: any) => data.typeOfTransaction === "Set Price")
-                    }
-                        result = result.filter((item:any)=> (item.status === 1 || item.status === 0) && parseInt(item.chainID) === chainId).reverse()
-                    userData = await Promise.all(result.map(async (data: any) => {
-                        return {
-                            inputAmount: data.amountToSwap,
-                            outputAmount: data.typeOfTransaction==="Set Price" && data.status!==1 ?
-                            parseFloat(data.percentageChange).toFixed(4) :
-                            data.typeOfTransaction==="Auto Time" && data.status!==1 ?
-                            parseFloat(data.currentToPrice).toFixed(4) :
-                            parseFloat(data.actualToPrice).toFixed(4),
-                            tokenIn: data.swapFromToken,
-                            tokenOut: data.swapToToken,
-                            time: data.time && timeConverter(parseInt(data.time)),
-                            name: data ? data.typeOfTransaction : "",
-                            frequency: data ? data.frequency : "--",
-                            id: data ? data.id : "",
-                            transactionHash: data.transactionHash,
-                            error: data.errorArray,
-                            status: data.status,
-                            currentToPrice: data.typeOfTransaction === "Set Price" ? data.currentToPrice : data.percentageChange,
-                            chainID:data.chainID ,
-                            orderID:data.orderID ,
-                            initialFromPrice:data.initialFromPrice,
-                            initialToPrice:data.initialToPrice,
-                            situation:data.situation,
-                            pathSymbol:data.pathSymbol,
-                            market:data.market,
-                            totalTransaction:data.totalNumberOfTransaction
-                        }
-                    })
-                    )
-                    console.log({userData})
-                }
+          const dataToUse =
+            dataFiltered.length > 5 ? dataFiltered.splice(0, 5) : dataFiltered;
+          userData = dataToUse.map((data: any) => ({
+            inputAmount:
+              Number(data.value) > 0
+                ? data.value
+                : data.transactionObj[0].value,
+            outputAmount:
+              Number(data.value) > 0
+                ? data.transactionObj[0].value
+                : data.transactionObj[1].value,
+            tokenIn:
+              Number(data.value) > 0
+                ? data.transactionObj[1].value[0]
+                : data.transactionObj[2].value[0],
+            tokenOut:
+              Number(data.value) > 0
+                ? data.transactionObj[1].value[
+                    data.transactionObj[1].value.length - 1
+                  ]
+                : data.transactionObj[2].value[
+                    data.transactionObj[2].value.length - 1
+                  ],
+            time: timeConverter(data.timestamp),
+            // name: data.name,
+            frequency: "--",
+            id: "",
+            transactionHash: data.transactionHash,
+            error: [],
+            status: "10",
+            situation: "",
+            chainID: chainId,
+            market: "",
+            orderID: "",
+          }));
+        }
+        // else if(location.includes("freeswap")){
+        //     const uri = `https://${api}?module=account&action=txlist&address=${FREESWAPACCOUNT[chainId ?? 56]}&startblock=0
+        //     &endblock=latest&sort=desc&apikey=${apikey}`;
 
+        //     const data = await fetch(uri);
+        //     const jsondata = await data.json();
+        //     const SwapTrx = jsondata.result.filter((item: any) => item.to.toLowerCase() == contractAddress.toLowerCase());
+        //     console.log({SwapTrx,contractAddress,jsondata},FREESWAPACCOUNT[chainId ?? 56],)
+        //     const dataFiltered = SwapTrx
+        //     .filter((items: any) => decodeInput(items.input, FreeswapContract) !== undefined)
+        //     .map((items: any) => (
+        //         {
+        //         value: items.value,
+        //         transactionObj: decodeInput(items.input, SmartSwapRouter02).params,
+        //         timestamp: items.timeStamp,
+        //         transactionFee: items.gasPrice * items.gasUsed,
+        //         // name: decodeInput(items.input, locationData === "auto" ? AUTOSWAP : SmartSwapRouter02).name,
+        //         transactionHash: items.hash,
+        //         status: 10,
+        //         chainID:items.chainID ,
+        //         market:"",
+        //         orderID:"",
+        //     }));
 
+        // const dataToUse = dataFiltered.length > 5 ? dataFiltered.splice(0, 5) : dataFiltered;
+        // userData = dataToUse.map((data: any) => ({
+        //     inputAmount:
+        //         Number(data.value) > 0 ? data.value : data.transactionObj[3].value,
+        //     outputAmount:
+        //         Number(data.value) > 0
+        //             ? data.transactionObj[0].value
+        //             : data.transactionObj[1].value,
+        //     tokenIn:
+        //         Number(data.value) > 0
+        //             ? data.transactionObj[1].value[0]
+        //             : data.transactionObj[2].value[0],
+        //     tokenOut:
+        //         Number(data.value) > 0
+        //             ? data.transactionObj[1].value[data.transactionObj[1].value.length - 1]
+        //             : data.transactionObj[2].value[data.transactionObj[2].value.length - 1],
+        //     time: timeConverter(data.timestamp),
+        //     // name: data.name,
+        //     frequency: "--",
+        //     id: "",
+        //     transactionHash: data.transactionHash,
+        //     error: [],
+        //     status: "10",
+        //     situation:"",
+        //     chainID:chainId,
+        //     market:"",
+        //     orderID:"",
+        // }));
+        // console.log({userData,dataToUse})
+        // }
+        else if (
+          location.includes("autotrade") ||
+          location.includes("set-price")
+        ) {
+          const { transaction, database } = await getTransactionFromDatabase(
+            account
+          );
+          console.log({ transaction, database });
+          if (transaction.length > 0) {
+            dispatch(
+              notificationTab({
+                autoTimeNotification: transaction[0].autoTimeNotification,
+                setPriceNotification: transaction[0].setPriceNotification,
+                address: transaction[0].address,
+              })
+            );
+            const collapsedTransaction = transaction[0].transaction;
+            let result = [];
+            if (locationData === "auto") {
+              result = collapsedTransaction.filter(
+                (data: any) => data.typeOfTransaction === "Auto Time"
+              );
 
+              // result = newArray
+            } else if (locationData === "price") {
+              result = collapsedTransaction.filter(
+                (data: any) => data.typeOfTransaction === "Auto Limit"
+              );
             }
-            const swapDataForWallet = await Promise.all(
-                userData.map(async (data: DataIncoming) => ({
-                    tokenIn: data.chainID && data.tokenIn === "native" ? {
-                        name: SupportedChainName[data.chainID],
-                            symbol: SupportedChainSymbols[data.chainID],
-                        address: WNATIVEADDRESSES[chainId as number],
-                        decimals: 18
-                    } : await tokenList(data.tokenIn),
-                    tokenOut: data.chainID && data.tokenOut === "native" ? {
-                        name: SupportedChainName[data.chainID],
-                        symbol: SupportedChainSymbols[data.chainID],
-                        address: WNATIVEADDRESSES[chainId as number],
-                        decimals: 18
-                    } : await tokenList(data.tokenOut),
-                    amountIn: data.inputAmount,
-                    amountOut: data.outputAmount,
-                    time: data.time,
-                    name: data.name,
-                    frequency: data.frequency,
-                    id: data.id,
-                    transactionHash: data.transactionHash,
-                    error: data.error,
-                    status: data.status,
-                    currentToPrice: data.currentToPrice,
-                    chainID:data.chainID,
-                    initialFromPrice:data.initialFromPrice,
-                    initialToPrice:data.initialToPrice,
-                    situation:data.situation,
-                    pathSymbol:data.pathSymbol,
-                    market:data.market,
-                    orderID:data.orderID,  
-                    totalTransaction:data.totalTransaction                    
-                })),
+            result = result
+              .filter(
+                (item: any) =>
+                  (item.status === 1 || item.status === 0) &&
+                  parseInt(item.chainID) === chainId
+              )
+              .reverse();
+            userData = await Promise.all(
+              result.map(async (data: any) => {
+                return {
+                  inputAmount: data.amountToSwap,
+                  outputAmount:
+                    data.typeOfTransaction === "Auto Limit" && data.status !== 1
+                      ? parseFloat(data.percentageChange).toFixed(4)
+                      : data.typeOfTransaction === "Auto Time" &&
+                        data.status !== 1
+                      ? parseFloat(data.currentToPrice).toFixed(4)
+                      : parseFloat(data.actualToPrice).toFixed(4),
+                  tokenIn: data.swapFromToken,
+                  tokenOut: data.swapToToken,
+                  time: data.time && timeConverter(parseInt(data.time)),
+                  name: data ? data.typeOfTransaction : "",
+                  frequency: data ? data.frequency : "--",
+                  id: data ? data.id : "",
+                  transactionHash: data.transactionHash,
+                  error: data.errorArray,
+                  status: data.status,
+                  currentToPrice:
+                    data.typeOfTransaction === "Auto Limit"
+                      ? data.currentToPrice
+                      : data.percentageChange,
+                  chainID: data.chainID,
+                  orderID: data.orderID,
+                  initialFromPrice: data.initialFromPrice,
+                  initialToPrice: data.initialToPrice,
+                  situation: data.situation,
+                  pathSymbol: data.pathSymbol,
+                  market: data.market,
+                  totalTransaction: data.totalNumberOfTransaction,
+                };
+              })
             );
-            console.log({swapDataForWallet})
-            const userSwapHistory = swapDataForWallet.map((data: any) => ({
-                token1Icon:
-                    getTokenSymbol(data.tokenIn.symbol),
-                token2Icon:
-                    getTokenSymbol(data.tokenOut.symbol),
-                token1: data.tokenIn,
-                token2: data.tokenOut,
-                amountIn: data.tokenIn?.name === SupportedChainName[data.chainID as number] ? parseFloat(formatAmount(data.amountIn, data.tokenIn.decimals))/ data.totalTransaction : formatAmount(data.amountIn, data.tokenIn.decimals)  ,
-                amountOut:  data.name==="Set Price" || data.name==="Auto Time" ? data.amountOut : 
-                formatAmount(data.amountOut, data.tokenOut.decimals),
-
-                time: data.time,
-                name: data.name,
-                frequency: data.frequency,
-                id: data.id,
-                transactionHash: data.transactionHash,
-                error: data.error,
-                status: data.status,
-                currentToPrice: data.currentToPrice,
-                chainID:data.chainID,
-                initialFromPrice:data.initialFromPrice,
-                initialToPrice:data.initialToPrice,
-                situation:data.situation,
-                pathSymbol:data.pathSymbol,
-                market:data.market,
-                orderID:data.orderID,
-            }));
-            console.log({userSwapHistory})
-            setHistoryData(userSwapHistory);
-
-            setLoading(false);
+            console.log({ userData });
+          }
+        }
+        const swapDataForWallet = await Promise.all(
+          userData.map(async (data: DataIncoming) => ({
+            tokenIn:
+              data.chainID && data.tokenIn === "native"
+                ? {
+                    name: SupportedChainName[data.chainID],
+                    symbol: SupportedChainSymbols[data.chainID],
+                    address: WNATIVEADDRESSES[chainId as number],
+                    decimals: 18,
+                  }
+                : await tokenList(data.tokenIn),
+            tokenOut:
+              data.chainID && data.tokenOut === "native"
+                ? {
+                    name: SupportedChainName[data.chainID],
+                    symbol: SupportedChainSymbols[data.chainID],
+                    address: WNATIVEADDRESSES[chainId as number],
+                    decimals: 18,
+                  }
+                : await tokenList(data.tokenOut),
+            amountIn: data.inputAmount,
+            amountOut: data.outputAmount,
+            time: data.time,
+            name: data.name,
+            frequency: data.frequency,
+            id: data.id,
+            transactionHash: data.transactionHash,
+            error: data.error,
+            status: data.status,
+            currentToPrice: data.currentToPrice,
+            chainID: data.chainID,
+            initialFromPrice: data.initialFromPrice,
+            initialToPrice: data.initialToPrice,
+            situation: data.situation,
+            pathSymbol: data.pathSymbol,
+            market: data.market,
+            orderID: data.orderID,
+            totalTransaction: data.totalTransaction,
+          }))
+        );
+        console.log({ swapDataForWallet });
+        const userSwapHistory = swapDataForWallet.map((data: any) => ({
+          token1Icon: getTokenSymbol(data.tokenIn.symbol),
+          token2Icon: getTokenSymbol(data.tokenOut.symbol),
+          token1: data.tokenIn,
+          token2: data.tokenOut,
+          amountIn:
+            data.tokenIn?.name === SupportedChainName[data.chainID as number]
+              ? parseFloat(formatAmount(data.amountIn, data.tokenIn.decimals)) /
+                data.totalTransaction
+              : formatAmount(data.amountIn, data.tokenIn.decimals),
+          amountOut:
+            data.name === "Auto Limit" || data.name === "Auto Time"
+              ? data.amountOut
+              : formatAmount(data.amountOut, data.tokenOut.decimals),
 
+          time: data.time,
+          name: data.name,
+          frequency: data.frequency,
+          id: data.id,
+          transactionHash: data.transactionHash,
+          error: data.error,
+          status: data.status,
+          currentToPrice: data.currentToPrice,
+          chainID: data.chainID,
+          initialFromPrice: data.initialFromPrice,
+          initialToPrice: data.initialToPrice,
+          situation: data.situation,
+          pathSymbol: data.pathSymbol,
+          market: data.market,
+          orderID: data.orderID,
+        }));
+        console.log({ userSwapHistory });
+        setHistoryData(userSwapHistory);
 
-            } catch (e) {
-                console.log(e);
-                setLoading(false);
-                setHistoryData({})
-            }
-        } else {
-            console.log('Wallet disconnected')
-        }
-    };
-    return { historyData, loading, locationData }
+        setLoading(false);
+      } catch (e) {
+        console.log(e);
+        setLoading(false);
+        setHistoryData({});
+      }
+    } else {
+      console.log("Wallet disconnected");
+    }
+  };
+  return { historyData, loading, locationData };
 };
 
 export default useAccountHistory;
diff --git a/src/utils/hooks/useMarketHistory.ts b/src/utils/hooks/useMarketHistory.ts
index 1b2f56cf..fe3cefdc 100644
--- a/src/utils/hooks/useMarketHistory.ts
+++ b/src/utils/hooks/useMarketHistory.ts
@@ -1,287 +1,336 @@
-import { useEffect, useState } from 'react';
-import { useWeb3React } from '@web3-react/core';
-import SmartSwapRouter02 from '../abis/swapAbiForDecoder.json';
-import { timeConverter, getTokenSymbol, formatAmount, APIENDPOINT, APIKEY } from "./useAccountHistory";
-import {  MARKETAUTOSWAPADDRESSES, SMARTSWAPROUTER, WNATIVEADDRESSES } from "../addresses";
-import { getERC20Token } from '../utilsFunctions';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../state';
-import { useLocation } from 'react-router-dom';
-import { useNativeBalance } from './useBalances';
-import { SmartSwapRouter } from '../Contracts';
-import { SupportedChainName, SupportedChainSymbols } from '../constants/chains';
+import { useEffect, useState } from "react";
+import { useWeb3React } from "@web3-react/core";
+import SmartSwapRouter02 from "../abis/swapAbiForDecoder.json";
+import {
+  timeConverter,
+  getTokenSymbol,
+  formatAmount,
+  APIENDPOINT,
+  APIKEY,
+} from "./useAccountHistory";
+import {
+  MARKETAUTOSWAPADDRESSES,
+  SMARTSWAPROUTER,
+  WNATIVEADDRESSES,
+} from "../addresses";
+import { getERC20Token } from "../utilsFunctions";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state";
+import { useLocation } from "react-router-dom";
+import { useNativeBalance } from "./useBalances";
+import { SmartSwapRouter } from "../Contracts";
+import { SupportedChainName, SupportedChainSymbols } from "../constants/chains";
+import { SERVER_ENV } from "../../constants/chains";
 
-
-
-const abiDecoder = require('abi-decoder');
+const abiDecoder = require("abi-decoder");
 
 interface DataIncoming {
-    inputAmount: string,
-    outputAmount: string,
-    tokenIn: string,
-    tokenOut: string,
-    time: string,
-    name: string,
-    frequency: string,
-    id: string,
-    transactionHash: string,
-    error: [],
-    status: number,
-    currentToPrice?: string,
-    chainID:string,
-    market:string
+  inputAmount: string;
+  outputAmount: string;
+  tokenIn: string;
+  tokenOut: string;
+  time: string;
+  name: string;
+  frequency: string;
+  id: string;
+  transactionHash: string;
+  error: [];
+  status: number;
+  currentToPrice?: string;
+  chainID: string;
+  market: string;
 }
 
-const useMarketHistory = (socket:any) => {
-    const { account, chainId, library } = useWeb3React();
-    const [loadMarketData, setLoadMarketData] = useState(false);
-    const [marketHistoryData, setMarketHistoryData] = useState({} as any);
-    const [stateAccount, setStateAccount] = useState(account)
-    const [locationData, setLocationData] = useState("swap")
-    const [URL, setURL] = useState("https://autoswap-server.herokuapp.com")//
-    const [contractAddress, setContractAddress] = useState(SMARTSWAPROUTER[chainId as number])
+const useMarketHistory = (socket: any) => {
+  const { account, chainId, library } = useWeb3React();
+  const [loadMarketData, setLoadMarketData] = useState(false);
+  const [marketHistoryData, setMarketHistoryData] = useState({} as any);
+  const [stateAccount, setStateAccount] = useState(account);
+  const [locationData, setLocationData] = useState("swap");
+  const [URL, setURL] = useState(
+    SERVER_ENV.url.API_URL ?? "http://localhost:8000"
+  );
+  const [contractAddress, setContractAddress] = useState(
+    SMARTSWAPROUTER[chainId as number]
+  );
 
-    const api = APIENDPOINT[chainId as number];
-    const apikey = APIKEY[chainId as number];
-    const refreshPage = useSelector((state: RootState) => state.transactions.refresh);
-    const location = useLocation().pathname;
-    const [, Symbol, Name,] = useNativeBalance()
-    function decodeInput(input: string, ABI: any) {
-        abiDecoder.addABI(ABI);
-        let decoder = abiDecoder.decodeMethod(input);
-        return decoder
+  const api = APIENDPOINT[chainId as number];
+  const apikey = APIKEY[chainId as number];
+  const refreshPage = useSelector(
+    (state: RootState) => state.transactions.refresh
+  );
+  const location = useLocation().pathname;
+  const [, Symbol, Name] = useNativeBalance();
+  function decodeInput(input: string, ABI: any) {
+    abiDecoder.addABI(ABI);
+    let decoder = abiDecoder.decodeMethod(input);
+    return decoder;
+  }
+  useEffect(() => {
+    if (location.includes("autotrade")) {
+      setLocationData("auto");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : "Pancakeswap";
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else if (location.includes("set-price")) {
+      setLocationData("price");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : "Pancakeswap";
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else {
+      setLocationData("swap");
+      setStateAccount(account);
+      setContractAddress(SMARTSWAPROUTER[chainId as number]);
     }
-    useEffect(() => {
-        if (location.includes("autotrade")) {
-            setLocationData("auto") 
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : "Pancakeswap" 
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else if (location.includes("set-price")) {
-            setLocationData("price")
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : "Pancakeswap" 
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else {
-            setLocationData("swap")
-            setStateAccount(account)
-            setContractAddress(SMARTSWAPROUTER[chainId as number])
-        }
-    }, [location, chainId])
-    useEffect(() => {
-        getMarketData();
-    }, [chainId, account, contractAddress,refreshPage,locationData]);
+  }, [location, chainId]);
+  useEffect(() => {
+    getMarketData();
+  }, [chainId, account, contractAddress, refreshPage, locationData]);
 
-    useEffect(() => {
-        socket?.on("success",()=>{
-            getMarketData();
-        })
-        
-    }, [socket]);
+  useEffect(() => {
+    socket?.on("success", () => {
+      getMarketData();
+    });
+  }, [socket]);
 
-    const tokenList = async (addressName: string) => {
-        const token = await getERC20Token(addressName, library);
-        const name = token.name();
-        const symbol = token.symbol();
-        const { address } = token;
-        const decimals = token.decimals();
-        const standardToken = await Promise.all([name, symbol, address, decimals]);
-        const resolveToken = {
-            name: standardToken[0],
-            symbol: standardToken[1],
-            address: standardToken[2],
-            decimals: standardToken[3]
-        };
-        return address !== '0x' ? resolveToken : null;
+  const tokenList = async (addressName: string) => {
+    const token = await getERC20Token(addressName, library);
+    const name = token.name();
+    const symbol = token.symbol();
+    const { address } = token;
+    const decimals = token.decimals();
+    const standardToken = await Promise.all([name, symbol, address, decimals]);
+    const resolveToken = {
+      name: standardToken[0],
+      symbol: standardToken[1],
+      address: standardToken[2],
+      decimals: standardToken[3],
     };
-    const getTransactionFromDatabase = async () => {
-        const data = await fetch(`${URL}/auto/transactions`)
-
-        const transaction = await data.json()
-       const transactions = transaction.reduce((array:any,item:any)=>{
-            const successfullyTransaction = item.transaction.filter((x:any) => x.transactionHash !== "" && x.status===1)
-            return [...array,...successfullyTransaction]
-       },[]).reverse()
-        return transactions
-    }
-
+    return address !== "0x" ? resolveToken : null;
+  };
+  const getTransactionFromDatabase = async () => {
+    const data = await fetch(`${URL}/auto/transactions`);
 
+    const transaction = await data.json();
+    const transactions = transaction
+      .reduce((array: any, item: any) => {
+        const successfullyTransaction = item.transaction.filter(
+          (x: any) => x.transactionHash !== "" && x.status === 1
+        );
+        return [...array, ...successfullyTransaction];
+      }, [])
+      .reverse();
+    return transactions;
+  };
 
-        const getMarketData = async () => {
-            if ((account && contractAddress && locationData)) {
-                setLoadMarketData(true);
-                try {
-                    let dataToUse = []
-                    if( location.includes("/swap")){
-                    const uri = `https://${api}?module=account&action=txlist&address=${contractAddress}&startblock=0
+  const getMarketData = async () => {
+    if (account && contractAddress && locationData) {
+      setLoadMarketData(true);
+      try {
+        let dataToUse = [];
+        if (location.includes("/swap")) {
+          const uri = `https://${api}?module=account&action=txlist&address=${contractAddress}&startblock=0
                     &endblock=latest&sort=desc&apikey=${apikey}`;
 
-                    const data = await fetch(uri);
-                    const jsonData = await data.json();
-
-
-                    const filteredData = jsonData.result
-                        .filter((items: any) => decodeInput(items.input,SmartSwapRouter02) !== undefined && items.isError !== "1")
-                        .map((items: any) => ({
-                            transactionObj: decodeInput(items.input,SmartSwapRouter02).params,
-                            timestamp: items.timeStamp,
-                            value: items.value,
-                            from: items.from,
-                            to: items.to,
-                            transactionHash: items.transactionHash,
-                        status: 10,
-                        chainID:items.chainID,
-                        market:"",
-                        orderID:""
-                        }));
+          const data = await fetch(uri);
+          const jsonData = await data.json();
 
+          const filteredData = jsonData.result
+            .filter(
+              (items: any) =>
+                decodeInput(items.input, SmartSwapRouter02) !== undefined &&
+                items.isError !== "1"
+            )
+            .map((items: any) => ({
+              transactionObj: decodeInput(items.input, SmartSwapRouter02)
+                .params,
+              timestamp: items.timeStamp,
+              value: items.value,
+              from: items.from,
+              to: items.to,
+              transactionHash: items.transactionHash,
+              status: 10,
+              chainID: items.chainID,
+              market: "",
+              orderID: "",
+            }));
 
-                    const marketData = filteredData.map((data: any) => ({
-                        inputAmount:
-                            Number(data.value) > 0 ? data.value : data.transactionObj[0].value,
-                        outputAmount:
-                            Number(data.value) > 0
-                                ? data.transactionObj[0].value
-                                : data.transactionObj[1].value,
-                        tokenIn:
-                            Number(data.value) > 0
-                                ? data.transactionObj[1].value[0]
+          const marketData = filteredData.map((data: any) => ({
+            inputAmount:
+              Number(data.value) > 0
+                ? data.value
+                : data.transactionObj[0].value,
+            outputAmount:
+              Number(data.value) > 0
+                ? data.transactionObj[0].value
+                : data.transactionObj[1].value,
+            tokenIn:
+              Number(data.value) > 0
+                ? data.transactionObj[1].value[0]
+                : data.transactionObj[2].value[0],
+            tokenOut:
+              Number(data.value) > 0
+                ? data.transactionObj[1].value[
+                    data.transactionObj[1].value.length - 1
+                  ]
+                : data.transactionObj[2].value[
+                    data.transactionObj[2].value.length - 1
+                  ],
+            time: timeConverter(data.timestamp),
+            from: data.from,
+            to: data.to,
+            chainID: chainId,
+            market: "",
+            orderID: "",
+          }));
 
-                                : data.transactionObj[2].value[0],
-                        tokenOut:
-                            Number(data.value) > 0
-                                ? data.transactionObj[1].value[data.transactionObj[1].value.length - 1]
-                                : data.transactionObj[2].value[data.transactionObj[2].value.length - 1],
-                        time: timeConverter(data.timestamp),
-                        from: data.from,
-                        to: data.to,
-                        chainID:chainId,
-                        market:"",
-                        orderID:""
-                    }));
-
-                    dataToUse = marketData.length > 5 ? marketData.splice(0, 5) : marketData;
+          dataToUse =
+            marketData.length > 5 ? marketData.splice(0, 5) : marketData;
+        } else if (
+          location.includes("autotrade") ||
+          location.includes("set-price")
+        ) {
+          const transaction = await getTransactionFromDatabase();
+          if (transaction.length > 0) {
+            let result = [];
+            if (locationData === "auto") {
+              let data = transaction
+                .filter((data: any) => data.typeOfTransaction === "Auto Time")
+                .sort((a: any, b: any) => b.time - a.time);
+              result = data.filter(
+                (item: any) =>
+                  item.status === 1 && parseInt(item.chainID) === chainId
+              );
+            } else if (locationData === "price") {
+              let data = transaction
+                .filter((data: any) => data.typeOfTransaction === "Auto Limit")
+                .sort((a: any, b: any) => b.time - a.time);
+              result = data.filter(
+                (item: any) =>
+                  item.status === 1 && parseInt(item.chainID) === chainId
+              );
+            }
+            dataToUse = await Promise.all(
+              result.map(async (data: any) => {
+                // try{
 
-                   
-    
-                }else if ( location.includes("autotrade") || location.includes("set-price")){
-                    const transaction = await getTransactionFromDatabase()
-                    if (transaction.length > 0) {
-                        let result = []
-                        if (locationData === "auto") {
-                            let data = transaction.filter((data: any) => data.typeOfTransaction === "Auto Time")
-                            .sort((a: any, b: any) => b.time - a.time)
-                            result = data.filter((item:any)=>item.status===1 && parseInt(item.chainID) === chainId)
-                        }else if (locationData === "price") {
-                            let data = transaction.filter((data: any) => data.typeOfTransaction === "Set Price")
-                            .sort((a: any, b: any) => b.time - a.time)
-                            result = data.filter((item:any)=>item.status===1 && parseInt(item.chainID) === chainId)
-                        }
-                        dataToUse = await Promise.all(result.map(async (data: any) => {
-                            // try{
-                                
-    
-                                let dataBase = {
-                                    inputAmount: data.amountToSwap,
-                                    outputAmount:data.actualToPrice,
-                                    tokenIn: data.swapFromToken,
-                                    tokenOut: data.swapToToken,
-                                    time: data.time && timeConverter(parseInt(data.time)),
-                                    name: data ? data.typeOfTransaction : "",
-                                    frequency: data ? data.frequency : "--",
-                                    id: data ? data.id : "",
-                                    transactionHash: data.transactionHash,
-                                    error: data.errorArray,
-                                    status: data.status,
-                                    orderID:data.orderID,
-                                    currentToPrice: data.typeOfTransaction === "Set Price" ? data.currentToPrice : data.percentageChange,
-                                    chainID:data.chainID ,
-                                    pathSymbol:data.pathSymbol,
-                                    market:data.market,
-                                    totalTransaction:data.totalNumberOfTransaction
-                                    
-                                }
-                                return dataBase
-                            // }catch(e){
-                            //     console.log(e)
-                            // }
-                            
-                        })
-                        )
+                let dataBase = {
+                  inputAmount: data.amountToSwap,
+                  outputAmount: data.actualToPrice,
+                  tokenIn: data.swapFromToken,
+                  tokenOut: data.swapToToken,
+                  time: data.time && timeConverter(parseInt(data.time)),
+                  name: data ? data.typeOfTransaction : "",
+                  frequency: data ? data.frequency : "--",
+                  id: data ? data.id : "",
+                  transactionHash: data.transactionHash,
+                  error: data.errorArray,
+                  status: data.status,
+                  orderID: data.orderID,
+                  currentToPrice:
+                    data.typeOfTransaction === "Auto Limit"
+                      ? data.currentToPrice
+                      : data.percentageChange,
+                  chainID: data.chainID,
+                  pathSymbol: data.pathSymbol,
+                  market: data.market,
+                  totalTransaction: data.totalNumberOfTransaction,
+                };
+                return dataBase;
+                // }catch(e){
+                //     console.log(e)
+                // }
+              })
+            );
+          }
+        }
+        const marketSwap = await Promise.all(
+          dataToUse.map(async (data: any) => {
+            let item = {
+              tokenIn:
+                data?.tokenIn === "native"
+                  ? {
+                      name: SupportedChainName[data.chainID as number],
+                      symbol: SupportedChainSymbols[data.chainID as number],
+                      address: WNATIVEADDRESSES[data.chainID as number],
+                      decimals: 18,
                     }
-                }
-                const marketSwap = await Promise.all(
-                    dataToUse.map(async (data: any) => {
-                        let item ={
-                            tokenIn: data?.tokenIn === "native" ? {
-                                name: SupportedChainName[data.chainID as number],
-                                symbol: SupportedChainSymbols[data.chainID as number],
-                                address: WNATIVEADDRESSES[data.chainID as number],
-                                decimals: 18
-                            } : await tokenList(data?.tokenIn),
-                            tokenOut: data.tokenOut === "native" ? {
-                                name: SupportedChainName[data.chainID as number],
-                                symbol: SupportedChainSymbols[data.chainID as number],
-                                address: WNATIVEADDRESSES[data.chainID as number],
-                                decimals: 18
-                            } : await tokenList(data.tokenOut),
-                            amountIn: data.inputAmount,
-                            amountOut: data.outputAmount,
-                            time: data.time,
-                            name: data.name,
-                            frequency: data.frequency,
-                            id: data.id,
-                            orderID:data.orderID,
-                            transactionHash: data.transactionHash,
-                            error: data.error,
-                            status: data.status,
-                            currentToPrice: data.currentToPrice,
-                            chainID:data.chainID,
-                            pathSymbol:data.pathSymbol,
-                            market:data.market,
-                            totalTransaction:data.totalTransaction
-                        }
-                        return item
-                        
-                    }),
-                );
-                    const marketHistory = marketSwap.map((data) => ({
-                        token1Icon:
-                            getTokenSymbol(data.tokenIn.symbol),
-                        token2Icon:
-                            getTokenSymbol(data.tokenOut.symbol),
-                        token1: data.tokenIn,
-                        token2: data.tokenOut,
-                        amountIn: data.tokenIn.name === SupportedChainName[data.chainID as number] ? parseInt(formatAmount(data.amountIn, data.tokenIn.decimals)) /data.totalTransaction  : formatAmount(data.amountIn, data.tokenIn.decimals),
-                        amountOut: data.name ==="Set Price" || data.name==="Auto Time" ? parseFloat(data.amountOut).toFixed(4) : formatAmount(data.amountOut, data.tokenOut.decimals),
-        
-                        time: data.time,
-                        name: data.name,
-                        frequency: data.frequency,
-                        id: data.id,
-                        transactionHash: data.transactionHash,
-                        error: data.error,
-                        status: data.status,
-                        currentToPrice: data.currentToPrice,
-                        chainID:data.chainID,
-                        pathSymbol:data.pathSymbol,
-                        market:data.market,
-                        orderID:data.orderID,
-                    }));
-
-                    setMarketHistoryData(marketHistory);
-                    setLoadMarketData(false);
-
-                } catch (e) {
-                    console.log(e);
-                    setMarketHistoryData({});
-                    setLoadMarketData(false);
-                }
-            } else {
-                console.log('Connect your wallet')
-            }
+                  : await tokenList(data?.tokenIn),
+              tokenOut:
+                data.tokenOut === "native"
+                  ? {
+                      name: SupportedChainName[data.chainID as number],
+                      symbol: SupportedChainSymbols[data.chainID as number],
+                      address: WNATIVEADDRESSES[data.chainID as number],
+                      decimals: 18,
+                    }
+                  : await tokenList(data.tokenOut),
+              amountIn: data.inputAmount,
+              amountOut: data.outputAmount,
+              time: data.time,
+              name: data.name,
+              frequency: data.frequency,
+              id: data.id,
+              orderID: data.orderID,
+              transactionHash: data.transactionHash,
+              error: data.error,
+              status: data.status,
+              currentToPrice: data.currentToPrice,
+              chainID: data.chainID,
+              pathSymbol: data.pathSymbol,
+              market: data.market,
+              totalTransaction: data.totalTransaction,
+            };
+            return item;
+          })
+        );
+        const marketHistory = marketSwap.map((data) => ({
+          token1Icon: getTokenSymbol(data.tokenIn.symbol),
+          token2Icon: getTokenSymbol(data.tokenOut.symbol),
+          token1: data.tokenIn,
+          token2: data.tokenOut,
+          amountIn:
+            data.tokenIn.name === SupportedChainName[data.chainID as number]
+              ? parseInt(formatAmount(data.amountIn, data.tokenIn.decimals)) /
+                data.totalTransaction
+              : formatAmount(data.amountIn, data.tokenIn.decimals),
+          amountOut:
+            data.name === "Auto Limit" || data.name === "Auto Time"
+              ? parseFloat(data.amountOut).toFixed(4)
+              : formatAmount(data.amountOut, data.tokenOut.decimals),
 
-        };
-    return { marketHistoryData, loadMarketData };
+          time: data.time,
+          name: data.name,
+          frequency: data.frequency,
+          id: data.id,
+          transactionHash: data.transactionHash,
+          error: data.error,
+          status: data.status,
+          currentToPrice: data.currentToPrice,
+          chainID: data.chainID,
+          pathSymbol: data.pathSymbol,
+          market: data.market,
+          orderID: data.orderID,
+        }));
 
+        setMarketHistoryData(marketHistory);
+        setLoadMarketData(false);
+      } catch (e) {
+        console.log(e);
+        setMarketHistoryData({});
+        setLoadMarketData(false);
+      }
+    } else {
+      console.log("Connect your wallet");
+    }
+  };
+  return { marketHistoryData, loadMarketData };
 };
 
-export default useMarketHistory;
\ No newline at end of file
+export default useMarketHistory;
diff --git a/src/utils/hooks/useOpenOrders.ts b/src/utils/hooks/useOpenOrders.ts
index 81d7023c..2649c6fc 100644
--- a/src/utils/hooks/useOpenOrders.ts
+++ b/src/utils/hooks/useOpenOrders.ts
@@ -1,247 +1,296 @@
-import { useEffect, useState } from 'react';
-import { useWeb3React } from '@web3-react/core';
-import { timeConverter, getTokenSymbol, formatAmount,  } from "./useAccountHistory";
-import {  MARKETAUTOSWAPADDRESSES, SMARTSWAPROUTER, WNATIVEADDRESSES } from "../addresses";
-import { getERC20Token } from '../utilsFunctions';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../state';
-import { useLocation } from 'react-router-dom';
-import { useNativeBalance } from './useBalances';import { SupportedChainName, SupportedChainSymbols } from '../constants/chains';
-;
-
-
-const abiDecoder = require('abi-decoder');
+import { useEffect, useState } from "react";
+import { useWeb3React } from "@web3-react/core";
+import {
+  timeConverter,
+  getTokenSymbol,
+  formatAmount,
+} from "./useAccountHistory";
+import {
+  MARKETAUTOSWAPADDRESSES,
+  SMARTSWAPROUTER,
+  WNATIVEADDRESSES,
+} from "../addresses";
+import { getERC20Token } from "../utilsFunctions";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state";
+import { useLocation } from "react-router-dom";
+import { useNativeBalance } from "./useBalances";
+import { SupportedChainName, SupportedChainSymbols } from "../constants/chains";
+import { SERVER_ENV } from "../../constants/chains";
+const abiDecoder = require("abi-decoder");
 
 interface DataIncoming {
-    inputAmount: string,
-    outputAmount: string,
-    tokenIn: string,
-    tokenOut: string,
-    time: string,
-    name: string,
-    frequency: string,
-    id: string,
-    transactionHash: string,
-    error: [],
-    status: number,
-    currentToPrice?: string,
-    chainID?:string,
-    situation?:string,
-    expectedUserPrice?:string
-    market?:string
+  inputAmount: string;
+  outputAmount: string;
+  tokenIn: string;
+  tokenOut: string;
+  time: string;
+  name: string;
+  frequency: string;
+  id: string;
+  transactionHash: string;
+  error: [];
+  status: number;
+  currentToPrice?: string;
+  chainID?: string;
+  situation?: string;
+  expectedUserPrice?: string;
+  market?: string;
 }
 
-const useOpenOrders = (socket:any) => {
-    const { account, chainId, library } = useWeb3React();
-    const [loadOpenOrders, setloadOpenOrders] = useState(false);
-    const [openOrderData, setopenOrderData] = useState({} as any);
-    const [stateAccount, setStateAccount] = useState(account)
-    const [locationData, setLocationData] = useState("swap")
-    const [URL, setURL] = useState("https://autoswap-server.herokuapp.com")
-    const [contractAddress, setContractAddress] = useState(SMARTSWAPROUTER[chainId as number])
-    const refreshPage = useSelector((state: RootState) => state.transactions.refresh);
-    const location = useLocation().pathname;
-    const [, Symbol, Name,] = useNativeBalance()
-    function decodeInput(input: string, ABI: any) {
-        abiDecoder.addABI(ABI);
-        let decoder = abiDecoder.decodeMethod(input);
-        return decoder
+const useOpenOrders = (socket: any) => {
+  const { account, chainId, library } = useWeb3React();
+  const [loadOpenOrders, setloadOpenOrders] = useState(false);
+  const [openOrderData, setopenOrderData] = useState({} as any);
+  const [stateAccount, setStateAccount] = useState(account);
+  const [locationData, setLocationData] = useState("swap");
+  const [URL, setURL] = useState(
+    SERVER_ENV.url.API_URL ?? "http://localhost:8000"
+  );
+  const [contractAddress, setContractAddress] = useState(
+    SMARTSWAPROUTER[chainId as number]
+  );
+  const refreshPage = useSelector(
+    (state: RootState) => state.transactions.refresh
+  );
+  const location = useLocation().pathname;
+  const [, Symbol, Name] = useNativeBalance();
+  function decodeInput(input: string, ABI: any) {
+    abiDecoder.addABI(ABI);
+    let decoder = abiDecoder.decodeMethod(input);
+    return decoder;
+  }
+  useEffect(() => {
+    if (location.includes("autotrade")) {
+      setLocationData("auto");
+      setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : "Pancakeswap";
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else if (location.includes("set-price")) {
+      setLocationData("price");
+      setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : "Pancakeswap";
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else {
     }
-    useEffect(() => {
-       
-        if (location.includes("autotrade")) {
-            setLocationData("auto")
-            setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85")
-             let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : "Pancakeswap" 
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else if (location.includes("set-price")) {
-            setLocationData("price")
-            setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85") 
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : "Pancakeswap" 
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else {
-       
-        }
-    }, [location, chainId])
-    useEffect(() => {
-        if (location.includes("autotrade")) {
-            setLocationData("auto")
-            setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85")
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : chainId ===43114? "Tradejoe" :  "Pancakeswap" 
-            console.log({market})
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        } else if (location.includes("set-price")) {
-            setLocationData("price")
-            setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85") 
-            let market =location.split("/").length >= 3 ?  location.split("/")[2].charAt(0).toUpperCase() + location.split("/")[2].slice(1) : chainId ===43114? "Tradejoe" :  "Pancakeswap" 
-            console.log({market})
-            setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number])
-        }else {
-            setLocationData("swap")
-            setStateAccount(account)
-            setContractAddress(SMARTSWAPROUTER[chainId as number])
-        }
-    }, [chainId, account,location, contractAddress,refreshPage,locationData]);
-   
-    useEffect(() => {
-        getOpenOrders();
-    }, [chainId, account, contractAddress,refreshPage,locationData]);
-    useEffect(() => {
-        socket?.on("success",()=>{
-            getOpenOrders();
-        })
-        
-    }, [socket,account]);
-
-    const tokenList = async (addressName: string) => {
-        const token = await getERC20Token(addressName, library);
-        const name = token.name();
-        const symbol = token.symbol();
-        const { address } = token;
-        const decimals = token.decimals();
-        const standardToken = await Promise.all([name, symbol, address, decimals]);
-        const resolveToken = {
-            name: standardToken[0],
-            symbol: standardToken[1],
-            address: standardToken[2],
-            decimals: standardToken[3]
-        };
-        return address !== '0x' ? resolveToken : null;
-    };
-    
-    const getTransactionFromDatabase = async (address: string) => {
-        const data = await fetch(`${URL}/auto/data/all/${address}`)
-        const transaction = await data.json()
-        const transactions = transaction[0].transaction.filter((item:any)=>item.status===2 || item.status===3)
-        return transactions
+  }, [location, chainId]);
+  useEffect(() => {
+    if (location.includes("autotrade")) {
+      setLocationData("auto");
+      setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : chainId === 43114
+          ? "Tradejoe"
+          : "Pancakeswap";
+      console.log({ market });
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else if (location.includes("set-price")) {
+      setLocationData("price");
+      setStateAccount("0x97C982a4033d5fceD06Eedbee1Be10778E811D85");
+      let market =
+        location.split("/").length >= 3
+          ? location.split("/")[2].charAt(0).toUpperCase() +
+            location.split("/")[2].slice(1)
+          : chainId === 43114
+          ? "Tradejoe"
+          : "Pancakeswap";
+      console.log({ market });
+      setContractAddress(MARKETAUTOSWAPADDRESSES[market][chainId as number]);
+    } else {
+      setLocationData("swap");
+      setStateAccount(account);
+      setContractAddress(SMARTSWAPROUTER[chainId as number]);
     }
+  }, [chainId, account, location, contractAddress, refreshPage, locationData]);
 
+  useEffect(() => {
+    getOpenOrders();
+  }, [chainId, account, contractAddress, refreshPage, locationData]);
+  useEffect(() => {
+    socket?.on("success", () => {
+      getOpenOrders();
+    });
+  }, [socket, account]);
 
+  const tokenList = async (addressName: string) => {
+    const token = await getERC20Token(addressName, library);
+    const name = token.name();
+    const symbol = token.symbol();
+    const { address } = token;
+    const decimals = token.decimals();
+    const standardToken = await Promise.all([name, symbol, address, decimals]);
+    const resolveToken = {
+      name: standardToken[0],
+      symbol: standardToken[1],
+      address: standardToken[2],
+      decimals: standardToken[3],
+    };
+    return address !== "0x" ? resolveToken : null;
+  };
 
-        const getOpenOrders = async () => {
-            if ((account && locationData)) {
-                setloadOpenOrders(true);
-                try {
-                    let dataToUse =[]
-                    const transaction = await getTransactionFromDatabase(account)
-                    if (transaction.length > 0) {
-                        let data = []
-                        if (locationData === "auto") {
-                            data = transaction.filter((data: any) => data.typeOfTransaction === "Auto Time")
-                        }else if (locationData === "price") {
-                            data = transaction.filter((data: any) => data.typeOfTransaction === "Set Price")
-                            
-                        }
-                        const result = data.filter((item:any)=>item.errorArray.length===0 && item.transactionHash === "" && parseInt(item.chainID) === chainId)
-                        dataToUse = await Promise.all(result.map(async (data: any) => {
-                            return {
-                                inputAmount: data.amountToSwap,
-                                outputAmount: data.userExpectedPrice,
-                                tokenIn: data.swapFromToken,
-                                tokenOut: data.swapToToken,
-                                time: data.time && timeConverter(parseInt(data.time)),
-                                name: data ? data.typeOfTransaction : "",
-                                frequency: data ? data.frequency : "--",
-                                id: data ? data.id : "",
-                                transactionHash: data.transactionHash,
-                                error: data.errorArray,
-                                status: data.status,
-                                currentToPrice: data.typeOfTransaction === "Set Price" ? data.currentToPrice : data.percentageChange,
-                                chainID:data.chainID ,
-                                rate:`${data.currentNumber} / ${data.totalNumberOfTransaction}`,
-                                initialFromPrice:data.initialFromPrice,
-                                initialToPrice:data.initialToPrice,
-                                situation:data.situation,
-                                _id:data._id,
-                                pathSymbol:data.pathSymbol,
-                                market:data.market,
-                                orderID:data.orderID,
-                                totalTransaction:data.totalNumberOfTransaction
-                            }
-                        })
-                        )
-                    
-                }
-                const marketSwap = await Promise.all(
-                    dataToUse.map(async (data: any) => ({
-                        tokenIn: data.tokenIn === "native" ? {
-                            name: SupportedChainName[data.chainID],
-                            symbol: SupportedChainSymbols[data.chainID],
-                            address: WNATIVEADDRESSES[chainId as number],
-                            decimals: 18
-                        } : await tokenList(data.tokenIn),
-                        tokenOut: data.tokenOut === "native" ? {
-                            name: SupportedChainName[data.chainID],
-                            symbol: SupportedChainSymbols[data.chainID],
-                            address: WNATIVEADDRESSES[chainId as number],
-                            decimals: 18
-                        } : await tokenList(data.tokenOut),
-                        amountIn: data.inputAmount,
-                        amountOut: data.outputAmount,
-                        time: data.time,
-                        name: data.name,
-                        frequency: data.frequency,
-                        id: data.id,
-                        transactionHash: data.transactionHash,
-                        error: data.error,
-                        status: data.status,
-                        currentToPrice: data.currentToPrice,
-                        chainID:data.chainID,
-                        rate:data.rate,
-                        situation:data.situation,
-                        initialFromPrice:data.initialFromPrice,
-                        initialToPrice:data.initialToPrice,
-                        _id:data._id,
-                        pathSymbol:data.pathSymbol,
-                        market:data.market,
-                        orderID:data.orderID,
-                        totalTransaction:data.totalTransaction
-                    })),
-                );
-                console.log({marketSwap})
-                    const marketHistory = marketSwap.map((data) => ({
-                        token1Icon:data.tokenIn &&
-                            getTokenSymbol(data.tokenIn.symbol),
-                        token2Icon:
-                            data.tokenOut && getTokenSymbol(data.tokenOut.symbol),
-                        token1: data.tokenIn,
-                        token2: data.tokenOut,
-                        amountIn: data.tokenIn &&  data.tokenIn?.name === SupportedChainName[data.chainID as number]  ? parseFloat(formatAmount(data.amountIn, data.tokenIn.decimals)) / data.totalTransaction : data.tokenIn &&  formatAmount(data.amountIn, data.tokenIn.decimals),
-                        amountOut:  parseFloat(data.amountOut).toFixed(4),
-        
-                        time: data.time,
-                        name: data.name,
-                        frequency: data.frequency,
-                        id: data.id,
-                        transactionHash: data.transactionHash,
-                        error: data.error,
-                        status: data.status,
-                        currentToPrice: data.currentToPrice,
-                        chainID:data.chainID,
-                        rate:data.rate,
-                        situation:data.situation,
-                        initialFromPrice:data.initialFromPrice,
-                        initialToPrice:data.initialToPrice,
-                        _id:data._id,
-                        pathSymbol:data.pathSymbol,
-                        market:data.market,
-                        orderID:data.orderID,
-                    }));
-                    setopenOrderData(marketHistory);
-                    setloadOpenOrders(false);
-
-                } catch (e) {
-                    console.log(e);
-                    setopenOrderData({});
-                    setloadOpenOrders(false);
-                }
-            } else {
-                console.log('Connect your wallet')
-            }
+  const getTransactionFromDatabase = async (address: string) => {
+    console.log({ URL });
+    const data = await fetch(`${URL}/auto/data/all/${address}`);
+    const transaction = await data.json();
+    const transactions = transaction[0].transaction.filter(
+      (item: any) => item.status === 2 || item.status === 3
+    );
+    return transactions;
+  };
 
-        };
-    return { openOrderData, loadOpenOrders };
+  const getOpenOrders = async () => {
+    if (account && locationData) {
+      setloadOpenOrders(true);
+      try {
+        let dataToUse = [];
+        const transaction = await getTransactionFromDatabase(account);
+        if (transaction.length > 0) {
+          let data = [];
+          if (locationData === "auto") {
+            data = transaction.filter(
+              (data: any) => data.typeOfTransaction === "Auto Time"
+            );
+          } else if (locationData === "price") {
+            data = transaction.filter(
+              (data: any) => data.typeOfTransaction === "Auto Limit"
+            );
+          }
+          const result = data.filter(
+            (item: any) =>
+              item.errorArray.length === 0 &&
+              item.transactionHash === "" &&
+              parseInt(item.chainID) === chainId
+          );
+          dataToUse = await Promise.all(
+            result.map(async (data: any) => {
+              return {
+                inputAmount: data.amountToSwap,
+                outputAmount: data.userExpectedPrice,
+                tokenIn: data.swapFromToken,
+                tokenOut: data.swapToToken,
+                time: data.time && timeConverter(parseInt(data.time)),
+                name: data ? data.typeOfTransaction : "",
+                frequency: data ? data.frequency : "--",
+                id: data ? data.id : "",
+                transactionHash: data.transactionHash,
+                error: data.errorArray,
+                status: data.status,
+                currentToPrice:
+                  data.typeOfTransaction === "Auto Limit"
+                    ? data.currentToPrice
+                    : data.percentageChange,
+                chainID: data.chainID,
+                rate: `${data.currentNumber} / ${data.totalNumberOfTransaction}`,
+                initialFromPrice: data.initialFromPrice,
+                initialToPrice: data.initialToPrice,
+                situation: data.situation,
+                _id: data._id,
+                pathSymbol: data.pathSymbol,
+                market: data.market,
+                orderID: data.orderID,
+                totalTransaction: data.totalNumberOfTransaction,
+              };
+            })
+          );
+        }
+        const marketSwap = await Promise.all(
+          dataToUse.map(async (data: any) => ({
+            tokenIn:
+              data.tokenIn === "native"
+                ? {
+                    name: SupportedChainName[data.chainID],
+                    symbol: SupportedChainSymbols[data.chainID],
+                    address: WNATIVEADDRESSES[chainId as number],
+                    decimals: 18,
+                  }
+                : await tokenList(data.tokenIn),
+            tokenOut:
+              data.tokenOut === "native"
+                ? {
+                    name: SupportedChainName[data.chainID],
+                    symbol: SupportedChainSymbols[data.chainID],
+                    address: WNATIVEADDRESSES[chainId as number],
+                    decimals: 18,
+                  }
+                : await tokenList(data.tokenOut),
+            amountIn: data.inputAmount,
+            amountOut: data.outputAmount,
+            time: data.time,
+            name: data.name,
+            frequency: data.frequency,
+            id: data.id,
+            transactionHash: data.transactionHash,
+            error: data.error,
+            status: data.status,
+            currentToPrice: data.currentToPrice,
+            chainID: data.chainID,
+            rate: data.rate,
+            situation: data.situation,
+            initialFromPrice: data.initialFromPrice,
+            initialToPrice: data.initialToPrice,
+            _id: data._id,
+            pathSymbol: data.pathSymbol,
+            market: data.market,
+            orderID: data.orderID,
+            totalTransaction: data.totalTransaction,
+          }))
+        );
+        console.log({ marketSwap });
+        const marketHistory = marketSwap.map((data) => ({
+          token1Icon: data.tokenIn && getTokenSymbol(data.tokenIn.symbol),
+          token2Icon: data.tokenOut && getTokenSymbol(data.tokenOut.symbol),
+          token1: data.tokenIn,
+          token2: data.tokenOut,
+          amountIn:
+            data.tokenIn &&
+            data.tokenIn?.name === SupportedChainName[data.chainID as number]
+              ? parseFloat(formatAmount(data.amountIn, data.tokenIn.decimals)) /
+                data.totalTransaction
+              : data.tokenIn &&
+                formatAmount(data.amountIn, data.tokenIn.decimals),
+          amountOut: parseFloat(data.amountOut).toFixed(4),
 
+          time: data.time,
+          name: data.name,
+          frequency: data.frequency,
+          id: data.id,
+          transactionHash: data.transactionHash,
+          error: data.error,
+          status: data.status,
+          currentToPrice: data.currentToPrice,
+          chainID: data.chainID,
+          rate: data.rate,
+          situation: data.situation,
+          initialFromPrice: data.initialFromPrice,
+          initialToPrice: data.initialToPrice,
+          _id: data._id,
+          pathSymbol: data.pathSymbol,
+          market: data.market,
+          orderID: data.orderID,
+        }));
+        setopenOrderData(marketHistory);
+        setloadOpenOrders(false);
+      } catch (e) {
+        console.log(e);
+        setopenOrderData({});
+        setloadOpenOrders(false);
+      }
+    } else {
+      console.log("Connect your wallet");
+    }
+  };
+  return { openOrderData, loadOpenOrders };
 };
 
-export default useOpenOrders;
\ No newline at end of file
+export default useOpenOrders;
diff --git a/src/utils/hooks/usePools.ts b/src/utils/hooks/usePools.ts
index 28df78fc..5e91a31d 100644
--- a/src/utils/hooks/usePools.ts
+++ b/src/utils/hooks/usePools.ts
@@ -11,10 +11,17 @@ import { Currency, Fraction } from "@uniswap/sdk-core";
 import { WNATIVEADDRESSES } from "../addresses";
 import JSBI from "jsbi";
 import { useActiveWeb3React } from "./useActiveWeb3React";
-import { Web3Provider} from '@ethersproject/providers'
+import { Web3Provider } from "@ethersproject/providers";
 import { convertFromWei } from "..";
 import { GFindLiquidity } from "../../components/G-analytics/gLiquidity";
 
+import useParsedQueryString from "../../hooks/useParsedQueryString";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../state";
+import { queryParametersToSwapState } from "../../state/swap/hooks";
+import { Field } from "../../state/swap/actions";
+import { replaceLiquidityState } from "../../state/mint/actions";
+
 export const useGetUserLiquidities = async () => {
   const { account, chainId, library } = useActiveWeb3React();
   const [liquidities, setLiquidities] = useState<any[]>();
@@ -58,6 +65,44 @@ export const useGetUserLiquidities = async () => {
   return { liquidities, liquidityLength, Loading };
 };
 
+export function useDefaultsFromURLLiquiduitySearch() {
+  const { account, chainId } = useActiveWeb3React();
+  const ChainId = useSelector((state: RootState) => state.chainId.chainId);
+  const dispatch = useDispatch<AppDispatch>();
+  const parsedQs = useParsedQueryString();
+  const [result, setResult] = useState<
+    | {
+        inputCurrencyId: string | undefined;
+        outputCurrencyId: string | undefined;
+      }
+    | undefined
+  >();
+
+  useEffect(() => {
+    if (!ChainId) return;
+    const parsed = queryParametersToSwapState(parsedQs, ChainId);
+    console.log({ parsed, parsedQs, ChainId }, 999999999);
+    dispatch(
+      replaceLiquidityState({
+        typedValue: parsed.typedValue,
+        field: parsed.independentField,
+        inputCurrencyId: parsed[Field.INPUT].currencyId,
+        outputCurrencyId: parsed[Field.OUTPUT].currencyId,
+        recipient: null,
+      })
+    );
+    console.log({
+      inputCurrencyId: parsed[Field.INPUT].currencyId,
+      outputCurrencyId: parsed[Field.OUTPUT].currencyId,
+    });
+    setResult({
+      inputCurrencyId: parsed[Field.INPUT].currencyId,
+      outputCurrencyId: parsed[Field.OUTPUT].currencyId,
+    });
+  }, [dispatch, ChainId]);
+  return result;
+}
+
 const getAllPairs = (length: number, allPairs: any): any[] => {
   const pairs = [];
   for (let i = 0; i < length; i++) {
@@ -231,7 +276,7 @@ export const filterPools = ({
   let tokenA = getAddress(TokenA);
   let tokenB = getAddress(TokenB);
 
-  GFindLiquidity(tokenA,tokenB)
+  GFindLiquidity(tokenA, tokenB);
   return liquidities?.filter(
     (liquidity) =>
       (liquidity.path[0].fromPath === tokenA &&
@@ -441,8 +486,8 @@ export const useAllowance = (
   CurrencyA: Currency | undefined,
   CurrencyB: Currency | undefined,
   checkTokenApproval: number,
-  inputA:string,
-  inputB:string
+  inputA: string,
+  inputB: string
 ) => {
   const { account, chainId, library } = useActiveWeb3React();
   const [hasTokenABeenApproved, setHasTokenABeenApproved] = useState(false);
@@ -460,21 +505,33 @@ export const useAllowance = (
         tokenA.allowance(account, SMARTSWAPROUTER[chainId as number]),
         tokenB.allowance(account, SMARTSWAPROUTER[chainId as number]),
         tokenA.decimals(),
-        tokenB.decimals()
+        tokenB.decimals(),
       ]);
 
-      const isTokenOneApproved = CurrencyA.isNative ? true :
-          parseFloat(ethers.utils.formatUnits(allowanceA, decimalsA).toString()) > parseFloat(inputA);
+      const isTokenOneApproved = CurrencyA.isNative
+        ? true
+        : parseFloat(
+            ethers.utils.formatUnits(allowanceA, decimalsA).toString()
+          ) > parseFloat(inputA);
 
-      const isTokenTwoApproved = CurrencyB.isNative ? true :
-          parseFloat(ethers.utils.formatUnits(allowanceB, decimalsB).toString()) > parseFloat(inputB);
+      const isTokenTwoApproved = CurrencyB.isNative
+        ? true
+        : parseFloat(
+            ethers.utils.formatUnits(allowanceB, decimalsB).toString()
+          ) > parseFloat(inputB);
 
       setHasTokenABeenApproved(isTokenOneApproved);
       setHasTokenBBeenApproved(isTokenTwoApproved);
-
     }
-      
-  }, [CurrencyB, CurrencyA, account, chainId, checkTokenApproval,inputA,inputB]);
+  }, [
+    CurrencyB,
+    CurrencyA,
+    account,
+    chainId,
+    checkTokenApproval,
+    inputA,
+    inputB,
+  ]);
 
   return { hasTokenABeenApproved, hasTokenBBeenApproved };
 };
diff --git a/src/utils/main-token.json b/src/utils/main-token.json
index 9424f27a..7d88aa19 100644
--- a/src/utils/main-token.json
+++ b/src/utils/main-token.json
@@ -13,6 +13,14 @@
     "logoURI": "https://bscscan.com/token/images/rigelprotocol_32.png",
     "address": "0xFA262F303Aa244f9CC66f312F0755d89C3793192"
   },
+  {
+    "name": "FDUSD Token",
+    "symbol": "FDUSD",
+    "address": "0x14f4F032998326365943D326bFA2e31Ed716bfC5",
+    "chainId": 56,
+    "decimals": 18,
+    "logoURI": "https://www.bscscan.com/token/images/fdusd_32.png"
+  },
   {
     "symbol": "BNB",
     "available": true,
@@ -516,4 +524,4 @@
     "name": "Tether USD",
     "logoURI": "https://raw.githubusercontent.com/sushiswap/list/master/logos/token-logos/token/usdt.jpg"
   }
-]
\ No newline at end of file
+]
diff --git a/src/utils/utilsFunctions.ts b/src/utils/utilsFunctions.ts
index cc92144b..c83691ae 100644
--- a/src/utils/utilsFunctions.ts
+++ b/src/utils/utilsFunctions.ts
@@ -154,7 +154,6 @@ export const changeFrequencyTodays = (
     today = today + 1;
   } else if (frequency === "monthly") {
     days = 30;
-    // interval = days * 24 * 60
     today = today + 1;
   } else if (frequency === "30" || frequency === "5") {
     interval = parseInt(frequency);
@@ -306,7 +305,7 @@ export const switchNetwork = async (
       console.error(`Switch chain error ${switchError}`);
       // handle other "switch" errors
     }
-  }else if (chainId === "0xA86A") {
+  } else if (chainId === "0xA86A") {
     try {
       await library?.send("wallet_switchEthereumChain", [
         { chainId: "0xA86A" },
@@ -329,8 +328,7 @@ export const switchNetwork = async (
       console.error(`Switch chain error ${switchError}`);
       // handle other "switch" errors
     }
-  }
-   else if (chainId === "0xA86A8") {
+  } else if (chainId === "0xA86A8") {
     try {
       await library?.send("wallet_switchEthereumChain", [
         { chainId: "0x38" },
diff --git a/yarn.lock b/yarn.lock
index 2d82c7cd..2d1d9641 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3415,6 +3415,14 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-lazy-load-image-component@^1.5.2":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz#f5382f7925d9b8421ded31ac9b2d76985b80edb8"
+  integrity sha512-HsIsYz7yWWTh/bftdzGnijKD26JyofLRqM/RM80sxs7Gk13G83ew8R/ra2XzXuiZfjNEjAq/Va+NBHFF9ciwxA==
+  dependencies:
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/react-redux@^7.1.20":
   version "7.1.20"
   resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz"
