Merge pull request #27 from argentlabs/fix/connector-icons

fix: add ConnectorIcons to be inline with starknet-react

src/connectors/argentMobile/constants.ts

@@ -1 +1,15 @@
 export const DEFAULT_PROJECT_ID = "f2e613881f7a0e811295cdd57999e31b"
+
+export const DEFAULT_ARGENT_MOBILE_ICON = `<svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="32" height="32" rx="8" fill="#FF875B" />
+    <path
+      d="M18.316 8H13.684C13.5292 8 13.4052 8.1272 13.4018 8.28531C13.3082 12.7296 11.0323 16.9477 7.11513 19.9355C6.99077 20.0303 6.96243 20.2085 7.05335 20.3369L9.76349 24.1654C9.85569 24.2957 10.0353 24.3251 10.1618 24.2294C12.6111 22.3734 14.5812 20.1345 16 17.6529C17.4187 20.1345 19.389 22.3734 21.8383 24.2294C21.9646 24.3251 22.1443 24.2957 22.2366 24.1654L24.9467 20.3369C25.0375 20.2085 25.0092 20.0303 24.885 19.9355C20.9676 16.9477 18.6918 12.7296 18.5983 8.28531C18.5949 8.1272 18.4708 8 18.316 8Z"
+      fill="white"
+    />
+  </svg>`

src/connectors/argentMobile/index.ts

@@ -4,14 +4,14 @@ import type {
 } from "get-starknet-core"
 import type { AccountInterface } from "starknet"
 import { constants } from "starknet"
-import { DEFAULT_PROJECT_ID } from "./constants"
+import { DEFAULT_ARGENT_MOBILE_ICON, DEFAULT_PROJECT_ID } from "./constants"
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
   UserNotConnectedError,
 } from "../../errors"
 import { resetWalletConnect } from "../../helpers/resetWalletConnect"
-import { Connector } from "../connector"
+import { Connector, type ConnectorIcons } from "../connector"
 import type { StarknetAdapter } from "./modal/starknet/adapter"
 import { removeStarknetLastConnectedWallet } from "../../helpers/lastConnected"
 
@@ -52,20 +52,11 @@ export class ArgentMobileConnector extends Connector {
     return "Argent (mobile)"
   }
 
-  get icon(): string {
-    return `<svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect width="32" height="32" rx="8" fill="#FF875B" />
-    <path
-      d="M18.316 8H13.684C13.5292 8 13.4052 8.1272 13.4018 8.28531C13.3082 12.7296 11.0323 16.9477 7.11513 19.9355C6.99077 20.0303 6.96243 20.2085 7.05335 20.3369L9.76349 24.1654C9.85569 24.2957 10.0353 24.3251 10.1618 24.2294C12.6111 22.3734 14.5812 20.1345 16 17.6529C17.4187 20.1345 19.389 22.3734 21.8383 24.2294C21.9646 24.3251 22.1443 24.2957 22.2366 24.1654L24.9467 20.3369C25.0375 20.2085 25.0092 20.0303 24.885 19.9355C20.9676 16.9477 18.6918 12.7296 18.5983 8.28531C18.5949 8.1272 18.4708 8 18.316 8Z"
-      fill="white"
-    />
-  </svg>`
+  get icon(): ConnectorIcons {
+    return {
+      dark: DEFAULT_ARGENT_MOBILE_ICON,
+      light: DEFAULT_ARGENT_MOBILE_ICON,
+    }
   }
 
   get wallet(): StarknetWindowObject {

src/connectors/connector.ts

@@ -11,6 +11,14 @@ export type ConnectorData = {
   chainId?: bigint
 }
 
+/** Connector icons, as base64 encoded svg. */
+export type ConnectorIcons = {
+  /** Dark-mode icon. */
+  dark?: string
+  /** Light-mode icon. */
+  light?: string
+}
+
 /** Connector events. */
 export interface ConnectorEvents {
   /** Emitted when account or network changes. */
@@ -35,7 +43,7 @@ export abstract class Connector extends EventEmitter<ConnectorEvents> {
   /** Connector name */
   abstract get name(): string
   /** Connector icon */
-  abstract get icon(): string
+  abstract get icon(): ConnectorIcons
   /**  Connector StarknetWindowObject */
   abstract get wallet(): StarknetWindowObject
 }

src/connectors/injected/constants.ts

@@ -1 +1,8 @@
 export const ARGENT_X_ICON = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iOCIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE4LjQwMTggNy41NTU1NkgxMy41OTgyQzEzLjQzNzcgNy41NTU1NiAxMy4zMDkxIDcuNjg3NDcgMTMuMzA1NiA3Ljg1MTQzQzEzLjIwODUgMTIuNDYwMyAxMC44NDg0IDE2LjgzNDcgNi43ODYwOCAxOS45MzMxQzYuNjU3MTEgMjAuMDMxNCA2LjYyNzczIDIwLjIxNjIgNi43MjIwMiAyMC4zNDkzTDkuNTMyNTMgMjQuMzE5NkM5LjYyODE1IDI0LjQ1NDggOS44MTQ0NCAyNC40ODUzIDkuOTQ1NTggMjQuMzg2QzEyLjQ4NTYgMjIuNDYxMyAxNC41Mjg3IDIwLjEzOTUgMTYgMTcuNTY2QzE3LjQ3MTMgMjAuMTM5NSAxOS41MTQ1IDIyLjQ2MTMgMjIuMDU0NSAyNC4zODZDMjIuMTg1NiAyNC40ODUzIDIyLjM3MTkgMjQuNDU0OCAyMi40Njc2IDI0LjMxOTZMMjUuMjc4MSAyMC4zNDkzQzI1LjM3MjMgMjAuMjE2MiAyNS4zNDI5IDIwLjAzMTQgMjUuMjE0IDE5LjkzMzFDMjEuMTUxNiAxNi44MzQ3IDE4Ljc5MTUgMTIuNDYwMyAxOC42OTQ2IDcuODUxNDNDMTguNjkxMSA3LjY4NzQ3IDE4LjU2MjMgNy41NTU1NiAxOC40MDE4IDcuNTU1NTZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjQuNzIzNiAxMC40OTJMMjQuMjIzMSA4LjkyNDM5QzI0LjEyMTMgOC42MDYxNCAyMy44NzM0IDguMzU4MjQgMjMuNTU3NyA4LjI2MDIzTDIyLjAwMzkgNy43NzU5NUMyMS43ODk1IDcuNzA5MDYgMjEuNzg3MyA3LjQwMTc3IDIyLjAwMTEgNy4zMzIwMUwyMy41NDY5IDYuODI0NjZDMjMuODYwOSA2LjcyMTQ2IDI0LjEwNiA2LjQ2OTUyIDI0LjIwMjcgNi4xNTAxMUwyNC42Nzk4IDQuNTc1MDJDMjQuNzQ1OCA0LjM1NzA5IDI1LjA0ODkgNC4zNTQ3NyAyNS4xMTgzIDQuNTcxNTZMMjUuNjE4OCA2LjEzOTE1QzI1LjcyMDYgNi40NTc0IDI1Ljk2ODYgNi43MDUzMSAyNi4yODQyIDYuODAzOUwyNy44MzggNy4yODc2MUMyOC4wNTI0IDcuMzU0NSAyOC4wNTQ3IDcuNjYxNzkgMjcuODQwOCA3LjczMjEzTDI2LjI5NSA4LjIzOTQ4QzI1Ljk4MTEgOC4zNDIxIDI1LjczNiA4LjU5NDA0IDI1LjYzOTMgOC45MTQwMkwyNS4xNjIxIDEwLjQ4ODVDMjUuMDk2MSAxMC43MDY1IDI0Ljc5MyAxMC43MDg4IDI0LjcyMzYgMTAuNDkyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==`
+
+// Icons used when the injected wallet is not found and no icon is provided.
+// question-mark-circle from heroicons with color changed to black/white.
+export const WALLET_NOT_FOUND_ICON_LIGHT =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iYmxhY2siPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkuODc5IDcuNTE5YzEuMTcxLTEuMDI1IDMuMDcxLTEuMDI1IDQuMjQyIDAgMS4xNzIgMS4wMjUgMS4xNzIgMi42ODcgMCAzLjcxMi0uMjAzLjE3OS0uNDMuMzI2LS42Ny40NDItLjc0NS4zNjEtMS40NS45OTktMS40NSAxLjgyN3YuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6bS05IDUuMjVoLjAwOHYuMDA4SDEydi0uMDA4eiIgLz4KPC9zdmc+"
+export const WALLET_NOT_FOUND_ICON_DARK =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0id2hpdGUiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkuODc5IDcuNTE5YzEuMTcxLTEuMDI1IDMuMDcxLTEuMDI1IDQuMjQyIDAgMS4xNzIgMS4wMjUgMS4xNzIgMi42ODcgMCAzLjcxMi0uMjAzLjE3OS0uNDMuMzI2LS42Ny40NDItLjc0NS4zNjEtMS40NS45OTktMS40NSAxLjgyN3YuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6bS05IDUuMjVoLjAwOHYuMDA4SDEydi0uMDA4eiIgLz4KPC9zdmc+Cg=="

src/connectors/injected/index.ts

@@ -7,12 +7,19 @@ import {
   UserNotConnectedError,
   UserRejectedRequestError,
 } from "../../errors"
-import { Connector } from "../connector"
-
+import { Connector, type ConnectorIcons } from "../connector"
+import {
+  WALLET_NOT_FOUND_ICON_DARK,
+  WALLET_NOT_FOUND_ICON_LIGHT,
+} from "./constants"
 /** Injected connector options. */
 export interface InjectedConnectorOptions {
   /** The wallet id. */
   id: string
+  /** Wallet human readable name. */
+  name?: string
+  /** Wallet icons. */
+  icon?: ConnectorIcons
 }
 
 export class InjectedConnector extends Connector {
@@ -179,11 +186,22 @@ export class InjectedConnector extends Connector {
     return this._wallet.name
   }
 
-  get icon(): string {
-    if (!this._wallet) {
-      throw new ConnectorNotConnectedError()
+  get icon(): ConnectorIcons {
+    if (this._options.icon) {
+      return this._options.icon
+    }
+
+    if (this._wallet?.icon) {
+      return {
+        dark: this._wallet.icon,
+        light: this._wallet.icon,
+      }
+    }
+
+    return {
+      dark: WALLET_NOT_FOUND_ICON_DARK,
+      light: WALLET_NOT_FOUND_ICON_LIGHT,
     }
-    return this._wallet.icon
   }
 
   get wallet(): StarknetWindowObject {

src/connectors/webwallet/constants.ts

@@ -1 +1,16 @@
 export const DEFAULT_WEBWALLET_URL = "https://web.argent.xyz"
+
+export const DEFAULT_WEBWALLET_ICON = `<svg
+    width="32"
+    height="28"
+    viewBox="0 0 18 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.5 0.4375C0.982233 0.4375 0.5625 0.857233 0.5625 1.375V12C0.5625 12.4144 0.72712 12.8118 1.02015 13.1049C1.31317 13.3979 1.7106 13.5625 2.125 13.5625H15.875C16.2894 13.5625 16.6868 13.3979 16.9799 13.1049C17.2729 12.8118 17.4375 12.4144 17.4375 12V1.375C17.4375 0.857233 17.0178 0.4375 16.5 0.4375H1.5ZM2.4375 3.50616V11.6875H15.5625V3.50616L9.63349 8.94108C9.27507 9.26964 8.72493 9.26964 8.36651 8.94108L2.4375 3.50616ZM14.0899 2.3125H3.91013L9 6.97822L14.0899 2.3125Z"
+      fill="currentColor"
+    />
+  </svg>`

src/connectors/webwallet/index.ts

@@ -3,7 +3,7 @@ import type {
   StarknetWindowObject,
 } from "get-starknet-core"
 import type { AccountInterface } from "starknet"
-import { Connector } from "../connector"
+import { Connector, type ConnectorIcons } from "../connector"
 import { setPopupOptions, trpcProxyClient } from "./helpers/trpc"
 
 import {
@@ -54,21 +54,11 @@ export class WebWalletConnector extends Connector {
     return this._wallet?.name || "Argent Web Wallet"
   }
 
-  get icon(): string {
-    return `<svg
-    width="32"
-    height="28"
-    viewBox="0 0 18 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M1.5 0.4375C0.982233 0.4375 0.5625 0.857233 0.5625 1.375V12C0.5625 12.4144 0.72712 12.8118 1.02015 13.1049C1.31317 13.3979 1.7106 13.5625 2.125 13.5625H15.875C16.2894 13.5625 16.6868 13.3979 16.9799 13.1049C17.2729 12.8118 17.4375 12.4144 17.4375 12V1.375C17.4375 0.857233 17.0178 0.4375 16.5 0.4375H1.5ZM2.4375 3.50616V11.6875H15.5625V3.50616L9.63349 8.94108C9.27507 9.26964 8.72493 9.26964 8.36651 8.94108L2.4375 3.50616ZM14.0899 2.3125H3.91013L9 6.97822L14.0899 2.3125Z"
-      fill="currentColor"
-    />
-  </svg>`
+  get icon(): ConnectorIcons {
+    return {
+      light: DEFAULT_WEBWALLET_URL,
+      dark: DEFAULT_WEBWALLET_URL,
+    }
   }
 
   get wallet(): StarknetWindowObject {