refactor: cleanup sc types

src/app/api/profile/[walletAddress]/route.tsx

@@ -1,13 +1,9 @@
-import { ImageResponse } from 'next/og';
-import { createConfig, EVM, getTokenBalances, Solana, UTXO } from '@lifi/sdk';
-import { publicRPCList } from '@/const/rpcList';
-import { getChainsQuery } from '@/hooks/useChains';
-import { walletDigest } from '@/utils/walletDigest';
-import { getLeaderboardUserQuery } from '@/hooks/useLeaderboard';
-import type { PDA } from '@/types/loyaltyPass';
 import { getSiteUrl } from '@/const/urls';
-import { getImageResponseOptions } from '@/utils/ImageGeneration/getImageResponseOptions';
 import useBlockieImg from '@/hooks/useBlockieImg';
+import type { PDA } from '@/types/loyaltyPass';
+import { getImageResponseOptions } from '@/utils/ImageGeneration/getImageResponseOptions';
+import { walletDigest } from '@/utils/walletDigest';
+import { ImageResponse } from 'next/og';
 
 const BASE_WIDTH = 800;
 const BASE_HEIGHT = BASE_WIDTH / 1.91;

src/app/ui/learn/LearnArticlePage.style.ts

@@ -1,8 +1,8 @@
 'use client';
 import type { Breakpoint } from '@mui/material';
-import { Box, styled, type BoxProps } from '@mui/material';
+import { Box, styled } from '@mui/material';
 
