import { connect } from "react-redux" ; import { Dispatch } from "react" ; import * as React from 'react' ; import { createStyles , FormControlLabel , Grid , Switch , Typography } from "@material-ui/core" ; import { IState } from "@emeraldwallet/store" ; import { CoinAvatar } from "@emeraldwallet/ui" ; import { makeStyles } from "@material-ui/core/styles" ; import { BlockchainCode , IBlockchain , AssetDetails } from "@emeraldwallet/core" ; const useStyles = makeStyles ( createStyles ( { iconBox : { paddingTop : "8px" , paddingLeft : "32px" , } , row : { marginTop : "16px" } , descriptionEnabled : { } , descriptionDisabled : { opacity : "0.5" } , } ) ) ; /**
 *
 */ const Component = ( ( { blockchains , enabled , onChange , multiple } ) => { const styles = useStyles ( ) ; const selectCoinsStep = [ ] ; const [ justEnabled , setJustEnabled ] = React . useState ( [ ] as BlockchainCode [ ] ) ; function isJustEnabled ( code ) { return justEnabled . indexOf ( code ) >= 0 ; } function toggleBlockchain ( code ) { let copy = [ ] as BlockchainCode [ ] ; if ( ! multiple ) { copy . push ( code ) ; } else { copy = copy . concat ( justEnabled ) ; if ( isJustEnabled ( code ) ) { copy = justEnabled . filter ( ( it ) => it != code ) ; } else { copy . push ( code ) ; } } setJustEnabled ( copy ) ; onChange ( copy ) ; } blockchains . map ( ( blockchain , i ) => { const blockchainWasEnabled = enabled . indexOf ( blockchain . params . code ) >= 0 ; const blockchainNowEnabled = blockchainWasEnabled || isJustEnabled ( blockchain . params . code ) ; const tokens = blockchain . getAssets ( ) . map ( ( asset ) => { const detail = AssetDetails [ asset ] ; return `${ detail . title } (${ asset })` ; } ) . join ( ", " ) ; const blockchainCard = < Grid item = { true } xs = { 12 } key = { blockchain . params . code } className = { styles . row } > < Grid container = { true } > < Grid item = { true } xs = { 1 } className = { styles . iconBox } > < CoinAvatar chain = { blockchain . params . code } size = "default" / > < /Grid> < Grid item = { true } xs = { 8 } className = { blockchainNowEnabled ? styles . descriptionEnabled : styles . descriptionDisabled } > < Typography variant = { "subtitle1" } > { blockchain . getTitle ( ) } < /Typography> < Typography variant = { "body2" } > Cryptocurrencies : { tokens } < /Typography> < /Grid> < Grid item = { true } xs = { 2 } > < FormControlLabel control = { < Switch checked = { blockchainNowEnabled } onChange = { ( ) => toggleBlockchain ( blockchain . params . code ) } disabled = { blockchainWasEnabled } name = "checkedB" color = "primary" / > } label = { blockchainNowEnabled ? "Enabled" : "Disabled" } / > < /Grid> < /Grid> < /Grid>; selectCoinsStep . push ( blockchainCard ) ; } ) ; return < Grid container = { true } > { selectCoinsStep } < /Grid>; } ) ; type Props = { } ; type Actions = { } ; type OwnProps = { blockchains : IBlockchain [ ] ; enabled : BlockchainCode [ ] ; onChange : ( value : BlockchainCode [ ] ) => void ; multiple ? : boolean ; } ; export default connect ( ( state , ownProps ) : Props => { return { multiple : typeof ownProps . multiple == "undefined" || ownProps . multiple } ; } , ( dispatch , ownProps ) : Actions => { return { } ; } ) ( ( Component ) ) ;