Skip to content

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

margin fix

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