Merge pull request #3 from billsonnn/@feature/trading

@feature/trading

src/assets/styles/scrollbars.scss

@@ -1,25 +1,21 @@
 ::-webkit-scrollbar {
-    width: 7px;
+    width: 0.5rem;
-    height: 5px;
 }
 
 ::-webkit-scrollbar-track {
-    border-radius: $border-radius;
+    background-clip: padding-box;
-    background: rgba($black,.1);
+    border-right: 0.25rem solid rgba($black, .1);
-    box-shadow:inset 0 0 1px 1px rgba($black,.1);
-    padding-top:3px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: $border-radius;
+    background-clip: padding-box;
-    background: rgba($primary,.4);
+    border-right: 0.25rem solid rgba($primary, .4);
-    width: 4px;
-}
 
-::-webkit-scrollbar-thumb:hover {
+    &:hover {
-    background: rgba($primary,.8);
+        border-right: 0.25rem solid rgba($primary, .8);
-}
+    }
 
-::-webkit-scrollbar-thumb:active {
+    &:active {
-    background: $secondary;
+        border-right: 0.25rem solid $secondary;
+    }
 }

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);
 }

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);
+    }
+}

src/events/friend-list/index.ts

@@ -1 +1,2 @@
+export * from './FriendEnteredRoomEvent';
 export * from './FriendListEvent';

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;
+    }
+}

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;
+    }
+}

src/events/inventory/index.ts

@@ -1 +1,3 @@
 export * from './InventoryEvent';
+export * from './InventoryTradeRequestEvent';
+export * from './InventoryTradeStartEvent';

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';
 }

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';
+}

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>
+    );
+}

src/layout/card/grid/NitroCardGridView.types.ts

@@ -0,0 +1,4 @@
+export interface NitroCardGridViewProps
+{
+    columns?: number;
+}

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;
+            }
+        }
+    }
+}

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>
+    );
+}

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;
+}

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>

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;
             }
         }

src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx

@@ -70,15 +70,13 @@ 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 col-7 flex-column h-100 overflow-hidden">
-                <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>
                 <CatalogPageOffersView offers={ groups[activeGroupIndex] } />
             </div>
             { !product &&

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 { GetRoomSession } from '../../api';
-import { useUiEvent } from '../../hooks/events/ui/ui-event';
+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 />

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" />

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, 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';
 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,137 @@ 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 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();
+
+        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 onTradingOpenFailedEvent = useCallback((event: TradingOpenFailedEvent) =>
+    {
+        const parser = event.getParser();
+
+        console.log(parser);
+    }, []);
+
+    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);
     CreateMessageHook(FurnitureListInvalidateEvent, onFurnitureListInvalidateEvent);
@@ -173,6 +306,16 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
     CreateMessageHook(PetRemovedFromInventory, onPetRemovedFromInventory);
     CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
     CreateMessageHook(BadgesEvent, onBadgesEvent);
+    CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
+    CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
+    CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
+    CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent);
+    CreateMessageHook(TradingListItemEvent, onTradingListItemEvent);
+    CreateMessageHook(TradingNotOpenEvent, onTradingNotOpenEvent);
+    CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
+    CreateMessageHook(TradingOpenFailedEvent, onTradingOpenFailedEvent);
+    CreateMessageHook(TradingOtherNotAllowedEvent, onTradingOtherNotAllowedEvent);
+    CreateMessageHook(TradingYouAreNotAllowedEvent, onTradingYouAreNotAllowedEvent);
 
     return null;
 }

src/views/inventory/InventoryView.scss

@@ -6,7 +6,7 @@
         height: 240px;
         max-height: 430px;
         resize: vertical;
-        overflow:auto;
+        overflow: auto;
     }
 
     .empty-image {

src/views/inventory/InventoryView.tsx

@@ -1,13 +1,15 @@
-import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
+import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
-import { GetRoomEngine } from '../../api';
+import { GetConnection, GetRoomEngine } from '../../api';
-import { InventoryEvent } from '../../events';
+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';
@@ -19,11 +21,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);
@@ -33,25 +36,60 @@ 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)
-                return;
+                {
+                    setIsVisible(true);
                 }
