Skip to content

Commit

Permalink
fix: default AssetIcon showFirst to true and support network icons fo…
Browse files Browse the repository at this point in the history
…r multiple icons (#8581)
NeOMakinG authored Jan 15, 2025
1 parent 7fa4b50 commit c732da2
Showing 8 changed files with 63 additions and 32 deletions.
3 changes: 1 addition & 2 deletions src/components/AssetHeader/AssetHeader.tsx
Original file line number Diff line number Diff line change
@@ -35,7 +35,6 @@ type AssetHeaderProps = {
const externalLinkIcon = <ExternalLinkIcon />
const displayMdFlex = { base: 'none', md: 'flex' }
const fontSizeMd2xl = { base: 'xl', md: '2xl' }
const pairProps = { showFirst: true }

export const AssetHeader: React.FC<AssetHeaderProps> = ({ assetId, accountId }) => {
const translate = useTranslate()
@@ -90,7 +89,7 @@ export const AssetHeader: React.FC<AssetHeaderProps> = ({ assetId, accountId })
<PageHeader.Left>
<Display.Desktop>
<Flex alignItems='center' mr='auto' flex={1}>
<AssetIcon assetId={asset.assetId} pairProps={pairProps} />
<AssetIcon assetId={asset.assetId} />
<Flex ml={3} textAlign='left' gap={2} alignItems='center'>
<Heading fontSize={fontSizeMd2xl} lineHeight='shorter'>
{name} {`(${symbol}${asset.id ? ` ${middleEllipsis(asset.id)}` : ''})`}
42 changes: 34 additions & 8 deletions src/components/AssetIcon.tsx
Original file line number Diff line number Diff line change
@@ -20,6 +20,8 @@ export const topClipPath =
'polygon( 89.786% 19.645%,89.786% 19.645%,86.937% 16.22%,83.793% 13.067%,80.377% 10.207%,76.708% 7.661%,72.807% 5.449%,68.695% 3.593%,64.394% 2.112%,59.922% 1.029%,55.303% 0.364%,50.555% 0.138%,50.555% 0.138%,49.786% 0.143%,49.019% 0.161%,48.256% 0.191%,47.495% 0.232%,46.738% 0.284%,45.984% 0.347%,45.233% 0.421%,44.485% 0.506%,43.742% 0.601%,43.001% 0.707%,43.001% 0.707%,41.981% 0.968%,41.073% 1.406%,40.279% 1.999%,39.6% 2.725%,39.04% 3.564%,38.599% 4.495%,38.281% 5.496%,38.087% 6.546%,38.018% 7.623%,38.078% 8.707%,38.078% 8.707%,38.109% 8.998%,38.137% 9.29%,38.162% 9.583%,38.184% 9.877%,38.203% 10.172%,38.219% 10.468%,38.231% 10.765%,38.24% 11.062%,38.246% 11.361%,38.247% 11.661%,38.247% 11.661%,37.915% 15.777%,36.953% 19.683%,35.413% 23.324%,33.348% 26.651%,30.811% 29.609%,27.853% 32.146%,24.527% 34.211%,20.885% 35.751%,16.979% 36.713%,12.863% 37.045%,12.863% 37.045%,12.563% 37.043%,12.265% 37.038%,11.967% 37.029%,11.67% 37.017%,11.374% 37.001%,11.079% 36.982%,10.785% 36.96%,10.492% 36.935%,10.2% 36.907%,9.909% 36.876%,9.909% 36.876%,8.825% 36.816%,7.748% 36.884%,6.698% 37.079%,5.697% 37.397%,4.767% 37.838%,3.927% 38.398%,3.201% 39.076%,2.608% 39.871%,2.17% 40.779%,1.909% 41.799%,1.909% 41.799%,1.8% 42.539%,1.702% 43.283%,1.616% 44.031%,1.542% 44.781%,1.48% 45.536%,1.429% 46.293%,1.39% 47.053%,1.362% 47.817%,1.345% 48.584%,1.34% 49.353%,1.34% 49.353%,1.566% 54.101%,2.231% 58.72%,3.315% 63.191%,4.795% 67.493%,6.651% 71.605%,8.863% 75.506%,11.41% 79.175%,14.27% 82.591%,17.423% 85.734%,20.847% 88.584%,20.847% 88.584%,21.163% 88.511%,21.474% 88.423%,21.778% 88.318%,22.075% 88.198%,22.365% 88.061%,22.645% 87.907%,22.916% 87.736%,23.176% 87.549%,23.426% 87.344%,23.663% 87.122%,56.001% 54.784%,88.34% 22.445%,88.34% 22.445%,88.562% 22.208%,88.767% 21.959%,88.954% 21.699%,89.125% 21.428%,89.278% 21.147%,89.415% 20.858%,89.536% 20.561%,89.64% 20.256%,89.729% 19.946%,89.801% 19.63%,89.801% 19.614%,89.786% 19.645% );'
export const squareClipPath =
'polygon( 7.504% 37.56%,7.504% 37.56%,6.521% 37.641%,5.589% 37.874%,4.719% 38.247%,3.925% 38.747%,3.219% 39.363%,2.613% 40.08%,2.12% 40.886%,1.753% 41.769%,1.523% 42.716%,1.444% 43.714%,1.444% 86.791%,1.444% 86.791%,1.602% 88.787%,2.062% 90.681%,2.797% 92.447%,3.782% 94.06%,4.994% 95.494%,6.406% 96.724%,7.994% 97.725%,9.734% 98.471%,11.599% 98.938%,13.565% 99.099%,86.292% 99.099%,86.292% 99.099%,88.258% 98.938%,90.123% 98.471%,91.863% 97.725%,93.451% 96.724%,94.863% 95.494%,96.075% 94.06%,97.06% 92.447%,97.795% 90.681%,98.255% 88.787%,98.413% 86.791%,98.413% 12.945%,98.413% 12.945%,98.255% 10.948%,97.795% 9.054%,97.06% 7.289%,96.075% 5.676%,94.863% 4.242%,93.451% 3.012%,91.863% 2.011%,90.123% 1.264%,88.258% 0.798%,86.292% 0.637%,43.868% 0.637%,43.868% 0.637%,42.885% 0.718%,41.952% 0.951%,41.083% 1.324%,40.289% 1.824%,39.582% 2.439%,38.977% 3.156%,38.484% 3.963%,38.116% 4.846%,37.887% 5.793%,37.807% 6.791%,37.807% 12.945%,37.807% 12.945%,37.49% 16.937%,36.571% 20.725%,35.101% 24.257%,33.13% 27.482%,30.707% 30.35%,27.882% 32.811%,24.706% 34.813%,21.227% 36.305%,17.497% 37.238%,13.565% 37.56%,7.504% 37.56% );'
export const pairIconsClipPath =
'polygon(83% 0%, 100% 0%, 100% 100%, 0% 112%, 0% 105%, 16% 100%, -8% 56%, 3% 28%, 2% 35%, 5% 37%, 6% 36%, 8% 37%, 8% 36%, 12% 34%, 14% 31%, 17% 25%, 20% 0%, 23% 0%, 26% 0%, 29% 0%, 32% 0%, 35% 0%, 37% 0%, 39% 0%, 40% 0%, 41% 0%, 42% 0%, 43% 0%, 43% 0%)'

export type AssetIconProps = {
// Show the network icon instead of the asset icon e.g OP icon instead of ETH for Optimism native asset
@@ -112,7 +114,9 @@ export const AssetIcon = memo(
asset: _asset,
showNetworkIcon,
src,
pairProps,
pairProps = {
showFirst: true,
},
...rest
}: AssetIconProps) => {
const asset = useAppSelector(state =>
@@ -129,6 +133,7 @@ export const AssetIcon = memo(
() => <FoxIcon boxSize='16px' color={assetIconColor} />,
[assetIconColor],
)
const feeAsset = useAppSelector(state => selectFeeAssetById(state, nativeAssetId ?? ''))

if (!asset) return <LazyLoadAvatar src={src} bg={assetIconBg} icon={foxIcon} {...rest} />

@@ -137,14 +142,35 @@ export const AssetIcon = memo(
}

if (asset.icons?.length) {
const showNetwork = feeAsset?.networkIcon || asset.assetId !== feeAsset?.assetId

return (
<PairIcons
icons={asset.icons}
iconSize={rest.size}
iconBoxSize={rest.boxSize}
{...pairProps}
{...rest}
/>
<Center>
<Center position={showNetwork && showNetworkIcon ? 'relative' : 'static'}>
{showNetwork && showNetworkIcon && (
<LazyLoadAvatar
position='absolute'
left='-8%'
top='-8%'
transform='scale(0.4)'
transformOrigin='top left'
icon={foxIcon}
fontSize='inherit'
src={feeAsset?.networkIcon ?? feeAsset?.icon}
size={rest.size}
zIndex={2}
/>
)}
<PairIcons
icons={asset.icons}
iconSize={rest.size}
iconBoxSize={rest.boxSize}
clipPath={showNetwork && showNetworkIcon ? pairIconsClipPath : ''}
{...pairProps}
{...rest}
/>
</Center>
</Center>
)
}

27 changes: 23 additions & 4 deletions src/components/AssetIconWithBadge.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import type { AvatarProps } from '@chakra-ui/react'
import { Box, Center, Image } from '@chakra-ui/react'
import type { AssetId } from '@shapeshiftoss/caip'
import type { Asset } from '@shapeshiftoss/types'
import type { TransferType } from '@shapeshiftoss/unchained-client'
import uniqBy from 'lodash/uniqBy'
import type { PropsWithChildren } from 'react'
import { useMemo } from 'react'
import { LuGlobe } from 'react-icons/lu'
import FlipShadow from 'assets/flip-shadow.svg'
import type { Transfer } from 'hooks/useTxDetails/useTxDetails'
import { selectAssetById } from 'state/slices/selectors'
import { useAppSelector } from 'state/store'

import {
AssetIcon,
@@ -17,6 +20,9 @@ import {
topClipPath,
} from './AssetIcon'

export const pairIconsBadgeClipPath =
'polygon(83% 0%, 100% 0%, 100% 100%, 0% 112%, 0% 105%, 16% 100%, -8% 56%, 3% 33%, 2% 36%, 5% 37%, 6% 36%, 8% 37%, 11% 45%, 11% 34%, 17% 38%, 18% 37%, 31% 33%, 34% 17%, 34% 0%, 23% 0%, 26% 0%, 29% 0%, 32% 0%, 35% 0%, 37% 0%, 39% 0%, 40% 0%, 41% 0%, 42% 0%, 43% 0%, 43% 0%)'

type AssetIconWithBadgeProps = {
size?: AvatarProps['size']
assetId?: AssetId
@@ -47,9 +53,18 @@ const useTransferData = (transfersByType?: Record<TransferType, Transfer[]>) =>
return { transfers, isNft }
}

const getClipPath = (index: number, totalTransfers: number, isNft: boolean) => {
const getClipPath = (
index: number,
totalTransfers: number,
isNft: boolean,
asset: Asset | undefined,
) => {
if (isNft) return squareClipPath
if (totalTransfers === 1) return defaultClipPath
if (totalTransfers === 1) {
if (asset?.icons && asset.icons.length > 1) return pairIconsBadgeClipPath

return defaultClipPath
}
if (index === 1) return bottomClipPath
return topClipPath
}
@@ -63,6 +78,7 @@ const TransferIcon: React.FC<{
}> = ({ transfer, index, totalTransfers, isNft, size }) => {
const isSecondTransfer = index === 1
const shouldShowShadow = isSecondTransfer && totalTransfers > 1
const asset = useAppSelector(state => selectAssetById(state, transfer.assetId))

if (totalTransfers > 2 && index === 2) return null // Skip third+ transfers

@@ -82,7 +98,7 @@ const TransferIcon: React.FC<{
<AssetIcon
showNetworkIcon={false}
assetId={transfer.assetId}
clipPath={getClipPath(index, totalTransfers, isNft)}
clipPath={getClipPath(index, totalTransfers, isNft, asset)}
name={transfer.asset.name}
size={size}
position={shouldShowShadow ? 'absolute' : 'static'}
@@ -104,6 +120,7 @@ export const AssetIconWithBadge: React.FC<AssetIconWithBadgeProps> = ({
}) => {
const { transfers, isNft } = useTransferData(transfersByType)
const webIcon = <LuGlobe />
const asset = useAppSelector(state => selectAssetById(state, assetId ?? ''))

const renderContent = () => {
if (assetId && secondaryAssetId) {
@@ -144,7 +161,9 @@ export const AssetIconWithBadge: React.FC<AssetIconWithBadgeProps> = ({
<AssetIcon
showNetworkIcon={false}
assetId={assetId}
clipPath={defaultClipPath}
clipPath={
asset?.icons && asset.icons.length > 1 ? pairIconsBadgeClipPath : defaultClipPath
}
size={size}
/>
)
Original file line number Diff line number Diff line change
@@ -17,8 +17,6 @@ import { useAppSelector } from 'state/store'

import { ResultButton } from '../ResultButton'

const pairProps = { showFirst: true }

type AssetResultProps = {
assetId: AssetId
index: number
@@ -48,7 +46,7 @@ export const AssetResult = forwardRef<AssetResultProps, 'div'>(
onClick={handleSearchResultAssetTypeClick}
>
<Flex gap={2} flex={1}>
<AssetIcon assetId={asset.assetId} size='sm' pairProps={pairProps} />
<AssetIcon showNetworkIcon={true} assetId={asset.assetId} size='sm' />
<Flex flexDir='column' alignItems='flex-start' textAlign='left'>
<RawText
color='chakra-body-text'
2 changes: 1 addition & 1 deletion src/components/StakingVaults/Cells.tsx
Original file line number Diff line number Diff line change
@@ -103,7 +103,7 @@ export const AssetCell = ({
{icons && icons.length > 1 ? (
<PairIcons icons={icons} iconSize='sm' bg='none' {...pairProps} />
) : (
<AssetIcon assetId={asset.assetId} size='md' pairProps={pairProps} />
<AssetIcon assetId={asset.assetId} size='md' />
)}
</SkeletonCircle>
<SkeletonText noOfLines={2} isLoaded={!!asset} flex={1} width='50%'>
3 changes: 1 addition & 2 deletions src/pages/Accounts/AccountToken/AccountBalance.tsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,6 @@ type AccountBalanceProps = {

const arrowBackIcon = <ArrowBackIcon />
const flexDirMdRow: ResponsiveValue<Property.FlexDirection> = { base: 'column', md: 'row' }
const pairProps = { showFirst: true }

export const AccountBalance: React.FC<AccountBalanceProps> = ({
assetId,
@@ -59,7 +58,7 @@ export const AccountBalance: React.FC<AccountBalanceProps> = ({
{backLabel ?? accountLabel}
</Button>
<Flex alignItems='center' gap={2}>
<AssetIcon assetId={asset.assetId} height='30px' width='auto' pairProps={pairProps} />
<AssetIcon assetId={asset.assetId} height='30px' width='auto' />
<RawText fontWeight='bold'>{asset.name}</RawText>
</Flex>
</CardHeader>
4 changes: 1 addition & 3 deletions src/pages/Markets/components/CardWithSparkline.tsx
Original file line number Diff line number Diff line change
@@ -18,8 +18,6 @@ import {
} from 'state/slices/selectors'
import { useAppSelector } from 'state/store'

const assetPairProps = { showFirst: true }

export const CardWithSparkline: React.FC<{
assetId: AssetId
onClick: (assetId: AssetId) => void
@@ -47,7 +45,7 @@ export const CardWithSparkline: React.FC<{
<Box>
<Flex width='100%' align='center' justify='space-between' mb={4}>
<Flex width='100%'>
<AssetIcon pairProps={assetPairProps} assetId={assetId} size='md' mr={3} />
<AssetIcon assetId={assetId} size='md' mr={3} />
<Box textAlign='left'>
<Text fontWeight='bold' fontSize='lg' mb={1}>
{asset.name}
10 changes: 1 addition & 9 deletions src/pages/Markets/components/LpCard.tsx
Original file line number Diff line number Diff line change
@@ -20,8 +20,6 @@ type LpCardProps = {
onClick: (assetId: AssetId) => void
}

const pairProps = { showFirst: true }

export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick }) => {
const asset = useAppSelector(state => selectAssetById(state, assetId))
const translate = useTranslate()
@@ -39,13 +37,7 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
if (!asset) return null

return (
<CommonCard
title={asset.name}
subtitle={asset.symbol}
assetId={assetId}
onClick={handleClick}
pairProps={pairProps}
>
<CommonCard title={asset.name} subtitle={asset.symbol} assetId={assetId} onClick={handleClick}>
<CommonStat value={apyValue} label={translate('common.apy')} />
<CommonStat
value={volume24HValue}

0 comments on commit c732da2

Please sign in to comment.