Web Wallet UX

customization tips, UX guidelines

Dapp theming

The Web Wallet SDK gives developers the option to customize the look of the connect Modal.

You could choose which wallet options you would like to make available to your users, or decide to go email only!

All modal variants

For full connection options (1st option shown):

const connection = await connect();

For an alternative look (2nd option shown):

const connection = await connect({
   modalWalletAppearance: "all" 
});

For email only (3rd option shown):

const connection = await connect({
  include: ["argentWebWallet"]
  modalWalletAppearance: "email_only",
});

To exclude web wallet from the modal:

const connection = await connect({
  exclude: ["argentWebWallet"]
});

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 connection = await connect({webWalletUrl: "https://web.argent.xyz"});

  if(connection && connection.isConnected) {
    setConnection(connection)
    setProvider(connection.account)
    setAddress(connection.selectedAddress)
  }

  console.log(connection)
 }

Then we could simply check that id is equal to argentWebWallet, and if yes, show a button that links to the dashboard.

{
    connection.id == 'argentWebWallet' ? <a href='https://web.argent.xyz'><button className='connectbtn'>Dashboard</button></a>
    : ''
}

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 web.argent.xyz.

Starknet.id web wallet custom button

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.

Briq custom transaction history