-    }, []);
+                else
+                {
+                    close();
+                }
+                return;
+            case InventoryTradeRequestEvent.REQUEST_TRADE: {
+                const tradeEvent = (event as InventoryTradeRequestEvent);
+
+                GetConnection().send(new TradingOpenComposer(tradeEvent.objectId));
+            }
+        }
+    }, [ isVisible, close ]);
 
     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,12 +134,22 @@ export const InventoryView: FC<InventoryViewProps> = props =>
         }
     }, []);
 
+    useEffect(() =>
+    {
+        if(!isVisible)
+        {
+            if(furnitureState.tradeData) setIsVisible(true);
+        }
+    }, [ furnitureState.tradeData, isVisible ]);
+
     return (
         <InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
             <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>
                                 { tabs.map((name, index) =>
                                     {
@@ -122,6 +170,11 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                                 { (currentTab === InventoryTabs.BADGES ) && 
                                     <InventoryBadgeView /> }
                             </NitroCardContentView>
+                        </> }
+                    { furnitureState.tradeData &&
+                        <NitroCardContentView>
+                            <InventoryTradeView cancelTrade={ close } />
+                        </NitroCardContentView> }
                 </NitroCardView> }
         </InventoryContextProvider>
     );

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;

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;
 

src/views/inventory/common/GroupItem.ts

@@ -20,7 +20,7 @@ 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;
@@ -37,6 +37,27 @@ export class GroupItem
         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
     {
         this.setIcon();
@@ -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

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;
+}

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()) {}
+}

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;
+}

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,121 @@ 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;
     }

src/views/inventory/views/InventoryViews.scss

@@ -1,4 +1,2 @@
 @import './badge/InventoryBadgeView';
-@import './bot/InventoryBotView';
 @import './furniture/InventoryFurnitureView';
-@import './pet/InventoryPetView';

src/views/inventory/views/badge/InventoryBadgeView.scss

@@ -5,5 +5,9 @@
         height: 45px;
     }
 }
+
+.inventory-badge-overflow {
+    height: calc(100% - 91px);
+}
+
 @import './item/InventoryBadgeItemView';
-@import './results/InventoryBadgeResultsView';

src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss

@@ -1,2 +0,0 @@
-.badge-item-container {
-}

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>
     );
 }

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">
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent }> 
-            <div className={ 'position-relative border border-2 rounded inventory-badge-item cursor-pointer ' + (isActive ? 'active' : '') } onMouseDown={ onMouseEvent }>
             <BadgeImageView badgeCode={ badge } />
-            </div>
+        </NitroCardGridItemView>
-        </div>
     );
 }

src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss

@@ -1,9 +0,0 @@
-.badge-item-container {
-    height: 139px;
-    max-height: 139px;
-    overflow-y: auto;
-}
-
-.inventory-badge-overflow {
-    height:calc(100% - 86px)
-}

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">
+        <NitroCardGridView>
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     if(activeBadges.indexOf(code) >= 0) return null;
                     
                     return <InventoryBadgeItemView key={ code } badge={ code } />
                 }) }
-            </div>
+        </NitroCardGridView>
-        </div>
     );
 }

src/views/inventory/views/bot/InventoryBotView.scss

@@ -1,2 +0,0 @@
-@import './item/InventoryBotItemView';
-@import './results/InventoryBotResultsView';

src/views/inventory/views/bot/item/InventoryBotItemView.scss

@@ -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;
-        }
-    }
-}

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">
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-            <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>
+        </NitroCardGridItemView>
-        </div>
     );
 }

src/views/inventory/views/bot/results/InventoryBotResultsView.scss

@@ -1,5 +0,0 @@
-.bot-item-container {
-    height: 220px;
-    max-height: 220px;
-    overflow-y: auto;
-}

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">
+        <NitroCardGridView>
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
             { botItems && (botItems.length > 0) && botItems.map(item =>
                 {
                     return <InventoryBotItemView key={ item.id } botItem={ item } />
                 }) }
