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 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>) {
event.stopPropagation()
@ -51,7 +56,7 @@ export default function AssetItem(props: Props) {
>
<div className='flex items-center gap-2'>
<div onClick={handleToggleFavorite}>
{asset.isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
{isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
</div>
<AssetImage asset={asset} size={24} />
<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 [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useFavoriteAssets()
const isFavorite = useMemo(
() => favoriteAssetsDenoms.includes(asset.denom),
[favoriteAssetsDenoms, asset.denom],
)
function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.stopPropagation()
@ -47,14 +51,14 @@ export default function AssetSelectorItem(props: Props) {
}, [props.depositCap])
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
onClick={() => onSelect(sellAsset ? { buy: asset, sell: sellAsset } : asset)}
className='flex items-center justify-between w-full gap-2 p-4'
>
<div className='flex items-center gap-2'>
<div onClick={handleToggleFavorite}>
{asset.isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
{isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
</div>
<AssetImage asset={asset} size={24} />
<div className='flex-col'>