Upgrade react-scripts to 5.1.0-next.26 and fix TypeScript compatibility issues

Copilot · 0xrinegade · Copilot · commit 9767da1f7e55 · 2025-07-29T06:48:25.000Z
Co-authored-by: 0xrinegade &lt;101195284+0xrinegade@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -172,7 +172,7 @@
     "playwright": "^1.54.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "5.1.0-next.26",
     "typescript": "^5.8.3"
   },
   "main": "public/electron.js",
diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { RowContainer } from '../../pages/commonStyles';
diff --git a/src/components/HelpCenter/HelpCenter.tsx b/src/components/HelpCenter/HelpCenter.tsx
@@ -7,12 +7,8 @@ import {
   Search, 
   AccountBalanceWallet,
   Send,
-  GetApp,
-  History,
   Settings,
   TrendingUp,
-  SwapHoriz,
-  Pool,
   Security,
   Help
 } from '@mui/icons-material';
diff --git a/src/pages/CreateWallet/components/AddTokens.tsx b/src/pages/CreateWallet/components/AddTokens.tsx
@@ -188,8 +188,8 @@ const AddTokens = () => {
                   fontSize={'1.5rem'}
                   style={{
                     color: isBalanceLowerCost
-                      ? var(--error-main)
-                      : var(--success-main),
+                      ? 'var(--error-main)'
+                      : 'var(--success-main)',
                   }}
                 >
                   {formatNumberToUSFormat(
@@ -302,7 +302,7 @@ const AddTokens = () => {
       </Card>{' '}
       <BottomLink
         needOr={false}
-        linkColor={var(--success-main)}
+        linkColor={'var(--success-main)'}
         toText={'Skip for now'}
         to={'/wallet'}
       />
diff --git a/src/pages/CreateWallet/components/ConfirmSeedPhrase.tsx b/src/pages/CreateWallet/components/ConfirmSeedPhrase.tsx
@@ -36,7 +36,7 @@ const SmallButton = styled(({ theme, isSelected, ...props }) => (
     }
     borderColor={
       isSelected
-        ? var(--interactive-primary)
+        ? 'var(--interactive-primary)'
         : theme.customPalette.grey.dark
     }
     btnWidth="auto"
diff --git a/src/pages/RestoreWallet/DerivableAccounts.tsx b/src/pages/RestoreWallet/DerivableAccounts.tsx
@@ -232,7 +232,7 @@ const AccountItem = ({ theme, publicKey, setForceUpdate }) => {
         }}
       />
       <Row margin="0 0 0 1rem" direction="column" align="flex-start">
-        <Title color={var(--success-main)}>{`${stripDigitPlaces(
+        <Title color={'var(--success-main)'}>{`${stripDigitPlaces(
           amount / Math.pow(10, decimals),
           decimals,
         )} ${tokenName ?? (mint ? abbreviateAddress(mint) : 'Unknown')} ${
diff --git a/src/pages/Wallet/components/AddAccountPopup.tsx b/src/pages/Wallet/components/AddAccountPopup.tsx
@@ -63,7 +63,7 @@ export default function AddAccountDialog({ open, onAdd, onClose }) {
           </RowContainer>
           {name.length > 16 && (
               <RowContainer width="90%" margin="2rem 0 0 0">
-                <Title color={var(--error-main)}>
+                <Title color={'var(--error-main)'}>
                   Sorry, your account name shouldn't be longer than 16 symbols
                 </Title>
               </RowContainer>
diff --git a/src/pages/Wallet/components/AddTokenPopup.tsx b/src/pages/Wallet/components/AddTokenPopup.tsx
@@ -242,7 +242,7 @@ export default function AddTokenDialog({
             </RowContainer>
             {tokenName.length > 16 && (
               <RowContainer width="90%" margin="2rem 0 0 0">
-                <Title color={var(--error-main)}>
+                <Title color={'var(--error-main)'}>
                   Sorry, token name shouldn't be longer than 16 symbols
                 </Title>
               </RowContainer>
@@ -258,7 +258,7 @@ export default function AddTokenDialog({
             </RowContainer>
             {tokenSymbol.length > 8 && (
               <RowContainer width="90%" margin="2rem 0 0 0">
-                <Title color={var(--error-main)}>
+                <Title color={'var(--error-main)'}>
                   Sorry, token symbol shouldn't be longer than 8 symbols
                 </Title>
               </RowContainer>
diff --git a/src/pages/Wallet/components/AssetsTable.tsx b/src/pages/Wallet/components/AssetsTable.tsx
@@ -140,7 +140,7 @@ const AddTokenButton = ({
 
 export const GreyTitle = styled(({ theme, ...props }) => (
   <Title
-    color={var(--text-secondary)}
+    color={'var(--text-secondary)'}
     fontFamily="Avenir Next Demi"
     fontSize="1.4rem"
     {...props}
@@ -149,7 +149,7 @@ export const GreyTitle = styled(({ theme, ...props }) => (
   white-space: nowrap;
 `;
 
-const StyledTr = styled.tr`
+const StyledTr = styled.tr<{ disableHover?: boolean }>`
   height: 7rem;
 
   &:nth-child(2n) td {
diff --git a/src/pages/Wallet/components/ExportAccount.tsx b/src/pages/Wallet/components/ExportAccount.tsx
@@ -55,7 +55,7 @@ export default function ExportAccountDialog({ open, onClose }) {
           height: '3rem',
           right: '2rem',
           top: '2rem',
-          color: var(--error-main),
+          color: 'var(--error-main)',
         }}
         onClick={onClose}
       >
@@ -147,7 +147,7 @@ export function ExportMnemonicDialog({ open, onClose }) {
           height: '3rem',
           right: '2rem',
           top: '2rem',
-          color: var(--error-main),
+          color: 'var(--error-main)',
         }}
         onClick={onClose}
       >
diff --git a/src/pages/Wallet/components/ReceivePopup.tsx b/src/pages/Wallet/components/ReceivePopup.tsx
@@ -166,7 +166,7 @@ export default function DepositDialog({
                 target="_blank"
                 rel="noopener"
                 style={{
-                  color: var(--interactive-primary),
+                  color: 'var(--interactive-primary)',
                   fontSize: '1rem',
                   fontFamily: 'Avenir Next Demi',
                 }}
@@ -454,7 +454,7 @@ function MetamaskDeposit({ swapInfo, insufficientEthBalance, onClose }) {
         />
         {insufficientEthBalance && (
           <RowContainer width="90%" margin="2rem 0 0 0">
-            <Title color={var(--error-main)}>
+            <Title color={'var(--error-main)'}>
               Insufficient {swapInfo?.coin?.ticker} for withdrawal transaction
               fee
             </Title>
diff --git a/src/pages/Wallet/components/SendPopup.tsx b/src/pages/Wallet/components/SendPopup.tsx
@@ -548,17 +548,17 @@ function SendSwapDialog({
         {needMetamask && !ethAccount ? <ConnectToMetamaskButton /> : fields}
         {/* {insufficientEthBalance && (
           <RowContainer margin="2rem 0 0 0">
-            <Title color={var(--error-main)}>
+            <Title color={'var(--error-main)'}>
               Insufficient {swapCoinInfo?.ticker} for withdrawal transaction fee
             </Title>
           </RowContainer>
         )} */}
         <RowContainer
           justify="space-between"
           margin={
-            !ethAccount &&
+            (!ethAccount)
             // || insufficientEthBalance
-            '2rem 0 0 0'
+            ? '2rem 0 0 0' : undefined
           }
         >
           <WhiteButton
@@ -718,7 +718,7 @@ function useForm(
 
       {!passAddressValidation && (
         <RowContainer margin="0 0 2rem 0">
-          <Title fontSize="1.4rem" color={var(--error-main)}>
+          <Title fontSize="1.4rem" color={'var(--error-main)'}>
             {addressHelperText}
           </Title>
         </RowContainer>
diff --git a/src/pages/Wallet/index.tsx b/src/pages/Wallet/index.tsx
@@ -34,7 +34,7 @@ const MainWalletContainer = styled(RowContainer)`
   }
 `;
 
-const Switcher = styled.button`
+const Switcher = styled.button<{ isTabActive?: boolean }>`
   display: none;
 
   @media (max-width: 540px) {
diff --git a/src/pages/Wallet/styles.tsx b/src/pages/Wallet/styles.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, StepLabel, Tab, Tabs } from '@mui/material'
 import styled from 'styled-components'
 
-export const StyledDialogContent = styled(DialogContent)`
+export const StyledDialogContent = styled(DialogContent)<{ width?: string; height?: string; justify?: string }>`
   &&& {
     width: ${(props) => props.width || '50rem'};
     height: ${(props) => props.height || '40rem'};
@@ -16,7 +16,7 @@ export const StyledDialogContent = styled(DialogContent)`
   }
 `
 
-export const StyledDialog = styled(Dialog)`
+export const StyledDialog = styled(Dialog)<{ width?: string; height?: string; justify?: string }>`
   &&& {
     width: ${(props) => props.width || '50rem'};
     height: ${(props) => props.height || '40rem'};
diff --git a/src/pages/WelcomePage/index.old.tsx.backup b/src/pages/WelcomePage/index.old.tsx.backup
diff --git a/src/pages/WelcomePage/index.tsx b/src/pages/WelcomePage/index.tsx
@@ -238,11 +238,11 @@ export const WelcomePage = () => {
         </WelcomeHeader>
 
         <OptionsGrid container spacing={0} justifyContent="center">
-          <Grid size={{ xs: 12, sm: 6 }} md={5}>
+          <Grid size={{ xs: 12, sm: 6, md: 5 }}>
             {renderCreateWalletLink()}
           </Grid>
           
-          <Grid size={{ xs: 12, sm: 6 }} md={5}>
+          <Grid size={{ xs: 12, sm: 6, md: 5 }}>
             <Link to="/restore_wallet" >
               <RestoreWalletOption />
             </Link>
diff --git a/src/pages/commonStyles.tsx b/src/pages/commonStyles.tsx
@@ -17,6 +17,7 @@ export type RowProps = {
   mediaMargin?: string;
   children?: React.ReactNode;
   style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
 export const Row = styled(
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -222,8 +222,8 @@ export const isUSDToken = (token: string): boolean => {
 }
 
 
-export function useInterval(callback, delay) {
-  const savedCallback = useRef();
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<(() => void) | null>(null);
 
   // Remember the latest callback.
   useEffect(() => {
@@ -233,8 +233,9 @@ export function useInterval(callback, delay) {
   // Set up the interval.
   useEffect(() => {
     function tick() {
-      // @ts-ignore
-      savedCallback.current();
+      if (savedCallback.current) {
+        savedCallback.current();
+      }
     }
     if (delay !== null) {
       let id = setInterval(tick, delay);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { Link } from '@mui/material';`
`2`	`1`	`import { Link as RouterLink } from 'react-router-dom';`
`3`	`2`	`import styled from 'styled-components';`
`4`	`3`	`import { RowContainer } from '../../pages/commonStyles';`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const SmallButton = styled(({ theme, isSelected, ...props }) => (`
`36`	`36`	`}`
`37`	`37`	`borderColor={`
`38`	`38`	`isSelected`
`39`		`- ? var(--interactive-primary)`
	`39`	`+ ? 'var(--interactive-primary)'`
`40`	`40`	`: theme.customPalette.grey.dark`
`41`	`41`	`}`
`42`	`42`	`btnWidth="auto"`