Build with CTM Widget
How to build with ctm widget
Last updated
How to build with ctm widget
Last updated
This guide will help you integrate and use the CTM Widget and make you app cross chain with less than 10 lines of code , a React component designed to facilitate swaps using Chainflip and Thorchain providers. The widget requires environmental variables for thirdwebSecretKey and mobulaAPIKey.
React Application: Ensure you have setup a vite application via
Environment Variables: You need the following environment variables:
VITE_T
: Your thirdweb secret key.
VITE_M
: Your Mobula API key.
Installation
Install Dependencies: Install our widget sdk
Set Up Environment Variables: Create a .env
file in the root of your project and add your keys. Get you thirdweb api key and your mobula api key .
Import Providers and Components: In your React component file, import the necessary providers ChainflipSdkProvider
and ThorChainProvider
and the SwapCard
component. Read about provider options in
NOTE: For importing the styles it is important to install tailwind in your application
Installation
Initialization the tailwind config
and add the following lines of code in src/index.css
Copy the following in the tailwind.config.js
SwapCard
component.CTMWidget
in your main application or wherever you need it.Voila!! You should have something like this on your screen!!
Dependencies: Ensure all necessary dependencies are installed.
Environment Variables: Double-check that your .env
file is correctly configured and the variables are being imported correctly.
By following this guide, you should be able to integrate and use the CTM Widget in your React application smoothly. If you encounter any issues, refer to the documentation of the respective providers or reach out for support.