From 756e9d1867f7823ac7475eb29afde7c34847f737 Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Thu, 9 Mar 2023 13:31:28 -0700
Subject: [PATCH 1/5] Fixes

---
 .../chat-sdk/src/MessagePluginRenderer.tsx    |  4 +-
 packages/chat-sdk/src/components/Barter.tsx   |  8 +++-
 .../chat-sdk/src/components/ChatContext.tsx   | 14 ++++++-
 packages/chat-sdk/src/components/ChatRoom.tsx |  7 +++-
 .../chat-sdk/src/components/SendMessage.tsx   |  2 +-
 .../src/components/barter/BarterPoke.tsx      | 26 +++++++++++-
 .../src/components/barter/BarterUi.tsx        | 40 ++++++++-----------
 7 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/packages/chat-sdk/src/MessagePluginRenderer.tsx b/packages/chat-sdk/src/MessagePluginRenderer.tsx
index e897b4b77e..e3ad8b954f 100644
--- a/packages/chat-sdk/src/MessagePluginRenderer.tsx
+++ b/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}</>
+  );
 };
diff --git a/packages/chat-sdk/src/components/Barter.tsx b/packages/chat-sdk/src/components/Barter.tsx
index 6726240f1d..7f7413ccf8 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) => {
       }}
     >
       <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: {} }
+          );
         }}
       >
         {" "}
diff --git a/packages/chat-sdk/src/components/ChatContext.tsx b/packages/chat-sdk/src/components/ChatContext.tsx
index 3b23d595f4..38443e7e8d 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 0d4557858d..52aa087265 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<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`,
           }}
diff --git a/packages/chat-sdk/src/components/SendMessage.tsx b/packages/chat-sdk/src/components/SendMessage.tsx
index e85f66453f..70655684ff 100644
--- a/packages/chat-sdk/src/components/SendMessage.tsx
+++ b/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) =>
diff --git a/packages/chat-sdk/src/components/barter/BarterPoke.tsx b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
index 15ec560558..47b0fde3ce 100644
--- a/packages/chat-sdk/src/components/barter/BarterPoke.tsx
+++ b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
@@ -1,3 +1,27 @@
+import { useCustomTheme } from "@coral-xyz/themes";
+
+import { useChatContext } from "../ChatContext";
+
 export function BarterPoke({ barterId }: { barterId: string }) {
-  return <div>Poke! {barterId}</div>;
+  const { remoteUsername } = useChatContext();
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        background: theme.custom.colors.linkColor,
+        padding: "12px 16px",
+        color: "#fff",
+        borderRadius: 16,
+      }}
+    >
+      <div>{remoteUsername} wants to trade </div>
+      <div
+        onClick={() => {
+          barterId;
+        }}
+      >
+        View{" "}
+      </div>
+    </div>
+  );
 }
diff --git a/packages/chat-sdk/src/components/barter/BarterUi.tsx b/packages/chat-sdk/src/components/barter/BarterUi.tsx
index 6323e56663..d7709de983 100644
--- a/packages/chat-sdk/src/components/barter/BarterUi.tsx
+++ b/packages/chat-sdk/src/components/barter/BarterUi.tsx
@@ -47,7 +47,7 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
         barterId: number;
       }) => {
         if (props.barterId === json.barter.id) {
-          setOpenPlugin("");
+          setOpenPlugin({ type: "", metadata: {} });
         }
       };
     } catch (e) {
@@ -83,31 +83,23 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
                 height: "100%",
               }}
             >
-              {!barterState && (
-                <>
+              {!barterState ? <>
+                <BarterHeader />
+                <Loading />
+              </> : null}
+              {barterState ? <>
+                {!selectNft ? <>
                   <BarterHeader />
-                  <Loading />
-                </>
-              )}
-              {barterState && (
-                <>
-                  {!selectNft && (
-                    <>
-                      <BarterHeader />
-                      <SwapPage
-                        localSelection={barterState?.localOffers || []}
-                        remoteSelection={barterState?.remoteOffers || []}
+                  <SwapPage
+                    localSelection={barterState?.localOffers || []}
+                    remoteSelection={barterState?.remoteOffers || []}
                       />
-                    </>
-                  )}
-                  {selectNft && (
-                    <SelectPage
-                      setBarterState={setBarterState}
-                      currentSelection={barterState?.localOffers || []}
-                    />
-                  )}
-                </>
-              )}
+                </> : null}
+                {selectNft ? <SelectPage
+                  setBarterState={setBarterState}
+                  currentSelection={barterState?.localOffers || []}
+                    /> : null}
+              </> : null}
             </div>
           </div>
         </ScrollBarImpl>

From 94a35cafcc831a1aba0158e8c0bf1606b7281646 Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Thu, 9 Mar 2023 15:43:43 -0700
Subject: [PATCH 2/5] stuff

---
 packages/chat-sdk/src/components/Message.tsx  |  4 +-
 .../src/components/barter/BarterPoke.tsx      | 37 ++++++++++----
 .../src/components/barter/BarterUi.tsx        | 50 +++++++++++--------
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/packages/chat-sdk/src/components/Message.tsx b/packages/chat-sdk/src/components/Message.tsx
index 2f5b6fc9b5..1e514f3517 100644
--- a/packages/chat-sdk/src/components/Message.tsx
+++ b/packages/chat-sdk/src/components/Message.tsx
@@ -279,7 +279,7 @@ export const MessageLine = (props) => {
                 </div>
               ) : null}
               <div style={{ display: "flex" }}>
-                <div>
+                <div style={{ width: "100%" }}>
                   <p className={classes.messageContent}>
                     {props.deleted ? (
                       <DeletedMessage />
@@ -447,7 +447,7 @@ export const MessageLine = (props) => {
                 className={`${classes.messageContainer} ${classes.hoverParent}`}
                 style={{ display: "flex" }}
               >
-                <div>
+                <div style={{ width: "100%" }}>
                   {props.parent_message_author_uuid ? (
                     <div style={{}}>
                       <ReplyContainer
diff --git a/packages/chat-sdk/src/components/barter/BarterPoke.tsx b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
index 47b0fde3ce..6a410fa667 100644
--- a/packages/chat-sdk/src/components/barter/BarterPoke.tsx
+++ b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
@@ -3,24 +3,43 @@ import { useCustomTheme } from "@coral-xyz/themes";
 import { useChatContext } from "../ChatContext";
 
 export function BarterPoke({ barterId }: { barterId: string }) {
-  const { remoteUsername } = useChatContext();
+  const { remoteUsername, setOpenPlugin } = useChatContext();
   const theme = useCustomTheme();
   return (
     <div
       style={{
-        background: theme.custom.colors.linkColor,
-        padding: "12px 16px",
-        color: "#fff",
-        borderRadius: 16,
+        display: "flex",
+        justifyContent: "center",
       }}
     >
-      <div>{remoteUsername} wants to trade </div>
       <div
-        onClick={() => {
-          barterId;
+        style={{
+          display: "inline-flex",
+          background: theme.custom.colors.linkColor,
+          padding: "12px 16px",
+          color: "#fff",
+          marginTop: 5,
+          borderRadius: 16,
         }}
       >
-        View{" "}
+        <div style={{ flex: 1 }}>{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>
   );
diff --git a/packages/chat-sdk/src/components/barter/BarterUi.tsx b/packages/chat-sdk/src/components/barter/BarterUi.tsx
index d7709de983..4e42835cca 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<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",
         }
@@ -56,8 +58,8 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
   };
 
   useEffect(() => {
-    getActiveBarter();
-  }, []);
+    getActiveBarter(openPlugin.metadata?.barterId);
+  }, [openPlugin?.metadata]);
 
   return (
     <BarterProvider
@@ -83,23 +85,31 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
                 height: "100%",
               }}
             >
-              {!barterState ? <>
-                <BarterHeader />
-                <Loading />
-              </> : null}
-              {barterState ? <>
-                {!selectNft ? <>
+              {!barterState ? (
+                <>
                   <BarterHeader />
-                  <SwapPage
-                    localSelection={barterState?.localOffers || []}
-                    remoteSelection={barterState?.remoteOffers || []}
+                  <Loading />
+                </>
+              ) : null}
+              {barterState ? (
+                <>
+                  {!selectNft ? (
+                    <>
+                      <BarterHeader />
+                      <SwapPage
+                        localSelection={barterState?.localOffers || []}
+                        remoteSelection={barterState?.remoteOffers || []}
                       />
-                </> : null}
-                {selectNft ? <SelectPage
-                  setBarterState={setBarterState}
-                  currentSelection={barterState?.localOffers || []}
-                    /> : null}
-              </> : null}
+                    </>
+                  ) : null}
+                  {selectNft ? (
+                    <SelectPage
+                      setBarterState={setBarterState}
+                      currentSelection={barterState?.localOffers || []}
+                    />
+                  ) : null}
+                </>
+              ) : null}
             </div>
           </div>
         </ScrollBarImpl>

From 76e4d41317857004677bacad822c9e40be018f0b Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Thu, 9 Mar 2023 15:56:17 -0700
Subject: [PATCH 3/5] FIxed ui

---
 packages/chat-sdk/src/components/Message.tsx     | 13 +++++++------
 .../src/components/barter/BarterPoke.tsx         | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/chat-sdk/src/components/Message.tsx b/packages/chat-sdk/src/components/Message.tsx
index 1e514f3517..ac3c6fe7aa 100644
--- a/packages/chat-sdk/src/components/Message.tsx
+++ b/packages/chat-sdk/src/components/Message.tsx
@@ -252,6 +252,11 @@ export const MessageLine = (props) => {
     });
   };
 
+  if (props.messageKind === "barter-request") {
+    return (
+      <BarterPoke sender={props.uuid} barterId={props.metadata?.barter_id} />
+    );
+  }
   return (
     <div
       className={classes.messageRow}
@@ -279,7 +284,7 @@ export const MessageLine = (props) => {
                 </div>
               ) : null}
               <div style={{ display: "flex" }}>
-                <div style={{ width: "100%" }}>
+                <div>
                   <p className={classes.messageContent}>
                     {props.deleted ? (
                       <DeletedMessage />
@@ -303,8 +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" ? (
@@ -447,7 +450,7 @@ export const MessageLine = (props) => {
                 className={`${classes.messageContainer} ${classes.hoverParent}`}
                 style={{ display: "flex" }}
               >
-                <div style={{ width: "100%" }}>
+                <div>
                   {props.parent_message_author_uuid ? (
                     <div style={{}}>
                       <ReplyContainer
@@ -485,8 +488,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" ? (
diff --git a/packages/chat-sdk/src/components/barter/BarterPoke.tsx b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
index 6a410fa667..e94ab89570 100644
--- a/packages/chat-sdk/src/components/barter/BarterPoke.tsx
+++ b/packages/chat-sdk/src/components/barter/BarterPoke.tsx
@@ -1,9 +1,17 @@
+import { useUser } from "@coral-xyz/recoil";
 import { useCustomTheme } from "@coral-xyz/themes";
 
 import { useChatContext } from "../ChatContext";
 
-export function BarterPoke({ barterId }: { barterId: string }) {
+export function BarterPoke({
+  barterId,
+  sender,
+}: {
+  barterId: string;
+  sender: string;
+}) {
   const { remoteUsername, setOpenPlugin } = useChatContext();
+  const { username, uuid } = useUser();
   const theme = useCustomTheme();
   return (
     <div
@@ -22,7 +30,11 @@ export function BarterPoke({ barterId }: { barterId: string }) {
           borderRadius: 16,
         }}
       >
-        <div style={{ flex: 1 }}>{remoteUsername} wants to trade </div>
+        <div style={{ flex: 1 }}>
+          {sender === uuid
+            ? `You poked ${remoteUsername}`
+            : `${remoteUsername} wants to trade`}{" "}
+        </div>
         <div
           style={{
             marginLeft: 10,

From 7906b74a8728638984da796994f3964f48ffa577 Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Thu, 9 Mar 2023 15:59:57 -0700
Subject: [PATCH 4/5] Fixed poke

---
 packages/chat-sdk/src/components/Message.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/chat-sdk/src/components/Message.tsx b/packages/chat-sdk/src/components/Message.tsx
index ac3c6fe7aa..4c54df3d9f 100644
--- a/packages/chat-sdk/src/components/Message.tsx
+++ b/packages/chat-sdk/src/components/Message.tsx
@@ -27,7 +27,6 @@ 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";
@@ -35,11 +34,7 @@ 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";
 
@@ -257,6 +252,11 @@ export const MessageLine = (props) => {
       <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}
@@ -308,8 +308,6 @@ export const MessageLine = (props) => {
                         remoteUsername={props.username}
                         finalTxId={props.metadata.final_txn_signature}
                       />
-                    ) : props.messageKind === "barter" ? (
-                      <BarterModal barterId={props.metadata?.barter_id} />
                     ) : props.messageKind === "transaction" ? (
                       <SimpleTransaction
                         remoteUserId={props.uuid}
@@ -488,8 +486,6 @@ export const MessageLine = (props) => {
                           remoteUsername={props.username}
                           finalTxId={props.metadata.final_txn_signature}
                         />
-                      ) : props.messageKind === "barter" ? (
-                        <BarterModal barterId={props.metadata?.barter_id} />
                       ) : props.messageKind === "transaction" ? (
                         <SimpleTransaction
                           remoteUserId={props.uuid}

From 0839c36a4fa1834284cbbb6510d088e95b5ef9df Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Thu, 9 Mar 2023 16:10:09 -0700
Subject: [PATCH 5/5] Fixed poke

---
 packages/chat-sdk/src/components/barter/BarterUi.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/chat-sdk/src/components/barter/BarterUi.tsx b/packages/chat-sdk/src/components/barter/BarterUi.tsx
index 4e42835cca..b33c757731 100644
--- a/packages/chat-sdk/src/components/barter/BarterUi.tsx
+++ b/packages/chat-sdk/src/components/barter/BarterUi.tsx
@@ -58,7 +58,9 @@ export const BarterUi = ({ roomId }: { roomId: string }) => {
   };
 
   useEffect(() => {
-    getActiveBarter(openPlugin.metadata?.barterId);
+    getActiveBarter(
+      openPlugin.type === "barter" ? openPlugin.metadata?.barterId ?? "" : ""
+    );
   }, [openPlugin?.metadata]);
 
   return (