fix: vite static asset URL

.changeset/few-eagles-know.md

@@ -0,0 +1,5 @@
+---
+"dot-connect": patch
+---
+
+Applied workaround for Vite static asset URL [bug](https://github.com/vitejs/vite/issues/8427).

packages/dot-connect/package.json

@@ -26,8 +26,7 @@
     "./font.css": "./assets/fonts/index.css"
   },
   "files": [
-    "build",
-    "assets"
+    "build"
   ],
   "scripts": {
     "dev": "tsc --build --watch",

packages/dot-connect/src/utils.ts

@@ -1,4 +1,5 @@
 import type { InjectedWalletInfo, Platform } from "./wallets/types.js";
+import type { HTMLTemplateResult } from "lit";
 
 export function logAndThrow(error: unknown): never {
   console.error(error);
@@ -60,3 +61,13 @@ export function getDownloadUrl(walletInfo: InjectedWalletInfo) {
 
   return { platform, url };
 }
+
+// TODO: replace with `new URL("logo.svg", import.meta.url)`
+// once Vite fixes https://github.com/vitejs/vite/issues/8427
+export function urlFromSvg(svg: HTMLTemplateResult) {
+  return new URL(
+    URL.createObjectURL(
+      new Blob([svg.strings.join()], { type: "image/svg+xml" }),
+    ),
+  );
+}

packages/dot-connect/src/wallets/ledger.ts

@@ -1,7 +1,24 @@
+import { urlFromSvg } from "../utils.js";
 import type { BaseWalletInfo, WalletConfig } from "./types.js";
+import { html } from "lit";
 
 export const ledger: WalletConfig<BaseWalletInfo> = {
   selector: (wallet) => wallet.id === "ledger",
   name: "Ledger",
-  logo: new URL("../../assets/imgs/ledger.svg", import.meta.url),
+  logo: urlFromSvg(
+    html`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 28 28"
+      fill="none"
+    >
+      <script xmlns="" />
+      <path fill="#000" d="M0 0h28v28H0z" />
+      <path
+        fill="#fff"
+        fill-rule="evenodd"
+        d="M11.65 4.4H4.4V9h1.1V5.5l6.15-.04V4.4Zm.05 5.95v7.25h4.6v-1.1h-3.5l-.04-6.15H11.7ZM4.4 23.6h7.25v-1.06L5.5 22.5V19H4.4v4.6ZM16.35 4.4h7.25V9h-1.1V5.5l-6.15-.04V4.4Zm7.25 19.2h-7.25v-1.06l6.15-.04V19h1.1v4.6Z"
+        clip-rule="evenodd"
+      />
+    </svg>`,
+  ),
 };

packages/dot-connect/src/wallets/nova.ts

@@ -1,11 +1,53 @@
+import { urlFromSvg } from "../utils.js";
 import type { InjectedWalletInfo, WalletConfig } from "./types.js";
 import type { Wallet } from "@reactive-dot/core/wallets.js";
+import { html } from "lit";
 
 export const nova: WalletConfig<InjectedWalletInfo> = {
   selector: (_wallet: Wallet) => false,
   name: "Nova Wallet",
   platforms: ["ios", "android"],
-  logo: new URL("../../assets/imgs/nova.svg", import.meta.url),
+  logo: urlFromSvg(
+    html`<svg
+      x="0px"
+      y="0px"
+      viewBox="0 0 324 324"
+      style="enable-background:new 0 0 324 324;"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <style type="text/css">
+        .st0 {
+          fill: url(#SVGID_1_);
+        }
+        .st1 {
+          fill: #ffffff;
+        }
+      </style>
+      <radialGradient
+        id="SVGID_1_"
+        cx="8.15"
+        cy="19.93"
+        r="372.6356"
+        gradientTransform="matrix(1 0 0 -1 0 326)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="5.331913e-02" style="stop-color:#D7D3E9" />
+        <stop offset="0.1933" style="stop-color:#A19CDE" />
+        <stop offset="0.3834" style="stop-color:#696BD9" />
+        <stop offset="0.54" style="stop-color:#3A5AE7" />
+        <stop offset="0.7735" style="stop-color:#225FE7" />
+        <stop offset="1" style="stop-color:#0883D1" />
+      </radialGradient>
+      <path
+        class="st0"
+        d="M84.1,0h155.8C286.3,0,324,37.7,324,84.1v155.8c0,46.5-37.7,84.1-84.1,84.1H84.1C37.7,324,0,286.3,0,239.9V84.1  C0,37.7,37.7,0,84.1,0z"
+      />
+      <path
+        class="st1"
+        d="M275,166.7v3c-18.4,2.9-58,9.8-77.5,17.2c-7,2.7-12.5,8.1-15.2,15.1c-7.4,19.4-14.4,59.2-17.3,77.7h-6  c-2.9-18.5-9.9-58.4-17.3-77.7c-2.7-6.9-8.2-12.4-15.2-15.1c-19.5-7.5-59-14.3-77.5-17.2v-6c18.4-2.9,58-9.8,77.5-17.2  c7-2.7,12.5-8.1,15.2-15.1c7.5-19.4,14.4-59.2,17.3-77.7h6c2.9,18.5,9.9,58.3,17.3,77.7c2.7,6.9,8.2,12.4,15.2,15.1  c19.5,7.4,59.1,14.3,77.5,17.2L275,166.7z"
+      />
+    </svg>`,
+  ),
   downloadUrl: {
     ios: "https://apps.apple.com/us/app/nova-polkadot-wallet/id1597119355",
     android:

packages/dot-connect/src/wallets/polkadot-js.ts

@@ -1,11 +1,39 @@
+import { urlFromSvg } from "../utils.js";
 import type { InjectedWalletInfo, WalletConfig } from "./types.js";
 import type { Wallet } from "@reactive-dot/core/wallets.js";
+import { html } from "lit";
 
 export const polkadotJs: WalletConfig<InjectedWalletInfo> = {
   selector: (wallet: Wallet) => wallet.id === "injected/polkadot-js",
   name: "Polkadot{.js}",
   platforms: ["chrome", "firefox"],
-  logo: new URL("../../assets/imgs/polkadot-js.svg", import.meta.url),
+  logo: urlFromSvg(
+    html`<svg
+      x="0px"
+      y="0px"
+      viewBox="15 15 140 140"
+      style="enable-background:new 0 0 170 170;zoom: 1;"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <style type="text/css">
+        .bg0 {
+          fill: #ff8c00;
+        }
+        .st0 {
+          fill: #ffffff;
+        }
+      </style>
+      <g>
+        <circle class="bg0" cx="85" cy="85" r="70"></circle>
+        <g>
+          <path
+            class="st0"
+            d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z M87.7,121.7 c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9C93.3,125.7,91.2,122.4,87.7,121.7z"
+          ></path>
+        </g>
+      </g>
+    </svg>`,
+  ),
   downloadUrl: {
     chrome:
       "https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd",