feat: state context improvement, style impro

Author: kemuru

web/src/context/NewTransactionContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useState, useContext, useEffect } from "react";
+import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { useLocalStorage } from "hooks/useLocalStorage";
 
 export interface IToken {
   symbol: string;
@@ -12,31 +13,31 @@ interface INewTransactionContext {
   escrowTitle: string;
   setEscrowTitle: (title: string) => void;
   deliverableText: string;
-  setDeliverableText: (deliverableText: string) => void;
+  setDeliverableText: (text: string) => void;
   deliverableFile: File | undefined;
-  setDeliverableFile: (deliverableFile: File | undefined) => void;
+  setDeliverableFile: (file: File | undefined) => void;
   extraDescriptionUri: string;
-  setExtraDescriptionUri: (extraDescriptionUri: string) => void;
+  setExtraDescriptionUri: (uri: string) => void;
   transactionUri: string;
-  setTransactionUri: (transactionUri: string) => void;
+  setTransactionUri: (uri: string) => void;
   isFileUploading: boolean;
-  setIsFileUploading: (isFileUploading: boolean) => void;
+  setIsFileUploading: (v: boolean) => void;
   receivingQuantity: string;
-  setReceivingQuantity: (quantity: string) => void;
+  setReceivingQuantity: (qty: string) => void;
   receivingToken: string;
   setReceivingToken: (token: string) => void;
   sellerAddress: string;
-  setSellerAddress: (address: string) => void;
+  setSellerAddress: (addr: string) => void;
   sendingQuantity: string;
-  setSendingQuantity: (quantity: string) => void;
+  setSendingQuantity: (qty: string) => void;
   sendingToken: IToken;
   setSendingToken: (token: IToken) => void;
   buyerAddress: string;
-  setBuyerAddress: (address: string) => void;
+  setBuyerAddress: (addr: string) => void;
   isBuyerAddressCustom: boolean;
   setIsBuyerAddressCustom: (v: boolean) => void;
   deadline: string;
-  setDeadline: (deadline: string) => void;
+  setDeadline: (d: string) => void;
   notificationEmail: string;
   setNotificationEmail: (email: string) => void;
   resetContext: () => void;
@@ -48,36 +49,38 @@ interface INewTransactionContext {
   setIsBuyerAddressResolved: (v: boolean) => void;
 }
 
-const NewTransactionContext = createContext<INewTransactionContext>({} as INewTransactionContext);
+const initialToken: IToken = { address: "native", symbol: "", logo: "" };
 
-export const useNewTransactionContext = () => useContext(NewTransactionContext);
+const NewTransactionContext = createContext<INewTransactionContext | undefined>(undefined);
+
+export const useNewTransactionContext = () => {
+  const context = useContext(NewTransactionContext);
+  if (!context) throw new Error("Context Provider not found.");
+  return context;
+};
 
 export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [escrowType, setEscrowType] = useState(localStorage.getItem("escrowType") || "general");
-  const [escrowTitle, setEscrowTitle] = useState(localStorage.getItem("escrowTitle") || "");
-  const [deliverableText, setDeliverableText] = useState(localStorage.getItem("deliverableText") || "");
+  const [escrowType, setEscrowType] = useLocalStorage("escrowType", "general");
+  const [escrowTitle, setEscrowTitle] = useLocalStorage("escrowTitle", "");
+  const [deliverableText, setDeliverableText] = useLocalStorage("deliverableText", "");
   const [deliverableFile, setDeliverableFile] = useState<File | undefined>();
-  const [transactionUri, setTransactionUri] = useState(localStorage.getItem("transactionUri") || "");
-  const [extraDescriptionUri, setExtraDescriptionUri] = useState(localStorage.getItem("extraDescriptionUri") || "");
+  const [transactionUri, setTransactionUri] = useLocalStorage("transactionUri", "");
+  const [extraDescriptionUri, setExtraDescriptionUri] = useLocalStorage("extraDescriptionUri", "");
   const [isFileUploading, setIsFileUploading] = useState(false);
   const [hasSufficientNativeBalance, setHasSufficientNativeBalance] = useState(true);
-  const [receivingQuantity, setReceivingQuantity] = useState(localStorage.getItem("receivingQuantity") || "");
-  const [receivingToken, setReceivingToken] = useState(localStorage.getItem("receivingToken") || "");
-  const [sellerAddress, setSellerAddress] = useState(localStorage.getItem("sellerAddress") || "");
-  const [sendingQuantity, setSendingQuantity] = useState(localStorage.getItem("sendingQuantity") || "");
-  const [sendingToken, setSendingToken] = useState<IToken>(
-    JSON.parse(localStorage.getItem("sendingToken") ?? "null") || { address: "native", symbol: "", logo: "" }
-  );
-  const [buyerAddress, setBuyerAddress] = useState(localStorage.getItem("buyerAddress") ?? "");
-  const [isBuyerAddressCustom, setIsBuyerAddressCustom] = useState(
-    JSON.parse(localStorage.getItem("isBuyerAddressCustom") ?? "false")
-  );
+  const [receivingQuantity, setReceivingQuantity] = useLocalStorage("receivingQuantity", "");
+  const [receivingToken, setReceivingToken] = useLocalStorage("receivingToken", "");
+  const [sellerAddress, setSellerAddress] = useLocalStorage("sellerAddress", "");
+  const [sendingQuantity, setSendingQuantity] = useLocalStorage("sendingQuantity", "");
+  const [sendingToken, setSendingToken] = useLocalStorage("sendingToken", initialToken);
+  const [buyerAddress, setBuyerAddress] = useLocalStorage("buyerAddress", "");
+  const [isBuyerAddressCustom, setIsBuyerAddressCustom] = useLocalStorage("isBuyerAddressCustom", false);
   const [isRecipientAddressResolved, setIsRecipientAddressResolved] = useState(false);
   const [isBuyerAddressResolved, setIsBuyerAddressResolved] = useState(false);
-  const [deadline, setDeadline] = useState(localStorage.getItem("deadline") || "");
-  const [notificationEmail, setNotificationEmail] = useState(localStorage.getItem("notificationEmail") || "");
+  const [deadline, setDeadline] = useLocalStorage("deadline", "");
+  const [notificationEmail, setNotificationEmail] = useLocalStorage("notificationEmail", "");
 
-  const resetContext = () => {
+  const resetContext = useCallback(() => {
     setEscrowType("general");
     setEscrowTitle("");
     setDeliverableText("");
@@ -89,93 +92,96 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = (
     setReceivingToken("");
     setSellerAddress("");
     setSendingQuantity("");
-    setSendingToken({ address: "native", symbol: "", logo: "" });
+    setSendingToken(initialToken);
     setBuyerAddress("");
     setIsBuyerAddressCustom(false);
     setDeadline("");
     setNotificationEmail("");
     setHasSufficientNativeBalance(true);
     setIsRecipientAddressResolved(false);
     setIsBuyerAddressResolved(false);
-  };
-
-  useEffect(() => {
-    localStorage.setItem("escrowType", escrowType);
-    localStorage.setItem("escrowTitle", escrowTitle);
-    localStorage.setItem("deliverableText", deliverableText);
-    localStorage.setItem("extraDescriptionUri", extraDescriptionUri);
-    localStorage.setItem("transactionUri", transactionUri);
-    localStorage.setItem("receivingQuantity", receivingQuantity);
-    localStorage.setItem("receivingToken", receivingToken);
-    localStorage.setItem("buyerAddress", buyerAddress);
-    localStorage.setItem("isBuyerAddressCustom", JSON.stringify(isBuyerAddressCustom));
-    localStorage.setItem("sendingQuantity", sendingQuantity);
-    localStorage.setItem("sendingToken", JSON.stringify(sendingToken));
-    localStorage.setItem("sellerAddress", sellerAddress);
-    localStorage.setItem("deadline", deadline);
-    localStorage.setItem("notificationEmail", notificationEmail);
   }, [
-    escrowType,
-    escrowTitle,
-    deliverableText,
-    extraDescriptionUri,
-    transactionUri,
-    receivingQuantity,
-    receivingToken,
-    buyerAddress,
-    isBuyerAddressCustom,
-    sendingQuantity,
-    sendingToken,
-    sellerAddress,
-    deadline,
-    notificationEmail,
+    setEscrowType,
+    setEscrowTitle,
+    setDeliverableText,
+    setExtraDescriptionUri,
+    setTransactionUri,
+    setReceivingQuantity,
+    setReceivingToken,
+    setSellerAddress,
+    setSendingQuantity,
+    setSendingToken,
+    setBuyerAddress,
+    setIsBuyerAddressCustom,
+    setDeadline,
+    setNotificationEmail,
   ]);
 
-  return (
-    <NewTransactionContext.Provider
-      value={{
-        escrowType,
-        setEscrowType,
-        escrowTitle,
-        setEscrowTitle,
-        deliverableText,
-        setDeliverableText,
-        deliverableFile,
-        setDeliverableFile,
-        extraDescriptionUri,
-        setExtraDescriptionUri,
-        transactionUri,
-        setTransactionUri,
-        isFileUploading,
-        setIsFileUploading,
-        receivingQuantity,
-        setReceivingQuantity,
-        receivingToken,
-        setReceivingToken,
-        buyerAddress,
-        setBuyerAddress,
-        isBuyerAddressCustom,
-        setIsBuyerAddressCustom,
-        sendingQuantity,
-        setSendingQuantity,
-        hasSufficientNativeBalance,
-        setHasSufficientNativeBalance,
-        sendingToken,
-        setSendingToken,
-        sellerAddress,
-        setSellerAddress,
-        isRecipientAddressResolved,
-        setIsRecipientAddressResolved,
-        isBuyerAddressResolved,
-        setIsBuyerAddressResolved,
-        deadline,
-        setDeadline,
-        notificationEmail,
-        setNotificationEmail,
-        resetContext,
-      }}
-    >
-      {children}
-    </NewTransactionContext.Provider>
+  const contextValues = useMemo(
+    () => ({
+      escrowType,
+      setEscrowType,
+      escrowTitle,
+      setEscrowTitle,
+      deliverableText,
+      setDeliverableText,
+      deliverableFile,
+      setDeliverableFile,
+      extraDescriptionUri,
+      setExtraDescriptionUri,
+      transactionUri,
+      setTransactionUri,
+      isFileUploading,
+      setIsFileUploading,
+      receivingQuantity,
+      setReceivingQuantity,
+      receivingToken,
+      setReceivingToken,
+      buyerAddress,
+      setBuyerAddress,
+      isBuyerAddressCustom,
+      setIsBuyerAddressCustom,
+      sendingQuantity,
+      setSendingQuantity,
+      hasSufficientNativeBalance,
+      setHasSufficientNativeBalance,
+      sendingToken,
+      setSendingToken,
+      sellerAddress,
+      setSellerAddress,
+      isRecipientAddressResolved,
+      setIsRecipientAddressResolved,
+      isBuyerAddressResolved,
+      setIsBuyerAddressResolved,
+      deadline,
+      setDeadline,
+      notificationEmail,
+      setNotificationEmail,
+      resetContext,
+    }),
+    [
+      escrowType,
+      escrowTitle,
+      deliverableText,
+      deliverableFile,
+      extraDescriptionUri,
+      transactionUri,
+      isFileUploading,
+      receivingQuantity,
+      receivingToken,
+      buyerAddress,
+      isBuyerAddressCustom,
+      sendingQuantity,
+      hasSufficientNativeBalance,
+      sendingToken,
+      sellerAddress,
+      isRecipientAddressResolved,
+      isBuyerAddressResolved,
+      deadline,
+      notificationEmail,
+      resetContext,
+    ]
   );
+
+  return <NewTransactionContext.Provider value={contextValues}>{children}</NewTransactionContext.Provider>;
 };

web/src/pages/NewTransaction/Terms/Payment/BuyerAddress.tsx

@@ -61,7 +61,7 @@ const Collapse = styled.div<{ $open: boolean; }>`
   max-height: ${({ $open }) => ($open ? "160px" : "0")};
   opacity: ${({ $open }) => ($open ? 1 : 0)};
   overflow: hidden;
-  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
+  transition: max-height 0.5s, opacity 0.5s ease;
 `;
 
 const SecondaryLabel = styled.label`