woofi-swap-widget v0.2.44
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
16 days ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago