Barter polishes (#3258)

* Fixes

* stuff

* FIxed ui

* Fixed poke

* Fixed poke

packages/chat-sdk/src/MessagePluginRenderer.tsx

@@ -11,5 +11,7 @@ export const MessagePluginRenderer = () => {
     return <div />;
   }
 
-  return <>{openPlugin === "barter" ? <BarterUi roomId={roomId} /> : null}</>;
+  return (
+    <>{openPlugin.type === "barter" ? <BarterUi roomId={roomId} /> : null}</>
+  );
 };

packages/chat-sdk/src/components/Barter.tsx

@@ -19,7 +19,7 @@ export const Barter = ({ buttonStyle }: any) => {
       }}
     >
       <IconButton
-        size={"small"}
+        size="small"
         sx={{
           color: theme.custom.colors.icon,
           "&:hover": {
@@ -28,7 +28,11 @@ export const Barter = ({ buttonStyle }: any) => {
         }}
         style={buttonStyle}
         onClick={(e) => {
-          setOpenPlugin((p) => (p === "barter" ? "" : "barter"));
+          setOpenPlugin((p) =>
+            p.type === "barter"
+              ? { type: "", metadata: {} }
+              : { type: "barter", metadata: {} }
+          );
         }}
       >
         {" "}

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;

packages/chat-sdk/src/components/ChatRoom.tsx

@@ -95,7 +95,10 @@ export const ChatRoom = ({
   const [messageRef, setMessageRef] = useState<any>(null);
   const [jumpToBottom, setShowJumpToBottom] = useState(false);
   const [localUnreadCount, setLocalUnreadCount] = useState(0);
-  const [openPlugin, setOpenPlugin] = useState<MessagePlugins>("");
+  const [openPlugin, setOpenPlugin] = useState<MessagePlugins>({
+    type: "",
+    metadata: {},
+  });
   const [aboveMessagePlugin, setAboveMessagePlugin] =
     useState<AboveMessagePlugin>({ type: "", metadata: {} });
   const [selectedFile, setSelectedFile] = useState<any>(null);
@@ -360,7 +363,7 @@ export const ChatRoom = ({
       >
         <div
           style={{
-            height: !openPlugin
+            height: !openPlugin.type
               ? "100vh"
               : `${100 - PLUGIN_HEIGHT_PERCENTAGE}vh`,
           }}

packages/chat-sdk/src/components/Message.tsx

@@ -27,19 +27,14 @@ import {
 import { useCustomTheme } from "@coral-xyz/themes";
 import { GiphyFetch } from "@giphy/js-fetch-api";
 import { Gif as GifComponent } from "@giphy/react-components";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import CallMadeIcon from "@mui/icons-material/CallMade";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DoneIcon from "@mui/icons-material/Done";
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import Info from "@mui/icons-material/Info";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import VerifiedIcon from "@mui/icons-material/Verified";
-import { Button, IconButton, Skeleton, Tooltip } from "@mui/material";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
+import { Skeleton, Tooltip } from "@mui/material";
 import { createStyles, makeStyles } from "@mui/styles";
 import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
 
@@ -252,6 +247,16 @@ export const MessageLine = (props) => {
     });
   };
 
+  if (props.messageKind === "barter-request") {
+    return (
+      <BarterPoke sender={props.uuid} barterId={props.metadata?.barter_id} />
+    );
+  }
+
+  if (props.messageKind === "barter") {
+    return <BarterModal barterId={props.metadata?.barter_id} />;
+  }
+
   return (
     <div
       className={classes.messageRow}
@@ -303,10 +308,6 @@ export const MessageLine = (props) => {
                         remoteUsername={props.username}
                         finalTxId={props.metadata.final_txn_signature}
                       />
-                    ) : props.messageKind === "barter-request" ? (
-                      <BarterPoke barterId={props.metadata?.barter_id} />
-                    ) : props.messageKind === "barter" ? (
-                      <BarterModal barterId={props.metadata?.barter_id} />
                     ) : props.messageKind === "transaction" ? (
                       <SimpleTransaction
                         remoteUserId={props.uuid}
@@ -485,10 +486,6 @@ export const MessageLine = (props) => {
                           remoteUsername={props.username}
                           finalTxId={props.metadata.final_txn_signature}
                         />
-                      ) : props.messageKind === "barter-request" ? (
-                        <BarterPoke barterId={props.metadata?.barter_id} />
-                      ) : props.messageKind === "barter" ? (
-                        <BarterModal barterId={props.metadata?.barter_id} />
                       ) : props.messageKind === "transaction" ? (
                         <SimpleTransaction
                           remoteUserId={props.uuid}

packages/chat-sdk/src/components/SendMessage.tsx

@@ -24,7 +24,7 @@ import { NftSticker } from "./NftSticker";
 import { ReplyContainer } from "./ReplyContainer";
 import { SecureTransfer } from "./SecureTransfer";
 
-const BARTER_ENABLED = false;
+const BARTER_ENABLED = true;
 const SECURE_TRANSFER_ENABLED = false;
 
 const useStyles = makeStyles((theme: any) =>

packages/chat-sdk/src/components/barter/BarterPoke.tsx

@@ -1,3 +1,58 @@
-export function BarterPoke({ barterId }: { barterId: string }) {
-  return <div>Poke! {barterId}</div>;
+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 (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          display: "inline-flex",
+          background: theme.custom.colors.linkColor,
+          padding: "12px 16px",
+          color: "#fff",
+          marginTop: 5,
+          borderRadius: 16,
+        }}
+      >
+        <div style={{ flex: 1 }}>
+          {sender === uuid
+            ? `You poked ${remoteUsername}`
+            : `${remoteUsername} wants to trade`}{" "}
+        </div>
+        <div
+          style={{
+            marginLeft: 10,
+            cursor: "pointer",
+            color: theme.custom.colors.icon,
+          }}
+          onClick={() => {
+            setOpenPlugin({
+              type: "barter",
+              metadata: {
+                barterId,
+              },
+            });
+          }}
+        >
+          View{" "}
+        </div>
+      </div>
+    </div>
+  );
 }

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<BarterResponse | null>(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 (
     <BarterProvider
@@ -83,31 +87,31 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
                 height: "100%",
               }}
             >
-              {!barterState && (
+              {!barterState ? (
                 <>
                   <BarterHeader />
                   <Loading />
                 </>
-              )}
-              {barterState && (
+              ) : null}
+              {barterState ? (
                 <>
-                  {!selectNft && (
+                  {!selectNft ? (
                     <>
                       <BarterHeader />
                       <SwapPage
                         localSelection={barterState?.localOffers || []}
                         remoteSelection={barterState?.remoteOffers || []}
                       />
                     </>
-                  )}
-                  {selectNft && (
+                  ) : null}
+                  {selectNft ? (
                     <SelectPage
                       setBarterState={setBarterState}
                       currentSelection={barterState?.localOffers || []}
                     />
-                  )}
+                  ) : null}
                 </>
-              )}
+              ) : null}
             </div>
           </div>
         </ScrollBarImpl>