Skip to content

F
frontend
Commit c393f753 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Design updates (#1767) 

* update blob icon

* fix tags on token transfer

* update address tx filter styles

* page padding fixes

* update twitter icon

* updat screenshots

* fix test

* update back arrow color in the modals

* update solidityscan text

* update stats widget bg color
parent 05301955
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 47 deletions
configs/envs/.env.sepolia
View file @ c393f753
...@@ -58,6 +58,7 @@ NEXT_PUBLIC_HAS_BEACON_CHAIN=true ...@@ -58,6 +58,7 @@ NEXT_PUBLIC_HAS_BEACON_CHAIN=true
NEXT_PUBLIC_HAS_USER_OPS=true NEXT_PUBLIC_HAS_USER_OPS=true
NEXT_PUBLIC_AD_BANNER_PROVIDER=getit NEXT_PUBLIC_AD_BANNER_PROVIDER=getit
NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
#meta #meta
NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
icons/blob.svg
View file @ c393f753
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.392.45C3.644.163 3.984 0 4.34 0h8.038a.63.63 0 0 1 .474.225L17.54 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.393 1.087-.25.289-.592.451-.947.451H4.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 3 18.461V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.34V1.538Zm8.274.59 2.791 3.205h-2.791V2.128Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.183 2.768h-.002a1.382 1.382 0 0 0-.107-.024 6.93 6.93 0 0 0-1.591-.1c-1.009.056-2.254.35-3.32 1.269l-.29.245c-.323.273-.714.602-.918.82-1.292 1.38-2.252 3.68-2.894 5.713a34.038 34.038 0 0 0-.91 3.57l-.01.048-.003.034a68.656 68.656 0 0 0-.067.667c-.038.403-.072.803-.072.951 0 .096.07.329.54.654.447.309 1.123.606 1.987.864 1.719.515 4.041.84 6.38.881 2.342.043 4.645-.2 6.34-.78 1.754-.602 2.556-1.445 2.556-2.415 0-2.7-1.068-5.753-2.593-8.179-.759-1.208-1.617-2.237-2.485-2.977-.875-.746-1.718-1.161-2.452-1.226l-.045-.004-.043-.011h-.001Zm.138-.618S8.18 1.356 5.786 3.42c-.069.06-.157.133-.255.216-.328.276-.769.647-1.001.895C1.74 7.51.55 14.213.55 14.213S.402 15.587.4 15.959c-.013 3.442 19 4.92 19-.794S14.912 2.467 11.321 2.15Z" fill="currentColor"/>
<path d="M8.1 16.4a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h2.237c.74 0 1.305.164 1.697.491.397.324.595.808.595 1.452 0 .457-.101.85-.303 1.177-.202.328-.505.552-.909.674l.097-.223c.59.11 1.04.345 1.349.703.309.358.463.84.463 1.446 0 .709-.229 1.267-.686 1.674-.457.404-1.086.606-1.886.606H8.1Zm.746-1.12h1.765c.423 0 .76-.097 1.012-.291.255-.199.383-.517.383-.955 0-.476-.132-.805-.395-.988-.259-.187-.592-.28-1-.28H8.846v2.514Zm0-3.634h1.32c.373 0 .666-.075.88-.223.217-.152.325-.432.325-.84 0-.412-.108-.692-.325-.84-.213-.152-.507-.229-.88-.229h-1.32v2.132Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="m11.165 2.748.048-.213ZM.55 14.213l-.394-.07v-.002l.001-.004.003-.016.011-.059.043-.222c.04-.192.097-.47.176-.81.157-.683.395-1.625.722-2.661.65-2.056 1.666-4.552 3.126-6.112.249-.265.702-.647 1.02-.914l.015-.013c.1-.083.185-.156.252-.213C6.81 2.009 8.29 1.674 9.43 1.612a7.894 7.894 0 0 1 1.414.05 6.37 6.37 0 0 1 .53.09l.012.002c1.004.098 2.023.647 2.972 1.455.963.821 1.886 1.936 2.688 3.212 1.6 2.546 2.754 5.794 2.754 8.744 0 1.704-1.425 2.774-3.24 3.397-1.844.632-4.273.876-6.672.833-2.403-.043-4.816-.375-6.64-.922-.909-.272-1.695-.604-2.263-.997-.556-.384-.987-.89-.985-1.52.001-.208.04-.665.077-1.048l.052-.516.017-.162.006-.06.398.043Zm0 0-.398-.043.002-.014.002-.014.394.07ZM10.672 3.085a6.528 6.528 0 0 0-1.168-.04c-.952.052-2.102.328-3.08 1.17-.084.074-.185.159-.291.248l-.002.001c-.332.28-.7.591-.884.788-1.226 1.309-2.165 3.533-2.804 5.56a33.627 33.627 0 0 0-.9 3.523l-.005.031-.002.02-.016.158a66.14 66.14 0 0 0-.05.504c-.037.385-.067.742-.07.888.013.031.083.154.367.35.397.275 1.029.557 1.874.81 1.676.502 3.96.823 6.272.864 2.319.042 4.57-.2 6.203-.759 1.718-.589 2.286-1.34 2.286-2.036 0-2.606-1.036-5.587-2.531-7.966-.743-1.182-1.576-2.178-2.407-2.886-.842-.717-1.609-1.077-2.227-1.132l-.077-.007-.072-.018-.014-.003a5.01 5.01 0 0 0-.402-.067Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.038 12.116a2 2 0 0 1 .825.558c.309.358.463.84.463 1.446 0 .709-.229 1.267-.686 1.674-.457.404-1.086.606-1.886.606H8.1a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h2.237c.74 0 1.305.164 1.697.491.397.324.595.808.595 1.452 0 .457-.101.85-.303 1.177a1.477 1.477 0 0 1-.534.515c.086.024.168.05.246.08Zm.177-.145c.32.137.588.327.8.573.347.403.51.936.51 1.576 0 .756-.245 1.372-.752 1.824-.504.445-1.185.656-2.019.656H8.1a.7.7 0 0 1-.7-.7v-7a.7.7 0 0 1 .7-.7h2.237c.765 0 1.383.17 1.825.537.454.371.667.92.667 1.606 0 .487-.108.917-.333 1.282-.08.13-.174.245-.281.346Zm-.72 1.237c-.217-.156-.506-.242-.883-.242H9.046v2.114h1.566c.393 0 .682-.09.889-.25.19-.147.305-.396.305-.796 0-.444-.122-.695-.309-.824l-.002-.002Zm.128 1.78c-.251.195-.589.292-1.011.292H8.846v-2.514h1.766c.407 0 .74.093 1 .28.262.183.394.512.394.988 0 .438-.128.756-.383.954Zm-.693-5.082c-.168-.12-.415-.192-.764-.192h-1.12v1.732h1.12c.35 0 .597-.07.765-.187.14-.098.24-.298.24-.676 0-.384-.1-.581-.238-.675l-.003-.002Zm.116 1.517c-.213.148-.507.223-.88.223h-1.32V9.514h1.32c.373 0 .666.076.88.229.217.148.326.428.326.84 0 .407-.109.687-.326.84Z" fill="currentColor"/> <path d="M15.85 11.65c0 1.353-.548 2.45-1.225 2.45S13.4 13.003 13.4 11.65c0-1.353.548-2.45 1.225-2.45s1.225 1.097 1.225 2.45ZM11.6 12.2c0 1.436-.582 2.6-1.3 2.6-.718 0-1.3-1.164-1.3-2.6 0-1.436.582-2.6 1.3-2.6.718 0 1.3 1.164 1.3 2.6Z" fill="currentColor"/>
</svg> </svg>
icons/social/tweet.svg deleted 100644 → 0
View file @ 05301955
<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273 2.12 2.12 0 0 1-.563.078 1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/>
</svg>
icons/social/twitter.svg 0 → 100644
View file @ c393f753
<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m4.044 4 6.95 9.292L4 20.847h1.574l6.123-6.614 4.947 6.614H22l-7.34-9.815L21.168 4h-1.574l-5.639 6.092L9.4 4H4.044Zm2.315 1.16h2.46l10.866 14.528h-2.46L6.358 5.159Z" fill="currentColor"/>
</svg>
icons/social/twitter_filled.svg
View file @ c393f753
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.005 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Zm5.011-12.322c.483-.35.894-.774 1.234-1.27a4.938 4.938 0 0 1-1.416.38 2.39 2.39 0 0 0 1.081-1.355 4.823 4.823 0 0 1-1.56.593 2.371 2.371 0 0 0-1.798-.776c-.68 0-1.26.24-1.74.72a2.37 2.37 0 0 0-.72 1.739c0 .182.021.37.062.563a6.855 6.855 0 0 1-2.83-.757 6.971 6.971 0 0 1-2.241-1.816 2.4 2.4 0 0 0-.335 1.24 2.456 2.456 0 0 0 1.096 2.048 2.44 2.44 0 0 1-1.112-.312v.031c0 .594.187 1.115.56 1.564.373.45.844.732 1.412.849a2.542 2.542 0 0 1-.647.084c-.142 0-.297-.013-.464-.038.157.492.446.897.868 1.214a2.4 2.4 0 0 0 1.431.49 4.816 4.816 0 0 1-3.053 1.051c-.218 0-.416-.01-.594-.03a6.83 6.83 0 0 0 3.777 1.104 7.19 7.19 0 0 0 2.459-.415c.766-.277 1.421-.647 1.964-1.112a7.434 7.434 0 0 0 1.405-1.602 7.138 7.138 0 0 0 .88-1.892 6.983 6.983 0 0 0 .282-2.295Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C7.477 2 3 6.477 3 12s4.477 10 10 10 10-4.477 10-10S18.523 2 13 2Zm-1.338 10.619L7.03 6H10.6l3.037 4.34L17.398 6h1.049l-4.34 5.009L19 18h-3.57l-3.299-4.711L8.05 18H7l4.662-5.381Zm-1.45-5.793h-1.64l7.244 10.348h1.64L10.214 6.826Z" fill="currentColor"/>
</svg> </svg>
public/icons/name.d.ts
View file @ c393f753
...@@ -119,8 +119,8 @@ ...@@ -119,8 +119,8 @@
| "social/stats" | "social/stats"
| "social/telega" | "social/telega"
| "social/telegram_filled" | "social/telegram_filled"
| "social/tweet"
| "social/twitter_filled" | "social/twitter_filled"
| "social/twitter"
| "star_filled" | "star_filled"
| "star_outline" | "star_outline"
| "stats" | "stats"
......
theme/components/Menu.ts
View file @ c393f753
...@@ -25,15 +25,15 @@ const baseStyleList = defineStyle({ ...@@ -25,15 +25,15 @@ const baseStyleList = defineStyle({
const baseStyleItem = defineStyle({ const baseStyleItem = defineStyle({
_focus: { _focus: {
[$bg.variable]: 'colors.blue.50', [$bg.variable]: 'transparent',
_dark: { _dark: {
[$bg.variable]: 'colors.gray.800', [$bg.variable]: 'transparent',
}, },
}, },
_hover: { _hover: {
[$bg.variable]: 'colors.blue.50', [$bg.variable]: 'colors.blue.50',
_dark: { _dark: {
[$bg.variable]: 'colors.gray.800', [$bg.variable]: 'colors.whiteAlpha.100',
}, },
}, },
bg: $bg.reference, bg: $bg.reference,
......
theme/foundations/colors.ts
View file @ c393f753
...@@ -55,7 +55,7 @@ const colors = { ...@@ -55,7 +55,7 @@ const colors = {
linkedin: '#1564BA', linkedin: '#1564BA',
discord: '#9747FF', discord: '#9747FF',
slack: '#1BA27A', slack: '#1BA27A',
twitter: '#63B3ED', twitter: '#000000',
opensea: '#2081E2', opensea: '#2081E2',
facebook: '#4460A0', facebook: '#4460A0',
medium: '#231F20', medium: '#231F20',
......
ui/address/AddressTokens.tsx
View file @ c393f753
...@@ -28,7 +28,8 @@ import TokenBalances from './tokens/TokenBalances'; ...@@ -28,7 +28,8 @@ import TokenBalances from './tokens/TokenBalances';
type TNftDisplayType = 'collection' | 'list'; type TNftDisplayType = 'collection' | 'list';
const TAB_LIST_PROPS = { const TAB_LIST_PROPS = {
my: 3, mt: 1,
mb: { base: 6, lg: 1 },
py: 5, py: 5,
columnGap: 3, columnGap: 3,
}; };
......
ui/address/AddressTxsFilter.tsx
View file @ c393f753
...@@ -36,7 +36,7 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading } ...@@ -36,7 +36,7 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
/> />
</MenuButton> </MenuButton>
<MenuList zIndex={ 2 }> <MenuList zIndex={ 2 }>
<MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }> <MenuOptionGroup defaultValue={ defaultFilter || 'all' } type="radio" onChange={ onFilterChange }>
<MenuItemOption value="all">All</MenuItemOption> <MenuItemOption value="all">All</MenuItemOption>
<MenuItemOption value="from">Outgoing transactions</MenuItemOption> <MenuItemOption value="from">Outgoing transactions</MenuItemOption>
<MenuItemOption value="to">Incoming transactions</MenuItemOption> <MenuItemOption value="to">Incoming transactions</MenuItemOption>
......
ui/address/SolidityscanReport.tsx
View file @ c393f753
...@@ -51,7 +51,7 @@ const SolidityscanReport = ({ className, hash }: Props) => { ...@@ -51,7 +51,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
<PopoverContent w={{ base: '100vw', lg: '328px' }}> <PopoverContent w={{ base: '100vw', lg: '328px' }}>
<PopoverBody px="26px" py="20px" fontSize="sm"> <PopoverBody px="26px" py="20px" fontSize="sm">
<Box mb={ 5 } lineHeight="25px"> <Box mb={ 5 } lineHeight="25px">
Contract analyzed for 140+ vulnerability patterns by Contract analyzed for 160+ vulnerability patterns by
<Icon as={ solidityScanIcon } mr={ 1 } ml="6px" w="23px" h="20px" display="inline-block" verticalAlign="middle"/> <Icon as={ solidityScanIcon } mr={ 1 } ml="6px" w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
<Text fontWeight={ 600 } display="inline-block">SolidityScan</Text> <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
</Box> </Box>
......
ui/address/tokens/AddressCollections.tsx
View file @ c393f753
...@@ -64,7 +64,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro ...@@ -64,7 +64,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
</Flex> </Flex>
<Grid <Grid
w="100%" w="100%"
mb={ 7 } mb={ 6 }
columnGap={{ base: 3, lg: 6 }} columnGap={{ base: 3, lg: 6 }}
rowGap={{ base: 3, lg: 6 }} rowGap={{ base: 3, lg: 6 }}
gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }} gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
......
ui/addressVerification/AddressVerificationModal.tsx
View file @ c393f753
...@@ -100,7 +100,7 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o ...@@ -100,7 +100,7 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
<ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }> <ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }>
{ stepIndex !== 0 && ( { stepIndex !== 0 && (
<Link mr={ 3 } onClick={ handleGoToPrevStep }> <Link mr={ 3 } onClick={ handleGoToPrevStep }>
<IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/> <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle" color="gray.400"/>
</Link> </Link>
) } ) }
<span>{ step.title }</span> <span>{ step.title }</span>
......
ui/home/StatsItem.tsx
View file @ c393f753
...@@ -27,7 +27,7 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P ...@@ -27,7 +27,7 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P
[`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' }, [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
}; };
const bgColor = useColorModeValue('blue.50', 'blue.800'); const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50'); const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
return ( return (
......
ui/marketplace/MarketplaceAppInfo/Content.tsx
View file @ c393f753
...@@ -13,7 +13,7 @@ interface Props { ...@@ -13,7 +13,7 @@ interface Props {
const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [ const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
{ field: 'github', icon: 'social/github_filled', title: 'Github' }, { field: 'github', icon: 'social/github_filled', title: 'Github' },
{ field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' }, { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
{ field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' }, { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
{ field: 'discord', icon: 'social/discord_filled', title: 'Discord' }, { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
]; ];
......
ui/marketplace/MarketplaceAppModal.tsx
View file @ c393f753
...@@ -55,20 +55,20 @@ const MarketplaceAppModal = ({ ...@@ -55,20 +55,20 @@ const MarketplaceAppModal = ({
const socialLinks = [ const socialLinks = [
telegram ? { telegram ? {
icon: 'social/telega' as IconName, icon: 'social/telegram_filled' as IconName,
url: telegram, url: telegram,
} : null, } : null,
twitter ? { twitter ? {
icon: 'social/tweet' as IconName, icon: 'social/twitter_filled' as IconName,
url: twitter, url: twitter,
} : null, } : null,
].filter(Boolean); ].filter(Boolean);
if (github) { if (github) {
if (Array.isArray(github)) { if (Array.isArray(github)) {
github.forEach((url) => socialLinks.push({ icon: 'social/git', url })); github.forEach((url) => socialLinks.push({ icon: 'social/github_filled', url }));
} else { } else {
socialLinks.push({ icon: 'social/git', url: github }); socialLinks.push({ icon: 'social/github_filled', url: github });
} }
} }
...@@ -289,6 +289,7 @@ const MarketplaceAppModal = ({ ...@@ -289,6 +289,7 @@ const MarketplaceAppModal = ({
w="20px" w="20px"
h="20px" h="20px"
display="block" display="block"
color="text_secondary"
/> />
</Link> </Link>
)) } )) }
......
ui/shared/TokenTransfer/TokenTransferTable.tsx
View file @ c393f753
...@@ -38,7 +38,7 @@ const TokenTransferTable = ({ ...@@ -38,7 +38,7 @@ const TokenTransferTable = ({
<Thead top={ top }> <Thead top={ top }>
<Tr> <Tr>
{ showTxInfo && <Th width="44px"></Th> } { showTxInfo && <Th width="44px"></Th> }
<Th width="200px">Token</Th> <Th width="230px">Token</Th>
<Th width="160px">Token ID</Th> <Th width="160px">Token ID</Th>
{ showTxInfo && <Th width="200px">Txn hash</Th> } { showTxInfo && <Th width="200px">Txn hash</Th> }
<Th width="60%">From/To</Th> <Th width="60%">From/To</Th>
......
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
View file @ c393f753
...@@ -52,14 +52,14 @@ const TokenTransferTableItem = ({ ...@@ -52,14 +52,14 @@ const TokenTransferTableItem = ({
</Td> </Td>
) } ) }
<Td> <Td>
<Flex flexDir="column" alignItems="flex-start" my="3px" rowGap={ 2 }> <TokenEntity
<TokenEntity token={ token }
token={ token } isLoading={ isLoading }
isLoading={ isLoading } noSymbol
noSymbol noCopy
noCopy mt={ 1 }
my="2px" />
/> <Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
<Tag isLoading={ isLoading }>{ token.type }</Tag> <Tag isLoading={ isLoading }>{ token.type }</Tag>
<Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag> <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
</Flex> </Flex>
......
ui/shared/entities/address/AddressEntity.tsx
View file @ c393f753
...@@ -28,8 +28,9 @@ const Link = chakra((props: LinkProps) => { ...@@ -28,8 +28,9 @@ const Link = chakra((props: LinkProps) => {
); );
}); });
type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress' | 'iconColor'> & { type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & Pick<EntityProps, 'address' | 'isSafeAddress'> & {
asProp?: As; asProp?: As;
name?: EntityBase.IconBaseProps['name'];
}; };
const Icon = (props: IconProps) => { const Icon = (props: IconProps) => {
...@@ -159,7 +160,7 @@ const AddressEntry = (props: EntityProps) => { ...@@ -159,7 +160,7 @@ const AddressEntry = (props: EntityProps) => {
onMouseLeave={ context?.onMouseLeave } onMouseLeave={ context?.onMouseLeave }
position="relative" position="relative"
> >
<Icon { ...partsProps }/> <Icon { ...partsProps } color={ props.iconColor }/>
<Link { ...linkProps }> <Link { ...linkProps }>
<Content { ...partsProps }/> <Content { ...partsProps }/>
</Link> </Link>
......
ui/shared/entities/base/components.tsx
View file @ c393f753
...@@ -18,6 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no ...@@ -18,6 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no
export interface EntityBaseProps { export interface EntityBaseProps {
className?: string; className?: string;
href?: string; href?: string;
iconName?: IconName;
iconSize?: IconSize; iconSize?: IconSize;
iconColor?: IconProps['color']; iconColor?: IconProps['color'];
isExternal?: boolean; isExternal?: boolean;
...@@ -80,13 +81,13 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }: ...@@ -80,13 +81,13 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
); );
}); });
export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon' | 'iconColor'> { export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
name: IconName; name: IconName;
color?: IconProps['color']; color?: IconProps['color'];
borderRadius?: IconProps['borderRadius']; borderRadius?: IconProps['borderRadius'];
} }
const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadius }: IconBaseProps) => { const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
const defaultColor = useColorModeValue('gray.500', 'gray.400'); const defaultColor = useColorModeValue('gray.500', 'gray.400');
if (noIcon) { if (noIcon) {
...@@ -102,7 +103,7 @@ const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadiu ...@@ -102,7 +103,7 @@ const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadiu
borderRadius={ borderRadius ?? 'base' } borderRadius={ borderRadius ?? 'base' }
display="block" display="block"
mr={ 2 } mr={ 2 }
color={ iconColor ?? color ?? defaultColor } color={ color ?? defaultColor }
minW={ 0 } minW={ 0 }
flexShrink={ 0 } flexShrink={ 0 }
/> />
......
ui/shared/entities/tx/TxEntity.tsx
View file @ c393f753
...@@ -71,7 +71,7 @@ const TxEntity = (props: EntityProps) => { ...@@ -71,7 +71,7 @@ const TxEntity = (props: EntityProps) => {
return ( return (
<Container className={ props.className }> <Container className={ props.className }>
<Icon { ...partsProps }/> <Icon { ...partsProps } name={ props.iconName } color={ props.iconColor }/>
<Link { ...linkProps }> <Link { ...linkProps }>
<Content { ...partsProps }/> <Content { ...partsProps }/>
</Link> </Link>
......
ui/shared/layout/components/Content.tsx
View file @ c393f753
...@@ -8,7 +8,7 @@ interface Props { ...@@ -8,7 +8,7 @@ interface Props {
const Content = ({ children, className }: Props) => { const Content = ({ children, className }: Props) => {
return ( return (
<Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }> <Box pt={{ base: 0, lg: 8 }} as="main" className={ className }>
{ children } { children }
</Box> </Box>
); );
......
ui/shared/stats/StatsWidget.tsx
View file @ c393f753
...@@ -14,7 +14,7 @@ type Props = { ...@@ -14,7 +14,7 @@ type Props = {
} }
const StatsWidget = ({ label, value, isLoading, hint, diff, diffPeriod = '24h', diffFormatted }: Props) => { const StatsWidget = ({ label, value, isLoading, hint, diff, diffPeriod = '24h', diffFormatted }: Props) => {
const bgColor = useColorModeValue('blue.50', 'blue.800'); const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50'); const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
const hintColor = useColorModeValue('gray.600', 'gray.400'); const hintColor = useColorModeValue('gray.600', 'gray.400');
......
ui/snippets/footer/Footer.tsx
View file @ c393f753
...@@ -50,9 +50,9 @@ const Footer = () => { ...@@ -50,9 +50,9 @@ const Footer = () => {
url: 'https://github.com/blockscout/blockscout', url: 'https://github.com/blockscout/blockscout',
}, },
{ {
icon: 'social/tweet' as const, icon: 'social/twitter' as const,
iconSize: '18px', iconSize: '18px',
text: 'Twitter', text: 'X (ex-Twitter)',
url: 'https://www.twitter.com/blockscoutcom', url: 'https://www.twitter.com/blockscoutcom',
}, },
{ {
......
ui/token/TokenProjectInfo/Content.tsx
View file @ c393f753
...@@ -14,7 +14,7 @@ interface Props { ...@@ -14,7 +14,7 @@ interface Props {
const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [ const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [
{ field: 'github', icon: 'social/github_filled', title: 'Github' }, { field: 'github', icon: 'social/github_filled', title: 'Github' },
{ field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' }, { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
{ field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' }, { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
{ field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' }, { field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' },
{ field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' }, { field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' },
......
ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
View file @ c393f753
...@@ -21,7 +21,7 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = { ...@@ -21,7 +21,7 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' }, linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' },
discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' }, discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' },
slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' }, slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' },
twitter: { label: 'Twitter', icon: 'social/twitter_filled', color: 'twitter' }, twitter: { label: 'X (ex-Twitter)', icon: 'social/twitter_filled', color: 'inherit' },
opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' }, opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' },
facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' }, facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' },
medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' }, medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' },
......
ui/txs/TxsListItem.tsx
View file @ c393f753
...@@ -56,6 +56,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI ...@@ -56,6 +56,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
hash={ tx.hash } hash={ tx.hash }
truncation="constant_long" truncation="constant_long"
fontWeight="700" fontWeight="700"
iconName={ tx.tx_types.includes('blob_transaction') ? 'blob' : undefined }
/> />
{ tx.timestamp && ( { tx.timestamp && (
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm"> <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
......
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