Add logo option to appMetadata

Author: lnbc1QWFyb24

packages/common/src/types.ts

@@ -124,9 +124,12 @@ export interface AppMetadata {
   /* App name */
   name: string
 
-  /* SVG icon string, with height set to 100% */
+  /* SVG icon string or image url, with height set to 100% */
   icon: string
 
+  /* SVG logo (icon and text) string or image url, with width set to 100% */
+  logo?: string
+
   /* Description of app*/
   description?: string
 

packages/core/src/validation.ts

@@ -68,6 +68,7 @@ const appMetadata = Joi.object({
   name: Joi.string().required(),
   description: Joi.string().required(),
   icon: Joi.string().required(),
+  logo: Joi.string(),
   gettingStartedGuide: Joi.string(),
   email: Joi.string(),
   appUrl: Joi.string(),

packages/core/src/views/connect/Sidebar.svelte

@@ -9,7 +9,7 @@
   export let step: keyof i18n['connect']
 
   const { appMetadata } = internalState$.getValue()
-  const { icon, name = 'This app' } = appMetadata || {}
+  const { icon, logo, name = 'This app' } = appMetadata || {}
 
   const defaultContent = en.connect[step].sidebar
   const { subheading, paragraph } = defaultContent
@@ -110,11 +110,11 @@
 <div class="sidebar">
   <div class="inner-container">
     <div class="icon-container">
-      {#if icon}
-        {#if isUrl(icon)}
-          <img height="100%" src={icon} alt="logo" />
+      {#if logo || icon}
+        {#if isUrl(logo || icon)}
+          <img height="100%" src={logo || icon} alt="logo" />
         {:else}
-          {@html icon}
+          {@html logo || icon}
         {/if}
       {:else}
         {@html blocknative}