Liquidswap Widget
A web component custom element that can be embedded in any frontend application, or even plain HTML/JS/CSS. Using the full strength of the SDK, the widget can provide swap operations from any other custom dApp, wallet, etc.
yarn add @pontem/liquidswap-widget
or
npm install @pontem/liquidswap-widget
Function
loadWidget
accepts widget HTML tag name as string. It can be custom name but must be in kebab case. We recommend to use liquidswap-widget
name. Passed name must be exactly the same as tag name.- Reactimport React, { useLayoutEffect } from 'react';import { loadWidget } from '@pontem/liquidswap-widget';export const Widget = () => {useLayoutEffect(() => {loadWidget('liquidswap-widget');}, []);return (<div className="'Your Wrapper className'"><liquidswap-widget/></div>);};
- Vue<template><div class="'Your Wrapper class name'"><liquidswap-widget></div></template><script setup lang="ts">import { loadWidget } from '@pontem/liquidswap-widget';loadWidget('liquidswap-widget');</script>
- Any other framework / lib
- 1.Make sure you added html tag
liquidswap-widget
into app.
<liquidswap-widget></liquidswap-widget>- 1.Import
loadWidget
function from npm and run with passing html tag name in kebab case;
import { loadWidget } from '@pontem/liquidswap-widget';loadWidget('liquidswap-widget');
You can listen widget and add some logic (if necessary) when widget is embedded:
// customElements defined at global window object.
customElements.whenDefined('liquidswap-widget').then(() => {
// here custom logic
});
Widget example published to github pages:
Liquidswap Widget could be used as Dapp inside wallet.
In that case web-custom-element needs several properties:
- Account address of wallet;
const dataAccount = '0x15fd61229f6e12b51adbff45b7b74310c7eaf9c24ef8c13b653c8f2a07bc1d14';
- Network information: name and chainId;
const dataNetwork = { name: 'mainnet', chainId: '1' };
- Transaction info: status and hash;
interface ITransactionStatus {
status: 'pending' | 'success' | 'error' | 'rejected';
hash: string | null
};
const transactionStatus: ITransactionStatus = { status: 'pending', hash: null };
- Properties should be passed as strings (data-attributes), so to pass
Object
variable you need to useJSON.stringify()
on passingObject
. - Properties will be extruded with
JSON.parse()
inside widget; - Properties are reactive, so any change to props will update widget’s internal store;
Also, widget will dispatch to Custom Events:
- 1.‘signAndSubmitTransaction’ - this event will return CustomEvent with ‘detail’ property containing ready for wallet transaction payload. Just accept props inside handler and you will find prop ‘detail’ with full transaction payload;
- 2.‘transactionProcessed’ - this event will be fired after widget accepts hash and status of transaction and correctly resolves it with.
import React, { useLayoutEffect, useRef, useState } from 'react';
import { loadWidget } from '@pontem/liquidswap-widget';
export const Widget = () => {
const [dataNetwork, setDataNetwork] = useState(
{ name: 'mainnet', chainId: '1' }
);
const [dataAccount, setDataAccount] = useState(
'0x019b68599dd727829dfc5036dec02464abeacdf76e5d17ce43352533b1b212b8'
);
const [transactionStatus, setTransactionStatus] = useState<{
status: string,
hash: string | null
}>({ status: 'pending', hash: null });
const ref = useRef();
const transactionHandler = (props: CustomEvent) => {
// props.detail will be contain payload.
};
const processedHandler = (event: CustomEvent) => {
// this event will be fired when user close modal with transaction status
// neither it's success or error. After that point we do not need to
// provide hash or status. So it should be set to initial State:
setTransactionStatus({ status: 'pending', hash: null });
};
useLayoutEffect(() => {
loadWidget('liquidswap-widget');
// customElements available as window.customElements
customElements.whenDefined('liquidswap-widget').then(() => {
if (ref.current) {
const nodeElement = ref.current as unknown as Element;
nodeElement.addEventListener(
'signAndSubmitTransaction',
transactionHandler
);
nodeElement.addEventListener(
'transactionProcessed',
processedHandler
);
}
});
}, []);
return (
<liquidswap-widget
ref={ref}
data-network={JSON.stringify(dataNetwork)}
data-account={dataAccount}
data-transaction={JSON.stringify(transactionStatus)}
/>
)
};
Note: When this properties are passed to widget - it treats Parent element as ‘wallet environment’, so connect / disconnect wallet flow will be skipped / hidden.
Last modified 6mo ago