ghost-portal/packages/react-components/src/AddressRow.tsx

// Copyright 2017-2020 @polkadot/react-components authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.

import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';

import React from 'react';
import styled from 'styled-components';
import { useAccountInfo } from '@polkadot/react-hooks';
import BaseIdentityIcon from '@polkadot/react-identicon';

import { toShortAddress } from './util';
import IdentityIcon from './IdentityIcon';
import Row, { RowProps } from './Row';

export interface Props extends RowProps {
  isContract?: boolean;
  isValid?: boolean;
  label?: string;
  noDefaultNameOpacity?: boolean;
  overlay?: React.ReactNode;
  value: AccountId | AccountIndex | Address | string;
  withSidebar?: boolean;
  withTags?: boolean;
}

const DEFAULT_ADDR = '5'.padEnd(48, 'x');
const ICON_SIZE = 48;

function AddressRow ({ buttons, children, className, defaultName, isContract = false, isDisabled, isInline, isValid: propsIsValid, overlay, value, withTags = false }: Props): React.ReactElement<Props> | null {
  const { accountIndex, isNull, name, onSaveName, onSaveTags, setName, setTags, tags } = useAccountInfo(value ? value.toString() : null, isContract);

  const isValid = !isNull && (propsIsValid || value || accountIndex);
  const Icon = value ? IdentityIcon : BaseIdentityIcon;

  return (
    <Row
      address={toShortAddress(value && isValid ? value : DEFAULT_ADDR)}
      buttons={buttons}
      className={className}
      defaultName={defaultName}
      icon={
        <Icon
          size={ICON_SIZE}
          value={value ? value.toString() : null}
        />
      }
      isDisabled={isDisabled}
      isEditableName
      isEditableTags
      isInline={isInline}
      name={name}
      onChangeName={setName}
      onChangeTags={setTags}
      onSaveName={onSaveName}
      onSaveTags={onSaveTags}
      tags={withTags && tags}
    >
      {children}
      {overlay}
    </Row>
  );
}

export {
  DEFAULT_ADDR,
  AddressRow
};

export default React.memo(
  styled(AddressRow)`
    button.ui.icon.editButton {
      padding: 0em .3em .3em .3em;
      color: #2e86ab;
      background: none;
      /*trick to let the button in the flow but keep the content centered regardless*/
      margin-left: -2em;
      position: relative;
      right: -2.3em;
      z-index: 1;
    }

    .editSpan {
      white-space: nowrap;

      &:before {
        content: '';
      }
    }

    .ui--AddressRow-balances {
      display: flex;
      .column {
        display: block;

        label,
        .result {
          display: inline-block;
          vertical-align: middle;
        }
      }

      > span {
        text-align: left;
      }
    }

    .ui--AddressRow-placeholder {
      opacity: 0.5;
    }
  `
);