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

Nt/wallet cache

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

@@ -5,7 +5,7 @@ import { isRTL } from '../../../utils/I18nUtils';
 
 export default EStyleSheet.create({
   cardContainer: {
-    backgroundColor:'$primaryLightBackground',
+    backgroundColor: '$primaryLightBackground',
     marginVertical: 8,
     marginHorizontal: 16,
     borderRadius: 12,
@@ -14,37 +14,37 @@ export default EStyleSheet.create({
     borderColor: "$primaryLightBackground",
   } as ViewStyle,
 
-  cardHeader:{
-    flexDirection:'row',
-    alignItems:'center',
+  cardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
     paddingHorizontal: 16,
-    paddingTop:16,
+    paddingTop: 16,
   } as ViewStyle,
 
-  cardTitleContainer:{
+  cardTitleContainer: {
     marginHorizontal: 8,
-    flex:1,
+    flex: 1,
   } as ViewStyle,
 
-  cardValuesContainer:{
+  cardValuesContainer: {
     marginHorizontal: 8,
-    
-    justifyContent:'flex-end'
+
+    justifyContent: 'flex-end'
   } as ViewStyle,
 
-  claimContainer:{
-    flexDirection:'row', 
-    justifyContent:'center', 
-    alignItems:'center', 
-    marginTop:8
+  claimContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 8
   } as ViewStyle,
 
-  claimBtn:{
-      flexDirection: 'row',
-      paddingHorizontal: 16
+  claimBtn: {
+    flexDirection: 'row',
+    paddingHorizontal: 16
   } as ViewStyle,
 
-  claimBtnTitle:{
+  claimBtnTitle: {
     color: '$pureWhite',
     fontSize: 14,
     fontWeight: 'bold',
@@ -62,16 +62,16 @@ export default EStyleSheet.create({
     height: 24,
   } as ViewStyle,
 
-  logo:{
-    height:24, 
-    width:24, 
-    borderRadius:12, 
-    backgroundColor:'$primaryBlue',
+  logo: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    backgroundColor: '$primaryBlue',
   } as ImageStyle,
 
-  menuIcon:{
+  menuIcon: {
     color: '$primaryBlue',
-    paddingLeft:12,
+    paddingLeft: 12,
   } as ViewStyle,
 
   header: {
@@ -80,52 +80,56 @@ export default EStyleSheet.create({
   dotStyle: {
     backgroundColor: '$primaryDarkText',
   },
-  chartContainer:{
-    height:112,
+  chartContainer: {
+    height: 112,
   },
-  cardFooter:{
-    position:'absolute', 
-    bottom:8, 
-    left: isRTL() ? 16 : 76, 
-    right: isRTL() ? 76 : 16, 
-    paddingTop:8,
-    flexDirection: isRTL() ? "row-reverse" : "row", 
-    justifyContent:'space-between',
-    borderColor:'$chartText',
-    borderTopWidth:EStyleSheet.hairlineWidth,
+  cardFooter: {
+    position: 'absolute',
+    bottom: 8,
+    left: isRTL() ? 16 : 76,
+    right: isRTL() ? 76 : 16,
+    paddingTop: 8,
+    flexDirection: isRTL() ? "row-reverse" : "row",
+    justifyContent: 'space-between',
+    borderColor: '$chartText',
+    borderTopWidth: EStyleSheet.hairlineWidth,
   } as ViewStyle,
-  textDiffPositive:{
-    fontSize:18,
+  textDiffPositive: {
+    fontSize: 18,
     color: '$primaryGreen',
     textAlign: 'left',
   } as TextStyle,
-  textDiffNegative:{
-    fontSize:16,
+  textDiffNegative: {
+    fontSize: 16,
     color: '$primaryRed',
     textAlign: 'left',
   } as TextStyle,
-  textCurValue:{
-    fontSize:16,
+  textCurValue: {
+    fontSize: 16,
     color: '$primaryBlack',
     fontWeight: '300',
     textAlign: 'left',
   } as TextStyle,
-  textTitle:{
-    fontSize:16,
+  textTitle: {
+    fontSize: 16,
     color: '$primaryBlack',
     fontWeight: '500',
     textAlign: 'left',
   },
-  textSubtitle:{
-    fontSize:14,
+  textSubtitle: {
+    fontSize: 14,
     color: '$primaryDarkText',
     fontWeight: '300',
     textAlign: 'left',
   } as TextStyle,
-  textSubtitleRight:{
-    fontSize:14,
+  textSubtitleRight: {
+    fontSize: 14,
     color: '$primaryDarkText',
     fontWeight: '300',
-    textAlign:'right'
-  } as TextStyle
-});
+    textAlign: 'right'
+  } 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} />}