Migrate to SDK v2
Please note as of now you have to use our alpha release on npm: 2.0.1-alpha.3
until we release a
new stable version.
Major Enhancements
- Hook and Component Library Refactoring: Improved performance and enhanced component customization capabilities.
- New UI/UX: Updated design for a better user experience.
- Solana Support: Added support for the Solana chain.
- New Bracket Order
- Extended React Hooks: Added new hooks (refer to documentation for the complete list):
- portfolio
- useAssetsHistory
- useDistributionHistory
- useFundingFeeHistory
- useStatisticsDaily
- Trading Rewards:
- useAccountRewardsHistory
- useWalletRewardsHistory
- portfolio
- New Page Components: Added more out-of-the-box components, the SDK now includes the following built-in page components:
- Trading (New)
- Portfolio
- Referral
- Markets
- Trading Rewards
- Affiliate
- Base UI component library: A new base component library, @orderly.network/ui, has been created to facilitate builders in developing custom components that maintain a consistent style with the components provided by the SDK.
- Independent Widgets: Separated additional widgets for standalone use, with each page widget’s components available for export:
- Positions Widget
- Orders Widget
- Order Entry Widget
- Enhanced Customization Options:
- Theming:
- Custom themes with support for CSS variables (since 1.0.0).
- Override component styles via element class modifications.
- Customize default component behaviors via theme configuration.
- Custom Components:
- Ability to create fully custom components.
Package Structure Changes
Deprecated Packages:
Name | Replacement | Description |
---|---|---|
@orderly.network/react | @orderly.network/ui-scaffold , @orderly.network/trading | Deprecated and split into multiple packages. |
@orderly.network/web3-onboard | @orderly.network/wallet-connector | Supports Solana/EVM wallets. |
New 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 |
Major breaking changes
Hooks SDK Modifications (@orderly.network/hooks)
You can find a full example using the Components SDK in this Github repository.
OrderlyConfigProvider
Added walletAdapters configuration property, supporting EVM and Solana by default. If your Solana wallet connection is not ready, manually configure this property to exclude Solana support:
If you are using the UI components directly from the Orderly SDK, you can ignore this change, as the SDK’s wallet connection components will support both EVM and Solana by default.
However, if you want to support only EVM or Solana, refer to the following configuration:
The getWalletAdapter property has been removed.
useAccount
Updated to support multiple chain namespaces (EVM, Solana):
useOrderEntry
v2 refactors the input parameters and return types. If you still wish to use the useOrderEntry from v1, you can import it as follows:
useOrderEntry_deprecated
will be removed in future versions. It is recommended to transition to
the new version of useOrderEntry as soon as possible.
Go check out the full updated example of the new userOrderEntry
hook or look at the example dex.
useMarginRatio
The return type has been updated:
- old:
currentLeverage: number;
- new:
currentLeverage: number | null;
Components SDK Modifications (prior @orderly.network/react)
If you are only integrating the SDK using hooks, you can ignore the following changes. However, if you are using the widgets provided by the SDK, please adjust your implementation accordingly.
You can find a full example using the Components SDK in this Github repository.
@orderly.network/react
(Deprecated)- The package
@orderly.network/react
has been deprecated and split into:@orderly.network/ui-scaffold
: For page layout components.@orderly.network/trading
: For trading page components.
@orderly.network/ui-scaffold
provides layout functionalities, including top navigation menus, bottom status bars, and left-side navigation.If you want to customize the top navigation component, note that the v1 Layout component attributes are no longer supported. Configuration should be migrated to the Scaffold component.- The
@orderly.network/ui-scaffold
package not only includes the default Scaffold component but also exports subcomponents like ChainMenuWidget, AccountMenuWidget, etc. These can be freely combined to suit your needs. Refer to the@orderly.network/ui-scaffold
documentation for details. - The SDK only provides page components; you are responsible for organizing the routing. It is recommended to use a React router library that supports nested routes to reuse layout components, minimize page reloads, and improve user experience. If you are using Next.js, refer to the Next.js template.
- The package
- OrderlyAppProvider updates:
- onChainChanged:
-
- Removed Properties:
- shareOptions , referral have been removed: Configure this within the TradingPage component of
@orderly.network/trading
. - topBar, topBarProps, footerStatusBarProps, accountMenuItems, onClickAccountMenuItem have been removed. Migrate these configurations to the Scaffold component in
@orderly.network/ui-scaffold
.
- shareOptions , referral have been removed: Configure this within the TradingPage component of
- Wallet Connection Component Update: Replace
@orderly.network/web3-onboard
with@orderly.network/wallet-connector
. Ensure to update the corresponding component parameters. - Replace
styles.css
import from@orderly.network/react
with@orderly.network/ui/dist/styles.css
- Theme Updates
- Removed Properties:
FAQ
export ‘SWRConfig’ (reexported as ‘SWRConfig’) was not found in ‘swr’ (possible exports: unstable_serialize)
when use Next.js,you need to add use client directive at the top of the file
Attempted import error: ‘startWith’ is not exported from ‘rxjs’ (imported as ‘startWith’).
./node_modules/@web3-onboard/core/dist/Index-6c094240.js
This issue is caused by a version conflict between the rxjs version used by @web3-onboard/core and other libraries. In rxjs@7.x, startWith is exported from ‘rxjs/operators’ rather than being directly imported from ‘rxjs’.
To resolve this issue, ensure the required version of rxjs for @web3-onboard/core is installed (i.e., ^7.5.5). Since @orderly.network/wallet-connector already includes this version of rxjs, updating @orderly.network/wallet-connector will resolve the conflict.
Error: Dynamic require of “react” is not supported
The issue with the import statement might be due to the following reasons:
- The imported package is not added to the dependencies in your package.json file.
- The import statement is pointing to a local directory (e.g., ../../dist) instead of the actual package name.