import { ApiRxContext } from '@substrate/context' ; import { Icon , List , Margin , StackedHorizontal , WithSpaceAround , } from '@substrate/ui-components' ; import { navigate } from 'gatsby' ; import React , { useContext } from 'react' ; import { removeCartItem } from '../../util/cartHelpers' ; import { AddressSummary , Button , SubHeader , Text , Tooltip } from '../index' ; interface Props { cartItems : string [ ] ; cartItemsCount : number ; } const CartItems = ( props ) : React . ReactElement => { const { cartItems , cartItemsCount } = props ; const { api } = useContext ( ApiRxContext ) ; const renderCartEmpty = ( ) : React . ReactElement => { return ( < Tooltip > < SubHeader > Cart Empty < /SubHeader> < Text > you should add some validators to nominate ... < /Text> < Button neutral size = 'big' float = 'right' onClick = { ( ) : Promise < void > => navigate ( '/validators' ) } > Take Me There ! < /Button> < /Tooltip>); } ; const removeItemFromCart = ( { currentTarget : { dataset : { key } , } , } ) : void => { if ( key ) { removeCartItem ( key , cartItemsCount ) ; } else { alert ( 'Something went wrong. Please try again later.' ) ; } } ; return ( < List relaxed > { cartItems . length ? cartItems . map ( ( address ) => { return ( < List . Item key = { address } > < WithSpaceAround > < StackedHorizontal > < AddressSummary api = { api } address = { address } noPlaceholderName orientation = 'horizontal' size = 'small' / > < Margin left / > < Icon name = 'close' link onClick = { removeItemFromCart } data - key = { address } /> < /StackedHorizontal> < /WithSpaceAround> < /List.Item>); } ) : renderCartEmpty ( ) } < /List>); } ; export default CartItems ;