Trading works

src/views/inventory/InventoryMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { AdvancedMap, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingOpenEvent } from 'nitro-renderer';
+import { AdvancedMap, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingNotOpenEvent, TradingOpenEvent, TradingOpenFailedEvent, TradingOtherNotAllowedEvent, TradingYouAreNotAllowedEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetRoomSession, GetSessionDataManager } from '../../api';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
@@ -176,6 +176,59 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
         });
     }, [ dispatchFurnitureState ]);
 
+    const onTradingCloseEvent = useCallback((event: TradingCloseEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.CLOSE_TRADE,
+            payload: {}
+        });
+    }, [ dispatchFurnitureState ]);
+
+    const onTradingCompletedEvent = useCallback((event: TradingCompletedEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.CLOSE_TRADE,
+            payload: {}
+        });
+    }, [ dispatchFurnitureState ]);
+
+    const onTradingConfirmationEvent = useCallback((event: TradingConfirmationEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.SET_TRADE_STATE,
+            payload: {
+                tradeState: TradeState.TRADING_STATE_COUNTDOWN
+            }
+        });
+    }, [ dispatchFurnitureState ]);
+
+    const onTradingListItemEvent = useCallback((event: TradingListItemEvent) =>
+    {
+        const parser = event.getParser();
+
+        console.log(parser);
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.UPDATE_TRADE,
+            payload: {
+                tradeParser: event.getParser()
+            }
+        });
+    }, [ dispatchFurnitureState ]);
+
+    const onTradingNotOpenEvent = useCallback((event: TradingNotOpenEvent) =>
+    {
+        const parser = event.getParser();
+
+        console.log(parser);
+    }, []);
+
     const onTradingOpenEvent = useCallback((event: TradingOpenEvent) =>
     {
         const parser = event.getParser();
@@ -220,53 +273,26 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
         });
     }, [ dispatchFurnitureState ]);
 
-    const onTradingCloseEvent = useCallback((event: TradingCloseEvent) =>
+    const onTradingOpenFailedEvent = useCallback((event: TradingOpenFailedEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFurnitureState({
-            type: InventoryFurnitureActions.CLOSE_TRADE,
-            payload: {}
-        });
-    }, [ dispatchFurnitureState ]);
-
-    const onTradingCompletedEvent = useCallback((event: TradingCompletedEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFurnitureState({
-            type: InventoryFurnitureActions.SET_TRADE_STATE,
-            payload: {
-                tradeState: TradeState.TRADING_STATE_COMPLETED
-            }
-        });
-    }, [ dispatchFurnitureState ]);
-
-    const onTradingConfirmationEvent = useCallback((event: TradingConfirmationEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFurnitureState({
-            type: InventoryFurnitureActions.SET_TRADE_STATE,
-            payload: {
-                tradeState: TradeState.TRADING_STATE_CONFIRMED
-            }
-        });
-    }, [ dispatchFurnitureState ]);
-
-    const onTradingListItemEvent = useCallback((event: TradingListItemEvent) =>
     {
         const parser = event.getParser();
 
         console.log(parser);
+    }, []);
 
-        dispatchFurnitureState({
+    const onTradingOtherNotAllowedEvent = useCallback((event: TradingOtherNotAllowedEvent) =>
-            type: InventoryFurnitureActions.UPDATE_TRADE,
+    {
-            payload: {
+        const parser = event.getParser();
-                tradeParser: event.getParser()
+
-            }
+        console.log(parser);
-        });
+    }, []);
-    }, [ dispatchFurnitureState ]);
+
+    const onTradingYouAreNotAllowedEvent = useCallback((event: TradingYouAreNotAllowedEvent) =>
+    {
+        const parser = event.getParser();
+
+        console.log(parser);
+    }, []);
 
     CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent);
     CreateMessageHook(FurnitureListEvent, onFurnitureListEvent);
@@ -281,11 +307,15 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
     CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
     CreateMessageHook(BadgesEvent, onBadgesEvent);
     CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
-    CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
     CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
     CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
     CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent);
     CreateMessageHook(TradingListItemEvent, onTradingListItemEvent);
+    CreateMessageHook(TradingNotOpenEvent, onTradingNotOpenEvent);
+    CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
+    CreateMessageHook(TradingOpenFailedEvent, onTradingOpenFailedEvent);
+    CreateMessageHook(TradingOtherNotAllowedEvent, onTradingOtherNotAllowedEvent);
+    CreateMessageHook(TradingYouAreNotAllowedEvent, onTradingYouAreNotAllowedEvent);
 
     return null;
 }

src/views/inventory/InventoryView.tsx

@@ -1,13 +1,15 @@
-import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingOpenComposer } from 'nitro-renderer';
+import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { GetConnection, GetRoomEngine } from '../../api';
 import { InventoryEvent, InventoryTradeRequestEvent } from '../../events';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { SendMessageHook } from '../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities';
+import { TradeState } from './common/TradeState';
 import { InventoryContextProvider } from './context/InventoryContext';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
 import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
