don't use React.FC to define types

src/popup/components/Settings/Budget.tsx

@@ -5,9 +5,9 @@ import { getNextOccurrence } from '@/shared/helpers';
 import { getCurrencySymbol, transformBalance } from '@/popup/lib/utils';
 import type { PopupState } from '@/popup/lib/context';
 
-export const BudgetScreen: React.FC<
-  Pick<PopupState, 'balance' | 'grants' | 'walletAddress'>
-> = ({ grants, walletAddress, balance }) => {
+type Props = Pick<PopupState, 'balance' | 'grants' | 'walletAddress'>;
+
+export const BudgetScreen = ({ grants, walletAddress, balance }: Props) => {
   return (
     <div className="space-y-8">
       <BudgetAmount walletAddress={walletAddress} grants={grants} />
@@ -16,10 +16,9 @@ export const BudgetScreen: React.FC<
   );
 };
 
-const BudgetAmount: React.FC<Pick<PopupState, 'grants' | 'walletAddress'>> = ({
-  grants,
-  walletAddress,
-}) => {
+type BudgetAmountProps = Pick<PopupState, 'grants' | 'walletAddress'>;
+
+const BudgetAmount = ({ grants, walletAddress }: BudgetAmountProps) => {
   const budget = transformBalance(
     grants.recurring?.value ?? grants.oneTime!.value,
     walletAddress.assetScale,
@@ -78,9 +77,12 @@ const BudgetAmount: React.FC<Pick<PopupState, 'grants' | 'walletAddress'>> = ({
   );
 };
 
-const RemainingBalance: React.FC<
-  Pick<PopupState, 'balance' | 'walletAddress'>
-> = ({ balance, walletAddress }) => {
+type RemainingBalanceProps = Pick<PopupState, 'balance' | 'walletAddress'>;
+
+const RemainingBalance = ({
+  balance,
+  walletAddress,
+}: RemainingBalanceProps) => {
   const amount = transformBalance(balance, walletAddress.assetScale);
   return (
     <div className="space-y-2">

src/popup/components/Settings/RateOfPay.tsx

@@ -64,15 +64,15 @@ interface Props {
   toggleWM: () => void | Promise<void>;
 }
 
-export const RateOfPayComponent: React.FC<Props> = ({
+export const RateOfPayComponent = ({
   continuousPaymentsEnabled,
   rateOfPay,
   minRateOfPay,
   maxRateOfPay,
   walletAddress,
   onRateChange,
   toggleWM,
-}) => {
+}: Props) => {
   return (
     <div className="space-y-8">
       <Switch
@@ -93,21 +93,23 @@ export const RateOfPayComponent: React.FC<Props> = ({
   );
 };
 
-const RateOfPayInput: React.FC<{
+type RateOfPayInputProps = {
   onRateChange: React.ChangeEventHandler<HTMLInputElement>;
   walletAddress: PopupState['walletAddress'];
   rateOfPay: PopupState['rateOfPay'];
   minRateOfPay: PopupState['minRateOfPay'];
   maxRateOfPay: PopupState['maxRateOfPay'];
   disabled?: boolean;
-}> = ({
+};
+
+const RateOfPayInput = ({
   onRateChange,
   walletAddress,
   rateOfPay,
   minRateOfPay,
   maxRateOfPay,
   disabled,
-}) => {
+}: RateOfPayInputProps) => {
   const rate = React.useMemo(() => {
     const r = Number(rateOfPay) / 10 ** walletAddress.assetScale;
     const roundedR = roundWithPrecision(r, walletAddress.assetScale);

src/popup/components/Settings/WalletInformation.tsx

@@ -13,10 +13,10 @@ interface WalletInformationProps {
   walletAddress: PopupStore['walletAddress'];
 }
 
-export const WalletInformation: React.FC<WalletInformationProps> = ({
+export const WalletInformation = ({
   publicKey,
   walletAddress,
-}) => {
+}: WalletInformationProps) => {
   const message = useMessage();
   const {
     handleSubmit,