diff --git a/ui/component/channelStakedIndicator/index.js b/ui/component/channelStakedIndicator/index.js index db473b24a..987683f17 100644 --- a/ui/component/channelStakedIndicator/index.js +++ b/ui/component/channelStakedIndicator/index.js @@ -1,9 +1,15 @@ import { connect } from 'react-redux'; -import { makeSelectClaimForUri } from 'lbry-redux'; +import { + makeSelectClaimForUri, + makeSelectStakedLevelForChannelUri, + makeSelectTotalStakedAmountForChannelUri, +} from 'lbry-redux'; import ChannelStakedIndicator from './view'; const select = (state, props) => ({ channelClaim: makeSelectClaimForUri(props.uri)(state), + amount: makeSelectTotalStakedAmountForChannelUri(props.uri)(state), + level: makeSelectStakedLevelForChannelUri(props.uri)(state), }); export default connect(select)(ChannelStakedIndicator); diff --git a/ui/component/channelStakedIndicator/view.jsx b/ui/component/channelStakedIndicator/view.jsx index b18f97356..fb6ba849f 100644 --- a/ui/component/channelStakedIndicator/view.jsx +++ b/ui/component/channelStakedIndicator/view.jsx @@ -10,31 +10,12 @@ import CreditAmount from 'component/common/credit-amount'; type Props = { channelClaim: ChannelClaim, + amount: number, + level: number, large?: boolean, inline?: boolean, }; -function getChannelLevel(amount: number): number { - let level = 1; - - switch (true) { - case amount >= 1 && amount < 50: - level = 2; - break; - case amount >= 50 && amount < 250: - level = 3; - break; - case amount >= 250 && amount < 1000: - level = 4; - break; - case amount >= 1000: - level = 5; - break; - } - - return level; -} - function getChannelIcon(level: number): string { const icons = { '1': ICONS.CHANNEL_LEVEL_1, @@ -48,15 +29,13 @@ function getChannelIcon(level: number): string { } function ChannelStakedIndicator(props: Props) { - const { channelClaim, large = false, inline = false } = props; + const { channelClaim, amount, level, large = false, inline = false } = props; if (!channelClaim || !channelClaim.meta) { return null; } - const amount = parseFloat(channelClaim.amount) + parseFloat(channelClaim.meta.support_amount) || 0; const isControlling = channelClaim && channelClaim.meta.is_controlling; - const level = getChannelLevel(amount); const icon = getChannelIcon(level); return (