From 481e9cb83f317cebff779e01aa998f504647fb24 Mon Sep 17 00:00:00 2001
From: Noisekit <28145325+noisekit@users.noreply.github.com>
Date: Tue, 24 Dec 2024 21:14:29 +1100
Subject: [PATCH] Fix Migrate to V3 link (#126)

---
 .../CollateralAlert/CollateralAlert.tsx       | 35 ++++++++++++-------
 .../components/Migration/MigrationBanner.tsx  |  8 ++---
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/liquidity/ui/src/components/CollateralAlert/CollateralAlert.tsx b/liquidity/ui/src/components/CollateralAlert/CollateralAlert.tsx
index 51a08c851..003a15ad3 100644
--- a/liquidity/ui/src/components/CollateralAlert/CollateralAlert.tsx
+++ b/liquidity/ui/src/components/CollateralAlert/CollateralAlert.tsx
@@ -1,20 +1,31 @@
-import { Alert, AlertIcon, AlertProps, Text } from '@chakra-ui/react';
-import Wei from '@synthetixio/wei';
+import { Alert, AlertIcon, AlertProps, Link, Text } from '@chakra-ui/react';
+import { makeSearch, type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
+import { type Wei } from '@synthetixio/wei';
 
-interface CollateralAlertProps extends AlertProps {
-  tokenBalance: Wei;
-}
-
-export const CollateralAlert = ({ tokenBalance, ...props }: CollateralAlertProps) => {
+export function CollateralAlert({ tokenBalance, ...props }: { tokenBalance: Wei } & AlertProps) {
+  const [, setParams] = useParams<PositionPageSchemaType>();
   return (
     <Alert borderLeftColor="cyan.500" borderRadius="6px" {...props}>
       <AlertIcon color="cyan.500" />
       <Text color="white" fontFamily="heading" fontSize="16px" lineHeight="24px">
-        You have a {tokenBalance.toString(2)} SNX active staking position on V2.
-        <Text as="span" color="cyan.500" cursor="pointer">
-          &nbsp;Migrate to V3
-        </Text>
+        You have a {tokenBalance.toString(2)} SNX active staking position on V2.{' '}
+        <Link
+          color="cyan.500"
+          href={`?${makeSearch({
+            page: 'dashboard',
+            migrate: 'snx',
+          })}`}
+          onClick={(e) => {
+            e.preventDefault();
+            setParams({
+              page: 'dashboard',
+              migrate: 'snx',
+            });
+          }}
+        >
+          Migrate to V3
+        </Link>
       </Text>
     </Alert>
   );
-};
+}
diff --git a/liquidity/ui/src/components/Migration/MigrationBanner.tsx b/liquidity/ui/src/components/Migration/MigrationBanner.tsx
index 748a16554..fa05d593e 100644
--- a/liquidity/ui/src/components/Migration/MigrationBanner.tsx
+++ b/liquidity/ui/src/components/Migration/MigrationBanner.tsx
@@ -128,7 +128,7 @@ export function MigrationBanner({
             </>
           )}
 
-          {type === 'alert' && (
+          {type === 'alert' ? (
             <Alert mb={6} borderLeftColor="cyan.500" borderRadius="6px">
               <AlertIcon color="cyan.500" />
               <Text color="white" fontFamily="heading" fontSize="16px" lineHeight="24px">
@@ -136,13 +136,13 @@ export function MigrationBanner({
                 <Text as="span" textTransform="capitalize">
                   {network.name}
                 </Text>
-                .
+                .{' '}
                 <Text onClick={onClick} as="span" color="cyan.500" cursor="pointer">
-                  &nbsp;Migrate to V3
+                  Migrate to V3
                 </Text>
               </Text>
             </Alert>
-          )}
+          ) : null}
         </Fade>
       )}
     </>