feat: display account address qr code

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -90,6 +90,15 @@ function Account ({ address, className, genesisHash, hideBalance, isExternal, is
           {t<string>('Export Account')}
         </Link>
       )}
+      {!isExternal && (
+        <Link
+          className='menuItem'
+          isDanger
+          to={`/account/account-qr/${address}`}
+        >
+          {t<string>('Show Account Address')}
+        </Link>
+      )}
       {!isExternal && (
         <Link
           className='menuItem'

packages/extension-ui/src/Popup/AddressQr.tsx

@@ -0,0 +1,76 @@
+// Copyright 2019-2021 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeProps } from '../types';
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useCallback, useContext } from 'react';
+import { RouteComponentProps, withRouter } from 'react-router';
+import styled from 'styled-components';
+
+import { ActionContext, Address, VerticalSpace,  } from '../components';
+import useTranslation from '../hooks/useTranslation';
+import { Header } from '../partials';
+import QRCodeComponent from '../partials/QrCodeComponent';
+
+
+interface Props extends RouteComponentProps<{address: string}>, ThemeProps {
+  className?: string;
+}
+
+function AddressQr ({ className, match: { params: { address } } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const onAction = useContext(ActionContext);
+
+  const _goHome = useCallback(
+    () => onAction('/'),
+    [onAction]
+  );
+
+
+  return (
+    <>
+      <Header
+        showLogo
+        text={t<string>('Account QR')}>
+        <div className='steps'>
+          <button
+            className='popup__close-btn'
+            type='button'
+            onClick={_goHome}>
+            <FontAwesomeIcon
+              className='popup__close-btn-icon'
+              icon={faTimes as IconProp}
+              title='Close'
+            />
+          </button>
+        </div>
+      </Header>
+      <div className={className}>
+      <Address
+          address={address}
+          exporting
+          presentation
+        >
+           <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <QRCodeComponent value={address} size={256}/>
+        </div>
+        </Address>
+      </div>
+      <VerticalSpace />
+    </>
+  );
+}
+
+export default withRouter(styled(AddressQr)`
+  margin-top: 15px;
+  .actionArea {
+    padding: 10px 24px;
+  }
+
+  .movedWarning {
+    margin-top: 8px;
+  }
+`);

packages/extension-ui/src/Popup/index.tsx

@@ -42,6 +42,7 @@ import PhishingDetected from './PhishingDetected';
 import RestoreJson from './RestoreJson';
 import Signing from './Signing';
 import Welcome from './Welcome';
+import AddressQr from './AddressQr';
 
 const startSettings = uiSettings.get();
 
@@ -194,7 +195,10 @@ export default function Popup (): React.ReactElement {
                         <Route path='/account/create'>{wrapWithErrorBoundary(<CreateAccount />, 'account-creation')}</Route>
                         <Route path='/account/forget/:address'>{wrapWithErrorBoundary(<Forget />, 'forget-address')}</Route>
                         <Route path='/account/export/:address'>{wrapWithErrorBoundary(<Export />, 'export-address')}</Route>
-                        <Route path='/account/export-qr/:address'>{wrapWithErrorBoundary(<ExportQr />, 'export-qr-address')}</Route>
+                        <Route path='/account/export-qr/:address'>{wrapWithErrorBoundary(<ExportQr />, 'export-qr-address')}
+                        </Route>
+                        <Route path='/account/account-qr/:address'>{wrapWithErrorBoundary(<AddressQr />, 'export-address-qr')}
+                        </Route>
                         <Route path='/account/export-all'>{wrapWithErrorBoundary(<ExportAll />, 'export-all-address')}</Route>
                         <Route path='/account/import-ledger'>{wrapWithErrorBoundary(<ImportLedger />, 'import-ledger')}</Route>
                         <Route path='/account/import-qr'>{wrapWithErrorBoundary(<ImportQr />, 'import-qr')}</Route>

packages/extension-ui/src/partials/QrCodeComponent.tsx

@@ -12,7 +12,8 @@ const QRCodeComponent: React.FC<QRCodeProps> = ({ size = 384, value }) => {
       justifyContent: 'center',
       alignItems: 'center',
       background: 'white',
-      padding: '10px' }}>
+      padding: '10px' ,
+      borderRadius:'10px'}}>
       <QRCode
         value={value}
         size={size}

packages/extension/public/locales/en/translation.json

@@ -172,5 +172,8 @@
   "Create account": "",
   "Or import .": "",
   "You currently don't have any accounts. Create your first account to get started. Or import if you already have an account.": "",
-  "Export Account using QR": ""
+  "Export Account using QR": "",
+  "Show Account Address QR": "",
+  "Show Account Address": "",
+  "Account QR": ""
 }