diff --git a/packages/chat-sdk/src/MessagePluginRenderer.tsx b/packages/chat-sdk/src/MessagePluginRenderer.tsx index e897b4b77..e3ad8b954 100644 --- a/packages/chat-sdk/src/MessagePluginRenderer.tsx +++ b/packages/chat-sdk/src/MessagePluginRenderer.tsx @@ -11,5 +11,7 @@ export const MessagePluginRenderer = () => { return
; } - return <>{openPlugin === "barter" ? : null}; + return ( + <>{openPlugin.type === "barter" ? : null} + ); }; diff --git a/packages/chat-sdk/src/components/Barter.tsx b/packages/chat-sdk/src/components/Barter.tsx index 6726240f1..7f7413ccf 100644 --- a/packages/chat-sdk/src/components/Barter.tsx +++ b/packages/chat-sdk/src/components/Barter.tsx @@ -19,7 +19,7 @@ export const Barter = ({ buttonStyle }: any) => { }} > { }} style={buttonStyle} onClick={(e) => { - setOpenPlugin((p) => (p === "barter" ? "" : "barter")); + setOpenPlugin((p) => + p.type === "barter" + ? { type: "", metadata: {} } + : { type: "barter", metadata: {} } + ); }} > {" "} diff --git a/packages/chat-sdk/src/components/ChatContext.tsx b/packages/chat-sdk/src/components/ChatContext.tsx index 3b23d595f..38443e7e8 100644 --- a/packages/chat-sdk/src/components/ChatContext.tsx +++ b/packages/chat-sdk/src/components/ChatContext.tsx @@ -1,6 +1,5 @@ import React, { useContext } from "react"; import type { - EnrichedMessage, EnrichedMessageWithMetadata, MessageKind, MessageMetadata, @@ -9,7 +8,18 @@ import type { } from "@coral-xyz/common"; import type { AboveMessagePlugin } from "./ChatRoom"; -export type MessagePlugins = "secure-transfer" | "barter" | "nft-sticker" | ""; + +export type MessagePlugins = + | { + type: "barter"; + metadata: { + barterId?: string; + }; + } + | { + type: ""; + metadata: {}; + }; type ChatContext = { setActiveReply: any; diff --git a/packages/chat-sdk/src/components/ChatRoom.tsx b/packages/chat-sdk/src/components/ChatRoom.tsx index 0d4557858..52aa08726 100644 --- a/packages/chat-sdk/src/components/ChatRoom.tsx +++ b/packages/chat-sdk/src/components/ChatRoom.tsx @@ -95,7 +95,10 @@ export const ChatRoom = ({ const [messageRef, setMessageRef] = useState(null); const [jumpToBottom, setShowJumpToBottom] = useState(false); const [localUnreadCount, setLocalUnreadCount] = useState(0); - const [openPlugin, setOpenPlugin] = useState(""); + const [openPlugin, setOpenPlugin] = useState({ + type: "", + metadata: {}, + }); const [aboveMessagePlugin, setAboveMessagePlugin] = useState({ type: "", metadata: {} }); const [selectedFile, setSelectedFile] = useState(null); @@ -360,7 +363,7 @@ export const ChatRoom = ({ >
{ }); }; + if (props.messageKind === "barter-request") { + return ( + + ); + } + + if (props.messageKind === "barter") { + return ; + } + return (
{ remoteUsername={props.username} finalTxId={props.metadata.final_txn_signature} /> - ) : props.messageKind === "barter-request" ? ( - - ) : props.messageKind === "barter" ? ( - ) : props.messageKind === "transaction" ? ( { remoteUsername={props.username} finalTxId={props.metadata.final_txn_signature} /> - ) : props.messageKind === "barter-request" ? ( - - ) : props.messageKind === "barter" ? ( - ) : props.messageKind === "transaction" ? ( diff --git a/packages/chat-sdk/src/components/barter/BarterPoke.tsx b/packages/chat-sdk/src/components/barter/BarterPoke.tsx index 15ec56055..e94ab8957 100644 --- a/packages/chat-sdk/src/components/barter/BarterPoke.tsx +++ b/packages/chat-sdk/src/components/barter/BarterPoke.tsx @@ -1,3 +1,58 @@ -export function BarterPoke({ barterId }: { barterId: string }) { - return
Poke! {barterId}
; +import { useUser } from "@coral-xyz/recoil"; +import { useCustomTheme } from "@coral-xyz/themes"; + +import { useChatContext } from "../ChatContext"; + +export function BarterPoke({ + barterId, + sender, +}: { + barterId: string; + sender: string; +}) { + const { remoteUsername, setOpenPlugin } = useChatContext(); + const { username, uuid } = useUser(); + const theme = useCustomTheme(); + return ( +
+
+
+ {sender === uuid + ? `You poked ${remoteUsername}` + : `${remoteUsername} wants to trade`}{" "} +
+
{ + setOpenPlugin({ + type: "barter", + metadata: { + barterId, + }, + }); + }} + > + View{" "} +
+
+
+ ); } diff --git a/packages/chat-sdk/src/components/barter/BarterUi.tsx b/packages/chat-sdk/src/components/barter/BarterUi.tsx index 6323e5666..b33c75773 100644 --- a/packages/chat-sdk/src/components/barter/BarterUi.tsx +++ b/packages/chat-sdk/src/components/barter/BarterUi.tsx @@ -17,12 +17,14 @@ export const BarterUi = ({ roomId }: { roomId: string }) => { const theme = useCustomTheme(); const [selectNft, setSelectNft] = useState(false); const [barterState, setBarterState] = useState(null); - const { setOpenPlugin } = useChatContext(); + const { openPlugin, setOpenPlugin } = useChatContext(); - const getActiveBarter = async () => { + const getActiveBarter = async (barterId: string) => { try { const res = await fetch( - `${BACKEND_API_URL}/barter/active?room=${roomId}&type=individual`, + barterId + ? `${BACKEND_API_URL}/barter/?barterId=${barterId}` + : `${BACKEND_API_URL}/barter/active?room=${roomId}&type=individual`, { method: "GET", } @@ -47,7 +49,7 @@ export const BarterUi = ({ roomId }: { roomId: string }) => { barterId: number; }) => { if (props.barterId === json.barter.id) { - setOpenPlugin(""); + setOpenPlugin({ type: "", metadata: {} }); } }; } catch (e) { @@ -56,8 +58,10 @@ export const BarterUi = ({ roomId }: { roomId: string }) => { }; useEffect(() => { - getActiveBarter(); - }, []); + getActiveBarter( + openPlugin.type === "barter" ? openPlugin.metadata?.barterId ?? "" : "" + ); + }, [openPlugin?.metadata]); return ( { height: "100%", }} > - {!barterState && ( + {!barterState ? ( <> - )} - {barterState && ( + ) : null} + {barterState ? ( <> - {!selectNft && ( + {!selectNft ? ( <> { remoteSelection={barterState?.remoteOffers || []} /> - )} - {selectNft && ( + ) : null} + {selectNft ? ( - )} + ) : null} - )} + ) : null}