@@ -34,18 +36,47 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     const [ petState, dispatchPetState ] = useReducer(InventoryPetReducer, initialInventoryPet);
     const [ badgeState, dispatchBadgeState ] = useReducer(InventoryBadgeReducer, initialInventoryBadge);
 
+    const close = useCallback(() =>
+    {
+        if(furnitureState.tradeData)
+        {
+            switch(furnitureState.tradeData.state)
+            {
+                case TradeState.TRADING_STATE_RUNNING:
+                    SendMessageHook(new TradingCloseComposer());
+                    return;
+                case TradeState.TRADING_STATE_CONFIRMING:
+                    SendMessageHook(new TradingCancelComposer());
+                    return;
+            }
+        }
+        
+        setIsVisible(false);
+    }, [ furnitureState.tradeData ]);
+
     const onInventoryEvent = useCallback((event: InventoryEvent) =>
     {
         switch(event.type)
         {
             case InventoryEvent.SHOW_INVENTORY:
+                if(isVisible) return;
+
                 setIsVisible(true);
                 return;
             case InventoryEvent.HIDE_INVENTORY:
-                setIsVisible(false);
+                if(!isVisible) return;
+
+                close();
                 return;
             case InventoryEvent.TOGGLE_INVENTORY:
-                setIsVisible(value => !value);
+                if(!isVisible)
+                {
+                    setIsVisible(true);
+                }
+                else
+                {
+                    close();
+                }
                 return;
             case InventoryTradeRequestEvent.REQUEST_TRADE: {
                 const tradeEvent = (event as InventoryTradeRequestEvent);
@@ -53,7 +84,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                 GetConnection().send(new TradingOpenComposer(tradeEvent.objectId));
             }
         }
-    }, []);
+    }, [ isVisible, close ]);
 
     useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
     useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent);
@@ -103,21 +134,11 @@ export const InventoryView: FC<InventoryViewProps> = props =>
         }
     }, []);
 
-    useEffect(() =>
-    {
-        if(!furnitureState.tradeData) return;
-
-        setIsVisible(true);
-    }, [ furnitureState.tradeData ]);
-
     useEffect(() =>
     {
         if(!isVisible)
         {
-            if(furnitureState.tradeData)
+            if(furnitureState.tradeData) setIsVisible(true);
-            {
-                // cancel the trade
-            }
         }
     }, [ furnitureState.tradeData, isVisible ]);
 
@@ -126,7 +147,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
             <InventoryMessageHandler />
             { isVisible &&
                 <NitroCardView className="nitro-inventory">
-                    <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
                     { !furnitureState.tradeData &&
                         <>
                             <NitroCardTabsView>
@@ -152,7 +173,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                         </> }
                     { furnitureState.tradeData &&
                         <NitroCardContentView>
-                            <InventoryTradeView />
+                            <InventoryTradeView cancelTrade={ close } />
                         </NitroCardContentView> }
                 </NitroCardView> }
         </InventoryContextProvider>

src/views/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -1,6 +1,6 @@
 import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetRoomEngine } from '../../../../api';
+import { GetRoomEngine, GetSessionDataManager } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
@@ -80,9 +80,9 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 
             if(furnitureItem.category === FurniCategory._Str_3432)
             {
-                // insert a window if the type is landscape
+                const data = GetSessionDataManager().getWallItemDataByName('noob_window_double');
-                //_local_19 = this._model.controller._Str_18225("ads_twi_windw", ProductTypeEnum.WALL);
+
-                //this._roomPreviewer._Str_12087(_local_19.id, new Vector3d(90, 0, 0), _local_19._Str_4558);
+                if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
             }
         }
         else

src/views/inventory/views/trade/InventoryTradeView.tsx

@@ -1,5 +1,5 @@
-import { FurnitureListComposer, IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer } from 'nitro-renderer';
+import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from 'nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
@@ -7,6 +7,7 @@ import { LocalizeText } from '../../../../utils/LocalizeText';
 import { FurniCategory } from '../../common/FurniCategory';
 import { GroupItem } from '../../common/GroupItem';
 import { IFurnitureItem } from '../../common/IFurnitureItem';
+import { TradeState } from '../../common/TradeState';
 import { _Str_16998 } from '../../common/TradingUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
@@ -17,16 +18,14 @@ const MAX_ITEMS_TO_TRADE: number = 9;
 
 export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 {
+    const { cancelTrade = null } = props;
+    const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
+    const [ ownGroupItem, setOwnGroupItem ] = useState<GroupItem>(null);
+    const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null);
+    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
+    const [ countdownTick, setCountdownTick ] = useState(3);
     const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext();
     const { needsFurniUpdate = false, groupItems = [], tradeData = null } = furnitureState;
-    const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
-    const [ selectedGroupItem, setSelectedGroupItem ] = useState<GroupItem>(null);
-    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
-
-    const close = useCallback(() =>
-    {
-
-    }, []);
 
     const canTradeItem = useCallback((isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
     {
@@ -136,13 +135,94 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
             SendMessageHook(new FurnitureListComposer());
         }
-        else
-        {
-            setFilteredGroupItems(groupItems);
-        }
 
     }, [ needsFurniUpdate, groupItems, dispatchFurnitureState ]);
 
