# Web Wallet UX

### 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!

<figure><img src="/files/OreeKAMeLo321zwDQ9oP" alt=""><figcaption><p>All modal variants</p></figcaption></figure>

For full connection options (1st option shown):

```js
const connection = await connect();
```

For an alternative look (2nd option shown):

<pre class="language-js"><code class="lang-js">const connection = await connect({
<strong>   modalWalletAppearance: "all" 
</strong>});
</code></pre>

For email only (3rd option shown):

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

To exclude web wallet from the modal:

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

### Detecting Web Wallet

&#x20;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.

<pre class="language-javascript"><code class="lang-javascript"><strong>const connectWallet = async() => {
</strong>  const connection = await connect({webWalletUrl: "https://web.ready.co"});

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

  console.log(connection)
 }
</code></pre>

Then we could simply check that `id` is equal to `argentWebWallet`, and if yes, show a button that links to the [dashboard](https://web.ready.co/).

```jsx
{
    connection.id == 'argentWebWallet' ? <a href='https://web.ready.co/'><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 [<mark style="background-color:yellow;">web.ready.co</mark>](https://web.ready.co/)<mark style="background-color:yellow;">.</mark>

<figure><img src="/files/4GjEWkIMf67OQsAwG05E" alt=""><figcaption><p>Starknet.id web wallet custom button</p></figcaption></figure>

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.

<div data-full-width="false"><figure><img src="/files/GhGIvT0GXJXcMPxLI7nH" alt=""><figcaption><p>Briq custom transaction history</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ready.co/ready-wallets/web-wallet/web-wallet-ux.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.