Getting Started

Overview

The Skip Go SwapWidget is the easiest way to onboard users and capital from anywhere in the world to your corner of the sovereign web! The widget provides seamless cross-chain bridging, swapping, and transferring functionality in an easy to integrate React or Web component.

Useful Links

• Skip Go Repository
• Example Widget Implementation

Quickstart Guide

This guide will walk you though how to integrate the SwapWidget into your React app.

Starting from scratch? It’s recommended to use a React framework like Next.js or Create React App to get up and running quickly.

1

Installation

If you’re using yarn (or another package manager that doesn’t install peer dependencies by default) you may need to install these peer dependencies as well:

yarn add react react-dom styled-components

2

Import the SwapWidget Component

Next, use the SwapWidget component to render the swap interface:

import { SwapWidget } from '@skip-go/widget';

const SwapPage = () => {
  return (
    <div
      style={{
        width: '450px',
        height: '640px',
      }}
    >
      <SwapWidget
        theme={{
          brandColor: '#FF4FFF',
        }}
      />
    </div>
  );
};

3

Configuration

Now that you have the widget integrated, it’s time to configure the user experience. Find more details on widget configuration here.

If there’s any functionality or configurations you’d like to see in the widget, we’d love for you to contribute by opening up an issue or pull request in the repository or by joining our Discord and giving us a shout!