+    const progressTrade = useCallback(() =>
+    {
+        switch(tradeData.state)
+        {
+            case TradeState.TRADING_STATE_RUNNING:
+                if(!tradeData.otherUser.itemCount && !tradeData.ownUser.accepts)
+                {
+                    //this._notificationService.alert('${inventory.trading.warning.other_not_offering}');
+                }
+
+                if(tradeData.ownUser.accepts)
+                {
+                    SendMessageHook(new TradingUnacceptComposer());
+                }
+                else
+                {
+                    SendMessageHook(new TradingAcceptComposer());
+                }
+                return;
+            case TradeState.TRADING_STATE_CONFIRMING:
+                SendMessageHook(new TradingConfirmationComposer());
+
+                dispatchFurnitureState({
+                    type: InventoryFurnitureActions.SET_TRADE_STATE,
+                    payload: {
+                        tradeState: TradeState.TRADING_STATE_CONFIRMED
+                    }
+                });
+                return;
+        }
+    }, [ tradeData, dispatchFurnitureState ]);
+
+    const getTradeButton = useMemo(() =>
+    {
+        if(!tradeData) return null;
+
+        switch(tradeData.state)
+        {
+            case TradeState.TRADING_STATE_READY:
+                return <button type="button" className="btn btn-secondary" disabled={ (!tradeData.ownUser.itemCount && !tradeData.otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</button>;
+            case TradeState.TRADING_STATE_RUNNING:
+                return <button type="button" className="btn btn-secondary" disabled={ (!tradeData.ownUser.itemCount && !tradeData.otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText(tradeData.ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</button>;
+            case TradeState.TRADING_STATE_COUNTDOWN:
+                return <button type="button" className="btn btn-secondary" disabled>{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</button>;
+            case TradeState.TRADING_STATE_CONFIRMING:
+                return <button type="button" className="btn btn-secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.button.restore') }</button>;
+            case TradeState.TRADING_STATE_CONFIRMED:
+                return <button type="button" className="btn btn-secondary">{ LocalizeText('inventory.trading.info.waiting') }</button>;
+        }
+    }, [ tradeData, countdownTick, progressTrade ]);
+
+    useEffect(() =>
+    {
+        if(!tradeData || (tradeData.state !== TradeState.TRADING_STATE_COUNTDOWN)) return;
+
+        setCountdownTick(3);
+
+        const interval = setInterval(() =>
+        {
+            setCountdownTick(prevValue =>
+                {
+                    const newValue = (prevValue - 1);
+
+                    if(newValue === -1)
+                    {
+                        dispatchFurnitureState({
+                            type: InventoryFurnitureActions.SET_TRADE_STATE,
+                            payload: {
+                                tradeState: TradeState.TRADING_STATE_CONFIRMING
+                            }
+                        });
+
+                        clearInterval(interval);
+                    }
+
+                    return newValue;
+                });
+        }, 1000);
+
+        return () =>
+        {
+            clearInterval(interval);
+        }
+    }, [ tradeData, dispatchFurnitureState ]);
+
     return (
         <div className="row h-100">
             <div className="d-flex flex-column col-4 h-100">
@@ -162,10 +242,11 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             );
                         }) }
                 </NitroCardGridView>
+                <div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
             </div>
-            <div className="col-8 row mx-0">
+            <div className="col-8 row">
                 <div className="d-flex flex-column col-6">
-                    <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ LocalizeText('inventory.trading.you') }</div>
+                    <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
                     <NitroCardGridView columns={ 3 }>
                         { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                             {
@@ -174,18 +255,19 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 if(!item) return <NitroCardGridItemView key={ i } />;
 
                                 return (
-                                    <NitroCardGridItemView key={ i } itemActive={ (item === selectedGroupItem) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setSelectedGroupItem(item) }>
+                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
-                                        { (item === selectedGroupItem) &&
+                                        { (ownGroupItem === item) &&
                                             <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
                                                 <i className="fas fa-chevron-left" />
                                             </button> }
                                     </NitroCardGridItemView>
                                 );
                             }) }
+                        <div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
                 </div>
                 <div className="d-flex flex-column col-6">
-                    <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ tradeData.otherUser.userName }</div>
+                    <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
                     <NitroCardGridView columns={ 3 }>
                         { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                             {
@@ -193,12 +275,14 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
                                 if(!item) return <NitroCardGridItemView key={ i } />;
 
-                                return <NitroCardGridItemView key={ i } itemActive={ (item === selectedGroupItem) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setSelectedGroupItem(item) } />;
+                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
                             }) }
+                        <div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
                 </div>
-                <div className="d-flex col-12 bg-muted">
+                <div className="d-flex col-12 justify-content-between align-items-end w-100">
-                    plz
+                    <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
+                    { getTradeButton }
                 </div>
             </div>
         </div>

src/views/inventory/views/trade/InventoryTradeView.types.ts

@@ -1,3 +1,4 @@
 export interface InventoryTradeViewProps
 {
+    cancelTrade: () => void;
 }