[FIX] global select ui fixes

bitpay · May 7, 2024 · 59cf55f · 59cf55f
1 parent 883909a
commit 59cf55f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/components/chain-search/ChainSearch.tsx b/src/components/chain-search/ChainSearch.tsx
@@ -32,8 +32,8 @@ export const SearchFilterContainer = styled.TouchableOpacity`
   justify-content: center;
   align-items: center;
   border-radius: 20px;
-  height: 40px;
-  margin: 8px 8px 8px 15px;
+  height: 32px;
+  margin: 15px 8px 12px 15px;
   border: 1px solid ${({theme: {dark}}) => (dark ? Action : 'transparent')};
   background: ${({theme: {dark}}) => (dark ? '#2240C440' : '#ECEFFD')};
 `;
@@ -71,7 +71,7 @@ export const SearchFilterLabel = styled(BaseText)`
 `;
 
 export const SearchFilterIconContainer = styled.View`
-  margin-right: 15px;
+  margin-right: 12px;
 `;
 
 export interface SearchableItem {

diff --git a/src/components/list/GlobalSelectRow.tsx b/src/components/list/GlobalSelectRow.tsx
@@ -9,11 +9,10 @@ import {H5, H7} from '../styled/Text';
 import {CurrencyImage} from '../currency-image/CurrencyImage';
 import {GlobalSelectObj} from '../../navigation/wallet/screens/GlobalSelect';
 import styled from 'styled-components/native';
-import {LightBlack, Slate, Slate30, SlateDark} from '../../styles/colors';
+import {Slate, Slate30, SlateDark} from '../../styles/colors';
 import AngleRightSvg from '../../../assets/img/angle-right.svg';
 import {Img} from '../../navigation/tabs/home/components/Wallet';
 import {Wallet} from '../../store/wallet/wallet.models';
-import {IsERCToken} from '../../store/wallet/utils/currency';
 import {useTheme} from 'styled-components/native';
 
 interface Props {
@@ -39,29 +38,39 @@ export const AvailableChainContainer = styled.View`
   margin-right: 10px;
 `;
 
+const WalletBadgeListContainer = styled.View`
+  margin-left: 5px;
+  flex-direction: row;
+`;
 interface WalletBadgeListProps {
   walletsByChain: {[key: string]: Wallet[]};
 }
 
 const WalletBadgeList: React.FC<WalletBadgeListProps> = ({walletsByChain}) => {
   return (
-    <>
+    <WalletBadgeListContainer>
       {Object.values(walletsByChain).map(
         (wallets, index) =>
           wallets[0]?.badgeImg && (
-            <Img key={wallets[0].id} isFirst={index === 0}>
+            <Img key={wallets[0].id} isFirst={false}>
               <CurrencyImage img={wallets[0].badgeImg} size={25} />
             </Img>
           ),
       )}
-    </>
+    </WalletBadgeListContainer>
   );
 };
 
+const hasVisibleBadges = (walletsByChain: {[key: string]: Wallet[]}) => {
+  return Object.values(walletsByChain).some(wallets => wallets[0]?.badgeImg);
+};
+
 const GlobalSelectRow = ({item, emit}: Props) => {
   const theme = useTheme();
   const {currencyName, total, img, availableWalletsByChain} = item;
   const shouldShowPill = total > 1;
+  const shouldShowBadges = hasVisibleBadges(availableWalletsByChain);
+
   return (
     <RowContainer activeOpacity={ActiveOpacity} onPress={() => emit(item)}>
       <CurrencyImageContainer>
@@ -72,7 +81,9 @@ const GlobalSelectRow = ({item, emit}: Props) => {
       </CurrencyColumn>
       {shouldShowPill ? (
         <AvailableWalletsPill>
-          <WalletBadgeList walletsByChain={availableWalletsByChain} />
+          {shouldShowBadges && (
+            <WalletBadgeList walletsByChain={availableWalletsByChain} />
+          )}
           <H7
             style={{
               marginLeft: 5,