andreachello / defiuikit

A React component library to streamline DeFi platform building

DeFi UI Kit

A React component library to streamline DeFi platform building

Table of contents

• Quick start
• Swap
• Liquidity Pool - Coming Soon
• Bridge - Coming Soon

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