From 520f8d34b8a3890b9d8b59b27d12498e67abcd35 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 3 Jul 2021 23:32:41 -0400
Subject: [PATCH 01/10] Fix key prop

---
 src/views/friend-list/views/friend-bar/FriendBarView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
index b1836e64..3931c4f4 100644
--- a/src/views/friend-list/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friend-list/views/friend-bar/FriendBarView.tsx
@@ -36,7 +36,7 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
             </button>
             { Array.from(Array(maxDisplayCount), (e, i) =>
                 {
-                    return <FriendBarItemView friend={ (onlineFriends[ indexOffset + i ] || null) } />;
+                    return <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />;
                 }) }
             <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <i className="fas fa-chevron-right" />

From 4ea7dad18063cdca65be978ae4e7ea2cb931f34c Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 4 Jul 2021 09:13:55 -0400
Subject: [PATCH 02/10] Fix chat

---
 .../room/widgets/chat/message/ChatWidgetMessageView.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
index 5a6d5355..2649b842 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
+++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
@@ -97,13 +97,12 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
                 </div>
                 <div className="chat-content">
                     <b className="username mr-1" dangerouslySetInnerHTML={ {__html: `${ chat.username }: ` } } />
-                    { chat.text }
-                    <span className="message"> {
+                    <span className="message">{ chat.text }</span>
+                    {/* {
                         messageParts && messageParts.map((part, index) =>
                             {
                                 return <span key={ index } className={ part.className } style={ part.style } onClick={ part.onClick }>{ part.text }</span>
-                            })
-                    }</span>
+                            }) */}
                 </div>
                 <div className="pointer"></div>
             </div>

From 86233806f29616505dceb46dc7528a6b78e7be26 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 5 Jul 2021 02:46:47 -0400
Subject: [PATCH 03/10] Trade updates

---
 src/assets/styles/utils.scss                  |   4 +
 .../inventory/InventoryTradeRequestEvent.ts   |  27 ++++
 .../inventory/InventoryTradeStartEvent.ts     |  28 ++++
 src/events/inventory/index.ts                 |   2 +
 .../inventory/InventoryMessageHandler.tsx     | 117 ++++++++++++++-
 src/views/inventory/InventoryView.scss        |   2 +-
 src/views/inventory/InventoryView.tsx         |  31 +++-
 src/views/inventory/common/FurnitureItem.ts   |  42 +++---
 .../inventory/common/FurnitureUtilities.ts    |   2 +-
 src/views/inventory/common/GroupItem.ts       |  56 +++++--
 src/views/inventory/common/TradeState.ts      |  10 ++
 src/views/inventory/common/TradeUserData.ts   |  15 ++
 .../inventory/common/TradingUtilities.ts      |  73 +++++++++
 .../reducers/InventoryFurnitureReducer.tsx    | 139 +++++++++++++++++-
 .../furniture/InventoryFurnitureView.tsx      | 125 ++++++++++++++--
 .../item/InventoryFurnitureItemView.tsx       |   3 +-
 .../results/InventoryFurnitureResultsView.tsx |   2 +-
 .../views/trade/InventoryTradeView.tsx        |  37 +++++
 .../views/trade/InventoryTradeView.types.ts   |   4 +
 .../trade/item/InventoryTradeItemView.tsx     |  37 +++++
 .../item/InventoryTradeItemView.types.ts      |   6 +
 src/views/purse/PurseView.tsx                 |   4 +-
 .../handlers/RoomWidgetInfostandHandler.ts    |   4 +-
 23 files changed, 709 insertions(+), 61 deletions(-)
 create mode 100644 src/events/inventory/InventoryTradeRequestEvent.ts
 create mode 100644 src/events/inventory/InventoryTradeStartEvent.ts
 create mode 100644 src/views/inventory/common/TradeState.ts
 create mode 100644 src/views/inventory/common/TradeUserData.ts
 create mode 100644 src/views/inventory/common/TradingUtilities.ts
 create mode 100644 src/views/inventory/views/trade/InventoryTradeView.tsx
 create mode 100644 src/views/inventory/views/trade/InventoryTradeView.types.ts
 create mode 100644 src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
 create mode 100644 src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts

diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 69ce07fc..c2a43bac 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -14,6 +14,10 @@
     transform: scale(2) translateZ(0);
 }
 
+.opacity-0-5 {
+    opacity: 0.5;
+}
+
 .text-shadow {
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
diff --git a/src/events/inventory/InventoryTradeRequestEvent.ts b/src/events/inventory/InventoryTradeRequestEvent.ts
new file mode 100644
index 00000000..8cc0ee9f
--- /dev/null
+++ b/src/events/inventory/InventoryTradeRequestEvent.ts
@@ -0,0 +1,27 @@
+import { InventoryEvent } from './InventoryEvent';
+
+export class InventoryTradeRequestEvent extends InventoryEvent
+{
+    public static REQUEST_TRADE: string = 'ITSE_REQUEST_TRADE';
+
+    private _objectId: number;
+    private _username: string;
+
+    constructor(objectId: number, username: string)
+    {
+        super(InventoryTradeRequestEvent.REQUEST_TRADE);
+
+        this._objectId = objectId;
+        this._username = username;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get username(): string
+    {
+        return this._username;
+    }
+}
diff --git a/src/events/inventory/InventoryTradeStartEvent.ts b/src/events/inventory/InventoryTradeStartEvent.ts
new file mode 100644
index 00000000..1724979d
--- /dev/null
+++ b/src/events/inventory/InventoryTradeStartEvent.ts
@@ -0,0 +1,28 @@
+import { TradeUserData } from '../../views/inventory/common/TradeUserData';
+import { InventoryEvent } from './InventoryEvent';
+
+export class InventoryTradeStartEvent extends InventoryEvent
+{
+    public static START_TRADE: string = 'ITSE_START_TRADE';
+
+    private _ownUserTradeData: TradeUserData;
+    private _otherUserTradeData: TradeUserData;
+
+    constructor(ownUserTradeData: TradeUserData, otherUserTradeData: TradeUserData)
+    {
+        super(InventoryTradeStartEvent.START_TRADE);
+
+        this._ownUserTradeData = ownUserTradeData;
+        this._otherUserTradeData = otherUserTradeData;
+    }
+
+    public get ownUserTradeData(): TradeUserData
+    {
+        return this._ownUserTradeData;
+    }
+
+    public get otherUserTradeData(): TradeUserData
+    {
+        return this._otherUserTradeData;
+    }
+}
diff --git a/src/events/inventory/index.ts b/src/events/inventory/index.ts
index 6b5cf8e6..e795837f 100644
--- a/src/events/inventory/index.ts
+++ b/src/events/inventory/index.ts
@@ -1 +1,3 @@
 export * from './InventoryEvent';
+export * from './InventoryTradeRequestEvent';
+export * from './InventoryTradeStartEvent';
diff --git a/src/views/inventory/InventoryMessageHandler.tsx b/src/views/inventory/InventoryMessageHandler.tsx
index af4e8eba..d28f0edf 100644
--- a/src/views/inventory/InventoryMessageHandler.tsx
+++ b/src/views/inventory/InventoryMessageHandler.tsx
@@ -1,15 +1,17 @@
-import { BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory } from 'nitro-renderer';
+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 { FC, useCallback } from 'react';
+import { GetRoomSession, GetSessionDataManager } from '../../api';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { mergeFurniFragments } from './common/FurnitureUtilities';
 import { mergePetFragments } from './common/PetUtilities';
+import { TradeState } from './common/TradeState';
+import { TradeUserData } from './common/TradeUserData';
 import { useInventoryContext } from './context/InventoryContext';
 import { InventoryMessageHandlerProps } from './InventoryMessageHandler.types';
 import { InventoryBadgeActions } from './reducers/InventoryBadgeReducer';
 import { InventoryBotActions } from './reducers/InventoryBotReducer';
 import { InventoryFurnitureActions } from './reducers/InventoryFurnitureReducer';
 import { InventoryPetActions } from './reducers/InventoryPetReducer';
-
 let furniMsgFragments: Map<number, FurnitureListItemParser>[] = null;
 let petMsgFragments: Map<number, PetData>[] = null;
  
@@ -161,6 +163,111 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
         });
     }, [ dispatchBadgeState ]);
 
+    const onTradingAcceptEvent = useCallback((event: TradingAcceptEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.SET_TRADE_ACCEPTANCE,
+            payload: {
+                userId: parser.userID,
+                flag: parser.userAccepts
+            }
+        });
+    }, [ dispatchFurnitureState ]);
+
+    const onTradingOpenEvent = useCallback((event: TradingOpenEvent) =>
+    {
+        const parser = event.getParser();
+
+        const ownUser = new TradeUserData();
+        const otherUser = new TradeUserData();
+
+        ownUser.userItems = new AdvancedMap();
+        otherUser.userItems = new AdvancedMap();
+        
+        const userDataOne = GetRoomSession().userDataManager.getUserData(parser.userID);
+        const userDataTwo = GetRoomSession().userDataManager.getUserData(parser.otherUserID);
+
+        if(userDataOne.webID === GetSessionDataManager().userId)
+        {
+            ownUser.userId = userDataOne.webID;
+            ownUser.userName = userDataOne.name;
+            ownUser.canTrade = parser.userCanTrade;
+
+            otherUser.userId = userDataTwo.webID;
+            otherUser.userName = userDataTwo.name;
+            otherUser.canTrade = parser.otherUserCanTrade;
+        }
+
+        else if(userDataTwo.webID === GetSessionDataManager().userId)
+        {
+            ownUser.userId = userDataTwo.webID;
+            ownUser.userName = userDataTwo.name;
+            ownUser.canTrade = parser.otherUserCanTrade;
+
+            otherUser.userId = userDataOne.webID;
+            otherUser.userName = userDataOne.name;
+            otherUser.canTrade = parser.userCanTrade;
+        }
+
+        dispatchFurnitureState({
+            type: InventoryFurnitureActions.SET_TRADE_DATA,
+            payload: {
+                ownTradeUser: ownUser,
+                otherTradeUser: otherUser
+            }
+        });
+    }, [ 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.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({
+            type: InventoryFurnitureActions.UPDATE_TRADE,
+            payload: {
+                tradeParser: event.getParser()
+            }
+        });
+    }, [ dispatchFurnitureState ]);
+
     CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent);
     CreateMessageHook(FurnitureListEvent, onFurnitureListEvent);
     CreateMessageHook(FurnitureListInvalidateEvent, onFurnitureListInvalidateEvent);
@@ -173,6 +280,12 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
     CreateMessageHook(PetRemovedFromInventory, onPetRemovedFromInventory);
     CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
     CreateMessageHook(BadgesEvent, onBadgesEvent);
+    CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
+    CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
+    CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
+    CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
+    CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent);
+    CreateMessageHook(TradingListItemEvent, onTradingListItemEvent);
 
     return null;
 }
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 66c21ce4..4363c1d0 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -6,7 +6,7 @@
         height: 240px;
         max-height: 430px;
         resize: vertical;
-        overflow:auto;
+        overflow: auto;
     }
 
     .empty-image {
diff --git a/src/views/inventory/InventoryView.tsx b/src/views/inventory/InventoryView.tsx
index a1ba407e..04f65231 100644
--- a/src/views/inventory/InventoryView.tsx
+++ b/src/views/inventory/InventoryView.tsx
@@ -1,7 +1,7 @@
-import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
+import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingOpenComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
-import { GetRoomEngine } from '../../api';
-import { InventoryEvent } from '../../events';
+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';
@@ -19,11 +19,12 @@ import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
 import { InventoryBotView } from './views/bot/InventoryBotView';
 import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
 import { InventoryPetView } from './views/pet/InventoryPetView';
+import { InventoryTradeView } from './views/trade/InventoryTradeView';
+
+const tabs = [ InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES ];
 
 export const InventoryView: FC<InventoryViewProps> = props =>
 {
-    const tabs = [ InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES ];
-
     const [ isVisible, setIsVisible ]   = useState(false);
     const [ currentTab, setCurrentTab ] = useState<string>(tabs[0]);
     const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
@@ -46,12 +47,18 @@ export const InventoryView: FC<InventoryViewProps> = props =>
             case InventoryEvent.TOGGLE_INVENTORY:
                 setIsVisible(value => !value);
                 return;
+            case InventoryTradeRequestEvent.REQUEST_TRADE: {
+                const tradeEvent = (event as InventoryTradeRequestEvent);
+
+                GetConnection().send(new TradingOpenComposer(tradeEvent.objectId));
+            }
         }
     }, []);
 
     useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
     useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent);
     useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
+    useUiEvent(InventoryTradeRequestEvent.REQUEST_TRADE, onInventoryEvent);
 
     const onRoomEngineObjectPlacedEvent = useCallback((event: RoomEngineObjectPlacedEvent) =>
     {
@@ -96,6 +103,19 @@ export const InventoryView: FC<InventoryViewProps> = props =>
         }
     }, []);
 
+    useEffect(() =>
+    {
+        if(!isVisible)
+        {
+            if(furnitureState.tradeData)
+            {
+                setIsVisible(true);
+
+                if(currentTab !== InventoryTabs.FURNITURE) setCurrentTab(InventoryTabs.FURNITURE);
+            }
+        }
+    }, [ furnitureState.tradeData, isVisible, currentTab ]);
+
     return (
         <InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
             <InventoryMessageHandler />
@@ -121,6 +141,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                         { (currentTab === InventoryTabs.BADGES ) && 
                             <InventoryBadgeView /> }
+                        { furnitureState.tradeData && <InventoryTradeView isInFurnitureView={ (currentTab === InventoryTabs.FURNITURE ) } /> }
                     </NitroCardContentView>
                 </NitroCardView> }
         </InventoryContextProvider>
diff --git a/src/views/inventory/common/FurnitureItem.ts b/src/views/inventory/common/FurnitureItem.ts
index 702b46c3..e063c9f0 100644
--- a/src/views/inventory/common/FurnitureItem.ts
+++ b/src/views/inventory/common/FurnitureItem.ts
@@ -28,6 +28,8 @@ export class FurnitureItem implements IFurnitureItem
 
     constructor(parser: IFurnitureItemData)
     {
+        if(!parser) return;
+        
         this._locked                = false;
         this._id                    = parser.itemId;
         this._type                  = parser.spriteId;
@@ -189,26 +191,26 @@ export class FurnitureItem implements IFurnitureItem
 
     public update(parser: IFurnitureItemData): void
     {
-        this._type                  = parser.spriteId;
-        this._ref                   = parser.ref;
-        this._category              = parser.category;
-        this._groupable             = (parser.isGroupable && !parser.rentable);
-        this._tradeable             = parser.tradable;
-        this._recyclable            = parser.isRecycleable;
-        this._sellable              = parser.sellable;
-        this._stuffData             = parser.stuffData;
-        this._extra                 = parser.extra;
-        this._secondsToExpiration   = parser.secondsToExpiration;
-        this._expirationTimeStamp   = parser.expirationTimeStamp;
-        this._hasRentPeriodStarted  = parser.hasRentPeriodStarted;
-        this._creationDay           = parser.creationDay;
-        this._creationMonth         = parser.creationMonth;
-        this._creationYear          = parser.creationYear;
-        this._slotId                = parser.slotId;
-        this._songId                = parser.songId;
-        this._flatId                = parser.flatId;
-        this._isRented              = parser.rentable;
-        this._isWallItem            = parser.isWallItem;
+        this._type = parser.spriteId;
+        this._ref = parser.ref;
+        this._category = parser.category;
+        this._groupable = (parser.isGroupable && !parser.rentable);
+        this._tradeable = parser.tradable;
+        this._recyclable = parser.isRecycleable;
+        this._sellable = parser.sellable;
+        this._stuffData = parser.stuffData;
+        this._extra = parser.extra;
+        this._secondsToExpiration = parser.secondsToExpiration;
+        this._expirationTimeStamp = parser.expirationTimeStamp;
+        this._hasRentPeriodStarted = parser.hasRentPeriodStarted;
+        this._creationDay = parser.creationDay;
+        this._creationMonth = parser.creationMonth;
+        this._creationYear = parser.creationYear;
+        this._slotId = parser.slotId;
+        this._songId = parser.songId;
+        this._flatId = parser.flatId;
+        this._isRented = parser.rentable;
+        this._isWallItem = parser.isWallItem;
     }
 
     public clone(): FurnitureItem
diff --git a/src/views/inventory/common/FurnitureUtilities.ts b/src/views/inventory/common/FurnitureUtilities.ts
index dc2052d7..06b13a84 100644
--- a/src/views/inventory/common/FurnitureUtilities.ts
+++ b/src/views/inventory/common/FurnitureUtilities.ts
@@ -310,7 +310,7 @@ function addGroupableFurnitureItem(set: GroupItem[], item: FurnitureItem, unseen
     return existingGroup;
 }
 
-function createGroupItem(type: number, category: number, stuffData: IObjectData, extra: number = NaN, flag: boolean = false): GroupItem
+export function createGroupItem(type: number, category: number, stuffData: IObjectData, extra: number = NaN, flag: boolean = false): GroupItem
 {
     // const iconImage: HTMLImageElement = null;
 
diff --git a/src/views/inventory/common/GroupItem.ts b/src/views/inventory/common/GroupItem.ts
index a5f53234..80d081fa 100644
--- a/src/views/inventory/common/GroupItem.ts
+++ b/src/views/inventory/common/GroupItem.ts
@@ -20,21 +20,42 @@ export class GroupItem
     private _hasUnseenItems: boolean;
     private _items: FurnitureItem[];
 
-    constructor(type: number, category: number, roomEngine: IRoomEngine, stuffData: IObjectData, extra: number)
+    constructor(type: number = -1, category: number = -1, roomEngine: IRoomEngine = null, stuffData: IObjectData = null, extra: number = -1)
     {
-        this._type              = type;
-        this._category          = category;
-        this._roomEngine        = roomEngine;
-        this._stuffData         = stuffData;
-        this._extra             = extra;
-        this._isWallItem        = false;
-        this._iconUrl           = null;
-        this._name              = null;
-        this._description       = null;
-        this._locked            = false;
-        this._selected          = false;
-        this._hasUnseenItems    = false;
-        this._items             = [];
+        this._type = type;
+        this._category = category;
+        this._roomEngine = roomEngine;
+        this._stuffData = stuffData;
+        this._extra = extra;
+        this._isWallItem = false;
+        this._iconUrl = null;
+        this._name = null;
+        this._description = null;
+        this._locked = false;
+        this._selected = false;
+        this._hasUnseenItems = false;
+        this._items = [];
+    }
+
+    public clone(): GroupItem
+    {
+        const groupItem = new GroupItem();
+
+        groupItem._type = this._type;
+        groupItem._category = this._category;
+        groupItem._roomEngine = this._roomEngine;
+        groupItem._stuffData = this._stuffData;
+        groupItem._extra = this._extra;
+        groupItem._isWallItem = this._isWallItem;
+        groupItem._iconUrl = this._iconUrl;
+        groupItem._name = this._name;
+        groupItem._description = this._description;
+        groupItem._locked = this._locked;
+        groupItem._selected = this._selected;
+        groupItem._hasUnseenItems = this._hasUnseenItems;
+        groupItem._items = this._items;
+
+        return groupItem;
     }
 
     public prepareGroup(): void
@@ -251,11 +272,12 @@ export class GroupItem
         this._items = items;
     }
 
-    public lockItemIds(itemIds: number[]): void
+    public lockItemIds(itemIds: number[]): boolean
     {
         const items = [ ...this._items ];
 
         let index = 0;
+        let updated = false;
 
         while(index < items.length)
         {
@@ -264,6 +286,8 @@ export class GroupItem
 
             if(item.locked !== locked)
             {
+                updated = true;
+
                 const newItem = item.clone();
 
                 newItem.locked = locked;
@@ -275,6 +299,8 @@ export class GroupItem
         }
 
         this._items = items;
+
+        return updated;
     }
 
     private setName(): void
diff --git a/src/views/inventory/common/TradeState.ts b/src/views/inventory/common/TradeState.ts
new file mode 100644
index 00000000..68253e87
--- /dev/null
+++ b/src/views/inventory/common/TradeState.ts
@@ -0,0 +1,10 @@
+export class TradeState
+{
+    public static TRADING_STATE_READY: number       = 0;
+    public static TRADING_STATE_RUNNING: number     = 1;
+    public static TRADING_STATE_COUNTDOWN: number   = 2;
+    public static TRADING_STATE_CONFIRMING: number  = 3;
+    public static TRADING_STATE_CONFIRMED: number   = 4;
+    public static TRADING_STATE_COMPLETED: number   = 5;
+    public static TRADING_STATE_CANCELLED: number   = 6;
+}
diff --git a/src/views/inventory/common/TradeUserData.ts b/src/views/inventory/common/TradeUserData.ts
new file mode 100644
index 00000000..5df557fb
--- /dev/null
+++ b/src/views/inventory/common/TradeUserData.ts
@@ -0,0 +1,15 @@
+import { AdvancedMap } from 'nitro-renderer';
+import { GroupItem } from './GroupItem';
+
+export class TradeUserData
+{
+    constructor(
+        public userId: number = -1,
+        public userName: string = '',
+        public userItems: AdvancedMap<string, GroupItem> = null,
+        public itemCount: number = 0,
+        public creditsCount: number = 0,
+        public accepts: boolean = false,
+        public canTrade: boolean = false,
+        public items: AdvancedMap<string, GroupItem> = new AdvancedMap()) {}
+}
diff --git a/src/views/inventory/common/TradingUtilities.ts b/src/views/inventory/common/TradingUtilities.ts
new file mode 100644
index 00000000..be7fc72d
--- /dev/null
+++ b/src/views/inventory/common/TradingUtilities.ts
@@ -0,0 +1,73 @@
+import { AdvancedMap, IObjectData, ItemDataStructure, StringDataType } from 'nitro-renderer';
+import { GetSessionDataManager } from '../../../api';
+import { FurniCategory } from './FurniCategory';
+import { FurnitureItem } from './FurnitureItem';
+import { createGroupItem } from './FurnitureUtilities';
+import { GroupItem } from './GroupItem';
+
+function isExternalImage(spriteId: number): boolean
+{
+    const furnitureData = GetSessionDataManager().getWallItemData(spriteId);
+
+    return (furnitureData && furnitureData.isExternalImage);
+}
+
+export function parseTradeItems(items: ItemDataStructure[], _arg_2: AdvancedMap<string, GroupItem>): void
+{
+    const totalItems = items.length;
+
+    if(!totalItems) return;
+
+    for(const item of items)
+    {
+        const spriteId = item.spriteId;
+        const category = item.category;
+
+        let name = (item.furniType + spriteId);
+
+        if(!item.isGroupable || isExternalImage(spriteId))
+        {
+            name = ('itemid' + item.itemId);
+        }
+
+        if(item.category === FurniCategory._Str_5186)
+        {
+            name = (item.itemId + 'poster' + item.stuffData.getLegacyString());
+        }
+
+        else if(item.category === FurniCategory._Str_12454)
+        {
+            name = '';
+        }
+
+        let groupItem = ((item.isGroupable && !isExternalImage(item.spriteId)) ? _arg_2.getValue(name) : null);
+
+        if(!groupItem)
+        {
+            groupItem = createGroupItem(spriteId, category, item.stuffData);
+
+            _arg_2.add(name, groupItem);
+        }
+
+        groupItem.push(new FurnitureItem(item));
+    }
+}
+
+export function _Str_16998(spriteId: number, stuffData: IObjectData): string
+{
+    let type = spriteId.toString();
+    const _local_4 = (stuffData as StringDataType);
+
+    if(!(stuffData instanceof StringDataType)) return type;
+
+    let _local_5 = 1;
+
+    while(_local_5 < 5)
+    {
+        type = (type + (',' + _local_4.getValue(_local_5)));
+
+        _local_5++;
+    }
+
+    return type;
+}
diff --git a/src/views/inventory/reducers/InventoryFurnitureReducer.tsx b/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
index 865b9207..51b380c6 100644
--- a/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
+++ b/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
@@ -1,14 +1,22 @@
-import { FurnitureListItemParser } from 'nitro-renderer';
+import { AdvancedMap, FurnitureListItemParser, TradingListItemParser } from 'nitro-renderer';
 import { Reducer } from 'react';
 import { FurnitureItem } from '../common/FurnitureItem';
 import { addFurnitureItem, processFurniFragment, removeFurniItemById } from '../common/FurnitureUtilities';
 import { GroupItem } from '../common/GroupItem';
+import { TradeState } from '../common/TradeState';
+import { TradeUserData } from '../common/TradeUserData';
+import { parseTradeItems } from '../common/TradingUtilities';
 
 export interface IInventoryFurnitureState
 {
     needsFurniUpdate: boolean;
     groupItem: GroupItem;
     groupItems: GroupItem[];
+    tradeData: {
+        ownUser: TradeUserData;
+        otherUser: TradeUserData;
+        state: number;
+    }
 }
 
 export interface IInventoryFurnitureAction
@@ -20,6 +28,11 @@ export interface IInventoryFurnitureAction
         parsers?: FurnitureListItemParser[];
         itemId?: number;
         fragment?: Map<number, FurnitureListItemParser>;
+        ownTradeUser?: TradeUserData;
+        otherTradeUser?: TradeUserData;
+        tradeState?: number;
+        userId?: number;
+        tradeParser?: TradingListItemParser;
     }
 }
 
@@ -30,12 +43,18 @@ export class InventoryFurnitureActions
     public static PROCESS_FRAGMENT: string = 'IFA_PROCESS_FRAGMENT';
     public static ADD_OR_UPDATE_FURNITURE: string = 'IFA_ADD_OR_UPDATE_FURNITURE';
     public static REMOVE_FURNITURE: string = 'IFA_REMOVE_FURNITURE';
