Autonomy Limit/StopLoss Order React SDK

Installation

yarn add -D @autonomylabs/limit-orders-react

or

npm install --save-dev @autonomylabs/limit-orders-react

Getting started

Wrap your app with the AutonomyProvider and pass the autonomy reducers into your redux store.

In your store pass the autonomy reducers:

``tsx
import { configureStore } from "@reduxjs/toolkit";
import { save, load } from "redux-localstorage-simple";
import { autonomyReducers } from "@autonomylabs/limit-orders-react";

const PERSISTED_KEYS: string[] = ["your_keys"];
const store = configureStore({
reducer: {
...your_reducers,
// Pass the autonomy reducers
...autonomyReducers,
},
middleware: [save({ states: PERSISTED_KEYS, debounce: 1000 })],
preloadedState: load({ states: PERSISTED_KEYS }),
});
export default store;
`

In your main file wrap your app with AutonomyProvider:

`tsx
import React from "react";
import ReactDOM from "react-dom";
import { AutonomyProvider } from "@autonomylabs/limit-orders-react";
import { useActiveWeb3React } from "hooks/web3";
import { injected } from "connectors";

function Autonomy({ children }: { children?: React.ReactNode }) {
const { library, chainId, account, activate } = useActiveWeb3React();
return (
library={library}
chainId={chainId}
account={account ?? undefined}
// Optionally pass the handler to be able to connect to a wallet via the component button
onConnectWallet={() => activate(injected)}
// By default useDefaultTheme is set to true, will use Autonomy SDK default theme if set
useDefaultTheme={true}
// By default useDarkMode is set to true
usDarkMode={true}
// Optionally pass any DEX router information to be used in the sdk. By default ApeSwap router will be used on BSC, and TraderJoe will be used on Avalanche.
routerInfo={{
routerAddress: "",
factoryAddress: "",
initCodeHash: "",
}}
>
{children}

);
}

ReactDOM.render(
















,
document.getElementById("root")
);
`

Use the Autonomy react component

Pass orderType to get limit/stoploss order components.

`tsx
import React from "react";
import { AutonomyOrderPanel, AutonomyOrderHistoryPanel } from "@autonomylabs/limit-orders-react";
export default function App() {
return (



):
}
``