Skip to content
This repository has been archived by the owner on Mar 11, 2024. It is now read-only.

Commit

Permalink
Better display of (filtered) assets
Browse files Browse the repository at this point in the history
mvaivre committed Nov 15, 2023
1 parent 32654b7 commit 8bd3b0d
Showing 3 changed files with 10 additions and 4 deletions.
4 changes: 3 additions & 1 deletion src/components/AssetBadge.tsx
Original file line number Diff line number Diff line change
@@ -50,7 +50,9 @@ const AssetBadge = ({ assetId, amount, simple, className }: AssetBadgeProps) =>
assetName={assetInfo?.name}
isNft={!!nftInfo}
/>
{amount !== undefined ? (
{nftInfo?.name ? (
<AssetSymbol>{nftInfo?.name}</AssetSymbol>
) : amount !== undefined ? (
<Amount value={amount} suffix={assetInfo?.symbol} />
) : (
!simple && assetInfo?.symbol && <AssetSymbol>{assetInfo.symbol}</AssetSymbol>
8 changes: 7 additions & 1 deletion src/components/Inputs/SelectOptionAddress.tsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ import styled from 'styled-components'

import AddressBadge from '@/components/AddressBadge'
import AssetBadge from '@/components/AssetBadge'
import Badge from '@/components/Badge'
import SelectOptionItemContent from '@/components/Inputs/SelectOptionItemContent'
import { useAppSelector } from '@/hooks/redux'
import { makeSelectAddressesTokens } from '@/storage/addresses/addressesSelectors'
@@ -38,6 +39,9 @@ const SelectOptionAddress = ({ address, isSelected, className }: SelectOptionAdd
const selectAddressesTokens = useMemo(makeSelectAddressesTokens, [])
const assets = useAppSelector((s) => selectAddressesTokens(s, address.hash))

const knownAssetsWithBalance = assets.filter((a) => a.balance > 0 && a.name)
const unknownAssetsNb = assets.filter((a) => a.balance > 0 && !a.name).length

return (
<SelectOptionItemContent
className={className}
@@ -53,9 +57,10 @@ const SelectOptionAddress = ({ address, isSelected, className }: SelectOptionAdd
}
SecondaryContent={
<AssetList>
{assets.map((a) => (
{knownAssetsWithBalance.map((a) => (
<AssetBadge key={a.id} assetId={a.id} amount={a.balance} withBackground />
))}
{unknownAssetsNb > 0 && <Badge compact>+ {unknownAssetsNb}</Badge>}
</AssetList>
}
/>
@@ -85,4 +90,5 @@ const AssetList = styled.div`
display: flex;
gap: var(--spacing-2);
flex-wrap: wrap;
align-items: center;
`
2 changes: 0 additions & 2 deletions src/modals/SendModals/AddressInputs.tsx
Original file line number Diff line number Diff line change
@@ -54,8 +54,6 @@ interface AddressInputsProps {
className?: string
}

type InputFieldMode = 'view' | 'edit'

const AddressInputs = ({
defaultFromAddress,
fromAddresses,

0 comments on commit 8bd3b0d

Please sign in to comment.