Docs
Connectors
Web Wallet

Web Wallet

Web wallet is a self-custodial wallet in your browser. It takes advantage of account abstraction to bring you the best experience from both web2 and web3. You create a wallet with an email address and password, eliminating the friction that come with traditional blockchain wallets.

Establishing a Connection

To enable the web wallet connector, you need to first import the WebWalletConnector from starknetkit:

import { connect, disconnect } from "starknetkit"
import { WebWalletConnector } from "starknetkit/webwallet"

After importing, you need to call the connect method, passing in your Web wallet connector:

const { wallet } = await connect({
  connectors: [
    new WebWalletConnector({
      url: "https://web.argent.xyz",
    }),
  ],
})

Connection Params

The WebWalletConnector Connector takes a single param url used to specify Web Wallet's URL.

new WebWalletConnector({
  url: "https://web.argent.xyz",
})
ℹ️

It's important to note that web wallet is only available for users on mainnet. If as a dApp for integration and testing purposes, you need access to an internal testnet environment, please contact Argent privately.

Web Wallet UX guidelines

In this section, we are going to be looking at certain UX tips dApps could implement from their end to make the web wallet user experience better:

  1. Easy access to web wallet dashboard: We provide a dashboard for web wallet, where users can carry out basic activities such as funding their wallet, sending funds to other accounts, viewing connected dApps etc. We recommend that dApps show a button somewhere in the UI to “go to wallet”, where they link to https://web.argent.xyz (opens in a new tab).

starknetID

  1. Adding a transaction tracker: Since web wallet is not one-click accessible like we have with browser extensions, users might find it difficult to track the progress of their transactions. To solve this, dApps will need to come up with custom solutions to communicate the progress of transactions with the users.

  2. Custom transaction history: Following the issue mentioned in the second tip above, users will most likely also not be able to access a list of previous transactions carried out from interacting with the dApps. dApps could also come up with custom solutions to help users monitor and track their past activities on the dApp.

Detecting Web Wallet

Often times, you'll need to implement checks to see if a user is already connected to web wallet, and if yes, carry out actions such as providing a button to access the user's dashboard. You could do this by simply checking for the id field in the window object, but first you need to establish a connection.

const connectWallet = async () => {
  const { wallet } = await connect({ webWalletUrl: "https://web.argent.xyz" })
 
  if (wallet && wallet.isConnected) {
    setConnection(wallet)
    setProvider(wallet.account)
    setAddress(wallet.selectedAddress)
  }
}

Then we could simply check that id is equal to argentWebWallet, and if yes, show a button that links to https://web.argent.xyz (opens in a new tab).

{
  wallet.id == "argentWebWallet" ? (
    <a href="https://web.argent.xyz">
      <button className="connectbtn">Dashboard</button>
    </a>
  ) : (
    ""
  )
}
InjectedArgent Mobile