Merge pull request #2008 from gmx-io/hide-share-for-non-owners

Hide share for non owner position and trade items

Author: qwinndev

src/components/PositionItem/PositionItem.tsx

@@ -60,7 +60,7 @@ export type Props = {
   showPnlAfterFees: boolean;
   onClosePositionClick?: () => void;
   onEditCollateralClick?: () => void;
-  onShareClick: () => void;
+  onShareClick?: () => void;
   onSelectPositionClick?: (tradeMode?: TradeMode, showCurtain?: boolean) => void;
   isLarge: boolean;
   onOrdersClick?: (key?: string) => void;
@@ -519,15 +519,16 @@ export function PositionItem(p: Props) {
               {renderNetValue()}
               {displayedPnl !== undefined && (
                 <div
-                  className={cx("text-body-small flex cursor-pointer items-center gap-2 numbers", {
+                  className={cx("text-body-small flex items-center gap-2 numbers", {
                     positive: displayedPnl > 0,
                     negative: displayedPnl < 0,
                     muted: displayedPnl == 0n,
+                    "cursor-pointer": Boolean(p.onShareClick),
                   })}
                   onClick={p.onShareClick}
                 >
                   {formatDeltaUsd(displayedPnl, displayedPnlPercentage)}
-                  <NewLinkThinIcon className="mt-1 size-14" />
+                  {p.onShareClick && <NewLinkThinIcon className="mt-1 size-14" />}
                 </div>
               )}
             </div>
@@ -664,15 +665,16 @@ export function PositionItem(p: Props) {
             </div>
             <div>
               <span
-                className={cx("flex cursor-pointer items-center gap-2 numbers", {
+                className={cx("flex items-center gap-2 numbers", {
                   positive: displayedPnl > 0,
                   negative: displayedPnl < 0,
                   muted: displayedPnl == 0n,
+                  "cursor-pointer": Boolean(p.onShareClick),
                 })}
                 onClick={p.onShareClick}
               >
                 {formatDeltaUsd(displayedPnl, displayedPnlPercentage)}
-                <NewLinkThinIcon className="mt-2 size-16" />
+                {p.onShareClick && <NewLinkThinIcon className="mt-2 size-16" />}
               </span>
             </div>
           </div>

src/components/PositionList/PositionList.tsx

@@ -13,6 +13,7 @@ import { TradeMode } from "domain/synthetics/trade";
 import { getByKey } from "lib/objects";
 import { userAnalytics } from "lib/userAnalytics";
 import { SharePositionClickEvent } from "lib/userAnalytics/types";
+import useWallet from "lib/wallets/useWallet";
 
 import { EmptyTableContent } from "components/EmptyTableContent/EmptyTableContent";
 import { OrderEditorContainer } from "components/OrderEditorContainer/OrderEditorContainer";
@@ -188,6 +189,7 @@ const PositionItemWrapper = memo(
     hideActions: boolean | undefined;
     onCancelOrder: (orderKey: string) => void;
   }) => {
+    const { account } = useWallet();
     const showPnlAfterFees = useSelector(selectShowPnlAfterFees);
     const handleEditCollateralClick = useCallback(
       () => onEditCollateralClick(position.key),
@@ -211,6 +213,8 @@ const PositionItemWrapper = memo(
       [onOrdersClick, position.key]
     );
 
+    const isShareAvailable = account === position.account;
+
     return (
       <PositionItem
         position={position}
@@ -222,7 +226,7 @@ const PositionItemWrapper = memo(
         isLarge={isLarge}
         hideActions={hideActions}
         onCancelOrder={handleCancelOrder}
-        onShareClick={handleShareClick}
+        onShareClick={isShareAvailable ? handleShareClick : undefined}
       />
     );
   }

src/components/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx

@@ -19,6 +19,7 @@ import {
 import { EMPTY_ARRAY } from "lib/objects";
 import { userAnalytics } from "lib/userAnalytics";
 import { SharePositionClickEvent } from "lib/userAnalytics/types";
+import useWallet from "lib/wallets/useWallet";
 import { buildAccountDashboardUrl } from "pages/AccountDashboard/buildAccountDashboardUrl";
 
 import Button from "components/Button/Button";
@@ -120,6 +121,7 @@ const PRICE_TOOLTIP_WIDTH = 400;
 
 export function TradeHistoryRow({ minCollateralUsd, tradeAction, shouldDisplayAccount, showDebugValues }: Props) {
   const chainId = useSelector(selectChainId);
+  const { account } = useWallet();
   const marketsInfoData = useMarketsInfoData();
 
   const msg = useMemo(() => {
@@ -200,6 +202,11 @@ export function TradeHistoryRow({ minCollateralUsd, tradeAction, shouldDisplayAc
     setIsShareModalOpen(true);
   }, [setIsShareModalOpen]);
 
+  const shouldDisplayShareButton =
+    isDecreaseOrderType(tradeAction.orderType) &&
+    tradeAction.eventName === TradeActionType.OrderExecuted &&
+    account === tradeAction.account;
+
   return (
     <>
       <TableTr
@@ -312,7 +319,7 @@ export function TradeHistoryRow({ minCollateralUsd, tradeAction, shouldDisplayAc
           )}
         </TableTd>
         <TableTd>
-          {isDecreaseOrderType(tradeAction.orderType) && tradeAction.eventName === TradeActionType.OrderExecuted ? (
+          {shouldDisplayShareButton ? (
             <Button variant="ghost" onClick={handleShareClick}>
               <NewLinkIconThin className="size-16" />
               <Trans>Share</Trans>