fix: enforce data-uri type (#7)

wevm · Jan 16, 2024 · 0d6999c · 0d6999c
1 parent 55bb0f6
commit 0d6999c
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 38 deletions.
diff --git a/.changeset/fair-rice-raise.md b/.changeset/fair-rice-raise.md
@@ -0,0 +1,5 @@
+---
+"mipd": patch
+---
+
+Enforcing `icon` string type to be a RFC-2397 compliant data URI
diff --git a/README.md b/README.md
@@ -281,7 +281,7 @@ import { announceProvider } from 'mipd'
 
 const unsubscribe = announceProvider({
   info: {
-    icon: 'https://example.com/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example',
     rdns: 'com.example',
     uuid: '00000000-0000-0000-0000-000000000000'

diff --git a/playgrounds/vite-react/src/wallet.ts b/playgrounds/vite-react/src/wallet.ts
@@ -3,7 +3,7 @@ import 'mipd/window'
 
 announceProvider({
   info: {
-    icon: 'https://example.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d1',
@@ -13,7 +13,7 @@ announceProvider({
 
 announceProvider({
   info: {
-    icon: 'https://foo.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Foo Wallet',
     rdns: 'org.foo',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
@@ -25,7 +25,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://bar.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Bar Wallet',
     rdns: 'io.bar',
     uuid: '350670db-19fa-4704-a166-e52e178b59d3',
@@ -37,7 +37,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://baz.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Baz Wallet',
     rdns: 'com.baz',
     uuid: '350670db-19fa-4704-a166-e52e178b59d4',

diff --git a/playgrounds/vite-svelte/src/wallet.ts b/playgrounds/vite-svelte/src/wallet.ts
@@ -3,7 +3,7 @@ import 'mipd/window'
 
 announceProvider({
   info: {
-    icon: 'https://example.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d1',
@@ -13,7 +13,7 @@ announceProvider({
 
 announceProvider({
   info: {
-    icon: 'https://foo.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Foo Wallet',
     rdns: 'org.foo',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
@@ -25,7 +25,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://bar.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Bar Wallet',
     rdns: 'io.bar',
     uuid: '350670db-19fa-4704-a166-e52e178b59d3',
@@ -37,7 +37,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://baz.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Baz Wallet',
     rdns: 'com.baz',
     uuid: '350670db-19fa-4704-a166-e52e178b59d4',

diff --git a/playgrounds/vite-vue/src/wallet.ts b/playgrounds/vite-vue/src/wallet.ts
@@ -3,7 +3,7 @@ import 'mipd/window'
 
 announceProvider({
   info: {
-    icon: 'https://example.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d1',
@@ -13,7 +13,7 @@ announceProvider({
 
 announceProvider({
   info: {
-    icon: 'https://foo.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Foo Wallet',
     rdns: 'org.foo',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
@@ -25,7 +25,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://bar.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Bar Wallet',
     rdns: 'io.bar',
     uuid: '350670db-19fa-4704-a166-e52e178b59d3',
@@ -37,7 +37,7 @@ await new Promise((res) => setTimeout(res, 1000))
 
 announceProvider({
   info: {
-    icon: 'https://baz.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Baz Wallet',
     rdns: 'com.baz',
     uuid: '350670db-19fa-4704-a166-e52e178b59d4',

diff --git a/src/store.test.ts b/src/store.test.ts
@@ -8,7 +8,7 @@ import { announceProvider } from './utils.js'
 
 const detail_1 = {
   info: {
-    icon: 'https://example.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
@@ -18,7 +18,7 @@ const detail_1 = {
 
 const detail_2 = {
   info: {
-    icon: 'https://foo.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Foo Wallet',
     rdns: 'org.foo',
     uuid: '12345555-19fa-4704-a166-e52e178b59d2',
@@ -121,7 +121,7 @@ describe('createStore', () => {
       [
         {
           "info": {
-            "icon": "https://example.io/icon.png",
+            "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
             "name": "Example Wallet",
             "rdns": "org.example",
             "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -137,7 +137,7 @@ describe('createStore', () => {
       [
         {
           "info": {
-            "icon": "https://example.io/icon.png",
+            "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
             "name": "Example Wallet",
             "rdns": "org.example",
             "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -146,7 +146,7 @@ describe('createStore', () => {
         },
         {
           "info": {
-            "icon": "https://foo.io/icon.png",
+            "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
             "name": "Foo Wallet",
             "rdns": "org.foo",
             "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -162,7 +162,7 @@ describe('createStore', () => {
       [
         {
           "info": {
-            "icon": "https://example.io/icon.png",
+            "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
             "name": "Example Wallet",
             "rdns": "org.example",
             "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -171,7 +171,7 @@ describe('createStore', () => {
         },
         {
           "info": {
-            "icon": "https://foo.io/icon.png",
+            "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
             "name": "Foo Wallet",
             "rdns": "org.foo",
             "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -218,7 +218,7 @@ describe('createStore', () => {
         [
           {
             "info": {
-              "icon": "https://example.io/icon.png",
+              "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
               "name": "Example Wallet",
               "rdns": "org.example",
               "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -230,7 +230,7 @@ describe('createStore', () => {
           "added": [
             {
               "info": {
-                "icon": "https://example.io/icon.png",
+                "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                 "name": "Example Wallet",
                 "rdns": "org.example",
                 "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -246,7 +246,7 @@ describe('createStore', () => {
         [
           {
             "info": {
-              "icon": "https://example.io/icon.png",
+              "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
               "name": "Example Wallet",
               "rdns": "org.example",
               "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -255,7 +255,7 @@ describe('createStore', () => {
           },
           {
             "info": {
-              "icon": "https://foo.io/icon.png",
+              "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
               "name": "Foo Wallet",
               "rdns": "org.foo",
               "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -267,7 +267,7 @@ describe('createStore', () => {
           "added": [
             {
               "info": {
-                "icon": "https://foo.io/icon.png",
+                "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                 "name": "Foo Wallet",
                 "rdns": "org.foo",
                 "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -290,7 +290,7 @@ describe('createStore', () => {
             "removed": [
               {
                 "info": {
-                  "icon": "https://example.io/icon.png",
+                  "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                   "name": "Example Wallet",
                   "rdns": "org.example",
                   "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -299,7 +299,7 @@ describe('createStore', () => {
               },
               {
                 "info": {
-                  "icon": "https://foo.io/icon.png",
+                  "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                   "name": "Foo Wallet",
                   "rdns": "org.foo",
                   "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -350,7 +350,7 @@ describe('createStore', () => {
           [
             {
               "info": {
-                "icon": "https://example.io/icon.png",
+                "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                 "name": "Example Wallet",
                 "rdns": "org.example",
                 "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -359,7 +359,7 @@ describe('createStore', () => {
             },
             {
               "info": {
-                "icon": "https://foo.io/icon.png",
+                "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                 "name": "Foo Wallet",
                 "rdns": "org.foo",
                 "uuid": "12345555-19fa-4704-a166-e52e178b59d2",
@@ -371,7 +371,7 @@ describe('createStore', () => {
             "added": [
               {
                 "info": {
-                  "icon": "https://example.io/icon.png",
+                  "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                   "name": "Example Wallet",
                   "rdns": "org.example",
                   "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -380,7 +380,7 @@ describe('createStore', () => {
               },
               {
                 "info": {
-                  "icon": "https://foo.io/icon.png",
+                  "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
                   "name": "Foo Wallet",
                   "rdns": "org.foo",
                   "uuid": "12345555-19fa-4704-a166-e52e178b59d2",

diff --git a/src/types.test-d.ts b/src/types.test-d.ts
@@ -17,15 +17,15 @@ test('EIP6963ProviderInfo', () => {
   expectTypeOf<EIP6963ProviderInfo['uuid']>().toEqualTypeOf<string>
 
   const KnownRdns_1: EIP6963ProviderInfo = {
-    icon: 'https://metamask.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'MetaMask',
     rdns: 'io.metamask',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
   }
   KnownRdns_1
 
   const UnknownRdns_1: EIP6963ProviderInfo = {
-    icon: 'https://wallet.example.org/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',

diff --git a/src/types.ts b/src/types.ts
@@ -15,7 +15,7 @@ export interface EIP6963ProviderDetail<
  * Metadata of the EIP-1193 Provider.
  */
 export interface EIP6963ProviderInfo<TRdns extends string = Rdns> {
-  icon: string
+  icon: `data:image/${string}` // RFC-2397
   name: string
   rdns: TRdns
   uuid: string

diff --git a/src/utils.test.ts b/src/utils.test.ts
@@ -7,7 +7,7 @@ import { announceProvider, requestProviders } from './utils.js'
 
 const detail_1 = {
   info: {
-    icon: 'https://example.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Example Wallet',
     rdns: 'org.example',
     uuid: '350670db-19fa-4704-a166-e52e178b59d2',
@@ -17,7 +17,7 @@ const detail_1 = {
 
 const detail_2 = {
   info: {
-    icon: 'https://foo.io/icon.png',
+    icon: 'data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 32 32"/>',
     name: 'Foo Wallet',
     rdns: 'org.foo',
     uuid: '12345555-19fa-4704-a166-e52e178b59d2',
@@ -39,7 +39,7 @@ test('requestProviders', async () => {
   expect(results[0]).toMatchInlineSnapshot(`
     {
       "info": {
-        "icon": "https://example.io/icon.png",
+        "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
         "name": "Example Wallet",
         "rdns": "org.example",
         "uuid": "350670db-19fa-4704-a166-e52e178b59d2",
@@ -50,7 +50,7 @@ test('requestProviders', async () => {
   expect(results[1]).toMatchInlineSnapshot(`
     {
       "info": {
-        "icon": "https://foo.io/icon.png",
+        "icon": "data:image/svg+xml,<svg width=\\"32px\\" height=\\"32px\\" viewBox=\\"0 0 32 32\\"/>",
         "name": "Foo Wallet",
         "rdns": "org.foo",
         "uuid": "12345555-19fa-4704-a166-e52e178b59d2",