Usage

The following outlines how to to implement the USX Transfer Widget.

Getting Started

npm install --save @ax-protocol/widgets

Required Configuration

Property	Description
evmRpcUrlMap	Mapping of EVM JSON-RPC endpoint URL strings, indexed by chain ID.

Optional Configuration

Property	Description
theme	Object of properties to set custom styling.
maxWidth	Number to define custom width, in pixels.

Example Usage

This snippet demonstrates how to implement the UsxTransferWidget component in a React application.

Note: The minimum width of the widget is 300px.

import { UsxTransferWidget } from "@ax-protocol/widgets";

const YourAppComponent = () => {
	// Must have length >= 1
	const evmRpcUrlMap = {
		1: "https://ethereum-rpc-example",
		137: "https://polygon-rpc-example",
		// ... more Ax-supported chains
	};

	// Properties not defined will be set to default values
	const theme = {
		primaryColor: "#ffc46b",
		primaryTextColor: "#ffffff",
		secondaryTextColor: "#b5b5b5",
		buttonTextColor: "#252930",
		containerBackgroundColor: "#0F1114",
		containerOutlineColor: "#191c21",
		inputBackgroundColor: "#191c21",
		inputOutlineColor: "#252930",
		dropdownBackgroundColor: "#191c21",
		optionSelectedColor: "#252930",
		optionActiveColor: "#35383d",
		fontFamily: "sans-serif",
	};

	return (
		<div>
			<UsxTransferWidget
				evmRpcUrlMap={evmRpcUrlMap}
				maxWidth={360} // pixels
				theme={theme}
			/>
		</div>
	);
};

export default YourAppComponent;