ability to customize destination address for DEX

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.5.42",
+  "version": "0.5.43",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/containers/Dex/Dex.jsx

@@ -55,6 +55,8 @@ const Dex = ({ chainId, address, connect }) => {
     const [secondsToWait, setSecondsToWait] = useState(localStorage.getItem("dex-deadline") || "60");
     const [slippage, setSlippage] = useState(localStorage.getItem("dex-slippage") || "5");
     const [formatDecimals, setFormatDecimals] = useState(localStorage.getItem("dex-decimals") || "5");
+    const [actualDestinationAddress, setActualDestinationAddress] = useState(localStorage.getItem("dex-destination"));
+    const [destinationAddress, setDestinationAddress] = useState(actualDestinationAddress);
 
     const [tokenAddressTop, setTokenAddressTop] = useState(RESERVE_ADDRESSES[chainId]);
     const [tokenAddressBottom, setTokenAddressBottom] = useState(FTSO_ADDRESSES[chainId]);
@@ -162,6 +164,24 @@ const Dex = ({ chainId, address, connect }) => {
         }
     }
 
+    const setDestinationAddressInner = (value) => {
+        const cleanedValue = value.trim();
+        const isEvmAddress = /^0x[a-fA-F0-9]{40}$/.test(cleanedValue);
+        if (isEvmAddress) {
+            localStorage.setItem("dex-destination", value);
+            setActualDestinationAddress(value);
+        } else if (!isEvmAddress && actualDestinationAddress) {
+            localStorage.removeItem("dex-destination");
+            setActualDestinationAddress(undefined);
+        }
+        setDestinationAddress(value);
+    }
+
+    const handleCloseSetting = () => {
+        setDestinationAddress(undefined);
+        handleSettingsOpen(false);
+    }
+
     return (
         <Box height="calc(100vh - 43px)">
             <Helmet>
@@ -203,7 +223,7 @@ const Dex = ({ chainId, address, connect }) => {
                     minHeight="200px"
                     open={settingsOpen}
                     headerText={"Settings"}
-                    onClose={() => handleSettingsOpen(false)}
+                    onClose={() => handleCloseSetting()}
                 >
                     <Box>
                         <InputLabel htmlFor="slippage">Slippage</InputLabel>
@@ -267,6 +287,31 @@ const Dex = ({ chainId, address, connect }) => {
                             </Typography>
                         </Box>
                     </Box>
+
+                    <Box mt="32px">
+                        <InputLabel htmlFor="recipient">
+                            {`${actualDestinationAddress ? "Custom" : "Default"} destination address`}
+                        </InputLabel>
+                        <Box mt="8px">
+                            <FormControl variant="outlined" color="primary" fullWidth>
+                                <OutlinedInput
+                                    inputProps={{ "data-testid": "decimals-to-wait" }}
+                                    type="text"
+                                    id="destination-to-wait"
+                                    value={destinationAddress
+                                        ? destinationAddress
+                                        : actualDestinationAddress ?? address
+                                    }
+                                    onChange={event => setDestinationAddressInner(event.currentTarget.value)}
+                                />
+                            </FormControl>
+                        </Box>
+                        <Box mt="8px">
+                            <Typography variant="body2" color="textSecondary">
+                                Recipient address of swapped assets and liquidity tokens
+                            </Typography>
+                        </Box>
+                    </Box>
                 </Modal>
 
                 <TokenModal
@@ -322,6 +367,7 @@ const Dex = ({ chainId, address, connect }) => {
                                     dexAddresses={dexAddresses}
                                     connect={connect}
                                     slippage={slippage}
+                                    destination={actualDestinationAddress ? actualDestinationAddress : address}
                                     secondsToWait={secondsToWait}
                                     setTopTokenListOpen={setTopTokenListOpen}
                                     setBottomTokenListOpen={setBottomTokenListOpen}
@@ -338,6 +384,7 @@ const Dex = ({ chainId, address, connect }) => {
                                     dexAddresses={dexAddresses}
                                     connect={connect}
                                     slippage={slippage}
+                                    destination={actualDestinationAddress ? actualDestinationAddress : address}
                                     secondsToWait={secondsToWait}
                                     setTopTokenListOpen={setTopTokenListOpen}
                                     setBottomTokenListOpen={setBottomTokenListOpen}

src/containers/Dex/PoolContainer.jsx

@@ -23,6 +23,7 @@ const PoolContainer = ({
     dexAddresses,
     connect,
     slippage,
+    destination,
     secondsToWait,
     setTopTokenListOpen,
     setBottomTokenListOpen,
@@ -129,8 +130,6 @@ const PoolContainer = ({
         setIsPending(true);
 
         const deadline = Math.floor(Date.now() / 1000) + secondsToWait;
-        const destination = address;
-
         const shares = 100000;
         const one = BigInt(shares * 100);
         const floatSlippage = slippage === "" ? 0 : parseFloat(slippage);

src/containers/Dex/SwapContainer.jsx

@@ -27,6 +27,7 @@ const SwapContainer = ({
     setTopTokenListOpen,
     setBottomTokenListOpen,
     slippage,
+    destination,
     secondsToWait,
     setIsSwap,
     formatDecimals
@@ -108,8 +109,6 @@ const SwapContainer = ({
         setIsPending(true);
 
         const deadline = Math.floor(Date.now() / 1000) + secondsToWait;
-        const destination = address;
-
         const shares = 100000;
         const one = BigInt(shares * 100);
         const floatSlippage = slippage === "" ? 0 : parseFloat(slippage);