+    public static SET_TRADE_DATA: string = 'IFA_SET_TRADE_DATA';
+    public static SET_TRADE_STATE: string = 'IFA_SET_TRADE_STATE';
+    public static SET_TRADE_ACCEPTANCE: string = 'FA_SET_TRADE_ACCEPTANCE';
+    public static CLOSE_TRADE: string = 'IFA_CLOSE_STRING';
+    public static UPDATE_TRADE: string = 'IFA_UPDATE_TRADE';
 }
 
 export const initialInventoryFurniture: IInventoryFurnitureState = {
     needsFurniUpdate: true,
     groupItem: null,
-    groupItems: []
+    groupItems: [],
+    tradeData: null
 }
 
 export const InventoryFurnitureReducer: Reducer<IInventoryFurnitureState, IInventoryFurnitureAction> = (state, action) =>
@@ -131,6 +150,122 @@ export const InventoryFurnitureReducer: Reducer<IInventoryFurnitureState, IInven
 
             return { ...state, groupItems };
         }
+        case InventoryFurnitureActions.SET_TRADE_DATA: {
+            const tradeData = { ...state.tradeData };
+
+            tradeData.ownUser = (action.payload.ownTradeUser || null);
+            tradeData.otherUser = (action.payload.otherTradeUser || null);
+            tradeData.state = TradeState.TRADING_STATE_RUNNING;
+
+            return { ...state, tradeData };
+        }
+        case InventoryFurnitureActions.SET_TRADE_STATE: {
+            const tradeData = { ...state.tradeData };
+
+            tradeData.state = (action.payload.tradeState || TradeState.TRADING_STATE_RUNNING);
+
+            return { ...state, tradeData };
+        }
+        case InventoryFurnitureActions.SET_TRADE_ACCEPTANCE: {
+            const tradeData = { ...state.tradeData };
+
+            const userId = (action.payload.userId || -1);
+
+            if(tradeData.ownUser.userId === userId)
+            {
+                const ownUserData = Object.assign({}, tradeData.ownUser);
+
+                ownUserData.accepts = (action.payload.flag || false);
+
+                tradeData.ownUser = ownUserData;
+            }
+
+            else if(tradeData.otherUser.userId === userId)
+            {
+                const otherUserData = Object.assign({}, tradeData.otherUser);
+
+                otherUserData.accepts = (action.payload.flag || false);
+
+                tradeData.otherUser = otherUserData;
+            }
+
+            return { ...state, tradeData };
+        }
+        case InventoryFurnitureActions.CLOSE_TRADE: {
+            const tradeData = null;
+
+            return { ...state, tradeData };
+        }
+        case InventoryFurnitureActions.UPDATE_TRADE: {
+            const tradeData = { ...state.tradeData };
+            const groupItems = [ ...state.groupItems ]; 
+
+            const parser = (action.payload.tradeParser || null);
+
+            if(parser)
+            {
+                const firstUserItems: AdvancedMap<string, GroupItem> = new AdvancedMap();
+                const secondUserItems: AdvancedMap<string, GroupItem> = new AdvancedMap();
+
+                parseTradeItems(parser.firstUserItemArray, firstUserItems);
+                parseTradeItems(parser.secondUserItemArray, secondUserItems);
+
+                const ownUserData = Object.assign({}, tradeData.ownUser);
+                const otherUserData = Object.assign({}, tradeData.otherUser);
+
+                if(tradeData.ownUser.userId === parser.firstUserID)
+                {
+                    ownUserData.creditsCount = parser.firstUserNumCredits;
+                    ownUserData.itemCount = parser.firstUserNumItems;
+                    ownUserData.items = firstUserItems;
+                }
+
+                else if(tradeData.ownUser.userId === parser.secondUserID)
+                {
+                    ownUserData.creditsCount = parser.secondUserNumCredits;
+                    ownUserData.itemCount = parser.secondUserNumItems;
+                    ownUserData.items = secondUserItems;
+                }
+
+                if(tradeData.otherUser.userId === parser.firstUserID)
+                {
+                    otherUserData.creditsCount = parser.firstUserNumCredits;
+                    otherUserData.itemCount = parser.firstUserNumItems;
+                    otherUserData.items = firstUserItems;
+                }
+
+                else if(tradeData.otherUser.userId === parser.secondUserID)
+                {
+                    otherUserData.creditsCount = parser.secondUserNumCredits;
+                    otherUserData.itemCount = parser.secondUserNumItems;
+                    otherUserData.items = secondUserItems;
+                }
+
+                tradeData.ownUser = ownUserData;
+                tradeData.otherUser = otherUserData;
+
+                const tradeIds: number[] = [];
+
+                for(const groupItem of ownUserData.items.getValues())
+                {
+                    let i = 0;
+
+                    while(i < groupItem.getTotalCount())
+                    {
+                        const item = groupItem.getItemByIndex(i);
+
+                        if(item) tradeIds.push(item.ref);
+
+                        i++;
+                    }
+                }
+
+                for(const groupItem of groupItems) groupItem.lockItemIds(tradeIds);
+
+            }
+
+            return { ...state, groupItems, tradeData };
+        }
         default:
             return state;
     }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 644af8a1..89cb22ac 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/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 { FurnitureListComposer, IObjectData, RoomObjectVariable, TradingListAddItemComposer, TradingListAddItemsComposer, Vector3d } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { GetConnection, GetRoomEngine } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
@@ -8,19 +8,122 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
 import { FurniCategory } from '../../common/FurniCategory';
 import { attemptItemPlacement } from '../../common/FurnitureUtilities';
 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';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
 
