jsx import { jsx } from '@emotion/core' ; import { useApps } from '@aragon/connect-react' ; import { shortenAddress } from './utils' ; import Group from './Group' ; import Table from './Table' ; import TextButton from './TextButton' ; type Props = { onOpenApp : ( address : string ) => void ; } ; export default function OrgApps ( { onOpenApp } ) { const [ apps , { loading } ] = useApps ( ) ; return ( < Group name = "Apps" loading = { loading } > < Table headers = { [ 'Name' , 'Version' , 'Address' ] } rows = { apps . map ( ( app ) : [ string , string , any ] => [ app . name || 'unknown' , app . version || '?' , < TextButton onClick = { ( ) => onOpenApp ( app . address ) } > { shortenAddress ( app . address ) } < /TextButton>, ] ) . sort ( ( [ a ] , [ b ] ) => a . localeCompare ( b ) ) } /> < /Group>); }