From 0ac7728f51c89f8e8145d72caf7ef74aed19685d Mon Sep 17 00:00:00 2001
From: Amy Tsang <amy0tsang@gmail.com>
Date: Tue, 23 Apr 2024 10:32:01 -0700
Subject: [PATCH 1/2] task: add synthetix alert

---
 apps/main/src/components/PoolLabel.tsx | 47 +++++++++++++++++++-------
 apps/main/src/hooks/usePoolAlert.tsx   | 40 ++++++++++++++++++++++
 2 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/apps/main/src/components/PoolLabel.tsx b/apps/main/src/components/PoolLabel.tsx
index 59f2c6bc..5d36282f 100644
--- a/apps/main/src/components/PoolLabel.tsx
+++ b/apps/main/src/components/PoolLabel.tsx
@@ -7,6 +7,7 @@ import usePoolAlert from '@/hooks/usePoolAlert'
 import useTokenAlert from '@/hooks/useTokenAlert'
 
 import { Chip } from '@/ui/Typography'
+import AlertBox from '@/ui/AlertBox'
 import AlertTooltipIcon from '@/ui/Tooltip/TooltipAlert'
 import Box from '@/ui/Box'
 import ChipPool from '@/components/ChipPool'
@@ -72,7 +73,7 @@ const PoolLabel = ({
             />
           )}
         </IconsWrapper>
-        <div>
+        <Box fillWidth>
           <PoolTypeWrapper>
             <TableCellReferenceAsset
               isCrypto={poolData?.pool?.isCrypto}