-            </div>
+        </NitroCardGridView>
-        </div>
     );
 }

src/views/inventory/views/furniture/InventoryFurnitureView.scss

@@ -3,7 +3,3 @@
     top: 5px;
     right: 15px;
 }
-
-@import './item/InventoryFurnitureItemView';
-@import './results/InventoryFurnitureResultsView';
-@import './search/InventoryFurnitureSearchView';

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

@@ -1,7 +1,7 @@
 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/message-event';
+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';
@@ -80,9 +80,9 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 
             if(furnitureItem.category === FurniCategory._Str_3432)
             {
-                // insert a window if the type is landscape
+                const data = GetSessionDataManager().getWallItemDataByName('noob_window_double');
-                //_local_19 = this._model.controller._Str_18225("ads_twi_windw", ProductTypeEnum.WALL);
+
-                //this._roomPreviewer._Str_12087(_local_19.id, new Vector3d(90, 0, 0), _local_19._Str_4558);
+                if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
             }
         }
         else
@@ -123,13 +123,15 @@ 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">
+                { 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> }
+                        { !!roomSession &&
+                            <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
                     </div> }
             </div>
         </div>

src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss

@@ -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;
-        }
-    }
-}

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';
@@ -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);
 
@@ -36,18 +37,7 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
         }
     }, [ isActive, isMouseDown, groupItem, dispatchFurnitureState ]);
 
-    const imageUrl = `url(${ groupItem.iconUrl })`;
+    const count = groupItem.getUnlockedCount();
 
-    return (
+    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 } />;
-        <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 }>
-                {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>
-    );
 }

src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss

@@ -1,2 +0,0 @@
-.furni-item-container {
-}

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">
+        <NitroCardGridView columns={ columns }>
-            <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>
+        </NitroCardGridView>
-        </div>
     );
 }

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;
 }

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)
                     {

src/views/inventory/views/pet/InventoryPetView.scss

@@ -1,2 +0,0 @@
-@import './item/InventoryPetItemView';
-@import './results/InventoryPetResultsView';

src/views/inventory/views/pet/item/InventoryPetItemView.scss

@@ -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;
-        }
-    }
-}

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">
+        <NitroCardGridItemView itemActive={ isActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-            <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>
+        </NitroCardGridItemView>
-        </div>
     );
 }

src/views/inventory/views/pet/results/InventoryPetResultsView.scss

@@ -1,5 +0,0 @@
-.pet-item-container {
-    height: 220px;
-    max-height: 220px;
-    overflow-y: auto;
-}

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">
+        <NitroCardGridView>
-            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
             { petItems && (petItems.length > 0) && petItems.map(item =>
                 {
                     return <InventoryPetItemView key={ item.id } petItem={ item } />
                 }) }
-            </div>
+        </NitroCardGridView>
-        </div>
     );
 }

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

@@ -0,0 +1,290 @@
+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';
+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';
+import { InventoryFurnitureSearchView } from '../furniture/search/InventoryFurnitureSearchView';
+import { InventoryTradeViewProps } from './InventoryTradeView.types';
+
+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 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());
+        }
+
+    }, [ 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">
+                <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 className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
+            </div>
+            <div className="col-8 row">
+                <div className="d-flex flex-column col-6">
+                    <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) =>
+                            {
+                                const item = (tradeData.ownUser.items.getWithIndex(i) || null);
+
+                                if(!item) return <NitroCardGridItemView key={ i } />;
+
+                                return (
+                                    <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">
+                    <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) =>
+                            {
+                                const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+
+                                if(!item) return <NitroCardGridItemView key={ i } />;
+
+                                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 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>
+    );
+}

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

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

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" />

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;

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);
@@ -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;
     }

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 key={ index } nameData={ name } close={ () => removeNameBubble(index) }  />;
+                }) }
             { rentableBotChatEvent && <AvatarInfoRentableBotChatView chatEvent={ rentableBotChatEvent } /> }
         </>
     )

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">{ chat.text }</span>
-                    <span className="message"> {
+                    {/* {
                         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>