fix: ui issues (#403)

* fix: UI qa issues * fix: build
Synthetixio · Aug 20, 2024 · b16d56f · b16d56f
1 parent f8b8a4c
commit b16d56f
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 25 deletions.
diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx
@@ -509,7 +509,7 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
   const txSummaryItems = useMemo(() => {
     const items = [
       {
-        label: 'Total Collateral',
+        label: 'Locked ' + collateralType?.symbol,
         value: (
           <ChangeStat
             value={txSummary.currentCollateral}
@@ -543,6 +543,7 @@ export const DepositModal: DepositModalProps = ({ onClose, isOpen, title, liquid
       },
     ];
   }, [
+    collateralType?.symbol,
     isBase,
     liquidityPosition?.collateralPrice,
     txSummary.collateralChange,

diff --git a/liquidity/components/UndelegateModal/UndelegateModal.tsx b/liquidity/components/UndelegateModal/UndelegateModal.tsx
@@ -240,7 +240,7 @@ export const UndelegateModal: UndelegateModalProps = ({ onClose, isOpen, liquidi
   const txSummaryItems = useMemo(() => {
     const items = [
       {
-        label: 'Total ' + collateralType?.displaySymbol,
+        label: 'Locked ' + collateralType?.displaySymbol,
         value: (
           <ChangeStat
             value={txSummary.currentCollateral}

diff --git a/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx b/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx
@@ -30,7 +30,7 @@ const ClosePositionUi: FC<{
 
   return (
     <Flex flexDirection="column">
-      <Text color="gray.50" fontSize="xl" fontWeight="700">
+      <Text color="gray.50" fontSize="20px" fontWeight={700}>
         <ArrowBackIcon cursor="pointer" onClick={onClose} mr={2} />
         Close Position
       </Text>

diff --git a/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx b/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx
@@ -44,13 +44,16 @@ export const ClosePositionTransactions: FC<{
   const { data: CoreProxy } = useCoreProxy();
   const { network } = useNetwork();
   const toast = useToast({ isClosable: true, duration: 9000 });
+  const isBase = isBaseAndromeda(network?.id, network?.preset);
+
+  const debtSymbol = isBase ? collateralType.symbol : systemToken.symbol;
+  const collateralSymbol = collateralType.displaySymbol;
 
   const [txState, setTxState] = useState({
     step: 0,
     status: 'idle',
   });
 
-  const isBase = isBaseAndromeda(network?.id, network?.preset);
   const { data: wrapperToken } = useGetWrapperToken(
     getSpotMarketId(liquidityPosition?.accountCollateral.symbol)
   );
@@ -158,7 +161,7 @@ export const ClosePositionTransactions: FC<{
           <Text as="div">
             <Amount
               value={liquidityPosition?.collateralAmount || ZEROWEI}
-              suffix={` ${collateralType?.displaySymbol}`}
+              suffix={` ${collateralSymbol}`}
             />{' '}
             will be unlocked from the pool.
           </Text>
@@ -169,7 +172,7 @@ export const ClosePositionTransactions: FC<{
       if (liquidityPosition?.debt.gt(-0.00001)) {
         if (requireApprovalUSDC) {
           transactions.push({
-            title: 'Approve USDC transfer',
+            title: `Approve ${debtSymbol} transfer`,
             cb: () => approveUSDC(false),
           });
         }
@@ -179,8 +182,11 @@ export const ClosePositionTransactions: FC<{
         title: 'Unlock collateral',
         subtitle: (
           <Text as="div">
-            <Amount value={liquidityPosition?.collateralAmount || ZEROWEI} suffix={` USDC`} /> will
-            be unlocked from the pool.
+            <Amount
+              value={liquidityPosition?.collateralAmount || ZEROWEI}
+              suffix={` ${collateralSymbol}`}
+            />{' '}
+            will be unlocked from the pool.
           </Text>
         ),
         cb: () => undelegateBaseAndromeda(),
@@ -191,7 +197,7 @@ export const ClosePositionTransactions: FC<{
           title: 'Claim',
           subtitle: (
             <Text>
-              Claim <Amount value={liquidityPosition?.debt.abs()} suffix={` USDC`} />
+              Claim <Amount value={liquidityPosition?.debt.abs()} suffix={` ${debtSymbol}`} />
             </Text>
           ),
           cb: () => execBorrow(),
@@ -203,7 +209,8 @@ export const ClosePositionTransactions: FC<{
   }, [
     approve,
     approveUSDC,
-    collateralType?.displaySymbol,
+    collateralSymbol,
+    debtSymbol,
     execBorrow,
     execRepay,
     isBase,

diff --git a/liquidity/ui/src/components/Deposit/Deposit.tsx b/liquidity/ui/src/components/Deposit/Deposit.tsx
@@ -88,7 +88,7 @@ export const DepositUi: FC<{
   const txSummaryItems = useMemo(() => {
     const items = [
       {
-        label: 'Total Collateral',
+        label: 'Locked ' + symbol,
         value: (
           <ChangeStat
             value={currentCollateral}
@@ -121,7 +121,7 @@ export const DepositUi: FC<{
         ),
       },
     ];
-  }, [collateralChange, collateralPrice, currentCollateral, currentDebt, isBase]);
+  }, [collateralChange, collateralPrice, currentCollateral, currentDebt, isBase, symbol]);
 
   const overAvailableBalance = collateralChange.abs().gt(maxAmount);
 
@@ -231,7 +231,14 @@ export const DepositUi: FC<{
         </Alert>
       </Collapse>
 
-      <Collapse in={collateralChange.abs().gt(0)} animateOpacity>
+      <Collapse
+        in={
+          collateralChange.abs().gt(0) &&
+          !overAvailableBalance &&
+          collateralChange.add(currentCollateral).gte(minDelegation)
+        }
+        animateOpacity
+      >
         <TransactionSummary mb={6} items={txSummaryItems} />
       </Collapse>
       <Button

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx
@@ -8,6 +8,8 @@ import { TimeIcon } from '@chakra-ui/icons';
 import { useWithdrawTimer } from '../../../../../lib/useWithdrawTimer';
 import { useTokenPrice } from '../../../../../lib/useTokenPrice';
 import { DebtAmount } from './DebtAmount';
+import { useRewards } from '@snx-v3/useRewards';
+import { useMemo } from 'react';
 interface PositionRow extends LiquidityPositionType {
   final: boolean;
   isBase: boolean;
@@ -27,8 +29,8 @@ export function PositionRow({
   availableCollateral,
   accountId,
 }: PositionRow) {
+  const { data: rewardsData } = useRewards(poolId, collateralType?.tokenAddress, accountId);
   const collateralPrice = useTokenPrice(collateralType.symbol);
-
   const [queryParams] = useSearchParams();
   const navigate = useNavigate();
   const { minutes, hours, isRunning } = useWithdrawTimer(accountId);
@@ -41,6 +43,11 @@ export function PositionRow({
     });
   };
 
+  const hasRewards = useMemo(
+    () => (rewardsData || []).reduce((curr, acc) => curr + acc.claimableAmount.toNumber(), 0) > 0,
+    [rewardsData]
+  );
+
   return (
     <Tr borderBottomWidth={final ? 'none' : '1px'}>
       <Td border="none">
@@ -125,16 +132,18 @@ export function PositionRow({
             <Text color="white" lineHeight="1.25rem" fontFamily="heading" fontSize="sm">
               {!!apr ? apr.toFixed(2).concat('%') : '-'}
             </Text>
-            <Text
-              color="cyan.500"
-              fontFamily="heading"
-              fontSize="0.75rem"
-              lineHeight="1rem"
-              cursor="pointer"
-              onClick={() => handleNavigate('deposit')}
-            >
-              Claim Rewards
-            </Text>
+            {hasRewards && (
+              <Text
+                color="cyan.500"
+                fontFamily="heading"
+                fontSize="0.75rem"
+                lineHeight="1rem"
+                cursor="pointer"
+                onClick={() => handleNavigate('deposit')}
+              >
+                Claim Rewards
+              </Text>
+            )}
           </Flex>
         </Fade>
       </Td>

diff --git a/liquidity/ui/src/components/Undelegate/Undelegate.tsx b/liquidity/ui/src/components/Undelegate/Undelegate.tsx
@@ -93,7 +93,7 @@ export const UndelegateUi: FC<{
   const txSummaryItems = useMemo(() => {
     const items = [
       {
-        label: 'Total ' + symbol,
+        label: 'Locked ' + symbol,
         value: (
           <ChangeStat
             value={currentCollateral || ZEROWEI}