​
Overview

The 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 or Web component.

​
Useful Links

​
Quickstart Guide

This guide will walk you though how to integrate the Widget 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 @tanstack/react-query graz react react-dom viem wagmi
2

Import the Widget Component

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

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

const SwapPage = () => {
  return (
    <div
      style={{
        width: '100%',
        maxWidth: '500px',
        padding: '0 10px',
      }}
    >
      <Widget
        theme="light"
        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!