-export const BlogArticleWrapper = styled(Box)<BoxProps>(({ theme }) => ({
+export const BlogArticleWrapper = styled(Box)(({ theme }) => ({
   position: 'relative',
   ':before': {
     content: '" "',
@@ -18,7 +18,7 @@ export const BlogArticleWrapper = styled(Box)<BoxProps>(({ theme }) => ({
   },
 }));
 
-export const BlogArticleSection = styled(Box)<BoxProps>(({ theme }) => ({
+export const BlogArticleSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(6, 2, 0.25),
   position: 'relative',
 

src/components/Alerts/InfoAlert/InfoAlert.style.ts

@@ -1,4 +1,4 @@
-import type { BoxProps, Breakpoint } from '@mui/material';
+import type { Breakpoint } from '@mui/material';
 import { Box } from '@mui/material';
 
 import { darken, lighten, styled } from '@mui/material/styles';
@@ -7,7 +7,7 @@ import { IconButtonAlpha } from 'src/components/IconButton';
 import { getContrastAlphaColor } from 'src/utils/colors';
 import { InfoMessageCard } from '../../MessageCard';
 
-export const InfoAlertContainer = styled(Box)<BoxProps>(({ theme }) => ({
+export const InfoAlertContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   flexDirection: 'row',

src/components/BackgroundGradient/MovingBox.style.tsx

@@ -1,7 +1,6 @@
-import type { BoxProps } from '@mui/material';
 import { Box, styled } from '@mui/material';
 
-export const MovingBox = styled(Box)<BoxProps>(() => ({
+export const MovingBox = styled(Box)(() => ({
   position: 'absolute',
   bottom: '1vh',
   animation: 'slideEffect 45s linear infinite',
@@ -24,7 +23,7 @@ export const MovingBox = styled(Box)<BoxProps>(() => ({
   },
 }));
 
-export const FixBoxWithNoOverflow = styled(Box)<BoxProps>(() => ({
+export const FixBoxWithNoOverflow = styled(Box)(() => ({
   position: 'fixed',
   overflow: 'hidden',
   left: 0,

src/components/Blog/BlogArticle/BlogArticle.style.ts

@@ -1,4 +1,4 @@
-import type { Breakpoint, SkeletonProps, TypographyProps } from '@mui/material';
+import type { Breakpoint, TypographyProps } from '@mui/material';
 import {
   Box,
   Container,
@@ -232,26 +232,22 @@ export const BlogArticleTitle = styled(Typography)(({ theme }) => ({
   },
 }));
 
-export const BlogArticleTitleSkeleton = styled(Skeleton)<SkeletonProps>(
-  ({ theme }) => ({
-    marginTop: theme.spacing(4),
-    transform: 'unset',
-    borderRadius: 16,
-    height: 320,
-    width: '100%',
-    [theme.breakpoints.up('sm' as Breakpoint)]: {
-      height: '192px',
-      marginTop: theme.spacing(8),
-    },
-    [theme.breakpoints.up('md' as Breakpoint)]: {
-      height: 144,
-    },
-  }),
-);
+export const BlogArticleTitleSkeleton = styled(Skeleton)(({ theme }) => ({
+  marginTop: theme.spacing(4),
+  transform: 'unset',
+  borderRadius: 16,
+  height: 320,
+  width: '100%',
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    height: '192px',
+    marginTop: theme.spacing(8),
+  },
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    height: 144,
+  },
+}));
 
-export const BlogArticleSubtitle = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<TypographyProps>(({ theme }) => ({
+export const BlogArticleSubtitle = styled(Typography)(({ theme }) => ({
   color: alpha(theme.palette.text.primary, 0.88),
   marginTop: theme.spacing(8),
   marginBottom: theme.spacing(6),
@@ -261,21 +257,19 @@ export const BlogArticleSubtitle = styled(Typography, {
   lineHeight: '40px',
 }));
 
-export const BlogArticleSubtitleSkeleton = styled(Skeleton)<SkeletonProps>(
-  ({ theme }) => ({
-    marginTop: theme.spacing(8),
-    marginBottom: theme.spacing(6),
-    transform: 'unset',
-    width: '100%',
-    height: 300,
-    [theme.breakpoints.up('sm' as Breakpoint)]: {
-      height: 190,
-    },
-    [theme.breakpoints.up('lg' as Breakpoint)]: {
-      height: 114,
-    },
-  }),
-);
+export const BlogArticleSubtitleSkeleton = styled(Skeleton)(({ theme }) => ({
+  marginTop: theme.spacing(8),
+  marginBottom: theme.spacing(6),
+  transform: 'unset',
+  width: '100%',
+  height: 300,
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    height: 190,
+  },
+  [theme.breakpoints.up('lg' as Breakpoint)]: {
+    height: 114,
+  },
+}));
 
 export const BlogArticlAuthorName = styled(Typography)<TypographyProps>(
   ({ theme }) => ({
@@ -290,13 +284,11 @@ export const BlogArticlAuthorName = styled(Typography)<TypographyProps>(
   }),
 );
 
-export const BlogArticlAuthorNameSkeleton = styled(Skeleton)<SkeletonProps>(
-  ({ theme }) => ({
-    width: 142,
-    height: 28,
-    transform: 'unset',
-  }),
-);
+export const BlogArticlAuthorNameSkeleton = styled(Skeleton)(({ theme }) => ({
+  width: 142,
+  height: 28,
+  transform: 'unset',
+}));
 
 export const BlogArticlAuthorRole = styled(Typography)<TypographyProps>(
   ({ theme }) => ({
@@ -307,14 +299,12 @@ export const BlogArticlAuthorRole = styled(Typography)<TypographyProps>(
   }),
 );
 
-export const BlogArticlAuthorRoleSkeleton = styled(Skeleton)<SkeletonProps>(
-  ({ theme }) => ({
-    width: 220,
-    height: 20,
-    marginTop: theme.spacing(0.5),
-    transform: 'unset',
-  }),
-);
+export const BlogArticlAuthorRoleSkeleton = styled(Skeleton)(({ theme }) => ({
+  width: 220,
+  height: 20,
+  marginTop: theme.spacing(0.5),
+  transform: 'unset',
+}));
 
 export const BlogParagraphContainer = styled(Box)(({ theme }) => ({
   margin: theme.spacing(2, 0),

src/components/Blog/BlogArticle/ShareArticleIcon.style.ts

@@ -2,7 +2,7 @@ import { IconButtonTertiary } from '@/components/IconButton.style';
 import type { IconButtonProps } from '@mui/material';
 import { styled } from '@mui/material';
 
-export interface ShareButtonProps extends Omit<IconButtonProps, 'component'> {
+export interface ShareButtonProps extends IconButtonProps {
   expanded?: boolean;
 }
 

src/components/Blog/BlogArticle/ShareArticleIcons.style.ts

@@ -1,9 +1,6 @@
-import type { BoxProps, SkeletonProps } from '@mui/material';
 import { Box, Skeleton, styled } from '@mui/material';
 
-export const ShareIconsContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'expanded',
-})<BoxProps>(() => ({
+export const ShareIconsContainer = styled(Box)(() => ({
   display: 'flex',
   alignItems: 'center',
 
@@ -12,9 +9,7 @@ export const ShareIconsContainer = styled(Box, {
   },
 }));
 
-export const ShareIconsSkeletons = styled(Skeleton, {
-  shouldForwardProp: (prop) => prop !== 'expanded',
-})<SkeletonProps>(() => ({
+export const ShareIconsSkeletons = styled(Skeleton)(() => ({
   width: 176,
   height: 40,
   borderRadius: '20px',

src/components/Blog/BlogCarousel/BlogCarousel.style.ts

@@ -25,8 +25,7 @@ export const BlogCarouselContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
-export interface SeeAllButtonContainerProps
-  extends Omit<BoxProps, 'component'> {
+export interface SeeAllButtonContainerProps extends BoxProps {
   show: boolean;
 }
 

src/components/Blog/BlogCarousel/CarouselContainer.style.ts

@@ -7,7 +7,7 @@ import type {
 } from '@mui/material';
 import { Box, styled } from '@mui/material';
 
-export interface CarouselContainerBoxProps extends Omit<BoxProps, 'variant'> {
+export interface CarouselContainerBoxProps extends BoxProps {
   styles?: CSSObject;
 }
 
@@ -28,9 +28,7 @@ export const CarouselContainerBox = styled(Box)<CarouselContainerBoxProps>(
   }),
 );
 
-export const CarouselHeader = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'styles',
-})<BoxProps>(({ theme }) => ({
+export const CarouselHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   marginTop: theme.spacing(1.5),
@@ -41,8 +39,7 @@ export const CarouselHeader = styled(Box, {
   },
 }));
 
-export interface CarouselNavigationContainerProps
-  extends Omit<BoxProps, 'variant'> {
+export interface CarouselNavigationContainerProps extends BoxProps {
   hide?: boolean;
 }
 
@@ -63,9 +60,9 @@ export const CarouselNavigationContainer = styled(Box, {
   ],
 }));
 
-export const CarouselNavigationButton = styled(IconButtonTertiary, {
-  shouldForwardProp: (prop) => prop !== 'styles',
-})<IconButtonProps>(({ theme }) => ({
+export const CarouselNavigationButton = styled(
+  IconButtonTertiary,
+)<IconButtonProps>(() => ({
   width: 40,
   height: 40,
   fontSize: 22,

src/components/Blog/CTAs/BlogCTA/BlogCTA.style.ts

@@ -1,10 +1,10 @@
 import { urbanist } from '@/fonts/fonts';
-import type { BoxProps, Breakpoint } from '@mui/material';
+import type { Breakpoint } from '@mui/material';
 import { Box, alpha, darken } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { IconButtonPrimary } from 'src/components/IconButton';
 
-export const BlogCtaContainer = styled(Box)<BoxProps>(({ theme }) => ({
+export const BlogCtaContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -34,7 +34,7 @@ export const BlogCtaContainer = styled(Box)<BoxProps>(({ theme }) => ({
   },
 }));
 
-export const BlogCtaTitle = styled(Box)<BoxProps>(({ theme }) => ({
+export const BlogCtaTitle = styled(Box)(({ theme }) => ({
   fontFamily: urbanist.style.fontFamily,
   fontWeight: 700,
   color:

src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordion.style.ts

@@ -1,8 +1,5 @@
-import type { BoxProps } from '@mui/material';
 import { Box, styled } from '@mui/material';
 
-export const InstructionsAccordionContainer = styled(Box)<BoxProps>(
-  ({ theme }) => ({
-    margin: theme.spacing(4, 0),
-  }),
-);
+export const InstructionsAccordionContainer = styled(Box)(({ theme }) => ({
+  margin: theme.spacing(4, 0),
+}));