The @skip-go/widget package is an npm package providing a React component for a full swap interface using the Skip API.

To install the package, run the following command:

npm install @skip-go/widget

First, wrap your application or the relevant page with the SwapWidgetProvider component:

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

function App() {
  return (
    <SwapWidgetProvider>
      <YourApp />
    </SwapWidgetProvider>
  );
}

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
        colors={{
          primary: '#FF4FFF',
        }}
      />
    </div>
  );
};

The SwapWidget component accepts the following props:

interface SwapWidgetProps {
  colors?: {
    primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
  };
  defaultRoute?: {
    // Default route for the widget.
    amountIn?: number;
    amountOut?: number;
    srcChainID?: string;
    srcAssetDenom?: string;
    destChainID?: string;
    destAssetDenom?: string;
  };
  routeConfig?: {
    experimentalFeatures?: ['hyperlane'];
    allowMultiTx?: boolean;
    allowUnsafe?: boolean;
    bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
    swapVenues?: {
      name: string;
      chainID: string;
    }[];
  };
  className?: string;
  style?: React.CSSProperties;
  settings?: {
    customGasAmount?: number; // custom gas amount for validation defaults to 200_000
    slippage?: number; //percentage of slippage 0-100. defaults to 3
  };
  onlyTestnet?: boolean; // Only show testnet chains
}

The SwapWidgetProvider component accepts the following prop:

• toasterProps (Optional): Props for the toaster component. Refer to ToasterProps for more details. Defaults to { position: 'top-right' }.

• endpointOptions (Optional): Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.

  endpointOptions?: {
      // Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
      endpoints?: Record<string, EndpointOptions>;
      getRpcEndpointForChain?: (chainID: string) => Promise<string>;
      getRestEndpointForChain?: (chainID: string) => Promise<string>;
    };

• apiURL (Optional): Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.

By following these steps, you can easily integrate the Skip Go Widget into your React application and customize it to meet your specific needs.