diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js
deleted file mode 100644
index c73c0815a003..000000000000
--- a/src/components/CurrentWalletBalance.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import compose from '@libs/compose';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
-import styles from '@styles/styles';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** The user's wallet account */
-    userWallet: PropTypes.shape({
-        /** The user's current wallet balance */
-        currentBalance: PropTypes.number,
-    }),
-
-    /** Styles of the amount */
-    // eslint-disable-next-line react/forbid-prop-types
-    balanceStyles: PropTypes.arrayOf(PropTypes.object),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    userWallet: {
-        // Default to zero if userWallet and currentBalance is not set yet to avoid NaN
-        currentBalance: 0,
-    },
-    balanceStyles: [],
-};
-
-function CurrentWalletBalance(props) {
-    const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance);
-    return <Text style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, ...props.balanceStyles]}>{`${formattedBalance}`}</Text>;
-}
-
-CurrentWalletBalance.propTypes = propTypes;
-CurrentWalletBalance.defaultProps = defaultProps;
-CurrentWalletBalance.displayName = 'CurrentWalletBalance';
-export default compose(
-    withLocalize,
-    withOnyx({
-        userWallet: {
-            key: ONYXKEYS.USER_WALLET,
-        },
-    }),
-)(CurrentWalletBalance);
diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx
new file mode 100644
index 000000000000..e915252d6835
--- /dev/null
+++ b/src/components/CurrentWalletBalance.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {StyleProp, TextStyle} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import styles from '@styles/styles';
+import ONYXKEYS from '@src/ONYXKEYS';
+import UserWallet from '@src/types/onyx/UserWallet';
+import Text from './Text';
+
+type CurrentWalletBalanceOnyxProps = {
+    /** The user's wallet account */
+    userWallet: OnyxEntry<UserWallet>;
+};
+
+type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & {
+    balanceStyles?: StyleProp<TextStyle>;
+};
+
+function CurrentWalletBalance({userWallet, balanceStyles}: CurrentWalletBalanceProps) {
+    const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0);
+    return <Text style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, balanceStyles]}>{formattedBalance}</Text>;
+}
+
+CurrentWalletBalance.displayName = 'CurrentWalletBalance';
+
+export default withOnyx<CurrentWalletBalanceProps, CurrentWalletBalanceOnyxProps>({
+    userWallet: {
+        key: ONYXKEYS.USER_WALLET,
+    },
+})(CurrentWalletBalance);