Usage

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

Getting Started

npm install --save @ax-protocol/widgets

Required Configuration

PropertyDescription

evmRpcUrlMap

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

Optional Configuration

PropertyDescription

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;

Last updated