Build with CTM Widget
How to build with ctm widget
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.
Prerequisites
React Application: Ensure you have setup a vite application via
cd <your-application> && npm create vite@latest .
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
npm i swap-widget-ctm@1.0.0
Set Up Environment Variables: Create a
.env
file in the root of your project and add your keys. Get you thirdweb api key https://thirdweb.com/dashboard and your mobula api key ttps://admin.mobula.fi/admin/default.
VITE_T=your_thirdweb_secret_key
VITE_M=your_mobula_api_key
Component Integration
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 Providers Guide.
import React from 'react';
import {SwapCard,ChainflipProvider,ThorChainProvider} from "swap-widget-ctm"
import "../node_modules/swap-widget-ctm/dist/style.css" // import the component style
NOTE: For importing the styles it is important to install tailwind in your application
Tailwind Guide
Installation
npm i -D tailwindcss postcss autoprefixer
Initialization the tailwind config
npx tailwindcss init -p
and add the following lines of code in src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the following in the tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
'./node_modules/swap-widget-ctm/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
plugins: [],
}
Wrap Your Component with Providers: Use the providers to wrap your SwapCard
component.
SwapCard
component.const CTMWidget = () => {
return (
<ChainflipProvider useTestnet={true} thirdwebSecretKey={import.meta.env.VITE_T} mobulaAPIKey={import.meta.env.VITE_M}>
<ThorChainProvider>
<SwapCard />
</ThorChainProvider>
</ChainflipProvider>
);
};
export default CTMWidget;
Use the Widget in Your Application: Import and use the CTMWidget
in your main application or wherever you need it.
CTMWidget
in your main application or wherever you need it.import React from 'react';
import ReactDOM from 'react-dom';
import CTMWidget from './CTMWidget';
const App = () => {
return (
<main classname="w-full h-screen grid place-items-center">
<CTMWidget />
</main>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Voila!! You should have something like this on your screen!!

Troubleshooting
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.
Last updated