diff --git a/.gitignore b/.gitignore index 2b34e4636..8cea21ba8 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ scripts/abi-signatures.csv /temp storybook-static .qodo +.env diff --git a/docs/guides/use-with-react.md b/docs/guides/use-with-react.md index 108c747e4..7b2ab057b 100644 --- a/docs/guides/use-with-react.md +++ b/docs/guides/use-with-react.md @@ -30,3 +30,42 @@ const writeCoreSdk = hooks.useCoreSdk({ web3Provider: provider // ethers provider / signer }); ``` + +## Get Offers + +```ts +import { hooks, withQueryClientProvider } from "@bosonprotocol/react-kit"; + +export const OffersTable = withQueryClientProvider(() => { + const offers = hooks.useOffers( + { + envName: "testing", + configId: "testing-80002-0" + }, + { + offersFirst: 10 // return the first 10 offers + } + ); + return ( + + + + + + + + + + {offers.data?.map((offer) => ( + + + + + + ))} + +
Offer IDNameDescription
{offer.id}{offer.metadata?.name}{offer.metadata?.description}
+ ); +}); + +``` diff --git a/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx b/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx index 62653caf9..a91d25e15 100644 --- a/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx +++ b/packages/react-kit/src/hooks/core-sdk/useCoreSdk.tsx @@ -75,19 +75,24 @@ type CoreSdkOverrides = { web3Lib?: Web3LibAdapter }; */ export function useCoreSdk( config: CoreSdkConfig, - overrides?: CoreSdkOverrides + overrides?: CoreSdkOverrides, + options: { + enabled?: boolean; + } = {} ): CoreSDK { - const [coreSdk, setCoreSdk] = useState( - initCoreSdk(config, overrides) + const [coreSdk, setCoreSdk] = useState( + options.enabled !== false ? initCoreSdk(config, overrides) : undefined ); useEffect(() => { - const newCoreSdk = initCoreSdk(config, overrides); - setCoreSdk(newCoreSdk); + if (options.enabled !== false) { + const newCoreSdk = initCoreSdk(config, overrides); + setCoreSdk(newCoreSdk); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [config.web3Provider, config.configId, overrides]); + }, [config.web3Provider, config.configId, overrides, options.enabled]); - return coreSdk; + return coreSdk as CoreSDK; // Force cast as CoreSDK since it's enabled by default } function initCoreSdk(config: CoreSdkConfig, overrides?: CoreSdkOverrides) { diff --git a/packages/react-kit/src/hooks/index.ts b/packages/react-kit/src/hooks/index.ts index 1e0c6c17a..2430cf273 100644 --- a/packages/react-kit/src/hooks/index.ts +++ b/packages/react-kit/src/hooks/index.ts @@ -38,3 +38,4 @@ export * from "./useMetaTx"; export * from "./useMetaTx"; export * from "./usePrevious"; export * from "./useSignerAddress"; +export * from "./useOffers"; diff --git a/packages/react-kit/src/hooks/useOffers.ts b/packages/react-kit/src/hooks/useOffers.ts new file mode 100644 index 000000000..704d41d9a --- /dev/null +++ b/packages/react-kit/src/hooks/useOffers.ts @@ -0,0 +1,24 @@ +import { subgraph } from "@bosonprotocol/core-sdk"; +import { useQuery } from "react-query"; +import { CoreSdkConfig, useCoreSdk } from "./core-sdk/useCoreSdk"; + +export function useOffers( + config: CoreSdkConfig, + props: subgraph.GetOffersQueryQueryVariables, + options: { + enabled?: boolean; + } = {} +) { + const coreSDK = useCoreSdk(config, undefined, options); + return useQuery( + ["offers", props, coreSDK], + async () => { + const offers = await coreSDK?.getOffers(props); + + return offers; + }, + { + ...options + } + ); +}