Merge remote-tracking branch 'origin/develop' into documentation/general

.prettierignore

@@ -26,3 +26,4 @@
 /.pnp.js
 
 .env*
+frontend/**

frontend/package.json

@@ -102,5 +102,5 @@
     "vite-plugin-svgr": "^2.2.1",
     "vite-tsconfig-paths": "^3.5.0"
   },
-  "packageManager": "yarn@4.0.0"
+  "packageManager": "yarn@1.22.19"
 }

frontend/src/components/asset-card/item-card-inventory.tsx

@@ -41,13 +41,13 @@ export const ItemCardInventory: FC<Props> = ({ item, selectItem }) => {
   const equipAsset = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     setShowToast(true);
-    equipItem.mutate({ item });
+    equipItem.mutate({ item, callback: {} });
   };
 
   const unequipAsset = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     setShowToast(true);
-    unequipItem.mutate({ item });
+    unequipItem.mutate({ item, callback: {} });
   };
 
   const sellAsset = (event: React.MouseEvent<HTMLButtonElement>) => {

frontend/src/components/asset-details/item-details-inventory.tsx

@@ -32,12 +32,12 @@ export const ItemDetailsInventory: FC<ItemDetailsInventoryProps> = ({ item, sele
   if (equipItem.isError || unequipItem.isError) return <ErrorView />;
   const equipAsset = () => {
     setShowToast(!showToast);
-    equipItem.mutate({ item });
+    equipItem.mutate({ item, callback: {} });
   };
 
   const unequipAsset = () => {
     setShowToast(!showToast);
-    unequipItem.mutate({ item });
+    unequipItem.mutate({ item, callback: {} });
   };
 
   const sellAsset = () => {

frontend/src/components/index.ts

@@ -7,8 +7,6 @@ export * from "./item-card";
 export * from "./input-fields";
 export * from "./switch-selector";
 export * from "./navigation-tab";
-export * from "./menu-card";
-export * from "./menu-item";
 export * from "./price-in-ist";
 export * from "./base-route";
 export * from "./equipped-item-card";

frontend/src/components/menu-card/menu-card.tsx

@@ -1,5 +1,5 @@
 import { FC, useMemo, useState } from "react";
-import { Item, Category } from "../../interfaces";
+import { Item, Category, MakeOfferCallback } from "../../interfaces";
 import { text } from "../../assets";
 import {
   ArrowContainer,
@@ -44,8 +44,16 @@ export const MenuCard: FC<MenuCardProps> = ({ title, category, equippedItemProp,
   const [showToast, setShowToast] = useState(false);
   const [equippedItem, setEquippedItem] = useState(equippedItemProp);
 
-  const equipItem = useEquipItem(setEquippedItem);
-  const unequipItem = useUnequipItem(() => setEquippedItem(undefined));
+  const equipItem = useEquipItem();
+  const unequipItem = useUnequipItem();
+
+  const handleEquipResult: MakeOfferCallback = {
+    accepted: setEquippedItem,
+  };
+
+  const handleUnequipResult: MakeOfferCallback = {
+    accepted: () => setEquippedItem(undefined),
+  };
 
   const allItems = useMemo(() => {
     if (equippedItem) return [equippedItem, ...unequippedItems];
@@ -58,14 +66,14 @@ export const MenuCard: FC<MenuCardProps> = ({ title, category, equippedItemProp,
     event.stopPropagation();
     setShowToast(!showToast);
     if (!selectedItem) return;
-    equipItem.mutate({ item: selectedItem });
+    equipItem.mutate({ item: selectedItem, callback: handleEquipResult });
   };
 
   const unequip = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     setShowToast(!showToast);
     if (!equippedItem) return;
-    unequipItem.mutate({ item: equippedItem });
+    unequipItem.mutate({ item: equippedItem, callback: handleUnequipResult });
   };
 
   const primaryActions = () => {

frontend/src/containers/canvas/items-mode/items-mode.tsx

@@ -58,12 +58,13 @@ export const ItemsMode: FC = () => {
       equipItem.mutate({
         item: selected,
         currentlyEquipped: equipped.inCategory,
+        callback: {},
       });
     }
     setOnAssetChange(false);
     setShowToast(!showToast);
     if (!equipped.inCategory && selected) {
-      equipItem.mutate({ item: selected });
+      equipItem.mutate({ item: selected, callback: {} });
     }
   };
 
@@ -72,7 +73,7 @@ export const ItemsMode: FC = () => {
     setOnAssetChange(false);
     setShowToast(!showToast);
     if (equipped.inCategory) {
-      unequipItem.mutate({ item: equipped.inCategory });
+      unequipItem.mutate({ item: equipped.inCategory, callback: {} });
     }
   };
 

frontend/src/containers/detail-section/detail-section-items/detail-section-items.tsx

@@ -32,7 +32,7 @@ const ListItem: FC<ListItemProps> = ({ item, showToast }) => {
 
   const unequip = () => {
     showToast();
-    unequipItem.mutate({ item });
+    unequipItem.mutate({ item, callback: {} });
   };
 
   return (

frontend/src/interfaces/agoric.interfaces.ts

@@ -1,7 +1,7 @@
 interface Contracts {
   kread: {
     instance: any;
-  }
+  };
 }
 
 interface Status {
@@ -65,7 +65,6 @@ interface UpdateStatus {
   payload: { [key: string]: boolean };
 }
 
-
 interface SetOffers {
   type: "SET_OFFERS";
   payload: any[];
@@ -136,3 +135,21 @@ export interface OfferProposal {
   give: any;
   want: any;
 }
+
+export const OFFER_STATUS = {
+  error: "error",
+  refunded: "refunded",
+  accepted: "accepted",
+  seated: "seated"
+};
+export type OfferStatusType = keyof typeof OFFER_STATUS
+
+export interface MakeOfferCallback {
+  accepted?: (args?: any) => void, // offer was successful
+  refunded?: (args?: any) => void, // strangely seems to behave the same way as accepted
+  error?: (args?: any) => void, // offer failed
+  seated?: (args?: any) => void, // returned exclusively by the KREAd sell method, likely has to do with the offer being long-lived
+  settled?: (args?: any) => void, // gets called when a response is received, regardless of the status
+  setIsLoading?: React.Dispatch<React.SetStateAction<boolean>> 
+};
+

frontend/src/interfaces/character.interfaces.ts

@@ -99,5 +99,4 @@ export interface CharacterInMarketBackend {
 
 export interface CharacterCreation {
   name: string;
-  setError?: (error: string) => void
 }

frontend/src/pages/buy/character-buy.tsx

@@ -32,7 +32,7 @@ export const CharacterBuy = () => {
   const handleSubmit = async () => {
     if (!id) return;
     setIsAwaitingApproval(true);
-    await buyCharacter.callback();
+    await buyCharacter.sendOffer({});
   };
 
   if (isLoadingCharacter) return <LoadingPage spinner={false} />;

frontend/src/pages/buy/item-buy.tsx

@@ -29,9 +29,16 @@ export const ItemBuy = () => {
 
   const handleSubmit = async () => {
     setIsAwaitingApproval(true);
-    await buyItem.callback(() => {
-      setIsOfferAccepted(true);
-      setIsAwaitingApproval(false);
+    await buyItem.sendOffer({
+      refunded: () => {
+        setIsOfferAccepted(true);
+      },
+      accepted: () => {
+        setIsOfferAccepted(true);
+      },
+      settled: () => {
+        setIsAwaitingApproval(false);
+      }
     });
   };
 

frontend/src/pages/create-character/create-character.tsx

@@ -4,7 +4,7 @@ import { ErrorView, FadeInOut, FormHeader, LoadingPage, NotificationDetail, Over
 import { PageContainer } from "../../components/page-container";
 import { MINTING_COST, MINT_CHARACTER_FLOW_STEPS, WALLET_INTERACTION_STEP } from "../../constants";
 import { useIsMobile, useViewport } from "../../hooks";
-import { Character, CharacterCreation } from "../../interfaces";
+import { Character, CharacterCreation, MakeOfferCallback } from "../../interfaces";
 import { routes } from "../../navigation";
 import { useCreateCharacter } from "../../service";
 import { Confirmation } from "./confirmation";
@@ -33,8 +33,8 @@ export const CreateCharacter: FC = () => {
   const mobile = useIsMobile(breakpoints.desktop);
   const { ist } = useWalletState();
 
-  const notEnoughIST = useMemo(()=>{
-    if(ist < MINTING_COST || !ist) {
+  const notEnoughIST = useMemo(() => {
+    if (ist < MINTING_COST || !ist) {
       return true;
     }
     return false;
@@ -53,14 +53,24 @@ export const CreateCharacter: FC = () => {
     setCurrentStep(step);
   };
 
-  const handleError = (error: string) => {
+  const errorCallback = (error: string) => {
     setError(error);
     setShowToast(true);
-  }
+  };
 
+  const handleResult: MakeOfferCallback = {
+    error: errorCallback,
+    accepted: () => {
+      console.info("MintCharacter call settled");
+    }
+  };
+
   const sendOfferHandler = async (): Promise<void> => {
     setIsLoading(true);
-    await createCharacter.mutateAsync({ name: characterData.name, setError: handleError });
+    await createCharacter.mutateAsync({
+      name: characterData.name,
+      callback: handleResult,
+    });
   };
 
   const setData = async (data: CharacterCreation): Promise<void> => {

frontend/src/pages/landing/landing.tsx

@@ -14,7 +14,6 @@ import {
   Overlay,
   OverviewEmpty,
   PageSubTitle,
-  PageTitle,
   SecondaryButton,
 } from "../../components";
 import { ButtonContainer, CharacterCardWrapper, DetailContainer, ItemCardWrapper } from "./styles";
@@ -64,14 +63,14 @@ export const Landing: FC = () => {
   const equipAsset = () => {
     setShowToast(!showToast);
     if (item) {
-      equipItem.mutate({ item });
+      equipItem.mutate({ item, callback: {} });
     }
   };
 
   const unequipAsset = () => {
     setShowToast(!showToast);
     if (item) {
-      unequipItem.mutate({ item });
+      unequipItem.mutate({ item, callback: {} });
     }
   };
 

frontend/src/pages/sell/character-sell.tsx

@@ -5,6 +5,8 @@ import { ErrorView } from "../../components";
 import { useMyCharacter, useSellCharacter } from "../../service";
 import { Sell } from "./sell";
 import { SellData } from "./types";
+import { MakeOfferCallback } from "../../interfaces";
+import { useUserStateDispatch } from "../../context/user";
 
 export const CharacterSell = () => {
   const { id } = useParams<"id">();
@@ -13,13 +15,20 @@ export const CharacterSell = () => {
   const sellCharacter = useSellCharacter(Number(idString));
   const [character] = useMyCharacter(Number(idString));
   const [characterCopy] = useState(character);
+  const userDispatch = useUserStateDispatch();
 
   const [isPlacedInShop, setIsPlacedInShop] = useState(false);
   const [data, setData] = useState<SellData>({ price: 0 });
 
+  const handleResult: MakeOfferCallback = {
+    seated: () => {
+      setIsPlacedInShop(true);
+      userDispatch({ type: "SET_SELECTED", payload: "" });
+    },
+  };
+
   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.sendOffer(data.price, handleResult);
   };
 
   const characterName = useMemo(() => character?.nft.name, [character]);

frontend/src/pages/sell/item-sell.tsx

@@ -5,17 +5,21 @@ import { ErrorView } from "../../components";
 import { useSellItem } from "../../service";
 import { Sell } from "./sell";
 import { SellData } from "./types";
-import { Category, isItemCategory } from "../../interfaces";
+import { Category, MakeOfferCallback, isItemCategory } from "../../interfaces";
 
 export const ItemSell = () => {
   const { name, category } = useParams<"category" | "name">();
   const [isPlacedInShop, setIsPlacedInShop] = useState(false);
   const sellItem = useSellItem(name, category as Category);
   const [data, setData] = useState<SellData>({ price: 0 });
 
+  const handleResult: MakeOfferCallback = {
+    settled:  () => setIsPlacedInShop(true),
+  };
+
   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.sendOffer(data.price, handleResult);
   };
 
   if (!data || !isItemCategory(category)) return <ErrorView />;