Fix linter issues

open-giving/src/components/DonationForm.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 
 import useDonation from '../hooks/useDonation';
-import DonateButton from './landingpage/donateButton';
-import CopyWithTooltip from './landingpage/copy';
 import { sanitizeNumericInput } from '../utils/paymentMethods';
 
+import CopyWithTooltip from './landingpage/copy';
+import DonateButton from './landingpage/donateButton';
+
 const dev = process.env.NODE_ENV == 'development';
 const DonationForm = React.memo(
   ({ method, index, setSnackbarMessage, setSnackbarOpen, NPOName }) => {

open-giving/src/components/Header.js

@@ -1,8 +1,9 @@
-import useIsMobileScreen from '@/hooks/mobile';
 import Image from 'next/image';
 import React from 'react';
 import { FaGithub } from 'react-icons/fa';
 
+import useIsMobileScreen from '@/hooks/mobile';
+
 const Header = () => {
   const isMobile = useIsMobileScreen();
   return (

open-giving/src/components/Layout.js

@@ -1,8 +1,9 @@
+import Image from 'next/image';
 import React from 'react';
-import TestModeSwitcher from './TestModeSwitcher';
-import Header from './Header';
 import { FaHeart } from 'react-icons/fa6';
-import Image from 'next/image';
+
+import Header from './Header';
+import TestModeSwitcher from './TestModeSwitcher';
 const Layout = ({ children, plain = false }) => {
   return (
     <div className="min-h-screen  bg-gray-50 w-full">

open-giving/src/components/NonProfitDialog.js

@@ -1,15 +1,17 @@
+import Image from 'next/image';
 import React, { useState } from 'react';
-import { MdClose, MdLocationOn } from 'react-icons/md';
 import { FaRegCalendarAlt } from 'react-icons/fa';
-import DonationForm from './DonationForm';
-import Image from 'next/image';
 import { FaAngleRight, FaArrowLeft } from 'react-icons/fa6';
+import { MdClose, MdLocationOn } from 'react-icons/md';
+
+import DonationForm from './DonationForm';
+
+import useIsMobileScreen from '@/hooks/mobile';
 import {
   filterDonationMethods,
   formatPaymentMethodName,
   getIconByMethod,
 } from '@/utils/paymentMethods';
-import useIsMobileScreen from '@/hooks/mobile';
 
 const Modal = ({ open, onClose, children }) => {
   if (!open) return null;
@@ -39,14 +41,14 @@ const NonProfitDialog = ({
     nonProfit?.logo || defaultLogo
   );
   const [selectedPaymentType, setSelectedPaymentType] = useState(null);
+  const isMobile = useIsMobileScreen();
 
   const handleDialogImageError = () => {
     setDialogImgSrc(defaultLogo);
   };
 
   if (!nonProfit) return null;
 
-  const isMobile = useIsMobileScreen();
   const getPaymentID = (method) => {
     if (!method.paymentID) {
       return true;
@@ -102,7 +104,10 @@ const NonProfitDialog = ({
                   },
                 ].map((i) => {
                   return (
-                    <span className="bg-[#EDEAEC] font-sans flex flex-row items-center px-[11px] py-[6px] text-[#4A4152] font-medium text-[11px] md:text-[12px] rounded-full gap-1">
+                    <span
+                      key={i.name}
+                      className="bg-[#EDEAEC] font-sans flex flex-row items-center px-[11px] py-[6px] text-[#4A4152] font-medium text-[11px] md:text-[12px] rounded-full gap-1"
+                    >
                       {i.icon} {i.name}
                     </span>
                   );
@@ -186,6 +191,7 @@ const NonProfitDialog = ({
                 {options.map((i) => {
                   return (
                     <button
+                      key={i.type}
                       onClick={() => handleSelect(i.type)}
                       className="border w-full px-[12px] py-[13px] md:py-[11px] mb-[10px]  border-[#C4C4C470] bg-[#F1E7F208] rounded-[8px] flex flex-row items-center justify-between"
                     >

open-giving/src/components/TestModeSwitcher.js

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import React from 'react';
-import { FaToggleOn, FaToggleOff } from 'react-icons/fa';
+import { FaToggleOff, FaToggleOn } from 'react-icons/fa';
 
 const TestModeSwitcher = () => {
   const router = useRouter();

open-giving/src/components/landingpage/Hero.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FaHeart } from 'react-icons/fa6';
+
 import { HeroContent } from '../constants';
 
 export const Hero = () => {

open-giving/src/components/landingpage/Orgs.js

@@ -1,8 +1,11 @@
-import { FaHeart } from 'react-icons/fa6';
 import { useState } from 'react';
+import { FaHeart } from 'react-icons/fa6';
+import { LuSearchSlash } from 'react-icons/lu';
+
 import QRCodeComponent from '../QRCodeComponent';
+
 import { filterDonationMethods } from '@/utils/paymentMethods';
-import { LuSearchSlash } from 'react-icons/lu';
+
 
 const OrgCard = ({ org, onLearnMore, showQRCode }) => {
   const paymentOptions = filterDonationMethods(org);

open-giving/src/components/landingpage/SelectDonationMethod.js

@@ -1,6 +1,7 @@
-import useIsMobileScreen from '@/hooks/mobile';
 import Image from 'next/image';
 
+import useIsMobileScreen from '@/hooks/mobile';
+
 export const SelectDonationMethod = ({
   paymentMethods,
   handleToggle,

open-giving/src/components/landingpage/donateButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FaHeart } from 'react-icons/fa6';
+
 import Loader from './Loader';
 
 const DonateButton = ({

open-giving/src/hooks/mobile.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const useIsMobileScreen = (mobileBreakpoint = 768) => {
   const [isMobile, setIsMobile] = useState(false);

open-giving/src/pages/index.js

@@ -1,14 +1,14 @@
-import { Hero } from '@/components/landingpage/Hero';
-
-import { DonationOrganizations } from '@/components/landingpage/Orgs';
-import { SelectDonationMethod } from '@/components/landingpage/SelectDonationMethod';
-import Layout from '@/components/Layout';
 import { useRouter } from 'next/router';
-import { useState, useEffect } from 'react';
 import { verifiedNonprofits } from 'non-profit-donations';
+import { useEffect, useState } from 'react';
+
+import Layout from '@/components/Layout';
+import NonProfitDialog from '@/components/NonProfitDialog';
 import { donationMethods } from '@/components/constants';
+import { Hero } from '@/components/landingpage/Hero';
+import { DonationOrganizations } from '@/components/landingpage/Orgs';
+import { SelectDonationMethod } from '@/components/landingpage/SelectDonationMethod';
 import Pagination from '@/components/landingpage/pagination';
-import NonProfitDialog from '@/components/NonProfitDialog';
 import Snackbar from '@/components/landingpage/snackbar';
 
 const ITEMS_PER_PAGE = 9;