Merge pull request #2287 from ecency/nt/wallet-cache

Nt/wallet cache

src/screens/wallet/children/children.styles.ts

@@ -127,5 +127,9 @@ export default EStyleSheet.create({
     color: '$primaryDarkText',
     fontWeight: '300',
     textAlign: 'right'
-  } as TextStyle
+  } as TextStyle,
+  claimActivityIndicator: {
+    marginLeft: 16
+  } as ViewStyle
+
 });

src/screens/wallet/children/coinCard.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Dimensions, TouchableOpacity } from 'react-native';
+import { View, Text, Dimensions, TouchableOpacity, ActivityIndicator } from 'react-native';
 import React, { ComponentType, Fragment, useEffect, useState } from 'react';
 import styles from './children.styles';
 import { Icon, MainButton, SimpleChart } from '../../../components';
@@ -18,6 +18,7 @@ export interface CoinCardProps {
   unclaimedRewards: string;
   enableBuy?: boolean;
   isClaiming?: boolean;
+  isLoading?: boolean;
   footerComponent: ComponentType<any>
   onCardPress: () => void;
   onClaimPress: () => void;
@@ -37,6 +38,7 @@ export const CoinCard = ({
   unclaimedRewards,
   enableBuy,
   isClaiming,
+  isLoading,
   onCardPress,
   onClaimPress,
 }: CoinCardProps) => {
@@ -83,11 +85,20 @@ export const CoinCard = ({
       const btnTitle = unclaimedRewards
         ? unclaimedRewards
         : intl.formatMessage({ id: `wallet.${id}.buy` });
+
+      const _rightComponent = isLoading ? (
+        <ActivityIndicator color={EStyleSheet.value('$pureWhite')} style={styles.claimActivityIndicator} />
+      ) : (
+        <View style={styles.claimIconWrapper}>
+          <Icon name="add" iconType="MaterialIcons" color={EStyleSheet.value('$primaryBlue')} size={23} />
+        </View>
+      )
+
       return (
         <View style={styles.claimContainer}>
           <MainButton
             isLoading={isClaiming && claimExpected}
-            isDisable={isClaiming && claimExpected}
+            isDisable={isLoading || (isClaiming && claimExpected)}
             style={styles.claimBtn}
             height={50}
             onPress={_onClaimPress}
@@ -96,9 +107,7 @@ export const CoinCard = ({
               <Text style={styles.claimBtnTitle}>
                 {btnTitle}
               </Text>
-              <View style={styles.claimIconWrapper}>
-                <Icon name="add" iconType="MaterialIcons" color={EStyleSheet.value('$primaryBlue')} size={23} />
-              </View>
+              {_rightComponent}
             </Fragment>
           </MainButton>
         </View>

src/screens/wallet/screen/walletScreen.tsx

@@ -69,7 +69,10 @@ const WalletScreen = ({navigation}) => {
   //side-effects
   useEffect(()=>{
     AppState.addEventListener('change', _handleAppStateChange);
-    _fetchData();
+    
+    //if coinsData is empty, initilise wallet without a fresh acount fetch
+    _fetchData(Object.keys(coinsData).length?true:false);
+
 
     return _cleanup;
   },[])
@@ -229,6 +232,7 @@ const WalletScreen = ({navigation}) => {
         unclaimedRewards={coinData.unclaimedBalance}
         enableBuy={!coinData.unclaimedBalance && item.id === COIN_IDS.ECENCY}
         isClaiming={isClaiming}
+        isLoading={isLoading}
         onCardPress={_onCardPress}
         onClaimPress={_onClaimPress}
         footerComponent={index === 0 && <HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />}