ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-21 04:11:50 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1324 from esteemapp/new/wallet

Browse Source 
New/wallet
This commit is contained in:
Feruz M 2019-11-28 07:06:30 +02:00 committed by GitHub
commit 6222238130
61 changed files with 1598 additions and 1313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -71,6 +71,7 @@
"react-native-slider": "^0.11.0", "react-native-slider": "^0.11.0",
"react-native-snap-carousel": "^3.8.0", "react-native-snap-carousel": "^3.8.0",
"react-native-svg": "^9.5.3", "react-native-svg": "^9.5.3",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0", "react-native-vector-icons": "^6.6.0",
"react-native-version": "^3.1.0", "react-native-version": "^3.1.0",
"react-native-version-number": "^0.3.5", "react-native-version-number": "^0.3.5",

4
src/components/basicUIElements/view/card/cardStyles.js
View File

@ -4,9 +4,5 @@ export default EStyleSheet.create({
wrapper: { wrapper: {
flexDirection: 'column', flexDirection: 'column',
backgroundColor: '$primaryBackgroundColor', backgroundColor: '$primaryBackgroundColor',
shadowOpacity: 0.2,
shadowColor: '#e7e7e7',
paddingHorizontal: 8,
paddingVertical: 8,
}, },
}); });

2
src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
View File

