Merge pull request #51 from argentlabs/develop

Release 1.0.29

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starknetkit",
-  "version": "1.0.22",
+  "version": "1.0.29",
   "repository": "github:argentlabs/starknetkit",
   "private": false,
   "browser": {

src/connectors/argentMobile/index.ts

@@ -2,7 +2,7 @@ import type {
   AccountChangeEventHandler,
   StarknetWindowObject,
 } from "get-starknet-core"
-import type { AccountInterface } from "starknet"
+import type { AccountInterface, ProviderInterface } from "starknet"
 import { constants } from "starknet"
 import { DEFAULT_ARGENT_MOBILE_ICON, DEFAULT_PROJECT_ID } from "./constants"
 import {
@@ -25,6 +25,8 @@ export interface ArgentMobileConnectorOptions {
   chainId?: constants.NetworkName
   description?: string
   url?: string
+  icons?: string[]
+  provider?: ProviderInterface
 }
 
 export class ArgentMobileConnector extends Connector {
@@ -143,13 +145,19 @@ export class ArgentMobileConnector extends Connector {
 
   private async ensureWallet(): Promise<void> {
     const { getStarknetWindowObject } = await import("./modal")
-    const { chainId, projectId, dappName, description, url } = this._options
+    const { chainId, projectId, dappName, description, url, icons } =
+      this._options
     const options = {
       chainId: chainId ?? constants.NetworkName.SN_MAIN,
       name: dappName,
       projectId: projectId ?? DEFAULT_PROJECT_ID,
       description,
       url,
+      icons,
+      rpcUrl:
+        chainId === constants.NetworkName.SN_MAIN
+          ? "https://cloud.argent-api.com/v1/starknet/mainnet/rpc/v0.5"
+          : "https://api.hydrogen.argent47.net/v1/starknet/goerli/rpc/v0.5",
     }
 
     if (projectId === DEFAULT_PROJECT_ID) {
@@ -168,6 +176,14 @@ export class ArgentMobileConnector extends Connector {
     }
 
     const _wallet = await getStarknetWindowObject(options)
+
+    const { provider } = this._options
+    if (provider) {
+      Object.assign(_wallet, {
+        provider,
+      })
+    }
+
     this._wallet = _wallet
 
     // wallet connect rpc enable

src/connectors/argentMobile/modal/argentModal.ts

@@ -41,7 +41,7 @@ const iframeStyle = {
 }
 
 const overlayHtml = `
-  <div style="position: relative">
+  <div id="argent-mobile-modal-container" style="position: relative">
     <iframe class="argent-iframe" allow="clipboard-write"></iframe>
     <div class="argent-close-button" style="position: absolute; top: 24px; right: 24px; cursor: pointer;">
       <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -141,6 +141,7 @@ class ArgentModal {
     // type=overlay, device=desktop
     const overlay = document.createElement("div")
     overlay.innerHTML = overlayHtml
+    overlay.id = "argent-mobile-modal-overlay"
     for (const [key, value] of Object.entries(overlayStyle)) {
       overlay.style[key as any] = value
     }

src/connectors/argentMobile/modal/login.ts

@@ -15,6 +15,7 @@ export interface IArgentLoginOptions {
   name?: string
   description?: string
   url?: string
+  icons?: string[]
   chainId?: string | number
   rpcUrl?: string
   bridgeUrl?: string
@@ -34,6 +35,7 @@ export const login = async <TAdapter extends NamespaceAdapter>(
     mobileUrl = getMobileUrl(chainId),
     modalType = "overlay",
     url,
+    icons,
     walletConnect,
   }: IArgentLoginOptions,
   Adapter: new (options: NamespaceAdapterOptions) => TAdapter,
@@ -55,7 +57,7 @@ export const login = async <TAdapter extends NamespaceAdapter>(
       name: name ?? "Unknown dapp",
       description: description ?? "Unknown dapp description",
       url: url ?? "#",
-      icons: ["https://walletconnect.com/walletconnect-logo.png"],
+      icons: icons ?? [],
       ...walletConnect?.metadata,
     },
   }

src/connectors/argentMobile/modal/starknet/adapter.ts

@@ -11,7 +11,7 @@ import type {
   ProviderInterface,
   SignerInterface,
 } from "starknet"
-import { Provider, constants } from "starknet"
+import { RpcProvider, constants } from "starknet"
 
 import type { NamespaceAdapterOptions } from "../adapter"
 import { NamespaceAdapter } from "../adapter"
@@ -84,12 +84,7 @@ export class StarknetAdapter
 
     this.remoteSigner = new StarknetRemoteSigner(this.walletRpc)
 
-    if (rpcUrl) {
-      this.provider = new Provider({ rpc: { nodeUrl: rpcUrl } })
-    } else {
-      const network = this.getNetworkName(this.chainId)
-      this.provider = new Provider({ sequencer: { network } })
-    }
+    this.provider = new RpcProvider({ nodeUrl: rpcUrl })
     this.account = new StarknetRemoteAccount(
       this.provider,
       "",

src/connectors/injected/index.ts

@@ -1,5 +1,5 @@
 import type { StarknetWindowObject } from "get-starknet-core"
-import { AccountInterface, constants } from "starknet"
+import { AccountInterface, ProviderInterface, constants } from "starknet"
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
@@ -23,6 +23,8 @@ export interface InjectedConnectorOptions {
   name?: string
   /** Wallet icons. */
   icon?: ConnectorIcons
+  /** Provider */
+  provider?: ProviderInterface
 }
 
 export class InjectedConnector extends Connector {
@@ -211,6 +213,13 @@ export class InjectedConnector extends Connector {
     const installed = getAvailableWallets(globalThis)
     const wallet = installed.filter((w) => w.id === this._options.id)[0]
     if (wallet) {
+      const { provider } = this._options
+      if (provider) {
+        Object.assign(wallet, {
+          provider,
+        })
+      }
+
       this._wallet = wallet
     }
   }

src/connectors/webwallet/constants.ts

@@ -19,4 +19,4 @@ export const RPC_NODE_URL_TESTNET =
   "https://api.hydrogen.argent47.net/v1/starknet/goerli/rpc/v0.5"
 
 export const RPC_NODE_URL_MAINNET =
-  "https://cloud.argent-api.com/v1/starknet/goerli/rpc/v0.5"
+  "https://cloud.argent-api.com/v1/starknet/mainnet/rpc/v0.5"

src/connectors/webwallet/index.ts

@@ -2,7 +2,7 @@ import type {
   AccountChangeEventHandler,
   StarknetWindowObject,
 } from "get-starknet-core"
-import type { AccountInterface } from "starknet"
+import type { AccountInterface, ProviderInterface } from "starknet"
 import {
   Connector,
   type ConnectorData,
@@ -23,6 +23,7 @@ let _wallet: StarknetWindowObject | null = null
 
 interface WebWalletConnectorOptions {
   url?: string
+  provider?: ProviderInterface
 }
 
 export class WebWalletConnector extends Connector {
@@ -163,11 +164,16 @@ export class WebWalletConnector extends Connector {
 
   private async ensureWallet(): Promise<void> {
     const origin = this._options.url || DEFAULT_WEBWALLET_URL
+    const provider = this._options.provider
     setPopupOptions({
       origin,
       location: "/interstitialLogin",
     })
-    const wallet = await getWebWalletStarknetObject(origin, trpcProxyClient({}))
+    const wallet = await getWebWalletStarknetObject(
+      origin,
+      trpcProxyClient({}),
+      provider,
+    )
 
     _wallet = wallet ?? null
     this._wallet = _wallet

src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts

@@ -1,5 +1,5 @@
 import type { CreateTRPCProxyClient } from "@trpc/client"
-import { RpcProvider } from "starknet"
+import { ProviderInterface, RpcProvider } from "starknet"
 
 import { mapTargetUrlToNodeUrl } from "../helpers/mapTargetUrlToNodeUrl"
 import type { AppRouter } from "../helpers/trpc"
@@ -9,14 +9,15 @@ import { getArgentStarknetWindowObject } from "./argentStarknetWindowObject"
 export const getWebWalletStarknetObject = async (
   target: string,
   proxyLink: CreateTRPCProxyClient<AppRouter>,
+  provider?: ProviderInterface,
 ): Promise<WebWalletStarknetWindowObject> => {
   const globalWindow = typeof window !== "undefined" ? window : undefined
   if (!globalWindow) {
     throw new Error("window is not defined")
   }
 
   const nodeUrl = mapTargetUrlToNodeUrl(target)
-  const defaultProvider = new RpcProvider({ nodeUrl })
+  const defaultProvider = provider ?? new RpcProvider({ nodeUrl })
   const starknetWindowObject = getArgentStarknetWindowObject(
     {
       host: globalWindow.location.origin,

src/helpers/defaultConnectors.ts

@@ -1,3 +1,4 @@
+import { ProviderInterface } from "starknet"
 import { type Connector } from "../connectors"
 import {
   ArgentMobileConnector,
@@ -9,25 +10,31 @@ import { WebWalletConnector } from "../connectors/webwallet"
 export const defaultConnectors = ({
   argentMobileOptions,
   webWalletUrl,
+  provider,
 }: {
   argentMobileOptions?: ArgentMobileConnectorOptions
   webWalletUrl?: string
+  provider?: ProviderInterface
 }): Connector[] => {
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 
   const defaultConnectors: Connector[] = []
 
   if (!isSafari) {
     defaultConnectors.push(
-      new InjectedConnector({ options: { id: "argentX" } }),
+      new InjectedConnector({ options: { id: "argentX", provider } }),
     )
     defaultConnectors.push(
-      new InjectedConnector({ options: { id: "braavos" } }),
+      new InjectedConnector({ options: { id: "braavos", provider } }),
     )
   }
 
-  defaultConnectors.push(new ArgentMobileConnector(argentMobileOptions))
-  defaultConnectors.push(new WebWalletConnector({ url: webWalletUrl }))
+  defaultConnectors.push(
+    new ArgentMobileConnector({ ...argentMobileOptions, provider }),
+  )
+  defaultConnectors.push(
+    new WebWalletConnector({ url: webWalletUrl, provider }),
+  )
 
   return defaultConnectors
 }

src/main.ts

@@ -31,6 +31,7 @@ export const connect = async ({
   webWalletUrl = DEFAULT_WEBWALLET_URL,
   argentMobileOptions,
   connectors = [],
+  provider,
   ...restOptions
 }: ConnectOptions = {}): Promise<StarknetWindowObject | null> => {
   // force null in case it was disconnected from mobile app
@@ -40,6 +41,7 @@ export const connect = async ({
       ? defaultConnectors({
           argentMobileOptions,
           webWalletUrl,
+          provider,
         })
       : connectors
 
@@ -82,15 +84,33 @@ export const connect = async ({
     storeVersion,
   })
 
-  const element = document.createElement("div")
-  document.body.appendChild(element)
-  const target = element.attachShadow({ mode: "open" })
+  const getTarget = (): ShadowRoot => {
+    const modalId = "starknetkit-modal-container"
+    const existingElement = document.getElementById(modalId)
 
-  target.innerHTML = `<style>${css}</style>`
+    if (existingElement) {
+      if (existingElement.shadowRoot) {
+        // element already exists, use the existing as target
+        return existingElement.shadowRoot
+      }
+      // element exists but shadowRoot cannot be accessed
+      // delete the element and create new
+      existingElement.remove()
+    }
+
+    const element = document.createElement("div")
+    // set id for future retrieval
+    element.id = modalId
+    document.body.appendChild(element)
+    const target = element.attachShadow({ mode: "open" })
+    target.innerHTML = `<style>${css}</style>`
+
+    return target
+  }
 
   return new Promise((resolve) => {
     const modal = new Modal({
-      target,
+      target: getTarget(),
       props: {
         dappName,
         callback: async (value: StarknetWindowObject | null) => {

src/modal/Modal.svelte

@@ -14,9 +14,6 @@
   export let theme: "light" | "dark" | null = null
 
   let loadingItem: string | false = false
-  let emailOnly =
-    modalWallets.length === 1 &&
-    modalWallets[0].id.toLowerCase().includes("webwallet")
 
   let starknetMobile = window?.starknet_argentX as StarknetWindowObject & {
     isInAppBrowser: boolean
@@ -59,7 +56,7 @@
       return
     }
 
-    if (emailOnly) {
+    if (modalWallets.length === 1) {
       try {
         const [wallet] = modalWallets
         await wallet.connector?.connect()
@@ -71,9 +68,10 @@
   })
 </script>
 
-{#if !isInAppBrowser && !emailOnly}
+{#if !isInAppBrowser && modalWallets.length > 1}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
+    part="starknetkit-modal"
     class={`modal-font backdrop-blur-sm fixed inset-0 flex items-center 
             justify-center bg-black/25 z-[9999] ${darkModeControlClass}`}
     on:click={() => cb(null)}

src/types/modal.ts

@@ -1,6 +1,7 @@
 import type { GetWalletOptions } from "get-starknet-core"
 import type { Connector, ConnectorIcons } from "../connectors/connector"
 import type { ArgentMobileConnectorOptions } from "../connectors/argentMobile"
+import { ProviderInterface } from "starknet"
 
 export type StoreVersion = "chrome" | "firefox" | "edge"
 
@@ -12,6 +13,7 @@ export interface ConnectOptions extends GetWalletOptions {
   modalTheme?: "light" | "dark" | "system"
   storeVersion?: StoreVersion | null
   webWalletUrl?: string
+  provider?: ProviderInterface
 }
 
 export type ModalWallet = {