refactor: wallet's logos (#209)

.changeset/unlucky-worms-explode.md

@@ -0,0 +1,5 @@
+---
+"dot-connect": minor
+---
+
+Added function for getting wallet's metadata.

packages/dot-connect/package.json

@@ -23,11 +23,11 @@
   "exports": {
     ".": "./build/index.js",
     "./react.js": "./build/react/index.js",
-    "./font.css": "./src/fonts.css"
+    "./font.css": "./assets/fonts/index.css"
   },
   "files": [
     "build",
-    "src/fonts.css"
+    "assets"
   ],
   "scripts": {
     "dev": "tsc --build --watch",

packages/dot-connect/src/elements/connection-dialog.ts

@@ -226,7 +226,9 @@ abstract class BaseWalletConnection<
   protected override render() {
     return html`<dc-list-item ?pending=${this.pending.value}>
       <div slot="leading" class="icon">
-        ${this.walletInfo?.logo ?? walletIcon({ size: "100%" })}
+        ${this.walletInfo === undefined
+          ? walletIcon({ size: "100%" })
+          : html`<img src=${this.walletInfo.logo.href} />`}
       </div>
       <span slot="headline">${this.walletInfo?.name ?? this.wallet.name}</span>
       <span
@@ -359,15 +361,7 @@ export class DeepLinkWalletConnection extends BaseWalletConnection<DeepLinkWalle
             <div slot="content">
               <dc-qr-code
                 .uri=${this.#uri.value}
-                .logoSrc=${(() => {
-                  const svg = this.walletInfo?.logo.strings.join("");
-
-                  if (svg === undefined) {
-                    return;
-                  }
-
-                  return `data:image/svg+xml;base64,${globalThis.btoa(svg)}`;
-                })()}
+                .logoSrc=${this.walletInfo?.logo.href}
               ></dc-qr-code>
               <div id="url-container">
                 <button
@@ -461,7 +455,9 @@ export class DownloadableWallet extends DotConnectElement {
       this.#downloadUrl.platform === "ios";
 
     return html`<dc-list-item>
-      <div slot="leading" class="icon">${this.wallet.logo}</div>
+      <div slot="leading" class="icon">
+        <img src=${this.wallet.logo.href} />
+      </div>
       <span slot="headline">${this.wallet.name}</span>
       <!-- No way to detect wether or not wallet is installed on mobile browser -->
       ${isMobile ? nothing : html`<span slot="supporting">Not installed</span>`}

packages/dot-connect/src/get-wallet-metadata.ts

@@ -0,0 +1,17 @@
+import { walletConfigs } from "./stores.js";
+import type { Wallet } from "@reactive-dot/core/wallets.js";
+
+/**
+ * @experimental
+ */
+export function getWalletMetadata(wallet: Wallet) {
+  const walletConfig = walletConfigs
+    .peek()
+    .find((config) => config.selector(wallet));
+
+  if (walletConfig === undefined) {
+    return;
+  }
+
+  return { name: walletConfig.name, logo: walletConfig.logo };
+}

packages/dot-connect/src/index.ts

@@ -4,6 +4,8 @@ import "./elements/ledger/ledger-dialog.js";
 import { walletsOrProviders$ } from "./stores.js";
 import type { Wallet, WalletProvider } from "@reactive-dot/core/wallets.js";
 
+export { getWalletMetadata } from "./get-wallet-metadata.js";
+
 export type Options = {
   wallets: ReadonlyArray<Wallet | WalletProvider>;
 };

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

@@ -1,19 +1,7 @@
-import type { WalletConfig, BaseWalletInfo } from "./types.js";
-import { html } from "lit";
+import type { BaseWalletInfo, WalletConfig } from "./types.js";
 
 export const ledger: WalletConfig<BaseWalletInfo> = {
   selector: (wallet) => wallet.id === "ledger",
   name: "Ledger",
-  logo: html`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 768.91 669.35"
-      fill="currentcolor"
-    >
-      <path
-        d="M0,479.29v190.06h289.22V627.2H42.14V479.29H0z M726.77,479.29V627.2H479.69v42.14h289.22V479.29H726.77z M289.64,190.06
-	v289.22h190.05v-38.01H331.78V190.06H289.64z M0,0v190.06h42.14V42.14h247.08V0H0z M479.69,0v42.14h247.08v147.92h42.14V0H479.69z"
-      />
-    </svg>
-  `,
+  logo: new URL("../../assets/imgs/ledger.svg", import.meta.url),
 };

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

@@ -1,50 +1,11 @@
-import type { WalletConfig, InjectedWalletInfo } from "./types.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: 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>`,
+  logo: new URL("../../assets/imgs/nova.svg", import.meta.url),
   downloadUrl: {
     ios: "https://apps.apple.com/us/app/nova-polkadot-wallet/id1597119355",
     android:

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

@@ -1,36 +1,11 @@
-import type { WalletConfig, InjectedWalletInfo } from "./types.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: 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> `,
+  logo: new URL("../../assets/imgs/polkadot-js.svg", import.meta.url),
   downloadUrl: {
     chrome:
       "https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd",