<p>This could be solved by variety of tools:</p>
<ol>
<li>Using Lucid, you can first enable (connect) with wallet as outlined in <a href="https://github.com/spacebudz/lucid#basic-usage" rel="nofollow noreferrer">this</a> simple example. Then get address via <code>lucid.wallet.address()</code> (it returns a <code>Promise</code>, so you might need to use <code>async / await</code>). This address is basically obtained from <a href="https://cips.cardano.org/cips/cip30/#apigetusedaddressespaginatepaginateundefinedpromiseaddress" rel="nofollow noreferrer">CIP-30</a>'s, <code>getUsedAddresses()</code>'s first element.</li>
<li>Like what you have shared in question, Mesh has a prebuilt component for it, which can be seen <a href="https://mesh.martify.io/react/ui-components" rel="nofollow noreferrer">here</a>. Once connected, you can get address as mentioned in <a href="https://mesh.martify.io/apis/browserwallet" rel="nofollow noreferrer">this</a> page.</li>
<li>Regarding library in question, can use <a href="https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/src/utils/wallet.ts#L19" rel="nofollow noreferrer"><code>decodeHexAddress</code></a> on browser wallet api's, <code>getUsedAddresses()</code>'s first element.</li>
</ol>

CC BY-SA 4.0
2022-11-17T06:38:16.593Z
2022-11-17T08:30:26.127Z
2022-11-17T08:30:26.127Z
Sourabh
<p>I am creating a React app and I want to integrate a connect wallet button that can then return the users wallet address, similar to JPEG.store. What is the best way to approach this. I tried using Cardano connect with wallet <a href="https://github.com/cardano-foundation/cardano-connect-with-wallet" rel="nofollow noreferrer">https://github.com/cardano-foundation/cardano-connect-with-wallet</a> but I cant figure out how to return the users address after they have signed in with their wallet. Any help is appreciated.</p>

<wallet><decentralized-applications>
Creating a connect wallet button like JPEG.store
# Creating a connect wallet button like JPEG.store

(Asked by: username_0 on 2022-11-16)

I am creating a React app and I want to integrate a connect wallet button that can then return the users wallet address, similar to JPEG.store. What is the best way to approach this. I tried using Cardano connect with wallet <https://github.com/cardano-foundation/cardano-connect-with-wallet> but I cant figure out how to return the users address after they have signed in with their wallet. Any help is appreciated.

**Tags:** wallet, decentralized-applications

---

## 1 answers

### Answer by username_1 on 2022-11-17. Score: 2

This could be solved by variety of tools:

1. Using Lucid, you can first enable (connect) with wallet as outlined in [this](https://github.com/spacebudz/lucid#basic-usage) simple example. Then get address via `lucid.wallet.address()` (it returns a `Promise`, so you might need to use `async / await`). This address is basically obtained from [CIP-30](https://cips.cardano.org/cips/cip30/#apigetusedaddressespaginatepaginateundefinedpromiseaddress)'s, `getUsedAddresses()`'s first element.
2. Like what you have shared in question, Mesh has a prebuilt component for it, which can be seen [here](https://mesh.martify.io/react/ui-components). Once connected, you can get address as mentioned in [this](https://mesh.martify.io/apis/browserwallet) page.
3. Regarding library in question, can use [`decodeHexAddress`](https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/src/utils/wallet.ts#L19) on browser wallet api's, `getUsedAddresses()`'s first element.


---