@@ -82,15 +83,20 @@ const PoolLabel = ({
           </PoolTypeWrapper>
 
           <Box flex flexAlignItems="center">
-            {poolAlert && poolAlert.isInformationOnly ? (
-              <AlertTooltipIcon placement="start" {...poolAlert}>
-                {poolAlert.message}
-              </AlertTooltipIcon>
-            ) : tokenAlert ? (
-              <AlertTooltipIcon minWidth="300px" placement="start" {...tokenAlert}>
-                {tokenAlert.message}
-              </AlertTooltipIcon>
-            ) : null}
+            {!isMobile && (
+              <>
+                {poolAlert?.isInformationOnly && (
+                  <AlertTooltipIcon placement="start" {...poolAlert}>
+                    {poolAlert.message}
+                  </AlertTooltipIcon>
+                )}
+                {tokenAlert && (
+                  <AlertTooltipIcon minWidth="300px" placement="start" {...tokenAlert}>
+                    {tokenAlert.message}
+                  </AlertTooltipIcon>
+                )}
+              </>
+            )}
             {pool && (
               <ChipPool
                 isHighlightPoolName={isHighlightPoolName}
@@ -134,9 +140,19 @@ const PoolLabel = ({
             )}
           </PoolLabelTokensWrapper>
           {quickViewValue && <Chip>{quickViewValue}</Chip>}
-        </div>
+        </Box>
       </Wrapper>
-      {poolAlert && !poolAlert.isInformationOnly && <Box padding="0.5rem 0 0 0">{poolAlert.message}</Box>}
+
+      {tokenAlert && isMobile && <StyledAlertBox alertType={tokenAlert.alertType}>{tokenAlert.message}</StyledAlertBox>}
+      {poolAlert && (
+        <>
+          {!poolAlert.isInformationOnly ? (
+            <Box padding="0.5rem 0 0 0">{poolAlert.message}</Box>
+          ) : isMobile ? (
+            <StyledAlertBox alertType={poolAlert.alertType}>{poolAlert.message}</StyledAlertBox>
+          ) : null}
+        </>
+      )}
     </div>
   )
 }
@@ -170,4 +186,11 @@ const TokenLabel = styled.span`
   font-size: var(--font-size-2);
 `
 
+const StyledAlertBox = styled(AlertBox)`
+  font-size: var(--font-size-2);
+  margin: var(--spacing-2) 0;
+  max-height: 100px;
+  overflow: scroll;
+`
+
 export default PoolLabel
diff --git a/apps/main/src/hooks/usePoolAlert.tsx b/apps/main/src/hooks/usePoolAlert.tsx
index 14680538..a46267ab 100644
--- a/apps/main/src/hooks/usePoolAlert.tsx
+++ b/apps/main/src/hooks/usePoolAlert.tsx
@@ -9,6 +9,7 @@ import useStore from '@/store/useStore'
 
 import { RCCrossCurve } from '@/ui/images'
 import { ExternalLink, InternalLink } from '@/ui/Link'
+import Box from '@/ui/Box'
 import PoolAlertCustomMessage from '@/components/PoolAlertCustomMessage'
 
 const usePoolAlert = (poolAddress: string | undefined, hasVyperVulnerability: boolean | undefined) => {
@@ -76,6 +77,36 @@ const usePoolAlert = (poolAddress: string | undefined, hasVyperVulnerability: bo
         ),
       }
     }
+    const synthetixAlert = (): PoolAlert => ({
+      alertType: 'warning',
+      isInformationOnly: true,
+      isCloseOnTooltipOnly: true,
+      minWidth: '350px',
+      message: (
+        <MessageWrapper>
+          <Box grid gridGap={2}>
+            <p>
+              Please note that exchanges on synthetix synths are expected to be disabled and users can either withdraw
+              liquidity from the underlying token, or redeem their synths to sUSD on{' '}
+              <ExternalLink $noStyles href="https://staking.synthetix.io/wallet/balances/">
+                https://staking.synthetix.io/wallet/balances/
+              </ExternalLink>
+            </p>
+            <p>
+              Users are encouraged to exit the pools in order to avoid getting their holdings&lsquo; value diluted with
+              the discountRate For more information please refer to{' '}
+              <ExternalLink
+                $noStyles
+                href="https://gov.curve.fi/t/kill-gauges-on-all-non-susd-curve-pools-on-ethereum/10033/2"
+              >
+                https://gov.curve.fi/t/kill-gauges-on-all-non-susd-curve-pools-on-ethereum/10033/2
+              </ExternalLink>
+            </p>
+            <p>Please note that sUSD is not involved, so these would be on the other pools sETH, sBTC, sForex ...</p>
+          </Box>
+        </MessageWrapper>
+      ),
+    })
 
     // Fantom networks
     const crossCurveAlert = (externalLinks: { label: string; url: string }[]): PoolAlert => ({
@@ -138,6 +169,15 @@ const usePoolAlert = (poolAddress: string | undefined, hasVyperVulnerability: bo
       '0x68934f60758243eafaf4d2cfed27bf8010bede3a': zunamiAlert(),
       '0x0fa949783947bf6c1b171db13aeacbb488845b3f': geistFinanceAlert(),
       '0xc2d54ffb8a61e146110d2fbdd03b12467fe155ac': yPrismaAlert(),
+      '0xf253f83aca21aabd2a20553ae0bf7f65c755a07f': synthetixAlert(),
+      '0x7fc77b5c7614e1533320ea6ddc2eb61fa00a9714': synthetixAlert(),
+      '0xc5424b857f758e906013f3555dad202e4bdb4567': synthetixAlert(),
+      '0x0ce6a5ff5217e38315f87032cf90686c96627caa': synthetixAlert(),
+      '0x9c2c8910f113181783c249d8f6aa41b51cde0f0c': synthetixAlert(),
+      '0x8461a004b50d321cb22b7d034969ce6803911899': synthetixAlert(),
+      '0x19b080fe1ffa0553469d20ca36219f17fcf03859': synthetixAlert(),
+      '0x8818a9bb44fbf33502be7c15c500d0c783b73067': synthetixAlert(),
+      '0x3f1b0278a9ee595635b61817630cc19de792f506': synthetixAlert(),
       // arbitrum
       '0x960ea3e3c7fb317332d990873d354e18d7645590': possibleVyperExploitedAlert(), // tricrypto
     }

From 272b84e6ce14e2b07e810170a0428e87b6098db4 Mon Sep 17 00:00:00 2001
From: Amy Tsang <amy0tsang@gmail.com>
Date: Tue, 23 Apr 2024 13:44:05 -0700
Subject: [PATCH 2/2] fix: pool list tooltip alert width

---
 apps/loan/src/components/CollateralLabel.tsx | 2 +-
 apps/main/src/components/PoolLabel.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/loan/src/components/CollateralLabel.tsx b/apps/loan/src/components/CollateralLabel.tsx
index 79b5d857..75a16973 100644
--- a/apps/loan/src/components/CollateralLabel.tsx
+++ b/apps/loan/src/components/CollateralLabel.tsx
@@ -43,7 +43,7 @@ const CollateralLabel = ({ className, chainId, isVisible, collateralData, tableL
       <div>
         <Box flex flexAlignItems="center">
           {collateralAlert?.isDeprecated && (
-            <AlertTooltipIcon placement="start" {...collateralAlert}>
+            <AlertTooltipIcon minWidth="300px" placement="start" {...collateralAlert}>
               {collateralAlert.message}
             </AlertTooltipIcon>
           )}
diff --git a/apps/main/src/components/PoolLabel.tsx b/apps/main/src/components/PoolLabel.tsx
index 5d36282f..55f7c412 100644
--- a/apps/main/src/components/PoolLabel.tsx
+++ b/apps/main/src/components/PoolLabel.tsx
@@ -86,7 +86,7 @@ const PoolLabel = ({
             {!isMobile && (
               <>
                 {poolAlert?.isInformationOnly && (
-                  <AlertTooltipIcon placement="start" {...poolAlert}>
+                  <AlertTooltipIcon minWidth="300px" placement="start" {...poolAlert}>
                     {poolAlert.message}
                   </AlertTooltipIcon>
                 )}