Adds option to use image URL for icon (#821)

Author: lnbc1QWFyb24

packages/core/README.md

@@ -54,7 +54,7 @@ An object that defines your app:
 type AppMetadata = {
   // app name
   name: string
-  // SVG icon string, with height or width (whichever is larger) set to 100%
+  // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL
   icon: string
   // description of app
   description?: string

packages/core/src/utils.ts

@@ -43,3 +43,16 @@ export function validEnsChain(chainId: ChainId): boolean {
       return false
   }
 }
+
+export function isUrl(str: string): boolean {
+  let url
+
+  try {
+    url = new URL(str)
+  } catch (_) {
+    console.log(false)
+    return false
+  }
+console.log(url.protocol === 'http:' || url.protocol === 'https:')
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}

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

@@ -4,6 +4,7 @@
   import { internalState$ } from '../../streams'
   import en from '../../i18n/en.json'
   import type { i18n } from '../../types'
+  import { isUrl } from '../../utils'
 
   export let step: keyof i18n['connect']
 
@@ -118,7 +119,11 @@
   <div class="inner-container">
     <div class="icon-container">
       {#if icon}
-        {@html icon}
+        {#if isUrl(icon)}
+          <img height="100%" src={icon} alt="logo" />
+        {:else}
+          {@html icon}
+        {/if}
       {:else}
         {@html blocknative}
       {/if}

packages/core/src/views/shared/WalletAppBadge.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
+  import { isUrl } from '../../utils'
   import Spinner from './Spinner.svelte'
   export let size: number // px
-  export let icon: Promise<string> | string // svg string
+  export let icon: Promise<string> | string // svg string or url string
   export let loading = false
 
   export let border:
@@ -148,7 +149,13 @@
       <div class="placeholder-icon" />
     {:then iconLoaded}
       <div in:fade class="icon">
-        {@html iconLoaded}
+        {#if isUrl(iconLoaded)}
+          <!-- load img url -->
+          <img height="100%" src={iconLoaded} alt="logo" />
+        {:else}
+          <!-- render svg string -->
+          {@html iconLoaded}
+        {/if}
       </div>
     {/await}
   {/if}