Woofi Swap Widget

Quick Start

Installation

npm add woofi-swap-widget

or

yarn add woofi-swap-widget

Usage

Initialize the Library with default wallet library(web3-onboard)

Use the minimum required config. There are more options available as detailed in the initialization section

//  main.js or index.js or other import file which will be called once
 import { init } from 'woofi-swap-widget'
 init()

Render the Library

// while target element is mounted, call the 'render' function
// component file
<template>
    <div id="swap" />
</template>
<script>
import { render } from 'woofi-swap-widget'
import 'woofi-swap-widget/dist/style.css' // import css
// on mounted lifecycle
onMounted(() => {
    render('#swap')
})
// or 
useEffect(() => {
    render('#swap') // render(el: string)
}, [])
</script>

Init Configuration

import { init } from 'woofi-swap-widget'
const options = {/** some options*/}
init(options)

Options

| name | type | required | default | values | description | |------------------|----------------------------|----------|---------------------------------------|--------------|------------------------------------------------------------------------------------------------------| | useUserWallet | Boolean | no | false | true/false | use user custom wallet, if it is true, will call the connectWallet and disconnectWallet function | | userAddress | String | no | '' | '0x11...111' | connected wallet address | | chainId | Hex String | no | '' | '0x123' | connected chain id | | provider | HttpProvider | no | | | connected http provider | | title | String | no | Swap | 'Swap' | widget's title | | allowChains | Array | no | [ethereum,avax, bsc, fantom,polygon,] | | allow chains to swap | | className | String | no | '' | | | | widgetExtraFeeRate | String | no | 0 | | | | widgetExtraFeeAddr | String | no | '' | | | | connectWallet | () => void | Promise; | no | | | custom connect wallet function | | disconnectWallet | () => void | Promise; | no | | | custom disconnect wallet function | | onSuccessNotify | function | no | | | Successful Notification function | | onErrorNotify | function | no | | | Error Notification function |

API

init: init(option)

render: render(el: string)

updateAddressAndProvider: (address: Address, provider: Provider, isForce?: boolean) => Promise;

updateConnectWallet: (connectWalletHandler) => void

updateDisconnectWallet: (disconnectWalletHandler) => void

Using the Library with custom wallet

First set the option useUserWallet into true, if custom connectWallet or custom disconnectWallet handler is ready, users can also set into options, like the below example:

import { init,render, updateConnectWallet, updateDisconnectWallet updateAddressAndProvider, } from 'woofi-swap-widget'
init({
    useUserWallet: true,
    connectWallet: () => {}
    disconnectWalet: () => {}
})

onMounted(() => {
    render('#swap')
})

while address and provider is ready()

watch(address, () => {
    if (address) {
     const provider = getProvider() // HttpProvider
     updateAddressAndProvider(address, provider)
    }
})

while functionconnectWallet and functiondisconnectWallet is ready

updateConnectWallet(connectWalletHandler)

updateDisconnectWallet(disconnectWalletHandler)

Style

There are provider some css variable for customize styles

Font

 --font-family: "DIN", "Helvetica Neue", Helvetica, system-ui, Arial,sans-serif;

Text

  --swap-text-primary-color: #73bef4;
  --swap-text-main-color: #ffffff;
  --swap-text-second-color: rgba(255, 255, 255, 0.8);
  --swap-text-three-color: #a8a8a8;

Btn

  --swap-btn-bg-color: linear-gradient(270deg, #59b0fe 0%, #26fefe 100%);
  --swap-btn-text-color: #282e3a;

Background

 --swap-bg-main-color: #1b2028;
  --swap-bg-second-color: #15181d;
  --swap-bg-three-color: #212630;
  --swap-bg-four-color: #282e3a;

Width

  --swap-wrapper-width: 470px;

Demo

More detail can see the demo