🧩 Yozh-widget

Swap widget based on 1inch api. Widget for integration into other projects as a separate component, can be used as a standalone application with the ability to add swap protocols.

You can customize the theme to match the style of your application. You can also configure default tokens, referrer address to each network, default typed value in the input and rpc endpoints.

Supported locales: english, ukrainian.

List of supported networks:

enum SupportedChainId {
    MAINNET = 1,
    ARBITRUM_ONE = 42161,
    POLYGON = 137,
    BINANCE = 56,
    AVALANCHE = 43114,
    FANTOM = 250,
}

Networks GNOSIS (100) and OPTIMISM (10) coming soon.

How to use?

Install package:

yarn add @yozh-io/yozh-widget

or

npm install @yozh-io/yozh-widget

import { SwapWidget, darkTheme, SupportedChainId } from '@yozh-io/1inch-widget';
import { parseUnits } from '@ethersproject/units';

// Set default values for each chainId:
const defaultInputTokenAddress = {
    [SupportedChainId.MAINNET]: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
    [SupportedChainId.FANTOM]: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
    ...
  }
  const defaultTypedValue = {
    [SupportedChainId.MAINNET]: '1000000000000000000', // value in wei (1 eth on Ethereum mainnet)
    [SupportedChainId.FANTOM]: parseUnits('1', 18).toString(), // the second variant 
    ...
  }

  const defaultOutputTokenAddress = {
    [SupportedChainId.MAINNET]: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
    [SupportedChainId.FANTOM]: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
    ...
  }

  const referrerOptions = {
    [SupportedChainId.MAINNET]: {
      referrerAddress: '0xF4da87003DE84337400DB65A2DE41586E3557831',
      fee: '3',
    },
    [SupportedChainId.FANTOM]: {
      referrerAddress: '0xF4da87003DE84337400DB65A2DE41586E3557831',
      fee: '5',
    },
    ...
  }

  const defaultJsonRpcEndpoint = {
    [SupportedChainId.MAINNET]: 'https://eth-mainnet.alchemyapi.io/v2/...',
    [SupportedChainId.FANTOM]: 'https://rpc.ftm.tools',
    ...
  }
export default function App() {
  
    return (
      <SwapWidget
        width={400}
        referrerOptions={referrerOptions}
        jsonRpcEndpoint={defaultJsonRpcEndpoint}
        defaultOutputTokenAddress={defaultOutputTokenAddress}
        defaultInputTokenAddress={defaultInputTokenAddress}
        theme={nereusTheme}
        locale="ua"
        defaultTypedValue={defaultTypedValue}
    />
)};

Options

These are the props you can pass into your <SwapWidget /> React component.

ALL OPTIONS ARE NOT REQUIRED

| Prop | Type | Value | Default | |:---------------------:|:-----------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------| | jsonRpcEndpoint | { [chainId in SupportedChainId]: string; } | In order for a software application to interact with the blockchain, it must connect to node. | { 1: 'https://cloudflare-eth.com', 56: 'https://bsc-dataseed1.ninicoin.io', 137: 'https://polygon-rpc.com/', 250: 'https://rpc.ftm.tools', 42161: 'https://arb1.arbitrum.io/rpc', 43114: 'https://api.avax.network/ext/bc/C/rpc',} | | width | string or number | You can customize the width by passing a number (of pixels) to the width prop of the widget. | 418 | | referrerOptions | { [chainId: number]: { "referrerAddress": string, "fee": string, }}| Fee is a number from 1 to 3 percent. After each swap, a percentage from swap amount equal to fee will be transferred to referrerAddress | { 1: { "referrerAddress": "", "fee": "", }} | | defaultInputTokenAddress | { [chainId: string]: { "defaultInputTokenAddress": string }}| Address of the token to be selected by default in the input field (e.g. USDC) for each network chain ID. If left empty the widget will use the native token of the connected chain as default. This can be explicitly defined by the special string 'NATIVE'. For convenience you may pass a single string instead of a chainId mapping. | string or 'NATIVE' | | defaultOutputTokenAddress | { [chainId: string]: { "defaultOutputTokenAddress": string }}| Address of the token to be selected by default in the input field (e.g. USDC) for each network chain ID. None if left empty. Any addresses provided in this parameter must be included in the tokenList. | string or 'NATIVE' | | defaultTypedValue | { [chainId in SupportedChainId]?: BigNumberish; } | Value in wei. This value will respect the decimals of the inputTokenAddress. If the defaultInputTokenAddress is USDC, defaultTypedValue should be 1000000 (it means 1 USDC). | 0 | | locale | SupportedLocale | Specifies an explicit locale to use for the widget interface. This can be set to one of the values exported by the library in SUPPORTED_LOCALES.| en | | theme | Theme | Specifies a custom theme. See MUI THEME | light default-theme |

References

• YOZH site
• Api reference