From b21956f608fe0b37a9c72067716ed8f003f4071c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 2 Jun 2020 12:43:52 +0200
Subject: [PATCH] Use chain colors for badge display (#357)

---
 packages/extension-inject/src/types.ts             |  1 +
 .../extension-ui/src/Popup/Signing/Request.tsx     | 14 +++++++++-----
 packages/extension-ui/src/components/Address.tsx   |  5 +++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/extension-inject/src/types.ts b/packages/extension-inject/src/types.ts
index 260c1c16..3c3e2294 100644
--- a/packages/extension-inject/src/types.ts
+++ b/packages/extension-inject/src/types.ts
@@ -48,6 +48,7 @@ export interface ProviderMeta {
 }
 
 export interface MetadataDef {
+  color?: string;
   chain: string;
   genesisHash: string;
   icon: string;
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx
index 3c0b18b9..54e0bb7c 100644
--- a/packages/extension-ui/src/Popup/Signing/Request.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Request.tsx
@@ -78,10 +78,12 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
 
     return (
       <>
-        <Address
-          address={json.address}
-          genesisHash={json.genesisHash}
-        />
+        <div>
+          <Address
+            address={json.address}
+            genesisHash={json.genesisHash}
+          />
+        </div>
         {isExternal
           ? (
             <Qr
@@ -121,7 +123,9 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
 
     return (
       <>
-        <Address address={raw.address} />
+        <div>
+          <Address address={raw.address} />
+        </div>
         <Bytes
           bytes={raw.data}
           url={url}
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 41d78505..873e3ffd 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -151,6 +151,11 @@ function Address ({ actions, address, children, className, genesisHash, name, pa
               <div
                 className='banner chain'
                 data-field='chain'
+                style={
+                  chain.definition.color
+                    ? { backgroundColor: chain.definition.color }
+                    : undefined
+                }
               >
                 {chain.name}
               </div>