@ -20,7 +20,7 @@ const BoostPlaceHolder = () => {
{({ isDarkTheme }) => { {({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return ( return (
<View style={styles.container} key={i}> <View style={styles.container} key={i.toString()}>
<View style={styles.line}> <View style={styles.line}>
<Placeholder.Box color={color} width={90} height={40} animate="fade" /> <Placeholder.Box color={color} width={90} height={40} animate="fade" />
<View style={styles.paragraphWrapper}> <View style={styles.paragraphWrapper}>

10
src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js
View File

@ -9,6 +9,9 @@ export default EStyleSheet.create({
fitContent: { fitContent: {
marginVertical: 0, marginVertical: 0,
}, },
textWrapper: {
flexDirection: 'row',
},
iconTextWrapper: { iconTextWrapper: {
flexDirection: 'row', flexDirection: 'row',
alignSelf: 'center', alignSelf: 'center',
@ -35,6 +38,7 @@ export default EStyleSheet.create({
text: { text: {
fontFamily: '$primaryFont', fontFamily: '$primaryFont',
color: '$primaryBlack', color: '$primaryBlack',
alignSelf: 'center',
fontSize: 16, fontSize: 16,
marginLeft: 8, marginLeft: 8,
}, },
@ -46,6 +50,7 @@ export default EStyleSheet.create({
marginLeft: 8, marginLeft: 8,
fontFamily: '$primaryFont', fontFamily: '$primaryFont',
color: '$iconColor', color: '$iconColor',
width: '100%',
}, },
onlyText: { onlyText: {
marginLeft: 40, marginLeft: 40,
@ -84,4 +89,9 @@ export default EStyleSheet.create({
dropdownStyle: { dropdownStyle: {
minWidth: '$deviceWidth * 0.7', minWidth: '$deviceWidth * 0.7',
}, },
hintIcon: {
marginLeft: 10,
justifyContent: 'center',
alignItems: 'center',
},
}); });

17
src/components/basicUIElements/view/walletLineItem/walletLineItemView.js
View File

@ -2,9 +2,7 @@ import React from 'react';
import { View, Text } from 'react-native'; import { View, Text } from 'react-native';
// Components // Components
import GrayWrapper from '../grayWrapper/grayWrapperView'; import { DropdownButton, PopoverWrapper, Icon, GrayWrapper } from '../../..';
import { Icon } from '../../../icon';
import { DropdownButton } from '../../../dropdownButton';
// Styles // Styles
import styles from './walletLineItemStyles'; import styles from './walletLineItemStyles';
@ -27,6 +25,8 @@ const WalletLineItem = ({
isHasdropdown, isHasdropdown,
dropdownOptions, dropdownOptions,
onDropdownSelect, onDropdownSelect,
hintIconName,
hintDescription,
}) => ( }) => (
<GrayWrapper isGray={index && index % 2 !== 0}> <GrayWrapper isGray={index && index % 2 !== 0}>
<View style={[styles.container, fitContent && styles.fitContent, style]}> <View style={[styles.container, fitContent && styles.fitContent, style]}>
@ -44,7 +44,7 @@ const WalletLineItem = ({
)} )}
<View> <View>
{!!text && ( {!!text && (
<View> <View style={styles.textWrapper}>
<Text <Text
style={[ style={[
styles.text, styles.text,
@ -58,6 +58,15 @@ const WalletLineItem = ({
> >
{text} {text}
</Text> </Text>
{!!hintIconName && (
<PopoverWrapper text={hintDescription}>
<Icon
style={[styles.hintIcon, styles.icon]}
name={hintIconName}
iconType={iconType}
/>
</PopoverWrapper>
)}
</View> </View>
)} )}
{!!description && ( {!!description && (

8
src/components/formatedElements/formattedCurrency/formattedCurrencyView.js
View File

@ -1,12 +1,16 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
const FormattedCurrency = ({ value, fixAt = 3, currency }) => { const FormattedCurrency = ({ value, fixAt = 3, currency, isApproximate = false }) => {
const { currencyRate, currencySymbol } = currency; const { currencyRate, currencySymbol } = currency;
const valueInCurrency = value * currencyRate; const valueInCurrency = value * currencyRate;
const toFixedValue = valueInCurrency.toFixed(fixAt); const toFixedValue = valueInCurrency.toFixed(fixAt);
return <Fragment key={toFixedValue.toString()}>{`${currencySymbol} ${toFixedValue}`}</Fragment>; return (
<Fragment key={toFixedValue.toString()}>{`${
isApproximate ? '~' : ''
}${currencySymbol} ${toFixedValue}`}</Fragment>
);
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({

55
src/components/horizontalIconList/horizontalIconListStyles.js Normal file
View File

@ -0,0 +1,55 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
iconsWrapper: {
marginVertical: 10,
marginHorizontal: 0,
justifyContent: 'center',
alignSelf: 'center',
flexDirection: 'row',
},
iconsList: {
height: 55,
},
subText: {
color: '$darkIconColor',
fontSize: 8,
justifyContent: 'center',
alignSelf: 'center',
marginTop: 5,
},
iconWrapper: {
marginHorizontal: 16,
width: 36,
height: 36,
borderRadius: 36 / 2,
backgroundColor: '$primaryLightBackground',
justifyContent: 'center',
alignItems: 'center',
},
iconButton: {
marginTop: 1,
marginLeft: 1,
},
icon: {
fontSize: 24,
color: '$primaryDarkText',
},
badge: {
position: 'absolute',
right: -9,
top: 20,
backgroundColor: '$primaryBlue',
justifyContent: 'center',
alignItems: 'center',
padding: 2,
height: 12,
minWidth: 18,
borderRadius: 12 / 2,
},
badgeText: {
fontSize: 8,
color: '$white',
fontWeight: '600',
},
});

57
src/components/horizontalIconList/horizontalIconListView.js Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { View, FlatList, Text } from 'react-native';
import get from 'lodash/get';
import styles from './horizontalIconListStyles';
import { IconButton, PopoverWrapper } from '..';
const HorizontalIconList = ({ options, optionsKeys }) => {
const intl = useIntl();
const _getTranslation = id => {
let translation;
try {
translation = intl.formatMessage({ id });
} catch (error) {
translation = '';
}
return translation;
};
return (
<View style={styles.iconsWrapper}>
<FlatList
style={styles.iconsList}
data={optionsKeys}
keyExtractor={item => get(item, 'type', Math.random()).toString()}
horizontal
renderItem={({ item }) => (
<PopoverWrapper text={_getTranslation(get(options[get(item, 'type')], 'descriptionKey'))}>
<View styles={styles.iconWrapper} key={get(item, 'type')}>
<View style={styles.iconWrapper}>
<IconButton
iconStyle={styles.icon}
style={styles.iconButton}
iconType={get(options[get(item, 'type')], 'iconType')}
name={get(options[get(item, 'type')], 'icon')}
badgeCount={get(options[get(item, 'type')], 'point')}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
disabled
/>
</View>
<Text style={styles.subText}>
{_getTranslation(get(options[get(item, 'type')], 'nameKey'))}
</Text>
</View>
</PopoverWrapper>
)}
/>
</View>
);
};
export { HorizontalIconList };

8
src/components/index.js
View File

@ -51,6 +51,8 @@ import PostButton from './postButton/postButtonView';
import ProfileEditForm from './profileEditForm/profileEditFormView'; import ProfileEditForm from './profileEditForm/profileEditFormView';
import ScaleSlider from './scaleSlider/scaleSliderView'; import ScaleSlider from './scaleSlider/scaleSliderView';
import { ProductItemLine } from './productItemLine/productItemLineView'; import { ProductItemLine } from './productItemLine/productItemLineView';
import { HorizontalIconList } from './horizontalIconList/horizontalIconListView';
import { PopoverWrapper } from './popoverWrapper/popoverWrapperView';
// View // View
import { Comment } from './comment'; import { Comment } from './comment';
@ -58,7 +60,7 @@ import { Comments } from './comments';
import { CommentsDisplay } from './commentsDisplay'; import { CommentsDisplay } from './commentsDisplay';
import { LeaderBoard } from './leaderboard'; import { LeaderBoard } from './leaderboard';
import { Notification } from './notification'; import { Notification } from './notification';
import { Points } from './points'; import { WalletHeader } from './walletHeader';
import { Posts } from './posts'; import { Posts } from './posts';
import { Transaction } from './transaction'; import { Transaction } from './transaction';
import { VotersDisplay } from './votersDisplay'; import { VotersDisplay } from './votersDisplay';
@ -135,7 +137,7 @@ export {
ParentPost, ParentPost,
PercentBar, PercentBar,
PinAnimatedInput, PinAnimatedInput,
Points, WalletHeader,
PostBody, PostBody,
PostBoost, PostBoost,
PostButton, PostButton,
@ -187,4 +189,6 @@ export {
WalletDetailsPlaceHolder, WalletDetailsPlaceHolder,
WalletLineItem, WalletLineItem,
WalletUnclaimedPlaceHolder, WalletUnclaimedPlaceHolder,
HorizontalIconList,
PopoverWrapper,
}; };

3
src/components/points/index.js
View File

@ -1,3 +0,0 @@
import Points from './view/pointsView';
export { Points };

149
src/components/points/view/pointsStyles.js
View File

@ -1,149 +0,0 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
pointText: {
color: '$primaryBlue',
fontSize: 26,
marginTop: 24,
justifyContent: 'center',
alignSelf: 'center',
fontWeight: 'bold',
},
pointsWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'center',
flex: 1,
},
dropdownRowText: {
fontSize: 14,
color: '$primaryDarkGray',
textAlign: 'center',
},
dropdownRowStyle: {
marginLeft: 0,
},
dropdownButtonStyle: {
justifyContent: 'center',
alignSelf: 'center',
position: 'absolute',
right: -40,
top: 20,
},
subText: {
color: '$darkIconColor',
fontSize: 8,
justifyContent: 'center',
alignSelf: 'center',
marginTop: 5,
},
iconsWrapper: {
marginVertical: 24,
marginHorizontal: 32,
justifyContent: 'center',
alignSelf: 'center',
flexDirection: 'row',
},
iconsList: {
height: 55,
},
iconWrapper: {
marginHorizontal: 16,
width: 36,
height: 36,
borderRadius: 36 / 2,
backgroundColor: '$primaryGrayBackground',
justifyContent: 'center',
alignItems: 'center',
},
iconButton: {
marginTop: 1,
marginLeft: 1,
},
activeIconWrapper: {
backgroundColor: '$primaryBlue',
},
activeIcon: {
color: '$white',
},
icon: {
fontSize: 24,
color: '$primaryDarkText',
},
badge: {
position: 'absolute',
right: -9,
top: 20,
backgroundColor: '$primaryBlue',
justifyContent: 'center',
alignItems: 'center',
padding: 2,
height: 12,
minWidth: 18,
borderRadius: 12 / 2,
},
badgeText: {
fontSize: 8,
color: '$white',
fontWeight: '600',
},
activeBadge: {
backgroundColor: '$black',
},
listWrapper: {
marginHorizontal: 8,
},
mainButton: {
marginVertical: 8,
alignSelf: 'center',
paddingHorizontal: 24,
},
mainButtonWrapper: {
flexDirection: 'row',
},
unclaimedText: {
color: '$pureWhite',
fontSize: 14,
fontWeight: 'bold',
alignSelf: 'center',
},
mainIconWrapper: {
backgroundColor: '$pureWhite',
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginLeft: 20,
width: 24,
height: 24,
},
scrollContainer: {
flex: 1,
},
scrollContentContainer: {
paddingBottom: 60,
},
popoverDetails: {
flexDirection: 'row',
height: 130,
width: '$deviceWidth / 2',
borderRadius: 20,
paddingHorizontal: 26,
backgroundColor: '$primaryBackgroundColor',
},
arrow: {
borderTopColor: '$primaryBackgroundColor',
},
popoverWrapper: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
overlay: {
backgroundColor: '#403c4449',
},
popoverText: {
color: '$primaryDarkText',
},
});

265
src/components/points/view/pointsView.js
View File

@ -1,265 +0,0 @@
/* eslint-disable react/jsx-wrap-multilines */
import React, { Component, Fragment } from 'react';
import { Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity } from 'react-native';
import { injectIntl } from 'react-intl';
import { Popover, PopoverController } from 'react-native-modal-popover';
import { get } from 'lodash';
import { withNavigation } from 'react-navigation';
// Components
import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements';
import { IconButton } from '../../iconButton';
import { Icon } from '../../icon';
import { MainButton } from '../../mainButton';
import { DropdownButton } from '../../dropdownButton';
import { CollapsibleCard } from '../../collapsibleCard';
import { ThemeContainer } from '../../../containers';
// Utils
import { getTimeFromNow } from '../../../utils/time';
// Constants
import POINTS, { POINTS_KEYS } from '../../../constants/options/points';
import { default as ROUTES } from '../../../constants/routeNames';
// Styles
import styles from './pointsStyles';
class PointsView extends Component {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
this.state = {};
this.dropdownRef = React.createRef();
}
// Component Functions
refreshControl = ({ isDarkTheme }) => {
const { fetchUserActivity, refreshing } = this.props;
return (
<RefreshControl
refreshing={refreshing}
onRefresh={fetchUserActivity}
progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
titleColor="#fff"
colors={['#fff']}
/>
);
};
_getTranslation = id => {
const { intl } = this.props;
let translation;
try {
translation = intl.formatMessage({ id });
} catch (error) {
translation = '';
}
return translation;
};
_renderLoading = () => {
const { isLoading, intl } = this.props;
if (isLoading) {
return <ListPlaceHolder />;
}
return <Text style={styles.subText}>{intl.formatMessage({ id: 'points.no_activity' })}</Text>;
};
_showDropdown = () => {
this.dropdownRef.current.show();
};
render() {
const {
claimPoints,
isClaiming,
userActivities,
userPoints,
handleOnDropdownSelected,
navigation,
intl,
} = this.props;
const unclaimedPoints = get(userPoints, 'unclaimed_points', 0);
return (
<Fragment>
<LineBreak height={12} />
<ThemeContainer>
{isDarkTheme => (
<ScrollView
style={styles.scrollContainer}
refreshControl={this.refreshControl({ isDarkTheme })}
contentContainerStyle={styles.scrollContentContainer}
>
<View style={styles.pointsWrapper}>
<Text onPress={this._showDropdown} style={styles.pointText}>
{get(userPoints, 'points')}
</Text>
<DropdownButton
dropdownRowWrapper={styles.dropdownRowStyle}
dropdownRef={this.dropdownRef}
isHasChildIcon
iconName="arrow-drop-down"
options={[
intl.formatMessage({ id: 'points.dropdown_transfer' }),
intl.formatMessage({ id: 'points.dropdown_promote' }),
intl.formatMessage({ id: 'points.dropdown_boost' }),
]}
noHighlight
dropdownButtonStyle={styles.dropdownButtonStyle}
onSelect={handleOnDropdownSelected}
rowTextStyle={styles.dropdownRowText}
dropdownStyle={styles.dropdownStyle}
/>
</View>
<Text style={styles.subText}>
{intl.formatMessage({ id: 'points.esteemPoints' })}
</Text>
<MainButton
isLoading={isClaiming}
isDisable={isClaiming}
style={styles.mainButton}
height={50}
onPress={() =>
unclaimedPoints > 0 ? claimPoints() : navigation.navigate(ROUTES.SCREENS.BOOST)
}
>
<View style={styles.mainButtonWrapper}>
<Text style={styles.unclaimedText}>
{unclaimedPoints > 0
? unclaimedPoints
: intl.formatMessage({ id: 'boost.buy' })}
</Text>
<View style={styles.mainIconWrapper}>
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
</View>
</View>
</MainButton>
<View style={styles.iconsWrapper}>
<FlatList
style={styles.iconsList}
data={POINTS_KEYS}
keyExtractor={item => get(item, 'type', Math.random()).toString()}
horizontal
renderItem={({ item }) => (
<PopoverController key={get(item, 'type')}>
{({
openPopover,
closePopover,
popoverVisible,
setPopoverAnchor,
popoverAnchorRect,
}) => (
<View styles={styles.iconWrapper} key={get(item, 'type')}>
<View style={styles.iconWrapper}>
<TouchableOpacity ref={setPopoverAnchor} onPress={openPopover}>
<IconButton
iconStyle={styles.icon}
style={styles.iconButton}
iconType={get(POINTS[get(item, 'type')], 'iconType')}
name={get(POINTS[get(item, 'type')], 'icon')}
badgeCount={get(POINTS[get(item, 'type')], 'point')}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
disabled
/>
</TouchableOpacity>
</View>
<Text style={styles.subText}>
{this._getTranslation(get(POINTS[get(item, 'type')], 'nameKey'))}
</Text>
<Popover
backgroundStyle={styles.overlay}
contentStyle={styles.popoverDetails}
arrowStyle={styles.arrow}
visible={popoverVisible}
onClose={() => closePopover()}
fromRect={popoverAnchorRect}
placement="top"
supportedOrientations={['portrait', 'landscape']}
>
<View style={styles.popoverWrapper}>
<Text style={styles.popoverText}>
{this._getTranslation(
get(POINTS[get(item, 'type')], 'descriptionKey'),
)}
</Text>
</View>
</Popover>
</View>
)}
</PopoverController>
)}
/>
</View>
<View style={styles.listWrapper}>
<FlatList
data={userActivities}
keyExtractor={item => item.id.toString()}
ListEmptyComponent={this._renderLoading()}
renderItem={({ item, index }) => (
<CollapsibleCard
noBorder
noContainer
key={item.id.toString()}
titleComponent={
<WalletLineItem
index={index + 1}
text={this._getTranslation(get(item, 'textKey'))}
description={getTimeFromNow(get(item, 'created'))}
isCircleIcon
isThin
isBlackText
iconName={get(item, 'icon')}
iconType={get(item, 'iconType')}
rightText={`${get(item, 'amount')} ESTM`}
/>
}
>
{(get(item, 'memo') || get(item, 'sender')) && (
<WalletLineItem
isBlackText
isThin
text={
get(item, 'sender')
? `${intl.formatMessage({ id: 'points.from' })} @${get(
item,
'sender',
)}`
: get(item, 'receiver') &&
`${intl.formatMessage({ id: 'points.to' })} @${get(
item,
'receiver',
)}`
}
description={get(item, 'memo')}
/>
)}
</CollapsibleCard>
)}
/>
</View>
</ScrollView>
)}
</ThemeContainer>
</Fragment>
);
}
}
export default withNavigation(injectIntl(PointsView));

27
src/components/popoverWrapper/popoverWrapperStyles.js Normal file
View File

@ -0,0 +1,27 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
popoverDetails: {
flexDirection: 'row',
height: 130,
width: '$deviceWidth / 2',
borderRadius: 20,
paddingHorizontal: 26,
backgroundColor: '$primaryBackgroundColor',
},
arrow: {
borderTopColor: '$primaryBackgroundColor',
},
popoverWrapper: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
overlay: {
backgroundColor: '#403c4449',
},
popoverText: {
color: '$primaryDarkText',
},
});

35
src/components/popoverWrapper/popoverWrapperView.js Normal file
View File

@ -0,0 +1,35 @@
import React, { Fragment } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Popover, PopoverController } from 'react-native-modal-popover';
import styles from './popoverWrapperStyles';
const PopoverWrapper = ({ children, text }) => {
return (
<PopoverController>
{({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => (
<Fragment>
<TouchableOpacity ref={setPopoverAnchor} onPress={openPopover}>
{children}
</TouchableOpacity>
<Popover
backgroundStyle={styles.overlay}
contentStyle={styles.popoverDetails}
arrowStyle={styles.arrow}
visible={popoverVisible}
onClose={() => closePopover()}
fromRect={popoverAnchorRect}
placement="top"
supportedOrientations={['portrait', 'landscape']}
>
<View style={styles.popoverWrapper}>
<Text style={styles.popoverText}>{text}</Text>
</View>
</Popover>
</Fragment>
)}
</PopoverController>
);
};
export { PopoverWrapper };

2
src/components/posts/view/postsStyles.js
View File

@ -25,7 +25,7 @@ export default EStyleSheet.create({
alignContent: 'center', alignContent: 'center',
alignItems: 'center', alignItems: 'center',
marginTop: 10, marginTop: 10,
marginBottom: 40, marginBottom: 60,
borderColor: '$borderColor', borderColor: '$borderColor',
}, },
noImage: { noImage: {

1
src/components/posts/view/postsView.js
View File

@ -160,6 +160,7 @@ const PostsView = ({
setIsLoading(false); setIsLoading(false);
return; return;
} }
setIsLoading(true);
const filter = type || selectedFilterValue; const filter = type || selectedFilterValue;
let options; let options;

5
src/components/productItemLine/productItemLineView.js
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { View, Text } from 'react-native'; import { View, Text } from 'react-native';
import get from 'lodash/get'; import get from 'lodash/get';
import { useIntl } from 'react-intl';
// Components // Components
import { MainButton, Icon } from '..'; import { MainButton, Icon } from '..';
@ -12,10 +11,8 @@ import styles from './productItemLineStyles';
const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' }; const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' };
const ProductItemLineView = ({ disabled, handleOnButtonPress, product, title }) => { const ProductItemLineView = ({ disabled, handleOnButtonPress, product, title }) => {
const intl = useIntl();
return ( return (
<View style={styles.boostLine} key={get(product, 'productId')}> <View style={styles.boostLine} key={get(product, 'productId').toString()}>
{_renderDeal(product)} {_renderDeal(product)}
<View style={styles.buttonWrapper}> <View style={styles.buttonWrapper}>
<MainButton <MainButton

35
src/components/transaction/container/transactionContainer.js
View File

@ -1,35 +0,0 @@
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
// Component
import TransactionView from '../view/transactionView';
/**
* Props Name Description Value
* @props --> intl Function for language support function
* @props --> walletData User wallet data object
*
*/
class TransactionContainer extends PureComponent {
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycle Functions
// Component Functions
render() {
const { walletData, steemPerMVests } = this.props;
return <TransactionView walletData={walletData} steemPerMVests={steemPerMVests} />;
}
}
const mapStateToProps = state => ({
steemPerMVests: state.account.globalProps.steemPerMVests,
});
export default connect(mapStateToProps)(TransactionContainer);

5
src/components/transaction/index.js
View File

@ -1,5 +1,4 @@
import TransactionView from './view/transactionView'; import Transaction from './transactionView';
import Transaction from './container/transactionContainer';
export { TransactionView, Transaction }; export { Transaction };
export default Transaction; export default Transaction;

96
src/components/transaction/transactionView.js Normal file
View File

@ -0,0 +1,96 @@
/* eslint-disable react/jsx-wrap-multilines */
import React from 'react';
import { useIntl } from 'react-intl';
import { View, Text, FlatList, RefreshControl } from 'react-native';
import get from 'lodash/get';
// Utilities
import { getTimeFromNow } from '../../utils/time';
// Components
import { WalletLineItem, ListPlaceHolder } from '../basicUIElements';
import { CollapsibleCard } from '..';
import { ThemeContainer } from '../../containers';
import globalStyles from '../../globalStyles';
const TransactionView = ({ transactions, type, refreshing, setRefreshing, isLoading }) => {
const intl = useIntl();
const _renderLoading = () => {
if (isLoading) {
return <ListPlaceHolder />;
}
return (
<Text style={globalStyles.hintText}>{intl.formatMessage({ id: 'wallet.no_activity' })}</Text>
);
};
const refreshControl = () => (
<ThemeContainer>
{isDarkTheme => (
<RefreshControl
refreshing={refreshing}
onRefresh={() => setRefreshing(true)}
progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
);
const _renderItem = (item, index) => {
return (
<CollapsibleCard
key={item.created.toString()}
noBorder
noContainer
titleComponent={
<WalletLineItem
key={item.created.toString()}
index={index + 1}
text={intl.formatMessage({
id: `wallet.${get(item, 'textKey')}`,
})}
description={getTimeFromNow(get(item, 'created'))}
isCircleIcon
isThin
circleIconColor="white"
isBlackText
iconName={get(item, 'icon')}
iconType={get(item, 'iconType')}
rightText={get(item, 'value', '').trim()}
/>
}
>
{(get(item, 'details') || get(item, 'memo')) && (
<WalletLineItem
key={index.toString()}
text={get(item, 'details', '')}
isBlackText
isThin
description={get(item, 'memo')}
/>
)}
</CollapsibleCard>
);
};
return (
<View style={globalStyles.listWrapper}>
<FlatList
data={transactions}
style={globalStyles.tabBarBottom}
ListEmptyComponent={_renderLoading()}
onRefresh={refreshControl}
refreshing={refreshing}
renderItem={({ item, index }) => _renderItem(item, index)}
/>
</View>
);
};
export default TransactionView;

7
src/components/transaction/view/transactionStyles.js
View File

@ -1,7 +0,0 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
marginTop: 8,
},
});

103
src/components/transaction/view/transactionView.js
View File

@ -1,103 +0,0 @@
/* eslint-disable react/jsx-wrap-multilines */
import React, { PureComponent } from 'react';
import { injectIntl } from 'react-intl';
import { View } from 'react-native';
import get from 'lodash/get';
// Utilities
import { groomingTransactionData } from '../../../utils/wallet';
import { getTimeFromNow } from '../../../utils/time';
// Components
// import { FilterBar } from '../../filterBar';
import { WalletLineItem, Card } from '../../basicUIElements';
import { CollapsibleCard } from '../../collapsibleCard';
import styles from './transactionStyles';
class TransactionView extends PureComponent {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
// _handleOnDropdownSelect = () => {};
render() {
const {
walletData: { transactions },
intl,
intl: { formatNumber },
steemPerMVests,
} = this.props;
return (
<View style={styles.container}>
{/* this feature not implemented yet */}
{/* <FilterBar
dropdownIconName="arrow-drop-down"
options={['ALL TRANSACTIONS', 'VOTES', 'REPLIES']}
defaultText="ALL TRANSACTIONS"
onDropdownSelect={() => this._handleOnDropdownSelect()}
rightIconName="ios-lock"
iconSize={16}
/> */}
<Card>
{transactions &&
transactions.map((item, index) => {
const transactionData = groomingTransactionData(item, steemPerMVests, formatNumber);
if (transactionData.length === 0) return null;
const value = transactionData.value.trim().split(' ');
return (
<CollapsibleCard
noBorder
noContainer
key={transactionData.transDate.toString()}
titleComponent={
<WalletLineItem
key={transactionData.transDate.toString()}
index={index}
text={intl.formatMessage({
id: `wallet.${transactionData.opName}`,
})}
// description={intl.formatRelative(transactionData.transDate)}
description={getTimeFromNow(get(transactionData, 'transDate'))}
isCircleIcon
isThin
circleIconColor="white"
isBlackText
iconName={transactionData.icon}
iconType="MaterialIcons"
rightText={transactionData.value.trim()}
/>
}
>
{(get(transactionData, 'details') || get(transactionData, 'memo')) && (
<WalletLineItem
key={index.toString()}
text={get(transactionData, 'details', '')}
isBlackText
isThin
description={get(transactionData, 'memo')}
/>
)}
</CollapsibleCard>
);
})}
</Card>
</View>
);
}
}
export default injectIntl(TransactionView);

14
src/components/upvote/view/upvoteView.js
View File

@ -8,6 +8,7 @@ import get from 'lodash/get';
// Utils // Utils
import parseToken from '../../../utils/parseToken'; import parseToken from '../../../utils/parseToken';
import { vestsToRshares } from '../../../utils/conversions'; import { vestsToRshares } from '../../../utils/conversions';
import { getEstimatedAmount } from '../../../utils/vote';
// Components // Components
import { Icon } from '../../icon'; import { Icon } from '../../icon';
@ -71,20 +72,9 @@ class UpvoteView extends Component {
if (currentAccount && Object.entries(currentAccount).length !== 0) { if (currentAccount && Object.entries(currentAccount).length !== 0) {
const { sliderValue } = this.state; const { sliderValue } = this.state;
const { fundRecentClaims, fundRewardBalance, base, quote } = globalProps;
const votingPower = currentAccount.voting_power;
const totalVests =
parseToken(get(currentAccount, 'vesting_shares')) +
parseToken(get(currentAccount, 'received_vesting_shares')) -
parseToken(get(currentAccount, 'delegated_vesting_shares'));
const votePct = sliderValue * 10000;
const rShares = vestsToRshares(totalVests, votingPower, votePct);
const estimated = (rShares / fundRecentClaims) * fundRewardBalance * (base / quote);
this.setState({ this.setState({
amount: estimated.toFixed(5), amount: getEstimatedAmount(currentAccount, globalProps, sliderValue),
}); });
} }
}; };

4
src/components/userAvatar/view/userAvatarView.js
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import styles from './userAvatarStyles'; import styles from './userAvatarStyles';
import NavigationService from '../../../navigation/service'; import { navigate } from '../../../navigation/service';
// Constants // Constants
import ROUTES from '../../../constants/routeNames'; import ROUTES from '../../../constants/routeNames';
@ -35,7 +35,7 @@ class UserAvatarView extends Component {
const routeName = name === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE; const routeName = name === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE;
NavigationService.navigate({ navigate({
routeName: routeName, routeName: routeName,
params: { params: {
username, username,

164
src/components/wallet/container/walletContainer.js
View File

@ -1,164 +0,0 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import { toastNotification } from '../../../redux/actions/uiAction';
// Dsteem
import { getAccount, claimRewardBalance } from '../../../providers/steem/dsteem';
// Utils
import { groomingWalletData } from '../../../utils/wallet';
import parseToken from '../../../utils/parseToken';
// Component
import WalletView from '../view/walletView';
/*
* Props Name Description Value
* @props --> currentAccountUsername description here Value Type Here
@ props --> selectedUsername
@ props --> walletData
*
*/
class WalletContainer extends Component {
constructor(props) {
super(props);
this.state = {
walletData: null,
isClaiming: false,
isRefreshing: false,
};
}
componentDidMount() {
const { selectedUser } = this.props;
this._getWalletData(selectedUser);
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { selectedUser } = this.props;
if (selectedUser.name !== nextProps.selectedUser.name) {
this._getWalletData(nextProps.selectedUser);
}
}
// Components functions
_getWalletData = async selectedUser => {
const { setEstimatedWalletValue, globalProps } = this.props;
const walletData = await groomingWalletData(selectedUser, globalProps);
this.setState({ walletData });
setEstimatedWalletValue(walletData.estimatedValue);
};
_isHasUnclaimedRewards = account =>
parseToken(account.reward_steem_balance) > 0 ||
parseToken(account.reward_sbd_balance) > 0 ||
parseToken(account.reward_vesting_steem) > 0;
_claimRewardBalance = async () => {
const { currentAccount, intl, pinCode, dispatch } = this.props;
const { isClaiming } = this.state;
let isHasUnclaimedRewards;
if (isClaiming) {
return;
}
await this.setState({ isClaiming: true });
getAccount(currentAccount.name)
.then(account => {
isHasUnclaimedRewards = this._isHasUnclaimedRewards(account[0]);
if (isHasUnclaimedRewards) {
const {
reward_steem_balance: steemBal,
reward_sbd_balance: sbdBal,
reward_vesting_balance: vestingBal,
} = account[0];
return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
}
this.setState({ isClaiming: false });
})
.then(() => getAccount(currentAccount.name))
.then(account => {
this._getWalletData(account && account[0]);
if (isHasUnclaimedRewards) {
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.claim_reward_balance_ok',
}),
),
);
}
})
.then(account => {
this._getWalletData(account && account[0]);
this.setState({ isClaiming: false });
})
.catch(() => {
this.setState({ isClaiming: false });
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.fail',
}),
),
);
});
};
_handleOnWalletRefresh = () => {
const { selectedUser, dispatch, intl } = this.props;
this.setState({ isRefreshing: true });
getAccount(selectedUser.name)
.then(account => {
this._getWalletData(account && account[0]);
this.setState({ isRefreshing: false });
})
.catch(() => {
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.fail',
}),
),
);
this.setState({ isRefreshing: false });
});
};
render() {
const { currentAccount, selectedUser, handleOnScroll } = this.props;
const { walletData, isClaiming, isRefreshing } = this.state;
return (
<WalletView
currentAccountUsername={currentAccount.name}
selectedUsername={selectedUser && selectedUser.name}
walletData={walletData}
claimRewardBalance={this._claimRewardBalance}
isClaiming={isClaiming}
handleOnWalletRefresh={this._handleOnWalletRefresh}
isRefreshing={isRefreshing}
handleOnScroll={handleOnScroll}
/>
);
}
}
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
pinCode: state.application.pin,
globalProps: state.account.globalProps,
});
export default injectIntl(connect(mapStateToProps)(WalletContainer));

5
src/components/wallet/index.js
View File

@ -1,5 +1,4 @@
import WalletView from './view/walletView'; import Wallet from './view/walletView';
import Wallet from './container/walletContainer';
export { WalletView, Wallet }; export { Wallet };
export default Wallet; export default Wallet;

65
src/components/wallet/view/walletView.js
View File

@ -1,7 +1,7 @@
/* eslint-disable react/jsx-wrap-multilines */ /* eslint-disable react/jsx-wrap-multilines */
import React, { PureComponent, Fragment } from 'react'; import React, { Fragment } from 'react';
import { View, Text, ScrollView, RefreshControl } from 'react-native'; import { View, Text, ScrollView, RefreshControl } from 'react-native';
import { injectIntl } from 'react-intl'; import { useIntl } from 'react-intl';
// Components // Components
import { Icon } from '../../icon'; import { Icon } from '../../icon';
@ -9,28 +9,16 @@ import { MainButton } from '../../mainButton';
import { CollapsibleCard } from '../../collapsibleCard'; import { CollapsibleCard } from '../../collapsibleCard';
import { WalletDetails } from '../../walletDetails'; import { WalletDetails } from '../../walletDetails';
import { Transaction } from '../../transaction'; import { Transaction } from '../../transaction';
import { WalletDetailsPlaceHolder } from '../../basicUIElements'; import { WalletDetailsPlaceHolder, Card } from '../../basicUIElements';
import { ThemeContainer } from '../../../containers'; import { ThemeContainer, SteemWalletContainer } from '../../../containers';
// Styles // Styles
import styles from './walletStyles'; import styles from './walletStyles';
class WalletView extends PureComponent { const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) => {
/* Props const intl = useIntl();
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) { const _getUnclaimedText = (walletData, isPreview) => (
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
_getUnclaimedText = (walletData, isPreview) => (
<Text style={[isPreview ? styles.unclaimedTextPreview : styles.unclaimedText]}> <Text style={[isPreview ? styles.unclaimedTextPreview : styles.unclaimedText]}>
{walletData.rewardSteemBalance {walletData.rewardSteemBalance
? `${Math.round(walletData.rewardSteemBalance * 1000) / 1000} STEEM` ? `${Math.round(walletData.rewardSteemBalance * 1000) / 1000} STEEM`
@ -44,20 +32,22 @@ class WalletView extends PureComponent {
</Text> </Text>
); );
render() { return (
const { <SteemWalletContainer
setEstimatedWalletValue={setEstimatedWalletValue}
selectedUser={selectedUser}
handleOnScroll={handleOnScroll}
>
{({
isClaiming, isClaiming,
claimRewardBalance, claimRewardBalance,
currentAccountUsername, currentAccountUsername,
handleOnWalletRefresh, handleOnWalletRefresh,
intl, refreshing,
isRefreshing,
selectedUsername, selectedUsername,
walletData, walletData,
handleOnScroll, userActivities,
} = this.props; }) => (
return (
<ThemeContainer> <ThemeContainer>
{isDarkTheme => ( {isDarkTheme => (
<ScrollView <ScrollView
@ -65,7 +55,7 @@ class WalletView extends PureComponent {
style={styles.scrollView} style={styles.scrollView}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={isRefreshing} refreshing={refreshing}
onRefresh={handleOnWalletRefresh} onRefresh={handleOnWalletRefresh}
progressBackgroundColor="#357CE6" progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'} tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
@ -99,14 +89,14 @@ class WalletView extends PureComponent {
onPress={() => claimRewardBalance()} onPress={() => claimRewardBalance()}
> >
<View style={styles.mainButtonWrapper}> <View style={styles.mainButtonWrapper}>
{this._getUnclaimedText(walletData)} {_getUnclaimedText(walletData)}
<View style={styles.mainIconWrapper}> <View style={styles.mainIconWrapper}>
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} /> <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
</View> </View>
</View> </View>
</MainButton> </MainButton>
) : ( ) : (
this._getUnclaimedText(walletData, true) _getUnclaimedText(walletData, true)
)} )}
</CollapsibleCard> </CollapsibleCard>
)} )}
@ -123,14 +113,21 @@ class WalletView extends PureComponent {
isShowDropdowns={currentAccountUsername === selectedUsername} isShowDropdowns={currentAccountUsername === selectedUsername}
/> />
</CollapsibleCard> </CollapsibleCard>
<Transaction walletData={walletData} /> <Card>
<Transaction
refreshing={refreshing}
type="wallet"
transactions={userActivities}
/>
</Card>
</Fragment> </Fragment>
)} )}
</ScrollView> </ScrollView>
)} )}
</ThemeContainer> </ThemeContainer>
)}
</SteemWalletContainer>
); );
} };
}
export default injectIntl(WalletView); export default WalletView;

18
src/components/walletDetails/view/walletDetailsView.js
View File

@ -1,4 +1,4 @@
import React, { PureComponent } from 'react'; import React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
// Components // Components
@ -10,14 +10,7 @@ import { vestsToSp } from '../../../utils/conversions';
// Styles // Styles
import styles from './walletDetailsStyles'; import styles from './walletDetailsStyles';
class WalletDetailsView extends PureComponent { const WalletDetailsView = ({ walletData, intl, navigate, isShowDropdowns }) => {
// Component Life Cycles
// Component Functions
render() {
const { walletData, intl, navigate, isShowDropdowns } = this.props;
const steemDropdown = ['transfer_token', 'transfer_to_saving', 'powerUp']; const steemDropdown = ['transfer_token', 'transfer_to_saving', 'powerUp'];
const sbdDropdown = ['transfer_token', 'transfer_to_saving']; const sbdDropdown = ['transfer_token', 'transfer_to_saving'];
const savingSteemDropdown = ['withdraw_steem']; const savingSteemDropdown = ['withdraw_steem'];
@ -33,9 +26,7 @@ class WalletDetailsView extends PureComponent {
rightText={`${Math.round(walletData.balance * 1000) / 1000} STEEM`} rightText={`${Math.round(walletData.balance * 1000) / 1000} STEEM`}
isBoldText isBoldText
isHasdropdown={isShowDropdowns} isHasdropdown={isShowDropdowns}
dropdownOptions={steemDropdown.map(item => dropdownOptions={steemDropdown.map(item => intl.formatMessage({ id: `transfer.${item}` }))}
intl.formatMessage({ id: `transfer.${item}` }),
)}
onDropdownSelect={index => navigate(steemDropdown[index], 'STEEM')} onDropdownSelect={index => navigate(steemDropdown[index], 'STEEM')}
/> />
<GrayWrapper isGray> <GrayWrapper isGray>
@ -133,7 +124,6 @@ class WalletDetailsView extends PureComponent {
)} )}
</View> </View>
); );
} };
}
export default WalletDetailsView; export default WalletDetailsView;

3
src/components/walletHeader/index.js Normal file
View File

@ -0,0 +1,3 @@
import WalletHeader from './view/walletHeaderView';
export { WalletHeader };

80
src/components/walletHeader/view/walletHeaderStyles.js Normal file
View File

@ -0,0 +1,80 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
balanceText: {
color: '$primaryBlue',
fontSize: 26,
marginTop: 24,
justifyContent: 'center',
alignSelf: 'center',
fontWeight: 'bold',
},
balanceWrapper: {
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',
},
dropdownRowText: {
fontSize: 14,
color: '$primaryDarkGray',
textAlign: 'center',
},
dropdownRowStyle: {
marginLeft: 0,
},
dropdownButtonStyle: {
justifyContent: 'center',
alignSelf: 'center',
position: 'absolute',
right: -40,
top: 20,
},
subText: {
color: '$darkIconColor',
fontSize: 8,
justifyContent: 'center',
alignSelf: 'center',
marginTop: 5,
},
icon: {
fontSize: 24,
color: '$primaryDarkText',
},
mainButton: {
marginVertical: 8,
alignSelf: 'center',
paddingHorizontal: 24,
},
mainButtonWrapper: {
flexDirection: 'row',
},
unclaimedText: {
color: '$pureWhite',
fontSize: 14,
fontWeight: 'bold',
alignSelf: 'center',
},
mainIconWrapper: {
backgroundColor: '$pureWhite',
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginLeft: 20,
width: 24,
height: 24,
},
scrollContainer: {
flex: 0.935,
width: '100%',
backgroundColor: '$primaryBackgroundColor',
},
scrollContentContainer: {
paddingBottom: 60,
},
valueDescriptions: {
marginLeft: -30,
marginTop: 20,
marginBottom: -10,
},
});

117
src/components/walletHeader/view/walletHeaderView.js Normal file
View File

@ -0,0 +1,117 @@
/* eslint-disable react/jsx-wrap-multilines */
import React, { useRef, Fragment, useEffect } from 'react';
import { Text, View } from 'react-native';
import { useIntl } from 'react-intl';
import { withNavigation } from 'react-navigation';
import get from 'lodash/get';
// Components
import { Icon, MainButton, DropdownButton, HorizontalIconList, WalletLineItem } from '../..';
// Constants
import POINTS, { POINTS_KEYS } from '../../../constants/options/points';
import { default as ROUTES } from '../../../constants/routeNames';
// Styles
import styles from './walletHeaderStyles';
const WalletHeaderView = ({
claim,
isClaiming,
handleOnDropdownSelected,
navigation,
unclaimedBalance,
userBalance,
type = '',
componentDidUpdate,
showIconList,
currentIndex,
valueDescriptions,
showBuyButton,
index,
}) => {
const intl = useIntl();
const dropdownRef = useRef();
useEffect(() => {
if (index === currentIndex) {
componentDidUpdate();
}
}, [componentDidUpdate, currentIndex, index]);
const _getBalanceItem = (balance, options, key) =>
balance !== undefined && (
<View style={styles.balanceWrapper}>
<Text style={styles.balanceText}>{balance}</Text>
<DropdownButton
dropdownRowWrapper={styles.dropdownRowStyle}
dropdownRef={dropdownRef}
isHasChildIcon
iconName="arrow-drop-down"
options={options.map(itemKey => intl.formatMessage({ id: `wallet.${itemKey}` }))}
noHighlight
dropdownButtonStyle={styles.dropdownButtonStyle}
onSelect={selectedIndex => handleOnDropdownSelected(options[selectedIndex])}
rowTextStyle={styles.dropdownRowText}
dropdownStyle={styles.dropdownStyle}
iconStyle={styles.dropdownIconStyle}
/>
<Text style={styles.subText}>{intl.formatMessage({ id: `wallet.${key}.title` })}</Text>
</View>
);
return (
<Fragment>
<View style={styles.scrollContainer} contentContainerStyle={styles.scrollContentContainer}>
{userBalance.map(item =>
_getBalanceItem(
get(item, 'balance', 0),
get(item, 'options', []),
get(item, 'nameKey', 'estm'),
),
)}
{showBuyButton && (
<MainButton
isLoading={isClaiming}
isDisable={isClaiming}
style={styles.mainButton}
height={50}
onPress={() => (unclaimedBalance ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST))}
>
<View style={styles.mainButtonWrapper}>
<Text style={styles.unclaimedText}>
{unclaimedBalance
? unclaimedBalance
: intl.formatMessage({ id: `wallet.${type}.buy` })}
</Text>
<View style={styles.mainIconWrapper}>
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
</View>
</View>
</MainButton>
)}
{valueDescriptions &&
valueDescriptions.map(item => (
<WalletLineItem
fitContent
style={styles.valueDescriptions}
text={intl.formatMessage({ id: `wallet.${get(item, 'textKey')}` })}
hintDescription={
get(item, 'subTextKey') &&
intl.formatMessage({ id: `wallet.${get(item, 'subTextKey')}` })
}
rightText={get(item, 'value')}
hintIconName={get(item, 'subTextKey') && 'ios-information-circle-outline'}
isBlackText
isThin
/>
))}
{showIconList && <HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />}
</View>
</Fragment>
);
};
export default withNavigation(WalletHeaderView);

100
src/config/locales/en-US.json
View File

@ -8,36 +8,8 @@
"transfer_to_vesting": "Transfer To Vesting", "transfer_to_vesting": "Transfer To Vesting",
"transfer_from_savings": "Transfer From Savings", "transfer_from_savings": "Transfer From Savings",
"withdraw_vesting": "Power Down", "withdraw_vesting": "Power Down",
"fill_order": "Fill Order" "fill_order": "Fill Order",
},
"notification": {
"vote": "likes your post",
"unvote": "unvoted your post",
"reply": "replied to your post",
"mention": "mentioned you",
"follow": "followed you",
"unfollow": "unfollowed you",
"ignore": "ignored you",
"reblog": "reblogged your post",
"transfer": "transferred",
"notification": "Notifications",
"leaderboard": "Leaderboard",
"epoint": "Points",
"leaderboard_title": "Top Users",
"recent": "Recent",
"yesterday": "Yesterday",
"this_week": "This Week",
"this_month": "This Month",
"older_then": "Older Than A Month"
},
"leaderboard": {
"daily": "Daily",
"weekly": "Weekly",
"monthly": "Monthly"
},
"points": {
"post": "Post", "post": "Post",
"esteemPoints": "eSteem Points",
"comment": "Comment", "comment": "Comment",
"checkin": "Check-in", "checkin": "Check-in",
"vote": "Vote", "vote": "Vote",
@ -70,7 +42,68 @@
"dropdown_promote": "Promote", "dropdown_promote": "Promote",
"dropdown_boost": "Boost", "dropdown_boost": "Boost",
"from": "From", "from": "From",
"to": "To" "to": "To",
"estimated_value_desc": "Determined by purchase value",
"estimated_value": "Estimated value",
"estimated_amount": "Vote value",
"amount_information": "Drag the slider to adjust the amount",
"amount": "Amount",
"memo": "Memo",
"information": "Are you sure to transfer funds?",
"amount_desc": "Balance",
"memo_desc": "This memo is public",
"to_placeholder": "Username",
"memo_placeholder": "Enter your notes here",
"transfer_token": "Transfer",
"points": "Gift ESTM to someone",
"transfer_to_saving": "Transfer To Saving",
"powerUp": "Power Up",
"withdraw_to_saving": "Withdraw To Saving",
"steemconnect_title": "Steemconnect Transfer",
"next": "NEXT",
"delegate": "Delegate",
"power_down": "Power Down",
"withdraw_steem": "Withdraw Steem",
"withdraw_sbd": "Withdraw Steem Dollar",
"estm": {
"title": "eSteem Points",
"buy": "GET ESTM"
},
"saving": {
"title": "STEEM Savings"
},
"steem": {
"title": "STEEM",
"buy": "GET STEEM"
},
"steem_power": {
"title": "STEEM POWER"
}
},
"notification": {
"vote": "likes your post",
"unvote": "unvoted your post",
"reply": "replied to your post",
"mention": "mentioned you",
"follow": "followed you",
"unfollow": "unfollowed you",
"ignore": "ignored you",
"reblog": "reblogged your post",
"transfer": "transferred",
"notification": "Notifications",
"leaderboard": "Leaderboard",
"epoint": "Points",
"leaderboard_title": "Top Users",
"recent": "Recent",
"yesterday": "Yesterday",
"this_week": "This Week",
"this_month": "This Month",
"older_then": "Older Than A Month"
},
"leaderboard": {
"daily": "Daily",
"weekly": "Weekly",
"monthly": "Monthly"
}, },
"messages": { "messages": {
"comingsoon": "Messages feature is coming soon!" "comingsoon": "Messages feature is coming soon!"
@ -321,6 +354,13 @@
"powerUp": "Power Up", "powerUp": "Power Up",
"withdraw_to_saving": "Withdraw To Saving", "withdraw_to_saving": "Withdraw To Saving",
"steemconnect_title": "Steemconnect Transfer", "steemconnect_title": "Steemconnect Transfer",
"estimated_weekly": "Estimated Weekly",
"destination_accounts": "Destination Accounts",
"stop_information": "Are you sure want to stop?",
"percent": "Percent",
"auto_vests": "Auto Vests",
"save": "SAVE",
"percent_information": "Percent info",
"next": "NEXT", "next": "NEXT",
"delegate": "Delegate", "delegate": "Delegate",
"power_down": "Power Down", "power_down": "Power Down",

60
src/constants/options/points.js
View File

@ -1,81 +1,81 @@
export default { export default {
999: { 999: {
icon: 'compare-arrows', icon: 'compare-arrows',
textKey: 'points.incoming_transfer_title', textKey: 'incoming_transfer_title',
nameKey: 'points.incoming_transfer', nameKey: 'wallet.incoming_transfer',
descriptionKey: 'points.incoming_transfer_description', descriptionKey: 'wallet.incoming_transfer_description',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 0.1, point: 0.1,
}, },
998: { 998: {
icon: 'compare-arrows', icon: 'compare-arrows',
textKey: 'points.outgoing_transfer_title', textKey: 'outgoing_transfer_title',
nameKey: 'points.outgoing_transfer', nameKey: 'wallet.outgoing_transfer',
descriptionKey: 'points.outgoing_transfer_description', descriptionKey: 'wallet.outgoing_transfer_description',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 0.1, point: 0.1,
}, },
150: { 150: {
icon: 'local-activity', icon: 'local-activity',
textKey: 'points.delegation_title', textKey: 'delegation_title',
nameKey: 'points.delegation', nameKey: 'wallet.delegation',
descriptionKey: 'points.delegation_desc', descriptionKey: 'wallet.delegation_desc',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 1, point: 1,
}, },
100: { 100: {
icon: 'pencil', icon: 'pencil',
textKey: 'points.post_title', textKey: 'post_title',
nameKey: 'points.post', nameKey: 'wallet.post',
descriptionKey: 'points.post_desc', descriptionKey: 'wallet.post_desc',
iconType: 'MaterialCommunityIcons', iconType: 'MaterialCommunityIcons',
point: 15, point: 15,
}, },
110: { 110: {
icon: 'comment-text-outline', icon: 'comment-text-outline',
textKey: 'points.comment_title', textKey: 'comment_title',
nameKey: 'points.comment', nameKey: 'wallet.comment',
descriptionKey: 'points.comment_desc', descriptionKey: 'wallet.comment_desc',
iconType: 'MaterialCommunityIcons', iconType: 'MaterialCommunityIcons',
point: 5, point: 5,
}, },
120: { 120: {
icon: 'upcircleo', icon: 'upcircleo',
textKey: 'points.vote_title', textKey: 'vote_title',
nameKey: 'points.vote', nameKey: 'wallet.vote',
descriptionKey: 'points.vote_desc', descriptionKey: 'wallet.vote_desc',
iconType: 'AntDesign', iconType: 'AntDesign',
point: 0.3, point: 0.3,
}, },
130: { 130: {
icon: 'repeat', icon: 'repeat',
textKey: 'points.reblog_title', textKey: 'reblog_title',
nameKey: 'points.reblog', nameKey: 'wallet.reblog',
descriptionKey: 'points.reblog_desc', descriptionKey: 'wallet.reblog_desc',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 1, point: 1,
}, },
10: { 10: {
icon: 'favorite-border', icon: 'favorite-border',
textKey: 'points.checkin_title', textKey: 'checkin_title',
nameKey: 'points.checkin', nameKey: 'wallet.checkin',
descriptionKey: 'points.checkin_desc', descriptionKey: 'wallet.checkin_desc',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 0.25, point: 0.25,
}, },
20: { 20: {
icon: 'person-outline', icon: 'person-outline',
textKey: 'points.login_title', textKey: 'login_title',
nameKey: 'points.login', nameKey: 'wallet.login',
descriptionKey: 'points.login_desc', descriptionKey: 'wallet.login_desc',
iconType: 'MaterialIcons', iconType: 'MaterialIcons',
point: 100, point: 100,
}, },
30: { 30: {
icon: 'check-all', icon: 'check-all',
textKey: 'points.checkin_extra_title', textKey: 'checkin_extra_title',
nameKey: 'points.checkin_extra', nameKey: 'wallet.checkin_extra',
descriptionKey: 'points.checkin_extra_desc', descriptionKey: 'wallet.checkin_extra_desc',
iconType: 'MaterialCommunityIcons', iconType: 'MaterialCommunityIcons',
point: 10, point: 10,
}, },

2
src/constants/routeNames.js
View File

@ -31,7 +31,7 @@ export default {
TABBAR: { TABBAR: {
FEED: `Feed${TABBAR_SUFFIX}`, FEED: `Feed${TABBAR_SUFFIX}`,
NOTIFICATION: `Notification${TABBAR_SUFFIX}`, NOTIFICATION: `Notification${TABBAR_SUFFIX}`,
POINTS: `Points${TABBAR_SUFFIX}`, WALLET: `Wallet${TABBAR_SUFFIX}`,
POST_BUTTON: `PostButton${TABBAR_SUFFIX}`, POST_BUTTON: `PostButton${TABBAR_SUFFIX}`,
PROFILE: `Profile${TABBAR_SUFFIX}`, PROFILE: `Profile${TABBAR_SUFFIX}`,
}, },

8
src/containers/index.js
View File

@ -1,21 +1,25 @@
import AccountContainer from './accountContainer'; import AccountContainer from './accountContainer';
import InAppPurchaseContainer from './inAppPurchaseContainer'; import InAppPurchaseContainer from './inAppPurchaseContainer';
import LoggedInContainer from './loggedInContainer';
import PointsContainer from './pointsContainer'; import PointsContainer from './pointsContainer';
import ProfileContainer from './profileContainer'; import ProfileContainer from './profileContainer';
import ProfileEditContainer from './profileEditContainer'; import ProfileEditContainer from './profileEditContainer';
import RedeemContainer from './redeemContainer'; import RedeemContainer from './redeemContainer';
import SpinGameContainer from './spinGameContainer'; import SpinGameContainer from './spinGameContainer';
import TransferContainer from './transferContainer'; import SteemWalletContainer from './steemWalletContainer';
import ThemeContainer from './themeContainer'; import ThemeContainer from './themeContainer';
import TransferContainer from './transferContainer';
export { export {
AccountContainer, AccountContainer,
InAppPurchaseContainer, InAppPurchaseContainer,
LoggedInContainer,
PointsContainer, PointsContainer,
ProfileContainer, ProfileContainer,
ProfileEditContainer, ProfileEditContainer,
RedeemContainer, RedeemContainer,
SpinGameContainer, SpinGameContainer,
TransferContainer, SteemWalletContainer,
ThemeContainer, ThemeContainer,
TransferContainer,
}; };

40
src/containers/loggedInContainer.js Normal file
View File

@ -0,0 +1,40 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import { useIntl } from 'react-intl';
import { connect } from 'react-redux';
import ROUTES from '../constants/routeNames';
import { navigate } from '../navigation/service';
import { NoPost } from '../components';
const LoggedInContainer = ({ isLoggedIn, isLoginDone, children }) => {
const intl = useIntl();
if (!isLoggedIn) {
return (
<NoPost
style={{ flex: 1 }}
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={() => navigate(ROUTES.SCREENS.LOGIN)}
/>
);
}
return (
children &&
children({
isLoggedIn,
isLoginDone,
})
);
};
const mapStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn,
isLoginDone: state.application.isLoginDone,
});
export default connect(mapStateToProps)(LoggedInContainer);

190
src/containers/pointsContainer.js
View File

@ -1,8 +1,8 @@
import { Component } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { Alert } from 'react-native'; import { Alert } from 'react-native';
import { connect } from 'react-redux'; import { connect, useDispatch } from 'react-redux';
import get from 'lodash/get'; import get from 'lodash/get';
import { injectIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { withNavigation } from 'react-navigation'; import { withNavigation } from 'react-navigation';
// Services and Actions // Services and Actions
@ -18,63 +18,67 @@ import POINTS from '../constants/options/points';
// Constants // Constants
import ROUTES from '../constants/routeNames'; import ROUTES from '../constants/routeNames';
// Utils
import { groomingPointsTransactionData } from '../utils/wallet';
/* /*
* Props Name Description Value * Props Name Description Value
*@props --> props name here description here Value Type Here *@props --> props name here description here Value Type Here
* *
*/ */
class PointsContainer extends Component { const PointsContainer = ({
constructor(props) { username,
super(props); isConnected,
this.state = { navigation,
userPoints: {}, children,
userActivities: null, accounts,
refreshing: false, currentAccount,
isClaiming: false, user,
isLoading: true, activeBottomTab,
navigationParams: {}, isPinCodeOpen,
}; globalProps,
} pinCode,
}) => {
// Component Life Cycle Functions const [userPoints, setUserPoints] = useState({});
componentDidMount() { const [userActivities, setUserActivities] = useState(null);
const { username, isConnected, navigation } = this.props; const [refreshing, setRefreshing] = useState(false);
const [isClaiming, setIsClaiming] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [navigationParams, setNavigationParams] = useState({});
const [balance, setBalance] = useState(0);
const intl = useIntl();
const dispatch = useDispatch();
const fetchInterval = useCallback(() => setInterval(_fetchUserPointActivities, 6 * 60 * 1000), [
_fetchUserPointActivities,
]);
useEffect(() => {
if (isConnected) { if (isConnected) {
this._fetchUserPointActivities(username); _fetchUserPointActivities(username);
this.fetchInterval = setInterval(this._fetchUserPointActivities, 6 * 60 * 1000); fetchInterval();
} }
if (get(navigation, 'state.params', null)) { if (get(navigation, 'state.params', null)) {
const navigationParams = get(navigation, 'state.params'); const _navigationParams = get(navigation, 'state.params');
this.setState({ navigationParams }); setNavigationParams(_navigationParams);
}
} }
}, [_fetchUserPointActivities, fetchInterval, isConnected, navigation, username]);
UNSAFE_componentWillReceiveProps(nextProps) { useEffect(() => {
const { username } = this.props; if (isConnected && activeBottomTab === ROUTES.TABBAR.WALLET && username) {
const _username = get(nextProps, 'username'); _fetchUserPointActivities(username);
}
}, [isConnected, username, _fetchUserPointActivities, activeBottomTab]);
if ( useEffect(() => {
nextProps.isConnected && return clearInterval(fetchInterval);
((nextProps.activeBottomTab === ROUTES.TABBAR.POINTS && _username) || });
(_username !== username && _username))
) {
this._fetchUserPointActivities(_username);
}
}
componentWillUnmount() {
clearInterval(this.fetchInterval);
}
// Component Functions // Component Functions
_handleOnDropdownSelected = index => { const _handleOnDropdownSelected = index => {
const { dispatch, isPinCodeOpen, navigation } = this.props;
const { balance } = this.state;
let navigateTo; let navigateTo;
let navigateParams; let navigateParams;
@ -123,35 +127,36 @@ class PointsContainer extends Component {
} }
}; };
_groomUserActivities = userActivities => const _groomUserActivities = _userActivities =>
userActivities.map(item => ({ _userActivities.map(item =>
groomingPointsTransactionData({
...item, ...item,
icon: get(POINTS[get(item, 'type')], 'icon'), icon: get(POINTS[get(item, 'type')], 'icon'),
iconType: get(POINTS[get(item, 'type')], 'iconType'), iconType: get(POINTS[get(item, 'type')], 'iconType'),
textKey: get(POINTS[get(item, 'type')], 'textKey'), textKey: get(POINTS[get(item, 'type')], 'textKey'),
})); }),
);
_fetchUserPointActivities = async username => { const _fetchUserPointActivities = useCallback(async _username => {
if (!username) { if (!_username) {
return; return;
} }
this.setState({ refreshing: true }); setRefreshing(true);
await getUser(username) await getUser(_username)
.then(userPoints => { .then(userPoints => {
const balance = Math.round(get(userPoints, 'points') * 1000) / 1000; const _balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
this.setState({ userPoints, balance }); setUserPoints(userPoints);
setBalance(_balance);
}) })
.catch(err => { .catch(err => {
Alert.alert(get(err, 'message', 'Error')); Alert.alert(get(err, 'message', 'Error'));
}); });
await getUserPoints(username) await getUserPoints(_username)
.then(userActivities => { .then(userActivities => {
if (Object.entries(userActivities).length !== 0) { if (Object.entries(userActivities).length !== 0) {
this.setState({ setUserActivities(_groomUserActivities(userActivities));
userActivities: this._groomUserActivities(userActivities),
});
} }
}) })
.catch(err => { .catch(err => {
@ -160,17 +165,15 @@ class PointsContainer extends Component {
} }
}); });
this.setState({ setRefreshing(false);
refreshing: false, setIsLoading(false);
isLoading: false, }, []);
});
};
_getUserBalance = async username => { const _getUserBalance = async _username => {
await getUser(username) await getUser(_username)
.then(userPoints => { .then(_userPoints => {
const balance = Math.round(get(userPoints, 'points') * 1000) / 1000; const _balance = Math.round(get(_userPoints, 'points') * 1000) / 1000;
return balance; return _balance;
}) })
.catch(err => { .catch(err => {
if (err) { if (err) {
@ -179,14 +182,12 @@ class PointsContainer extends Component {
}); });
}; };
_claimPoints = async () => { const _claimPoints = async () => {
const { username } = this.props; setIsClaiming(true);
this.setState({ isClaiming: true });
await claim(username) await claim(username)
.then(() => { .then(() => {
this._fetchUserPointActivities(username); _fetchUserPointActivities(username);
}) })
.catch(error => { .catch(error => {
if (error) { if (error) {
@ -199,62 +200,47 @@ class PointsContainer extends Component {
} }
}); });
this.setState({ isClaiming: false }); setIsClaiming(false);
}; };
_boost = async (point, permlink, author, user) => { const _boost = async (point, permlink, author, _user) => {
const { currentAccount, pinCode, dispatch, intl, navigation } = this.props; setIsLoading(true);
this.setState({ isLoading: true });
await boost(user || currentAccount, pinCode, point, permlink, author) await boost(_user || currentAccount, pinCode, point, permlink, author)
.then(() => { .then(() => {
this.setState({ isLoading: false }); setIsLoading(false);
navigation.goBack(); navigation.goBack();
dispatch(toastNotification(intl.formatMessage({ id: 'alert.successful' }))); dispatch(toastNotification(intl.formatMessage({ id: 'alert.successful' })));
}) })
.catch(error => { .catch(error => {
if (error) { if (error) {
this.setState({ isLoading: false }); setIsLoading(false);
dispatch(toastNotification(intl.formatMessage({ id: 'alert.fail' }))); dispatch(toastNotification(intl.formatMessage({ id: 'alert.fail' })));
} }
}); });
}; };
_getESTMPrice = points => { const _getESTMPrice = points => {
const { globalProps } = this.props;
const { base, quote } = globalProps; const { base, quote } = globalProps;
return points * 0.01 * (base / quote); return points * 0.01 * (base / quote);
}; };
render() {
const {
balance,
isClaiming,
isLoading,
navigationParams,
refreshing,
userActivities,
userPoints,
} = this.state;
const { children, accounts, currentAccount } = this.props;
return ( return (
children && children &&
children({ children({
accounts, accounts,
balance, balance,
boost: this._boost, boost: _boost,
claimPoints: this._claimPoints, claim: _claimPoints,
currentAccount, currentAccount,
currentAccountName: currentAccount.name, currentAccountName: currentAccount.name,
fetchUserActivity: this._fetchUserPointActivities, fetchUserActivity: _fetchUserPointActivities,
getAccount, getAccount,
getESTMPrice: this._getESTMPrice, getESTMPrice: _getESTMPrice,
getUserBalance: this._getUserBalance, getUserBalance: _getUserBalance,
getUserDataWithUsername, getUserDataWithUsername,
handleOnDropdownSelected: this._handleOnDropdownSelected, handleOnDropdownSelected: _handleOnDropdownSelected,
handleOnPressTransfer: this._handleOnPressTransfer,
isClaiming, isClaiming,
isLoading, isLoading,
navigationParams, navigationParams,
@ -262,12 +248,14 @@ class PointsContainer extends Component {
userActivities, userActivities,
userPoints, userPoints,
redeemType: get(navigationParams, 'redeemType'), redeemType: get(navigationParams, 'redeemType'),
user,
dropdownOptions: ['dropdown_transfer', 'dropdown_promote', 'dropdown_boost'],
}) })
); );
} };
}
const mapStateToProps = state => ({ const mapStateToProps = state => ({
user: state.account.currentAccount,
username: state.account.currentAccount.name, username: state.account.currentAccount.name,
activeBottomTab: state.ui.activeBottomTab, activeBottomTab: state.ui.activeBottomTab,
isConnected: state.application.isConnected, isConnected: state.application.isConnected,
@ -278,4 +266,4 @@ const mapStateToProps = state => ({
globalProps: state.account.globalProps, globalProps: state.account.globalProps,
}); });
export default withNavigation(connect(mapStateToProps)(injectIntl(PointsContainer))); export default withNavigation(connect(mapStateToProps)(PointsContainer));

275
src/containers/steemWalletContainer.js Normal file
View File

@ -0,0 +1,275 @@
import React, { useState, useEffect, useCallback } from 'react';
import { connect } from 'react-redux';
import { useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import get from 'lodash/get';
import { toastNotification } from '../redux/actions/uiAction';
// Dsteem
import { getAccount, claimRewardBalance } from '../providers/steem/dsteem';
// Actions
import { openPinCodeModal } from '../redux/actions/applicationActions';
// Utils
import { groomingWalletData, groomingTransactionData } from '../utils/wallet';
import parseToken from '../utils/parseToken';
import { vestsToSp } from '../utils/conversions';
import { navigate } from '../navigation/service';
import { getEstimatedAmount } from '../utils/vote';
// Constants
import ROUTES from '../constants/routeNames';
const STEEM_DROPDOWN = ['transfer_token', 'transfer_to_saving', 'powerUp'];
const SBD_DROPDOWN = ['transfer_token', 'transfer_to_saving'];
const SAVING_STEEM_DROPDOWN = ['withdraw_steem'];
const SAVING_SBD_DROPDOWN = ['withdraw_sbd'];
const STEEM_POWER_DROPDOWN = ['delegate', 'power_down'];
const WalletContainer = ({
children,
currentAccount,
globalProps,
handleOnScroll,
pinCode,
selectedUser,
setEstimatedWalletValue,
steemPerMVests,
isPinCodeOpen,
}) => {
const [isClaiming, setIsClaiming] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [walletData, setWalletData] = useState(null);
const [userActivities, setUserActivities] = useState([]);
const [sbdBalance, setSbdBalance] = useState(0);
const [steemBalance, setSteemBalance] = useState(0);
const [spBalance, setSpBalance] = useState(0);
const [steemSavingBalance, setSteemSavingBalance] = useState(0);
const [estimatedValue, setEstimatedValue] = useState(0);
const [unclaimedBalance, setUnclaimedBalance] = useState('');
const [estimatedAmount, setEstimatedAmount] = useState(0);
const [transferHistory, setTransferHistory] = useState([]);
const intl = useIntl();
const dispatch = useDispatch();
useEffect(() => {
setEstimatedAmount(getEstimatedAmount(currentAccount, globalProps));
}, [currentAccount, globalProps]);
useEffect(() => {
_getWalletData(selectedUser);
}, [_getWalletData, selectedUser]);
useEffect(() => {
_getWalletData(selectedUser);
}, [_getWalletData, selectedUser]);
useEffect(() => {
const _transferHistory = userActivities.filter(
item => get(item, 'textKey') === 'transfer' || get(item, 'textKey') === 'transfer_to_vesting',
);
setTransferHistory(_transferHistory);
setSbdBalance(Math.round(get(walletData, 'sbdBalance', 0) * 1000) / 1000);
setSteemBalance(Math.round(get(walletData, 'balance', 0) * 1000) / 1000);
setSteemSavingBalance(Math.round(get(walletData, 'savingBalance', 0) * 1000) / 1000);
setSpBalance(
Math.round(
vestsToSp(get(walletData, 'vestingShares', 0), get(walletData, 'steemPerMVests', 0)) * 1000,
) / 1000,
);
setEstimatedValue(get(walletData, 'estimatedValue', 0));
setUnclaimedBalance(
`${
get(walletData, 'rewardSteemBalance', 0)
? `${Math.round(get(walletData, 'rewardSteemBalance', 0) * 1000) / 1000} STEEM`
: ''
}
${
get(walletData, 'rewardSbdBalance', 0)
? ` ${Math.round(get(walletData, 'rewardSbdBalance', 0) * 1000) / 1000} SBD`
: ''
}
${
get(walletData, 'rewardVestingSteem', 0)
? ` ${Math.round(get(walletData, 'rewardVestingSteem', 0) * 1000) / 1000} SP`
: ''
}`,
);
}, [userActivities, walletData]);
// Components functions
const _getWalletData = useCallback(
async _selectedUser => {
const _walletData = await groomingWalletData(_selectedUser, globalProps);
setWalletData(_walletData);
setIsLoading(false);
setUserActivities(
get(_walletData, 'transactions', []).map(item =>
groomingTransactionData(item, steemPerMVests, intl.formatNumber),
),
);
setEstimatedWalletValue && setEstimatedWalletValue(_walletData.estimatedValue);
},
[globalProps, intl.formatNumber, setEstimatedWalletValue, steemPerMVests],
);
const _isHasUnclaimedRewards = account => {
return (
parseToken(get(account, 'reward_steem_balance')) > 0 ||
parseToken(get(account, 'reward_sbd_balance')) > 0 ||
parseToken(get(account, 'reward_vesting_steem')) > 0
);
};
const _claimRewardBalance = async () => {
let isHasUnclaimedRewards;
if (isClaiming) {
return;
}
await setIsClaiming(true);
getAccount(currentAccount.name)
.then(account => {
isHasUnclaimedRewards = _isHasUnclaimedRewards(account[0]);
if (isHasUnclaimedRewards) {
const {
reward_steem_balance: steemBal,
reward_sbd_balance: sbdBal,
reward_vesting_balance: vestingBal,
} = account[0];
return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
}
setIsClaiming(false);
})
.then(() => getAccount(currentAccount.name))
.then(account => {
_getWalletData(selectedUser);
if (isHasUnclaimedRewards) {
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.claim_reward_balance_ok',
}),
),
);
}
})
.then(account => {
_getWalletData(selectedUser);
setIsClaiming(false);
})
.catch(() => {
setIsClaiming(false);
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.fail',
}),
),
);
});
};
const _handleOnWalletRefresh = () => {
setRefreshing(true);
getAccount(selectedUser.name)
.then(account => {
_getWalletData(selectedUser);
setRefreshing(false);
})
.catch(() => {
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.fail',
}),
),
);
setRefreshing(false);
});
};
const _navigate = async (transferType, fundType) => {
let balance;
switch (fundType) {
case 'STEEM':
balance = Math.round(walletData.balance * 1000) / 1000;
break;
case 'SBD':
balance = Math.round(walletData.sbdBalance * 1000) / 1000;
break;
case 'SAVING_STEEM':
balance = Math.round(walletData.savingBalance * 1000) / 1000;
break;
case 'SAVING_SBD':
balance = Math.round(walletData.savingBalanceSbd * 1000) / 1000;
break;
default:
break;
}
if (isPinCodeOpen) {
dispatch(
openPinCodeModal({
navigateTo: ROUTES.SCREENS.TRANSFER,
navigateParams: { transferType, fundType, balance },
}),
);
} else {
navigate({
routeName: ROUTES.SCREENS.TRANSFER,
params: { transferType, fundType, balance },
});
}
};
return (
children &&
children({
claimRewardBalance: _claimRewardBalance,
currentAccountUsername: currentAccount.name,
handleOnWalletRefresh: _handleOnWalletRefresh,
isClaiming: isClaiming,
refreshing: refreshing,
selectedUsername: get(selectedUser, 'name', ''),
isLoading,
walletData,
steemPerMVests,
userActivities,
transferHistory,
steemBalance,
spBalance,
sbdBalance,
steemSavingBalance,
estimatedValue,
navigate: _navigate,
steemDropdown: STEEM_DROPDOWN,
sbdDropdown: SBD_DROPDOWN,
savingSteemDropdown: SAVING_STEEM_DROPDOWN,
savingSbdDropdown: SAVING_SBD_DROPDOWN,
steemPowerDropdown: STEEM_POWER_DROPDOWN,
unclaimedBalance: unclaimedBalance && unclaimedBalance.trim(),
estimatedAmount,
})
);
};
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
pinCode: state.application.pin,
globalProps: state.account.globalProps,
steemPerMVests: state.account.globalProps.steemPerMVests,
isPinCodeOpen: state.application.isPinCodeOpen,
});
export default connect(mapStateToProps)(WalletContainer);

14
src/globalStyles.js
View File

@ -7,6 +7,12 @@ export default EStyleSheet.create({
}, },
defaultContainer: { defaultContainer: {
flex: 1, flex: 1,
backgroundColor: '$primaryLightBackground',
},
listWrapper: {
paddingHorizontal: 8,
backgroundColor: '$primaryBackgroundColor',
flex: 1.7,
}, },
text: { text: {
fontFamily: '$primaryFont', fontFamily: '$primaryFont',
@ -65,4 +71,12 @@ export default EStyleSheet.create({
alignSelf: 'center', alignSelf: 'center',
backgroundColor: '$primaryBackgroundColor', backgroundColor: '$primaryBackgroundColor',
}, },
swipeItemWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
tabBarBottom: {
marginBottom: 60,
},
}); });

6
src/navigation/baseNavigator.js
View File

@ -6,7 +6,7 @@ import ROUTES from '../constants/routeNames';
// Components // Components
import { Icon, IconContainer } from '../components/icon'; import { Icon, IconContainer } from '../components/icon';
import { Feed, Notification, Profile, Points } from '../screens'; import { Feed, Notification, Profile, Wallet } from '../screens';
import { PostButton, BottomTabBar } from '../components'; import { PostButton, BottomTabBar } from '../components';
const BaseNavigator = createBottomTabNavigator( const BaseNavigator = createBottomTabNavigator(
@ -40,8 +40,8 @@ const BaseNavigator = createBottomTabNavigator(
tabBarIcon: ({ tintColor }) => <PostButton />, tabBarIcon: ({ tintColor }) => <PostButton />,
}, },
}, },
[ROUTES.TABBAR.POINTS]: { [ROUTES.TABBAR.WALLET]: {
screen: Points, screen: Wallet,
navigationOptions: () => ({ navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => ( tabBarIcon: ({ tintColor }) => (
<Icon iconType="MaterialCommunityIcons" name="gift-outline" color={tintColor} size={26} /> <Icon iconType="MaterialCommunityIcons" name="gift-outline" color={tintColor} size={26} />

5
src/navigation/service.js
View File

@ -16,7 +16,4 @@ const navigate = navigationProps => {
// add other navigation functions that you need and export them // add other navigation functions that you need and export them
export default { export { navigate, setTopLevelNavigator };
navigate,
setTopLevelNavigator,
};

6
src/screens/application/container/applicationContainer.js
View File

@ -38,7 +38,7 @@ import {
import { getUser, getPost } from '../../../providers/steem/dsteem'; import { getUser, getPost } from '../../../providers/steem/dsteem';
import { switchAccount } from '../../../providers/steem/auth'; import { switchAccount } from '../../../providers/steem/auth';
import { setPushToken } from '../../../providers/esteem/esteem'; import { setPushToken } from '../../../providers/esteem/esteem';
import NavigationService from '../../../navigation/service'; import { navigate } from '../../../navigation/service';
// Actions // Actions
import { import {
@ -261,7 +261,7 @@ class ApplicationContainer extends Component {
if (routeName && (profile || content)) { if (routeName && (profile || content)) {
this.navigationTimeout = setTimeout(() => { this.navigationTimeout = setTimeout(() => {
clearTimeout(this.navigationTimeout); clearTimeout(this.navigationTimeout);
NavigationService.navigate({ navigate({
routeName, routeName,
params, params,
key: permlink || author, key: permlink || author,
@ -401,7 +401,7 @@ class ApplicationContainer extends Component {
} }
if (!some(params, isEmpty)) { if (!some(params, isEmpty)) {
NavigationService.navigate({ navigate({
routeName, routeName,
params, params,
key, key,

8
src/screens/application/index.js
View File

@ -8,13 +8,15 @@ import { Modal } from '../../components';
import { PinCode } from '../pinCode'; import { PinCode } from '../pinCode';
const Application = () => { const Application = () => {
const [showAnimation, setShowAnimation] = useState(true); const [showAnimation, setShowAnimation] = useState(process.env.NODE_ENV !== 'development');
useEffect(() => { useEffect(() => {
if (!showAnimation) {
setTimeout(() => { setTimeout(() => {
setShowAnimation(false); setShowAnimation(false);
}, 500); }, 2000);
}, []); }
}, [showAnimation]);
return ( return (
<ApplicationContainer> <ApplicationContainer>

4
src/screens/application/screen/applicationScreen.js
View File

@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { createAppContainer } from 'react-navigation'; import { createAppContainer } from 'react-navigation';
import AppNavitation from '../../../navigation/routes'; import AppNavitation from '../../../navigation/routes';
import NavigationService from '../../../navigation/service'; import { setTopLevelNavigator } from '../../../navigation/service';
// Services // Services
import { toastNotification as toastNotificationAction } from '../../../redux/actions/uiAction'; import { toastNotification as toastNotificationAction } from '../../../redux/actions/uiAction';
@ -62,7 +62,7 @@ class ApplicationScreen extends Component {
{!isConnected && <NoInternetConnection />} {!isConnected && <NoInternetConnection />}
<Navigation <Navigation
ref={navigatorRef => { ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef); setTopLevelNavigator(navigatorRef);
}} }}
/> />
</Fragment> </Fragment>

4
src/screens/index.js
View File

@ -7,7 +7,7 @@ import { Launch } from './launch';
import { Login } from './login'; import { Login } from './login';
import { Notification } from './notification'; import { Notification } from './notification';
import { PinCode } from './pinCode'; import { PinCode } from './pinCode';
import { Points } from './points'; import { Wallet } from './wallet';
import { Post } from './post'; import { Post } from './post';
import { SearchResult } from './searchResult'; import { SearchResult } from './searchResult';
import { Settings } from './settings'; import { Settings } from './settings';
@ -32,7 +32,7 @@ export {
Login, Login,
Notification, Notification,
PinCode, PinCode,
Points, Wallet,
Post, Post,
Profile, Profile,
ProfileEdit, ProfileEdit,

2
src/screens/launch/screen/launchStyles.js
View File

@ -6,9 +6,11 @@ export default EStyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: '$pureWhite', backgroundColor: '$pureWhite',
zIndex: 999,
}, },
darkContainer: { darkContainer: {
flex: 1, flex: 1,
zIndex: 999,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: '#1e2835', backgroundColor: '#1e2835',

17
src/screens/notification/screen/notificationScreen.js
View File

@ -4,7 +4,8 @@ import ScrollableTabView from 'react-native-scrollable-tab-view';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
// Components // Components
import { TabBar, LeaderBoard, Notification, Header, NoPost } from '../../../components'; import { TabBar, LeaderBoard, Notification, Header } from '../../../components';
import { LoggedInContainer } from '../../../containers';
// Styles // Styles
import styles from './notificationStyles'; import styles from './notificationStyles';
@ -23,8 +24,6 @@ class NotificationScreen extends PureComponent {
intl, intl,
navigateToNotificationRoute, navigateToNotificationRoute,
readAllNotification, readAllNotification,
handleLoginPress,
isLoggedIn,
isNotificationRefreshing, isNotificationRefreshing,
changeSelectedFilter, changeSelectedFilter,
} = this.props; } = this.props;
@ -45,7 +44,8 @@ class NotificationScreen extends PureComponent {
})} })}
style={styles.tabbarItem} style={styles.tabbarItem}
> >
{isLoggedIn ? ( <LoggedInContainer>
{() => (
<Notification <Notification
getActivities={getActivities} getActivities={getActivities}
notifications={notifications} notifications={notifications}
@ -54,15 +54,8 @@ class NotificationScreen extends PureComponent {
isNotificationRefreshing={isNotificationRefreshing} isNotificationRefreshing={isNotificationRefreshing}
changeSelectedFilter={changeSelectedFilter} changeSelectedFilter={changeSelectedFilter}
/> />
) : (
<NoPost
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={handleLoginPress}
/>
)} )}
</LoggedInContainer>
</View> </View>
<View <View
tabLabel={intl.formatMessage({ tabLabel={intl.formatMessage({

12
src/screens/pinCode/container/pinCodeContainer.js
View File

@ -6,7 +6,7 @@ import Config from 'react-native-config';
import get from 'lodash/get'; import get from 'lodash/get';
// Actions & Services // Actions & Services
import NavigationService from '../../../navigation/service'; import { navigate } from '../../../navigation/service';
import { import {
setUserDataWithPinCode, setUserDataWithPinCode,
verifyPinCode, verifyPinCode,
@ -113,7 +113,7 @@ class PinCodeContainer extends Component {
} }
dispatch(closePinCodeModal()); dispatch(closePinCodeModal());
if (navigateTo) { if (navigateTo) {
NavigationService.navigate({ navigate({
routeName: navigateTo, routeName: navigateTo,
params: navigateParams, params: navigateParams,
}); });
@ -176,7 +176,7 @@ class PinCodeContainer extends Component {
} }
dispatch(closePinCodeModal()); dispatch(closePinCodeModal());
if (navigateTo) { if (navigateTo) {
NavigationService.navigate({ navigate({
routeName: navigateTo, routeName: navigateTo,
params: navigateParams, params: navigateParams,
}); });
@ -213,9 +213,11 @@ class PinCodeContainer extends Component {
[_currentAccount.local] = realmData; [_currentAccount.local] = realmData;
dispatch(updateCurrentAccount({ ..._currentAccount })); dispatch(updateCurrentAccount({ ..._currentAccount }));
dispatch(closePinCodeModal()); dispatch(closePinCodeModal());
if (callback) callback(pin, oldPinCode); if (callback) {
callback(pin, oldPinCode);
}
if (navigateTo) { if (navigateTo) {
NavigationService.navigate({ navigate({
routeName: navigateTo, routeName: navigateTo,
params: navigateParams, params: navigateParams,
}); });

22
src/screens/points/container/pointsContainer.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import { connect } from 'react-redux';
// Component
import PointsScreen from '../screen/pointsScreen';
// Constants
import ROUTES from '../../../constants/routeNames';
const PointsContainer = ({ isLoggedIn, navigation }) => {
const _handleOnPressLogin = () => {
navigation.navigate(ROUTES.SCREENS.LOGIN);
};
return <PointsScreen isLoggedIn={isLoggedIn} handleLoginPress={_handleOnPressLogin} />;
};
const matStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn,
});
export default connect(matStateToProps)(PointsContainer);

5
src/screens/points/index.js
View File

@ -1,5 +0,0 @@
import PointsScreen from './screen/pointsScreen';
import Points from './container/pointsContainer';
export { PointsScreen, Points };
export default Points;

60
src/screens/points/screen/pointsScreen.js
View File

@ -1,60 +0,0 @@
import React, { Fragment } from 'react';
import { useIntl } from 'react-intl';
import { SafeAreaView } from 'react-native';
// Containers
import { PointsContainer } from '../../../containers';
// Components
import { Header, Points, NoPost } from '../../../components';
// Styles
import styles from './pointsStyles';
const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
const intl = useIntl();
return (
<Fragment>
<Header />
<SafeAreaView style={styles.container}>
{isLoggedIn ? (
<PointsContainer>
{({
handleOnDropdownSelected,
claimPoints,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
}) => (
<Points
claimPoints={claimPoints}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
userPoints={userPoints}
handleOnDropdownSelected={handleOnDropdownSelected}
/>
)}
</PointsContainer>
) : (
<NoPost
style={styles.noPostContainer}
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={handleLoginPress}
/>
)}
</SafeAreaView>
</Fragment>
);
};
export default PointsScreen;

19
src/screens/points/screen/pointsStyles.js
View File

@ -1,19 +0,0 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
backgroundColor: '$primaryLightBackground',
},
image: {
width: 193,
height: 189,
},
text: {
color: '#788187',
fontWeight: 'bold',
},
noPostContainer: {
flex: 1,
},
});

1
src/screens/transfer/screen/transferStyles.js
View File

@ -174,6 +174,7 @@ export default EStyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: '$primaryBackgroundColor',
}, },
checkView: { checkView: {
flexDirection: 'row', flexDirection: 'row',

4
src/screens/wallet/index.js Normal file
View File

@ -0,0 +1,4 @@
import Wallet from './screen/walletScreen';
export { Wallet };
export default Wallet;

50
src/screens/wallet/screen/estmView.js Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import get from 'lodash/get';
import { View } from 'react-native';
import { WalletHeader } from '../../../components';
import { PointsContainer } from '../../../containers';
import globalStyles from '../../../globalStyles';
const EstmView = ({ handleOnSelected, index, currentIndex }) => (
<View style={globalStyles.swipeItemWrapper}>
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
dropdownOptions,
}) => (
<WalletHeader
componentDidUpdate={() => handleOnSelected(userActivities, isLoading, fetchUserActivity)}
index={index}
showIconList
claim={claim}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
unclaimedBalance={
get(userPoints, 'unclaimed_points') > 0 && get(userPoints, 'unclaimed_points')
}
userBalance={[
{ balance: get(userPoints, 'points'), nameKey: 'estm', options: dropdownOptions },
]}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
currentIndex={currentIndex}
showBuyButton
/>
)}
</PointsContainer>
</View>
);
export default EstmView;

64
src/screens/wallet/screen/spView.js Normal file
View File

@ -0,0 +1,64 @@
import React from 'react';
import { View } from 'react-native';
import { WalletHeader, FormatedCurrency } from '../../../components';
import { SteemWalletContainer, AccountContainer } from '../../../containers';
import globalStyles from '../../../globalStyles';
const SpView = ({ handleOnSelected, index, currentIndex }) => (
<View style={globalStyles.swipeItemWrapper}>
<AccountContainer>
{({ currentAccount }) => (
<SteemWalletContainer selectedUser={currentAccount}>
{({
isClaiming,
claimRewardBalance,
handleOnWalletRefresh,
refreshing,
userActivities,
spBalance,
isLoading,
estimatedValue,
steemPowerDropdown,
unclaimedBalance,
navigate,
estimatedAmount,
}) => (
<WalletHeader
componentDidUpdate={() => handleOnSelected(userActivities, isLoading)}
index={index}
claim={claimRewardBalance}
fetchUserActivity={handleOnWalletRefresh}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
unclaimedBalance={unclaimedBalance}
showBuyButton={unclaimedBalance.length > 0}
userBalance={[
{ balance: spBalance, nameKey: 'steem_power', options: steemPowerDropdown },
]}
handleOnDropdownSelected={option => navigate(option, 'STEEM_POWER')}
type="steem_power"
currentIndex={currentIndex}
showIconList={false}
valueDescriptions={[
{
textKey: 'estimated_value',
value: <FormatedCurrency isApproximate value={estimatedValue} />,
},
{
textKey: 'estimated_amount',
value: <FormatedCurrency isApproximate value={estimatedAmount} />,
},
]}
/>
)}
</SteemWalletContainer>
)}
</AccountContainer>
</View>
);
export default SpView;

60
src/screens/wallet/screen/steemView.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { View } from 'react-native';
import { WalletHeader, FormatedCurrency } from '../../../components';
import { SteemWalletContainer, AccountContainer } from '../../../containers';
import globalStyles from '../../../globalStyles';
const SteeemView = ({ handleOnSelected, index, currentIndex }) => (
<View style={globalStyles.swipeItemWrapper}>
<AccountContainer>
{({ currentAccount }) => (
<SteemWalletContainer selectedUser={currentAccount}>
{({
isClaiming,
claimRewardBalance,
handleOnWalletRefresh,
refreshing,
transferHistory,
steemBalance,
isLoading,
steemSavingBalance,
estimatedValue,
steemDropdown,
savingSteemDropdown,
navigate,
}) => (
<WalletHeader
componentDidUpdate={() => handleOnSelected(transferHistory, isLoading)}
index={index}
claim={claimRewardBalance}
fetchUserActivity={handleOnWalletRefresh}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
unclaimedBalance={0}
userBalance={[
{ balance: steemBalance, nameKey: 'steem', options: steemDropdown },
{ balance: steemSavingBalance, nameKey: 'saving', options: savingSteemDropdown },
]}
handleOnDropdownSelected={option => navigate(option, 'STEEM')}
type="steem"
currentIndex={currentIndex}
showIconList={false}
valueDescriptions={[
{
textKey: 'estimated_value',
value: <FormatedCurrency isApproximate value={estimatedValue} />,
subTextKey: 'estimated_value_desc',
},
]}
/>
)}
</SteemWalletContainer>
)}
</AccountContainer>
</View>
);
export default SteeemView;

75
src/screens/wallet/screen/walletScreen.js Normal file
View File

@ -0,0 +1,75 @@
import React, { Fragment, useState } from 'react';
import Swiper from 'react-native-swiper';
import { SafeAreaView, View } from 'react-native';
// Containers
import { LoggedInContainer } from '../../../containers';
// Components
import { Header, Transaction } from '../../../components';
import EstmView from './estmView';
import SteemView from './steemView';
import SpView from './spView';
// Styles
import globalStyles from '../../../globalStyles';
const WalletScreen = () => {
const [selectedUserActivities, setSelectedUserActivities] = useState(null);
const [isLoading, setIsLoading] = useState('points');
const [currentIndex, setCurrentIndex] = useState(0);
const [refreshing, setRefreshing] = useState(false);
const _handleSwipeItemChange = (userActivities, _isLoading) => {
setSelectedUserActivities(userActivities);
setIsLoading(_isLoading);
};
return (
<Fragment>
<Header />
<SafeAreaView style={globalStyles.defaultContainer}>
<LoggedInContainer>
{() => (
<>
<Swiper
loop={false}
showsPagination={true}
index={0}
onIndexChanged={index => setCurrentIndex(index)}
>
<EstmView
index={0}
handleOnSelected={_handleSwipeItemChange}
refreshing={refreshing}
currentIndex={currentIndex}
/>
<SteemView
index={1}
handleOnSelected={_handleSwipeItemChange}
refreshing={refreshing}
currentIndex={currentIndex}
/>
<SpView
index={2}
refreshing={refreshing}
handleOnSelected={_handleSwipeItemChange}
currentIndex={currentIndex}
/>
</Swiper>
<Transaction
type="wallet"
transactions={selectedUserActivities}
refreshing={refreshing}
setRefreshing={setRefreshing}
isLoading={isLoading}
/>
</>
)}
</LoggedInContainer>
</SafeAreaView>
</Fragment>
);
};
export default WalletScreen;

16
src/utils/vote.js Normal file
View File

@ -0,0 +1,16 @@
import parseToken from './parseToken';
import get from 'lodash/get';
import { vestsToRshares } from './conversions';
export const getEstimatedAmount = (account, globalProps, value = 100) => {
const { fundRecentClaims, fundRewardBalance, base, quote } = globalProps;
const votingPower = account.voting_power;
const totalVests =
parseToken(get(account, 'vesting_shares')) +
parseToken(get(account, 'received_vesting_shares')) -
parseToken(get(account, 'delegated_vesting_shares'));
const votePct = value * 10000;
const rShares = vestsToRshares(totalVests, votingPower, votePct);
return ((rShares / fundRecentClaims) * fundRewardBalance * (base / quote)).toFixed(5);
};

26
src/utils/wallet.js
View File

@ -2,6 +2,7 @@ import get from 'lodash/get';
import parseDate from './parseDate'; import parseDate from './parseDate';
import parseToken from './parseToken'; import parseToken from './parseToken';
import { vestsToSp } from './conversions'; import { vestsToSp } from './conversions';
import ss from 'react-intl';
import { getState, getFeedHistory } from '../providers/steem/dsteem'; import { getState, getFeedHistory } from '../providers/steem/dsteem';
export const groomingTransactionData = (transaction, steemPerMVests, formatNumber) => { export const groomingTransactionData = (transaction, steemPerMVests, formatNumber) => {
@ -9,16 +10,16 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
return []; return [];
} }
const result = {}; let result = { iconType: 'MaterialIcons' };
[result.opName] = transaction[1].op; [result.textKey] = transaction[1].op;
const opData = transaction[1].op[1]; const opData = transaction[1].op[1];
const { timestamp } = transaction[1]; const { timestamp } = transaction[1];
result.transDate = timestamp; result.created = timestamp;
result.icon = 'local-activity'; result.icon = 'local-activity';
switch (result.opName) { switch (result.textKey) {
case 'curation_reward': case 'curation_reward':
const { reward } = opData; const { reward } = opData;
const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData; const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData;
@ -55,7 +56,7 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
} ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`; } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`;
result.details = author && permlink ? `@${author}/${permlink}` : null; result.details = author && permlink ? `@${author}/${permlink}` : null;
if (result.opName === 'comment_benefactor_reward') { if (result.textKey === 'comment_benefactor_reward') {
result.icon = 'comment'; result.icon = 'comment';
} }
break; break;
@ -167,3 +168,18 @@ export const groomingWalletData = async (user, globalProps) => {
return walletData; return walletData;
}; };
export const groomingPointsTransactionData = transaction => {
if (!transaction) {
return null;
}
let result = { ...transaction };
result.details = get(transaction, 'sender')
? `from @${get(transaction, 'sender')}`
: get(transaction, 'receiver') && `to @${get(transaction, 'receiver')}`;
result.value = `${get(transaction, 'amount')} ESTM`;
return result;
};

7
yarn.lock
View File

@ -7641,6 +7641,13 @@ react-native-svg@^9.5.3:
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.11.1.tgz#b1ccf48de413ff8c4f476f202aaa3893f4c8b59a" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.11.1.tgz#b1ccf48de413ff8c4f476f202aaa3893f4c8b59a"
integrity sha512-BmNCM81SSzhj1+N5rYiy7sxrkmybgiT8Cu8yVRB7zVoWze/i1lbCWJah+Gk0OHHwR35ZA31oVKf5jtO4G1n94Q== integrity sha512-BmNCM81SSzhj1+N5rYiy7sxrkmybgiT8Cu8yVRB7zVoWze/i1lbCWJah+Gk0OHHwR35ZA31oVKf5jtO4G1n94Q==
react-native-swiper@^1.5.14:
version "1.5.14"
resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.14.tgz#1c6f949ca377186300f972bb0f30d24062c899aa"
integrity sha512-Kn0fxKooN7Shwu1qJYHB+Y8ssXXnvrIwReHXU5jCdyYNfz2QbBv0Cv3sa2Mqzr+XgzORCFFIokc8uCCUITDrVA==
dependencies:
prop-types "^15.5.10"
react-native-tab-view@^2.9.0: react-native-tab-view@^2.9.0:
version "2.10.0" version "2.10.0"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.10.0.tgz#5e249e5650502010013449ffd4e5edc18a95364b" resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.10.0.tgz#5e249e5650502010013449ffd4e5edc18a95364b"