Skip to content

F
frontend
Commit 45a9f363 authored by isstuev's avatar isstuev
Browse files
Options

margin fix

parent c2d56a21
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 39 deletions
ui/searchResults/SearchResultListItem.tsx
View file @ 45a9f363
......@@ -77,7 +77,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
<AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Address>
);
}
......@@ -132,11 +132,16 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
const secondRow = (() => {
switch (data.type) {
case 'token': {
const templateCols = `1fr
${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
return (
<Grid templateColumns="1fr auto" overflow="hidden" gap={ 5 }>
<Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
<Skeleton isLoaded={ !isLoading } overflow="hidden" display="flex" alignItems="center">
<HashStringShortenDynamic hash={ data.address }/>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
<Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Skeleton>
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
......@@ -163,11 +168,11 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
}
case 'label': {
return (
<Flex alignItems="center" justifyContent="space-between">
<Flex alignItems="center">
<Box overflow="hidden">
<HashStringShortenDynamic hash={ data.address }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Flex>
);
}
......
ui/searchResults/SearchResultTableItem.tsx
View file @ 45a9f363
......@@ -67,11 +67,11 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
</Flex>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center" justifyContent="space-between">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
<Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Skeleton>
</Td>
<Td fontSize="sm" verticalAlign="middle" isNumeric>
......@@ -107,7 +107,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<HashStringShortenDynamic hash={ data.address }/>
</Box>
</LinkInternal>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Flex>
</Td>
<Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
......@@ -124,7 +124,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<mark>
<AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Address>
</Td>
);
......@@ -148,11 +148,11 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
</Flex>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Flex alignItems="center" overflow="hidden" justifyContent="space-between">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
<Flex alignItems="center" overflow="hidden">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Flex>
</Td>
<Td></Td>
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
View file @ 45a9f363
import { Box, Text, Flex, Icon } from '@chakra-ui/react';
import { Box, Text, Grid, Flex, Icon } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultAddressOrContract } from 'types/api/search';
......@@ -27,27 +27,27 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
);
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
if (isMobile) {
return (
<>
<Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
<Grid templateColumns="24px 1fr" gap={ 2 }>
{ icon }
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
flexGrow={ 1 }
>
{ address }
</Box>
{ isContractVerified }
</Flex>
<Flex alignItems="center" overflow="hidden">
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
</Box>
{ isContractVerified }
</Flex>
</Grid>
{ name }
</>
);
......@@ -56,7 +56,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
return (
<Flex alignItems="center" gap={ 2 }>
{ icon }
<Flex alignItems="center" w="450px" gap={ 2 }>
<Flex alignItems="center" w="450px" overflow="hidden">
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
View file @ 45a9f363
......@@ -47,7 +47,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
{ icon }
{ name }
</Flex>
<Flex alignItems="center" justifyContent="space-between" overflow="hidden" gap={ 2 }>
<Flex alignItems="center" overflow="hidden" gap={ 1 }>
{ address }
{ isContractVerified }
</Flex>
......@@ -59,8 +59,10 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
<Grid alignItems="center" gridTemplateColumns="24px 200px max-content 24px" gap={ 2 }>
{ icon }
{ name }
{ address }
{ isContractVerified }
<Flex alignItems="center" overflow="hidden" gap={ 1 }>
{ address }
{ isContractVerified }
</Flex>
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
View file @ 45a9f363
......@@ -33,7 +33,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
</Text>
);
const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
const additionalInfo = (
<Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
......@@ -43,7 +43,6 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
if (isMobile) {
const templateCols = `1fr
${ data.is_smart_contract_verified ? ' auto' : '' }
${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
return (
......@@ -53,8 +52,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
{ name }
</Flex>
<Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
{ address }
{ contractVerifiedIcon }
<Flex alignItems="center" overflow="hidden">
{ address }
{ contractVerifiedIcon }
</Flex>
{ additionalInfo }
</Grid>
</>
......@@ -65,7 +66,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
<Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
{ icon }
{ name }
<Flex alignItems="center" gap={ 2 }>
<Flex alignItems="center" overflow="hidden">
{ address }
{ contractVerifiedIcon }
</Flex>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment