Variable RewardConst

Type declaration

• Root: (__namedParameters: RewardRootProps) => Element

  Component that displays the reward amount with optional formatting. Must be used within a Reward.Root component.

  Param: props.abbreviated

  Whether to show abbreviated numbers (default: true)

  Param: props.withSymbol

  Whether to show the token symbol (default: true)

  Param: props.fallback

  Content to show when reward data is not available

  Param: props.children

  Optional render function with incentive data

  Example

  <Reward.Root id="11155111:0x...:1">
    // With render prop
    <Reward.Amount
      abbreviated={true}
      withSymbol={true}
      fallback="No reward available"
      >
      {(incentive) => <div>{incentive.rewardAmount}</div>}
    </Reward.Amount>
    // With standard display
    <Reward.Amount
      abbreviated={true}
      withSymbol={true}
      fallback="No reward available"
    /> // 9.62K SOL
  </Reward.Root>
  Copy

• Amount: (__namedParameters: RewardAmountProps) => Element

  Component that displays the reward amount with optional formatting. Must be used within a Reward.Root component.

  Param: props.abbreviated

  Whether to show abbreviated numbers (default: true)

  Param: props.withSymbol

  Whether to show the token symbol (default: true)

  Param: props.fallback

  Content to show when reward data is not available

  Param: props.children

  Optional render function with incentive data

  Example

  <Reward.Root id="11155111:0x...:1">
    // With render prop
    <Reward.Amount
      abbreviated={true}
      withSymbol={true}
      fallback="No reward available"
      >
      {(incentive) => <div>{incentive.rewardAmount}</div>}
    </Reward.Amount>
    // With standard display
    <Reward.Amount
      abbreviated={true}
      withSymbol={true}
      fallback="No reward available"
    /> // 9.62K SOL
  </Reward.Root>
  Copy

• USD: (__namedParameters: RewardUSDProps) => Element

  Component that displays the USD value of the reward. Must be used within a Reward.Root component.

  Param: props.abbreviated

  // Whether to show abbreviated numbers (default: true). An abbreviated number would be the dollar amount rounded to 2 decimal places. If false, decimals are not rounded to 2 places.

  Param: props.withSymbol

  Whether to show the USD symbol (default: true)

  Param: props.fallback

  Content to show when reward data is not available

  Param: props.children

  Optional render function with USD value

  Example

  <Reward.Root id="boost-123">
    <Reward.USD
      abbreviated={true}
      withSymbol={true}
      fallback="USD value not available"
    />
  </Reward.Root>
  Copy

• Image: (
      props: Omit<HTMLAttributes<HTMLImageElement>, "src"> & {
          fallback?: ReactNode;
      },
  ) => Element

  Component that displays the reward token's image. Must be used within a Reward.Root component.

  Param: props.fallback

  Content to show when image is not available

  Param: props

  Additional HTML img element props

  Example

  <Reward.Root id="boost-123">
    <Reward.Image
      className="token-image"
      alt="Token"
      fallback={<div>No image</div>}
    />
  </Reward.Root>
  Copy