Merge pull request #123 from argentlabs/fix/deps-sn-react-compatbility

Fix/deps sn react compatbility

package.json

@@ -60,6 +60,7 @@
     "dev": "vite build --watch"
   },
   "dependencies": {
+    "@argent/x-window": "^1.0.2",
     "@starknet-io/get-starknet": "^4.0.0",
     "@starknet-io/get-starknet-core": "^4.0.0",
     "@starknet-io/types-js": "^0.7.7",
@@ -100,8 +101,6 @@
     "prettier": "^3.0.3",
     "prettier-plugin-import-sort": "^0.0.7",
     "semantic-release": "^21.1.1",
-    "starknet4": "npm:[email protected]",
-    "starknet5": "npm:[email protected]",
     "svelte": "^4.0.0",
     "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",

src/connectors/webwallet/helpers/trpc.ts

@@ -8,7 +8,7 @@ import {
   RpcCallsArraySchema,
   StarknetMethodArgumentsSchemas,
   deployAccountContractSchema,
-} from "../../../window/window"
+} from "@argent/x-window"
 import { DEFAULT_WEBWALLET_URL } from "../constants"
 import { Permission } from "@starknet-io/types-js"
 

src/helpers/getStoreVersionFromBrowser.ts

@@ -1,5 +1,5 @@
 import Bowser from "bowser"
-import type { StoreVersion } from "../window/modal"
+import type { StoreVersion } from "../types/modal"
 
 export const globalWindow = typeof window !== "undefined" ? window : null
 

src/helpers/mapModalWallets.ts

@@ -3,7 +3,7 @@ import { isString } from "lodash-es"
 import type { StarknetWindowObject } from "@starknet-io/types-js"
 import { StarknetkitConnector } from "../connectors/connector"
 import { ARGENT_X_ICON } from "../connectors/injected/constants"
-import type { ModalWallet, StoreVersion } from "../window/modal"
+import type { ModalWallet, StoreVersion } from "../types/modal"
 
 interface SetConnectorsExpandedParams {
   availableConnectors: StarknetkitConnector[]

src/hooks/useStarknetkitConnectModal.ts

@@ -1,12 +1,12 @@
 import { connect } from "../main"
-import { ConnectOptions, ModalResult } from "../window/modal"
+import { ConnectOptionsWithConnectors, ModalResult } from "../types/modal"
 
 type UseStarknetkitConnectors = {
   starknetkitConnectModal: () => Promise<ModalResult>
 }
 
 const useStarknetkitConnectModal = (
-  options: Omit<ConnectOptions, "webWalletUrl">,
+  options: ConnectOptionsWithConnectors,
 ): UseStarknetkitConnectors => {
   const starknetkitConnectModal = async (): Promise<ModalResult> => {
     return await connect({

src/main.ts

@@ -12,7 +12,12 @@ import {
 import { mapModalWallets } from "./helpers/mapModalWallets"
 import Modal from "./modal/Modal.svelte"
 import css from "./theme.css?inline"
-import type { ConnectOptions, ModalResult, ModalWallet } from "./window/modal"
+import type {
+  ConnectOptions,
+  ConnectOptionsWithConnectors,
+  ModalResult,
+  ModalWallet,
+} from "./types/modal"
 
 let selectedConnector: StarknetkitConnector | null = null
 
@@ -21,12 +26,14 @@ export const connect = async ({
   storeVersion = getStoreVersionFromBrowser(),
   modalTheme,
   dappName,
-  webWalletUrl = DEFAULT_WEBWALLET_URL,
-  argentMobileOptions,
-  connectors = [],
   resultType = "wallet",
   ...restOptions
-}: ConnectOptions): Promise<ModalResult> => {
+}: ConnectOptionsWithConnectors | ConnectOptions): Promise<ModalResult> => {
+  const { webWalletUrl = DEFAULT_WEBWALLET_URL, argentMobileOptions } =
+    restOptions as ConnectOptions
+
+  const { connectors } = restOptions as ConnectOptionsWithConnectors
+
   // force null in case it was disconnected from mobile app
   selectedConnector = null
   const availableConnectors =
@@ -66,8 +73,8 @@ export const connect = async ({
     const authorizedWallets = await sn.getAuthorizedWallets(restOptions)
 
     const wallet =
-      authorizedWallets.find((w) => w.id === lastWalletId) ??
-      installedWallets.length === 1
+      (authorizedWallets.find((w) => w.id === lastWalletId) ??
+      installedWallets.length === 1)
         ? installedWallets[0]
         : undefined
 
@@ -97,7 +104,7 @@ export const connect = async ({
     installedWallets,
     discoveryWallets: await sn.getDiscoveryWallets(restOptions),
     storeVersion,
-    customOrder: connectors?.length > 0,
+    customOrder: connectors ? connectors?.length > 0 : false,
   })
 
   const getTarget = (): ShadowRoot => {
@@ -157,7 +164,7 @@ export const connect = async ({
             setTimeout(() => modal.$destroy())
           }
         },
-        theme: modalTheme === "system" ? null : modalTheme ?? null,
+        theme: modalTheme === "system" ? null : (modalTheme ?? null),
         modalWallets,
       },
     })
@@ -185,9 +192,10 @@ export type {
   StarknetWindowObject,
   StarknetkitConnector,
   defaultConnectors as starknetkitDefaultConnectors,
+  ConnectOptions,
+  ConnectOptionsWithConnectors,
 }
 
-export * from "./window"
-export type * from "./window/modal"
+export type * from "./types/modal"
 
 export { useStarknetkitConnectModal } from "./hooks/useStarknetkitConnectModal"

src/window/modal.ts → src/types/modal.ts

@@ -10,14 +10,18 @@ import type {
 export type StoreVersion = "chrome" | "firefox" | "edge"
 
 export interface ConnectOptions extends GetWalletOptions {
-  argentMobileOptions: ArgentMobileConnectorOptions
   dappName?: string
-  connectors?: StarknetkitConnector[]
   modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
   modalTheme?: "light" | "dark" | "system"
   storeVersion?: StoreVersion | null
-  webWalletUrl?: string
   resultType?: "connector" | "wallet"
+  webWalletUrl?: string
+  argentMobileOptions: ArgentMobileConnectorOptions
+}
+
+export interface ConnectOptionsWithConnectors
+  extends Omit<ConnectOptions, "webWalletUrl" | "argentMobileOptions"> {
+  connectors?: StarknetkitConnector[]
 }
 
 export type ModalWallet = {