Fix Migrate to V3 link (#126)

Synthetixio · Dec 24, 2024 · 481e9cb · 481e9cb
1 parent b11d47f
commit 481e9cb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git 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
@@ -128,21 +128,21 @@ 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">
                 You have a <Amount value={data?.collateral} /> SNX active staking position on V2 on{' '}
                 <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>
       )}
     </>