Test-widget-knv-1 NPM

@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",
    // Custom styles to tailor the appearance of the widget
    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",
        "Martian",
        "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?: [
    "0x1::aptos_coin::AptosCoin", "0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDC", 
    ...],
  // Custom manifest.json url for mizu wallet
  mizuWalletManifestUrl?: string
  // Default list of favorite tokens to be shown in the token picker
  defaultFavoriteTokens?: [
    "0x1::aptos_coin::AptosCoin", "0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDC", 
    ...]
}

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()

@aptos-labs/ts-sdk @aptos-labs/wallet-adapter-react @emotion/react @emotion/styled @martianwallet/aptos-wallet-adapter @material-tailwind/react @mizuwallet-sdk/core @msafe/aptos-wallet-adapter @mui/material @okwallet/aptos-wallet-adapter @rise-wallet/wallet-adapter @tanstack/react-query aptos autoprefixer axios big-integer clsx crypto-browserify es6-object-assign eslint eslint-config-next eslint-config-prettier fewcha-plugin-wallet-adapter graphql graphql-request lodash-es mini-css-extract-plugin numbro petra-plugin-wallet-adapter postcss postcss-import prettier react react-app-rewire-alias react-circular-progressbar react-copy-to-clipboard react-detect-click-outside react-dom react-error-overlay react-highlight-words react-horizontal-scrolling-menu react-icons react-jazzicon react-loading-skeleton react-scripts react-swipeable-views react-toastify react-use-measure sass tailwind-merge tailwind-scrollbar-hide tailwindcss typescript uuid web-vitals yarn zod zustand

2 months ago

2 months ago

2 months ago

3 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

4 months ago

4 months ago

4 months ago

5 months ago

6 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago