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 { WebWalletConnector } from "starknetkit/webwallet"

Using starknet-react useConnect hook, you can connect to the web wallet by passing in your Web wallet connector:

const { connect } = useConnect();
 
const handleConnect = async () => {
    connect({
      connector: new WebWalletConnector({
        url: 'https://web.argent.xyz',
      }),
    });
  };

If you prefer to use Starknetkit's connect function, you can do so by passing in your Web wallet connector:

const { wallet, connectorData } = await connect({
  connectors: [
    new WebWalletConnector(),
  ],
})

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",
})

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).

2. 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.

3. 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({
      connectors: [new WebWalletConnector({ url: '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>
)}

Disconnecting from Web Wallet

It is possible for a user to logout from his webwallet account. An event is emitted when this happens.

You can configure a callback function that you would call like this:

const handleWebwalletLogoutEvent = (callback: () => void) => {
  document.addEventListener(WEBWALLET_LOGOUT_EVENT, () => {
    callback()
  })
}

The callback function could for instance clear the user's wallet state.

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.