Skip to content

Latest commit

 

History

History
162 lines (120 loc) · 3.44 KB

README.md

File metadata and controls

162 lines (120 loc) · 3.44 KB
Raw

defi-ui-kit logo

DeFi UI Kit

A React component library to streamline DeFi platform building

Table of contents

Quick Start

Installation

npm install defi-ui-kit

Configuration

To be used in conjuction with Wagmi, with configuration at the App level

import { configureChains, createClient, useSwitchNetwork, WagmiConfig } from "wagmi"
import { mainnet, bsc, arbitrum, optimism, polygon } from '@wagmi/core/chains'
import {alchemyProvider} from "wagmi/providers/alchemy"
import { infuraProvider } from 'wagmi/providers/infura'
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
import { fetchSigner, getAccount, getProvider} from '@wagmi/core'
import { DeFiUIKitProvider } from "defi-ui-kit"


const {chains, provider} = configureChains(
  [mainnet, arbitrum, optimism, polygon, bsc], 
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY }),
    infuraProvider({ apiKey: process.env.INFURA_API_KEY }),
    jsonRpcProvider({
      rpc: (chain) => ({
        http: `${process.env.BSC_API_URL}`,
      }),
    }),
  ]
)

const wagmiClient = createClient({
  autoConnect: true,
  connectors, 
  provider
})

const account = getAccount()
const currentProvider = getProvider()

const DeFiUIConfig = {
  account,
  fetchSigner,
  chains,
  currentProvider,
  useSwitchNetwork
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiClient}>
        <DeFiUIKitProvider config={DeFiUIConfig}>
            <Component {...pageProps} />
        </DeFiUIKitProvider>
    </WagmiConfig>
  )
}

export default MyApp

Swap

Integrated swap components

import { Swap } from "defi-ui-kit"

const SwapExample = () => {
  return (
    <Swap />
  )
}

Optional Parameters:

tokenA?: TokenMetadataResponse,
tokenB?: TokenMetadataResponse,
apiType?: '0x' | '1inch' | 'uniswapv2' | 'pancakeswap',
tokenList?: TokenMetadataResponse[],
primaryTokens?: TokenMetadataResponse[],
switchIcon?: "none" | React.ReactNode, 
variant?: "bidirectional" | "unidirectional"

Swap Component Usage

  • Token A and Token B: Default tokens
  • Primary Tokens: Common token bases for swaps
  • Token List: List of tokens we want to swap

Swap API Types

The swap component has already been integrated with several types of APIs to choose from:

  • 0x
  • 1Inch
  • UniswapV2
  • PancakeswapV2

  • Support/Implementation of features
API Type Gas Estimation Price Impact Routes
0x ✅ ✅ ✅
1Inch ✅ ❌ ✅
UniswapV2 ❌ ✅ ❌
PancakeswapV2 ❌ ❌ ❌

Swap Routes

The swap supports all types of possible routes:

  • Single swaps
  • MultiSource swaps
  • MultiHop swaps

Calculations

Price Impact

$$\frac{\Delta_x}{x + \Delta_x} \times 100$$

where,

$x$ is the reserve of Token A