+const MAX_ITEMS_TO_TRADE: number = 3;
+
 export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 {
     const { roomSession = null, roomPreviewer = null } = props;
     const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext();
-    const { needsFurniUpdate = false, groupItem = null, groupItems = [] } = furnitureState;
+    const { needsFurniUpdate = false, groupItem = null, groupItems = [], tradeData = null } = furnitureState;
     const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(groupItems);
 
+    const isTrading = useMemo(() =>
+    {
+        if(!tradeData) return false;
+        
+        return (tradeData.state >= TradeState.TRADING_STATE_RUNNING);
+    }, [ tradeData ]);
+
+    const canTradeItem = useCallback((isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
+    {
+        if(!tradeData || !tradeData.ownUser || tradeData.ownUser.accepts || !tradeData.ownUser.items) return false;
+
+        if(tradeData.ownUser.items.length < MAX_ITEMS_TO_TRADE) return true;
+
+        if(!groupable) return false;
+
+        let type = spriteId.toString();
+
+        if(category === FurniCategory._Str_5186)
+        {
+            type = ((type + 'poster') + stuffData.getLegacyString());
+        }
+        else
+        {
+            if(category === FurniCategory._Str_12454)
+            {
+                type = _Str_16998(spriteId, stuffData);
+            }
+            else
+            {
+                type = (((isWallItem) ? 'I' : 'S') + type);
+            }
+        }
+
+        return !!tradeData.ownUser.items.getValue(type);
+    }, [ tradeData ]);
+
+    const attemptItemOffer = useCallback((count: number) =>
+    {
+        if(!tradeData || !groupItem || !isTrading) return;
+
+        const tradeItems = groupItem.getTradeItems(count);
+
+        if(!tradeItems || !tradeItems.length) return;
+
+        let coreItem: IFurnitureItem = null;
+        const itemIds: number[] = [];
+
+        for(const item of tradeItems)
+        {
+            itemIds.push(item.id);
+
+            if(!coreItem) coreItem = item;
+        }
+
+        const tradedIds: number[] = [];
+
+        if(isTrading)
+        {
+            const ownItemCount = tradeData.ownUser.items.length;
+
+            if((ownItemCount + itemIds.length) <= 1500)
+            {
+                if(!coreItem.isGroupable && (itemIds.length))
+                {
+                    GetConnection().send(new TradingListAddItemComposer(itemIds.pop()));
+                }
+                else
+                {
+                    const tradeIds: number[] = [];
+
+                    for(const itemId of itemIds)
+                    {
+                        if(canTradeItem(coreItem.isWallItem, coreItem.type, coreItem.category, coreItem.isGroupable, coreItem.stuffData))
+                        {
+                            tradedIds.push(itemId);
+                        }
+                    }
+
+                    if(tradedIds.length)
+                    {
+                        if(tradedIds.length === 1)
+                        {
+                            GetConnection().send(new TradingListAddItemComposer(tradedIds.pop()));
+                        }
+                        else
+                        {
+                            GetConnection().send(new TradingListAddItemsComposer(...tradedIds));
+                        }
+                    }
+                }
+            }
+            else
+            {
+                //this._notificationService.alert('${trading.items.too_many_items.desc}', '${trading.items.too_many_items.title}');
+            }
+        }
+    }, [ canTradeItem, groupItem, isTrading, tradeData ]);
+
     useEffect(() =>
     {
         if(needsFurniUpdate)
@@ -123,14 +226,18 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
             </div>
             <div className="position-relative d-flex flex-column col-5 justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { groupItem && groupItem.stuffData.isUnique &&
+                { groupItem &&groupItem.stuffData.isUnique &&
                     <div className="position-absolute limited-edition-info-container">
                         <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
                     </div> }
-                { groupItem && <div className="d-flex flex-column flex-grow-1">
-                    <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
+                { groupItem &&
+                    <div className="d-flex flex-column flex-grow-1">
+                        <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
+                        { !!roomSession && !isTrading &&
+                            <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                        { isTrading &&
+                            <button type="button" className="btn btn-primary btn-sm" onClick={ event => attemptItemOffer(1) }>{ LocalizeText('inventory.trading.offer') }</button> }
+                    </div> }
             </div>
         </div>
     );
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
index 97d174c6..5079f367 100644
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
+++ b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
@@ -10,6 +10,7 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
 {
     const { groupItem } = props;
     const { furnitureState, dispatchFurnitureState } = useInventoryContext();
+    const { tradeData = null } = furnitureState;
     const [ isMouseDown, setMouseDown ] = useState(false);
     const isActive = (furnitureState.groupItem === groupItem);
 
@@ -40,7 +41,7 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
 
     return (
         <div className="col pe-1 pb-1 inventory-furniture-item-container">
-            <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
+            <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') + (!groupItem.getUnlockedCount() ? 'opacity-0-5 ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
                 {groupItem.getUnlockedCount() > 1 &&
                     <span className="position-absolute badge border bg-danger px-1 rounded-circle">{groupItem.getUnlockedCount()}</span> }
                 { groupItem.stuffData.isUnique && 
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
index 4b3ae59b..9df3889c 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
@@ -9,7 +9,7 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
     return (
         <div className="h-100 overflow-hidden">
             <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-            { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
+                { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
                     {
                         return <InventoryFurnitureItemView key={ index } groupItem={ item } />
                     }) }
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
new file mode 100644
index 00000000..88fe8f7f
--- /dev/null
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { useInventoryContext } from '../../context/InventoryContext';
+import { InventoryTradeViewProps } from './InventoryTradeView.types';
+import { InventoryTradeItemView } from './item/InventoryTradeItemView';
+
+const MAX_ITEMS_COUNT: number = 9;
+
+export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
+{
+    const { isInFurnitureView = false } = props;
+    const { furnitureState = null } = useInventoryContext();
+    const { tradeData = null } = furnitureState;
+
+    return (
+        <div className="row h-100 mt-2">
+            <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>
+                <div className="row row-cols-3 align-content-start g-0 w-100 h-100">
+                    { Array.from(Array(MAX_ITEMS_COUNT), (e, i) =>
+                    {
+                        return <InventoryTradeItemView key={ i } groupItem={ (tradeData.ownUser.items.getWithIndex(i) || null) } />;
+                    }) }
+                </div>
+            </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>
+                <div className="row row-cols-3 align-content-start g-0 w-100 h-100">
+                    { Array.from(Array(MAX_ITEMS_COUNT), (e, i) =>
+                    {
+                        return <InventoryTradeItemView key={ i } groupItem={ (tradeData.otherUser.items.getWithIndex(i) || null) } />;
+                    }) }
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/inventory/views/trade/InventoryTradeView.types.ts b/src/views/inventory/views/trade/InventoryTradeView.types.ts
new file mode 100644
index 00000000..aa863e89
--- /dev/null
+++ b/src/views/inventory/views/trade/InventoryTradeView.types.ts
@@ -0,0 +1,4 @@
+export interface InventoryTradeViewProps
+{
+    isInFurnitureView: boolean;
+}
diff --git a/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx b/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
new file mode 100644
index 00000000..75627b04
--- /dev/null
+++ b/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
@@ -0,0 +1,37 @@
+import { FC, useCallback } from 'react';
+import { LimitedEditionStyledNumberView } from '../../../../shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
+import { InventoryTradeItemViewProps } from './InventoryTradeItemView.types';
+
+export const InventoryTradeItemView: FC<InventoryTradeItemViewProps> = props =>
+{
+    const { groupItem = null } = props;
+
+    const onClick = useCallback(() =>
+    {
+
+    }, []);
+
+    if(!groupItem)
+    {
+        return (
+            <div className="col pe-1 pb-1 inventory-furniture-item-container">
+                <div className="position-relative border border-2 rounded inventory-furniture-item cursor-pointer" />
+            </div>
+        );
+    }
+
+    const imageUrl = `url(${ groupItem.iconUrl })`;
+
+    return (
+        <div className="col pe-1 pb-1 inventory-furniture-item-container">
+            <div className="position-relative border border-2 rounded inventory-furniture-item cursor-pointer" style={ { backgroundImage: imageUrl }} onClick={ onClick }>
+                { groupItem.getUnlockedCount() > 1 &&
+                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ groupItem.getUnlockedCount() }</span> }
+                { groupItem.stuffData.isUnique && 
+                    <div className="position-absolute unique-item-counter">
+                        <LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />
+                    </div> }
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts b/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts
new file mode 100644
index 00000000..29740d21
--- /dev/null
+++ b/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts
@@ -0,0 +1,6 @@
+import { GroupItem } from '../../../common/GroupItem';
+
+export interface InventoryTradeItemViewProps
+{
+    groupItem: GroupItem;
+}
diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx
index 15932d13..8ab722ca 100644
--- a/src/views/purse/PurseView.tsx
+++ b/src/views/purse/PurseView.tsx
@@ -37,11 +37,11 @@ export const PurseView: FC<PurseViewProps> = props =>
         <PurseContextProvider value={ { purseState, dispatchPurseState }}>
             <PurseMessageHandler />
             <div className="nitro-purse rounded d-flex flex-row py-1 justify-content-between">
-                { currencies && currencies.map((currency, index) =>
+                { currencies && currencies.map(currency =>
                     {
                         if(displayedCurrencies.indexOf(currency.type) === -1) return null;
 
-                        return <CurrencyView key={ index } currency={ currency } />;
+                        return <CurrencyView key={ currency.type } currency={ currency } />;
                     }) }
                 <div className="notification-button px-2" onClick={ toggleNotificationCenter }>
                     <i className="fas fa-bars" />
diff --git a/src/views/room/handlers/RoomWidgetInfostandHandler.ts b/src/views/room/handlers/RoomWidgetInfostandHandler.ts
index 868911a7..9ad903bf 100644
--- a/src/views/room/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/views/room/handlers/RoomWidgetInfostandHandler.ts
@@ -1,6 +1,6 @@
 import { IFurnitureData, Nitro, NitroEvent, ObjectDataFactory, PetFigureData, PetType, RoomAdsUpdateComposer, RoomControllerLevel, RoomModerationSettings, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnumItemExtradataParameter, SecurityLevel, Vector3d } from 'nitro-renderer';
 import { GetConnection, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../api';
-import { WiredSelectObjectEvent } from '../../../events';
+import { InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../events';
 import { dispatchUiEvent } from '../../../hooks/events';
 import { LocalizeText } from '../../../utils/LocalizeText';
 import { RoomWidgetObjectNameEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent } from '../events';
@@ -114,7 +114,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
                 this.container.roomSession.sendTakeRightsMessage((message as RoomWidgetUserActionMessage).userId);
                 break;
             case RoomWidgetUserActionMessage.START_TRADING:
-                //if(userData) this._widget.inventoryTrading.startTrade(userData.roomIndex, userData.name);
+                dispatchUiEvent(new InventoryTradeRequestEvent(userData.roomIndex, userData.name));
                 break;
             // case RoomWidgetUserActionMessage.RWUAM_OPEN_HOME_PAGE:
             //     this._container.sessionDataManager._Str_21275((message as RoomWidgetUserActionMessage).userId, _local_3.name);

From a907b85514041b0f5881420962e7ef6ca1c1b2fa Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 6 Jul 2021 22:25:36 -0400
Subject: [PATCH 04/10] Trading

---
 src/assets/styles/scrollbars.scss             |  26 +--
 src/layout/card/NitroCardView.scss            |   1 +
 src/layout/card/grid/NitroCardGridView.scss   |  26 +++
 src/layout/card/grid/NitroCardGridView.tsx    |  15 ++
 .../card/grid/NitroCardGridView.types.ts      |   4 +
 .../card/grid/item/NitroCardGridItemView.scss |  47 ++++
 .../card/grid/item/NitroCardGridItemView.tsx  |  24 ++
 .../grid/item/NitroCardGridItemView.types.ts  |  10 +
 src/views/inventory/InventoryView.tsx         |  61 ++---
 src/views/inventory/InventoryView.types.ts    |   8 +-
 .../reducers/InventoryFurnitureReducer.tsx    |   1 -
 src/views/inventory/views/InventoryViews.scss |   2 -
 .../views/badge/InventoryBadgeView.scss       |   6 +-
 .../InventoryActiveBadgeResultsView.scss      |   2 -
 .../InventoryActiveBadgeResultsView.tsx       |   5 +-
 .../badge/item/InventoryBadgeItemView.tsx     |   9 +-
 .../results/InventoryBadgeResultsView.scss    |   9 -
 .../results/InventoryBadgeResultsView.tsx     |  17 +-
 .../inventory/views/bot/InventoryBotView.scss |   2 -
 .../views/bot/item/InventoryBotItemView.scss  |  25 ---
 .../views/bot/item/InventoryBotItemView.tsx   |   9 +-
 .../bot/results/InventoryBotResultsView.scss  |   5 -
 .../bot/results/InventoryBotResultsView.tsx   |  13 +-
 .../furniture/InventoryFurnitureView.scss     |   4 -
 .../furniture/InventoryFurnitureView.tsx      | 117 +---------
 .../item/InventoryFurnitureItemView.scss      |  25 ---
 .../item/InventoryFurnitureItemView.tsx       |  17 +-
 .../InventoryFurnitureResultsView.scss        |   2 -
 .../results/InventoryFurnitureResultsView.tsx |  17 +-
 .../InventoryFurnitureResultsView.types.ts    |   1 +
 .../search/InventoryFurnitureSearchView.scss  |   0
 .../search/InventoryFurnitureSearchView.tsx   |   2 +-
 .../inventory/views/pet/InventoryPetView.scss |   2 -
 .../views/pet/item/InventoryPetItemView.scss  |  17 --
 .../views/pet/item/InventoryPetItemView.tsx   |   9 +-
 .../pet/results/InventoryPetResultsView.scss  |   5 -
 .../pet/results/InventoryPetResultsView.tsx   |  13 +-
 .../views/trade/InventoryTradeView.tsx        | 211 ++++++++++++++++--
 .../views/trade/InventoryTradeView.types.ts   |   1 -
 .../trade/item/InventoryTradeItemView.tsx     |  37 ---
 .../item/InventoryTradeItemView.types.ts      |   6 -
 41 files changed, 426 insertions(+), 387 deletions(-)
 create mode 100644 src/layout/card/grid/NitroCardGridView.scss
 create mode 100644 src/layout/card/grid/NitroCardGridView.tsx
 create mode 100644 src/layout/card/grid/NitroCardGridView.types.ts
 create mode 100644 src/layout/card/grid/item/NitroCardGridItemView.scss
 create mode 100644 src/layout/card/grid/item/NitroCardGridItemView.tsx
 create mode 100644 src/layout/card/grid/item/NitroCardGridItemView.types.ts
 delete mode 100644 src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss
 delete mode 100644 src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
 delete mode 100644 src/views/inventory/views/bot/InventoryBotView.scss
 delete mode 100644 src/views/inventory/views/bot/item/InventoryBotItemView.scss
 delete mode 100644 src/views/inventory/views/bot/results/InventoryBotResultsView.scss
 delete mode 100644 src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss
 delete mode 100644 src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss
 delete mode 100644 src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.scss
 delete mode 100644 src/views/inventory/views/pet/InventoryPetView.scss
 delete mode 100644 src/views/inventory/views/pet/item/InventoryPetItemView.scss
 delete mode 100644 src/views/inventory/views/pet/results/InventoryPetResultsView.scss
 delete mode 100644 src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
 delete mode 100644 src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts

diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index e9eee6a5..a011c8fa 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/src/assets/styles/scrollbars.scss
@@ -1,25 +1,21 @@
 ::-webkit-scrollbar {
-    width: 7px;
-    height: 5px;
+    width: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {
-    border-radius: $border-radius;
-    background: rgba($black,.1);
-    box-shadow:inset 0 0 1px 1px rgba($black,.1);
-    padding-top:3px;
+    background-clip: padding-box;
+    border-right: 0.25rem solid rgba($black, .1);
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: $border-radius;
-    background: rgba($primary,.4);
-    width: 4px;
-}
+    background-clip: padding-box;
+    border-right: 0.25rem solid rgba($primary, .4);
 
-::-webkit-scrollbar-thumb:hover {
-    background: rgba($primary,.8);
-}
+    &:hover {
+        border-right: 0.25rem solid rgba($primary, .8);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    background: $secondary;
+    &:active {
+        border-right: 0.25rem solid $secondary;
+    }
 }
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index de37a762..44285071 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -6,6 +6,7 @@ $nitro-card-tabs-height: 33px;
 
     @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
+    @import './grid/NitroCardGridView';
     @import './header/NitroCardHeaderView';
     @import './tabs/NitroCardTabsView';
 }
diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss
new file mode 100644
index 00000000..44a1ee42
--- /dev/null
+++ b/src/layout/card/grid/NitroCardGridView.scss
@@ -0,0 +1,26 @@
+.nitro-card-grid {
+
+    .row-cols-3 {
+
+        .col {
+            padding-right: 0.25rem;
+
+            &:nth-child(3n+3) {
+                padding-right: 0;
+            }
+        }
+    }
+    
+    .row-cols-5 {
+
+        .col {
+            padding-right: 0.25rem;
+
+            &:nth-child(5n+5) {
+                padding-right: 0;
+            }
+        }
+    }
+
+    @import './item/NitroCardGridItemView.scss';
+}
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
new file mode 100644
index 00000000..25b9fe47
--- /dev/null
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { NitroCardGridViewProps } from './NitroCardGridView.types';
+
+export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
+{
+    const { columns = 5, children = null } = props;
+
+    return (
+        <div className="h-100 overflow-hidden nitro-card-grid">
+            <div className={ `row row-cols-${ columns } align-content-start g-0 w-100 h-100 overflow-auto` }>
+                { children }
+            </div>
+        </div>
+    );
+}
diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts
new file mode 100644
index 00000000..b24763d1
--- /dev/null
+++ b/src/layout/card/grid/NitroCardGridView.types.ts
@@ -0,0 +1,4 @@
+export interface NitroCardGridViewProps
+{
+    columns?: number;
+}
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss
new file mode 100644
index 00000000..988d0535
--- /dev/null
+++ b/src/layout/card/grid/item/NitroCardGridItemView.scss
@@ -0,0 +1,47 @@
+.grid-item-container {
+    height: 48px;
+    max-height: 48px;
+
+    .grid-item {
+        width: 100%;
+        height: 100%;
+        border-color: $grid-border-color !important;
+        background-color: $grid-bg-color  !important;
+        background-position: center;
+        background-repeat: no-repeat;
+        overflow: hidden;
+    
+        &.active {
+            border-color: $grid-active-border-color !important;
+            background-color: $grid-active-bg-color !important;
+        }
+    
+        .badge {
+            top: 2px;
+            right: 2px;
+            font-size: 8px;
+        }
+
+        .avatar-image {
+            width: 100% !important;
+            height: 100% !important;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-position-y: -32px !important;
+        }
+
+        .trade-button {
+            position: absolute;
+            bottom: 2px;
+            right: 2px;
+            font-size: 5px;
+            padding: 3px;
+            min-height: unset;
+
+            &.left {
+                right: unset;
+                left: 2px;
+            }
+        }
+    }
+}
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
new file mode 100644
index 00000000..904c4fea
--- /dev/null
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
+import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
+
+export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
+{
+    const { itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemImage = null, className = '', style = {}, children = null, ...rest } = props;
+
+    const imageUrl = `url(${ itemImage })`;
+
+    return (
+        <div className="col pb-1 grid-item-container">
+            <div className={ `position-relative border border-2 rounded grid-item cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' } ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : style } { ...rest }>
+                { (itemCount > 1) &&
+                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
+                { itemUnique && 
+                    <div className="position-absolute unique-item-counter">
+                        <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                    </div> }
+                { children }
+            </div>
+        </div>
+    );
+}
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
new file mode 100644
index 00000000..20bda705
--- /dev/null
+++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
@@ -0,0 +1,10 @@
+import { DetailsHTMLAttributes } from 'react';
+
+export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    itemImage?: string;
+    itemActive?: boolean;
+    itemCount?: number;
+    itemUnique?: boolean;
+    itemUniqueNumber?: number;
+}
diff --git a/src/views/inventory/InventoryView.tsx b/src/views/inventory/InventoryView.tsx
index 04f65231..a0905bc4 100644
--- a/src/views/inventory/InventoryView.tsx
+++ b/src/views/inventory/InventoryView.tsx
@@ -103,18 +103,23 @@ export const InventoryView: FC<InventoryViewProps> = props =>
         }
     }, []);
 
+    useEffect(() =>
+    {
+        if(!furnitureState.tradeData) return;
+
+        setIsVisible(true);
+    }, [ furnitureState.tradeData ]);
+
     useEffect(() =>
     {
         if(!isVisible)
         {
             if(furnitureState.tradeData)
             {
-                setIsVisible(true);
-
-                if(currentTab !== InventoryTabs.FURNITURE) setCurrentTab(InventoryTabs.FURNITURE);
+                // cancel the trade
             }
         }
-    }, [ furnitureState.tradeData, isVisible, currentTab ]);
+    }, [ furnitureState.tradeData, isVisible ]);
 
     return (
         <InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
@@ -122,27 +127,33 @@ export const InventoryView: FC<InventoryViewProps> = props =>
             { isVisible &&
                 <NitroCardView className="nitro-inventory">
                     <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardTabsView>
-                        { tabs.map((name, index) =>
-                            {
-                                return (
-                                    <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) }>
-                                        { LocalizeText(name) }
-                                    </NitroCardTabsItemView>
-                                );
-                            }) }
-                    </NitroCardTabsView>
-                    <NitroCardContentView>
-                        { (currentTab === InventoryTabs.FURNITURE ) &&
-                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === InventoryTabs.BOTS ) &&
-                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === InventoryTabs.PETS ) && 
-                            <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === InventoryTabs.BADGES ) && 
-                            <InventoryBadgeView /> }
-                        { furnitureState.tradeData && <InventoryTradeView isInFurnitureView={ (currentTab === InventoryTabs.FURNITURE ) } /> }
-                    </NitroCardContentView>
+                    { !furnitureState.tradeData &&
+                        <>
+                            <NitroCardTabsView>
+                                { tabs.map((name, index) =>
+                                    {
+                                        return (
+                                            <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) }>
+                                                { LocalizeText(name) }
+                                            </NitroCardTabsItemView>
+                                        );
+                                    }) }
+                            </NitroCardTabsView>
+                            <NitroCardContentView>
+                                { (currentTab === InventoryTabs.FURNITURE ) &&
+                                    <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                                { (currentTab === InventoryTabs.BOTS ) &&
+                                    <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                                { (currentTab === InventoryTabs.PETS ) && 
+                                    <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                                { (currentTab === InventoryTabs.BADGES ) && 
+                                    <InventoryBadgeView /> }
+                            </NitroCardContentView>
+                        </> }
+                    { furnitureState.tradeData &&
+                        <NitroCardContentView>
+                            <InventoryTradeView />
+                        </NitroCardContentView> }
                 </NitroCardView> }
         </InventoryContextProvider>
     );
diff --git a/src/views/inventory/InventoryView.types.ts b/src/views/inventory/InventoryView.types.ts
index ea815348..ee6e9307 100644
--- a/src/views/inventory/InventoryView.types.ts
+++ b/src/views/inventory/InventoryView.types.ts
@@ -3,8 +3,8 @@ export interface InventoryViewProps
 
 export class InventoryTabs
 {
-    public static readonly FURNITURE: string    = 'inventory.furni';
-    public static readonly BOTS: string         = 'inventory.bots';
-    public static readonly PETS: string         = 'inventory.furni.tab.pets';
-    public static readonly BADGES: string       = 'inventory.badges';
+    public static readonly FURNITURE: string = 'inventory.furni';
+    public static readonly BOTS: string = 'inventory.bots';
+    public static readonly PETS: string = 'inventory.furni.tab.pets';
+    public static readonly BADGES: string = 'inventory.badges';
 }
diff --git a/src/views/inventory/reducers/InventoryFurnitureReducer.tsx b/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
index 51b380c6..cb4dbb1e 100644
--- a/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
+++ b/src/views/inventory/reducers/InventoryFurnitureReducer.tsx
@@ -261,7 +261,6 @@ export const InventoryFurnitureReducer: Reducer<IInventoryFurnitureState, IInven
                 }
 
                 for(const groupItem of groupItems) groupItem.lockItemIds(tradeIds);
-
             }
 
             return { ...state, groupItems, tradeData };
diff --git a/src/views/inventory/views/InventoryViews.scss b/src/views/inventory/views/InventoryViews.scss
index 448ac0c5..cd28a3b0 100644
--- a/src/views/inventory/views/InventoryViews.scss
+++ b/src/views/inventory/views/InventoryViews.scss
@@ -1,4 +1,2 @@
 @import './badge/InventoryBadgeView';
-@import './bot/InventoryBotView';
 @import './furniture/InventoryFurnitureView';
-@import './pet/InventoryPetView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.scss b/src/views/inventory/views/badge/InventoryBadgeView.scss
index 2631fabf..7285ce2f 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.scss
+++ b/src/views/inventory/views/badge/InventoryBadgeView.scss
@@ -5,5 +5,9 @@
         height: 45px;
     }
 }
+
+.inventory-badge-overflow {
+    height: calc(100% - 86px);
+}
+
 @import './item/InventoryBadgeItemView';
-@import './results/InventoryBadgeResultsView';
diff --git a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss
deleted file mode 100644
index 1abb450d..00000000
--- a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.badge-item-container {
-}
diff --git a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
index 75f3785d..1a62e50a 100644
--- a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
+++ b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
 import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView';
 import { InventoryActiveBadgeResultsViewProps } from './InventoryActiveBadgeResultsView.types';
 
@@ -7,11 +8,11 @@ export const InventoryActiveBadgeResultsView: FC<InventoryActiveBadgeResultsView
     const { badges = [] } = props;
     
     return (
-        <div className="row row-cols-3 align-content-start g-0">
+        <NitroCardGridView columns={ 3 }>
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     return <InventoryBadgeItemView key={ code } badge={ code } />
                 }) }
-        </div>
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx b/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
index 1b9248b8..fc221a7d 100644
--- a/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
+++ b/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
@@ -1,5 +1,6 @@
 import { MouseEventType } from 'nitro-renderer';
 import { FC, MouseEvent, useCallback } from 'react';
+import { NitroCardGridItemView } from '../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { BadgeImageView } from '../../../../shared/badge-image/BadgeImageView';
 import { useInventoryContext } from '../../../context/InventoryContext';
 import { InventoryBadgeActions } from '../../../reducers/InventoryBadgeReducer';
@@ -24,10 +25,8 @@ export const InventoryBadgeItemView: FC<InventoryBadgeItemViewProps> = props =>
     }, [ badge, dispatchBadgeState ]);
 
     return (
-        <div className="col pe-1 pb-1 inventory-badge-item-container">
-            <div className={ 'position-relative border border-2 rounded inventory-badge-item cursor-pointer ' + (isActive ? 'active' : '') } onMouseDown={ onMouseEvent }>
-                <BadgeImageView badgeCode={ badge } />
-            </div>
-        </div>
+        <NitroCardGridItemView itemActive={ isActive }>
+            <BadgeImageView badgeCode={ badge } />
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
deleted file mode 100644
index e9a6e5ee..00000000
--- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.badge-item-container {
-    height: 139px;
-    max-height: 139px;
-    overflow-y: auto;
-}
-
-.inventory-badge-overflow {
-    height:calc(100% - 86px)
-}
diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
index 66215373..5473e2b0 100644
--- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
+++ b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
 import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView';
 import { InventoryBadgeResultsViewProps } from './InventoryBadgeResultsView.types';
 
@@ -7,15 +8,13 @@ export const InventoryBadgeResultsView: FC<InventoryBadgeResultsViewProps> = pro
     const { badges = [], activeBadges = [] } = props;
     
     return (
-        <div className="h-100 overflow-hidden">
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
+        <NitroCardGridView>
             { badges && (badges.length > 0) && badges.map(code =>
-                    {
-                        if(activeBadges.indexOf(code) >= 0) return null;
-                        
-                        return <InventoryBadgeItemView key={ code } badge={ code } />
-                    }) }
-            </div>
-        </div>
+                {
+                    if(activeBadges.indexOf(code) >= 0) return null;
+                    
+                    return <InventoryBadgeItemView key={ code } badge={ code } />
+                }) }
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/bot/InventoryBotView.scss b/src/views/inventory/views/bot/InventoryBotView.scss
deleted file mode 100644
index d82c5a47..00000000
--- a/src/views/inventory/views/bot/InventoryBotView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './item/InventoryBotItemView';
-@import './results/InventoryBotResultsView';
diff --git a/src/views/inventory/views/bot/item/InventoryBotItemView.scss b/src/views/inventory/views/bot/item/InventoryBotItemView.scss
deleted file mode 100644
index 5de8916d..00000000
--- a/src/views/inventory/views/bot/item/InventoryBotItemView.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.inventory-bot-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-bot-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-
-        .avatar-image {
-            width: 100% !important;
-            height: 100% !important;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: -32px !important;
-        }
-    }
-}
diff --git a/src/views/inventory/views/bot/item/InventoryBotItemView.tsx b/src/views/inventory/views/bot/item/InventoryBotItemView.tsx
index a08151cf..404deaf2 100644
--- a/src/views/inventory/views/bot/item/InventoryBotItemView.tsx
+++ b/src/views/inventory/views/bot/item/InventoryBotItemView.tsx
@@ -1,5 +1,6 @@
 import { MouseEventType } from 'nitro-renderer';
 import { FC, MouseEvent, useCallback, useState } from 'react';
+import { NitroCardGridItemView } from '../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { attemptBotPlacement } from '../../../common/BotUtilities';
 import { useInventoryContext } from '../../../context/InventoryContext';
@@ -37,10 +38,8 @@ export const InventoryBotItemView: FC<InventoryBotItemViewProps> = props =>
     }, [ isActive, isMouseDown, botItem, dispatchBotState ]);
 
     return (
-        <div className="col pe-1 pb-1 inventory-bot-item-container">
-            <div className={ 'position-relative border border-2 rounded inventory-bot-item cursor-pointer ' + (isActive ? 'active' : '') } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-                <AvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
-            </div>
-        </div>
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
+            <AvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/inventory/views/bot/results/InventoryBotResultsView.scss b/src/views/inventory/views/bot/results/InventoryBotResultsView.scss
deleted file mode 100644
index 097c92d8..00000000
--- a/src/views/inventory/views/bot/results/InventoryBotResultsView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.bot-item-container {
-    height: 220px;
-    max-height: 220px;
-    overflow-y: auto;
-}
diff --git a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx b/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
index 477c7bb4..fc2763ce 100644
--- a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
+++ b/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
 import { InventoryBotItemView } from '../item/InventoryBotItemView';
 import { InventoryBotResultsViewProps } from './InventoryBotResultsView.types';
 
@@ -7,13 +8,11 @@ export const InventoryBotResultsView: FC<InventoryBotResultsViewProps> = props =
     const { botItems = [] } = props;
     
     return (
-        <div className="h-100 overflow-hidden">
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
+        <NitroCardGridView>
             { botItems && (botItems.length > 0) && botItems.map(item =>
-                    {
-                        return <InventoryBotItemView key={ item.id } botItem={ item } />
-                    }) }
-            </div>
-        </div>
+                {
+                    return <InventoryBotItemView key={ item.id } botItem={ item } />
+                }) }
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.scss b/src/views/inventory/views/furniture/InventoryFurnitureView.scss
index 19515f7a..f56fa741 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.scss
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.scss
@@ -3,7 +3,3 @@
     top: 5px;
     right: 15px;
 }
-
-@import './item/InventoryFurnitureItemView';
-@import './results/InventoryFurnitureResultsView';
-@import './search/InventoryFurnitureSearchView';
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 89cb22ac..99f0693e 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -1,129 +1,26 @@
-import { FurnitureListComposer, IObjectData, RoomObjectVariable, TradingListAddItemComposer, TradingListAddItemsComposer, Vector3d } from 'nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetConnection, GetRoomEngine } from '../../../../api';
-import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { GetRoomEngine } from '../../../../api';
+import { SendMessageHook } from '../../../../hooks/messages';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { FurniCategory } from '../../common/FurniCategory';
 import { attemptItemPlacement } from '../../common/FurnitureUtilities';
 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';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
 
-const MAX_ITEMS_TO_TRADE: number = 3;
-
 export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 {
     const { roomSession = null, roomPreviewer = null } = props;
     const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext();
-    const { needsFurniUpdate = false, groupItem = null, groupItems = [], tradeData = null } = furnitureState;
+    const { needsFurniUpdate = false, groupItem = null, groupItems = [] } = furnitureState;
     const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(groupItems);
 
-    const isTrading = useMemo(() =>
-    {
-        if(!tradeData) return false;
-        
-        return (tradeData.state >= TradeState.TRADING_STATE_RUNNING);
-    }, [ tradeData ]);
-
-    const canTradeItem = useCallback((isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
-    {
-        if(!tradeData || !tradeData.ownUser || tradeData.ownUser.accepts || !tradeData.ownUser.items) return false;
-
-        if(tradeData.ownUser.items.length < MAX_ITEMS_TO_TRADE) return true;
-
-        if(!groupable) return false;
-
-        let type = spriteId.toString();
-
-        if(category === FurniCategory._Str_5186)
-        {
-            type = ((type + 'poster') + stuffData.getLegacyString());
-        }
-        else
-        {
-            if(category === FurniCategory._Str_12454)
-            {
-                type = _Str_16998(spriteId, stuffData);
-            }
-            else
-            {
-                type = (((isWallItem) ? 'I' : 'S') + type);
-            }
-        }
-
-        return !!tradeData.ownUser.items.getValue(type);
-    }, [ tradeData ]);
-
-    const attemptItemOffer = useCallback((count: number) =>
-    {
-        if(!tradeData || !groupItem || !isTrading) return;
-
-        const tradeItems = groupItem.getTradeItems(count);
-
-        if(!tradeItems || !tradeItems.length) return;
-
-        let coreItem: IFurnitureItem = null;
-        const itemIds: number[] = [];
-
-        for(const item of tradeItems)
-        {
-            itemIds.push(item.id);
-
-            if(!coreItem) coreItem = item;
-        }
-
-        const tradedIds: number[] = [];
-
-        if(isTrading)
-        {
-            const ownItemCount = tradeData.ownUser.items.length;
-
-            if((ownItemCount + itemIds.length) <= 1500)
-            {
-                if(!coreItem.isGroupable && (itemIds.length))
-                {
-                    GetConnection().send(new TradingListAddItemComposer(itemIds.pop()));
-                }
-                else
-                {
-                    const tradeIds: number[] = [];
-
-                    for(const itemId of itemIds)
-                    {
-                        if(canTradeItem(coreItem.isWallItem, coreItem.type, coreItem.category, coreItem.isGroupable, coreItem.stuffData))
-                        {
-                            tradedIds.push(itemId);
-                        }
-                    }
-
-                    if(tradedIds.length)
-                    {
-                        if(tradedIds.length === 1)
-                        {
-                            GetConnection().send(new TradingListAddItemComposer(tradedIds.pop()));
-                        }
-                        else
-                        {
-                            GetConnection().send(new TradingListAddItemsComposer(...tradedIds));
-                        }
-                    }
-                }
-            }
-            else
-            {
-                //this._notificationService.alert('${trading.items.too_many_items.desc}', '${trading.items.too_many_items.title}');
-            }
-        }
-    }, [ canTradeItem, groupItem, isTrading, tradeData ]);
-
     useEffect(() =>
     {
         if(needsFurniUpdate)
@@ -233,10 +130,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 { groupItem &&
                     <div className="d-flex flex-column flex-grow-1">
                         <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
-                        { !!roomSession && !isTrading &&
+                        { !!roomSession &&
                             <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                        { isTrading &&
-                            <button type="button" className="btn btn-primary btn-sm" onClick={ event => attemptItemOffer(1) }>{ LocalizeText('inventory.trading.offer') }</button> }
                     </div> }
             </div>
         </div>
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss
deleted file mode 100644
index 824e17ce..00000000
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.inventory-furniture-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-furniture-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color  !important;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color !important;
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-    }
-}
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
index 5079f367..657ea66c 100644
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
+++ b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
@@ -1,6 +1,6 @@
 import { MouseEventType } from 'nitro-renderer';
 import { FC, MouseEvent, useCallback, useState } from 'react';
-import { LimitedEditionStyledNumberView } from '../../../../shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
+import { NitroCardGridItemView } from '../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { attemptItemPlacement } from '../../../common/FurnitureUtilities';
 import { useInventoryContext } from '../../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../../reducers/InventoryFurnitureReducer';
@@ -37,18 +37,7 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
         }
     }, [ isActive, isMouseDown, groupItem, dispatchFurnitureState ]);
 
-    const imageUrl = `url(${ groupItem.iconUrl })`;
+    const count = groupItem.getUnlockedCount();
 
-    return (
-        <div className="col pe-1 pb-1 inventory-furniture-item-container">
-            <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') + (!groupItem.getUnlockedCount() ? 'opacity-0-5 ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-                {groupItem.getUnlockedCount() > 1 &&
-                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{groupItem.getUnlockedCount()}</span> }
-                { groupItem.stuffData.isUnique && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />
-                    </div> }
-            </div>
-        </div>
-    );
+    return <NitroCardGridItemView className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ count } itemActive={ isActive } itemUnique={ groupItem.stuffData.isUnique } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />;
 }
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss
deleted file mode 100644
index 2d4f3402..00000000
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.furni-item-container {
-}
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
index 9df3889c..0464eb55 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
@@ -1,19 +1,18 @@
 import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
 import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
 import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
 
 export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProps> = props =>
 {
-    const { groupItems = [] } = props;
+    const { groupItems = [], columns = 5 } = props;
 
     return (
-        <div className="h-100 overflow-hidden">
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-                { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
-                    {
-                        return <InventoryFurnitureItemView key={ index } groupItem={ item } />
-                    }) }
-            </div>
-        </div>
+        <NitroCardGridView columns={ columns }>
+            { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
+                {
+                    return <InventoryFurnitureItemView key={ index } groupItem={ item } />
+                }) }
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
index a0bc56bd..9ee28fe5 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
@@ -3,4 +3,5 @@ import { GroupItem } from '../../../common/GroupItem';
 export interface InventoryFurnitureResultsViewProps
 {
     groupItems: GroupItem[];
+    columns?: number;
 }
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.scss b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
index e8d4f05c..841999b2 100644
--- a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
+++ b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
@@ -15,7 +15,7 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
         {
             const comparison = searchValue.toLocaleLowerCase();
 
-            filteredGroupItems = filteredGroupItems.filter(item =>
+            filteredGroupItems = groupItems.filter(item =>
                 {
                     if(comparison && comparison.length)
                     {
diff --git a/src/views/inventory/views/pet/InventoryPetView.scss b/src/views/inventory/views/pet/InventoryPetView.scss
deleted file mode 100644
index 7afd161a..00000000
--- a/src/views/inventory/views/pet/InventoryPetView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './item/InventoryPetItemView';
-@import './results/InventoryPetResultsView';
diff --git a/src/views/inventory/views/pet/item/InventoryPetItemView.scss b/src/views/inventory/views/pet/item/InventoryPetItemView.scss
deleted file mode 100644
index 17156c99..00000000
--- a/src/views/inventory/views/pet/item/InventoryPetItemView.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.inventory-pet-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-pet-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color!important;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/inventory/views/pet/item/InventoryPetItemView.tsx b/src/views/inventory/views/pet/item/InventoryPetItemView.tsx
index cd99c6bc..d9a56dda 100644
--- a/src/views/inventory/views/pet/item/InventoryPetItemView.tsx
+++ b/src/views/inventory/views/pet/item/InventoryPetItemView.tsx
@@ -1,5 +1,6 @@
 import { MouseEventType } from 'nitro-renderer';
 import { FC, MouseEvent, useCallback, useState } from 'react';
+import { NitroCardGridItemView } from '../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { PetImageView } from '../../../../shared/pet-image/PetImageView';
 import { attemptPetPlacement } from '../../../common/PetUtilities';
 import { useInventoryContext } from '../../../context/InventoryContext';
@@ -37,10 +38,8 @@ export const InventoryPetItemView: FC<InventoryPetItemViewProps> = props =>
     }, [ isActive, isMouseDown, petItem, dispatchPetState ]);
 
     return (
-        <div className="col pe-1 pb-1 inventory-pet-item-container">
-            <div className={ 'position-relative border border-2 rounded inventory-pet-item cursor-pointer ' + (isActive ? 'active' : '') } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-                <PetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
-            </div>
-        </div>
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
+            <PetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/inventory/views/pet/results/InventoryPetResultsView.scss b/src/views/inventory/views/pet/results/InventoryPetResultsView.scss
deleted file mode 100644
index f5a48826..00000000
--- a/src/views/inventory/views/pet/results/InventoryPetResultsView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.pet-item-container {
-    height: 220px;
-    max-height: 220px;
-    overflow-y: auto;
-}
diff --git a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx b/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
index 21e99114..fb7fae4f 100644
--- a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
+++ b/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
 import { InventoryPetItemView } from '../item/InventoryPetItemView';
 import { InventoryPetResultsViewProps } from './InventoryPetResultsView.types';
 
@@ -7,13 +8,11 @@ export const InventoryPetResultsView: FC<InventoryPetResultsViewProps> = props =
     const { petItems = [] } = props;
     
     return (
-        <div className="h-100 overflow-hidden">
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
+        <NitroCardGridView>
             { petItems && (petItems.length > 0) && petItems.map(item =>
-                    {
-                        return <InventoryPetItemView key={ item.id } petItem={ item } />
-                    }) }
-            </div>
-        </div>
+                {
+                    return <InventoryPetItemView key={ item.id } petItem={ item } />
+                }) }
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index 88fe8f7f..212ca779 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -1,36 +1,203 @@
-import { FC } from 'react';
+import { FurnitureListComposer, IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
+import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { LocalizeText } from '../../../../utils/LocalizeText';
+import { FurniCategory } from '../../common/FurniCategory';
+import { GroupItem } from '../../common/GroupItem';
+import { IFurnitureItem } from '../../common/IFurnitureItem';
+import { _Str_16998 } from '../../common/TradingUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
+import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
+import { InventoryFurnitureSearchView } from '../furniture/search/InventoryFurnitureSearchView';
 import { InventoryTradeViewProps } from './InventoryTradeView.types';
-import { InventoryTradeItemView } from './item/InventoryTradeItemView';
 
-const MAX_ITEMS_COUNT: number = 9;
+const MAX_ITEMS_TO_TRADE: number = 9;
 
 export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 {
-    const { isInFurnitureView = false } = props;
-    const { furnitureState = null } = useInventoryContext();
-    const { tradeData = null } = furnitureState;
+    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) =>
+    {
+        if(!tradeData || !tradeData.ownUser || tradeData.ownUser.accepts || !tradeData.ownUser.items) return false;
+
+        if(tradeData.ownUser.items.length < MAX_ITEMS_TO_TRADE) return true;
+
+        if(!groupable) return false;
+
+        let type = spriteId.toString();
+
+        if(category === FurniCategory._Str_5186)
+        {
+            type = ((type + 'poster') + stuffData.getLegacyString());
+        }
+        else
+        {
+            if(category === FurniCategory._Str_12454)
+            {
+                type = _Str_16998(spriteId, stuffData);
+            }
+            else
+            {
+                type = (((isWallItem) ? 'I' : 'S') + type);
+            }
+        }
+
+        return !!tradeData.ownUser.items.getValue(type);
+    }, [ tradeData ]);
+
+    const attemptItemOffer = useCallback((count: number) =>
+    {
+        if(!tradeData || !groupItem) return;
+
+        const tradeItems = groupItem.getTradeItems(count);
+
+        if(!tradeItems || !tradeItems.length) return;
+
+        let coreItem: IFurnitureItem = null;
+        const itemIds: number[] = [];
+
+        for(const item of tradeItems)
+        {
+            itemIds.push(item.id);
+
+            if(!coreItem) coreItem = item;
+        }
+
+        const ownItemCount = tradeData.ownUser.items.length;
+
+        if((ownItemCount + itemIds.length) <= 1500)
+        {
+            if(!coreItem.isGroupable && (itemIds.length))
+            {
+                SendMessageHook(new TradingListAddItemComposer(itemIds.pop()));
+            }
+            else
+            {
+                const tradeIds: number[] = [];
+
+                for(const itemId of itemIds)
+                {
+                    if(canTradeItem(coreItem.isWallItem, coreItem.type, coreItem.category, coreItem.isGroupable, coreItem.stuffData))
+                    {
+                        tradeIds.push(itemId);
+                    }
+                }
+
+                if(tradeIds.length)
+                {
+                    if(tradeIds.length === 1)
+                    {
+                        SendMessageHook(new TradingListAddItemComposer(tradeIds.pop()));
+                    }
+                    else
+                    {
+                        SendMessageHook(new TradingListAddItemsComposer(...tradeIds));
+                    }
+                }
+            }
+        }
+        else
+        {
+            //this._notificationService.alert('${trading.items.too_many_items.desc}', '${trading.items.too_many_items.title}');
+        }
+    }, [ groupItem, tradeData, canTradeItem ]);
+
+    const removeItem = useCallback((group: GroupItem) =>
+    {
+        const item = group.getLastItem();
+
+        if(!item) return;
+
+        SendMessageHook(new TradingListItemRemoveComposer(item.id));
+    }, []);
+
+    useEffect(() =>
+    {
+        if(needsFurniUpdate)
+        {
+            dispatchFurnitureState({
+                type: InventoryFurnitureActions.SET_NEEDS_UPDATE,
+                payload: {
+                    flag: false
+                }
+            });
+
+            SendMessageHook(new FurnitureListComposer());
+        }
+        else
+        {
+            setFilteredGroupItems(groupItems);
+        }
+
+    }, [ needsFurniUpdate, groupItems, dispatchFurnitureState ]);
 
     return (
-        <div className="row h-100 mt-2">
-            <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>
-                <div className="row row-cols-3 align-content-start g-0 w-100 h-100">
-                    { Array.from(Array(MAX_ITEMS_COUNT), (e, i) =>
-                    {
-                        return <InventoryTradeItemView key={ i } groupItem={ (tradeData.ownUser.items.getWithIndex(i) || null) } />;
-                    }) }
-                </div>
+        <div className="row h-100">
+            <div className="d-flex flex-column col-4 h-100">
+                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
+                <NitroCardGridView columns={ 3 }>
+                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
+                        {
+                            const count = item.getUnlockedCount();
+
+                            return (
+                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
+                                    { ((count > 0) && (groupItem === item)) &&
+                                        <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
+                                            <i className="fas fa-chevron-right" />
+                                        </button> }
+                                </NitroCardGridItemView>
+                            );
+                        }) }
+                </NitroCardGridView>
             </div>
-            <div className="d-flex flex-column col-6">
+            <div className="d-flex flex-column col-4">
+                <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ LocalizeText('inventory.trading.you') }</div>
+                <NitroCardGridView columns={ 3 }>
+                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                        {
+                            const item = (tradeData.ownUser.items.getWithIndex(i) || null);
+
+                            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) }>
+                                    { (item === selectedGroupItem) &&
+                                        <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
+                                            <i className="fas fa-chevron-left" />
+                                        </button> }
+                                </NitroCardGridItemView>
+                            );
+                        }) }
+                </NitroCardGridView>
+            </div>
+            <div className="d-flex flex-column col-4">
                 <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ tradeData.otherUser.userName }</div>
-                <div className="row row-cols-3 align-content-start g-0 w-100 h-100">
-                    { Array.from(Array(MAX_ITEMS_COUNT), (e, i) =>
-                    {
-                        return <InventoryTradeItemView key={ i } groupItem={ (tradeData.otherUser.items.getWithIndex(i) || null) } />;
-                    }) }
-                </div>
+                <NitroCardGridView columns={ 3 }>
+                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                        {
+                            const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+
+                            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) } />;
+                        }) }
+                </NitroCardGridView>
+            </div>
+            <div className="d-flex col-8 offset-4">
+                plz
             </div>
         </div>
     );
diff --git a/src/views/inventory/views/trade/InventoryTradeView.types.ts b/src/views/inventory/views/trade/InventoryTradeView.types.ts
index aa863e89..ee344ff2 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.types.ts
+++ b/src/views/inventory/views/trade/InventoryTradeView.types.ts
@@ -1,4 +1,3 @@
 export interface InventoryTradeViewProps
 {
-    isInFurnitureView: boolean;
 }
diff --git a/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx b/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
deleted file mode 100644
index 75627b04..00000000
--- a/src/views/inventory/views/trade/item/InventoryTradeItemView.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LimitedEditionStyledNumberView } from '../../../../shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
-import { InventoryTradeItemViewProps } from './InventoryTradeItemView.types';
-
-export const InventoryTradeItemView: FC<InventoryTradeItemViewProps> = props =>
-{
-    const { groupItem = null } = props;
-
-    const onClick = useCallback(() =>
-    {
-
-    }, []);
-
-    if(!groupItem)
-    {
-        return (
-            <div className="col pe-1 pb-1 inventory-furniture-item-container">
-                <div className="position-relative border border-2 rounded inventory-furniture-item cursor-pointer" />
-            </div>
-        );
-    }
-
-    const imageUrl = `url(${ groupItem.iconUrl })`;
-
-    return (
-        <div className="col pe-1 pb-1 inventory-furniture-item-container">
-            <div className="position-relative border border-2 rounded inventory-furniture-item cursor-pointer" style={ { backgroundImage: imageUrl }} onClick={ onClick }>
-                { groupItem.getUnlockedCount() > 1 &&
-                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ groupItem.getUnlockedCount() }</span> }
-                { groupItem.stuffData.isUnique && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />
-                    </div> }
-            </div>
-        </div>
-    );
-}
diff --git a/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts b/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts
deleted file mode 100644
index 29740d21..00000000
--- a/src/views/inventory/views/trade/item/InventoryTradeItemView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { GroupItem } from '../../../common/GroupItem';
-
-export interface InventoryTradeItemViewProps
-{
-    groupItem: GroupItem;
-}

From c9b7fcd841cfa4d853c27f0aa1846514ab6671e9 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 6 Jul 2021 22:36:10 -0400
Subject: [PATCH 05/10] Fix badges

---
 src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx b/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
index fc221a7d..61b15095 100644
--- a/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
+++ b/src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx
@@ -25,7 +25,7 @@ export const InventoryBadgeItemView: FC<InventoryBadgeItemViewProps> = props =>
     }, [ badge, dispatchBadgeState ]);
 
     return (
-        <NitroCardGridItemView itemActive={ isActive }>
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent }> 
             <BadgeImageView badgeCode={ badge } />
         </NitroCardGridItemView>
     );

From eac77940911d1b71b756c30ae4830bedde67d934 Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Tue, 6 Jul 2021 22:39:28 -0400
Subject: [PATCH 06/10] bills busted fixes :tm:

---
 .../views/badge/InventoryBadgeView.scss       |  2 +-
 .../views/trade/InventoryTradeView.tsx        | 64 ++++++++++---------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/views/inventory/views/badge/InventoryBadgeView.scss b/src/views/inventory/views/badge/InventoryBadgeView.scss
index 7285ce2f..fc975ace 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.scss
+++ b/src/views/inventory/views/badge/InventoryBadgeView.scss
@@ -7,7 +7,7 @@
 }
 
 .inventory-badge-overflow {
-    height: calc(100% - 86px);
+    height: calc(100% - 91px);
 }
 
 @import './item/InventoryBadgeItemView';
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index 212ca779..b95716ab 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -163,41 +163,43 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                         }) }
                 </NitroCardGridView>
             </div>
-            <div className="d-flex flex-column col-4">
-                <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ LocalizeText('inventory.trading.you') }</div>
-                <NitroCardGridView columns={ 3 }>
-                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                        {
-                            const item = (tradeData.ownUser.items.getWithIndex(i) || null);
+            <div className="col-8 row mx-0">
+                <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>
+                    <NitroCardGridView columns={ 3 }>
+                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                            {
+                                const item = (tradeData.ownUser.items.getWithIndex(i) || null);
 
-                            if(!item) return <NitroCardGridItemView key={ i } />;
+                                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) }>
-                                    { (item === selectedGroupItem) &&
-                                        <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
-                                            <i className="fas fa-chevron-left" />
-                                        </button> }
-                                </NitroCardGridItemView>
-                            );
-                        }) }
-                </NitroCardGridView>
-            </div>
-            <div className="d-flex flex-column col-4">
-                <div className="badge bg-primary w-100 p-1 mb-1 me-1">{ tradeData.otherUser.userName }</div>
-                <NitroCardGridView columns={ 3 }>
-                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                        {
-                            const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+                                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) }>
+                                        { (item === selectedGroupItem) &&
+                                            <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
+                                                <i className="fas fa-chevron-left" />
+                                            </button> }
+                                    </NitroCardGridItemView>
+                                );
+                            }) }
+                    </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>
+                    <NitroCardGridView columns={ 3 }>
+                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                            {
+                                const item = (tradeData.otherUser.items.getWithIndex(i) || null);
 
-                            if(!item) return <NitroCardGridItemView key={ i } />;
+                                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) } />;
-                        }) }
-                </NitroCardGridView>
-            </div>
-            <div className="d-flex col-8 offset-4">
-                plz
+                                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) } />;
+                            }) }
+                    </NitroCardGridView>
+                </div>
+                <div className="d-flex col-12 bg-muted">
+                    plz
+                </div>
             </div>
         </div>
     );

From f6194e7f137fe25184df49c8771adc1d2d55dd99 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 7 Jul 2021 03:56:11 -0400
Subject: [PATCH 07/10] Add friend name bubbles

---
 .../friend-list/FriendEnteredRoomEvent.ts     |  11 ++
 src/events/friend-list/index.ts               |   1 +
 src/views/friend-list/FriendListView.tsx      |  32 +++++-
 .../room/events/RoomWidgetObjectNameEvent.ts  |   4 +-
 .../handlers/RoomWidgetInfostandHandler.ts    |   2 +-
 .../avatar-info/AvatarInfoWidgetView.tsx      | 104 ++++++++++++------
 6 files changed, 112 insertions(+), 42 deletions(-)
 create mode 100644 src/events/friend-list/FriendEnteredRoomEvent.ts

diff --git a/src/events/friend-list/FriendEnteredRoomEvent.ts b/src/events/friend-list/FriendEnteredRoomEvent.ts
new file mode 100644
index 00000000..5a7755eb
--- /dev/null
+++ b/src/events/friend-list/FriendEnteredRoomEvent.ts
@@ -0,0 +1,11 @@
+import { RoomWidgetObjectNameEvent } from '../../views/room/events';
+
+export class FriendEnteredRoomEvent extends RoomWidgetObjectNameEvent
+{
+    public static ENTERED: string = 'FERE_ENTERED';
+
+    constructor(roomIndex: number, category: number, id: number, name: string, userType: number)
+    {
+        super(FriendEnteredRoomEvent.ENTERED, roomIndex, category, id, name, userType);
+    }
+}
diff --git a/src/events/friend-list/index.ts b/src/events/friend-list/index.ts
index 413293c4..4789fde9 100644
--- a/src/events/friend-list/index.ts
+++ b/src/events/friend-list/index.ts
@@ -1 +1,2 @@
+export * from './FriendEnteredRoomEvent';
 export * from './FriendListEvent';
diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx
index defd406c..a620c0ea 100644
--- a/src/views/friend-list/FriendListView.tsx
+++ b/src/views/friend-list/FriendListView.tsx
@@ -1,8 +1,10 @@
-import { MessengerInitComposer } from 'nitro-renderer';
+import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory } from 'nitro-renderer';
 import React, { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { FriendListEvent } from '../../events';
-import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { GetRoomSession } from '../../api';
+import { FriendEnteredRoomEvent, FriendListEvent } from '../../events';
+import { useRoomEngineEvent } from '../../hooks/events';
+import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
 import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { LocalizeText } from '../../utils/LocalizeText';
@@ -48,6 +50,30 @@ export const FriendListView: FC<FriendListViewProps> = props =>
         SendMessageHook(new MessengerInitComposer());
     }, []);
 
+    const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
+    {
+        const roomSession = GetRoomSession();
+
+        if(!roomSession) return;
+
+        if(event.category !== RoomObjectCategory.UNIT) return;
+        
+        const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
+
+        if(!userData) return;
+
+        const friend = friendListState.friends.find(friend =>
+            {
+                return (friend.id === userData.webID);
+            });
+
+        if(!friend) return;
+
+        dispatchUiEvent(new FriendEnteredRoomEvent(userData.roomIndex, RoomObjectCategory.UNIT, userData.webID, userData.name, userData.type));
+    }, [ friendListState.friends ]);
+
+    useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
+
     return (
         <FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
             <FriendListMessageHandler />
diff --git a/src/views/room/events/RoomWidgetObjectNameEvent.ts b/src/views/room/events/RoomWidgetObjectNameEvent.ts
index 2a3773e4..87fbe42f 100644
--- a/src/views/room/events/RoomWidgetObjectNameEvent.ts
+++ b/src/views/room/events/RoomWidgetObjectNameEvent.ts
@@ -10,9 +10,9 @@ export class RoomWidgetObjectNameEvent extends RoomWidgetUpdateEvent
     private _name: string;
     private _userType: number;
 
-    constructor(roomIndex: number, category: number, id: number, name: string, userType: number)
+    constructor(type: string, roomIndex: number, category: number, id: number, name: string, userType: number)
     {
-        super(RoomWidgetObjectNameEvent.TYPE);
+        super(type);
 
         this._roomIndex = roomIndex;
         this._category = category;
diff --git a/src/views/room/handlers/RoomWidgetInfostandHandler.ts b/src/views/room/handlers/RoomWidgetInfostandHandler.ts
index 9ad903bf..287c980c 100644
--- a/src/views/room/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/views/room/handlers/RoomWidgetInfostandHandler.ts
@@ -286,7 +286,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             }
         }
 
-        if(name) this.container.eventDispatcher.dispatchEvent(new RoomWidgetObjectNameEvent(message.id, message.category, id, name, userType));
+        if(name) this.container.eventDispatcher.dispatchEvent(new RoomWidgetObjectNameEvent(RoomWidgetObjectNameEvent.TYPE, message.id, message.category, id, name, userType));
 
         return null;
     }
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 7d06c1e3..34626ff8 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -1,6 +1,8 @@
 import { RoomEnterEffect, RoomObjectCategory } from 'nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { GetRoomSession, GetSessionDataManager } from '../../../../api';
+import { FriendEnteredRoomEvent } from '../../../../events';
+import { useUiEvent } from '../../../../hooks/events';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
 import { RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent } from '../../events';
@@ -19,12 +21,35 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
 {
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ name, setName ] = useState<RoomWidgetObjectNameEvent>(null);
+    const [ nameBubbles, setNameBubbles ] = useState<RoomWidgetObjectNameEvent[]>([]);
     const [ infoStandEvent, setInfoStandEvent ] = useState<RoomWidgetUpdateInfostandEvent>(null);
     const [ isGameMode, setGameMode ] = useState(false);
     const [ isDancing, setIsDancing ] = useState(false);
     const [ isDecorating, setIsDecorating ] = useState(GetRoomSession().isDecorating);
     const [ rentableBotChatEvent, setRentableBotChatEvent ] = useState<RoomWidgetUpdateRentableBotChatEvent>(null);
 
+    const removeNameBubble = useCallback((index: number) =>
+    {
+        setNameBubbles(prevValue =>
+            {
+                const newValue = [ ...prevValue ];
+
+                newValue.splice(index, 1);
+
+                return newValue;
+            });
+    }, []);
+
+    const clearInfoStandEvent = useCallback(() =>
+    {
+        setInfoStandEvent(null);
+    }, []);
+
+    const clearName = useCallback(() =>
+    {
+        setName(null);
+    }, []);
+
     const onRoomWidgetRoomEngineUpdateEvent = useCallback((event: RoomWidgetRoomEngineUpdateEvent) =>
     {
         switch(event.type)
@@ -50,6 +75,16 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
             if(event.id === name.id) setName(null);
         }
 
+        if(event.category === RoomObjectCategory.UNIT)
+        {
+            const nameBubbleIndex = nameBubbles.findIndex(bubble =>
+                {
+                    return (bubble.roomIndex === event.id);
+                });
+    
+            if(nameBubbleIndex > -1) removeNameBubble(nameBubbleIndex);
+        }
+
         if(infoStandEvent)
         {
             if(infoStandEvent instanceof RoomWidgetUpdateInfostandFurniEvent)
@@ -67,7 +102,7 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
                 if(infoStandEvent.roomIndex === event.id) setInfoStandEvent(null);
             }
         }
-    }, [ name, infoStandEvent ]);
+    }, [ name, infoStandEvent, nameBubbles, removeNameBubble ]);
 
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, eventDispatcher, onRoomObjectRemoved);
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomObjectRemoved);
@@ -104,8 +139,6 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
     {
         if(!infoStandEvent) return;
 
-        console.log('tru')
-
         setInfoStandEvent(null);
     }, [ infoStandEvent ]);
 
@@ -142,26 +175,6 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
 
     CreateEventDispatcherHook(RoomWidgetUpdateDanceStatusEvent.UPDATE_DANCE, eventDispatcher, onRoomWidgetUpdateDanceStatusEvent);
 
-    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
-    {
-        switch(event.type)
-        {
-            case RoomWidgetRoomObjectUpdateEvent.USER_ADDED: {
-                // bubble if friend
-
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED: {
-                // set if waiting for pet
-
-                return;
-            }
-        }
-    }, []);
-
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
-
     const onRoomWidgetUpdateRentableBotChatEvent = useCallback((event: RoomWidgetUpdateRentableBotChatEvent) =>
     {
         setRentableBotChatEvent(event);
@@ -169,6 +182,16 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
 
     CreateEventDispatcherHook(RoomWidgetUpdateRentableBotChatEvent.UPDATE_CHAT, eventDispatcher, onRoomWidgetUpdateRentableBotChatEvent);
 
+    const onFriendEnteredRoomEvent = useCallback((event: FriendEnteredRoomEvent) =>
+    {
+        setNameBubbles(prevValue =>
+            {
+                return [ ...prevValue, event  ];
+            })
+    }, []);
+
+    useUiEvent(FriendEnteredRoomEvent.ENTERED, onFriendEnteredRoomEvent);
+
     const decorateView = useMemo(() =>
     {
         GetRoomSession().isDecorating = isDecorating;
@@ -182,23 +205,23 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
         return <AvatarInfoWidgetDecorateView userId={ userId } userName={ userName } roomIndex={ roomIndex } setIsDecorating={ setIsDecorating } />;
     }, [ isDecorating ]);
 
-    const clearInfoStandEvent = useCallback(() =>
-    {
-        setInfoStandEvent(null);
-    }, []);
-
-    const clearName = useCallback(() =>
-    {
-        setName(null);
-    }, []);
-
     const currentView = useMemo(() =>
     {
         if(isGameMode) return null;
 
         if(decorateView) return decorateView;
 
-        if(name) return <AvatarInfoWidgetNameView nameData={ name } close={ clearName }  />;
+        if(name)
+        {
+            const nameBubbleIndex = nameBubbles.findIndex(bubble =>
+                {
+                    return (bubble.roomIndex === name.roomIndex);
+                });
+
+            if(nameBubbleIndex > -1) removeNameBubble(nameBubbleIndex);
+
+            return <AvatarInfoWidgetNameView nameData={ name } close={ clearName }  />;
+        }
 
         if(infoStandEvent)
         {
@@ -210,7 +233,12 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
 
                     if(event.isSpectatorMode) return null;
 
-                    // if existing name bubble remove it
+                    const nameBubbleIndex = nameBubbles.findIndex(bubble =>
+                        {
+                            return (bubble.roomIndex === event.roomIndex);
+                        });
+
+                    if(nameBubbleIndex > -1) removeNameBubble(nameBubbleIndex);
 
                     if(event.isOwnUser)
                     {
@@ -241,11 +269,15 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
         }
 
         return null;
-    }, [ isGameMode, decorateView, name, isDancing, infoStandEvent, clearName, clearInfoStandEvent ]);
+    }, [ isGameMode, decorateView, name, nameBubbles, isDancing, infoStandEvent, clearName, clearInfoStandEvent, removeNameBubble ]);
 
     return (
         <>
             { currentView }
+            { (nameBubbles.length > 0) && nameBubbles.map((name, index) =>
+                {
+                    return <AvatarInfoWidgetNameView nameData={ name } close={ () => removeNameBubble(index) }  />;
+                }) }
             { rentableBotChatEvent && <AvatarInfoRentableBotChatView chatEvent={ rentableBotChatEvent } /> }
         </>
     )

From a9eff4f0ae64ab0f8e0897e4b6fe396b6a37d6a8 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 7 Jul 2021 05:05:14 -0400
Subject: [PATCH 08/10] Fix index issue on friend bubbles

---
 src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 34626ff8..1514df9e 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -276,7 +276,7 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
             { currentView }
             { (nameBubbles.length > 0) && nameBubbles.map((name, index) =>
                 {
-                    return <AvatarInfoWidgetNameView nameData={ name } close={ () => removeNameBubble(index) }  />;
+                    return <AvatarInfoWidgetNameView key={ index } nameData={ name } close={ () => removeNameBubble(index) }  />;
                 }) }
             { rentableBotChatEvent && <AvatarInfoRentableBotChatView chatEvent={ rentableBotChatEvent } /> }
         </>

From 4cdd89c25b97e30e2bdd0f31dc36cc3adbea968f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 7 Jul 2021 05:05:27 -0400
Subject: [PATCH 09/10] Trading works

---
 .../inventory/InventoryMessageHandler.tsx     | 118 ++++++++++------
 src/views/inventory/InventoryView.tsx         |  55 +++++---
 .../furniture/InventoryFurnitureView.tsx      |   8 +-
 .../views/trade/InventoryTradeView.tsx        | 128 +++++++++++++++---
 .../views/trade/InventoryTradeView.types.ts   |   1 +
 5 files changed, 223 insertions(+), 87 deletions(-)

diff --git a/src/views/inventory/InventoryMessageHandler.tsx b/src/views/inventory/InventoryMessageHandler.tsx
index d28f0edf..e00fb7f4 100644
--- a/src/views/inventory/InventoryMessageHandler.tsx
+++ b/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 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 onTradingOpenFailedEvent = useCallback((event: TradingOpenFailedEvent) =>
     {
         const parser = event.getParser();
 
         console.log(parser);
+    }, []);
 
-        dispatchFurnitureState({
-            type: InventoryFurnitureActions.UPDATE_TRADE,
-            payload: {
-                tradeParser: event.getParser()
-            }
-        });
-    }, [ dispatchFurnitureState ]);
+    const onTradingOtherNotAllowedEvent = useCallback((event: TradingOtherNotAllowedEvent) =>
+    {
+        const parser = event.getParser();
+
+        console.log(parser);
+    }, []);
+
+    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;
 }
diff --git a/src/views/inventory/InventoryView.tsx b/src/views/inventory/InventoryView.tsx
index a0905bc4..8896d6b6 100644
--- a/src/views/inventory/InventoryView.tsx
+++ b/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)
-            {
-                // cancel the trade
-            }
+            if(furnitureState.tradeData) setIsVisible(true);
         }
     }, [ 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>
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 99f0693e..be45bc0b 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/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
-                //_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);
+                const data = GetSessionDataManager().getWallItemDataByName('noob_window_double');
+
+                if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
             }
         }
         else
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index b95716ab..d7c6ad83 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -1,5 +1,5 @@
-import { FurnitureListComposer, IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer } from 'nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from 'nitro-renderer';
+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) }>
-                                        { (item === selectedGroupItem) &&
+                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                        { (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">
-                    plz
+                <div className="d-flex col-12 justify-content-between align-items-end w-100">
+                    <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
+                    { getTradeButton }
                 </div>
             </div>
         </div>
diff --git a/src/views/inventory/views/trade/InventoryTradeView.types.ts b/src/views/inventory/views/trade/InventoryTradeView.types.ts
index ee344ff2..c71fe143 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.types.ts
+++ b/src/views/inventory/views/trade/InventoryTradeView.types.ts
@@ -1,3 +1,4 @@
 export interface InventoryTradeViewProps
 {
+    cancelTrade: () => void;
 }

From 7669d2bc9c9bab6f28acf20e2f98665f8aff60a8 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 7 Jul 2021 05:05:49 -0400
Subject: [PATCH 10/10] Catalog updates

---
 .../navigation/item/CatalogNavigationItemView.tsx  |  2 +-
 src/views/catalog/views/page/CatalogPageView.tsx   |  8 +++-----
 .../layout/spaces-new/CatalogLayoutSpacesView.tsx  | 14 ++++++--------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
index d1cdea58..4fcabb6b 100644
--- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
+++ b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
@@ -44,7 +44,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ page, setActiveChild ]);
     
     return (
-        <div className="col pe-1 pb-1 catalog-navigation-item-container">
+        <div className="col pb-1 catalog-navigation-item-container">
             <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ select }>
                 <CatalogIconView icon={ page.icon } />
                 <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
diff --git a/src/views/catalog/views/page/CatalogPageView.tsx b/src/views/catalog/views/page/CatalogPageView.tsx
index 3b127509..f87b48fa 100644
--- a/src/views/catalog/views/page/CatalogPageView.tsx
+++ b/src/views/catalog/views/page/CatalogPageView.tsx
@@ -87,12 +87,10 @@ export const CatalogPageView: FC<CatalogPageViewProps> = props =>
                             return;
                     }
 
-                    // const windowData = Nitro.instance.sessionDataManager.getWallItemDataByName('ads_twi_windw');
+                    const windowData = GetSessionDataManager().getWallItemDataByName('noob_window_double');
+
+                    if(windowData) roomPreviewer.addWallItemIntoRoom(windowData.id, new Vector3d(90, 0, 0), windowData.customParams);
 
-                    // if(windowData)
-                    // {
-                    //     this._roomPreviewer.addWallItemIntoRoom(windowData.id, new Vector3d(90), windowData.customParams)
-                    // }
                     return;
             }
         }
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
index 5b56f6a3..54ca82e5 100644
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
+++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
@@ -70,14 +70,12 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
 
     return (
         <div className="row h-100 nitro-catalog-layout-spaces">
-            <div className="col-7 h-100 d-flex flex-column">
-                <div className="d-flex">
-                    <div className="btn-group mx-auto mb-1 w-100">
-                        { groupNames.map((name, index) =>
-                            {
-                                return <button key={ index } type="button" className={ 'btn btn-primary btn-sm ' + ((activeGroupIndex === index) ? 'active ' : '' )} onClick={ event => setActiveGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</button>
-                            })}
-                    </div>
+            <div className="d-flex col-7 flex-column h-100 overflow-hidden">
+                <div className="btn-group mx-auto mb-1 w-100">
+                    { groupNames.map((name, index) =>
+                        {
+                            return <button key={ index } type="button" className={ 'btn btn-primary btn-sm ' + ((activeGroupIndex === index) ? 'active ' : '' )} onClick={ event => setActiveGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</button>
+                        })}
                 </div>
                 <CatalogPageOffersView offers={ groups[activeGroupIndex] } />
             </div>