From 39f1f577c84e4b1a8d1ba06c2b28bbb8083f40ee Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 28 Jan 2021 18:54:17 +0100
Subject: [PATCH] Adjust badge for dev accounts (#4520)

* Adjust badge for dev accounts

* lint
---
 .../page-accounts/src/Accounts/Account.tsx    | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index ccf6d25e3c..d32b81167c 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -221,18 +221,27 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
       <td className='together'>
         {meta.genesisHash
           ? <Badge color='transparent' />
-          : (
-            <Badge
-              color='orange'
-              hover={
-                <div>
-                  <p>{t<string>('This account is available on all networks. Ensure you tie it to a specific network via the account options ("only this network" option) to limit availability on a single network.')}</p>
-                  <p>{t<string>('This is especially prudent in cases where the address is only destined to be used on a single network or linked to a specific device.')}</p>
-                </div>
-              }
-              icon='exclamation-triangle'
-            />
-          )
+          : isDevelopment
+            ? (
+              <Badge
+                className='devBadge'
+                color='orange'
+                hover={t<string>('This is a development account derived from the known development seed. Do now use for any funds on a non-development network.')}
+                icon='wrench'
+              />
+            )
+            : (
+              <Badge
+                color='orange'
+                hover={
+                  <div>
+                    <p>{t<string>('This account is available on all networks. Ensure you tie it to a specific network via the account options ("only this network" option) to limit availability on a single network.')}</p>
+                    <p>{t<string>('This is especially prudent in cases where the address is only destined to be used on a single network or linked to a specific device.')}</p>
+                  </div>
+                }
+                icon='exclamation-triangle'
+              />
+            )
         }
         {recoveryInfo && (
           <Badge
@@ -616,4 +625,8 @@ export default React.memo(styled(Account)`
     width: 100%;
     min-height: 1.5rem;
   }
+
+  .devBadge {
+    opacity: 0.65;
+  }
 `);