@panoraexchange/widget-sdk v1.0.13

@panoraexchange/widget-sdk

Description

The Panora Swap Widget SDK allows developers/projects to easily integrate Panora's powerful widget into their projects. With this SDK, you can enable users to swap directly through Panora's platform, providing them with access to the best routes and rates in the market.

Installation

Using Yarn

yarn add @panoraexchange/widget-sdk

Using npm

npm install @panoraexchange/widget-sdk

Using pnpm

pnpm add @panoraexchange/widget-sdk

Basic Example

To get started quickly, here's a basic example of how to integrate the Panora Swap Widget into your application:

import { PanoraWidget,  PanoraWidgetConfig } from "@panoraexchange/widget-sdk";

const widgetConfig: PanoraWidgetConfig = {
    API_KEY: "YOUR_API_KEY"
  }

export const Page = () => {
  return (
    <PanoraWidget config={widgetConfig} />
  );
}

Compatibility

• Create-React-App (React 18) (Example)
• Next.js (Example)

Widget Configuration

Custom Widget Configurations

import { PanoraWidget, PanoraWidgetConfig } from "@panoraexchange/widget-sdk"

const widgetConfig: PanoraWidgetConfig = {
    API_KEY: "YOUR_API_KEY",
    styles?: {
      colors?: {
        primary?: string
        secondary?: string
        textPrimary?: string
        textSecondary?: string
    }
      widget?: {
        width?: string
        backgroundColor?: string
        secondaryBackgroundColor?: string
    }
      modal?: {
        width?: string
        backgroundColor?: string
        secondaryBackgroundColor?: string
    }
  },
    // Whether to show the connect wallet button or not (default: true)
    showConnectWalletButton: true,
    // Whether to show expanded view of the complete route (defult: true)
    showExpandRouteIcon: true,
    // Whether to show the detailed info about the swap transaction (default: true)
    showRouteInfo: true,
    // Overrides the list of enabled wallets to display within the widget
    enabledWallets: [  
        "Petra",
        "Pontem",
        "Nightly",
        "OKX Wallet",
    ],
    // Configuration parameters for submitting a transaction. Sensible defaults for these values are taken if they are not specified explicitly.
    transactionOptions?: {
        // The maximum amount of gas that can be consumed by the transaction
        maxGasAmount?: 10000
        // The price per unit of gas that the sender is willing to pay
        gasUnitPrice?: 100,
        // Unix timestamp indicating when a transaction will expire if not included in the blockchain
        expireTimestamp: (new Date("2050-01-01T00:00:00Z"))?.getTime()

  },
   // Adding custom action buttons in the swap widget
  customActionBtns: [<button onClick={() => customAction()}>Custom Button</button>, ...],
  // Whether the token picker should open in a detailed modal format or a simple dropdown
  tokenPickerView: "DROPDOWN" | "MODAL",
  // Custom tokens to be used in the swap token picker
  customTokenList?: [
    "0xa", "0xbae207659db88bea0cbead6da0ed00aac12edcdda169e591cd41c94180b46f3b", 
    ...],
  // Custom manifest.json url for mizu wallet
  mizuWalletManifestUrl?: string
  // Default list of favorite tokens to be shown in the token picker
  defaultFavoriteTokens?: [
    "0xa", "0xbae207659db88bea0cbead6da0ed00aac12edcdda169e591cd41c94180b46f3b", 
    ...]
}

Customize Theme

import { PanoraWidget } from "@panoraexchange/widget-sdk"

const App = () => (
  <PanoraWidget
    config={{
      API_KEY: "...",
      styles: {
        colors: {
          primary: "#5fdfac",
          bgPrimary: "#010D09",
          borderPrimary: "rgba(255, 255, 255, .05)",
          borderSecondary: "rgb(95 223 172 / 0.05)",
          shadowPrimary:
            "rgb(0 0 0 / 16%) 0px 2px 4px, rgb(0 0 0 / 32%) 0px 8px 16px",
          btnTextPrimary: "black",
          btnTextSecondary: "rgba(0, 0, 0, .25)",
          textSecondary: "rgb(107 114 128)",
          warning: "#EF8E19",
          error: "#F6465D",
          textPrimary: "white",
          skeletonBase: "rgb(255,255,255, .05)",
          skeletonHighlight: "rgb(255,255,255, .1)",
          bgError: "rgb(246, 70, 93, .1)",
          bgSuccess: "rgb(95, 223, 172, .1)",
          bgSecondary: "#000704",
        },
      },
    }}
  />
)

Widget Controls

import { usePanoraWidget } from "@panoraexchange/widget-sdk"

const widget = usePanoraWidget()

Set the from token in the swap widget

widget.setFromTokenAddress({ tokenType: "token address" })

Set the to token in the swap widget

widget.setToTokenAddress({ tokenType: "token address" })

Open the widget token picker

widget.openTokenPicker()

Close the widget token picker

widget.closeTokenPicker()

Feature request & Report issue

• Feel free to contact us to request new config/report bug if you think it might be helpful.
• Please submit a ticket via Discord for assistance and further discussions.