​

Overview

Skip Go Widget 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/Web component.

Purpose-built with customizability, extensibility, and contributor friendliness in mind, the Skip Go Widget is fully open-sourced and designed to fit your exact user experience needs. 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/pull request in the repository or by joining our Discord and giving us a shout!

​

Useful Links

• Skip Go Repository: https://github.com/skip-mev/skip-go
• Next JS App Example: https://github.com/skip-mev/skip-go/tree/main/examples/nextjs

​

Quickstart Guide

This guide will walk you though how to easily install and add the Skip Go Widget directly into your app in no time!

​

1. Installation

@skip-go/widget is an npm package that offers a React component for creating a fully customizable interface for swapping, transferring, and bridging, all powered by the Skip Go API. To install the package, run the following command:

npm install @skip-go/widget

If you’re using yarn (or some other 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. Use 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: '820px',
      }}
    >
      <SwapWidget
        theme={{
          brandColor: '#FF4FFF',
        }}
      />
    </div>
  );
};

​

3. Configure away!

You’re all done with the basic set up! Now that you have the widget integrated, it’s time to configure the user experience. You can find all of the configurable component props in Configuration Options.