Merge branch 'format-account-number'

5 files changed, 44 insertions, 13 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 5b5a393f62..18147ef265 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -3,8 +3,8 @@ import { Component, Text, View } from 'reactxp';
 import AccountExpiry from '../../shared/account-expiry';
 import { messages } from '../../shared/gettext';
 import styles from './AccountStyles';
+import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
-import ClipboardLabel from './ClipboardLabel';
 import { Container, Layout } from './Layout';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
@@ -47,9 +47,9 @@ export default class Account extends Component<IProps> {
                     <Text style={styles.account__row_label}>
                       {messages.pgettext('account-view', 'Account number')}
                     </Text>
-                    <ClipboardLabel
+                    <AccountTokenLabel
                       style={styles.account__row_value}
-                      value={this.props.accountToken || ''}
+                      accountToken={this.props.accountToken || ''}
                     />
                   </View>
 
diff --git a/gui/src/renderer/components/AccountTokenLabel.tsx b/gui/src/renderer/components/AccountTokenLabel.tsx
new file mode 100644
index 0000000000..d581749871
--- /dev/null
+++ b/gui/src/renderer/components/AccountTokenLabel.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Types } from 'reactxp';
+import { formatAccountToken } from '../lib/account';
+import ClipboardLabel from './ClipboardLabel';
+
+interface IAccountTokenLabelProps {
+  accountToken: string;
+  style?: Types.StyleRuleSetRecursive<Types.TextStyleRuleSet>;
+}
+
+export default function AccountTokenLabel(props: IAccountTokenLabelProps) {
+  return (
+    <ClipboardLabel
+      style={props.style}
+      value={props.accountToken}
+      displayValue={formatAccountToken(props.accountToken)}
+    />
+  );
+}
diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index 3a4f96d0a1..567c41e45c 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -7,7 +7,7 @@ interface IProps {
   displayValue?: string;
   delay: number;
   message: string;
-  style?: Types.TextStyleRuleSet;
+  style?: Types.StyleRuleSetRecursive<Types.TextStyleRuleSet>;
 }
 
 interface IState {
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index f49054f076..82566996db 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -3,6 +3,7 @@ import { Animated, Component, Styles, Text, TextInput, Types, UserInterface, Vie
 import { colors, links } from '../../config.json';
 import consumePromise from '../../shared/promise';
 import { messages } from '../../shared/gettext';
+import { formatAccountToken } from '../lib/account';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
@@ -422,15 +423,18 @@ class AccountDropdown extends Component<IAccountDropdownProps> {
     const uniqueItems = [...new Set(this.props.items)];
     return (
       <View>
-        {uniqueItems.map((token) => (
-          <AccountDropdownItem
-            key={token}
-            value={token}
-            label={token}
-            onSelect={this.props.onSelect}
-            onRemove={this.props.onRemove}
-          />
-        ))}
+        {uniqueItems.map((token) => {
+          const label = formatAccountToken(token);
+          return (
+            <AccountDropdownItem
+              key={token}
+              value={token}
+              label={label}
+              onSelect={this.props.onSelect}
+              onRemove={this.props.onRemove}
+            />
+          );
+        })}
       </View>
     );
   }
diff --git a/gui/src/renderer/lib/account.ts b/gui/src/renderer/lib/account.ts
new file mode 100644
index 0000000000..c862d84416
--- /dev/null
+++ b/gui/src/renderer/lib/account.ts
@@ -0,0 +1,8 @@
+export function formatAccountToken(accountToken: string) {
+  const parts =
+    accountToken
+      .replace(/\s+| /g, '')
+      .substring(0, 16)
+      .match(new RegExp('.{1,4}', 'g')) || [];
+  return parts.join(' ');
+}