UI/fixes 2 (#377)

* Remove text decoration * fix for positions apr * tooltip * ui fixes
Synthetixio · Jul 23, 2024 · b4669f8 · b4669f8
1 parent 6607930
commit b4669f8
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 59 deletions.
diff --git a/liquidity/ui/src/components/Assets/AssetTable/AssetsRow.tsx b/liquidity/ui/src/components/Assets/AssetTable/AssetsRow.tsx
@@ -154,7 +154,6 @@ export const AssetsRow = ({
               {activeWallet?.address ? 'Deposit' : 'Connect'}
             </Button>
           </Fade>
-
           <Fade in>
             <Tooltip
               label={

diff --git a/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx b/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx
@@ -279,6 +279,7 @@ export const ClosePositionTransactions: FC<{
       toast.closeAll();
       toast({
         title: 'Transaction failed',
+        variant: 'left-accent',
         description: contractError ? (
           <ContractError contractError={contractError} />
         ) : (

diff --git a/liquidity/ui/src/components/Manage/PositionTitle.tsx b/liquidity/ui/src/components/Manage/PositionTitle.tsx
@@ -2,8 +2,8 @@ import { Flex, Heading } from '@chakra-ui/react';
 import { FC } from 'react';
 import { useCollateralDisplayName } from '../../pages';
 import { NetworkIcon, useNetwork } from '@snx-v3/useBlockchain';
-import { CollateralIcon } from '@snx-v3/icons';
 import { useNavigate } from 'react-router-dom';
+import { TokenIcon } from '../TokenIcon';
 
 export const PositionTitle: FC<{
   collateralSymbol?: string;
@@ -19,17 +19,15 @@ export const PositionTitle: FC<{
     <Flex alignItems="center">
       <Flex
         bg="linear-gradient(180deg, #08021E 0%, #1F0777 100%)"
-        height="34px"
-        width="34px"
         justifyContent="center"
         alignItems="center"
         borderRadius="100%"
         display="flex"
       >
-        <CollateralIcon
-          symbol={collateralSymbol}
-          width="42px"
-          height="42px"
+        <TokenIcon
+          symbol={collateralSymbol || ''}
+          height={42}
+          width={42}
           fill="#0B0B22"
           color="#00D1FF"
         />
@@ -59,7 +57,6 @@ export const PositionTitle: FC<{
         >
           {poolName}
           <Flex
-            ml={2}
             alignItems="normal"
             fontSize={['10px', '12px']}
             color="gray.500"

diff --git a/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx b/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx
@@ -324,7 +324,7 @@ export const PoolCard = ({
                       <Flex
                         minWidth="120px"
                         alignItems="center"
-                        _hover={{ textDecoration: 'underline', cursor: 'pointer' }}
+                        _hover={{ cursor: 'pointer' }}
                         onClick={onClick}
                       >
                         <TokenIcon w={26} h={26} symbol={type.symbol} />
@@ -393,37 +393,40 @@ export const PoolCard = ({
                       </Text>
                     </Td>
                     <Td border="none" textAlign="left" px={4}>
-                      <Tooltip
-                        label={
-                          <Flex direction="column">
-                            <Flex justifyContent="space-between">
-                              <Text fontWeight={700} mr={2}>
-                                Total APR:
-                              </Text>
-                              <Text fontWeight={700}>{formatApr(apr28d * 100, network?.id)}</Text>
-                            </Flex>
-                            <Flex justifyContent="space-between">
-                              <Text mr={2}>Performance:</Text>
-                              <Text>{formatApr(apr28dPnl * 100, network?.id)}</Text>
-                            </Flex>
-                            <Flex justifyContent="space-between">
-                              <Text mr={2}>Rewards: </Text>
-                              <Text>{formatApr(apr28dRewards * 100, network?.id)}</Text>
-                            </Flex>
-                          </Flex>
-                        }
+                      <Text
+                        fontFamily="heading"
+                        fontSize="14px"
+                        lineHeight="20px"
+                        fontWeight={500}
+                        color="white"
                       >
-                        <Text
-                          fontFamily="heading"
-                          fontSize="14px"
-                          lineHeight="20px"
-                          fontWeight={500}
-                          color="white"
+                        {formatApr(apr28d * 100, network?.id)}
+
+                        <Tooltip
+                          label={
+                            <Flex direction="column">
+                              <Flex justifyContent="space-between">
+                                <Text fontWeight={700} mr={2}>
+                                  Total APR:
+                                </Text>
+                                <Text fontWeight={700}>{formatApr(apr28d * 100, network?.id)}</Text>
+                              </Flex>
+                              <Flex justifyContent="space-between">
+                                <Text mr={2}>Performance:</Text>
+                                <Text>{formatApr(apr28dPnl * 100, network?.id)}</Text>
+                              </Flex>
+                              <Flex justifyContent="space-between">
+                                <Text mr={2}>Rewards: </Text>
+                                <Text>{formatApr(apr28dRewards * 100, network?.id)}</Text>
+                              </Flex>
+                            </Flex>
+                          }
                         >
-                          {formatApr(apr28d * 100, network?.id)}
-                          <Sparkles w="14px" h="14px" mb={1} ml="0.5px" mt="1px" />
-                        </Text>
-                      </Tooltip>
+                          <Flex display="inline">
+                            <Sparkles w="14px" h="14px" mb={1} ml="0.5px" mt="1px" />
+                          </Flex>
+                        </Tooltip>
+                      </Text>
                     </Td>
                     <Td border="none" textAlign="right" pl={4} pr={0}>
                       <Button

diff --git a/liquidity/ui/src/components/Positions/PositionsList.tsx b/liquidity/ui/src/components/Positions/PositionsList.tsx
@@ -35,7 +35,7 @@ export const PositionsList = () => {
       <PositionsTable
         isLoading={isLoading}
         positions={parsedPositions}
-        apr={apr?.combinedApr}
+        apr={apr?.collateralAprs}
         systemToken={systemToken}
       />
     </Flex>

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionTableHeader.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionTableHeader.tsx
@@ -18,9 +18,14 @@ export function PositionTableHeader({ isBase }: { isBase: boolean }) {
           Collateral
         </Th>
         <Th textAlign="right" border="none" textTransform="unset" py={5}>
-          <Text color="gray.600" fontFamily="heading" fontSize="12px" lineHeight="16px" mr={1}>
-            Locked
-          </Text>
+          <Flex justifyContent="flex-end" alignItems="center">
+            <Text color="gray.600" fontFamily="heading" fontSize="12px" lineHeight="16px" mr={1}>
+              Locked
+            </Text>
+            <Tooltip label="Unlocked assets can be locked into a position at any time or withdrawn after 24h since last activity">
+              <InfoIcon w="10px" h="10px" />
+            </Tooltip>
+          </Flex>
         </Th>
         <Th textAlign="right" border="none" textTransform="unset" py={5}>
           <Text color="gray.600" fontFamily="heading" fontSize="12px" lineHeight="16px" mr={1}>

diff --git a/liquidity/ui/src/components/Positions/PositionsTable/PositionsTable.tsx b/liquidity/ui/src/components/Positions/PositionsTable/PositionsTable.tsx
@@ -15,7 +15,7 @@ import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 interface PositionsTableInterface {
   isLoading: boolean;
   positions?: LiquidityPositionType[];
-  apr?: number;
+  apr?: any[];
   systemToken?: {
     symbol?: string;
     name?: string;
@@ -104,17 +104,24 @@ export const PositionsTable = ({
                 <PositionsRowLoading />
               ) : (
                 <>
-                  {positions?.map((position, index) => (
-                    <PositionRow
-                      key={position.poolName.concat(index.toString())}
-                      {...position}
-                      final={index === positions.length - 1}
-                      isBase={isBase}
-                      apr={apr}
-                      systemTokenSymbol={systemToken?.symbol}
-                      collateralAmount={position.collateralAmount}
-                    />
-                  ))}
+                  {positions?.map((position, index) => {
+                    const positionApr = apr?.find(
+                      (apr) =>
+                        apr.collateralType.toLowerCase() ===
+                        position.collateralType.tokenAddress.toLowerCase()
+                    );
+
+                    return (
+                      <PositionRow
+                        key={position.poolName.concat(index.toString())}
+                        {...position}
+                        final={index === positions.length - 1}
+                        isBase={isBase}
+                        apr={positionApr?.apr28d * 100}
+                        systemTokenSymbol={systemToken?.symbol}
+                      />
+                    );
+                  })}
                 </>
               )}
             </Tbody>

diff --git a/liquidity/ui/src/pages/Manage.tsx b/liquidity/ui/src/pages/Manage.tsx
@@ -63,11 +63,24 @@ export const ManageUi: FC<{
   collateralSymbol?: string;
   poolName?: string;
   poolId?: string;
-}> = ({ isLoading, rewards, liquidityPosition, network, collateralSymbol, poolName, poolId }) => {
+}> = ({
+  collateralType,
+  isLoading,
+  rewards,
+  liquidityPosition,
+  network,
+  collateralSymbol,
+  poolName,
+  poolId,
+}) => {
   const [closePosition, setClosePosition] = useState(false);
 
   const { data: poolData } = usePool(Number(network?.id), String(poolId));
 
+  const positionApr = poolData?.apr.collateralAprs.find(
+    (item: any) => item.collateralType.toLowerCase() === collateralType?.tokenAddress.toLowerCase()
+  );
+
   return (
     <Box mb={12} mt={8}>
       <Flex
@@ -85,7 +98,6 @@ export const ManageUi: FC<{
           isOpen={false}
           poolId={poolId}
         />
-
         {poolData && (
           <Flex alignItems={['center', 'flex-end']} direction="column">
             <Tooltip label="APR is averaged over the trailing 28 days and is comprised of both performance and rewards">
@@ -101,8 +113,8 @@ export const ManageUi: FC<{
               </Text>
             </Tooltip>
             <Text fontWeight="bold" fontSize="20px" color="white" lineHeight="36px">
-              {poolData.apr.combinedApr > 0
-                ? `${poolData.apr.combinedApr.toFixed(2)?.concat('%')}`
+              {poolData && positionApr.apr28d > 0
+                ? `${(positionApr.apr28d * 100).toFixed(2)?.concat('%')}`
                 : '-'}
             </Text>
           </Flex>
@@ -229,6 +241,7 @@ export const Manage = () => {
                 liquidityPosition={liquidityPosition}
                 network={network}
                 collateralSymbol={collateralSymbol}
+                collateralType={collateralType}
               />
             )}