🖼️Widget API

Piteas Widget API is a versatile tool that can be seamlessly integrated into your portal by configuring it to meet your specific needs. It designed to be open for everyone to use and integrate. You can easily integrate it into your portal by making the necessary configurations.

The interface allows users to buy and sell for ERC20 tokens. An iframe integration may be useful if your application provides services around these ERC20 tokens. (For example, users can buy PLS through a Piteas iframe on your site).

iframe vs. custom UI

One benefit of an iframe integration is that the your site will automatically keep up with any improvements/additions to the site. After the initital integration is setup no further work is needed to pull in updates as the exchange site is updated over time.

---

Piteas Widget Generator is live!

Feel free to use the repo/version here to configure the widget however you like and embed it into your website. Released repo url is here: https://widget-generator-piteas.netlify.app 🎉

GitHub - piteasio/widget-generator: Easy-to-use tool to generate a fully customizable iframe for integrating the Piteas widget into any website.GitHub

Piteas Widget Generator

---

Example

Swap route for 1000 DAI to PLS

<iframe
    src="https://widget.piteas.io/#/swap?inputCurrency=0xefD766cCb38EaF1dfd701853BFCe31359239F305&outputCurrency=PLS&exactField=input&exactAmount=1000"
    height="720px"
    width="100%"
    style="
      border: 0;
      margin: 0 auto;
      margin-bottom: 0.5rem;
      display: block;
      max-width: 960px;
      min-width: 300px;
    "
  />

To include a Piteas widget API within your site just add an iframe element within your website code and link to the Piteas frontent.

---

Query Parameters

The Piteas front-end supports URL query parameters to allow for custom linking to the Piteas frontend. Users and developers can use these query parameters to link to the Piteas frontend with custom prefilled settings.

Each Page has specific available URL parameters that can be set. Global parameters can be used on all pages.

A parameter used on an incorrect page will have no effect on frontend settings. Parameters not set with a URL parameter will be set to standard frontend defaults.

Swap Page​

Parameter	Type	Description
inputCurrency	address or symbol	Input currency that will be swapped for output currency.
outputCurrency	address or symbol	Output currency that input currency will be swapped for.
exactAmount	number	The custom token amount to buy or sell.
exactField	string	The field to set custom token amount for. Must be input.

Symbols​

ETH or PLS defaults as the input currency. When a different token is selected for either input or output ETH will default as the opposite selected currency. (ETH=PLS) Pre loaded symbols 👇

PLS	DAI	USDT	USDC	WPLS	PTS
PLSX	HEX	EHEX	WETH	WBTC	USDL
INC	CST	PHUX	PHIAT	IM	NINEINCH
BEAR	MINT	HOA	PDAI	UP	UPX

Constraints​

Addresses must be valid ERC20 addresses. Slippage and amount values must be valid numbers accepted by the frontend (or error will prevent from swapping). Slippage can 0, or within the range 10->9999 bips (which converts to 0%, 0.01%->99%)

When selecting PLS as the output currency a user must also choose an inputCurrency that is not PLS (to prevent PLS being populated in both fields)

Setting Amounts​

Two parameters, exactField and exactAmount can be used to set specific token amounts to be sold or bought. Both fields must be set in the URL or there will be no effect on the settings.

---

Global​

Parameter	Type	Description
theme	String	Sets them to dark or light mode.

Theme Options:​

Theme can be set as light or dark.

Example Usage:​

https://widget.piteas.io/#/swap?theme=light

---

Final Another Example

Swap route for 1000000 PLS to PHUX

<iframe
    src="https://widget.piteas.io/#/swap?inputCurrency=PLS&outputCurrency=0x9663c2d75ffd5F4017310405fCe61720aF45B829&theme=dark&exactField=input&exactAmount=1000000"
    height="720px"
    width="100%"
    style="
      border: 0;
      margin: 0 auto;
      margin-bottom: 0.5rem;
      display: block;
      max-width: 960px;
      min-width: 300px;
    "
  />