From 33b94fc251c411e578c7c783751f3412d63b1257 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 24 Oct 2023 17:10:15 +0200 Subject: [PATCH 1/5] Rename CurrentWalletBalance --- .../{CurrentWalletBalance.js => CurrentWalletBalance.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{CurrentWalletBalance.js => CurrentWalletBalance.tsx} (100%) diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.tsx similarity index 100% rename from src/components/CurrentWalletBalance.js rename to src/components/CurrentWalletBalance.tsx From 807ddd1b9b75a966bff63060594a0ca11d820da1 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 24 Oct 2023 17:20:13 +0200 Subject: [PATCH 2/5] [TS migration] Migrate 'CurrentWalletBalance.js' component to TypeScript --- src/components/CurrentWalletBalance.tsx | 49 ++++++++----------------- 1 file changed, 16 insertions(+), 33 deletions(-) diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index 642e6937f1bf..abca2fa8db2c 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/src/components/CurrentWalletBalance.tsx @@ -1,48 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import {TextStyle} from 'react-native'; import styles from '../styles/styles'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import compose from '../libs/compose'; import ONYXKEYS from '../ONYXKEYS'; import Text from './Text'; import * as CurrencyUtils from '../libs/CurrencyUtils'; +import UserWallet from '../types/onyx/UserWallet'; -const propTypes = { +type CurrentWalletBalanceOnyxProps = { /** 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, + userWallet: OnyxEntry; }; -const defaultProps = { - userWallet: { - // Default to zero if userWallet and currentBalance is not set yet to avoid NaN - currentBalance: 0, - }, - balanceStyles: [], +type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & { + balanceStyles?: TextStyle[]; }; -function CurrentWalletBalance(props) { - const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance); - return {`${formattedBalance}`}; +function CurrentWalletBalance({userWallet, balanceStyles = []}: CurrentWalletBalanceProps) { + const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0); + return {`${formattedBalance}`}; } -CurrentWalletBalance.propTypes = propTypes; -CurrentWalletBalance.defaultProps = defaultProps; CurrentWalletBalance.displayName = 'CurrentWalletBalance'; -export default compose( - withLocalize, - withOnyx({ - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, - }), -)(CurrentWalletBalance); + +export default withOnyx({ + userWallet: { + key: ONYXKEYS.USER_WALLET, + }, +})(CurrentWalletBalance); From 756f960436c691ea18d8bea987ca3e3b8c45fd3d Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 26 Oct 2023 09:41:41 +0200 Subject: [PATCH 3/5] Remove unused imports --- src/components/CurrentWalletBalance.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index abca2fa8db2c..ad9947211c87 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/src/components/CurrentWalletBalance.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import {TextStyle} from 'react-native'; import styles from '../styles/styles'; From d4c9ad694dd3c7984f6bdc9a6d17b295489ba3dd Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 7 Nov 2023 11:47:52 +0100 Subject: [PATCH 4/5] Final touches --- src/components/CurrentWalletBalance.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index bf6da7cde1f2..7b05ddcf9b0e 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/src/components/CurrentWalletBalance.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {TextStyle} from 'react-native'; +import {StyleProp, TextStyle} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import styles from '@styles/styles'; @@ -13,12 +13,12 @@ type CurrentWalletBalanceOnyxProps = { }; type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & { - balanceStyles?: TextStyle[]; + balanceStyles?: StyleProp; }; -function CurrentWalletBalance({userWallet, balanceStyles = []}: CurrentWalletBalanceProps) { +function CurrentWalletBalance({userWallet, balanceStyles}: CurrentWalletBalanceProps) { const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0); - return {`${formattedBalance}`}; + return {`${formattedBalance}`}; } CurrentWalletBalance.displayName = 'CurrentWalletBalance'; From 5a73734f9cfe4c9f3c45a560384a351b47828583 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 7 Nov 2023 11:49:11 +0100 Subject: [PATCH 5/5] Final touches v2 --- src/components/CurrentWalletBalance.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index 7b05ddcf9b0e..e915252d6835 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/src/components/CurrentWalletBalance.tsx @@ -18,7 +18,7 @@ type CurrentWalletBalanceProps = CurrentWalletBalanceOnyxProps & { function CurrentWalletBalance({userWallet, balanceStyles}: CurrentWalletBalanceProps) { const formattedBalance = CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0); - return {`${formattedBalance}`}; + return {formattedBalance}; } CurrentWalletBalance.displayName = 'CurrentWalletBalance';