user7823: 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.

user7049: This could be solved by variety of tools:

Using Lucid, you can first enable (connect) with wallet as outlined in this 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's, getUsedAddresses()'s first element.
Like what you have shared in question, Mesh has a prebuilt component for it, which can be seen here. Once connected, you can get address as mentioned in this page.
Regarding library in question, can use decodeHexAddress on browser wallet api's, getUsedAddresses()'s first element.


7823: <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>
 7049: <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>
