@yozh-io/1inch-widget v1.1.0

🧩 1inch-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.

Supported networks:

 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/1inch-widget

or

npm install @yozh-io/1inch-widget

import { SwapWidget, nereusTheme, 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

References

• YOZH site
• Api reference