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 |