[EVM] React Components SDK
Overview
Overview of Orderly Components SDK
Please note as of now if you want to use our SDK v2, you have to use our alpha release on npm:
2.0.1-alpha.3
until we release a new stable version.
The Ordery Components SDK provides a set of components needed to build a DEX UI, allowing you to quickly build a DEX on top of Orderly Network.
It is designed modularly and consists of various npm packages. Based on your needs you have to install the respective packages:
Name | Description |
---|---|
@orderly.network/ui | Base UI component library. |
@orderly.network/ui-scaffold | Page layout components (e.g., headers, footers, sidebars). |
@orderly.network/react-app | Providers for any React app built with Orderly components. |
@orderly.network/trading | Trading page components. |
@orderly.network/portfolio | Personal portfolio dashboard components. |
@orderly.network/trading-rewards | |
@orderly.network/affiliate | |
@orderly.network/markets | |
@orderly.network/ui-connector | |
@orderly.network/ui-chain-selector | |
@orderly.network/ui-order-entry | |
@orderly.network/ui-orders | |
@orderly.network/ui-positions | |
@orderly.network/ui-tpsl | |
@orderly.network/ui-transfer | |
@orderly.network/ui-share | |
@orderly.network/ui-leverage | |
@orderly.network/wallet-connector | |
@orderly.network/default-evm-adapter | |
@orderly.network/default-solana-adapter | |
@orderly.network/web3-provider-ethers |
Storybook
You can check out our Storybook, which has all components included.
Features
- Provides feature-complete React components, allowing you to build a DEX with little to no code
- Full compatibility on different viewports
- Modular design and layered, allowing you to customize according to your needs
- i18n support
- Customizable themes
Architecture
@orderly.network/react
has three layers, all of which can be used individually.
- UI components: Provides basic UI components, such as buttons, input forms
- Block components: Provides DEX related components, such as symbol chooser, orderbook, trade history components
- Page: Provides fully functional pages, such as the trading page
Compatibility
- Compatible with all modern browsers and IE11 or above