chore: remove default props (#6461)

### Description Removes instances of defaultProps as this is slated to be removed from React in a future version: facebook/react#29233. Components, where a default prop was provided, had their associated props set to optional. ### Test plan - [x] Tested in CI. - [x] Sanity Check on iOS and Android. ### Related issues N/A ### Backwards compatibility Yes ### Network scalability N/A
valora-inc · Jan 31, 2025 · 290023c · 290023c
1 parent 4776edd
commit 290023c
Show file tree

Hide file tree

Showing 23 changed files with 116 additions and 208 deletions.
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
@@ -3,27 +3,30 @@ import { StyleSheet, View } from 'react-native'
 import BackChevron, { Props as BackChevronProps } from 'src/icons/BackChevron'
 import { navigateBack } from 'src/navigator/NavigationService'
 import { TopBarIconButton, TopBarIconButtonProps } from 'src/navigator/TopBarButton'
+import Colors from 'src/styles/colors'
 import { Spacing } from 'src/styles/styles'
 
 type Props = Omit<TopBarIconButtonProps, 'icon'> & BackChevronProps
 
-function BackButton(props: Props) {
+function BackButton({
+  onPress = navigateBack,
+  color = Colors.contentPrimary,
+  height = 16,
+  style,
+  ...props
+}: Props) {
   return (
-    <View style={[styles.container, props.style]}>
+    <View style={[styles.container, style]}>
       <TopBarIconButton
         {...props}
         style={styles.button}
-        icon={<BackChevron color={props.color} height={props.height} />}
+        icon={<BackChevron color={color} height={height} />}
+        onPress={onPress}
       />
     </View>
   )
 }
 
-BackButton.defaultProps = {
-  onPress: navigateBack,
-  ...BackChevron.defaultProps,
-}
-
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',

diff --git a/src/components/CircleButton.tsx b/src/components/CircleButton.tsx
@@ -16,15 +16,17 @@ interface ButtonProps {
 }
 
 export default class CircleButton extends React.PureComponent<ButtonProps> {
-  static defaultProps = {
-    size: 50,
-    disable: false,
-    activeColor: colors.accent,
-    inactiveColor: `${colors.accent}80`,
-  }
-
   render() {
-    const { onPress, solid, borderWidth, disabled, size, activeColor, inactiveColor } = this.props
+    const {
+      onPress,
+      solid,
+      borderWidth,
+      disabled = false,
+      size = 50,
+      activeColor = colors.accent,
+      inactiveColor = `${colors.accent}80`,
+      style,
+    } = this.props
     const color = disabled ? inactiveColor : activeColor
     const buttonStyle = [
       styles.button,
@@ -35,7 +37,7 @@ export default class CircleButton extends React.PureComponent<ButtonProps> {
     const xColor = solid ? colors.contentTertiary : color
 
     return (
-      <View style={[styles.row, this.props.style]}>
+      <View style={[styles.row, style]}>
         <TouchableOpacity
           onPress={onPress}
           disabled={disabled}

diff --git a/src/components/CurrencyDisplay.tsx b/src/components/CurrencyDisplay.tsx
@@ -32,16 +32,16 @@ export enum FormatType {
 }
 
 interface Props {
-  type: DisplayType
+  type?: DisplayType
   amount: MoneyAmount
-  size: number // only used for DisplayType.Big
-  hideSign: boolean
-  hideSymbol: boolean
-  hideCode: boolean
+  size?: number // only used for DisplayType.Big
+  hideSign?: boolean
+  hideSymbol?: boolean
+  hideCode?: boolean
   showLocalAmount?: boolean
-  showExplicitPositiveSign: boolean // shows '+' for a positive amount when true (default is false)
-  formatType: FormatType
-  hideFullCurrencyName: boolean
+  showExplicitPositiveSign?: boolean // shows '+' for a positive amount when true (default is false)
+  formatType?: FormatType
+  hideFullCurrencyName?: boolean
   style?: StyleProp<TextStyle>
   currencyInfo?: CurrencyInfo
   testID?: string
@@ -118,16 +118,16 @@ export function getFullCurrencyName(currency: Currency | null) {
  * @deprecated use TokenDisplay instead
  */
 export default function CurrencyDisplay({
-  type,
-  size,
-  hideSign,
-  hideSymbol,
-  hideCode,
+  type = DisplayType.Default,
+  size = 48,
+  hideSign = false,
+  hideSymbol = false,
+  hideCode = true,
   showLocalAmount,
-  showExplicitPositiveSign,
+  showExplicitPositiveSign = false,
   amount,
-  formatType,
-  hideFullCurrencyName,
+  formatType = FormatType.Default,
+  hideFullCurrencyName = true,
   style,
   currencyInfo,
   testID,
@@ -223,17 +223,6 @@ export default function CurrencyDisplay({
   )
 }
 
-CurrencyDisplay.defaultProps = {
-  type: DisplayType.Default,
-  size: 48,
-  hideSign: false,
-  hideSymbol: false,
-  hideCode: true,
-  showExplicitPositiveSign: false,
-  formatType: FormatType.Default,
-  hideFullCurrencyName: true,
-}
-
 const styles = StyleSheet.create({
   bigContainer: {
     flexDirection: 'row',

diff --git a/src/components/KeyboardSpacer.tsx b/src/components/KeyboardSpacer.tsx
@@ -41,18 +41,12 @@ const defaultAnimation: LayoutAnimationConfig = {
 }
 
 interface Props {
-  topSpacing: number
-  onToggle: (visible: boolean, keyboardSpace?: number) => void
+  topSpacing?: number
+  onToggle?: (visible: boolean, keyboardSpace?: number) => void
   style?: ViewStyle
 }
 
 export default class KeyboardSpacer extends React.Component<Props> {
-  static defaultProps = {
-    topSpacing: 0,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onToggle: (visible: boolean, keyboardSpace: number) => {},
-  }
-
   _listeners: EmitterSubscription[] = []
   _viewRef = React.createRef<View>()
   _currentMeasureToken: object | null = null
@@ -85,21 +79,25 @@ export default class KeyboardSpacer extends React.Component<Props> {
       return 0
     }
 
-    const keyboardY = keyboardFrame.screenY - this.props.topSpacing
+    const { topSpacing = 0 } = this.props
+
+    const keyboardY = keyboardFrame.screenY - topSpacing
 
     // Calculate the displacement needed for the view such that it
     // no longer overlaps with the keyboard
     return Math.max(viewFrame.y + viewFrame.height - keyboardY, 0)
   }
 
   updateKeyboardSpace = (event: KeyboardEvent) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const { onToggle = (_visible: boolean, _keyboardSpace?: number) => {} } = this.props
     if (!event.endCoordinates) {
-      this.props.onToggle(true)
+      onToggle(true)
       return
     }
 
     if (!this._viewRef.current) {
-      this.props.onToggle(true)
+      onToggle(true)
       return
     }
 
@@ -130,11 +128,13 @@ export default class KeyboardSpacer extends React.Component<Props> {
       const keyboardSpace = this.relativeKeyboardHeight(viewFrame, keyboardFrame)
 
       this.setState({ keyboardSpace })
-      this.props.onToggle(true, keyboardSpace)
+      onToggle(true, keyboardSpace)
     })
   }
 
   resetKeyboardSpace = (event: KeyboardEvent) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const { onToggle = (_visible: boolean, _keyboardSpace?: number) => {} } = this.props
     // This cancels measureInWindow
     this._currentMeasureToken = null
 
@@ -149,17 +149,18 @@ export default class KeyboardSpacer extends React.Component<Props> {
     LayoutAnimation.configureNext(animationConfig)
 
     this.setState({ keyboardSpace: 0 })
-    this.props.onToggle(false, 0)
+    onToggle(false, 0)
   }
 
   render() {
+    const { style } = this.props
     // On Android with windowSoftInputMode set to adjustResize we don't need the spacer
     // unless it's using fullscreen layout (which is the case with a transparent status bar)
 
     return (
       <View
         ref={this._viewRef}
-        style={[styles.container, { height: this.state.keyboardSpace }, this.props.style]}
+        style={[styles.container, { height: this.state.keyboardSpace }, style]}
         collapsable={false}
       />
     )

diff --git a/src/components/__snapshots__/CircleButton.test.tsx.snap b/src/components/__snapshots__/CircleButton.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`CircleButton renders correctly with minimum props 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }

diff --git a/src/icons/BackChevron.tsx b/src/icons/BackChevron.tsx
@@ -4,11 +4,11 @@ import Svg, { Path } from 'react-native-svg'
 import Colors from 'src/styles/colors'
 
 export interface Props {
-  height: number
-  color: ColorValue
+  height?: number
+  color?: ColorValue
 }
 
-function BackChevron({ color, height }: Props) {
+function BackChevron({ color = Colors.contentPrimary, height = 16 }: Props) {
   return (
     <Svg height={height} width={height / 2} viewBox="0 0 8 16" fill="none" testID="BackChevron">
       <Path
@@ -21,9 +21,4 @@ function BackChevron({ color, height }: Props) {
   )
 }
 
-BackChevron.defaultProps = {
-  height: 16,
-  color: Colors.contentPrimary,
-}
-
 export default BackChevron
diff --git a/src/icons/Backspace.tsx b/src/icons/Backspace.tsx
@@ -9,27 +9,22 @@ interface Props {
 }
 
 export default class Backspace extends React.PureComponent<Props> {
-  static defaultProps = {
-    height: 30,
-    width: 30,
-    color: colors.contentPrimary,
-  }
-
   render() {
+    const { height = 30, width = 30, color = colors.contentPrimary } = this.props
     return (
       <Svg
         xmlns="http://www.w3.org/2000/svg"
-        height={this.props.height}
-        width={this.props.width}
+        height={height}
+        width={width}
         viewBox="0 0 35 18"
         fill="none"
       >
         <Path
           d="M1.82198 9.7422L9.57436 16.7422C9.75813 16.9081 9.99693 17 10.2445 17H33C33.5523 17 34 16.5523 34 16V2C34 1.44772 33.5523 1 33 1H10.2445C9.99693 1 9.75813 1.09186 9.57436 1.25779L1.82198 8.25779C1.38221 8.65488 1.38221 9.34512 1.82198 9.7422Z"
-          stroke={this.props.color}
+          stroke={color}
           strokeWidth="3"
         />
-        <Path d="M17 5L25 13M17 13L25 5" stroke={this.props.color} strokeWidth="3" />
+        <Path d="M17 5L25 13M17 13L25 5" stroke={color} strokeWidth="3" />
       </Svg>
     )
   }

diff --git a/src/icons/BankIcon.tsx b/src/icons/BankIcon.tsx
@@ -9,18 +9,13 @@ interface Props {
 }
 
 export default class BankIcon extends React.PureComponent<Props> {
-  static defaultProps = {
-    height: 32,
-    width: 32,
-    color: colors.accent,
-  }
-
   render() {
+    const { height = 32, width = 32, color = colors.accent } = this.props
     return (
-      <Svg width={this.props.width} height={this.props.height} viewBox="0 0 24 24" fill="none">
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
         <Path
           d="M11.2852 0.594128C11.0584 0.424838 10.783 0.333374 10.5 0.333374C10.217 0.333374 9.9416 0.424838 9.71483 0.594128L0.414167 7.53696C-0.373333 8.12438 0.0425834 9.37563 1.02433 9.37563H19.9763C20.9586 9.37563 21.3739 8.12438 20.587 7.53696L11.2852 0.594128ZM10.5 6.16788C10.1906 6.16788 9.89384 6.04496 9.67504 5.82617C9.45625 5.60738 9.33333 5.31063 9.33333 5.00121C9.33333 4.69179 9.45625 4.39505 9.67504 4.17625C9.89384 3.95746 10.1906 3.83454 10.5 3.83454C10.8094 3.83454 11.1062 3.95746 11.325 4.17625C11.5438 4.39505 11.6667 4.69179 11.6667 5.00121C11.6667 5.31063 11.5438 5.60738 11.325 5.82617C11.1062 6.04496 10.8094 6.16788 10.5 6.16788ZM0 20.3125C0 18.6209 1.37083 17.25 3.0625 17.25H9.9995C9.56118 18.0026 9.33124 18.8583 9.33333 19.7292C9.33333 20.5167 9.51708 21.2605 9.842 21.9167H0.729167C0.326667 21.9167 0 21.59 0 21.1875V20.3125ZM11.6667 15.5607C12.3718 15.1389 13.1783 14.9166 14 14.9173V10.5423H11.6667V15.5607ZM16.3333 14.9173H18.6667V10.5423H16.3333V14.9173ZM4.66667 16.084H2.33333V10.5423H4.66667V16.084ZM7 10.5423V16.084H9.33333V10.5423H7ZM14.1458 16.084C13.6632 16.0779 13.1842 16.1676 12.7365 16.3481C12.2889 16.5286 11.8815 16.7961 11.5381 17.1353C11.1946 17.4744 10.922 17.8783 10.7358 18.3237C10.5497 18.769 10.4539 19.2468 10.4539 19.7295C10.4539 20.2122 10.5497 20.69 10.7358 21.1353C10.922 21.5807 11.1946 21.9846 11.5381 22.3237C11.8815 22.6629 12.2889 22.9304 12.7365 23.1109C13.1842 23.2914 13.6632 23.3811 14.1458 23.375H15.0208C15.2142 23.375 15.3997 23.2982 15.5364 23.1615C15.6732 23.0247 15.75 22.8393 15.75 22.6459C15.75 22.4525 15.6732 22.267 15.5364 22.1303C15.3997 21.9935 15.2142 21.9167 15.0208 21.9167H14.1458C13.5657 21.9167 13.0093 21.6862 12.599 21.276C12.1888 20.8658 11.9583 20.3094 11.9583 19.7292C11.9583 19.149 12.1888 18.5926 12.599 18.1824C13.0093 17.7722 13.5657 17.5417 14.1458 17.5417H15.0208C15.2142 17.5417 15.3997 17.4649 15.5364 17.3281C15.6732 17.1914 15.75 17.0059 15.75 16.8125C15.75 16.6192 15.6732 16.4337 15.5364 16.2969C15.3997 16.1602 15.2142 16.0834 15.0208 16.0834H14.1458V16.084ZM19.6875 16.084C20.1701 16.0779 20.6491 16.1676 21.0968 16.3481C21.5444 16.5286 21.9518 16.7961 22.2953 17.1353C22.6387 17.4744 22.9114 17.8783 23.0975 18.3237C23.2836 18.769 23.3795 19.2468 23.3795 19.7295C23.3795 20.2122 23.2836 20.69 23.0975 21.1353C22.9114 21.5807 22.6387 21.9846 22.2953 22.3237C21.9518 22.6629 21.5444 22.9304 21.0968 23.1109C20.6491 23.2914 20.1701 23.3811 19.6875 23.375H18.8125C18.6191 23.375 18.4336 23.2982 18.2969 23.1615C18.1602 23.0247 18.0833 22.8393 18.0833 22.6459C18.0833 22.4525 18.1602 22.267 18.2969 22.1303C18.4336 21.9935 18.6191 21.9167 18.8125 21.9167H19.6875C20.2677 21.9167 20.8241 21.6862 21.2343 21.276C21.6445 20.8658 21.875 20.3094 21.875 19.7292C21.875 19.149 21.6445 18.5926 21.2343 18.1824C20.8241 17.7722 20.2677 17.5417 19.6875 17.5417H18.8125C18.6191 17.5417 18.4336 17.4649 18.2969 17.3281C18.1602 17.1914 18.0833 17.0059 18.0833 16.8125C18.0833 16.6192 18.1602 16.4337 18.2969 16.2969C18.4336 16.1602 18.6191 16.0834 18.8125 16.0834H19.6875V16.084ZM13.4167 19.7292C13.4167 19.3261 13.7433 19 14.1458 19H19.6875C19.8809 19 20.0664 19.0769 20.2031 19.2136C20.3398 19.3504 20.4167 19.5358 20.4167 19.7292C20.4167 19.9226 20.3398 20.1081 20.2031 20.2448C20.0664 20.3816 19.8809 20.4584 19.6875 20.4584H14.1458C13.7433 20.4584 13.4167 20.1317 13.4167 19.7292Z"
-          fill={this.props.color}
+          fill={color}
         />
       </Svg>
     )

diff --git a/src/icons/Checkmark.tsx b/src/icons/Checkmark.tsx
@@ -11,27 +11,14 @@ interface Props {
 }
 
 export default class Checkmark extends React.PureComponent<Props> {
-  static defaultProps = {
-    height: 32,
-    width: 32,
-    color: colors.accent,
-    stroke: false,
-    testID: undefined,
-  }
-
   render() {
+    const { height = 32, width = 32, color = colors.accent, stroke = false, testID } = this.props
     return (
-      <Svg
-        width={this.props.width}
-        height={this.props.height}
-        viewBox="0 0 24 24"
-        fill="none"
-        testID={this.props.testID}
-      >
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" testID={testID}>
         <Path
           d="M20.5 7.33 9.186 18.643 4 13.458l1.33-1.33 3.856 3.847L19.17 6 20.5 7.33Z"
-          fill={this.props.color}
-          stroke={this.props.stroke ? this.props.color : undefined}
+          fill={color}
+          stroke={stroke ? color : undefined}
         />
       </Svg>
     )

diff --git a/src/icons/ClockIcon.tsx b/src/icons/ClockIcon.tsx
@@ -9,18 +9,13 @@ interface Props {
 }
 
 export default class ClockIcon extends React.PureComponent<Props> {
-  static defaultProps = {
-    height: 32,
-    width: 32,
-    color: colors.accent,
-  }
-
   render() {
+    const { height = 32, width = 32, color = colors.accent } = this.props
     return (
-      <Svg width={this.props.width} height={this.props.height} viewBox="0 0 24 24" fill="none">
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
         <Path
           d="M14.04 15.64 11.2 12.8v-4h1.6v3.34l2.36 2.36-1.12 1.14ZM11.2 7.2V5.6h1.6v1.6h-1.6Zm5.6 5.6v-1.6h1.6v1.6h-1.6Zm-5.6 5.6v-1.6h1.6v1.6h-1.6Zm-5.6-5.6v-1.6h1.6v1.6H5.6ZM12 20a7.785 7.785 0 0 1-3.12-.63 8.091 8.091 0 0 1-2.54-1.71 8.074 8.074 0 0 1-1.71-2.54A7.804 7.804 0 0 1 4 12c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54a8.073 8.073 0 0 1 2.54-1.71A7.804 7.804 0 0 1 12 4c1.107 0 2.147.21 3.12.63.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12 0 1.107-.21 2.147-.63 3.12-.42.973-.99 1.82-1.71 2.54a8.085 8.085 0 0 1-2.54 1.71c-.973.42-2.013.63-3.12.63Zm0-1.6c1.787 0 3.3-.62 4.54-1.86 1.24-1.24 1.86-2.753 1.86-4.54s-.62-3.3-1.86-4.54C15.3 6.22 13.787 5.6 12 5.6s-3.3.62-4.54 1.86C6.22 8.7 5.6 10.213 5.6 12s.62 3.3 1.86 4.54C8.7 17.78 10.213 18.4 12 18.4Z"
-          fill={this.props.color}
+          fill={color}
         />
       </Svg>
     )

diff --git a/src/icons/Envelope.tsx b/src/icons/Envelope.tsx
@@ -7,7 +7,7 @@ interface Props {
   color?: string
 }
 
-export function Envelope({ color, size }: Props) {
+export function Envelope({ color = Colors.contentPrimary, size = 24 }: Props) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path
@@ -18,9 +18,4 @@ export function Envelope({ color, size }: Props) {
   )
 }
 
-Envelope.defaultProps = {
-  color: Colors.contentPrimary,
-  size: 24,
-}
-
 export default React.memo(Envelope)