chore: implement argent web wallet connector

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tokenbound-connectorkit",
+  "name": "tokenbound-connectorkit-v3",
   "version": "1.0.1",
   "repository": "https://github.com/horuslabsio/tba-connector-v2",
   "private": false,
@@ -101,6 +101,7 @@
     "vitest": "^1.6.0",
     "ws": "^8.8.1",
     "zod": "^3.20.6"
+
   },
   "peerDependencies": {
     "starknet": "^6.9.0"

src/connectors/index.ts

@@ -1,4 +1,3 @@
 export * from "./connector"
-export * from "./webwallet"
 export * from "./tokenboundAccount"
 

src/connectors/tokenboundAccount/constants.ts

@@ -42,3 +42,5 @@ export const RPC_NODE_URL_MAINNET =
 
 
 export const DEFAULT_CHAIN_ID = "SN_SEPOLIA"
+
+export const DEFAULT_WEBWALLET_URL = "https://web.argent.xyz"

src/connectors/tokenboundAccount/helpers/openTokenboundwallet.ts

@@ -1,7 +1,9 @@
 import { getTokenboundAccountStarknetObject } from "../starknetWindowObject/getTokenboundWalletStarknetObject"
 import { createModal, hideModal } from "../starknetWindowObject/wormhole"
-import { openWebwallet } from "../../webwallet/helpers/openWebwallet"
+import { openWebwallet } from "../webwallet/helpers/openWebwallet"
 import { TBAStarknetWindowObject } from "../types/connector"
+import { DEFAULT_WEBWALLET_URL } from "../constants"
+import { WebWalletStarknetWindowObject } from "../webwallet/starknetWindowObject/argentStarknetWindowObject"
 
 interface Options {
   address: string
@@ -18,78 +20,6 @@ const getIframeMessageData = (): Promise<any> => {
   })
 }
 
