updated styling and translations

src/config/locales/en-US.json

@@ -97,6 +97,9 @@
     "engine_title":"Hive Engine Tokens",
     "engine_claim_btn":"Claim Rewards ({count})",
     "engine_select_assets":"Select Assets",
+    "available_assets":"Available Assets",
+    "selected_assets":"Selected Assets",
+    "no_selected_assets":"Add from available",
     "manage_assets":"Add / Remove Assets",
     "ecency": {
       "title": "Points",

src/screens/wallet/children/assetsSelectModal.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Alert, Text, TouchableWithoutFeedback, View } from 'react-native';
+import Animated, {ZoomIn, ZoomOut} from 'react-native-reanimated';
 import { useIntl } from 'react-intl';
 import { get, isArray } from 'lodash';
 import styles from '../styles/tokensSelectModa.styles';
@@ -63,16 +64,15 @@ export const AssetsSelectModal = forwardRef(({ }, ref) => {
         const _query = query.toLowerCase();
 
         const _isSelected = selectionRef.current.findIndex(item => item.symbol === asset.symbol) > -1
-        console.log('set selected', _symbol, _isSelected, selectionRef.current)
 
-        if (query === '' || _isSelected ||  _symbol.includes(_query) || _name.includes(_query)) {
+        if (query === '' || _isSelected || _symbol.includes(_query) || _name.includes(_query)) {
           data.push(asset);
         }
       }
     }
 
     setListData(data)
-    _updateSortedList({data})
+    _updateSortedList({ data })
   }, [query, coinsData]);
 
 
@@ -94,8 +94,8 @@ export const AssetsSelectModal = forwardRef(({ }, ref) => {
       return 0;
     });
 
-    _data.splice(selectionRef.current.length, 0, { isSectionSeparator:true })
- 
+    _data.splice(selectionRef.current.length, 0, { isSectionSeparator: true })
+
     setSortedList(_data)
   }
 
@@ -184,23 +184,33 @@ export const AssetsSelectModal = forwardRef(({ }, ref) => {
     setSortedList(data);
   }
 
-  const _renderSectionSeparator = (text:string) => {
+  const _renderSectionSeparator = (text: string, subText?: string) => {
     return (
-      <Text style={styles.sectionSeparatorStyle}>
-        {text}
-      </Text>
+      <>
+        <Text style={styles.sectionTextStyle}>
+          {text}
+        </Text>
+        {!!subText && (
+          <Animated.Text entering={ZoomIn} style={styles.sectionSubTextStyle}>
+            {subText}
+          </Animated.Text>
+        )}
+      </>
+
     )
   }
 
 
-  const _renderHeader = () => _renderSectionSeparator("Selected Assets")
+  const _renderHeader = () => _renderSectionSeparator(
+    intl.formatMessage({id:'wallet.selected_assets'}), 
+    selectionRef.current.length ? '' : intl.formatMessage({id:'wallet.no_selected_assets'}))
 
 
   const _renderOptions = () => {
     const _renderItem = ({ item, drag }) => {
 
-      if(item.isSectionSeparator){
-        return _renderSectionSeparator('Available Assets');
+      if (item.isSectionSeparator) {
+        return _renderSectionSeparator(intl.formatMessage({id:'wallet.available_assets'}));
       }
 
       const key = item.symbol;
@@ -218,7 +228,7 @@ export const AssetsSelectModal = forwardRef(({ }, ref) => {
             notCrypto: false,
           });
         }
-        
+
         _updateSortedList();
       };
 

src/screens/wallet/styles/tokensSelectModa.styles.ts

@@ -42,7 +42,7 @@ export default EStyleSheet.create({
     justifyContent: 'space-between',
   } as ViewStyle,
 
-  sectionSeparatorStyle : {
+  sectionTextStyle : {
     color:'$primaryBlack',
     fontSize: 16,
     marginHorizontal: 16,
@@ -50,6 +50,15 @@ export default EStyleSheet.create({
 
   } as TextStyle,
 
+  sectionSubTextStyle : {
+    color:'$iconColor',
+    fontSize: 18,
+    marginHorizontal: 16,
+    marginVertical:16,
+    alignSelf:'center'
+
+  } as TextStyle,
+
   title: {
     color: '$primaryBlack',
     alignSelf: 'center',