From cc9595239115e6cc9a8fdb19dcdad049834bdd1f Mon Sep 17 00:00:00 2001 From: YJ Date: Sat, 11 Apr 2020 18:58:18 +0800 Subject: [PATCH] fix: address summary stretchy thing (#297) * fix: address summary stretchy thing * fix: lint, remove extra stuff --- .../AddressSummary/AddressSummary.styles.ts | 18 +++ .../AddressSummary/AddressSummary.tsx | 112 ++++++++++++++++++ .../src/components/AddressSummary/index.ts | 5 + .../src/components/AddressSummary/types.ts | 6 + front/gatsby/src/components/BondingModal.tsx | 2 +- front/gatsby/src/components/index.ts | 2 + front/gatsby/src/pages/accounts.tsx | 26 ++-- 7 files changed, 162 insertions(+), 9 deletions(-) create mode 100644 front/gatsby/src/components/AddressSummary/AddressSummary.styles.ts create mode 100644 front/gatsby/src/components/AddressSummary/AddressSummary.tsx create mode 100644 front/gatsby/src/components/AddressSummary/index.ts create mode 100644 front/gatsby/src/components/AddressSummary/types.ts diff --git a/front/gatsby/src/components/AddressSummary/AddressSummary.styles.ts b/front/gatsby/src/components/AddressSummary/AddressSummary.styles.ts new file mode 100644 index 00000000..4b27d90d --- /dev/null +++ b/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; +`; diff --git a/front/gatsby/src/components/AddressSummary/AddressSummary.tsx b/front/gatsby/src/components/AddressSummary/AddressSummary.tsx new file mode 100644 index 00000000..137b351e --- /dev/null +++ b/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 ( + + ); +} + +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 +): React.ReactElement { + const { + detailed, + name = PLACEHOLDER_NAME, + noBalance, + noPlaceholderName, + orientation, + size = 'medium', + withShortAddress, + } = summaryProps; + + return ( + <> + {noPlaceholderName ? null : name} + {withShortAddress && renderShortAddress(address)} + {!noBalance && ( + + )} + + ); +} + +export function AddressSummary(props: AddressSummaryProps): React.ReactElement { + const { address, api, size = 'medium' } = props; + + if (address) { + return ( + + {renderIcon(address, size)} + {renderDetails(address, api, props)} + + ); + } else { + return ; + } +} diff --git a/front/gatsby/src/components/AddressSummary/index.ts b/front/gatsby/src/components/AddressSummary/index.ts new file mode 100644 index 00000000..06f5fbd6 --- /dev/null +++ b/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'; diff --git a/front/gatsby/src/components/AddressSummary/types.ts b/front/gatsby/src/components/AddressSummary/types.ts new file mode 100644 index 00000000..04c93c19 --- /dev/null +++ b/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'; diff --git a/front/gatsby/src/components/BondingModal.tsx b/front/gatsby/src/components/BondingModal.tsx index bf93bd91..50e9aa8f 100644 --- a/front/gatsby/src/components/BondingModal.tsx +++ b/front/gatsby/src/components/BondingModal.tsx @@ -299,4 +299,4 @@ const BondingModal = (): React.ReactElement => { ); }; -export default BondingModal; +export { BondingModal }; diff --git a/front/gatsby/src/components/index.ts b/front/gatsby/src/components/index.ts index 4d34c4f5..dcd10c24 100644 --- a/front/gatsby/src/components/index.ts +++ b/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'; diff --git a/front/gatsby/src/pages/accounts.tsx b/front/gatsby/src/pages/accounts.tsx index d0913df8..1e95a6e9 100644 --- a/front/gatsby/src/pages/accounts.tsx +++ b/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 => { - {allStashes.length - ? allStashes.map((account: string) => - renderBondedAccountRow(account) - ) - : 'No Bonded Accounts'} + {allStashes.length ? ( + allStashes.map((account: string) => renderBondedAccountRow(account)) + ) : ( + + No Bonded Accounts + + )} );