@pepe-team/bridge-widget-embedder NPM

Bridge Widget Embedder

Widget config parameters

Key	Type	Note
`host`	`HTMLElement`	DOM element where widget should be placed
`iframeUrl`	`string`	URL for origin iframe URL (https://bridge.pepe.team/iframe)
`token`	`string`	Which token should be transferred. It should be token symbol, e.g. `ETH`
`token_bridge_id`	`string`	Which token should be transferred. It should be token bridge id, e.g. `ETH-Ethereum-PPT`
`source_chain_id`	`number`	Transfer source chain (where transfer from). It should be bridge chain id, e.g. `1`, `2` for mainnet or `10001`, `10002` for testnet
`target_chain_id`	`number`	Transfer target chain (where transfer to). It should be bridge chain id, e.g. `1`, `2` for mainnet or `10001`, `10002` for testnet
`recipient`	`string`	Address of transfer recipient
`amount`	`number`	Amount to be prefilled in the form
`referrer`	`string`	Address of referrer – this address will receive cashback extracted from protocol fee as reward for the transfer. If empty, referrer will be an empty string
`ext_signing_chains`	`string`[]	For which chains (sending asset chain) widget should dispatch `signTx` events and use its results as proofs
`color_schema`	JSON-encoded object (ColorSchema)	Color schema to be used in the widget. If not provided, default will be used

Widget tabs:

Name
`transfer`
`history`

Color Schema

All color values are presented as #HEX

key	default
`bg-primary`	`#00A575`
`bg-secondary`	`#FFFFFF`
`bg-tertiary`	`#F7F7F7`
`border-primary`	`#00A575`
`border-secondary`	`#FFFFFF`
`border-error`	`#E80000`
`border-disabled`	`#BFBFBF`
`button-bg-primary`	`#00A575`
`button-bg-secondary`	`#FFFFFF`
`button-bg-error`	`#FFFFFF`
`button-bg-disabled`	`#FFFFFF`
`button-text-primary`	`#FFFFFF`
`button-text-secondary`	`#00A575`
`button-text-error`	`#E80000`
`button-text-disabled`	`#BFBFBF`
`button-border-primary`	`#FFFFFF`
`button-border-secondary`	`#00A575`
`button-border-error`	`#E80000`
`button-border-disabled`	`#BFBFBF`
`text-primary`	`#333333`
`text-secondary`	`#717171`
`text-tertiary`	`#BFBFBF`
`skeleton-primary`	`#F4F4F4`
`skeleton-secondary`	`#E9E9E9`
`skeleton-tertiary`	`#E4E4E4`
`skeleton-shimer`	`#FFFFFF`
`skeleton-border`	`#EEEEEE`
`tab-btn-primary`	`#00A575`
`tab-btn-secondary`	`#FFFFFF`
`fee-low`	`#F5AC37`
`fee-normal`	`#00A575`
`fee-high`	`#E80000`
`fee-custom`	`#717171`

Color schema example:

{
	"bg-primary": "#FFFFFF",
	"bg-secondary": "#AAAAAA"
}

Methods

`run`

Start the widget

Arg	Type	Note
`config`	`WidgetArgs`	Widget config paramenters

widget.run({
	iframeUrl: 'https://bridge.pepe.team/iframe',
	host: document.body,
	token_bridge_id: 'ETH-Ethereum-PPT'
});

`on`

Listen for widget incomming messages (widget interaction)

Arg	Type	Note
`eventKind`	`IncomingMessageKind`	Kind of incoming message
`callback`	`(msg: Message<IncomingMessageKind>): void`	Message handler

widget.on(IncomingMessageKind.TxBroadcasted, (tx_id) => {
	console.log('Tx broadcasted', tx_id);
});

`sendMessage`

Send message to the widget (widget interaction)

Arg	Type	Note
`message`	`Message<OutgoingMessageKind>`	Message to be send to widget

const msg = {
	mid: 1,
	kind: OutgoingMessageKind.TxRejection,
	payload: {
		reason: 'User rejection'
	}
};
widget.sendMessage(msg);

`setAmount`

Set form field amount to provided value

Arg	Type	Note
`amount`	`BigNumber` \| `number` \| `string`	New form field `amount` value

widget.setAmount(1);

`setColorSchema`

Arg	Type	Note
`colors`	`Partial<Colors>`	New form colors to be applied

const colors = {
	'bg-primary': '#000000',
	'text-primary': '#FFFFFF'
};
widget.setColorSchema(colors);

Widget usage example

const widget = new BridgeWidget();

widget.on(IncomingMessageKind.GetAccount, (m) => {
	widget.sendMessage({
		mid: m.mid,
		kind: OutgoingMessageKind.Account,
		payload: {
			account: {
				chainId: 'T',
				address: 'ADDRESS',
				publicKey: 'PUBLIC-KEY'
			}
		}
	});
});

widget.run({
	iframeUrl: 'https://bridge.pepe.team/iframe',
	host: document.body,
	token_bridge_id: 'ETH-Ethereum-PPT',
	source_chain_id: 1,
	target_chain_id: 2,
	ext_signing_chains: [1],
	recipient: 'RECIPIENT',
	amount: 100,
	referrer: 'REFERRER',
	color_schema: {
		'bg-primary': '#000000',
		'text-primary': '#FFFFFF'
	}
});

// destroy widget when transfer is done
widget.destroy();

Widget incoming events

Name
`widgetLoaded`
`getAccount`
`getAccountTimeout`
`signTx`
`txBroadcasted`
`txConfirmed`
`txError`
`signTxTimeout`
`unexpectedMid`
`unexpectedKind`
`invalidPayload`
`unexpectedMessage`
`invalidPrefillData`