Updated claim button to match previous design

src/config/locales/en-US.json

@@ -81,7 +81,7 @@
     "fill_convert_request": "Convert Executed",
     "fill_transfer_from_savings": "Savings Executed",
     "fill_vesting_withdraw": "PowerDown executed",
-    "estm": {
+    "ecency": {
       "title": "Points",
       "buy": "GET POINTS"
     },

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

@@ -25,6 +25,36 @@ export default EStyleSheet.create({
     flex:1,
   } as ViewStyle,
 
+  claimContainer:{
+    flexDirection:'row', 
+    justifyContent:'center', 
+    alignItems:'center', 
+    marginTop:8
+  } as ViewStyle,
+
+  claimBtn:{
+      flexDirection: 'row',
+      paddingHorizontal: 16
+  } as ViewStyle,
+
+  claimBtnTitle:{
+    color: '$pureWhite',
+    fontSize: 14,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+  } as ViewStyle,
+
+  claimIconWrapper: {
+    backgroundColor: '$pureWhite',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    marginLeft: 20,
+    width: 24,
+    height: 24,
+  } as ViewStyle,
+
   logo:{
     height:24, 
     width:24, 

src/screens/wallet/children/coinCard.tsx

@@ -1,25 +1,29 @@
 import { View, Text, Dimensions, TouchableOpacity } from 'react-native';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, Fragment } from 'react';
 import styles from './children.styles';
-import { MainButton, SimpleChart, TextButton } from '../../../components';
+import { Icon, MainButton, SimpleChart, TextButton } from '../../../components';
 import { COIN_IDS } from '../../../constants/defaultCoins';
+import { useIntl } from 'react-intl';
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 export interface CoinCardProps {
-    chartData:number[]
-    name:string,
-    notCrypto:boolean,
-    symbol:string,
-    currencySymbol:string,
-    changePercent:number,
-    currentValue:number,
-    ownedTokens:number,
-    unclaimedRewards:string,
-    enableBuy?:boolean,
+    id:string;
+    chartData:number[];
+    name:string;
+    notCrypto:boolean;
+    symbol:string;
+    currencySymbol:string;
+    changePercent:number;
+    currentValue:number;
+    ownedTokens:number;
+    unclaimedRewards:string;
+    enableBuy?:boolean;
     footerComponent:ComponentType<any>
     onPress:()=>void
 }
 
 export const CoinCard = ({
+  id,
   notCrypto, 
   chartData, 
   name,
@@ -38,6 +42,8 @@ export const CoinCard = ({
     return null
   }
 
+  const intl = useIntl();
+
     const _renderHeader = (
         <View style={styles.cardHeader}>
             {/* <View style={styles.logo} /> */}
@@ -56,11 +62,26 @@ export const CoinCard = ({
     const _renderClaimSection = () => {
       if(unclaimedRewards || enableBuy){
         const btnTitle = unclaimedRewards
-          ? unclaimedRewards + '\nCLAIM'
-          : 'GET MORE'
+          ? unclaimedRewards
+          : intl.formatMessage({ id: `wallet.${id}.buy`});
         return (
-          <View style={{flexDirection:'row', justifyContent:'center', alignItems:'center', marginTop:8}}>
-            <MainButton style={{paddingHorizontal:24}} text={btnTitle} onPress={()=>{}} />
+          <View style={styles.claimContainer}>
+            <MainButton
+              isLoading={false}
+              isDisable={false}
+              style={styles.claimBtn}
+              height={50}
+              onPress={() => {}}
+            >
+              <Fragment>
+                <Text style={styles.claimBtnTitle}>
+                  {btnTitle}
+                </Text>
+                <View style={styles.claimIconWrapper}>
+                  <Icon name="add" iconType="MaterialIcons" color={EStyleSheet.value('$primaryBlue')} size={23} />
+                </View>
+              </Fragment>
+            </MainButton>
           </View>
         )
       }