Minor typescript cleanup to resolve warnings

.gitignore

@@ -22,6 +22,9 @@ coverage
 # Vercel
 .vercel
 
+# Typescript
+*.tsbuildinfo
+
 # Build Outputs
 .next/
 out/

apps/app/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/app/src/app/(private-routes)/dashboard/_utils/transformRentals.tsx

@@ -6,7 +6,6 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { RentalDataGrid } from '@/types/rentalDataGrid';
 import { formatTime } from '@/utils/dateTime';
 
-// eslint-disable-next-line import/prefer-default-export
 export const transformRentals = (rows: Rentals[], userId: string, filterCategory?: RentalType): RentalDataGrid[] =>
   rows.map(
     ({

apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/EnableDegenDialogContent.tsx

@@ -25,7 +25,7 @@ interface Props {
   onSuccess?: () => void;
 }
 
-const EnableDisableDegenDialogContent = ({ degen, isEnabled = false, onClose, onSuccess }: Props): JSX.Element => {
+const EnableDisableDegenDialogContent = ({ degen, isEnabled = false, onClose, onSuccess }: Props): React.ReactNode => {
   const { authToken } = useAuth();
   const [agreement, setAgreement] = useState(false);
   const handleButtonClick = async () => {

apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/RenameDegenDialogContent.tsx

@@ -33,7 +33,7 @@ interface Props {
   onSuccess?: () => void;
 }
 
-const RenameDegenDialogContent = ({ degen, onSuccess }: Props): JSX.Element => {
+const RenameDegenDialogContent = ({ degen, onSuccess }: Props): React.ReactNode => {
   const { tx, writeContracts } = useNetworkContext();
   const { tokensBalances } = useTokensBalances();
   const [input, setInput] = useState('');

apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/RenameStepper.tsx

@@ -120,7 +120,7 @@ function RenameStepper({
   insufficientAllowance: boolean;
   renameSuccess: boolean;
   insufficientBalance: boolean;
-}): JSX.Element {
+}): React.ReactNode {
   const [activeStep, setActiveStep] = useState(0);
   const steps = getSteps();
 

apps/app/src/app/(private-routes)/dashboard/degens/page.tsx

@@ -47,7 +47,7 @@ const DegenCard = dynamic(() => import('@/components/cards/DegenCard'), {
 // Needs to be divisible by 2, 3, or 4
 const DEGENS_PER_PAGE = 12;
 
-const DashboardDegensPage = (): JSX.Element => {
+const DashboardDegensPage = (): React.ReactNode => {
   const { authToken } = useAuth();
   const { isConnected } = useAccount();
   const [isDrawerOpen, setIsDrawerOpen] = useState(true);

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_ImageProfile/ProfileImageDialog.tsx

@@ -128,7 +128,7 @@ type ProfileImageDialogProps = {
   avatarFee?: number;
 };
 
-const ProfileImageDialog = ({ degens, onChangeAvatar, avatarFee }: ProfileImageDialogProps): JSX.Element => {
+const ProfileImageDialog = ({ degens, onChangeAvatar, avatarFee }: ProfileImageDialogProps): React.ReactNode => {
   const [degensInternal, setDegensInternal] = useState<Degen[]>([]);
   const theme = useTheme();
 

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_ImageProfile/index.tsx

@@ -16,7 +16,7 @@ interface ImageProfileProps {
   avatarFee?: number;
 }
 
-const ImageProfile = ({ degens, avatar, avatarFee }: ImageProfileProps): JSX.Element => {
+const ImageProfile = ({ degens, avatar, avatarFee }: ImageProfileProps): React.ReactNode => {
   const { isLoadingDegens } = useGamerProfileContext();
   const [degenSelected, setDegenSelected] = useState<string>('');
 

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/BottomInfo.tsx

@@ -14,7 +14,7 @@ interface BottomInfoProps {
   crypto_winter: ProfileMiniGame | undefined;
 }
 
-const BottomInfo = ({ nifty_smashers, wen_game, crypto_winter }: BottomInfoProps): JSX.Element => {
+const BottomInfo = ({ nifty_smashers, wen_game, crypto_winter }: BottomInfoProps): React.ReactNode => {
   const { isLoadingProfile } = useGamerProfileContext();
 
   return (

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/ChangeProfileNameDialog.tsx

@@ -7,7 +7,7 @@ import ChangeProfileNameForm from './ChangeProfileNameForm';
 interface ChangeProfileNameDialogProps {
   handleUpdateNewName: (newName: string) => void;
 }
-const ChangeProfileNameDialog = ({ handleUpdateNewName }: ChangeProfileNameDialogProps): JSX.Element => {
+const ChangeProfileNameDialog = ({ handleUpdateNewName }: ChangeProfileNameDialogProps): React.ReactNode => {
   const theme = useTheme();
   return (
     <Dialog>

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/ChangeProfileNameForm.tsx

@@ -25,7 +25,7 @@ const validationSchema = yup.object({
   name: yup.string().required(),
 });
 
-const ChangeProfileNameForm = ({ updateNewName }: ChangeProfileNameFormProps): JSX.Element => {
+const ChangeProfileNameForm = ({ updateNewName }: ChangeProfileNameFormProps): React.ReactNode => {
   const [isLoadingRename, setLoadingRename] = useState(false);
   const { fee, loadingFee } = useProfileRenameFee();
   const [, setIsOpen] = useContext(DialogContext);

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/Item.tsx

@@ -7,7 +7,7 @@ interface ItemProps {
   isLoading?: boolean;
 }
 
-const Item = ({ label, value, isDisable = false, isLoading = true }: ItemProps): JSX.Element => (
+const Item = ({ label, value, isDisable = false, isLoading = true }: ItemProps): React.ReactNode => (
   <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
     <Typography sx={{ color: theme => (isDisable ? theme.palette.grey[400] : 'white') }}>{label}:</Typography>
     {isLoading ? (

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/LeftInfo.tsx

@@ -12,7 +12,7 @@ interface LeftInfoProps {
   data: ProfileTotal | ProfileNiftySmsher | undefined;
 }
 
-const LeftInfo = ({ data }: LeftInfoProps): JSX.Element => {
+const LeftInfo = ({ data }: LeftInfoProps): React.ReactNode => {
   const leftDataMapper: {
     label: string;
     value: string | number | undefined;

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/MiniGameContent.tsx

@@ -10,7 +10,7 @@ interface MiniGameContentProps {
   data: ProfileMiniGame | undefined;
 }
 
-const MiniGameContent = ({ data }: MiniGameContentProps): JSX.Element => {
+const MiniGameContent = ({ data }: MiniGameContentProps): React.ReactNode => {
   const leftDataMapper: {
     label: string;
     value: string | number | undefined;

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/ProgressGamer.tsx

@@ -9,7 +9,7 @@ interface ProgressGamerProps {
   size?: 'sm' | 'md';
 }
 
-const ProgressGamer = ({ data, size = 'md' }: ProgressGamerProps): JSX.Element => {
+const ProgressGamer = ({ data, size = 'md' }: ProgressGamerProps): React.ReactNode => {
   const theme = useTheme();
   return (
     <Box

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/RightInfo.tsx

@@ -16,7 +16,7 @@ interface RightInfoProps {
   keyCount: number;
   rentalCount: number;
 }
-const RightInfo = ({ comicCount, degenCount, itemCount, keyCount, rentalCount }: RightInfoProps): JSX.Element => {
+const RightInfo = ({ comicCount, degenCount, itemCount, keyCount, rentalCount }: RightInfoProps): React.ReactNode => {
   const { isLoadingDegens, isLoadingComics, isLoadingItems } = useGamerProfileContext();
   const rightDataMapper: {
     label: string;

apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/TopInfo.tsx

@@ -17,7 +17,7 @@ interface TopInfoProps {
   walletAddress: string;
 }
 
-const TopInfo = ({ profile, walletAddress }: TopInfoProps): JSX.Element => {
+const TopInfo = ({ profile, walletAddress }: TopInfoProps): React.ReactNode => {
   const [profileName, setProfileName] = useState<string>('Unknown');
   const { isLoadingProfile } = useGamerProfileContext();
   const [, copy] = useCopyToClipboard();

apps/app/src/app/(private-routes)/dashboard/gamer-profile/page.tsx

@@ -32,7 +32,7 @@ const defaultValue: {
   isLoadingComics: true,
 };
 
-const GamerProfile = (): JSX.Element => {
+const GamerProfile = (): React.ReactNode => {
   const { profile, error, loadingProfile } = useGamerProfile();
   const { address } = useAccount();
   const { avatarsAndFee } = useProfileAvatarFee();

apps/app/src/app/(private-routes)/dashboard/items/page.tsx

@@ -22,7 +22,7 @@ import WearableSubItemCard from '@/components/cards/WearableSubItemCard';
 import ItemDetail from '@/components/cards/ItemDetail';
 import ViewItemDialog from '@/components/dialog/ViewItemDialog';
 
-const DashboardComicsPage = (): JSX.Element => {
+const DashboardComicsPage = (): React.ReactNode => {
   const [selectedComic, setSelectedComic] = useState<Comic | null>(null);
   const [selectedItem, setSelectedItem] = useState<Item | null>(null);
   const [selectedSubIndex, setSelectedSubIndex] = useState<number>(-1);

apps/app/src/app/(private-routes)/dashboard/overview/MyComics.tsx

@@ -14,7 +14,7 @@ import useNFTsBalances from '@/hooks/balances/useNFTsBalances';
 import ComicPlaceholder from '@/components/cards/Skeleton/ComicPlaceholder';
 import { COMICS_PURCHASE_URL } from '@/constants/url';
 
-const MyComics = (): JSX.Element => {
+const MyComics = (): React.ReactNode => {
   const [selectedComic, setSelectedComic] = useState<Comic | null>(null);
   const router = useRouter();
   const { comicsBalances, loadingComics } = useNFTsBalances();

apps/app/src/app/(private-routes)/dashboard/overview/MyDegens.tsx

@@ -39,7 +39,7 @@ const BoxDegenStyles = {
   },
 };
 
-const MyDegens = (): JSX.Element => {
+const MyDegens = (): React.ReactNode => {
   const { authToken } = useAuth();
   const [selectedDegen, setSelectedDegen] = useState<Degen>();
   const [isRenameDegenModalOpen, setIsRenameDegenModalOpen] = useState<boolean>(false);

apps/app/src/app/(private-routes)/dashboard/overview/MyItems.tsx

@@ -10,7 +10,7 @@ import EmptyState from '@/components/EmptyState';
 import ComicPlaceholder from '@/components/cards/Skeleton/ComicPlaceholder';
 import { ITEM_PURCHASE_URL } from '@/constants/url';
 
-const MyItems = (): JSX.Element => {
+const MyItems = (): React.ReactNode => {
   const router = useRouter();
   const { itemsBalances, loadingItems } = useNFTsBalances();
   const filteredItems = useMemo(() => itemsBalances.filter(item => item.balance && item.balance > 0), [itemsBalances]);

apps/app/src/app/(private-routes)/dashboard/overview/MyStats.tsx

@@ -9,7 +9,7 @@ import GamerProfileContext from '@/contexts/GamerProfileContext';
 import LeftInfo from '../gamer-profile/_Stats/LeftInfo';
 import type { Profile } from '@/types/account';
 
-const MyStats = ({ profile }: { profile?: Profile }): JSX.Element => {
+const MyStats = ({ profile }: { profile?: Profile }): React.ReactNode => {
   return (
     <Grid2 container spacing={sectionSpacing} sx={{ height: '100%' }}>
       <Grid2 size={{ xs: 12 }}>

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/ArcadeBalance.tsx

@@ -12,7 +12,7 @@ import useTokensBalances from '@/hooks/balances/useTokensBalances';
 import BuyArcadeTokensDialog from '@/components/dialog/BuyArcadeTokensDialog';
 import TokenInfoCard from '@/components/cards/TokenInfoCard';
 
-const ArcadeBalance = (): JSX.Element => {
+const ArcadeBalance = (): React.ReactNode => {
   const theme = useTheme();
   const router = useRouter();
   const { tokensBalances, loadingArcadeBal, refetchArcadeBal } = useTokensBalances();

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/DegenBalance.tsx

@@ -9,7 +9,7 @@ import HoverDataCard from '@/components/cards/HoverDataCard';
 import useClaimNFTL from '@/hooks/writeContracts/useClaimNFTL';
 import useNetworkContext from '@/hooks/useNetworkContext';
 
-const DegenBalance = (): JSX.Element => {
+const DegenBalance = (): React.ReactNode => {
   const theme = useTheme();
   const { isConnected } = useNetworkContext();
   const { balance, claimCallback, loading } = useClaimNFTL();

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/TitleSection.tsx

@@ -6,7 +6,7 @@ import { formatNumberToDisplay } from '@/utils/numbers';
 import useTokensBalances from '@/hooks/balances/useTokensBalances';
 import SectionTitle from '@/components/sections/SectionTitle';
 
-const TitleSection = (): JSX.Element => {
+const TitleSection = (): React.ReactNode => {
   const { loadingNFTLBal, tokensBalances } = useTokensBalances();
   return (
     <SectionTitle

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/WalletBalances.tsx

@@ -11,7 +11,7 @@ import BridgeButtonDialog from '@/components/dialog/BridgeButtonDialog';
 import HoverDataCard from '@/components/cards/HoverDataCard';
 import { GOVERNANCE_PORTAL_URL, SNAPSHOT_PORTAL_URL } from '@/constants/url';
 
-const WalletBalances = (): JSX.Element => {
+const WalletBalances = (): React.ReactNode => {
   const theme = useTheme();
   const { loadingNFTLBal, tokensBalances } = useTokensBalances();
 

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/index.tsx

@@ -9,7 +9,7 @@ import GameBalance from './GameBalance';
 import TitleSection from './TitleSection';
 import WalletBalances from './WalletBalances';
 
-const MyNFTL = (): JSX.Element => (
+const MyNFTL = (): React.ReactNode => (
   <Grid2 container spacing={sectionSpacing}>
     <Grid2 size={{ xs: 12 }} sx={{ mt: '8px', mb: '4px' }}>
       <TitleSection />

apps/app/src/app/(private-routes)/dashboard/overview/_MyRentals/RentalsTableSimple.tsx

@@ -12,7 +12,7 @@ interface RentalsTableSimpleProps {
   columns: ColumnType[];
 }
 
-const RentalsTableSimple = ({ rentals, columns }: RentalsTableSimpleProps): JSX.Element => {
+const RentalsTableSimple = ({ rentals, columns }: RentalsTableSimpleProps): React.ReactNode => {
   const { palette } = useTheme();
 
   return (

apps/app/src/app/(private-routes)/dashboard/overview/_MyRentals/index.tsx

@@ -62,7 +62,7 @@ const columns: ColumnType[] = [
 interface MyRentalsProps {
   rentals: Rentals[];
 }
-const MyRentals: FC<MyRentalsProps> = ({ rentals }): JSX.Element => {
+const MyRentals: FC<MyRentalsProps> = ({ rentals }): React.ReactNode => {
   const { profile } = usePlayerProfile();
 
   const rows = transformRentals(rentals, profile?.id || '');

apps/app/src/app/(private-routes)/dashboard/overview/page.tsx

@@ -15,7 +15,7 @@ import MyItems from './MyItems';
 import MyNFTL from './_MyNFTL';
 import MyStats from './MyStats';
 
-const DashboardOverview = (): JSX.Element => {
+const DashboardOverview = (): React.ReactNode => {
   // const { authToken } = useAuth();
   // const headers = { authorizationToken: authToken || '' };
   // const { data } = useFetch<Rentals[]>(ALL_RENTAL_API_URL, {

apps/app/src/app/(private-routes)/dashboard/page.tsx

@@ -1,5 +1,5 @@
 import Overview from './overview/page';
 
-const DashboardOverviewPage = (): JSX.Element => <Overview />;
+const DashboardOverviewPage = (): React.ReactNode => <Overview />;
 
 export default DashboardOverviewPage;

apps/app/src/app/(private-routes)/dashboard/rentals/ChangeNicknameDialog.tsx

@@ -26,7 +26,7 @@ const validationSchema = yup.object({
   isCheckedTerm: yup.bool().oneOf([true]),
 });
 
-const ChangeNicknameDialog = ({ rental, updateNickname }: Props): JSX.Element => {
+const ChangeNicknameDialog = ({ rental, updateNickname }: Props): React.ReactNode => {
   const { authToken } = useAuth();
   const [nicknames, setNicknames] = useLocalStorage<{
     [address: string]: string;

apps/app/src/app/(private-routes)/dashboard/rentals/MyRentalsDataGrid.tsx

@@ -32,7 +32,13 @@ interface Props {
   updateRentalName: (name: string, id: string) => void;
 }
 
-const MyRentalsDataGrid = ({ rows, loading, category, onTerminateRental, updateRentalName }: Props): JSX.Element => {
+const MyRentalsDataGrid = ({
+  rows,
+  loading,
+  category,
+  onTerminateRental,
+  updateRentalName,
+}: Props): React.ReactNode => {
   // const [pageSize, setPageSize] = useState(10);
   const [selectedRowForEditing, setSelectedRowForEditing] = useState<any>();
   const [isNicknameModalOpen, setIsNicknameModalOpen] = useState(false);

apps/app/src/app/(private-routes)/dashboard/rentals/RenameRentalDialogContent.tsx

@@ -42,7 +42,7 @@ const validationSchema = yup
   })
   .required();
 
-const RenameRentalDialogContent = ({ rental, updateRentalName }: Props): JSX.Element => {
+const RenameRentalDialogContent = ({ rental, updateRentalName }: Props): React.ReactNode => {
   const { authToken } = useAuth();
   const dispatch = useDispatch();
   const [isLoadingRename, setLoadingRename] = useState(false);

apps/app/src/app/(private-routes)/dashboard/rentals/SearchRental.tsx

@@ -8,8 +8,8 @@ interface Props {
   placeholder?: string;
 }
 
-const SearchRental = ({ handleSearch, placeholder }: Props): JSX.Element => {
-  const inputEl: any = useRef();
+const SearchRental = ({ handleSearch, placeholder }: Props): React.ReactNode => {
+  const inputEl: any = useRef(null);
   let typingTimer: NodeJS.Timeout | undefined;
 
   useEffect(() => {

apps/app/src/app/(private-routes)/dashboard/rentals/page.tsx

@@ -21,7 +21,7 @@ import { getUniqueListBy } from '@/utils/array';
 import useTeminateRental from '@/hooks/useTeminateRental';
 import useAuth from '@/hooks/useAuth';
 
-const DashboardRentalPage = (): JSX.Element => {
+const DashboardRentalPage = (): React.ReactNode => {
   const { authToken } = useAuth();
   const headers = { authorizationToken: authToken || '' };
   const [rentals, setRentals] = useState<Rentals[]>([]);

apps/app/src/app/(public-routes)/degens/[id]/page.tsx

@@ -13,7 +13,7 @@ import ViewTraitsContentDialog from '@/components/dialog/DegenDialog/ViewTraitsC
 import type { Degen, GetDegenResponse } from '@/types/degens';
 import { useCharacterSearch } from '@/hooks/useGraphQL';
 
-const DegenTraitsDetailsPage = ({ params }: { params: { id: string } }): JSX.Element => {
+const DegenTraitsDetailsPage = ({ params }: { params: { id: string } }): React.ReactNode => {
   const tokenId = params.id;
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const [degenDetail, setDegenDetail] = useState<GetDegenResponse>();

apps/app/src/app/(public-routes)/degens/page.tsx

@@ -41,7 +41,7 @@ const DegenCard = dynamic(() => import('@/components/cards/DegenCard'), {
 // Needs to be divisible by 2, 3, or 4
 const DEGENS_PER_PAGE = 12;
 
-const AllDegensPage = (): JSX.Element => {
+const AllDegensPage = (): React.ReactNode => {
   const { address } = useNetworkContext();
   const [degens, setDegens] = useState<Degen[]>([]);
   const [isDrawerOpen, setIsDrawerOpen] = useState(true);

apps/app/src/app/(public-routes)/mint-o-matic/_CharacterCreator/helpers.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export type TraitArray = [
   [Tribe: 'Tribe', trait: number],
   [SkinColor: 'Skin Color', trait: number],

apps/app/src/app/(public-routes)/mint-o-matic/_CharacterCreator/index.tsx

@@ -107,7 +107,7 @@ type MintEvent = CustomEvent<{
 
 const CharacterCreator = memo(
   ({ isLoaded, isPortrait, onMintCharacter, setLoaded, setProgress, unityContext }: CharacterCreatorProps) => {
-    const removedTraitsCallback = useRef<null | ((removedTraits: string) => void)>();
+    const removedTraitsCallback = useRef<null | ((removedTraits: string) => void)>(null);
     const [width, setWidth] = useState(DEFAULT_WIDTH);
     const [height, setHeight] = useState(DEFAULT_HEIGHT);
     const [refreshKey, setRefreshKey] = useState(0);

apps/app/src/app/(public-routes)/verification/page.tsx

@@ -7,7 +7,7 @@ import useSignAuthMsg from '@/hooks/useSignAuthMsg';
 import useAuth from '@/hooks/useAuth';
 import type { UUID_Token, Nonce } from '@/types/auth';
 
-const GameVerification = (): JSX.Element => {
+const GameVerification = (): React.ReactNode => {
   const searchParams = useSearchParams();
   const token = searchParams.get('token') as UUID_Token | undefined;
   const nonce = searchParams.get('nonce') as Nonce | undefined;

apps/app/src/app/_layout/_CollapsibleSidebarLayout/index.tsx

@@ -17,7 +17,7 @@ const CollapsibleSidebarLayout = ({
   renderMain,
   isDrawerOpen,
   setIsDrawerOpen,
-}: Props): JSX.Element => {
+}: Props): React.ReactNode => {
   const theme = useTheme();
   const matchDownSm = useMediaQuery(theme.breakpoints.down('md'));
   const matchUpMd = useMediaQuery(theme.breakpoints.up('md'));