pool+accounts: display trader key in account section

Author: jamaljsr

app/src/components/pool/account/AccountSummary.tsx

@@ -69,6 +69,12 @@ const AccountSummary: React.FC = () => {
           <span>{l('accountStatus')}</span>
           <StatusBadge pending={account.isPending}>{account.stateLabel}</StatusBadge>
         </SummaryItem>
+        <SummaryItem>
+          <span>{l('traderKey')}</span>
+          <Tip overlay={account.traderKey} capitalize={false}>
+            <span>{account.traderKeyEllipsed}</span>
+          </Tip>
+        </SummaryItem>
         <SummaryItem>
           <span>{l('fundingTxn')}</span>
           <Tip overlay={account.fundingTxnId} capitalize={false}>

app/src/i18n/locales/en-US.json

@@ -95,6 +95,7 @@
   "cmps.pool.account.AccountSummary.expiresIn": "Expires in",
   "cmps.pool.account.AccountSummary.expiresHeight": "{{remaining}} blocks (Height #{{height}})",
   "cmps.pool.account.AccountSummary.accountStatus": "Account Status",
+  "cmps.pool.account.AccountSummary.traderKey": "Trader Key",
   "cmps.pool.account.AccountSummary.fundingTxn": "Funding Transaction",
   "cmps.pool.account.AccountSummary.currentBalance": "Current Balance",
   "cmps.pool.account.AccountSummary.openOrdersCount": "Open Orders",

app/src/store/models/account.ts

@@ -22,6 +22,11 @@ export default class Account {
     this.update(poolAccount);
   }
 
+  /** the first and last 6 chars of the trader key */
+  get traderKeyEllipsed() {
+    return ellipseInside(this.traderKey, 4);
+  }
+
   /** the first and last 6 chars of the funding txn id */
   get fundingTxnIdEllipsed() {
     return ellipseInside(this.fundingTxnId, 4);