react-native-daro 1.0.13 → 1.0.16

package/src/nativeAd/NativeAdView.tsx

@@ -1,31 +1,45 @@
-import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { findNodeHandle, NativeModules, requireNativeComponent, UIManager, View, type ViewProps } from 'react-native';
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ElementRef,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import NativeAdViewNativeComponent, {
+  Commands,
+} from '../DaroMNativeAdViewNativeComponent';
+import NativeDaroModule from '../NativeDaroModule';
 import type { AdNativeEvent } from '../types/AdEvent';
 import type { AdInfo, AdLoadFailedInfo } from '../types/AdInfo';
-import type { NativeAdViewHandler, NativeAdViewProps } from '../types/NativeAdViewProps';
-import { NativeAdViewContext, NativeAdViewProvider, type NativeAdViewContextType, type NativeAdViewType } from './NativeAdViewProvider';
-
-const { DaroMModule } = NativeModules;
-
-type NativeAdViewNativeEvents = {
-  onAdLoadedEvent(event: AdNativeEvent<AdInfo>): void;
-  onAdLoadFailedEvent(event: AdNativeEvent<AdLoadFailedInfo>): void;
-  onAdClickedEvent(event: AdNativeEvent<AdInfo>): void;
-  onAdImpressionRecordedEvent(event: AdNativeEvent<AdInfo>): void;
-};
-
-const ComponentName = 'DaroMNativeAdView';
-const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewProps & NativeAdViewNativeEvents>(ComponentName);
-
-export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdView(props, ref) {
+import type {
+  NativeAdViewHandler,
+  NativeAdViewProps,
+} from '../types/NativeAdViewProps';
+import {
+  NativeAdViewContext,
+  NativeAdViewProvider,
+} from './NativeAdViewProvider';
+
+type NativeAdViewElement = ElementRef<typeof NativeAdViewNativeComponent>;
+
+export const NativeAdView = forwardRef<
+  NativeAdViewHandler,
+  NativeAdViewProps & ViewProps
+>(function NativeAdView(props, ref) {
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
   useEffect(() => {
     const checkInitialization = async () => {
-      const result = await DaroMModule.isInitialized();
+      const result = await NativeDaroModule.isInitialized();
       setIsInitialized(result);
       if (!result) {
-        console.warn('NativeAdView is mounted before the initialization of the DaroM React Native module.');
+        console.warn(
+          'NativeAdView is mounted before the initialization of the DaroM React Native module.'
+        );
       }
     };
 
@@ -41,42 +55,43 @@ export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps &
     <NativeAdViewProvider>
       <NativeAdViewImpl {...props} ref={ref} />
     </NativeAdViewProvider>
-  );  
+  );
 });
 
-const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdViewImpl(
-  { adUnitId, onAdLoaded, onAdLoadFailed, onAdClicked, onAdImpressionRecorded, children, style, loadOnMount = true, ...otherProps },
+const NativeAdViewImpl = forwardRef<
+  NativeAdViewHandler,
+  NativeAdViewProps & ViewProps
+>(function NativeAdViewImpl(
+  {
+    adUnitId,
+    onAdLoaded,
+    onAdLoadFailed,
+    onAdClicked,
+    onAdImpressionRecorded,
+    children,
+    style,
+    loadOnMount = true,
+    adChoicesPosition = 'bottomRight',
+    ...otherProps
+  },
   ref
 ) {
-  // Context provides functions to manage native ad and native ad view state
-  const { setNativeAdView } = useContext(NativeAdViewContext) as NativeAdViewContextType;
-
-  const nativeAdViewRef = useRef<NativeAdViewType | null>(null);
+  const { nativeAdAssetRegistrations } = useContext(NativeAdViewContext);
+  const nativeAdViewRef = useRef<NativeAdViewElement | null>(null);
 
   // Load a new ad
   const loadAd = useCallback(() => {
     if (nativeAdViewRef.current) {
-      UIManager.dispatchViewManagerCommand(
-        findNodeHandle(nativeAdViewRef.current),
-        // @ts-ignore: Issue in RN ts defs
-        UIManager.getViewManagerConfig(ComponentName).Commands.loadAd,
-        [],
-      );
+      Commands.loadAd(nativeAdViewRef.current);
     }
   }, []);
 
   useImperativeHandle(ref, () => ({ loadAd }), [loadAd]);
 
   // Save the DOM element reference
-  const saveElement = useCallback(
-    (element: NativeAdViewType | null) => {
-      if (element) {
-        nativeAdViewRef.current = element;
-        setNativeAdView(element);
-      }
-    },
-    [setNativeAdView]
-  );
+  const saveElement = useCallback((element: NativeAdViewElement | null) => {
+    nativeAdViewRef.current = element;
+  }, []);
 
   const onAdLoadedEvent = useCallback(
     (event: AdNativeEvent<AdInfo>) => {
@@ -107,18 +122,41 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
   );
 
   return (
-    <NativeAdViewComponent
+    <NativeAdViewNativeComponent
       ref={saveElement}
+      {...otherProps}
       adUnitId={adUnitId}
       loadOnMount={loadOnMount}
+      adChoicesPosition={adChoicesPosition}
+      titleView={nativeAdAssetRegistrations.titleView?.nativeTag ?? 0}
+      bodyView={nativeAdAssetRegistrations.bodyView?.nativeTag ?? 0}
+      callToActionView={
+        nativeAdAssetRegistrations.callToActionView?.nativeTag ?? 0
+      }
+      iconView={nativeAdAssetRegistrations.iconView?.nativeTag ?? 0}
+      mediaView={nativeAdAssetRegistrations.mediaView?.nativeTag ?? 0}
+      titleViewStyleProps={
+        nativeAdAssetRegistrations.titleView?.styleProps ?? null
+      }
+      bodyViewStyleProps={
+        nativeAdAssetRegistrations.bodyView?.styleProps ?? null
+      }
+      callToActionViewStyleProps={
+        nativeAdAssetRegistrations.callToActionView?.styleProps ?? null
+      }
+      iconViewStyleProps={
+        nativeAdAssetRegistrations.iconView?.styleProps ?? null
+      }
+      mediaViewStyleProps={
+        nativeAdAssetRegistrations.mediaView?.styleProps ?? null
+      }
       onAdLoadedEvent={onAdLoadedEvent}
       onAdLoadFailedEvent={onAdLoadFailedEvent}
       onAdClickedEvent={onAdClickedEvent}
       onAdImpressionRecordedEvent={onAdImpressionRecordedEvent}
       style={style}
-      {...otherProps}
     >
       {children}
-    </NativeAdViewComponent>
+    </NativeAdViewNativeComponent>
   );
 });

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -1,8 +1,36 @@
 import * as React from 'react';
-import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import type { ImageProps, StyleProp, TextProps, TextStyle, ImageStyle, ViewProps } from 'react-native';
-import { findNodeHandle, Image, Platform, Text, View } from 'react-native';
-import { NativeAdViewContext } from './NativeAdViewProvider';
+import {
+  type ComponentRef,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type {
+  ImageProps,
+  StyleProp,
+  TextProps,
+  TextStyle,
+  ImageStyle,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import {
+  findNodeHandle,
+  Image,
+  Platform,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+} from 'react-native';
+import {
+  NativeAdViewContext,
+  type NativeAdViewAssetPropKey,
+} from './NativeAdViewProvider';
+import DaroMediaViewNativeComponent from '../DaroMediaViewNativeComponent';
+
+const UNREGISTERED_NATIVE_TAG = 0;
 
 // 스타일 속성 추출을 위한 타입 정의
 type StyleProps = {
@@ -53,41 +81,52 @@ type StyleProps = {
 };
 
 // 스타일 속성 추출 커스텀 훅
-const useStyleProps = (style: StyleProp<TextStyle>): StyleProps => {
+const useStyleProps = (
+  style: StyleProp<TextStyle | ViewStyle>,
+  textProps?: Pick<TextProps, 'numberOfLines' | 'ellipsizeMode'>
+): StyleProps => {
   return useMemo(() => {
-    const styleObj = style as TextStyle;
+    const styleObj = (StyleSheet.flatten(style) ?? {}) as TextStyle & ViewStyle;
+
     return {
       // 1. 폰트 관련
       fontSize: styleObj.fontSize as number,
       fontWeight: styleObj.fontWeight as string,
       fontFamily: styleObj.fontFamily as string,
       color: styleObj.color as string,
-      
+
       // 2. 배경색
       backgroundColor: styleObj.backgroundColor as string,
-      
+
       // 3. 정렬
-      textAlign: styleObj.textAlign as 'auto' | 'left' | 'right' | 'center' | 'justify',
-      
+      textAlign: styleObj.textAlign as
+        | 'auto'
+        | 'left'
+        | 'right'
+        | 'center'
+        | 'justify',
+      numberOfLines: textProps?.numberOfLines,
+      lineBreakMode: textProps?.ellipsizeMode as StyleProps['lineBreakMode'],
+
       // 6. 투명도
       opacity: styleObj.opacity as number,
-      
+
       // 7. 숨김
       display: styleObj.display as 'none' | 'flex',
-      
+
       // 10. 모서리 둥글게
       borderRadius: styleObj.borderRadius as number,
-      
+
       // 11. 테두리
       borderWidth: styleObj.borderWidth as number,
       borderColor: styleObj.borderColor as string,
-      
+
       // 12. 그림자
       shadowColor: styleObj.shadowColor as string,
       shadowOffset: styleObj.shadowOffset as { width: number; height: number },
       shadowOpacity: styleObj.shadowOpacity as number,
       shadowRadius: styleObj.shadowRadius as number,
-      
+
       // 13. 여백
       padding: styleObj.padding as number,
       margin: styleObj.margin as number,
@@ -99,27 +138,27 @@ const useStyleProps = (style: StyleProp<TextStyle>): StyleProps => {
       marginRight: styleObj.marginRight as number,
       marginBottom: styleObj.marginBottom as number,
       marginLeft: styleObj.marginLeft as number,
-      
+
       // 14. 위치
       position: styleObj.position as 'absolute' | 'relative',
       top: styleObj.top as number,
       right: styleObj.right as number,
       bottom: styleObj.bottom as number,
       left: styleObj.left as number,
-      
+
       // 15. 크기
-      width: styleObj.width as number,
-      height: styleObj.height as number,
-      
+      width: styleObj.width as number | string,
+      height: styleObj.height as number | string,
+
       // 16. 변환
       transform: styleObj.transform as any[],
-      
+
       // 17. 기타
       zIndex: styleObj.zIndex as number,
       overflow: styleObj.overflow as 'visible' | 'hidden' | 'scroll',
       backfaceVisibility: styleObj.backfaceVisibility as 'visible' | 'hidden',
     };
-  }, [style]);
+  }, [style, textProps?.ellipsizeMode, textProps?.numberOfLines]);
 };
 
 // Image 스타일 속성을 위한 타입 정의 추가
@@ -138,7 +177,8 @@ type ImageStyleProps = StyleProps & {
 // Image 스타일 속성 추출 커스텀 훅
 const useImageStyleProps = (style: StyleProp<ImageStyle>): ImageStyleProps => {
   return useMemo(() => {
-    const styleObj = style as ImageStyle;
+    const styleObj = StyleSheet.flatten(style) ?? {};
+
     return {
       // 기본 스타일 속성
       backgroundColor: styleObj.backgroundColor as string,
@@ -151,11 +191,16 @@ const useImageStyleProps = (style: StyleProp<ImageStyle>): ImageStyleProps => {
       shadowOpacity: styleObj.shadowOpacity as number,
       shadowRadius: styleObj.shadowRadius as number,
 
-      width: styleObj.width as number,
-      height: styleObj.height as number,
+      width: styleObj.width as number | string,
+      height: styleObj.height as number | string,
 
       // Image 전용 스타일 속성
-      resizeMode: styleObj.resizeMode as 'cover' | 'contain' | 'stretch' | 'repeat' | 'center',
+      resizeMode: styleObj.resizeMode as
+        | 'cover'
+        | 'contain'
+        | 'stretch'
+        | 'repeat'
+        | 'center',
       tintColor: styleObj.tintColor as string,
       overlayColor: styleObj.overlayColor as string,
       aspectRatio: styleObj.aspectRatio as number,
@@ -163,37 +208,47 @@ const useImageStyleProps = (style: StyleProp<ImageStyle>): ImageStyleProps => {
   }, [style]);
 };
 
-// 네이티브 뷰 속성 설정 커스텀 훅
-const useNativeAdViewProps = (ref: React.RefObject<any>, nativePropKey: string, styleProps?: StyleProps) => {
-  const { nativeAdView } = useContext(NativeAdViewContext);
+type NativeAdAssetStyleProps = StyleProps | ImageStyleProps;
+
+// 네이티브 광고 자산 등록 커스텀 훅
+const useNativeAdAssetRegistration = (
+  ref: React.RefObject<any>,
+  nativePropKey: NativeAdViewAssetPropKey,
+  styleProps?: NativeAdAssetStyleProps
+) => {
+  const { registerNativeAdAsset, unregisterNativeAdAsset } =
+    useContext(NativeAdViewContext);
+
+  useLayoutEffect(() => {
+    const nativeTag = ref.current
+      ? (findNodeHandle(ref.current) ?? UNREGISTERED_NATIVE_TAG)
+      : UNREGISTERED_NATIVE_TAG;
 
-  const setNativeProps = useCallback(() => {
-    if (!ref.current) return;
-    const props: any = {
-      [nativePropKey]: findNodeHandle(ref.current),
+    registerNativeAdAsset(nativePropKey, nativeTag, styleProps ?? null);
+  }, [nativePropKey, ref, registerNativeAdAsset, styleProps]);
+
+  useLayoutEffect(() => {
+    return () => {
+      unregisterNativeAdAsset(nativePropKey);
     };
-    
-    if (styleProps) {
-      props[`${nativePropKey}StyleProps`] = styleProps;
-    }
-    
-    nativeAdView?.setNativeProps(props);
-  }, [nativeAdView, ref, nativePropKey, styleProps]);
-
-  useEffect(() => {
-    setNativeProps();
-  }, [setNativeProps]);
+  }, [nativePropKey, unregisterNativeAdAsset]);
 };
 
 // 공통 Text 컴포넌트
-const AdTextView = (props: TextProps & { nativePropKey: string }) => {
-  const { nativePropKey, ...restProps } = props;
-  const textRef = useRef<Text | null>(null);
-  const styleProps = useStyleProps(props.style);
-  
-  useNativeAdViewProps(textRef, nativePropKey, styleProps);
-
-  return <Text {...restProps} ref={textRef} />;
+const AdTextView = (
+  props: TextProps & { nativePropKey: NativeAdViewAssetPropKey }
+) => {
+  const { nativePropKey, children, ...restProps } = props;
+  const textRef = useRef<ComponentRef<typeof Text> | null>(null);
+  const styleProps = useStyleProps(props.style, props);
+
+  useNativeAdAssetRegistration(textRef, nativePropKey, styleProps);
+
+  return (
+    <Text {...restProps} ref={textRef}>
+      {children ?? (Platform.OS === 'android' ? ' ' : undefined)}
+    </Text>
+  );
 };
 
 export const TitleView = (props: TextProps) => {
@@ -205,14 +260,19 @@ export const BodyView = (props: TextProps) => {
 };
 
 export const CallToActionView = (props: TextProps) => {
-  const callToActionRef = useRef<Text | null>(null);
-  const styleProps = useStyleProps(props.style);
-  
-  useNativeAdViewProps(callToActionRef, 'callToActionView', styleProps);
-  
+  const { children, ...restProps } = props;
+  const callToActionRef = useRef<ComponentRef<typeof Text> | null>(null);
+  const styleProps = useStyleProps(props.style, props);
+
+  useNativeAdAssetRegistration(callToActionRef, 'callToActionView', styleProps);
+
   // TouchableOpacity disables clicking on certain Android devices.
   if (Platform.OS === 'android') {
-    return <Text {...props} ref={callToActionRef} />;
+    return (
+      <Text {...restProps} ref={callToActionRef}>
+        {children ?? ' '}
+      </Text>
+    );
   } else {
     return (
       <View>
@@ -223,17 +283,22 @@ export const CallToActionView = (props: TextProps) => {
 };
 
 export const IconView = (props: Omit<ImageProps, 'source'>) => {
-  const imageRef = useRef<Image | null>(null);
+  const imageRef = useRef<ComponentRef<typeof Image> | null>(null);
   const iconViewStyleProps = useImageStyleProps(props.style);
-  useNativeAdViewProps(imageRef, 'iconView', iconViewStyleProps);
+  useNativeAdAssetRegistration(imageRef, 'iconView', iconViewStyleProps);
 
   return <Image {...props} ref={imageRef} source={0} />;
 };
 
+const NativeMediaView =
+  Platform.OS === 'android' && UIManager.hasViewManagerConfig?.('DaroMediaView')
+    ? DaroMediaViewNativeComponent
+    : View;
+
 export const MediaView = (props: ViewProps) => {
-  const viewRef = useRef<View | null>(null);
-  useNativeAdViewProps(viewRef, 'mediaView');
+  const viewRef = useRef<ComponentRef<typeof View> | null>(null);
+  const mediaViewStyleProps = useStyleProps(props.style);
+  useNativeAdAssetRegistration(viewRef, 'mediaView', mediaViewStyleProps);
 
-  return <View {...props} ref={viewRef} />;
+  return <NativeMediaView {...props} ref={viewRef} collapsable={false} />;
 };
-

package/src/nativeAd/NativeAdViewProvider.tsx

@@ -1,32 +1,100 @@
 import type { ReactNode } from 'react';
 import * as React from 'react';
-import { createContext, useState } from 'react';
-import type { NativeMethods } from 'react-native';
-import type { NativeAdViewProps } from '../types/NativeAdViewProps';
+import { createContext, useCallback, useMemo, useState } from 'react';
 
-export type NativeAdViewType = React.Component<NativeAdViewProps> & NativeMethods;
+type NativeAdAssetStyleProps = object | null;
 
-export type NativeAdViewContextType = {
-  nativeAdView: NativeAdViewType | null;
-  setNativeAdView: React.Dispatch<React.SetStateAction<NativeAdViewType | null>>;
+type NativeAdAssetRegistration = {
+  nativeTag: number;
+  styleProps: NativeAdAssetStyleProps;
 };
 
+export type NativeAdViewAssetPropKey =
+  | 'titleView'
+  | 'bodyView'
+  | 'callToActionView'
+  | 'iconView'
+  | 'mediaView';
+
+export type NativeAdAssetRegistrations = Partial<
+  Record<NativeAdViewAssetPropKey, NativeAdAssetRegistration>
+>;
+
+export type NativeAdViewContextType = {
+  nativeAdAssetRegistrations: NativeAdAssetRegistrations;
+  registerNativeAdAsset: (
+    assetKey: NativeAdViewAssetPropKey,
+    nativeTag: number,
+    styleProps: NativeAdAssetStyleProps
+  ) => void;
+  unregisterNativeAdAsset: (assetKey: NativeAdViewAssetPropKey) => void;
+};
 
 export const NativeAdViewContext = createContext<NativeAdViewContextType>({
-  nativeAdView: null,
-  setNativeAdView: () => { },
+  nativeAdAssetRegistrations: {},
+  registerNativeAdAsset: () => {},
+  unregisterNativeAdAsset: () => {},
 });
 
-export const NativeAdViewProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [nativeAdView, setNativeAdView] = useState<NativeAdViewType | null>(null);
+export const NativeAdViewProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [nativeAdAssetRegistrations, setNativeAdAssetRegistrations] =
+    useState<NativeAdAssetRegistrations>({});
+
+  const registerNativeAdAsset = useCallback(
+    (
+      assetKey: NativeAdViewAssetPropKey,
+      nativeTag: number,
+      styleProps: NativeAdAssetStyleProps
+    ) => {
+      setNativeAdAssetRegistrations((prev) => {
+        const current = prev[assetKey];
+
+        if (
+          current?.nativeTag === nativeTag &&
+          current?.styleProps === styleProps
+        ) {
+          return prev;
+        }
 
-  const providerValue = React.useMemo(
+        return {
+          ...prev,
+          [assetKey]: {
+            nativeTag,
+            styleProps,
+          },
+        };
+      });
+    },
+    []
+  );
+
+  const unregisterNativeAdAsset = useCallback(
+    (assetKey: NativeAdViewAssetPropKey) => {
+      setNativeAdAssetRegistrations((prev) => {
+        if (!prev[assetKey]) return prev;
+
+        const next = { ...prev };
+        delete next[assetKey];
+        return next;
+      });
+    },
+    []
+  );
+
+  const providerValue = useMemo(
     () => ({
-      nativeAdView,
-      setNativeAdView,
+      nativeAdAssetRegistrations,
+      registerNativeAdAsset,
+      unregisterNativeAdAsset,
     }),
-    [nativeAdView]
+    [nativeAdAssetRegistrations, registerNativeAdAsset, unregisterNativeAdAsset]
   );
 
-  return <NativeAdViewContext.Provider value={providerValue}>{children}</NativeAdViewContext.Provider>;
+  return (
+    <NativeAdViewContext.Provider value={providerValue}>
+      {children}
+    </NativeAdViewContext.Provider>
+  );
 };

package/src/types/AdBannerViewProps.ts

@@ -1,16 +1,16 @@
-import type { AdFormat } from "../AdBannerView";
-import type { AdProps } from "./AdProps";
+import type { AdFormat } from '../AdBannerView';
+import type { AdProps } from './AdProps';
 
 export type AdBannerViewHandler = {
-	/**
-	 * If the {@link loadOnMount} attribute is set to false, you can call this API to start loading ads in this AdView.
-	 */
-	loadAd(): void;
+  /**
+   * If the {@link loadOnMount} attribute is set to false, you can call this API to start loading ads in this AdView.
+   */
+  loadAd(): void;
 };
 
 export type AdBannerViewProps = AdProps & {
-	color?: string;
-	adFormat: AdFormat;
-	loadOnMount?: boolean;
-	isVisible?: boolean;
-}
+  color?: string;
+  adFormat: AdFormat;
+  loadOnMount?: boolean;
+  isVisible?: boolean;
+};

package/src/types/AdInfo.ts

@@ -2,36 +2,36 @@ import type { ErrorCode } from '../ErrorCode';
 
 // Represents an ad
 export type AdInfo = {
-    // The ad unit ID for which this ad was loaded.
-    adUnitId: string;
-    // The total latency in milliseconds for this waterfall to finish processing.
-    latencyMillis: number;
+  // The ad unit ID for which this ad was loaded.
+  adUnitId: string;
+  // The total latency in milliseconds for this waterfall to finish processing.
+  latencyMillis: number;
 };
 
 // Encapsulates various data for MAX load errors.
 export type AdLoadFailedInfo = {
-    // The ad unit ID for which this ad was loaded.
-    adUnitId: string;
+  // The ad unit ID for which this ad was loaded.
+  adUnitId: string;
 
-    // The error code for the error.
-    code: ErrorCode;
+  // The error code for the error.
+  code: ErrorCode;
 
-    message: string;
+  message: string;
 
-    // The total latency in milliseconds for this waterfall to finish processing.
-    latencyMillis: number;
+  // The total latency in milliseconds for this waterfall to finish processing.
+  latencyMillis: number;
 };
 
 // Encapsulates various data for MAX display errors.
 export type AdDisplayFailedInfo = {
-    message: string | null;
+  message: string | null;
 };
 
 // Represents a reward given to the user.
 export type AdRewardInfo = {
-    // The reward label.
-    rewardLabel?: string | null;
+  // The reward label.
+  rewardLabel?: string | null;
 
-    // The rewarded amount.
-    rewardAmount: string;
-};
+  // The rewarded amount.
+  rewardAmount: string;
+};