Pre-merge improvements

components/containers/ERCContainer.tsx

@@ -31,7 +31,7 @@ interface Props {
   handleTokenAddressChange: (e: ChangeEvent<HTMLInputElement>) => void;
   resetForm: () => void;
   setErrorMessage: Dispatch<SetStateAction<string | false>>;
-  setOpenModal: Dispatch<SetStateAction<false | ModalSelector>>;
+  setOpenModal: Dispatch<SetStateAction<ModalSelector>>;
   setRecipients: Dispatch<SetStateAction<[string, string][]>>;
 }
 
@@ -78,7 +78,7 @@ const ERCContainer = (props: Props) => {
           isERC721={isERC721}
           symbol={tokenSymbol}
           isOpen={openModal === 'confirm'}
-          setIsOpen={(val) => setOpenModal(val ? 'confirm' : false)}
+          setIsOpen={(val) => setOpenModal(val ? 'confirm' : '')}
           recipients={parsedRecipients}
           balanceData={balanceData}
           loadingMessage={loadingMessage || undefined}
@@ -109,7 +109,7 @@ const ERCContainer = (props: Props) => {
             isOpen={openModal === 'congrats'}
             setIsOpen={(val) => {
               resetForm();
-              setOpenModal(val ? 'congrats' : false);
+              setOpenModal(val ? 'congrats' : '');
             }}
             resetForm={resetForm}
           />

components/hooks/friendtech/useFriendtechData.ts

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 export default function useFriendtechData(accountAddress: String) {
 
   const [holders, setHolders] = useState<string[]>([]);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<any>(null);
 
   const apiURL = `https://prod-api.kosetto.com/users/${accountAddress.toString()}/token/holders`;
 

components/providers/ERC20Provider.tsx

@@ -18,7 +18,7 @@ export default function ERC20(props: IAirdropEthProps) {
     (contractAddress as Address) || ''
   );
   const [recipients, setRecipients] = useState<[string, string][]>([]);
-  const [openModal, setOpenModal] = useState<ModalSelector | false>(false);
+  const [openModal, setOpenModal] = useState<ModalSelector>("");
   const [loadingMessage, setLoadingMessage] = useState<string | false>(false);
   const [errorMessage, setErrorMessage] = useState<string | false>(false);
 

components/providers/ERC721Provider.tsx

@@ -17,7 +17,7 @@ export default function ERC721(props: IAirdropEthProps) {
     (contractAddress as Address) || ''
   );
   const [recipients, setRecipients] = useState<[string, string][]>([]);
-  const [openModal, setOpenModal] = useState<ModalSelector | false>(false);
+  const [openModal, setOpenModal] = useState<ModalSelector>('');
   const [loadingMessage, setLoadingMessage] = useState<string | false>(false);
   const [errorMessage, setErrorMessage] = useState<string | false>(false);
 

components/providers/ETHProvider.tsx

@@ -28,7 +28,7 @@ export default function AirdropETH(props: Props) {
     'flex items-center border rounded-md md:rounded-full md:inline-block px-4 py-2 md:py-2 md:px-3 text-sm mt-2 min-h-fit';
 
   const [recipients, setRecipients] = useState<[string, string][]>([]);
-  const [openModal, setOpenModal] = useState<ModalSelector | false>(false);
+  const [openModal, setOpenModal] = useState<ModalSelector>("");
   const [loadingMessage, setLoadingMessage] = useState<string | false>(false);
   const [errorMessage, setErrorMessage] = useState<string | false>(false);
 
@@ -99,7 +99,7 @@ export default function AirdropETH(props: Props) {
       {openModal === 'confirm' && (
         <ConfirmModal
           isOpen={openModal === 'confirm'}
-          setIsOpen={(val) => setOpenModal(val ? 'confirm' : false)}
+          setIsOpen={(val) => setOpenModal(val ? 'confirm' : '')}
           symbol="ETH"
           recipients={parsedRecipients}
           balanceData={balance}
@@ -122,7 +122,7 @@ export default function AirdropETH(props: Props) {
             isOpen={openModal === 'congrats'}
             setIsOpen={(val) => {
               resetForm();
-              setOpenModal(val ? 'congrats' : false);
+              setOpenModal(val ? 'congrats' : '');
             }}
             resetForm={resetForm}
           />

components/providers/FriendtechProvider.tsx

@@ -45,62 +45,6 @@ export default function Friendtech(props: IAirdropEthProps) {
 
   const { holders } = useFriendtechData(tokenAddress);
 
-//   const parsedRecipients = useMemo(() => {
-//     try {
-//       return (
-//         recipients.length
-//           ? recipientsParser(tokenDecimals).parse(recipients)
-//           : []
-//       ) as AirdropRecipient[];
-//     } catch (e) {
-//       displayMessage((e as Error).message, "error");
-//       return [] as AirdropRecipient[];
-//     }
-//   }, [tokenDecimals, recipients]);
-
-  // low-priority todo: improve the typing without casting
-//   const totalAllowance = useMemo(() => {
-//     return parsedRecipients.reduce((acc: BigInt, { amount }) => {
-//       const a = BigInt(acc.toString());
-//       const b = BigInt(amount.toString());
-
-//       return a + b;
-//     }, BigInt(0));
-//   }, [parsedRecipients]);
-
-//   const { write: airdropWrite } = useApproveAirdrop(
-//     tokenAddress,
-//     parsedRecipients,
-//     () => displayMessage("Airdrop transaction pending..."),
-//     function onSuccess() {
-//       displayMessage("Airdrop transaction successful!", "success");
-//       setOpenModal("congrats");
-//     },
-//     function onError(error) {
-//       displayMessage(error, "error");
-//     }
-//   );
-
-//   const { allowance, write: approveWrite } = useApproveAllowance(
-//     tokenAddress,
-//     totalAllowance,
-//     () => displayMessage("Approval transaction pending..."), // on Pending
-//     function onSuccess() {
-//       displayMessage("Approval transaction submitted!", "success");
-//       airdropWrite?.();
-//     },
-//     function onError(error) {
-//       displayMessage(error, "error");
-//     }
-//   );
-
-//   // Switch over to ERC-721 if the contract entered is a 721
-//   if (isERC721) {
-//     setContractAddress?.(tokenAddress);
-//     setSelected("ERC721");
-//     return null;
-//   }
-
   const handleTokenAddressChange = (e: ChangeEvent<HTMLInputElement>) => {
     const rawInput = e.target.value;
     if (rawInput.length > 42) return;

components/ui/MagicTextArea.tsx

@@ -176,7 +176,7 @@ const MagicTextArea: FC<Props> = (props: Props) => {
 
       <textarea
         value={textareaValue}
-        className="w-full min-h-[200px] max-h-[400px] mt-4 p-3 text-black border-black border-2 rounded-md" // adjusted the heights
+        className="w-full min-h-[200px] max-h-[400px] mt-4 p-3 text-black border-black border-2 rounded-md"
         onChange={handleTextareaChange}
         placeholder={placeholder()}
       />