LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: fixed favorite asset select (#770)

Browse Source
This commit is contained in:
Linkie Link 2024-02-05 12:53:55 +01:00 committed by GitHub
parent 119ed5b35b
commit bae3d7388f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/trade/TradeModule/AssetSelector/AssetItem.tsx
View File

@ -26,6 +26,11 @@ export default function AssetItem(props: Props) {
const formattedAmount = formatAmountToPrecision(amount, MAX_AMOUNT_DECIMALS) const formattedAmount = formatAmountToPrecision(amount, MAX_AMOUNT_DECIMALS)
const lowAmount = formattedAmount === 0 ? 0 : Math.max(formattedAmount, MIN_AMOUNT) const lowAmount = formattedAmount === 0 ? 0 : Math.max(formattedAmount, MIN_AMOUNT)
const isFavorite = useMemo(
() => favoriteAssetsDenoms.includes(asset.denom),
[favoriteAssetsDenoms, asset.denom],
)
function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) { function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.stopPropagation() event.stopPropagation()
@ -51,7 +56,7 @@ export default function AssetItem(props: Props) {
> >
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<div onClick={handleToggleFavorite}> <div onClick={handleToggleFavorite}>
{asset.isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />} {isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
</div> </div>
<AssetImage asset={asset} size={24} /> <AssetImage asset={asset} size={24} />
<div className='flex-col'> <div className='flex-col'>

8
src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
View File

@ -26,6 +26,10 @@ export default function AssetSelectorItem(props: Props) {
const amount = demagnify(props.balances.find(byDenom(asset.denom))?.amount ?? BN_ZERO, asset) const amount = demagnify(props.balances.find(byDenom(asset.denom))?.amount ?? BN_ZERO, asset)
const [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useFavoriteAssets() const [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useFavoriteAssets()
const isFavorite = useMemo(
() => favoriteAssetsDenoms.includes(asset.denom),
[favoriteAssetsDenoms, asset.denom],
)
function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) { function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.stopPropagation() event.stopPropagation()
@ -47,14 +51,14 @@ export default function AssetSelectorItem(props: Props) {
}, [props.depositCap]) }, [props.depositCap])
return ( return (
<li className='border-b border-white/10 hover:bg-black/10'> <li className='relative border-b border-white/10 hover:bg-black/10 z-1'>
<button <button
onClick={() => onSelect(sellAsset ? { buy: asset, sell: sellAsset } : asset)} onClick={() => onSelect(sellAsset ? { buy: asset, sell: sellAsset } : asset)}
className='flex items-center justify-between w-full gap-2 p-4' className='flex items-center justify-between w-full gap-2 p-4'
> >
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<div onClick={handleToggleFavorite}> <div onClick={handleToggleFavorite}>
{asset.isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />} {isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
</div> </div>
<AssetImage asset={asset} size={24} /> <AssetImage asset={asset} size={24} />
<div className='flex-col'> <div className='flex-col'>