UI improvements (#400)

* fix: position row asset price not loading * fix: hide close position inside a manage flow
Synthetixio · Aug 16, 2024 · f8b8a4c · f8b8a4c
1 parent cdb925b
commit f8b8a4c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/liquidity/ui/src/components/Manage/ManageActions.tsx b/liquidity/ui/src/components/Manage/ManageActions.tsx
@@ -44,7 +44,7 @@ const validActions = [
   'withdraw-debt',
 ] as const;
 const ManageActionSchema = z.enum(validActions);
-type ManageAction = z.infer<typeof ManageActionSchema>;
+export type ManageAction = z.infer<typeof ManageActionSchema>;
 
 const getInitialTab = (manageAction?: ManageAction) => {
   if (!manageAction || COLLATERALACTIONS.find((aciton) => aciton.link === manageAction)) {
@@ -188,14 +188,21 @@ const ManageActionUi: FC<{
   );
 };
 
-export const ManageAction = ({ liquidityPosition }: { liquidityPosition?: LiquidityPosition }) => {
+export const ManageAction = ({
+  liquidityPosition,
+  setTxnModalOpen,
+  txnModalOpen,
+}: {
+  liquidityPosition?: LiquidityPosition;
+  setTxnModalOpen: (action: ManageAction | null) => void;
+  txnModalOpen: ManageAction | null;
+}) => {
   const params = useParams();
   const { network } = useNetwork();
 
   const navigate = useNavigate();
   const location = useLocation();
 
-  const [txnModalOpen, setTxnModalOpen] = useState<ManageAction | null>(null);
   const { debtChange, collateralChange, setCollateralChange, setDebtChange, setWithdrawAmount } =
     useContext(ManagePositionContext);
 
@@ -225,7 +232,7 @@ export const ManageAction = ({ liquidityPosition }: { liquidityPosition?: Liquid
       }
       setTxnModalOpen(parsedAction);
     },
-    [isFormValid, parsedAction]
+    [isFormValid, parsedAction, setTxnModalOpen]
   );
 
   useEffect(() => {

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsRow.tsx
@@ -1,4 +1,4 @@
-import { Button, Collapse, Fade, Flex, Td, Text, Tooltip, Tr } from '@chakra-ui/react';
+import { Box, Button, Collapse, Fade, Flex, Td, Text, Tooltip, Tr } from '@chakra-ui/react';
 import { TokenIcon } from '../../TokenIcon';
 import { LiquidityPositionType } from '@snx-v3/useLiquidityPositions';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -27,7 +27,8 @@ export function PositionRow({
   availableCollateral,
   accountId,
 }: PositionRow) {
-  const collateralPrice = useTokenPrice(collateralType.displaySymbol);
+  const collateralPrice = useTokenPrice(collateralType.symbol);
+
   const [queryParams] = useSearchParams();
   const navigate = useNavigate();
   const { minutes, hours, isRunning } = useWithdrawTimer(accountId);
@@ -100,7 +101,7 @@ export function PositionRow({
               </Tooltip>
             )}
           </Text>
-          <Text color="gray.500" fontFamily="heading" fontSize="0.75rem" lineHeight="1rem">
+          <Box color="gray.500" fontFamily="heading" fontSize="0.75rem" lineHeight="1rem">
             {availableCollateral.gt(0) && !isRunning ? (
               <Text
                 color="cyan.500"
@@ -115,7 +116,7 @@ export function PositionRow({
             ) : (
               <Amount value={availableCollateral} suffix={` ${collateralType.symbol.toString()}`} />
             )}
-          </Text>
+          </Box>
         </Flex>
       </Td>
       <Td border="none">

diff --git a/liquidity/ui/src/pages/Manage.tsx b/liquidity/ui/src/pages/Manage.tsx
@@ -86,6 +86,7 @@ export const ManageUi: FC<{
 
   const { data: poolData } = usePool(Number(network?.id), String(poolId));
 
+  const [txnModalOpen, setTxnModalOpen] = useState<ManageAction | null>(null);
   const positionApr = poolData?.apr?.collateralAprs?.find(
     (item: any) => item.collateralType.toLowerCase() === collateralType?.tokenAddress.toLowerCase()
   );
@@ -142,9 +143,13 @@ export const ManageUi: FC<{
             flexDirection="column"
           >
             <BorderBox flex={1} p={6} flexDirection="column" bg="navy.700" height="fit-content">
-              <ManageAction liquidityPosition={liquidityPosition} />
+              <ManageAction
+                liquidityPosition={liquidityPosition}
+                setTxnModalOpen={setTxnModalOpen}
+                txnModalOpen={txnModalOpen}
+              />
             </BorderBox>
-            {liquidityPosition?.collateralAmount.gt(0) && (
+            {liquidityPosition?.collateralAmount.gt(0) && !txnModalOpen && (
               <Text
                 textAlign="center"
                 cursor="pointer"