-
Notifications
You must be signed in to change notification settings - Fork 5
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
Conversation
}; | ||
|
||
const unequipAsset = (event: React.MouseEvent<HTMLButtonElement>) => { | ||
event.stopPropagation(); | ||
setShowToast(true); | ||
unequipItem.mutate({ item }); | ||
unequipItem.mutate({ item, callback: handleOfferResultBuilder(undefined, undefined, () => console.log("YURR")) }); |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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 { |
There was a problem hiding this comment.
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)); |
There was a problem hiding this comment.
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()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here
Description
In this PR:
Created a new pattern for creating offer callbacks that get passed the the wallet's
makeOffer
function. The pattern defined incontract-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 examplesevice/character.ts
useBuyCharacter
hook).