feat: comments

components/ActionSection.tsx

@@ -242,11 +242,12 @@ export function ActionSection(): ReactElement | null {
 			toNormalizedValue(totalToDisperse, configuration.tokenToSend?.decimals || 18),
 			4,
 			configuration.tokenToSend?.decimals || 18
-		)} ${configuration.tokenToSend?.symbol}`;
+		)} ${configuration.tokenToSend?.symbol || configuration.tokenToSend?.name}`;
 	}, [
 		address,
 		configuration.tokenToSend?.address,
 		configuration.tokenToSend?.decimals,
+		configuration.tokenToSend?.name,
 		configuration.tokenToSend?.symbol,
 		totalToDisperse
 	]);
@@ -268,11 +269,14 @@ export function ActionSection(): ReactElement | null {
 		) {
 			return 'Disperse';
 		}
-		return 'Approve and Disperse';
+		return 'Disperse';
 	};
 
 	/**********************************************************************************************
-	 ** TODO: write comment of what it does
+	 ** onAction function handles the main action of the component based on the current state.
+	 ** It checks if the wallet is connected, if a single token should be sent, if the token is
+	 ** approved, and calls the appropriate function accordingly. The function either connects
+	 ** the wallet, sends a single token, disperses tokens, or handles token approval.
 	 *********************************************************************************************/
 	const onAction = async (): Promise<void> => {
 		if (!address) {

components/UploadModal.tsx

@@ -113,7 +113,7 @@ export function UploadModal({
 					className={cl(
 						'mt-10 relative flex size-full h-full flex-col justify-center',
 						'rounded-lg border border-dashed border-primary/40 p-6',
-						isDragActive && !isProcessingFile ? 'bg-primary/50' : ''
+						isDragActive && !isProcessingFile ? 'bg-primary/10' : ''
 					)}>
 					<div className={'flex flex-col gap-6'}>
 						{!isProcessingFile && (
@@ -123,7 +123,7 @@ export function UploadModal({
 						)}
 						{getHint()}
 					</div>
-					{!isProcessingFile && (
+					{!isProcessingFile && !isDragActive && (
 						<div className={'absolute bottom-4 left-1/2 -translate-x-1/2'}>
 							<span className={'text-xs text-primary/40'}>{'.csv extension'}</span>
 						</div>

components/common/Warning.tsx

@@ -9,6 +9,17 @@ type TWaringProps = {
 };
 
 export function Warning({message, type}: TWaringProps): ReactElement {
+	/**********************************************************************************************
+	 ** getWarningColor function determines the appropriate CSS classes for the warning component
+	 ** based on the 'type' prop. It returns a string of CSS classes that set the border color,
+	 ** text color, and background color of the warning.
+	 **
+	 ** - For 'error' type: red colors (fail)
+	 ** - For 'warning' type: yellow colors (warning)
+	 ** - For all other types: default to primary colors
+	 **
+	 ** The function uses a semi-transparent background (20% opacity) for all types.
+	 *********************************************************************************************/
 	const getWarningColor = (): string => {
 		if (type === 'error') {
 			return 'border-fail text-fail bg-fail/20';

components/common/hooks/useValidateAmountInput.ts

@@ -8,9 +8,6 @@ import type {TNormalizedBN, TToken} from '@builtbymom/web3/types';
 
 export const defaultTokenInputLike: TTokenAmountInputElement = getNewInput();
 
-/**************************************************************************************************
- ** TODO: Add comment
- *************************************************************************************************/
 export function useValidateAmountInput(): {
 	validate: (
 		inputValue: string | undefined,
@@ -21,6 +18,27 @@ export function useValidateAmountInput(): {
 } {
 	const [result, set_result] = useState<Partial<TTokenAmountInputElement> | undefined>(undefined);
 
+	/**********************************************************************************************
+	 ** validate function is a memoized callback that validates the input amount for a token.
+	 ** It handles various scenarios:
+	 ** 1. No input value or raw input
+	 ** 2. Raw input greater than zero
+	 ** 3. String input value greater than zero
+	 ** 4. Invalid input
+	 ** 
+	 ** For each scenario, it checks:
+	 ** - If a token is selected
+	 ** - If the input amount exceeds the token balance
+	 ** 
+	 ** It returns an object with:
+	 ** - amount: The display value of the input
+	 ** - normalizedBigAmount: The input amount as a normalized BigInt
+	 ** - isValid: Whether the input is valid
+	 ** - token: The token object
+	 ** - error: Any error message, if applicable
+	 ** 
+	 ** The function also updates the component's state with the result.
+	 *********************************************************************************************/
 	const validate = useCallback(
 		(
 			inputValue: string | undefined,

components/common/utils/utils.url.ts

@@ -6,6 +6,14 @@ import type {ParsedUrlQuery} from 'querystring';
 type TGetParamFromUrlQuery<TDefault, TResult> = (key: string, defaultValue?: TDefault) => TResult;
 
 type TGetStringParamFromUrlQuery = TGetParamFromUrlQuery<string | undefined, string | undefined>;
+
+/**********************************************************************************************
+ ** getStringParamFromUrlQuery function returns a function that extracts a string parameter
+ ** from a URL query.
+ ** 
+ ** This function is useful for safely extracting string parameters from URL queries, providing
+ ** a default value if the parameter is not present or is an empty string.
+ *********************************************************************************************/
 export function getStringParamFromUrlQuery(query: ParsedUrlQuery): TGetStringParamFromUrlQuery {
 	return (key: string, defaultValue?: string) => {
 		const param = query[key];
@@ -17,6 +25,17 @@ export function getStringParamFromUrlQuery(query: ParsedUrlQuery): TGetStringPar
 }
 
 type TGetNumberParamFromUrlQuery = TGetParamFromUrlQuery<number | undefined, number | undefined>;
+
+/**********************************************************************************************
+ ** getNumberParamFromUrlQuery function returns a function that extracts a number parameter
+ ** from a URL query.
+ ** 
+ ** This function is useful for safely extracting number parameters from URL queries, providing
+ ** a default value if the parameter is not present or cannot be converted to a valid number.
+ ** 
+ ** It attempts to parse the parameter as a number, and returns the parsed number if successful,
+ ** or the default value if parsing fails or the parameter is not present.
+ *********************************************************************************************/
 export function getNumberParamFromUrlQuery(query: ParsedUrlQuery): TGetNumberParamFromUrlQuery {
 	return (key: string, defaultValue?: number) => {
 		const param = query[key];
@@ -31,6 +50,22 @@ export function getNumberParamFromUrlQuery(query: ParsedUrlQuery): TGetNumberPar
 }
 
 type TGetArrayParamFromUrlQuery = TGetParamFromUrlQuery<[] | undefined, string[] | undefined>;
+
+/**********************************************************************************************
+ ** getArrayParamFromUrlQuery function returns a function that extracts an array parameter
+ ** from a URL query.
+ ** 
+ ** This function is useful for safely extracting array parameters from URL queries, providing
+ ** a default value if the parameter is not present or is not in the expected format.
+ ** 
+ ** It handles three cases:
+ ** 1. If the parameter is already an array, it returns it as-is.
+ ** 2. If the parameter is a string, it splits it by commas to create an array.
+ ** 3. If the parameter is neither an array nor a string, it returns the default value.
+ ** 
+ ** This allows for flexible parsing of array-like parameters in URL queries, supporting both
+ ** multi-value query parameters and comma-separated string representations of arrays.
+ *********************************************************************************************/
 export function getArrayParamFromUrlQuery(query: ParsedUrlQuery): TGetArrayParamFromUrlQuery {
 	return (key: string, defaultValue?: []) => {
 		const param = query[key];
@@ -44,6 +79,16 @@ export function getArrayParamFromUrlQuery(query: ParsedUrlQuery): TGetArrayParam
 	};
 }
 
+/**********************************************************************************************
+ ** getParamFromUrlQuery function returns an object with methods to extract different types of
+ ** parameters from a URL query.
+ ** 
+ ** This function combines the functionality of getStringParamFromUrlQuery, 
+ ** getNumberParamFromUrlQuery, and getArrayParamFromUrlQuery into a single object.
+ ** 
+ ** It provides a convenient way to access all three parameter extraction methods at once,
+ ** allowing for flexible and type-specific parsing of URL query parameters.
+ *********************************************************************************************/
 export function getParamFromUrlQuery(query: ParsedUrlQuery): {
 	string: TGetStringParamFromUrlQuery;
 	number: TGetNumberParamFromUrlQuery;