Collectibles List - Manage list when no collectibles (#1419)
* Bump new onboard.js version * Remove component * Fix travis rollback bug * Fix Typos + Updated logic Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm> Co-authored-by: nicolas <nicosampler@users.noreply.github.com>
This commit is contained in:
parent
aa181fb9a1
commit
cb051b1955
|
@ -1,4 +1,5 @@
|
||||||
import MuiList from '@material-ui/core/List'
|
import MuiList from '@material-ui/core/List'
|
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress'
|
||||||
import Search from '@material-ui/icons/Search'
|
import Search from '@material-ui/icons/Search'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import SearchBar from 'material-ui-search-bar'
|
import SearchBar from 'material-ui-search-bar'
|
||||||
|
@ -27,6 +28,10 @@ import {
|
||||||
|
|
||||||
export const ADD_CUSTOM_ASSET_BUTTON_TEST_ID = 'add-custom-asset-btn'
|
export const ADD_CUSTOM_ASSET_BUTTON_TEST_ID = 'add-custom-asset-btn'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
setActiveScreen: (newScreen: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
const filterBy = (filter, nfts) =>
|
const filterBy = (filter, nfts) =>
|
||||||
nfts.filter(
|
nfts.filter(
|
||||||
(asset) =>
|
(asset) =>
|
||||||
|
@ -36,7 +41,7 @@ const filterBy = (filter, nfts) =>
|
||||||
asset.symbol.toLowerCase().includes(filter.toLowerCase()),
|
asset.symbol.toLowerCase().includes(filter.toLowerCase()),
|
||||||
)
|
)
|
||||||
|
|
||||||
const AssetsList = (props) => {
|
const AssetsList = (props: Props): React.ReactElement => {
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const searchClasses = {
|
const searchClasses = {
|
||||||
input: classes.searchInput,
|
input: classes.searchInput,
|
||||||
|
@ -126,12 +131,12 @@ const AssetsList = (props) => {
|
||||||
</Row>
|
</Row>
|
||||||
<Hairline />
|
<Hairline />
|
||||||
</Block>
|
</Block>
|
||||||
{!nftAssetsList.length && (
|
{!nftAssetsList?.length && (
|
||||||
<Block className={classes.progressContainer} justify="center">
|
<Block className={classes.progressContainer} justify="center">
|
||||||
<Paragraph>No collectibles available</Paragraph>
|
{!nftAssetsList ? <CircularProgress /> : <Paragraph>No collectibles available</Paragraph>}
|
||||||
</Block>
|
</Block>
|
||||||
)}
|
)}
|
||||||
{nftAssetsList.length > 0 && (
|
{nftAssetsFilteredList.length > 0 && (
|
||||||
<MuiList className={classes.list}>
|
<MuiList className={classes.list}>
|
||||||
<FixedSizeList
|
<FixedSizeList
|
||||||
height={413}
|
height={413}
|
||||||
|
|
Loading…
Reference in New Issue