Notoriously Psychedelic Modules

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

    2.8.0 • Public • Published

    npm version

    Gelato Limit Order React SDK

    Use Gelato's react component or hooks to place limit buy and sell orders on Ethereum, Polygon and Fantom using Gelato Network.

    • To hook it up in simple and direct way, using our default style, just use our react component (uniswap trade style widget). It's as is as a couple of lines of code.
    • If your want to build your custom UI you can use our react hooks and plug them in into your components. Check the steps below.

    ⚠️ ⚠️ ⚠️ Warning ⚠️ ⚠️ ⚠️ : Version 1.0.0 introduced new features and our system changed to an approval/transferFrom flow. You should use the latest version available (>= 1.0.0). If you are using an old version you should update to the latest version immediately. Versions below 1.0.0 are being deprecated.

    Demo

    Gelato Limit orders

    Installation

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

    or

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

    Getting started

    Wrap your app with the GelatoProvider and pass the gelato reducers into your redux store.

    In your store pass the gelato reducers:

    import { configureStore } from "@reduxjs/toolkit";
    import { save, load } from "redux-localstorage-simple";
    import {
      gelatoReducers,
      GELATO_PERSISTED_KEYS,
    } from "@gelatonetwork/limit-orders-react";
    
    // OPTIONAL: set the gelato persisted keys
    // If don't use `redux-localstorage-simple` you can skip this step and only set the reducers
    // You can also skip you don't use the GelatoLimitOrderPanel component
    const PERSISTED_KEYS: string[] = ["your_keys", ...GELATO_PERSISTED_KEYS];
    
    const store = configureStore({
      reducer: {
        ...your_reducers,
        // Pass the gelato reducers
        ...gelatoReducers,
      },
      middleware: [save({ states: PERSISTED_KEYS, debounce: 1000 })],
      preloadedState: load({ states: PERSISTED_KEYS }),
    });
    
    export default store;

    In your main file wrap your app with GelatoProvider:

    import React from "react";
    import ReactDOM from "react-dom";
    import { GelatoProvider } from "@gelatonetwork/limit-orders-react";
    import { useActiveWeb3React } from "hooks/web3";
    
    function Gelato({ children }: { children?: React.ReactNode }) {
      const { library, chainId, account } = useActiveWeb3React();
      return (
        <GelatoProvider
          library={library}
          chainId={chainId}
          account={account ?? undefined}
    
          // Optionally your can set a specific handler to block trades on a specific handler
          // Currently we offer support out of the box for "uniswap", "quickswap", "spookyswap" and "spiritswap"
          // Please reach out to us if you want to register a custom handler
          // Make sure chainId and handler are valid
          // handler={'uniswap'}
    
          // [ONLY IF USING COMPONENT] Optionally pass a toggle modal to be able to connect
          // to a wallet via the component button
          // toggleWalletModal={toggleWalletModal}
          // Optionally, pass a custom subgraph url subgraphUrl={"..."}
          // Optionally, parse tokenlist as tokenListURLs={["https://tokenlist.com"]}
          // Optionally, set your own bases (otherwise the default one will be used) `bases={bases}` (where bases is an array of {chainId:number; address:string; decimals:number; name:string; symbol:string;})
          // By default `useDefaultTheme`and `useDarkMode` are set to true
          // Optionally, if you can try to use and pass your own theme by setting `useDefaultTheme`={false}
          // as long as it conforms with our theme definitions (you can check our `ThemeProvider` [here](https://github.com/gelatodigital/limit-orders-lib/tree/master/packages/limit-orders-react/theme/index.tsx))
          // Optionally, if your main theme does not comply with our definitions, you can also wrap `GelatoProvider`
          // with a custom `ThemeProvider` with your own custom definitions. (check our `ThemeProvider` as an example)
          // useDefaultTheme={false}
          // useDarkMode={false}
        >
          {children}
        </GelatoProvider>
      );
    }
    
    ReactDOM.render(
      <StrictMode>
        <FixedGlobalStyle />
        <Web3ReactProvider getLibrary={getLibrary}>
          <Web3ProviderNetwork getLibrary={getLibrary}>
            <Provider store={store}>
              <ThemeProvider>
                <ThemedGlobalStyle />
                <HashRouter>
                  <Gelato>
                    <App />
                  </Gelato>
                </HashRouter>
              </ThemeProvider>
            </Provider>
          </Web3ProviderNetwork>
        </Web3ReactProvider>
      </StrictMode>,
      document.getElementById("root")
    );

    Use the Gelato react component

    Using the Gelato react component is the easiest option to get limit orders into your app.

    import React from "react";
    import {
      GelatoLimitOrderPanel,
      GelatoLimitOrdersHistoryPanel,
    } from "@gelatonetwork/limit-orders-react";
    
    export default function LimitOrder() {
      return (
        <>
          {/*To hide common bases in search modal you can pass into the component `showCommonBases={false}` */}
          <GelatoLimitOrderPanel />
          <GelatoLimitOrdersHistoryPanel />
        </>
      );
    }

    Use the Gelato react hooks

    Using the gelato hooks all logic and state updates are encapsulated and all your have to do is plug them into your application.

    Hooks available:

    • useGelatoLimitOrders()
    • useGelatoLimitOrdersHandlers()
    • useGelatoLimitOrdersHistory()
    • useGelatoLimitOrdersLib()
    • useGasOverhead()
    import React from "react";
    import {
      useGelatoLimitOrders,
      GelatoLimitOrdersHistoryPanel,
    } from "@gelatonetwork/limit-orders-react";
    
    
    export default function LimitOrder() {
      const {
        handlers: {
          handleInput,
          handleRateType,
          handleCurrencySelection,
          handleSwitchTokens,
          handleLimitOrderSubmission,
          handleLimitOrderCancellation
        },
        derivedOrderInfo: {
          parsedAmounts,
          currencies,
          currencyBalances,
          trade,
          formattedAmounts,
          inputError,
        },
        orderState: { independentField, rateType, typedValue },
      } = useGelatoLimitOrders();
    
      const { open, cancelled, executed, expired } = useGelatoLimitOrdersHistory();
    
      ...
    }

    Use the Gelato react hook useGasOverhead() to calculate real execution price

    For networks using the "gas-model" to pay for execution. The Execution price will be slightly higher then the entered Price. Orders will execute when minReturn + transactionFee === "current price"

    Hook to calculate actual execution price:

    import React, { useMemo } from "react";
    import {
      useGasOverhead,
      CurrencyAmount,
      useCurrency,
      TradePrice
    } from "@gelatonetwork/limit-orders-react";
    
    export default function LimitOrderCard() {
     ...
      const inputToken = useCurrency(order.inputToken);
      const outputToken = useCurrency(order.outputToken);
    
      const inputAmount = useMemo(
        () =>
          inputToken && order.inputAmount
            ? CurrencyAmount.fromRawAmount(inputToken, order.inputAmount)
            : undefined,
        [inputToken, order.inputAmount]
      );
    
      const isEthereum = isEthereumChain(chainId ?? 1);
    
      const outputAmount = useMemo(
        () =>
          outputToken && rawMinReturn
            ? CurrencyAmount.fromRawAmount(outputToken, order.minReturn)
            : undefined,
        [outputToken, rawMinReturn]
      );
    
      const {
        gasPrice,
        realExecutionPrice, // returns @uniswap/sdk-core Price object
        realExecutionPriceAsString,
      } = useGasOverhead(inputAmount, outputAmount);
    
      const [ inverted, setInverted, ] = useState<boolean>(true);
    
      ...
    
      return (
        <>
        {realExecutionPrice ? (
          <TradePrice
            price={ethereumExecutionPrice}
            showInverted={inverted}
            setShowInverted={setInverted}
            fontWeight={500}
            fontSize={12}
          />
        ): ... }
        </>
      )
    }

    Expiration

    ⚠️ ⚠️ ⚠️ Warning ⚠️ ⚠️ ⚠️ : Important: Open orders will expire three months 7889238 seconds after creation. Expired orders will be filtered out of open and pushed into the expired in useGelatoLimitOrdersHistory().

    See complete integration example here.

    Note: You can also import the following hooks and functions from the library:

    • useCurrency (to get the currency entity to be traded by address)
    • useUSDCValue (to get fiat value given a CurrencyAmount)
    • useCurrencyBalances (to get account balances for given Currencies)
    • useTradeExactIn (to get a trade using an input amount)
    • useTradeExactOut (to get a trade using an output amount)
    • tryParseAmount (to try to parse a user entered amount for a given token)
    • ApprovalState and useApproveCallbackFromInputCurrencyAmount (to max approve and verify allowance)
    • useTransactionAdder (to add published transaction)

    Types

    useGelatoLimitOrders(): {
      handlers: GelatoLimitOrdersHandlers;
      derivedOrderInfo: DerivedOrderInfo;
      orderState: OrderState;
    }
    
    useGelatoLimitOrdersHandlers(): {
      handleLimitOrderSubmission: (
        orderToSubmit: {
          inputToken: string;
          outputToken: string;
          inputAmount: string;
          outputAmount: string;
          owner: string;
        },
        overrides?: Overrides
      ) => Promise<TransactionResponse>;
    
      handleLimitOrderCancellation: (
        order: Order,
        orderDetails?: {
          inputTokenSymbol: string;
          outputTokenSymbol: string;
          inputAmount: string;
          outputAmount: string;
        },
        overrides?: Overrides
      ) => Promise<TransactionResponse>;
    
      handleInput: (field: Field, value: string) => void;
    
      handleCurrencySelection: (
        field: Field.INPUT | Field.OUTPUT,
        currency: Currency
      ) => void;
    
      handleSwitchTokens: () => void;
    
      handleRateType: (rateType: Rate, price?: Price<Currency, Currency>) => void;
    }
    
    // includeOrdersWithNullHandler defaults to false
    useGelatoLimitOrdersHistory(includeOrdersWithNullHandler?: boolean): {
      open: { pending: Order[]; confirmed: Order[] };
      cancelled: { pending: Order[]; confirmed: Order[] };
      executed: Order[];
      expired: Order[];
      clearLocalStorageAndRefetchDataFromSubgraph: () => void
    }
    
    useGelatoLimitOrdersLib(): GelatoLimitOrders | undefined

    Need help? Want to add a new handler?

    Reach out to us on Telegram, Discord or Twitter

    Install

    npm i @gelatonetwork/limit-orders-react

    DownloadsWeekly Downloads

    592

    Version

    2.8.0

    License

    GPL-3.0-only

    Unpacked Size

    1.51 MB

    Total Files

    156

    Last publish

    Collaborators

    • denis_gelato
    • aldrick
    • ishaba
    • opatavi-gelato
    • aless-io
    • alxdc
    • goums
    • 0mkar
    • daniel_gelato
    • brandon.cs
    • hilmarx
    • gitpusha
    • pedrogelato
    • yahyagelato
    • kassandra.eth
    • gauddel