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 .

1. Environment Variables: You need the following environment variables:

   • VITE_T: Your thirdweb secret key.

   • VITE_M: Your Mobula API key.

Installation

1. Install Dependencies: Install our widget sdk

   npm i swap-widget-ctm@1.0.0

2. 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.

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.

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!!

Widget

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.