Unverified Commit 89a9571c authored by Akinwale Ariwodola's avatar Akinwale Ariwodola Committed by GitHub
Browse files

Display USD (#135)

* show usd values for lbc on wallet and rewards pages
* link to publish page
* update phrasing
* don't show rewards nag if user is not interested
parent 689e30a5
Pipeline #1890 passed with stage
import { connect } from 'react-redux';
import { doToast, selectMyChannelClaims } from 'lbry-redux';
import { selectUser } from 'lbryinc';
import { doToast, selectBalance, selectMyChannelClaims } from 'lbry-redux';
import { selectUnclaimedRewardValue, selectUser } from 'lbryinc';
import { selectSdkReady } from 'redux/selectors/settings';
import DrawerContent from './view';
const select = state => ({
balance: selectBalance(state),
channels: selectMyChannelClaims(state),
sdkReady: selectSdkReady(state),
unclaimedRewardAmount: selectUnclaimedRewardValue(state),
user: selectUser(state),
});
......
......@@ -6,6 +6,8 @@ import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import Icon from 'react-native-vector-icons/FontAwesome5';
import channelIconStyle from 'styles/channelIcon';
import discoverStyle from 'styles/discover';
import { Lbryio } from 'lbryinc';
import { formatUsd } from 'utils/helper';
const groupedMenuItems = {
'Find content': [
......@@ -42,6 +44,18 @@ const routesRequiringSdkReady = [
];
class DrawerContent extends React.PureComponent {
state = {
usdExchangeRate: 0,
};
componentDidMount() {
Lbryio.getExchangeRates().then(rates => {
if (!isNaN(rates.LBC_USD)) {
this.setState({ usdExchangeRate: rates.LBC_USD });
}
});
}
getAvatarImageUrl = () => {
const { channels = [] } = this.props;
if (channels) {
......@@ -82,7 +96,7 @@ class DrawerContent extends React.PureComponent {
};
render() {
const { activeTintColor, navigation, user, onItemPress } = this.props;
const { activeTintColor, balance, navigation, unclaimedRewardAmount, user, onItemPress } = this.props;
const { state } = navigation;
const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
......@@ -189,6 +203,15 @@ class DrawerContent extends React.PureComponent {
</View>
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
{__(item.label)}
{item.label === 'Wallet' && this.state.usdExchangeRate > 0 && (
<Text> ({formatUsd(parseFloat(balance) * parseFloat(this.state.usdExchangeRate))})</Text>
)}
{item.label === 'Rewards' && this.state.usdExchangeRate > 0 && (
<Text>
{' '}
({formatUsd(parseFloat(unclaimedRewardAmount) * parseFloat(this.state.usdExchangeRate))})
</Text>
)}
</Text>
</TouchableOpacity>
);
......
......@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { selectBalance } from 'lbry-redux';
import { selectUnclaimedRewardValue } from 'lbryinc';
import Constants from 'constants';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import FloatingWalletBalance from './view';
const select = state => ({
......@@ -11,7 +11,4 @@ const select = state => ({
rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state),
});
export default connect(
select,
null
)(FloatingWalletBalance);
export default connect(select, null)(FloatingWalletBalance);
// @flow
import React from 'react';
import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
import Colors from '../../styles/colors';
import { formatUsd } from 'utils/helper';
import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from '../link';
import rewardStyle from '../../styles/reward';
import Link from 'component/link';
import rewardStyle from 'styles/reward';
type Props = {
canClaim: boolean,
......@@ -61,7 +62,7 @@ class RewardCard extends React.PureComponent<Props> {
if (reward) {
const claimed = !!reward.transaction_id;
if (!claimed && reward.reward_range && reward.reward_range.includes('-')) {
return reward.reward_range.split('-')[0] + '+'; // ex: 5+
return reward.reward_range.split('-')[1];
} else if (reward.reward_amount > 0) {
return reward.reward_amount;
}
......@@ -72,7 +73,7 @@ class RewardCard extends React.PureComponent<Props> {
};
render() {
const { canClaim, isPending, onClaimPress, reward } = this.props;
const { canClaim, isPending, onClaimPress, reward, usdExchangeRate } = this.props;
const claimed = !!reward.transaction_id;
return (
......@@ -117,8 +118,16 @@ class RewardCard extends React.PureComponent<Props> {
)}
</View>
<View style={rewardStyle.rightCol}>
{reward.reward_range && reward.reward_range.indexOf('-') > -1 && (
<Text style={rewardStyle.rightColHeader}>{__('up to')}</Text>
)}
<Text style={rewardStyle.rewardAmount}>{this.getDisplayAmount()}</Text>
<Text style={rewardStyle.rewardCurrency}>LBC</Text>
{usdExchangeRate > 0 && (
<Text style={rewardStyle.rewardUsd}>
&asymp;{formatUsd(parseFloat(this.getDisplayAmount()) * parseFloat(usdExchangeRate))}
</Text>
)}
</View>
</TouchableOpacity>
);
......
......@@ -7,6 +7,7 @@ import Link from 'component/link';
import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5';
import rewardStyle from 'styles/reward';
import { formatUsd } from '../../utils/helper';
class RewardEnrolment extends React.Component {
componentDidMount() {
......@@ -29,7 +30,7 @@ class RewardEnrolment extends React.Component {
};
render() {
const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
const { unclaimedRewardAmount, usdExchangeRate } = this.props;
return (
<View style={rewardStyle.enrollContainer}>
......@@ -43,9 +44,11 @@ class RewardEnrolment extends React.Component {
<View style={rewardStyle.onboarding}>
<Text style={rewardStyle.enrollDescText}>
{__('LBRY credits allow you to purchase content, publish content, and influence the network.')}
{__('LBRY credits allow you to publish or purchase content.')}
{'\n\n'}
{__('You get credits for free for providing an email address and taking other basic actions.')}
{__('You can obtain free credits worth %amount% after you provide an email address.', {
amount: formatUsd(parseFloat(unclaimedRewardAmount) * parseFloat(usdExchangeRate)),
})}
{'\n\n'}
<Link style={rewardStyle.learnMoreLink} text={__('Learn more')} onPress={this.onLearnMorePressed} />.
</Text>
......
......@@ -58,7 +58,7 @@ class SuggestedSubscriptionsGrid extends React.PureComponent {
const uris = claimSearchByQuery[claimSearchKey];
if (
lastPageReached[claimSearchKey] ||
((uris.length > 0 && uris.length < suggestedPageSize) || uris.length >= softLimit)
(uris.length > 0 && uris.length < suggestedPageSize) || uris.length >= softLimit
) {
return;
}
......@@ -81,7 +81,7 @@ class SuggestedSubscriptionsGrid extends React.PureComponent {
}
render() {
const { claimSearchByQuery, suggested, inModal, navigation } = this.props;
const { claimSearchByQuery, inModal, navigation } = this.props;
const options = this.buildClaimSearchOptions();
const claimSearchKey = createNormalizedClaimSearchKey(options);
const claimSearchUris = claimSearchByQuery[claimSearchKey];
......@@ -92,7 +92,7 @@ class SuggestedSubscriptionsGrid extends React.PureComponent {
maxToRenderPerBatch={48}
removeClippedSubviews
itemDimension={120}
spacing={2}
spacing={1}
items={claimSearchUris}
style={inModal ? subscriptionsStyle.modalScrollContainer : subscriptionsStyle.scrollContainer}
contentContainerStyle={
......
......@@ -6,7 +6,4 @@ const select = state => ({
balance: selectBalance(state),
});
export default connect(
select,
null
)(WalletBalance);
export default connect(select, null)(WalletBalance);
// @flow
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Lbry, formatCredits } from 'lbry-redux';
import Address from 'component/address';
import Button from 'component/button';
import { formatCredits } from 'lbry-redux';
import { Lbryio } from 'lbryinc';
import { formatUsd } from 'utils/helper';
import walletStyle from 'styles/wallet';
type Props = {
......@@ -11,6 +11,18 @@ type Props = {
};
class WalletBalance extends React.PureComponent<Props> {
state = {
usdExchangeRate: 0,
};
componentDidMount() {
Lbryio.getExchangeRates().then(rates => {
if (!isNaN(rates.LBC_USD)) {
this.setState({ usdExchangeRate: rates.LBC_USD });
}
});
}
render() {
const { balance } = this.props;
return (
......@@ -21,6 +33,13 @@ class WalletBalance extends React.PureComponent<Props> {
<Text style={walletStyle.balance}>
{(balance || balance === 0) && formatCredits(parseFloat(balance), 2) + ' LBC'}
</Text>
<Text style={walletStyle.usdBalance}>
{this.state.usdExchangeRate > 0 && (
<Text>
&asymp;{formatUsd(isNaN(balance) ? 0 : parseFloat(balance) * parseFloat(this.state.usdExchangeRate))}
</Text>
)}
</Text>
</View>
);
}
......
// @flow
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Lbry, formatCredits } from 'lbry-redux';
import Address from 'component/address';
import Button from 'component/button';
import { Text, View } from 'react-native';
import { formatCredits } from 'lbry-redux';
import { Lbryio } from 'lbryinc';
import { formatUsd } from 'utils/helper';
import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import walletStyle from 'styles/wallet';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
type Props = {
claimsBalance: number,
......@@ -16,25 +17,37 @@ type Props = {
};
class WalletBalanceExtra extends React.PureComponent<Props> {
state = {
usdExchangeRate: 0,
};
componentDidMount() {
Lbryio.getExchangeRates().then(rates => {
if (!isNaN(rates.LBC_USD)) {
this.setState({ usdExchangeRate: rates.LBC_USD });
}
});
}
render() {
const { claimsBalance, deviceWalletSynced, supportsBalance, tipsBalance } = this.props;
const { claimsBalance, deviceWalletSynced, navigation, supportsBalance, tipsBalance } = this.props;
return (
<View style={walletStyle.balanceExtra}>
<View style={walletStyle.syncDriverCustody}>
<Text style={walletStyle.syncInfoText}>
{deviceWalletSynced
? __('A backup of your wallet is synced with lbry.tv')
: __('Your wallet is not currently synced with lbry.tv. You are responsible for backing up your wallet.')}
<View style={walletStyle.usdInfoCard}>
<Text style={walletStyle.usdInfoText}>
You can convert your credits to USD and withdraw the converted amount using an exchange.{' '}
<Link
style={walletStyle.usdConvertFaqLink}
href={'https://lbry.com/faq/exchanges'}
text={__('Learn more')}
/>
.
</Text>
<Link
text={__('What does this mean?')}
href={
deviceWalletSynced
? 'https://lbry.com/faq/account-sync'
: 'https://lbry.com/faq/how-to-backup-wallet#android'
}
style={walletStyle.syncInfoLink}
style={walletStyle.usdConvertLink}
href={'https://bittrex.com/Account/Register?referralCode=4M1-P30-BON'}
text={__('Convert credits to USD on Bittrex')}
/>
</View>
......@@ -47,7 +60,18 @@ class WalletBalanceExtra extends React.PureComponent<Props> {
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(tipsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.usdWalletExtraBalance}>
&asymp;{formatUsd(parseFloat(tipsBalance) * parseFloat(this.state.usdExchangeRate))}
</Text>
<Text style={walletStyle.text}>{__('in tips')}</Text>
<Link
style={walletStyle.earnTipsLink}
onPress={() => {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH });
}}
text={__('Earn more tips by uploading cool videos')}
/>
</View>
<View style={walletStyle.walletExtraCol}>
......@@ -66,6 +90,23 @@ class WalletBalanceExtra extends React.PureComponent<Props> {
</View>
</View>
</View>
<View style={walletStyle.syncDriverCustody}>
<Text style={walletStyle.syncInfoText}>
{deviceWalletSynced
? __('A backup of your wallet is synced with lbry.tv')
: __('Your wallet is not currently synced with lbry.tv. You are responsible for backing up your wallet.')}
</Text>
<Link
text={__('What does this mean?')}
href={
deviceWalletSynced
? 'https://lbry.com/faq/account-sync'
: 'https://lbry.com/faq/how-to-backup-wallet#android'
}
style={walletStyle.syncInfoLink}
/>
</View>
</View>
);
}
......
import React from 'react';
import { Lbry } from 'lbry-redux';
import { Lbryio } from 'lbryinc';
import { ActivityIndicator, NativeModules, ScrollView, Text, View } from 'react-native';
import Colors from 'styles/colors';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
......@@ -17,13 +17,14 @@ const FILTER_CLAIMED = 'claimed';
class RewardsPage extends React.PureComponent {
state = {
currentFilter: FILTER_AVAILABLE,
firstRewardClaimed: false,
isEmailVerified: false,
isIdentityVerified: false,
isRewardApproved: false,
verifyRequestStarted: false,
revealVerification: true,
firstRewardClaimed: false,
currentFilter: FILTER_AVAILABLE,
usdExchangeRate: 0,
verifyRequestStarted: false,
};
scrollView = null;
......@@ -48,6 +49,12 @@ class RewardsPage extends React.PureComponent {
setPlayerVisible();
NativeModules.Firebase.setCurrentScreen('Rewards');
Lbryio.getExchangeRates().then(rates => {
if (!isNaN(rates.LBC_USD)) {
this.setState({ usdExchangeRate: rates.LBC_USD });
}
});
fetchRewards();
this.setState({
......@@ -158,6 +165,7 @@ class RewardsPage extends React.PureComponent {
canClaim={!isNotEligible}
reward={reward}
reward_type={reward.reward_type}
usdExchangeRate={this.state.usdExchangeRate}
/>
))}
<CustomRewardCard canClaim={!isNotEligible} showVerification={this.showVerification} />
......@@ -211,7 +219,9 @@ class RewardsPage extends React.PureComponent {
return (
<View style={rewardStyle.container}>
<UriBar navigation={navigation} />
{(!this.state.isEmailVerified || !this.state.isRewardApproved) && <RewardEnrolment navigation={navigation} />}
{(!this.state.isEmailVerified || !this.state.isRewardApproved) && (
<RewardEnrolment usdExchangeRate={this.state.usdExchangeRate} navigation={navigation} />
)}
{this.state.isEmailVerified && this.state.isRewardApproved && (
<ScrollView
......
......@@ -12,6 +12,7 @@ import {
selectViewMode,
selectFirstRunCompleted,
selectShowSuggestedSubs,
selectUnclaimedRewardValue,
selectUser,
} from 'lbryinc';
import { doToast, selectFetchingClaimSearch } from 'lbry-redux';
......@@ -33,9 +34,11 @@ const select = state => ({
unreadSubscriptions: selectUnreadSubscriptions(state),
viewMode: selectViewMode(state),
firstRunCompleted: selectFirstRunCompleted(state),
rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state),
showSuggestedSubs: selectShowSuggestedSubs(state),
timeItem: selectTimeItem(state),
sdkReady: selectSdkReady(state),
unclaimedRewardAmount: selectUnclaimedRewardValue(state),
user: selectUser(state),
});
......
......@@ -11,7 +11,7 @@ import {
View,
} from 'react-native';
import { buildURI, parseURI } from 'lbry-redux';
import { getOrderBy } from 'utils/helper';
import { formatUsd, getOrderBy } from 'utils/helper';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment';
import Button from 'component/button';
......@@ -31,17 +31,21 @@ import SuggestedSubscriptions from 'component/suggestedSubscriptions';
import SuggestedSubscriptionsGrid from 'component/suggestedSubscriptionsGrid';
import UriBar from 'component/uriBar';
import SdkLoadingStatus from 'component/sdkLoadingStatus';
import Snackbar from 'react-native-snackbar';
import { Lbryio } from 'lbryinc';
class SubscriptionsPage extends React.PureComponent {
state = {
currentSortByItem: Constants.CLAIM_SEARCH_SORT_BY_ITEMS[1], // should always default to sorting subscriptions by new
filteredChannels: [],
orderBy: ['release_time'],
showRewardsNag: true,
showingSuggestedSubs: false,
showSortPicker: false,
showTimePicker: false,
showModalSuggestedSubs: false,
usdExchangeRate: 0,
userEmailVerified: false,
orderBy: ['release_time'],
filteredChannels: [],
currentSortByItem: Constants.CLAIM_SEARCH_SORT_BY_ITEMS[1], // should always default to sorting subscriptions by new
};
didFocusListener;
......@@ -58,15 +62,25 @@ class SubscriptionsPage extends React.PureComponent {
}
onComponentFocused = () => {
const { currentRoute, doFetchMySubscriptions, pushDrawerStack, setPlayerVisible, user } = this.props;
const { currentRoute, doFetchMySubscriptions, pushDrawerStack, sdkReady, setPlayerVisible, user } = this.props;
if (currentRoute === Constants.DRAWER_ROUTE_SUBSCRIPTIONS) {
pushDrawerStack();
}
setPlayerVisible();
NativeModules.Firebase.setCurrentScreen('Subscriptions');
this.setState({ userEmailVerified: user && user.has_verified_email });
Lbryio.getExchangeRates().then(rates => {
if (!isNaN(rates.LBC_USD)) {
this.setState({ usdExchangeRate: rates.LBC_USD }, () => {
if (sdkReady && parseFloat(this.state.usdExchangeRate) > 0 && user && !user.is_reward_approved) {
this.showRewardsAvailable();
}
});
}
});
this.setState({ userEmailVerified: user && user.has_verified_email });
doFetchMySubscriptions();
};
......@@ -75,7 +89,7 @@ class SubscriptionsPage extends React.PureComponent {
}
componentWillReceiveProps(nextProps) {
const { currentRoute, user } = nextProps;
const { currentRoute, user, sdkReady } = nextProps;
const { currentRoute: prevRoute, doFetchMySubscriptions } = this.props;
if (Constants.DRAWER_ROUTE_SUBSCRIPTIONS === currentRoute && currentRoute !== prevRoute) {
this.onComponentFocused();
......@@ -88,9 +102,43 @@ class SubscriptionsPage extends React.PureComponent {
});
}
if (
sdkReady &&
parseFloat(this.state.usdExchangeRate) > 0 &&
this.state.showRewardsNag &&
user &&
!user.is_reward_approved
) {
this.showRewardsAvailable();
}
this.unsubscribeShortChannelUrls();
}
showRewardsAvailable = () => {
const { navigation, unclaimedRewardAmount, rewardsNotInterested } = this.props;
if (rewardsNotInterested) {
this.setState({ showRewardsNag: false });
return;
}
this.setState({ showRewardsNag: false }, () => {
Snackbar.show({
title: __('Did you know that you can earn free credits worth up to %amount%?', {
amount: formatUsd(parseFloat(this.state.usdExchangeRate) * parseFloat(unclaimedRewardAmount)),
}),
duration: Snackbar.LENGTH_LONG,
action: {
title: __('SHOW ME'),
color: Colors.LbryGreen,
onPress: () => {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_REWARDS });
},
},
});
});
};
handleSortByItemSelected = item => {
this.setState({ currentSortByItem: item, orderBy: getOrderBy(item), showSortPicker: false });
};
......
......@@ -94,7 +94,7 @@ class WalletPage extends React.PureComponent {
>
{!rewardsNotInterested && (!balance || balance === 0) && <WalletRewardsDriver navigation={navigation} />}
<WalletBalance />
<WalletBalanceExtra />
<WalletBalanceExtra navigation={navigation} />
<WalletAddress />
<WalletSend />
<TransactionListRecent navigation={navigation} />
......
......@@ -147,6 +147,10 @@ const rewardStyle = StyleSheet.create({
width: '18%',
alignItems: 'center',
},
rightColHeader: {
fontFamily: 'Inter-Regular',
fontSize: 12,
},
rewardAmount: {
fontFamily: 'Inter-Regular',
fontSize: 26,
......@@ -154,6 +158,7 @@ const rewardStyle = StyleSheet.create({
},
rewardCurrency: {
fontFamily: 'Inter-Regular',
fontSize: 12,
},
rewardTitle: {
fontFamily: 'Inter-Regular',
......@@ -322,6 +327,12 @@ const rewardStyle = StyleSheet.create({
activeFilterLink: {
fontFamily: 'Inter-SemiBold',
},
rewardUsd: {
fontFamily: 'Inter-Regular',
fontSize: 12,
color: Colors.DescriptionGrey,
marginTop: 6,
},
});
export default rewardStyle;
......@@ -192,8 +192,6 @@ const subscriptionsStyle = StyleSheet.create({
suggestedItem: {
alignItems: 'center',
marginBottom: 16,
marginLeft: 16,
marginRight: 16,