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, connectorData } = await connect({
  connectors: [
    new WebWalletConnector(),
  ],
})

ℹ️

If you face import errors with typescript, head to your tsconfig.json, and update your moduleResolution and module to use Bundler and ES2015 respectively.

Connection Params

The WebWalletConnector Connector takes a single optional 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:

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

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.
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 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, connectorData } = await connect({
    webWalletUrl: "https://web.argent.xyz",
  })
 
  setWallet(wallet)
  setConnectorData(connectorData)
}

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">Wallet Dashboard</a>
)}

Web wallet's UI

By default, the web wallet will open in a new pop-up window when a user attempts to connect. An embedded solution where web wallet displays on an iframe in your dapp, for security reasons, is only available for whitelisted dapps. Please contact Argent if you'd like to discuss potential whitelisting.

Injected Argent Mobile