import * as React from 'react' ; import { Widget , WidgetBody , WidgetHeader } from '../widget' ; import { TableBody , TableHeader , Table } from '../Table' ; import CopiableText from '../CopiableText' ; import Text from '../Text' ; import { Account } from '../../types' ; interface MyAccountProps { accounts : ReadonlyArray < Account > ; onSelect ? : ( account : Account ) => void ; } const MyAccountWidget = props => { const { accounts , onSelect } = props ; const handleClick = ( account ) => { if ( onSelect ) { onSelect ( account ) ; } } ; return ( < Widget > < WidgetHeader > < Text type = { 'h2' } > My Accounts < /Text> < /WidgetHeader> < WidgetBody > { accounts ?. length ? ( < Table > < TableHeader sticky > < tr > < th > < Text > Binary addresss < /Text> < /th> < th > < Text > Public Key < /Text> < /th> < /tr> < /TableHeader> < TableBody > { accounts . map ( ( account ) => ( < tr onClick = { ( ) => handleClick ( account ) } key = { account . binaryAddress } > < td > < CopiableText text = { account . binaryAddress } > { account . binaryAddress } < /CopiableText> < /td> < td > < CopiableText text = { account . publicKey } > { account . publicKey } < /CopiableText> < /td> < /tr>))} < /TableBody> < /Table>) : (<Text>You don't have any accounts</Text > ) } < /WidgetBody> < /Widget>); } ; export default MyAccountWidget ;