fixed undefined memo text and enanced animations

src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js

@@ -4,13 +4,13 @@ import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import styles from './listItemPlaceHolderStyles';
-// TODO: make container for place holder wrapper after alpha
+
 const ListItemPlaceHolderView = ({ isDarkTheme }) => {
   const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
   return (
     <View style={styles.container}>
-      <Placeholder.Media size={40} hasRadius animate="fade" color={color} />
+      <Placeholder.Media size={30} hasRadius animate="fade" color={color} />
       <View style={styles.paragraphWrapper}>
         <Placeholder.Paragraph
           color={color}

src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js

@@ -1,10 +1,29 @@
-import React from 'react';
+/* eslint-disable radix */
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
-import { View } from 'react-native';
+import { View, Dimensions } from 'react-native';
 import Placeholder from 'rn-placeholder';
+import times from 'lodash/times';
 
 import styles from './walletDetailsPlaceHolderStyles';
 
+const HEIGHT = Dimensions.get('window').height;
+
+const listPlaceHolderView = color => {
+  const ratio = (HEIGHT - 300) / 50;
+  const listElements = [];
+
+  times(parseInt(ratio), i => {
+    listElements.push(
+      <View key={i} style={styles.textWrapper}>
+        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
+      </View>,
+    );
+  });
+
+  return <Fragment>{listElements}</Fragment>;
+};
+
 const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
   const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
@@ -13,18 +32,7 @@ const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
       <View style={styles.textWrapper}>
         <Placeholder.Paragraph lineNumber={1} color={color} />
       </View>
-      <View style={styles.textWrapper}>
+      {listPlaceHolderView(color)}
-        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
-      </View>
-      <View style={styles.textWrapper}>
-        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
-      </View>
-      <View style={styles.textWrapper}>
-        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
-      </View>
-      <View style={styles.textWrapper}>
-        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
-      </View>
     </View>
   );
 };

src/components/basicUIElements/view/walletLineItem/walletLineItemView.js

@@ -66,7 +66,7 @@ const WalletLineItem = ({
           )}
         </View>
       </View>
-      {rightText && (
+      {!!rightText && (
         <View style={styles.rightTextWrapper}>
           <Text
             style={[

src/components/transaction/view/transactionView.js

@@ -1,6 +1,8 @@
+/* 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';
@@ -27,7 +29,7 @@ class TransactionView extends PureComponent {
   // Component Life Cycles
 
   // Component Functions
-  _handleOnDropdownSelect = () => {};
+  // _handleOnDropdownSelect = () => {};
 
   render() {
     const {
@@ -69,7 +71,7 @@ class TransactionView extends PureComponent {
                         id: `wallet.${transactionData.opName}`,
                       })}
                       // description={intl.formatRelative(transactionData.transDate)}
-                      description={getTimeFromNow(transactionData.transDate)}
+                      description={getTimeFromNow(get(transactionData, 'transDate'))}
                       isCircleIcon
                       isThin
                       circleIconColor="white"
@@ -80,13 +82,13 @@ class TransactionView extends PureComponent {
                     />
                   }
                 >
-                  {(!!transactionData.details || !!transactionData.memo) && (
+                  {(get(transactionData, 'details') || get(transactionData, 'memo')) && (
                     <WalletLineItem
                       key={index.toString()}
-                      text={!!transactionData.details && transactionData.details}
+                      text={get(transactionData, 'details', 'pipi')}
                       isBlackText
                       isThin
-                      description={!!transactionData.memo && transactionData.memo}
+                      description={get(transactionData, 'memo')}
                     />
                   )}
                 </CollapsibleCard>

src/utils/wallet.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import parseDate from './parseDate';
 import parseToken from './parseToken';
 import { vestsToSp } from './conversions';
@@ -25,7 +26,7 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
       result.value = `${formatNumber(vestsToSp(parseToken(reward), steemPerMVests), {
         minimumFractionDigits: 3,
       })} SP`;
-      result.details = `@${commentAuthor}/${commentPermlink}`;
+      result.details = commentAuthor ? `@${commentAuthor}/${commentPermlink}` : null;
       break;
     case 'author_reward':
     case 'comment_benefactor_reward':
@@ -47,7 +48,7 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
         steemPayout > 0 ? `${steemPayout} steemPayout` : ''
       } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`;
 
-      result.details = `@${author}/${permlink}`;
+      result.details = author && permlink ? `@${author}/${permlink}` : null;
       if (result.opName === 'comment_benefactor_reward') {
         result.icon = 'comment';
       }
@@ -71,8 +72,8 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
 
       result.value = `${amount}`;
       result.icon = 'compare-arrows';
-      result.details = `@${from} to @${to}`;
+      result.details = from && to ? `@${from} to @${to}` : null;
-      result.memo = memo;
+      result.memo = memo || null;
       break;
     case 'withdraw_vesting':
       const { acc } = opData;
@@ -83,7 +84,7 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe
         minimumFractionDigits: 3,
       })} SP`;
       result.icon = 'attach-money';
-      result.details = `@${acc}`;
+      result.details = acc ? `@${acc}` : null;
       break;
     case 'fill_order':
       const { current_pays: currentPays, open_pays: openPays } = opData;
@@ -104,7 +105,7 @@ export const groomingWalletData = async (user, globalProps) => {
     return walletData;
   }
 
-  const state = await getState(`/@${user.name}/transfers`);
+  const state = await getState(`/@${get(user, 'name')}/transfers`);
   const { accounts } = state;
 
   // TODO: move them to utils these so big for a lifecycle function