Trade UI

The Traderie Trade UI package adds a first-party interface for the Trade System. It is optional: you can use the headless Trade System directly, use Traderie's UI, or replace the UI adapter to connect the interface to your own backend.

If you are building your own UI without Traderie's first-party interface, skip this package and use the headless Custom UI flow from the Trade System package instead.

Install Trade UI from the Studio plugin. The package adds:

• StarterGui/TraderieTradeUI
• StarterPlayer/StarterPlayerScripts/TraderieTradeUI
• ReplicatedStorage/Traderie/TradeUI
• ReplicatedStorage/Traderie/TradeUIConfig/Theme
• ReplicatedStorage/Traderie/TradeUIConfig/TradeClient

StarterGui/TraderieTradeUI, Theme, and TradeClient are developer-owned surfaces. They are generated once and preserved when you update the package.

Theme

Edit ReplicatedStorage/Traderie/TradeUIConfig/Theme to change colors and sizing without touching the package runtime.

return {
	ScreenInsets = UDim.new(0, 16),
	PanelSize = UDim2.fromOffset(340, 460),
	SidebarSize = UDim2.fromOffset(260, 460),
	BackgroundColor = Color3.fromRGB(17, 23, 31),
	PanelColor = Color3.fromRGB(28, 35, 47),
	AccentColor = Color3.fromRGB(67, 177, 118),
	DangerColor = Color3.fromRGB(198, 76, 76),
	MutedColor = Color3.fromRGB(120, 136, 156),
	TextColor = Color3.fromRGB(240, 244, 248),
	SubtleTextColor = Color3.fromRGB(172, 184, 196),
}

TradeClient

ReplicatedStorage/Traderie/TradeUIConfig/TradeClient is the adapter between the UI and a trade backend.

The default adapter requires ReplicatedStorage.Traderie.TradeSystem.Client, so it works when the Trade System package is installed:

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local traderieRoot = ReplicatedStorage:WaitForChild("Traderie", 10)
local tradeSystemRoot = traderieRoot and traderieRoot:WaitForChild("TradeSystem", 10)
if not tradeSystemRoot then
	error("Traderie.TradeUIConfig.TradeClient requires ReplicatedStorage.Traderie.TradeSystem, or replace this module with your own trade client adapter.")
end

return require(tradeSystemRoot:WaitForChild("Client"))

If your game has a custom trade backend, replace TradeClient with a module that implements the same client contract:

local TradeClient = {}

TradeClient.onTradeUpdated = Signal.new()
TradeClient.onTradeClosed = Signal.new()
TradeClient.onTradeRequest = Signal.new()

function TradeClient.initialize()
	-- Connect to your own remotes or client state here.
end

function TradeClient.requestTrade(targetUserId)
	return MyTradeBackend.requestTrade(targetUserId)
end

return TradeClient

The UI calls these methods when available:

Method	Purpose
initialize()	Connect the adapter to remotes or client-side state.
requestTrade(targetUserId)	Send a trade request to another player.
respondToRequest(requestId, accepted)	Accept or reject an incoming request.
setOffer(tradeId, offerEntries)	Replace the local player's current offer with { entryId, amount } entries.
setReady(tradeId)	Mark the local player ready.
cancelTrade(tradeId)	Cancel the active trade.
getTradableInventory()	Return entries the local player can offer.
clearPendingRequest(requestId)	Optional cleanup after a request is handled.

Responses should use the Trade System shape: { ok = true } for success or { ok = false, code = "reason" } for failures.

This adapter exists so Traderie's first-party UI can talk to either the Trade System client or your own backend. It is not required for a custom UI. For the full headless client contract, see Custom UI.

Inventory Data

The UI displays the tradable entries returned by the Trade System client. Those entries come from your server-side InventoryAdapter:getTradableEntries implementation.

Use each entry's clientPayload for information the UI and players can safely see, such as display name, icon, rarity, or item metadata. Keep server-only data in serverPayload; it is stored in the trade journal but is not sent to clients.

The package bootstraps its UI from StarterPlayer/StarterPlayerScripts/TraderieTradeUI, so no manual UI initialization is required after installation.