From a11244adf46ac984ee586cf86924c926eacb8bcd Mon Sep 17 00:00:00 2001 From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Date: Sat, 10 Oct 2020 12:01:05 +0200 Subject: [PATCH] Show a specific icon on external account (#484) * icon to show external account * revert renaming * lint * use find instead of some * before the name * Update packages/extension-ui/src/Popup/Forget.tsx * Update packages/extension-ui/src/components/Address.tsx --- .../src/Popup/Accounts/Account.tsx | 1 + packages/extension-ui/src/Popup/Forget.tsx | 2 +- packages/extension-ui/src/Popup/ImportQr.tsx | 1 + .../src/Popup/Signing/Request.tsx | 6 +- .../extension-ui/src/assets/arrowTopRight.svg | 62 +++++++++++++++++++ .../extension-ui/src/components/Address.tsx | 25 +++++++- .../extension-ui/src/components/Identicon.tsx | 5 +- 7 files changed, 96 insertions(+), 6 deletions(-) create mode 100644 packages/extension-ui/src/assets/arrowTopRight.svg diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index 446da57f..c0017965 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -123,6 +123,7 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren address={address} className='address' genesisHash={genesisHash} + isExternal={isExternal} isHidden={isHidden} name={editedName} parentName={parentName} diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx index 4b662a06..b7c799b0 100644 --- a/packages/extension-ui/src/Popup/Forget.tsx +++ b/packages/extension-ui/src/Popup/Forget.tsx @@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react'; import { RouteComponentProps, withRouter } from 'react-router'; import styled from 'styled-components'; -import { ActionContext, Address, Button, Warning, ActionBar, ActionText } from '../components'; +import { ActionContext, Address, ActionBar, ActionText, Button, Warning } from '../components'; import useTranslation from '../hooks/useTranslation'; import { forgetAccount } from '../messaging'; import { Header } from '../partials'; diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx index 2807a1fd..1215a120 100644 --- a/packages/extension-ui/src/Popup/ImportQr.tsx +++ b/packages/extension-ui/src/Popup/ImportQr.tsx @@ -40,6 +40,7 @@ export default function ImportQr (): React.ReactElement {
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx index f43b7e6f..ed7363ad 100644 --- a/packages/extension-ui/src/Popup/Signing/Request.tsx +++ b/packages/extension-ui/src/Popup/Signing/Request.tsx @@ -152,6 +152,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
{isExternal @@ -189,7 +190,10 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, return ( <>
-
+
+ + + + + image/svg+xml + + + + + + + + + + diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index fab2ac08..2469cd34 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -12,6 +12,7 @@ import styled from 'styled-components'; import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'; import copyIcon from '../assets/copy.svg'; +import externalIcon from '../assets/arrowTopRight.svg'; import hiddenIcon from '../assets/hidden.svg'; import details from '../assets/details.svg'; import parentArrow from '../assets/arrowParentLabel.svg'; @@ -30,6 +31,7 @@ interface Props { children?: React.ReactNode; className?: string; genesisHash?: string | null; + isExternal?: boolean | null; isHidden?: boolean; name?: React.ReactNode | null; parentName?: string | null; @@ -71,7 +73,7 @@ function recodeAddress (address: string, accounts: AccountWithChildren[], chain: const ACCOUNTS_SCREEN_HEIGHT = 550; -function Address ({ actions, address, children, className, genesisHash, isHidden, name, parentName, suri, toggleActions }: Props): React.ReactElement { +function Address ({ actions, address, children, className, genesisHash, isExternal, isHidden, name, parentName, suri, toggleActions }: Props): React.ReactElement { const { t } = useTranslation(); const { accounts } = useContext(AccountContext); const settings = useContext(SettingsContext); @@ -110,7 +112,18 @@ function Address ({ actions, address, children, className, genesisHash, isHidden const _onClick = useCallback((): void => setShowActionsMenu(!showActionsMenu), [showActionsMenu]); const _onCopy = useCallback((): void => show(t('Copied')), [show, t]); - const displayedName = name || (account && account.name) || t(''); + const displayedName = ( + <> + {(account?.isExternal || isExternal) && ( + + )} + {name || account?.name || t('')} + + ); return (
@@ -118,6 +131,7 @@ function Address ({ actions, address, children, className, genesisHash, isHidden ` } } + .externalIcon { + height: 10px; + width: 10px; + margin-right: 0.5rem; + background: ${theme.labelColor} + } + .identityIcon { margin-left: 15px; margin-right: 10px; diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx index c1b16d61..4061a938 100644 --- a/packages/extension-ui/src/components/Identicon.tsx +++ b/packages/extension-ui/src/components/Identicon.tsx @@ -8,11 +8,12 @@ import styled from 'styled-components'; import Icon from '@polkadot/react-identicon'; interface Props { - iconTheme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate'; className?: string; + iconTheme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate'; + isExternal?: boolean | null; + onCopy?: () => void; prefix?: number; value?: string | null; - onCopy?: () => void; } function Identicon ({ className, iconTheme, onCopy, prefix, value }: Props): React.ReactElement {