Use chain colors for badge display (#357)

packages/extension-inject/src/types.ts

@@ -48,6 +48,7 @@ export interface ProviderMeta {
 }
 
 export interface MetadataDef {
+  color?: string;
   chain: string;
   genesisHash: string;
   icon: string;

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}

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>