chore: fix redirect on p/img click

mrgnlabs · Jan 13, 2025 · 2014b50 · 2014b50
1 parent ce5655c
commit 2014b50
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/apps/marginfi-v2-trading/src/components/common/Portfolio/PositionList/PositionListItem.tsx b/apps/marginfi-v2-trading/src/components/common/Portfolio/PositionList/PositionListItem.tsx
@@ -42,9 +42,12 @@ export const PositionListItem = ({ arenaPool }: props) => {
           e.target instanceof HTMLAnchorElement ||
           e.target instanceof SVGElement ||
           (e.target instanceof Element &&
-            (e.target.hasAttribute("data-state") || e.target.closest("[data-command-item]")))
+            (e.target.hasAttribute("data-state") ||
+              e.target.closest("[data-command-item]") ||
+              e.target.closest("[data-router-ignore]")))
         )
           return;
+
         router.push(`/trade/${arenaPool.groupPk.toBase58()}`);
       }}
     >

diff --git a/...end-box/components/action-input/components/bank-select/components/bank-list/bank-list.tsx b/...end-box/components/action-input/components/bank-select/components/bank-list/bank-list.tsx
@@ -151,6 +151,7 @@ export const BankList = ({
                     className="cursor-pointer h-[55px] px-3 font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground"
                   >
                     <BankItem
+                      data-router-ignore
                       rate={calculateRate(bank)}
                       lendingMode={lendingMode}
                       bank={bank}

diff --git a/...ages/mrgn-ui/src/components/action-box-v2/components/action-input/bank-item/bank-item.tsx b/...ages/mrgn-ui/src/components/action-box-v2/components/action-input/bank-item/bank-item.tsx
@@ -54,15 +54,23 @@ export const BankItem = ({
 
   return (
     <>
-      <div className="flex items-center gap-3">
-        <img src={bank.meta.tokenLogoUri} alt={bank.meta.tokenName} width={28} height={28} className="rounded-full" />
+      <div className="flex items-center gap-3" data-router-ignore>
+        <img
+          data-router-ignore
+          src={bank.meta.tokenLogoUri}
+          alt={bank.meta.tokenName}
+          width={28}
+          height={28}
+          className="rounded-full"
+        />
         <div>
-          <p className="flex items-center">
+          <p data-router-ignore className="flex items-center">
             {bank.meta.tokenSymbol}
             {!available && <span className="text-[11px] ml-1 font-light">(currently unavailable)</span>}
           </p>
           {lendingMode && (
             <p
+              data-router-ignore
               className={cn(
                 "text-xs font-normal",
                 (lendingMode === LendingModes.LEND || isRepay) && "text-success",
@@ -77,21 +85,25 @@ export const BankItem = ({
 
       {((!isRepay && lendingMode && lendingMode === LendingModes.BORROW && balance > 0) || showBalanceOverride) && (
         <div className="space-y-0.5 text-right font-normal text-sm">
-          <p>
+          <p data-router-ignore>
             {dynamicNumeralFormatter(balance, { tokenPrice: bank.info.oraclePrice.priceRealtime.price.toNumber() })}
           </p>
-          <p className="text-xs text-muted-foreground">{balancePrice}</p>
+          <p data-router-ignore className="text-xs text-muted-foreground">
+            {balancePrice}
+          </p>
         </div>
       )}
 
       {isRepay && openPosition > 0 && (
         <div className="space-y-0.5 text-right font-normal text-sm">
-          <p>
+          <p data-router-ignore>
             {dynamicNumeralFormatter(openPosition, {
               tokenPrice: bank.info.oraclePrice.priceRealtime.price.toNumber(),
             })}
           </p>
-          <p className="text-xs text-muted-foreground">{openPositionPrice}</p>
+          <p data-router-ignore className="text-xs text-muted-foreground">
+            {openPositionPrice}
+          </p>
         </div>
       )}
     </>

diff --git a/...omponents/action-box-v2/components/action-input/selected-bank-item/selected-bank-item.tsx b/...omponents/action-box-v2/components/action-input/selected-bank-item/selected-bank-item.tsx
@@ -14,11 +14,21 @@ type SelectedBankItemProps = {
 export const SelectedBankItem = ({ rate, bank, lendingMode }: SelectedBankItemProps) => {
   return (
     <>
-      <img src={bank.meta.tokenLogoUri} alt={bank.meta.tokenName} width={30} height={30} className="rounded-full" />
+      <img
+        data-router-ignore
+        src={bank.meta.tokenLogoUri}
+        alt={bank.meta.tokenName}
+        width={30}
+        height={30}
+        className="rounded-full"
+      />
       <div className="flex flex-col gap-1 mr-auto xs:mr-0 min-w-14">
-        <p className="leading-none text-sm">{bank.meta.tokenSymbol}</p>
+        <p data-router-ignore className="leading-none text-sm">
+          {bank.meta.tokenSymbol}
+        </p>
         {lendingMode && rate && (
           <p
+            data-router-ignore
             className={cn(
               "text-xs font-normal leading-none",
               lendingMode === LendingModes.LEND && "text-success",