-// export const openTokenboundModal = async (
-//   origin: string,
-//   chainId: string,
-// ): Promise<TBAStarknetWindowObject | undefined> => {
-
-//   console.log("hello world")
-//   const modalId = "tokenbound-account-modal"
-//   const iframeId = "tokenbound-account-iframe"
-
-//   const existingIframe = document.getElementById(iframeId)
-//   const existingModal = document.getElementById(modalId)
-//   if (existingIframe && existingModal) {
-//     existingIframe.remove()
-//     existingModal.remove()
-//   }
-
-//   const { modal } = await createModal(origin, true)
-//   return new Promise<TBAStarknetWindowObject | undefined>((resolve) => {
-
-//     window.addEventListener(
-//       "message",
-//       async (event: MessageEvent) => {
-//         if (event.type === "message") {
-//           const { address, parentWallet }: Options =
-//             await getIframeMessageData()
-
-//           if (!parentWallet || !address) return
-
-//           const wallet_id = parentWallet.toLowerCase()
-//           const globalObject: Record<string, any> = globalThis
-
-
-
-
-//           let wallet: TBAStarknetWindowObject | undefined
-
-//           if (wallet_id === "braavos" || wallet_id === "argentx") {
-
-//             wallet =
-//               globalObject[
-//                 `starknet_${wallet_id === "argentx" ? "argentX" : wallet_id}`
-//               ]
-
-//               if(wallet == null) {
-//                 alert("Wallet not found!")
-//               }
-//           }
-
-//           if (wallet_id === "argentwebwallet") {
-//             // _wallet = (await openWebwallet(origin)) ?? null
-//           }
-
-
-//           if (wallet) {
-//             const starknetWindowObject =
-//               await getTokenboundAccountStarknetObject({
-//                 address,
-//                 wallet,
-//                 chainId,
-//               })
-
-//             resolve(starknetWindowObject)
-//             hideModal(modal)
-//           }
-
-
-//         }
-//       },
-//       { once: false },
-//     )
-//   })
-// }
 
 
 export const openTokenboundModal = async (
@@ -131,16 +61,18 @@ export const openTokenboundModal = async (
           }
 
           if (wallet_id === "argentwebwallet") {
-            // _wallet = (await openWebwallet(origin)) ?? null
+            const webWallet = (await openWebwallet(DEFAULT_WEBWALLET_URL)) ?? null
+             await (
+              webWallet as WebWalletStarknetWindowObject
+            ).connectWebwallet()
+            wallet = webWallet as TBAStarknetWindowObject;
           }
 
-          // Wallet not found scenario
           if (!wallet) {
             alert("Wallet not found!");
             return;
           }
 
-          // Wallet is found, proceed
           const starknetWindowObject = await getTokenboundAccountStarknetObject({
             address,
             wallet,

src/connectors/tokenboundAccount/webwallet/helpers/mapTargetUrlToNetworkId.ts

@@ -0,0 +1,32 @@
+import { constants } from "starknet"
+
+// Using NetworkName as a value.
+const Network: typeof constants.NetworkName = constants.NetworkName
+
+const DEVELOPMENT_NETWORK = Network.SN_SEPOLIA
+
+export function mapTargetUrlToNetworkId(target: string): constants.NetworkName {
+  try {
+    const { origin } = new URL(target)
+    if (origin.includes("localhost") || origin.includes("127.0.0.1")) {
+      return DEVELOPMENT_NETWORK
+    }
+    if (origin.includes("hydrogen")) {
+      return Network.SN_SEPOLIA
+    }
+    if (origin.includes("staging")) {
+      return Network.SN_MAIN
+    }
+    if (origin.includes("dev")) {
+      return Network.SN_SEPOLIA
+    }
+    if (origin.includes("argent.xyz")) {
+      return Network.SN_MAIN
+    }
+  } catch (e) {
+    console.warn(
+      "Could not determine network from target URL, defaulting to mainnet-alpha",
+    )
+  }
+  return Network.SN_MAIN
+}

src/connectors/webwallet/helpers/mapTargetUrlToNodeUrl.ts → src/connectors/tokenboundAccount/webwallet/helpers/mapTargetUrlToNodeUrl.ts

@@ -1,4 +1,4 @@
-import { getRandomPublicRPCNode } from "../../../helpers/publicRcpNodes"
+import { getRandomPublicRPCNode } from "./publicRcpNodes"
 
 export function mapTargetUrlToNodeUrl(target: string): string {
   const publicRPCNode = getRandomPublicRPCNode()

src/connectors/webwallet/helpers/openWebwallet.ts → src/connectors/tokenboundAccount/webwallet/helpers/openWebwallet.ts

@@ -1,9 +1,9 @@
 import type { StarknetWindowObject } from "@starknet-io/types-js"
-import { mapTargetUrlToNetworkId } from "../../../helpers/mapTargetUrlToNetworkId"
 import { getWebWalletStarknetObject } from "../starknetWindowObject/getWebWalletStarknetObject"
 import { createModal } from "../starknetWindowObject/wormhole"
 import { fetchAllowedDapps } from "./fetchAllowedDapps"
 import { trpcProxyClient } from "./trpc"
+import { mapTargetUrlToNetworkId } from "./mapTargetUrlToNetworkId"
 
 const checkIncognitoChrome = async (isChrome: boolean) => {
   return new Promise((resolve) => {
@@ -48,12 +48,12 @@ export const openWebwallet = async (
   // if not chrome or is chrome incognito
   // use the popup mode and avoid checking allowed dapps for iframes
   if (!isChrome || isChromeIncognito) {
-    const windowProxyClient = trpcProxyClient({})
-    return await getWebWalletStarknetObject(
-      origin,
-      windowProxyClient,
-      undefined,
-    )
+    // const windowProxyClient = trpcProxyClient({})
+    // return await getWebWalletStarknetObject(
+    //   origin,
+    //   windowProxyClient,
+    //   undefined,
+    // )
   }
 
   const network = mapTargetUrlToNetworkId(origin)
@@ -76,19 +76,26 @@ export const openWebwallet = async (
     const iframeTrpcProxyClient = trpcProxyClient({
       iframe: iframe.contentWindow ?? undefined,
     })
-    await iframeTrpcProxyClient.authorize.mutate()
+
     const starknetWindowObject = await getWebWalletStarknetObject(
       origin,
       iframeTrpcProxyClient,
       { modal, iframe },
     )
     return starknetWindowObject
-  } else {
+
+
+  }
+
+  else {
     const windowProxyClient = trpcProxyClient({})
-    return await getWebWalletStarknetObject(
+   return await getWebWalletStarknetObject(
       origin,
       windowProxyClient,
       undefined,
     )
+
   }
+
+
 }

src/connectors/tokenboundAccount/webwallet/helpers/publicRcpNodes.ts

@@ -0,0 +1,22 @@
+export type PublicRpcNode = {
+  mainnet: string
+  testnet: string
+}
+
+// Public RPC nodes
+export const BLAST_RPC_NODE: PublicRpcNode = {
+  mainnet: "https://starknet-mainnet.public.blastapi.io",
+  testnet: "https://starknet-sepolia.public.blastapi.io",
+} as const
+
+export const LAVA_RPC_NODE: PublicRpcNode = {
+  mainnet: "https://rpc.starknet.lava.build",
+  testnet: "https://rpc.starknet-sepolia.lava.build",
+} as const
+
+export const PUBLIC_RPC_NODES = [BLAST_RPC_NODE, LAVA_RPC_NODE] as const
+
+export function getRandomPublicRPCNode() {
+  const randomIndex = Math.floor(Math.random() * PUBLIC_RPC_NODES.length)
+  return PUBLIC_RPC_NODES[randomIndex]
+}

src/connectors/webwallet/helpers/trpc.ts → src/connectors/tokenboundAccount/webwallet/helpers/trpc.ts

@@ -1,3 +1,4 @@
+import { Permission } from "@starknet-io/types-js"
 import type { CreateTRPCProxyClient } from "@trpc/client"
 import { createTRPCProxyClient, loggerLink, splitLink } from "@trpc/client"
 import { initTRPC } from "@trpc/server"
@@ -8,9 +9,9 @@ import {
   RpcCallsArraySchema,
   StarknetMethodArgumentsSchemas,
   deployAccountContractSchema,
-} from "../../../types/window"
+} from "../types/window"
+
 import { DEFAULT_WEBWALLET_URL } from "../constants"
-import { Permission } from "@starknet-io/types-js"
 
 const t = initTRPC.create({
   isServer: false,
@@ -60,6 +61,14 @@ const appRouter = t.router({
     return true
   }),
   connect: t.procedure.mutation(async () => ""),
+  connectWebwallet: t.procedure
+    .output(
+      z.object({
+        account: z.string().array().optional(),
+        chainId: z.string().optional(),
+      }),
+    )
+    .mutation(async () => ({})),
   enable: t.procedure.output(z.string()).mutation(async () => ""),
   execute: t.procedure
     .input(StarknetMethodArgumentsSchemas.execute)

src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts → src/connectors/tokenboundAccount/webwallet/starknetWindowObject/argentStarknetWindowObject.ts

@@ -1,12 +1,12 @@
-import type { CreateTRPCProxyClient } from "@trpc/client"
-import type { constants } from "starknet"
 import type {
   AccountChangeEventHandler,
   NetworkChangeEventHandler,
   RpcTypeToMessageMap,
   StarknetWindowObject,
   WalletEvents,
 } from "@starknet-io/types-js"
+import type { CreateTRPCProxyClient } from "@trpc/client"
+import type { constants } from "starknet"
 import {
   EXECUTE_POPUP_HEIGHT,
   EXECUTE_POPUP_WIDTH,
@@ -35,7 +35,12 @@ export type LoginStatus = {
 
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
   getLoginStatus(): Promise<LoginStatus>
+  connectWebwallet(): Promise<{
+    account?: string[]
+    chainId?: string
+  }>
 }
+
 export const getArgentStarknetWindowObject = (
   options: GetArgentStarknetWindowObject,
   proxyLink: CreateTRPCProxyClient<AppRouter>,
@@ -45,6 +50,9 @@ export const getArgentStarknetWindowObject = (
     getLoginStatus: () => {
       return proxyLink.getLoginStatus.mutate()
     },
+    connectWebwallet: () => {
+      return proxyLink.connectWebwallet.mutate()
+    },
     async request(call) {
       switch (call.type) {
         case "wallet_requestAccounts": {