import ApiRx from '@polkadot/api/rx' ; import IdentityIcon from '@polkadot/react-identicon' ; import { Spinner } from '@substrate/design-system' ; import React from 'react' ; import styled from 'styled-components' ; import { Balance } from '../Balance' ; import { OrientationType , SizeType } from './types' ; const Layout = styled . div `
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px;

  & > * {
    margin: 1px 10px;
  }
` ; type AddressSummaryProps = { address ? : string ; api : ApiRx ; detailed ? : boolean ; name ? : string ; noPlaceholderName ? : boolean ; noBalance ? : boolean ; orientation ? : OrientationType ; size ? : SizeType ; withShortAddress ? : boolean ; } ; const PLACEHOLDER_NAME = 'No Name' ; const ICON_SIZES = { tiny : 16 , small : 32 , medium : 96 , large : 128 , } ; function renderIcon ( address , size ) { return ( < IdentityIcon value = { address } theme = { 'substrate' } size = { ICON_SIZES [ size ] } / > ) ; } function renderShortAddress ( address ) { return address . slice ( 0 , 8 ) . concat ( '......' ) . concat ( address . slice ( address . length - 8 , address . length ) ) ; } function renderDetails ( address , api , summaryProps ) { const { detailed , name = PLACEHOLDER_NAME , noBalance , noPlaceholderName , withShortAddress , } = summaryProps ; return ( < > { noPlaceholderName ? null : name } { withShortAddress && renderShortAddress ( address ) } { ! noBalance && ( < Balance address = { address } api = { api } detailed = { detailed } / > ) } < />); } export function AddressSummary ( props ) { const { address , api , size = 'medium' } = props ; if ( address ) { return ( < Layout > { renderIcon ( address , size ) } { renderDetails ( address , api , props ) } < /Layout>); } else { return < Spinner />; } }