fix: address summary stretchy thing (#297)

* fix: address summary stretchy thing

* fix: lint, remove extra stuff

front/gatsby/src/components/AddressSummary/AddressSummary.styles.ts

@@ -0,0 +1,18 @@
+// Copyright 2018-2020 @paritytech/Nomidot 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 styled from 'styled-components';
+
+export const SquareAddressSummaryBlock = styled.div`
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'flex-end';
+  height: 100%;
+`;
+
+export const Name = styled.p`
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0 0;
+`;

front/gatsby/src/components/AddressSummary/AddressSummary.tsx

@@ -0,0 +1,112 @@
+// Copyright 2018-2020 @paritytech/Nomidot 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 ApiRx from '@polkadot/api/rx';
+import IdentityIcon from '@polkadot/react-identicon';
+import { Spinner } from '@substrate/design-system';
+import { Balance, FontSize } from '@substrate/ui-components';
+import React from 'react';
+import styled from 'styled-components';
+
+import { OrientationType, SizeType } from './types';
+
+const Layout = styled.div`
+  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: string, size: SizeType): React.ReactElement {
+  return (
+    <IdentityIcon value={address} theme={'substrate'} size={ICON_SIZES[size]} />
+  );
+}
+
+type FontSizeType = {
+  [x: string]: string;
+};
+
+const FONT_SIZES: FontSizeType = {
+  tiny: 'small',
+  small: 'medium',
+  medium: 'large',
+  large: 'big',
+};
+
+function renderShortAddress(address: string): string {
+  return address
+    .slice(0, 8)
+    .concat('......')
+    .concat(address.slice(address.length - 8, address.length));
+}
+
+function renderDetails(
+  address: string,
+  api: ApiRx,
+  summaryProps: Exclude<AddressSummaryProps, keyof 'address'>
+): React.ReactElement {
+  const {
+    detailed,
+    name = PLACEHOLDER_NAME,
+    noBalance,
+    noPlaceholderName,
+    orientation,
+    size = 'medium',
+    withShortAddress,
+  } = summaryProps;
+
+  return (
+    <>
+      {noPlaceholderName ? null : name}
+      {withShortAddress && renderShortAddress(address)}
+      {!noBalance && (
+        <Balance
+          address={address}
+          api={api}
+          detailed={detailed}
+          orientation={orientation}
+          fontSize={FONT_SIZES[size] as FontSize}
+        />
+      )}
+    </>
+  );
+}
+
+export function AddressSummary(props: AddressSummaryProps): React.ReactElement {
+  const { address, api, size = 'medium' } = props;
+
+  if (address) {
+    return (
+      <Layout>
+        {renderIcon(address, size)}
+        {renderDetails(address, api, props)}
+      </Layout>
+    );
+  } else {
+    return <Spinner />;
+  }
+}

front/gatsby/src/components/AddressSummary/index.ts

@@ -0,0 +1,5 @@
+// Copyright 2018-2020 @paritytech/Nomidot authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export * from './AddressSummary';

front/gatsby/src/components/AddressSummary/types.ts

@@ -0,0 +1,6 @@
+// Copyright 2018-2020 @paritytech/Nomidot authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export type OrientationType = 'horizontal' | 'vertical';
+export type SizeType = 'tiny' | 'small' | 'medium' | 'large';

front/gatsby/src/components/BondingModal.tsx

@@ -299,4 +299,4 @@ const BondingModal = (): React.ReactElement => {
   );
 };
 
-export default BondingModal;
+export { BondingModal };

front/gatsby/src/components/index.ts

@@ -2,6 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+export * from './AddressSummary';
+export * from './BondingModal';
 export * from './Button';
 export * from './Cart';
 export * from './Layout';

front/gatsby/src/pages/accounts.tsx

@@ -6,15 +6,23 @@ import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
 import { RouteComponentProps } from '@reach/router';
 import { AccountsContext, ApiContext } from '@substrate/context';
 import { Spinner } from '@substrate/design-system';
-import { AddressSummary, List } from '@substrate/ui-components';
+import { List } from '@substrate/ui-components';
 import React, { useContext } from 'react';
 import Dropdown from 'semantic-ui-react/dist/commonjs/modules/Dropdown';
 import shortid from 'shortid';
 import styled from 'styled-components';
 import media from 'styled-media-query';
 
-import BondingModal from '../components/BondingModal';
-import { Table, Tb, Tc, Th, Thead, Tr } from '../components/Table';
+import {
+  AddressSummary,
+  BondingModal,
+  Table,
+  Tb,
+  Tc,
+  Th,
+  Thead,
+  Tr,
+} from '../components';
 import { toShortAddress } from '../util';
 
 const AccountsPageGrid = styled.div`
@@ -220,11 +228,13 @@ const AccountsList = (_props: Props): React.ReactElement => {
           </Tr>
         </Thead>
         <Tb>
-          {allStashes.length
-            ? allStashes.map((account: string) =>
-                renderBondedAccountRow(account)
-              )
-            : 'No Bonded Accounts'}
+          {allStashes.length ? (
+            allStashes.map((account: string) => renderBondedAccountRow(account))
+          ) : (
+            <Tr>
+              <Tc rowSpan={4}>No Bonded Accounts</Tc>
+            </Tr>
+          )}
         </Tb>
       </Table>
     );