@autonomylabs/limit-orders-react

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>
  ):
}