react-navi-widget

react-navi-widget is a React package that provides an interface for integrating Sui-based swap functionalities into your application.

Playground

Typedoc

Installation

To install react-navi-widget, run the following command:

npm i react-navi-widget

Usage

Setting Up the Provider

To use react-navi-widget, wrap your application with NaviWidgetProviderWrapper. This wrapper ensures that the necessary context and configuration for interacting with the Sui blockchain are set up properly.

// navi-widget-provider-wrapper.tsx

"use client";

import { useCurrentAccount, useSignTransaction } from "@mysten/dapp-kit";

import { Transaction } from "@mysten/sui/transactions";
import { NaviWidgetProvider, SwapPanelClient } from "react-navi-widget";

const swapPanelClient = SwapPanelClient.getInstance();

const NaviWidgetProviderWrapper = ({
  children,
}: {
  children: React.ReactNode,
}) => {
  const account = useCurrentAccount();
  const { mutateAsync: signTransaction } = useSignTransaction();

  // Developers need to register the onSignTransaction method for transaction signing
  // Run sign transaction logic in your app
  // After signing, return the signature and bytes
  const onSignTransaction = async (tx: Transaction) => {
    const resp = await signTransaction({ transaction: tx });
    return {
      signature: resp.signature,
      bytes: resp.bytes,
    };
  };

  return (
    <NaviWidgetProvider
      onSignTransaction={onSignTransaction}
      client={swapPanelClient}
      operator={account?.address}
      //defaultTheme
      //onSwapSuccess
      //onClickConnect
    >
      {children}
    </NaviWidgetProvider>
  );
};

Integrating with the Application

Wrap your application inside NaviWidgetProviderWrapper to enable interaction with the Navi swap panel.

import {
  createNetworkConfig,
  SuiClientProvider,
  WalletProvider,
} from "@mysten/dapp-kit";
import { getFullnodeUrl } from "@mysten/sui/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const { networkConfig } = createNetworkConfig({
  mainnet: { url: getFullnodeUrl("mainnet") },
});
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
        <WalletProvider>
          {/* Wrap NaviWidgetProviderWrapper inside WalletProvider */}
          <NaviWidgetProviderWrapper>
            <YourApp />
          </NaviWidgetProviderWrapper>
        </WalletProvider>
      </SuiClientProvider>
    </QueryClientProvider>
  );
}

Using the Swap Panel

Once integrated, you can control the react-navi-widget swap panel programmatically using the provided hooks.

const { panel, swap } = useNaviWidget();

// Open or close the swap panel
panel.show();
panel.hide();

// change theme
panel.setTheme("light");

// Configure swap settings
swap.setTokenFrom(
  "0xa99b8952d4f7d947ea77fe0ecdcc9e5fc0bcab2841d6e2a5aa00c3044e5544b5::navx::NAVX"
);
swap.setTokenFromAmount("0.01");
swap.setTokenTo("0x2::sui::SUI");
swap.setServiceFee({
  fee: 0.01,
  receiverAddress:
    "0x00e3c7c9137dd016571befcb51475e96ca38e25cbea0daf06a63c4f37ede0e6c",
});