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:
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
:
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 (
<AutonomyProvider
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}
</AutonomyProvider>
);
}
ReactDOM.render(
<StrictMode>
<FixedGlobalStyle />
<Web3ReactProvider getLibrary={getLibrary}>
<Web3ProviderNetwork getLibrary={getLibrary}>
<Provider store={store}>
<ThemeProvider>
<ThemedGlobalStyle />
<HashRouter>
<Autonomy>
<App />
</Autonomy>
</HashRouter>
</ThemeProvider>
</Provider>
</Web3ProviderNetwork>
</Web3ReactProvider>
</StrictMode>,
document.getElementById("root")
);
Use the Autonomy react component
Pass orderType
to get limit/stoploss order components.
import React from "react";
import { AutonomyOrderPanel, AutonomyOrderHistoryPanel } from "@autonomylabs/limit-orders-react";
export default function App() {
return (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<AutonomyOrderPanel orderType="Limit" />
<AutonomyOrderHistoryPanel orderType="Limit" />
</div>
):
}