Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend Offer Callback Pattern #102

Closed
wants to merge 7 commits into from

Conversation

Pandelissym
Copy link
Contributor

@Pandelissym Pandelissym commented Nov 24, 2023

Description

In this PR:

Created a new pattern for creating offer callbacks that get passed the the wallet's makeOffer function. The pattern defined in contract-callbacks.ts allows developers to define their callback functions in the view components themselves. Also, having passed the callback from the view component to the hooks you are able to overwrite the callback and add common logic to them (see for example sevice/character.ts useBuyCharacter hook).

};

const unequipAsset = (event: React.MouseEvent<HTMLButtonElement>) => {
event.stopPropagation();
setShowToast(true);
unequipItem.mutate({ item });
unequipItem.mutate({ item, callback: handleOfferResultBuilder(undefined, undefined, () => console.log("YURR")) });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha migth want remove the log

}

export interface HandleOfferResultBuilder {
errorCallbackFunction?: (data: string, ...rest: any[]) => any;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need to add "Function" to the property names, in fact I'd say we don't even need to add "Callback". Keeping variable names lean can make code more readable, in this case I'd go for something like:

interface HandleOfferResult {
error: ,
refund: ,
success: ,
}

getHandleOfferResult: () => HandleOfferResult;
}

export interface HandleOfferResultBuilderFunction {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this not inferred from the function definition?

@@ -19,7 +20,7 @@ export const CharacterSell = () => {

const sendOfferHandler = async (data: SellData) => {
if (data.price < 1) return; // We don't want to sell for free in case someone managed to fool the frontend
await sellCharacter.callback(data.price, () => setIsPlacedInShop(true));
await sellCharacter.callback(data.price, handleOfferResultBuilder(), () => setIsPlacedInShop(true));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that setIsPlacedInShop bit should be part of the success callback

@@ -15,7 +16,7 @@ export const ItemSell = () => {

const sendOfferHandler = async (data: SellData) => {
if (data.price < 1) return; // We don't want to sell for free in case someone managed to fool the frontend
await sellItem.callback(data.price, () => setIsPlacedInShop(true) );
await sellItem.callback(data.price, () => setIsPlacedInShop(true), handleOfferResultBuilder());
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants