Learn how to integrate wallet functionality into Farcaster mini apps using Dynamic
.env
file in the root of your project with your Dynamic environment ID:
farcaster.json
file in the .well-known
directory:
https://your-domain.com
with your actual domain or hosting URL.
The iconUrl
, splashImageUrl
, and ogImageUrl
should point to images hosted on your server.
Update the other fields as necessary to match your app’s branding and functionality.wagmi.ts
file in your src
directory:
chains
array and enabling them in your Dynamic dashboard.
index.html
file:
App.tsx
component that will integrate Dynamic with our mini app:
sdk.actions.ready()
callMethods.tsx
file in the components
folder:
DynamicMethods
component handles the core wallet functionality for our mini app. It leverages several hooks from Dynamic’s SDK to access wallet and user information, and provides a simple interface for users to interact with their wallets.
Key Functions:
useDynamicContext
hook, including their ID, auth method, and other profile detailsuseUserWallets
hook, providing details about addresses, networks, and wallet typesMethods.css
or if you want to use the same styles check out this file on Github.
DynamicMethods
component within your main App component, placing it after the ConnectMenu
component to create a logical user flow: first connect a wallet, then interact with wallet methods.
For CSS styling, check out the file in the GitHub repository, or feel free to create your own styles as needed.
http://localhost:5173
by default.
To try out the app for testing, you’ll need to expose your local server to the internet. You can use services like cloudflared or ngrok:
vite.config.ts
file:
your-tunnel-domain.trycloudflare.com
with your actual tunnel domain. The allowedHosts
setting enables requests from specified domains to your development server, which is essential for testing with tunneling tools.
Once your app is running, copy the public URL provided by cloudflared or ngrok and add it in CORS Origins in your Dynamic dashboard under Developer Settings > CORS Origins. This step is crucial as it allows your mini app to communicate with the Dynamic backend.