From 138a21644f065aec3b0bd259cbfa655fc4b2eb28 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Sat, 3 May 2025 00:04:55 +0300
Subject: [PATCH] fixes

---
 src/components/Grids/TradeOffers.tsx | 185 ++++++++++++++-------------
 src/components/header/Header.tsx     |   2 +
 src/components/sell/FeeManager.tsx   |  10 +-
 src/components/sell/Info.tsx         |  94 ++++++++++++++
 src/components/sell/UnsignedFees.tsx |   1 -
 5 files changed, 194 insertions(+), 98 deletions(-)
 create mode 100644 src/components/sell/Info.tsx

diff --git a/src/components/Grids/TradeOffers.tsx b/src/components/Grids/TradeOffers.tsx
index 41239f2..62cae08 100644
--- a/src/components/Grids/TradeOffers.tsx
+++ b/src/components/Grids/TradeOffers.tsx
@@ -27,8 +27,12 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  FormControl,
   FormControlLabel,
+  FormLabel,
   IconButton,
+  Radio,
+  RadioGroup,
   Snackbar,
   SnackbarCloseReason,
   Tooltip,
@@ -96,6 +100,7 @@ export const TradeOffers: React.FC<any> = ({
     selectedCoin,
   } = useContext(gameContext);
   const isRemoveOrdersWithoutUnlockingFees = useRef(false);
+  const [isRemoveOrders, setIsRemoveOrders] = useState('remove');
   const listOfOngoingTradesAts = useMemo(() => {
     return (
       onGoingTrades
@@ -149,25 +154,14 @@ export const TradeOffers: React.FC<any> = ({
   const feeRef = useRef(fee);
 
   const knownFees = useMemo(() => {
-    const offersWithKnownFees = [];
 
-    selectedOffers.forEach((offer) => {
-      const feeEntry = signedUnlockingFees.find(
-        (item) => item?.atAddress === offer.qortalAtAddress
-      );
 
-      if (feeEntry && typeof feeEntry.fee === "number") {
-        offersWithKnownFees.push({ ...offer, fee: feeEntry.fee });
-      }
-    });
-    const totalKnownFees = offersWithKnownFees.reduce((sum, offer) => {
-      return sum + (offer.fee || 0);
-    }, 0);
+    const lengthOfOffers = selectedOffers.length
+    const totalKnownFees = lengthOfOffers * fee
     const feeInLtc = totalKnownFees / 1e8;
     return +feeInLtc.toFixed(8);
-  }, [selectedOffers, signedUnlockingFees]);
+  }, [selectedOffers, fee]);
 
-  console.log("knownFees", knownFees);
 
   const defaultColDef = {
     resizable: true, // Make columns resizable by default
@@ -175,6 +169,12 @@ export const TradeOffers: React.FC<any> = ({
     suppressMovable: true, // Prevent columns from being movable
   };
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value
+    isRemoveOrdersWithoutUnlockingFees.current = val === 'remove' ? true : false
+    setIsRemoveOrders(val);
+  };
+
   const getName = async (address) => {
     try {
       const response = await fetch("/names/address/" + address);
@@ -278,7 +278,6 @@ export const TradeOffers: React.FC<any> = ({
         resizable: true,
         valueGetter: (params) => {
           if (params?.data?.qortalAtAddress) {
-            console.log("22signedUnlockingFees", signedUnlockingFees);
             const hasSignedFee = signedUnlockingFees?.find(
               (item) => item?.atAddress === params.data.qortalAtAddress
             );
@@ -570,7 +569,6 @@ export const TradeOffers: React.FC<any> = ({
     }
   }, []);
 
-  console.log("signed", signedUnlockingFees);
 
   useEffect(() => {
     getSignedUnlockingFees();
@@ -602,54 +600,54 @@ export const TradeOffers: React.FC<any> = ({
     const total = selectedOffers.reduce((acc: number, curr: any) => {
       return acc + (+curr.foreignAmount || 0); // Ensure qortAmount is defined
     }, 0);
-
+    if (selectedCoin === "PIRATECHAIN") return total;
     const totalWithKnownFees = +total + +knownFees;
     return totalWithKnownFees;
-  }, [selectedOffers, knownFees]);
+  }, [selectedOffers, knownFees, selectedCoin]);
 
   const buyOrder = async () => {
     try {
-      isRemoveOrdersWithoutUnlockingFees.current = false;
-      if (+foreignCoinBalance < +selectedTotalLTC.toFixed(4)) {
-        setOpen(true);
-        setInfo({
-          type: "error",
-          message: `You don't have enough ${getCoinLabel()} or your balance was not retrieved`,
-        });
-        return;
-      }
+
+      // if (+foreignCoinBalance < +selectedTotalLTC.toFixed(4)) {
+      //   setOpen(true);
+      //   setInfo({
+      //     type: "error",
+      //     message: `You don't have enough ${getCoinLabel()} or your balance was not retrieved`,
+      //   });
+      //   return;
+      // }
 
       if (selectedOffers?.length < 1) return;
       let offersWithKnownFees = [];
       const offersWithUnknownFees = [];
+      if (selectedCoin !== "PIRATECHAIN") {
+        selectedOffers.forEach((offer) => {
+          const feeEntry = signedUnlockingFees.find(
+            (item) => item?.atAddress === offer.qortalAtAddress
+          );
 
-      selectedOffers.forEach((offer) => {
-        const feeEntry = signedUnlockingFees.find(
-          (item) => item?.atAddress === offer.qortalAtAddress
-        );
-
-        if (feeEntry && typeof feeEntry.fee === "number") {
-          offersWithKnownFees.push({ ...offer, fee: feeEntry.fee });
-        } else {
-          offersWithUnknownFees.push(offer);
-        }
-      });
-      console.log("offersWithKnownFees", offersWithKnownFees);
-      console.log("offersWithUnknownFees", offersWithUnknownFees);
-      if (offersWithUnknownFees?.length > 0) {
-        await showTradesUnknownFee({
-          message: "",
+          if (feeEntry && typeof feeEntry.fee === "number") {
+            offersWithKnownFees.push({ ...offer, fee: feeEntry.fee });
+          } else {
+            offersWithUnknownFees.push(offer);
+          }
         });
+        if (offersWithUnknownFees?.length > 0) {
+          await showTradesUnknownFee({
+            message: "",
+          });
 
-        if (!isRemoveOrdersWithoutUnlockingFees.current) {
-          offersWithKnownFees = [
-            ...offersWithKnownFees,
-            ...offersWithUnknownFees,
-          ];
+          if (!isRemoveOrdersWithoutUnlockingFees.current) {
+            offersWithKnownFees = [
+              ...offersWithKnownFees,
+              ...offersWithUnknownFees,
+            ];
+          }
         }
+      } else {
+        offersWithKnownFees = selectedOffers;
       }
 
-      console.log("offersWithKnownFees", offersWithKnownFees);
 
       setIsShowBuyInProgress({ status: "buying" });
 
@@ -742,11 +740,9 @@ export const TradeOffers: React.FC<any> = ({
     const hasSignedFee = signedUnlockingFees?.find(
       (item) => item?.atAddress === params.data.qortalAtAddress
     );
-    console.log("hasSignedFee", hasSignedFee);
     if (hasSignedFee) {
-      console.log("fee2fee", fee);
       if (fee && hasSignedFee?.fee > fee) {
-        return { backgroundColor: "#ff6347" };
+        return { backgroundColor: "#FF0000" };
       }
     }
 
@@ -811,7 +807,6 @@ export const TradeOffers: React.FC<any> = ({
     feeRef.current = fee;
 
     if (gridRef.current?.api) {
-      console.log("Total rows:", gridRef.current.api.getDisplayedRowCount());
 
       gridRef.current.api.forEachNode((rowNode: RowNode) => {
         const qortalAtAddress = rowNode.data?.qortalAtAddress;
@@ -829,8 +824,8 @@ export const TradeOffers: React.FC<any> = ({
       gridRef.current.api.refreshCells({ force: true });
     }
   }, [signedUnlockingFees, fee]);
-  console.log("signedUnlockingFees", signedUnlockingFees, fee);
-  if (!signedUnlockingFees || !fee) return null;
+  if (!signedUnlockingFees || (!fee && selectedCoin !== "PIRATECHAIN"))
+    return null;
 
   return (
     <MainContainer>
@@ -863,11 +858,7 @@ export const TradeOffers: React.FC<any> = ({
                 (item) => item?.atAddress === params.data.qortalAtAddress
               );
               if (!hasSignedFee) selectable = true;
-              console.log(
-                "fee",
-                feeRef.current,
-                signedUnlockingFeesRef.current
-              );
+
               if (hasSignedFee && hasSignedFee?.fee > feeRef.current)
                 selectable = false;
               return selectable;
@@ -924,7 +915,9 @@ export const TradeOffers: React.FC<any> = ({
                 style={{
                   marginLeft: "auto",
                 }}
-              >{`${getCoinLabel()} (with known fees)`}</span>
+              >{`${getCoinLabel()} ${
+                selectedCoin !== "PIRATECHAIN" ? "with unlocking fees" : ""
+              }`}</span>
             </Typography>
           </Box>
           <Typography
@@ -1026,37 +1019,49 @@ export const TradeOffers: React.FC<any> = ({
             </DialogContentText>
 
             <Spacer height="20px" />
-            <FormControlLabel
-              sx={{
-                margin: 0,
-              }}
-              control={
-                <Checkbox
-                  onChange={(e) =>
-                    (isRemoveOrdersWithoutUnlockingFees.current =
-                      e.target.checked)
+            <FormControl>
+              <RadioGroup
+                aria-labelledby="demo-controlled-radio-buttons-group"
+                name="controlled-radio-buttons-group"
+                value={isRemoveOrders}
+                onChange={handleChange}
+              >
+                <FormControlLabel
+                  value={"remove"}
+                  control={
+                    <Radio
+                      sx={{
+                        "&.Mui-checked": {
+                          color: "white",
+                        },
+                        "& .MuiSvgIcon-root": {
+                          color: "white",
+                        },
+                      }}
+                    />
                   }
-                  edge="start"
-                  tabIndex={-1}
-                  disableRipple
-                  sx={{
-                    "&.Mui-checked": {
-                      color: "white",
-                    },
-                    "& .MuiSvgIcon-root": {
-                      color: "white",
-                    },
-                  }}
+                  label="Remove orders with unknown unlocking fees"
                 />
-              }
-              label={
-                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  <Typography sx={{ fontSize: "14px" }}>
-                    Remove orders with unknown unlocking fees
-                  </Typography>
-                </Box>
-              }
-            />
+                <FormControlLabel
+                  value={'keep'}
+                  control={
+                    <Radio
+                      sx={{
+                        "&.Mui-checked": {
+                          color: "white",
+                        },
+                        "& .MuiSvgIcon-root": {
+                          color: "white",
+                        },
+                      }}
+                    />
+                  }
+                  label="Keep orders with unknown unlocking fees"
+                />
+              </RadioGroup>
+            </FormControl>
+
+            
           </DialogContent>
           <DialogActions>
             <Button
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index ab1eab6..c1fa2aa 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -67,6 +67,7 @@ import { ReusableModal } from "../common/reusable-modal/ReusableModal";
 import { NotificationContext } from "../../contexts/notificationContext";
 import UnsignedFees from "../sell/UnsignedFees";
 import { FeeManager } from "../sell/FeeManager";
+import { Info } from "../sell/Info";
 
 const checkIfLocal = async () => {
   try {
@@ -504,6 +505,7 @@ export const Header = ({
               <SelectRow coin="ARRR" />
             </MenuItem>
           </Select>
+          <Info />
           {!isUsingGateway && selectedCoin !== 'PIRATECHAIN' && (
             <>
               <FeeManager selectedCoin={selectedCoin} fee={fee}
diff --git a/src/components/sell/FeeManager.tsx b/src/components/sell/FeeManager.tsx
index 484beea..580396e 100644
--- a/src/components/sell/FeeManager.tsx
+++ b/src/components/sell/FeeManager.tsx
@@ -51,7 +51,6 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
   const [openAlert, setOpenAlert] = useState(false);
   const [info, setInfo] = useState<any>(null);
   const { getCoinLabel } = useContext(gameContext);
-  console.log("editFee", editFee);
   const handleCloseAlert = (
     event?: React.SyntheticEvent | Event,
     reason?: SnackbarCloseReason
@@ -73,7 +72,6 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
     if (!coin) {
       return;
     }
-    console.log("selectedCoin", coin);
     // const coinRequest = coin.current.toLowerCase();
     const typeRequest = "feerequired";
 
@@ -90,7 +88,6 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
         setFee(response);
       }
 
-      console.log("response", response);
     } catch (error) {
       setFee("");
       console.error(error);
@@ -99,7 +96,6 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
 
   useEffect(() => {
     establishUpdateFeeForm(coin);
-    console.log("editFee or fetch changed");
   }, [coin, establishUpdateFeeForm]);
 
   const recommendedFeeData = useMemo(() => {
@@ -114,8 +110,9 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
   }, [resource?.data]);
 
   const recommendedFeeDisplay = useMemo(() => {
-    if (!selectedCoin || !recommendedFeeData) return;
+    if (!selectedCoin || !recommendedFeeData) return null;
     const coin = getCoinLabel(selectedCoin)?.toUpperCase();
+    if(!recommendedFeeData[coin]) return null
     return recommendedFeeData[coin][recommendedFee];
   }, [recommendedFeeData, recommendedFee, selectedCoin]);
 
@@ -127,7 +124,6 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
         if(recommendedFee !== 'custom'){
             feeToSave = calculateFeeFromRate(recommendedFeeDisplay, 300)
         }
-        console.log('feeToSave', feeToSave)
       const response = await qortalRequestWithTimeout(
         {
           action: "UPDATE_FOREIGN_FEE",
@@ -205,7 +201,7 @@ export const FeeManager = ({ selectedCoin, setFee, fee }) => {
           },
         }}
       >
-        <Typography>Fee: {fee}</Typography>
+        <Typography>Fee: {fee} sats</Typography>
 
         <ChangeCircleIcon
           sx={{
diff --git a/src/components/sell/Info.tsx b/src/components/sell/Info.tsx
new file mode 100644
index 0000000..c73434c
--- /dev/null
+++ b/src/components/sell/Info.tsx
@@ -0,0 +1,94 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import gameContext from "../../contexts/gameContext";
+import {
+  Alert,
+  Box,
+  ButtonBase,
+  Snackbar,
+  SnackbarCloseReason,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from "@mui/material";
+import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
+import { ReusableModal } from "../common/reusable-modal/ReusableModal";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import {
+  CoinActionContainer,
+  CoinActionRow,
+  HeaderRow,
+} from "../header/Header-styles";
+import { CustomInput, CustomLabel } from "./CreateSell";
+import { Spacer } from "../common/Spacer";
+import { usePublish, Service, QortalGetMetadata } from "qapp-core";
+import { SetLeftFeature } from "ag-grid-community";
+
+
+export const Info = () => {
+  const [openModal, setOpenModal] = useState(false)
+  
+  return (
+    <>
+      <ButtonBase
+        onClick={() => {
+          setOpenModal(true);
+      
+        }}
+        sx={{
+          minHeight: "42px",
+          border: "1px solid gray",
+          color: "white",
+          display: "flex",
+          alignItems: "center",
+          padding: "5px 5px",
+          gap: "10px",
+          borderRadius: "5px",
+          "&:hover": {
+            border: "1px solid white", // Border color on hover
+          },
+        }}
+      >
+
+        <QuestionMarkIcon
+                          sx={{
+                            color: "white",
+                          }}
+                        />
+      </ButtonBase>
+      {openModal && (
+        <ReusableModal
+          onClickClose={() => {
+            setOpenModal(false);
+          }}
+          backdrop
+        >
+          <CoinActionContainer sx={{
+            width: '450px',
+            maxWidth: '95vw'
+          }}>
+            <CoinActionRow>
+              <HeaderRow>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    color: "white",
+                  }}
+                >
+                  Information on fees
+                </Typography>
+              </HeaderRow>
+            </CoinActionRow>
+
+          </CoinActionContainer>
+        </ReusableModal>
+      )}
+
+    </>
+  );
+};
diff --git a/src/components/sell/UnsignedFees.tsx b/src/components/sell/UnsignedFees.tsx
index cf5de27..16e54c7 100644
--- a/src/components/sell/UnsignedFees.tsx
+++ b/src/components/sell/UnsignedFees.tsx
@@ -28,7 +28,6 @@ export default function UnsignedFees({ qortAddress }) {
   const [openModal, setOpenModal] = useState(false);
   const [openAlert, setOpenAlert] = useState(false);
   const [info, setInfo] = useState<any>(null);
-  console.log("isPositive", isPositive);
   const qortAddressRef = useRef(null);
 
   const handleCloseAlert = (