Swap Widget

This guide walks you through the steps to embed the swap widget in your website in a few minutes.

The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with a few lines of code.

Here is a live preview of the swap widget.

Installing the Widgets Library

Install the widgets library via npm ,pnpm or yarn.

yarn add @mosaicag/swap-widget

or

npm i --save @mosaicag/swap-widget

Adding the Swap Widget to Your App

  • Register for an new API key with the Mosaic Team, see here

  • Import @mosaicag/swap-widget/style.css in the root component in react, (ex: main.tsx/App.tsx)

import '@mosaicag/swap-widget/style.css' 
import SwapWidget from '@mosaicag/swap-widget'

function App() {
  <div className="Mosaic">
    ...
    <SwapWidget wallet={wallet} apiKey='...'/>
    ...
  </div>
}

Wallet Interaction

  • A lot of wallets are coming to Movement. You are free to use any wallet you want.

  • The swap widget uses a wallet prop to allow users to sign and submit transactions (details here)

Customize theme

<SwapWidget 
  wallet={wallet}
  apiKey="your api key"
  theme={{
    background: 'white',
    baseContent: 'black',
    border: 'gray',
    error: '#f6465d',
    neutralContent: 'black',
    primary: 'rgb(49, 203, 158)',
    secondary: 'rgba(49, 203, 158, 0.3)',
    secondaryBackground: '#f3f5fa'
  }}
/>

List of configurations

Demo & example

Feature request & Report issue

  • Feel free to contact us to request new config/report bug if you think it might be helpful.

  • Please reach out to us via Discord or email us directly at [email protected] for assistance and further details.

PreviousAPINextIframe

Last updated