diff --git a/src/components/basicUIElements/view/grayWrapper/grayWrapperView.js b/src/components/basicUIElements/view/grayWrapper/grayWrapperView.js index 9f3a77b99..e6b573841 100644 --- a/src/components/basicUIElements/view/grayWrapper/grayWrapperView.js +++ b/src/components/basicUIElements/view/grayWrapper/grayWrapperView.js @@ -2,6 +2,6 @@ import React from 'react'; import { View } from 'react-native'; import styles from './grayWrapperStyles'; -const GrayWrapper = ({ children }) => {children}; +const GrayWrapper = ({ children, isGray }) => (isGray ? {children} : children); export default GrayWrapper; diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js index 398eb428a..f687ce476 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js @@ -55,6 +55,8 @@ export default EStyleSheet.create({ color: '$primaryBlue', fontSize: 14, fontWeight: '600', + maxWidth: '$deviceWidth / 2.5', + textAlign: 'center', }, thinText: { fontSize: 14, diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js index e632960b5..ba14cd9a4 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js @@ -1,64 +1,79 @@ import React from 'react'; import { View, Text } from 'react-native'; +import { GrayWrapper } from '../..'; -import IconComp from '../../../icon'; +import { Icon } from '../../../icon'; +import { CollapsibleCard } from '../../../collapsibleCard'; import styles from './walletLineItemStyles'; const WalletLineItem = ({ - text, - textColor, - iconName, - iconType, - rightText, - rightTextColor, - isBoldText, - isThin, - isCircleIcon, circleIconColor, description, fitContent, + iconName, + iconType, + isBlackText, + isBoldText, + isCircleIcon, + isThin, + rightText, + rightTextColor, + text, + textColor, + index, }) => ( - - - {iconName && ( - - + + + + {iconName && ( + + + + )} + + {text && ( + + + {text} + + + )} + {description && ( + {description} + )} + + + {rightText && ( + + + {rightText} + )} - - - {text} - - {description && {description}} - - - - {rightText} - - - + ); export default WalletLineItem; diff --git a/src/components/collapsibleCard/view/collapsibleCardView.js b/src/components/collapsibleCard/view/collapsibleCardView.js index 8a3b9661a..125c2071f 100644 --- a/src/components/collapsibleCard/view/collapsibleCardView.js +++ b/src/components/collapsibleCard/view/collapsibleCardView.js @@ -11,12 +11,12 @@ import styles from './collapsibleCardStyles'; class CollapsibleCardView extends Component { /* Props - * ------------------------------------------------ - * @prop { type } expanded - For is collapsible open or close declaration prop. - * @prop { type } children - Render include children - * @prop { type } title - Collapsible title. - * - */ + * ------------------------------------------------ + * @prop { type } expanded - For is collapsible open or close declaration prop. + * @prop { type } children - Render include children + * @prop { type } title - Collapsible title. + * + */ anime = { height: new Animated.Value(), expanded: false, @@ -70,6 +70,7 @@ class CollapsibleCardView extends Component { fitContent, isTitleCenter, style, + noContainer, } = this.props; const { expanded } = this.state; @@ -96,7 +97,7 @@ class CollapsibleCardView extends Component { style={[styles.content, { height: this.anime.height }]} onLayout={e => this._initContentHeight(e)} > - {children} + {children} ); diff --git a/src/components/transaction/container/transactionContainer.js b/src/components/transaction/container/transactionContainer.js index 5ca9a216e..d56c2ed4b 100644 --- a/src/components/transaction/container/transactionContainer.js +++ b/src/components/transaction/container/transactionContainer.js @@ -1,22 +1,14 @@ import React, { Component } from 'react'; -// import { connect } from 'react-redux'; - -// Services and Actions - -// Middleware - -// Constants - -// Utilities // Component import { TransactionView } from '..'; -/* -* Props Name Description Value -*@props --> props name here description here Value Type Here -* -*/ +/** + * Props Name Description Value + * @props --> intl Function for language support function + * @props --> walletData User wallet data object + * + */ class TransactionContainer extends Component { constructor(props) { @@ -29,15 +21,10 @@ class TransactionContainer extends Component { // Component Functions render() { - // eslint-disable-next-line - //const {} = this.props; + const { intl, walletData } = this.props; - return ; + return ; } } -// const mapStateToProps = state => ({ -// user: state.user.user, -// }); - export default TransactionContainer; diff --git a/src/components/transaction/view/transactionView.js b/src/components/transaction/view/transactionView.js index 3bf6b4e58..c62ba637b 100644 --- a/src/components/transaction/view/transactionView.js +++ b/src/components/transaction/view/transactionView.js @@ -1,21 +1,19 @@ -import React, { Component } from 'react'; -import { View } from 'react-native'; +import React, { Component, Fragment } from 'react'; import { injectIntl } from 'react-intl'; // Utilities -import parseToken from '../../../utils/parseToken'; -import parseDate from '../../../utils/parseDate'; -import { vestsToSp } from '../../../utils/conversions'; +import { getTransactionData } from '../../../utils/wallet'; // Components -import { FilterBar } from '../../filterBar'; -import { GrayWrapper, WalletLineItem, Card } from '../../basicUIElements'; +// import { FilterBar } from '../../filterBar'; +import { WalletLineItem, Card } from '../../basicUIElements'; +import { CollapsibleCard } from '../../collapsibleCard'; class TransactionView extends Component { /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ + * ------------------------------------------------ + * @prop { type } name - Description.... + */ constructor(props) { super(props); @@ -27,100 +25,16 @@ class TransactionView extends Component { // Component Functions _handleOnDropdownSelect = () => {}; - _getTransactionData = (transaction) => { - const { walletData, intl: { formatNumber } } = this.props; - const result = {}; - - // eslint-disable-next-line - result.opName = transaction[1].op[0]; - const opData = transaction[1].op[1]; - const { timestamp } = transaction[1]; - - result.transDate = parseDate(timestamp); - result.icon = 'local-activity'; - - switch (result.opName) { - case 'curation_reward': - const { reward } = opData; - const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData; - - result.value = `${formatNumber(vestsToSp(parseToken(reward), walletData.steemPerMVests), { minimumFractionDigits: 3 })} SP`; - result.details = `@${commentAuthor}/${commentPermlink}`; - break; - case 'author_reward': - case 'comment_benefactor_reward': - let { - sbd_payout: sbdPayout, - steem_payout: steemPayout, - vesting_payout: vestingPayout, - } = opData; - - const { author, permlink } = opData; - - sbdPayout = formatNumber(parseToken(sbdPayout), { minimumFractionDigits: 3 }); - steemPayout = formatNumber(parseToken(steemPayout), { minimumFractionDigits: 3 }); - vestingPayout = formatNumber(vestsToSp(parseToken(vestingPayout), walletData.steemPerMVests), { minimumFractionDigits: 3 }); - - result.value = `${sbdPayout > 0 ? `${sbdPayout} SBD` : ''} ${ - steemPayout > 0 ? `${steemPayout} steemPayout` : '' - } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`; - - result.details = `@${author}/${permlink}`; - if (result.opName === 'comment_benefactor_reward') { - result.icon = 'comment'; - } - break; - case 'claim_reward_balance': - let { - reward_sbd: rewardSdb, - reward_steem: rewardSteem, - reward_vests: rewardVests, - } = opData; - - rewardSdb = formatNumber(parseToken(rewardSdb), { minimumFractionDigits: 3 }); - rewardSteem = formatNumber(parseToken(rewardSteem), { minimumFractionDigits: 3 }); - rewardVests = formatNumber(vestsToSp(parseToken(rewardVests), walletData.steemPerMVests), { minimumFractionDigits: 3 }); - - result.value = `${rewardSdb > 0 ? `${rewardSdb} SBD` : ''} ${ - rewardSteem > 0 ? `${rewardSteem} STEEM` : '' - } ${rewardVests > 0 ? `${rewardVests} SP` : ''}`; - break; - case 'transfer': - case 'transfer_to_vesting': - const { - amount, memo, from, to, - } = opData; - - result.value = `${amount}`; - result.icon = 'compare-arrows'; - // details = {memo}

@{from} -> @{to}; - break; - case 'withdraw_vesting': - const { acc } = opData; - let { vesting_shares: opVestingShares } = opData; - - opVestingShares = parseToken(opVestingShares); - result.value = `${formatNumber(vestsToSp(opVestingShares, walletData.steemPerMVests), { minimumFractionDigits: 3 })} SP`; - result.icon = 'money'; - // details = @{acc}; - break; - case 'fill_order': - const { current_pays: currentPays, open_pays: openPays } = opData; - - result.value = `${currentPays} = ${openPays}`; - result.icon = 'reorder'; - break; - default: - break; - } - return result; - }; - render() { - const { walletData: { transactions }, intl } = this.props; + const { + walletData: { transactions }, + intl, + intl: { formatNumber }, + walletData, + } = this.props; return ( - + {/* this feature not implemented yet */} {/* this._handleOnDropdownSelect()} rightIconName="ios-lock" iconSize={16} + if (index % 2 === 0) { /> */} {transactions && transactions.map((item, index) => { - const transactionData = this._getTransactionData(item); - if (index % 2 === 0) { - return ( - - ); - } + const transactionData = getTransactionData(item, walletData, formatNumber); + return ( - - - + +)} + > + {(!!transactionData.details || !!transactionData.memo) && ( + + )} + ); })} - + ); } } diff --git a/src/components/wallet/view/walletStyles.js b/src/components/wallet/view/walletStyles.js index bbe65119f..ab786715f 100644 --- a/src/components/wallet/view/walletStyles.js +++ b/src/components/wallet/view/walletStyles.js @@ -1,9 +1,6 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ - container: { - paddingBottom: 20, - }, // First collabsible component mainButton: { marginBottom: 12, diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index 63ca3db59..5d25b3e0d 100644 --- a/src/components/wallet/view/walletView.js +++ b/src/components/wallet/view/walletView.js @@ -9,7 +9,7 @@ import { MainButton } from '../../mainButton'; import { CollapsibleCard } from '../../collapsibleCard'; import { WalletDetails } from '../../walletDetails'; import { Transaction } from '../../transaction'; -import { WalletDetailsPlaceHolder, WalletUnclaimedPlaceHolder } from '../../basicUIElements'; +import { WalletDetailsPlaceHolder } from '../../basicUIElements'; // Styles import styles from './walletStyles'; @@ -45,61 +45,57 @@ class WalletView extends Component { render() { const { - walletData, intl, selectedUsername, currentAccountUsername, + currentAccountUsername, intl, selectedUsername, walletData, } = this.props; return ( - - - {!walletData ? ( - - - - - ) : ( - - {walletData.hasUnclaimedRewards && ( - - {currentAccountUsername === selectedUsername ? ( - - - {this._getUnclaimedText(walletData)} - - - - - - ) : ( - this._getUnclaimedText(walletData, true) - )} - - )} + + {!walletData ? ( + + + + ) : ( + + {walletData.hasUnclaimedRewards && ( - + {currentAccountUsername === selectedUsername ? ( + + + {this._getUnclaimedText(walletData)} + + + + + + ) : ( + this._getUnclaimedText(walletData, true) + )} - - - )} - - + )} + + + + + + )} + ); } } diff --git a/src/components/walletDetails/container/walletDetailsContainer.js b/src/components/walletDetails/container/walletDetailsContainer.js index 59bdcd905..793844ee1 100644 --- a/src/components/walletDetails/container/walletDetailsContainer.js +++ b/src/components/walletDetails/container/walletDetailsContainer.js @@ -1,22 +1,14 @@ import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -// Services and Actions - -// Middleware - -// Constants - -// Utilities // Component import { WalletDetailsView } from '..'; -/* - * Props Name Description Value - *@props --> props name here description here Value Type Here - * - */ +/** + * Props Name Description Value + * @props --> intl Function for language support function + * @props --> walletData User wallet data object + * + */ class WalletContainer extends Component { constructor(props) { @@ -29,14 +21,10 @@ class WalletContainer extends Component { // Component Functions render() { - // const {} = this.props; + const { intl, walletData } = this.props; - return ; + return ; } } -// const mapStateToProps = state => ({ -// // user: state.user.user, -// }); - export default WalletContainer; diff --git a/src/components/walletDetails/view/walletDetailsStyles.js b/src/components/walletDetails/view/walletDetailsStyles.js index c714ae7d5..ec53ec3cb 100644 --- a/src/components/walletDetails/view/walletDetailsStyles.js +++ b/src/components/walletDetails/view/walletDetailsStyles.js @@ -4,4 +4,7 @@ export default EStyleSheet.create({ container: { paddingBottom: 8, }, + blackText: { + color: '$primaryBlack', + }, }); diff --git a/src/components/walletDetails/view/walletDetailsView.js b/src/components/walletDetails/view/walletDetailsView.js index e6c885ad2..e6f0420d5 100644 --- a/src/components/walletDetails/view/walletDetailsView.js +++ b/src/components/walletDetails/view/walletDetailsView.js @@ -34,7 +34,7 @@ class WalletDetailsView extends Component { {walletData.showPowerDown && ( diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 82b131ef8..ff02edbf8 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -49,6 +49,7 @@ "steem_power": "Steem Power", "next_power_text": "Next power down is in", "days": "days", + "day": "day", "steem_dollars": "Steem Dollars", "savings": "Savings" }, diff --git a/src/config/locales/tr-TR.json b/src/config/locales/tr-TR.json index b11240ad3..b4e3af36a 100644 --- a/src/config/locales/tr-TR.json +++ b/src/config/locales/tr-TR.json @@ -48,7 +48,8 @@ "voting_power": "Oylama güçü", "steem_power": "Steem Güçü", "next_power_text": "İleriki güç", - "days": "days içinde düşecek", + "days": "gün içinde düşecek", + "day": "gün içinde düşecek", "steem_dollars": "Steem Dolar", "savings": "Biriktir" }, diff --git a/src/screens/pinCode/container/pinCodeContainer.js b/src/screens/pinCode/container/pinCodeContainer.js index 42cc964ee..2c48a1941 100644 --- a/src/screens/pinCode/container/pinCodeContainer.js +++ b/src/screens/pinCode/container/pinCodeContainer.js @@ -110,7 +110,7 @@ class PinCodeContainer extends Component { }; setUserDataWithPinCode(pinData).then((response) => { const _currentAccount = currentAccount; - _currentAccount.local = response[0]; + _currentAccount.local = response; dispatch(updateCurrentAccount({ ..._currentAccount })); diff --git a/src/utils/wallet.js b/src/utils/wallet.js new file mode 100644 index 000000000..950b80b23 --- /dev/null +++ b/src/utils/wallet.js @@ -0,0 +1,101 @@ +import parseToken from './parseToken'; +import parseDate from './parseDate'; +import { vestsToSp } from './conversions'; + +export const getTransactionData = (transaction, walletData, formatNumber) => { + if (!transaction || !walletData) { + return []; + } + + const result = {}; + + // eslint-disable-next-line + result.opName = transaction[1].op[0]; + const opData = transaction[1].op[1]; + const { timestamp } = transaction[1]; + + result.transDate = parseDate(timestamp); + result.icon = 'local-activity'; + + switch (result.opName) { + case 'curation_reward': + const { reward } = opData; + const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData; + + result.value = `${formatNumber(vestsToSp(parseToken(reward), walletData.steemPerMVests), { + minimumFractionDigits: 3, + })} SP`; + result.details = `@${commentAuthor}/${commentPermlink}`; + break; + case 'author_reward': + case 'comment_benefactor_reward': + let { + sbd_payout: sbdPayout, + steem_payout: steemPayout, + vesting_payout: vestingPayout, + } = opData; + + const { author, permlink } = opData; + + sbdPayout = formatNumber(parseToken(sbdPayout), { minimumFractionDigits: 3 }); + steemPayout = formatNumber(parseToken(steemPayout), { minimumFractionDigits: 3 }); + vestingPayout = formatNumber( + vestsToSp(parseToken(vestingPayout), walletData.steemPerMVests), + { minimumFractionDigits: 3 }, + ); + + result.value = `${sbdPayout > 0 ? `${sbdPayout} SBD` : ''} ${ + steemPayout > 0 ? `${steemPayout} steemPayout` : '' + } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`; + + result.details = `@${author}/${permlink}`; + if (result.opName === 'comment_benefactor_reward') { + result.icon = 'comment'; + } + break; + case 'claim_reward_balance': + let { reward_sbd: rewardSdb, reward_steem: rewardSteem, reward_vests: rewardVests } = opData; + + rewardSdb = formatNumber(parseToken(rewardSdb), { minimumFractionDigits: 3 }); + rewardSteem = formatNumber(parseToken(rewardSteem), { minimumFractionDigits: 3 }); + rewardVests = formatNumber(vestsToSp(parseToken(rewardVests), walletData.steemPerMVests), { + minimumFractionDigits: 3, + }); + + result.value = `${rewardSdb > 0 ? `${rewardSdb} SBD` : ''} ${ + rewardSteem > 0 ? `${rewardSteem} STEEM` : '' + } ${rewardVests > 0 ? `${rewardVests} SP` : ''}`; + break; + case 'transfer': + case 'transfer_to_vesting': + const { + amount, memo, from, to, + } = opData; + + result.value = `${amount}`; + result.icon = 'compare-arrows'; + result.details = `@${from} to @${to}`; + result.memo = memo; + break; + case 'withdraw_vesting': + const { acc } = opData; + let { vesting_shares: opVestingShares } = opData; + + opVestingShares = parseToken(opVestingShares); + result.value = `${formatNumber(vestsToSp(opVestingShares, walletData.steemPerMVests), { + minimumFractionDigits: 3, + })} SP`; + result.icon = 'money'; + result.details = `@${acc}`; + break; + case 'fill_order': + const { current_pays: currentPays, open_pays: openPays } = opData; + + result.value = `${currentPays} = ${openPays}`; + result.icon = 'reorder'; + break; + default: + break; + } + return result; +};