npm i && npm run dev
to install the dependencies and start the app.
Open it up on whichever ports it displays for you, and you should see a simple app with a button that says âConnect Walletâ.
Connect an Ethereum supported wallet i.e. Metamask, and you should see a new button called âConnect XMTPâ appear. Click it, and youâll be prompted to sign a message in your wallet.
Those two steps could be combined into one for ease of use, but weâve kept them separate here to show you how it works under the hood.
Thatâs it! Youâre authenticated and connected. You can now send messages to wallet addresses, and theyâll be able to see them in real time.
sdk-react-core
. This is important.
The -core
signifies that we are using the modular version of the SDK, where you pick and choose which chain/wallet providers you want to import and thus keep the bundle size as small as possible.
This is why youâll also see an EthereumWalletConnectors
import, which is the Ethereum wallet connector from Dynamic. Itâs passed in through the settings prop on the DynamicContextProvider, like this:
Home
component, where youâll find a lot of different XMTP functionality If you want to learn more, the docs detail the entire SDK and methods available: https://xmtp.org/docs/build/get-started