![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@gelatonetwork/limit-orders-react
Advanced tools
React Library for creating limit orders via Gelato
Use Gelato's react component or hooks to place limit buy and sell orders on Ethereum, Polygon and Fantom using Gelato Network.
yarn add -D @gelatonetwork/limit-orders-react
or
npm install --save-dev @gelatonetwork/limit-orders-react
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
// 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, if your theme is not compatible (is not uniswap style)
// you can opt to use the default theme
// handler={'uniswap'}
>
{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")
);
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 (
<>
<GelatoLimitOrderPanel />
<GelatoLimitOrdersHistoryPanel />
</>
);
}
Using the gelato hooks all logic and state updates are encapsulated and all your have to do is plug them into your application.
import React from "react";
import {
useGelatoLimitOrders,
GelatoLimitOrdersHistoryPanel,
} from "@gelatonetwork/limit-orders-react";
export default function LimitOrder() {
const {
handlers: {
handleInput,
handleRateType,
handleCurrencySelection,
handleSwitchTokens,
handleLimitOrderSubmission,
},
derivedOrderInfo: {
parsedAmounts,
currencies,
currencyBalances,
trade,
formattedAmounts,
inputError,
},
orderState: { independentField, rateType, typedValue },
} = useGelatoLimitOrders();
const { open, cancelled, executed } = useGelatoLimitOrdersHistory();
...
}
See complete integration example here.
useGelatoLimitOrders(): {
library: GelatoLimitOrders | undefined;
handlers: GelatoLimitOrdersHandlers;
derivedOrderInfo: DerivedOrderInfo;
orderState: OrderState;
}
useGelatoLimitOrdersHandlers(): {
handleLimitOrderSubmission: () => Promise<string | undefined>;
handleLimitOrderCancellation: (
order: Order,
orderDetails?: {
inputTokenSymbol: string;
outputTokenSymbol: string;
inputAmount: string;
outputAmount: string;
executionPrice: string;
}
) => Promise<string | undefined>;
handleInput: (field: Field, value: string) => void;
handleCurrencySelection: (field: Field, currency: Currency) => void;
handleSwitchTokens: () => void;
handleRateType: () => void;
library: GelatoLimitOrders | undefined;
}
useGelatoLimitOrdersHistory(): {
open: { pending: Order[]; confirmed: Order[] };
cancelled: { pending: Order[]; confirmed: Order[] };
executed: Order[];
}
FAQs
React Library for creating limit orders via Gelato
The npm package @gelatonetwork/limit-orders-react receives a total of 52 weekly downloads. As such, @gelatonetwork/limit-orders-react popularity was classified as not popular.
We found that @gelatonetwork/limit-orders-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.