Nimble Prime Musketeers

    @autonomylabs/limit-orders-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

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

    Install

    npm i @autonomylabs/limit-orders-react

    DownloadsWeekly Downloads

    38

    Version

    0.0.6

    License

    GPL-3.0-only

    Unpacked Size

    779 kB

    Total Files

    185

    Last publish

    Collaborators

    • legend620
    • caraluna