Claim success banner on mainnet

liquidity/components/ClaimModal/ClaimModal.tsx

@@ -13,13 +13,15 @@ import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition';
 import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
 import { useSystemToken } from '@snx-v3/useSystemToken';
 import { wei } from '@synthetixio/wei';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
+import { ClaimSuccessBanner } from './ClaimSuccessBanner';
 
 export function ClaimModal({ onClose }: { onClose: () => void }) {
   const [params] = useParams<PositionPageSchemaType>();
   const { debtChange, setDebtChange } = useContext(ManagePositionContext);
   const { network } = useNetwork();
+  const [showClaimBanner, setShowClaimBanner] = useState(false);
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
   const { data: liquidityPosition } = useLiquidityPosition({
     accountId: params.accountId,
@@ -81,32 +83,47 @@ export function ClaimModal({ onClose }: { onClose: () => void }) {
     network?.preset === 'andromeda' ? collateralType?.displaySymbol : systemToken?.symbol;
 
   if (txnState.txnStatus === 'success') {
-    return (
-      <LiquidityPositionUpdated
-        onClose={() => {
-          settleBorrow();
-          onClose();
-        }}
-        title="Debt successfully Updated"
-        subline={
-          <>
-            Your <b>Debt</b> has been updated, read more about it in the{' '}
-            <Link
-              href="https://docs.synthetix.io/v/synthetix-v3-user-documentation"
-              target="_blank"
-              color="cyan.500"
-            >
-              Synthetix V3 Documentation
-            </Link>
-          </>
-        }
-        alertText={
-          <>
-            <b>Debt</b> successfully Updated
-          </>
-        }
-      />
-    );
+    if (showClaimBanner) {
+      return (
+        <ClaimSuccessBanner
+          onClose={() => {
+            settleBorrow();
+            onClose();
+          }}
+        />
+      );
+    } else {
+      return (
+        <LiquidityPositionUpdated
+          onClose={() => {
+            if (network?.id === 1 && network?.preset === 'main') {
+              setShowClaimBanner(true);
+            } else {
+              settleBorrow();
+              onClose();
+            }
+          }}
+          title="Debt successfully Updated"
+          subline={
+            <>
+              Your <b>Debt</b> has been updated, read more about it in the{' '}
+              <Link
+                href="https://docs.synthetix.io/v/synthetix-v3-user-documentation"
+                target="_blank"
+                color="cyan.500"
+              >
+                Synthetix V3 Documentation
+              </Link>
+            </>
+          }
+          alertText={
+            <>
+              <b>Debt</b> successfully Updated
+            </>
+          }
+        />
+      );
+    }
   }
 
   return (

liquidity/components/ClaimModal/ClaimSuccessBanner.tsx

@@ -0,0 +1,76 @@
+import { ArrowUpIcon } from '@chakra-ui/icons';
+import { Button, Divider, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
+import SynthetixLogo from '../../lib/useBlockchain/SynthetixIcon.svg';
+
+export function ClaimSuccessBanner({ onClose }: { onClose: () => void }) {
+  return (
+    <Flex
+      data-cy="claim success"
+      flexDir="column"
+      gap="6"
+      borderColor="gray.900"
+      rounded="base"
+      height="fit-content"
+    >
+      <Heading color="gray.50" fontSize="20px" fontWeight={700}>
+        What can you do with your sUSD?
+      </Heading>
+      <Divider />
+
+      <Flex flexWrap="wrap" px={1} alignItems="center" gap={4}>
+        <Image src={SynthetixLogo} width={42} />
+
+        <Flex flexDir="column">
+          <Text color="white" fontSize="16px" fontWeight={800}>
+            Trade L1 Perp
+          </Text>
+          <Text color="white" fontSize="14px" fontWeight={300}>
+            Trade with synthetix integrators
+          </Text>
+        </Flex>
+
+        <Text ml="auto" color="white" fontSize="12px" fontWeight={800}>
+          Coming soon
+        </Text>
+      </Flex>
+
+      <Flex flexWrap="wrap" px={1} alignItems="center" gap={4} mt={4} mb={2}>
+        <Image width="42px" src="/curve.png" alt="Curve" />
+
+        <Flex flexDir="column">
+          <Text color="white" fontSize="16px" fontWeight={800}>
+            sUSD/USDC Pool
+          </Text>
+          <Text color="white" fontSize="14px" fontWeight={300}>
+            Curve
+          </Text>
+        </Flex>
+
+        <Button
+          as={Link}
+          ml="auto"
+          size="sm"
+          href="https://curve.fi/#/ethereum/pools/factory-stable-ng-258/deposit"
+          target="_blank"
+          textDecoration="none"
+          _hover={{ textDecoration: 'none' }}
+          display="flex"
+          alignItems="center"
+          fontWeight={700}
+          gap="2"
+        >
+          Deposit on Curve{' '}
+          <ArrowUpIcon
+            style={{
+              transform: 'rotate(45deg)',
+            }}
+          />
+        </Button>
+      </Flex>
+
+      <Button onClick={onClose} variant="outline" colorScheme="gray" w="100%">
+        Later
+      </Button>
+    </Flex>
+  );
+}

liquidity/ui/src/components/MigrateUSD/MigrateUSDTransaction.tsx

@@ -172,7 +172,7 @@ export function MigrateUSDTransaction({
         }
         status={{
           failed: txState.step === 2 && txState.status === 'error',
-          success: txState.step === 2 && txState.status === 'sucess',
+          success: txState.step === 2 && txState.status === 'success',
           loading: txState.step === 2 && txState.status === 'pending',
         }}
       />
@@ -184,7 +184,7 @@ export function MigrateUSDTransaction({
               return 'Retry';
             case txState.status === 'pending':
               return 'Processing...';
-            case txState.step === 2 && txState.status === 'sucess':
+            case txState.step === 2 && txState.status === 'success':
               return 'Done';
             default:
               return 'Execute Transaction';