refactor: add active/closed farming cards, style modal window

src/components/common/Table/dataTable.tsx

@@ -84,7 +84,9 @@ const DataTable = <TData, TValue>({
                         key={'in-farming-positions'}
                         className="hover:bg-transparent flex p-4 border-none"
                     >
-                        <td className="ml-4">On Farming</td>
+                        <td className="ml-4 whitespace-nowrap w-12">
+                            On Farming
+                        </td>
                     </TableRow>
                 );
                 firstMatchFound = true;
@@ -141,7 +143,7 @@ const DataTable = <TData, TValue>({
                         key={'closed-positions'}
                         className="hover:bg-transparent flex p-4 border-none"
                     >
-                        <td className="ml-4">Closed</td>
+                        <td className="ml-4 whitespace-nowrap w-12">Closed</td>
                     </TableRow>
                 );
                 firstMatchFound = true;

src/components/modals/SelectPositionFarmModal/index.tsx

@@ -87,16 +87,16 @@ export function SelectPositionFarmModal({
                 </Button>
             </DialogTrigger>
             <DialogContent
-                className="min-w-[500px] rounded-3xl bg-card"
+                className="max-w-[500px] rounded-3xl bg-card"
                 style={{ borderRadius: '32px' }}
             >
                 <DialogHeader>
-                    <DialogTitle className="font-bold select-none mt-2">
+                    <DialogTitle className="font-bold select-none mt-2 max-md:mx-auto">
                         Select Position
                     </DialogTitle>
                 </DialogHeader>
 
-                <ul className="grid grid-cols-2 gap-4 my-4">
+                <ul className="grid grid-cols-2 max-md:grid-cols-1 max-h-[300px] gap-4 my-4 overflow-auto">
                     {availablePositions.length > 0 ? (
                         availablePositions.map((position) => {
                             const currentFormattedPosition = positionsData.find(

src/components/position/CollectFarmings/index.tsx → src/components/position/ActiveFarmingCard/index.tsx

@@ -10,15 +10,15 @@ import Loader from '@/components/common/Loader';
 import { Deposit } from '@/graphql/generated/graphql';
 import { useRewardEarnedUSD } from '@/hooks/farming/useRewardEarnedUSD';
 
-interface CollectFarmingsProps {
+interface ActiveFarmingCardProps {
     farming: Farming;
     selectedPosition: Deposit;
 }
 
-const CollectFarmings = ({
+const ActiveFarmingCard = ({
     farming,
     selectedPosition,
-}: CollectFarmingsProps) => {
+}: ActiveFarmingCardProps) => {
     const { address: account } = useAccount();
 
     const [rewardEarned, setRewardEarned] = useState<bigint>(0n);
@@ -102,4 +102,4 @@ const CollectFarmings = ({
     );
 };
 
-export default CollectFarmings;
+export default ActiveFarmingCard;

src/components/position/ClosedFarmingCard/index.tsx

@@ -0,0 +1,38 @@
+import Loader from '@/components/common/Loader';
+import { Button } from '@/components/ui/button';
+import { EternalFarming } from '@/graphql/generated/graphql';
+import { useFarmUnstake } from '@/hooks/farming/useFarmStake';
+import { FormattedPosition } from '@/types/formatted-position';
+import { ADDRESS_ZERO } from '@cryptoalgebra/integral-sdk';
+import { useAccount } from 'wagmi';
+
+interface ClosedFarmingCardProps {
+    positionInEndedFarming: EternalFarming;
+    selectedPosition: FormattedPosition;
+}
+
+const ClosedFarmingCard = ({
+    positionInEndedFarming,
+    selectedPosition,
+}: ClosedFarmingCardProps) => {
+    const { address: account } = useAccount();
+
+    const farmingArgs = {
+        tokenId: BigInt(selectedPosition.id ?? 0),
+        rewardToken: positionInEndedFarming.rewardToken,
+        bonusRewardToken: positionInEndedFarming.bonusRewardToken,
+        pool: positionInEndedFarming.pool,
+        nonce: positionInEndedFarming.nonce,
+        account: account ?? ADDRESS_ZERO,
+    };
+
+    const { onUnstake, isLoading: isUnstaking } = useFarmUnstake(farmingArgs);
+
+    return (
+        <Button disabled={isUnstaking} onClick={onUnstake}>
+            {isUnstaking ? <Loader /> : 'Exit from farming'}
+        </Button>
+    );
+};
+
+export default ClosedFarmingCard;

src/components/position/PositionCard/index.tsx

@@ -3,11 +3,7 @@ import {
     usePosition,
     usePositionInFarming,
 } from '@/hooks/positions/usePositions';
-import {
-    ADDRESS_ZERO,
-    INITIAL_POOL_FEE,
-    Position,
-} from '@cryptoalgebra/integral-sdk';
+import { INITIAL_POOL_FEE, Position } from '@cryptoalgebra/integral-sdk';
 import PositionNFT from '../PositionNFT';
 import { FormattedPosition } from '@/types/formatted-position';
 import { formatUSD } from '@/utils/common/formatUSD';
@@ -18,12 +14,9 @@ import { useDerivedMintInfo } from '@/state/mintStore';
 import CollectFees from '../CollectFees';
 import RemoveLiquidityModal from '@/components/modals/RemoveLiquidityModal';
 import { Farming } from '@/types/farming-info';
-import CollectFarmings from '../CollectFarmings';
 import { EternalFarming } from '@/graphql/generated/graphql';
-import { Button } from '@/components/ui/button';
-import { useAccount } from 'wagmi';
-import { useFarmUnstake } from '@/hooks/farming/useFarmStake';
-import Loader from '@/components/common/Loader';
+import ActiveFarmingCard from '../ActiveFarmingCard';
+import ClosedFarmingCard from '../ClosedFarmingCard';
 
 interface PositionCardProps {
     selectedPosition: FormattedPosition | undefined;
@@ -36,8 +29,6 @@ const PositionCard = ({
     farming,
     closedFarmings,
 }: PositionCardProps) => {
-    const { address: account } = useAccount();
-
     const { loading, position } = usePosition(selectedPosition?.id);
 
     const positionInFarming = usePositionInFarming(selectedPosition?.id);
@@ -47,27 +38,6 @@ const PositionCard = ({
             closedFarming.id === positionInFarming?.eternalFarming
     )[0];
 
-    const farmingArgs = {
-        tokenId: positionInEndedFarming
-            ? BigInt(selectedPosition?.id ?? 0)
-            : 0n,
-        rewardToken: positionInEndedFarming
-            ? positionInEndedFarming.rewardToken
-            : ADDRESS_ZERO,
-        bonusRewardToken: positionInEndedFarming
-            ? positionInEndedFarming.bonusRewardToken
-            : ADDRESS_ZERO,
-        pool: positionInEndedFarming
-            ? positionInEndedFarming.pool
-            : ADDRESS_ZERO,
-        nonce: positionInEndedFarming
-            ? positionInEndedFarming.nonce
-            : ADDRESS_ZERO,
-        account: account ?? ADDRESS_ZERO,
-    };
-
-    const { onUnstake, isLoading: isUnstaking } = useFarmUnstake(farmingArgs);
-
     const [, pool] = usePool(position?.pool);
     const positionEntity =
         pool &&
@@ -163,16 +133,17 @@ const PositionCard = ({
             <div className="flex gap-4 w-full whitespace-nowrap">
                 <RemoveLiquidityModal positionId={selectedPosition.id} />
             </div>
-            {farming && selectedPosition && positionInFarming && (
-                <CollectFarmings
+            {positionInFarming && farming && (
+                <ActiveFarmingCard
                     farming={farming}
                     selectedPosition={positionInFarming}
                 />
             )}
             {positionInEndedFarming && (
-                <Button disabled={isUnstaking} onClick={onUnstake}>
-                    {isUnstaking ? <Loader /> : 'Exit from farming'}
-                </Button>
+                <ClosedFarmingCard
+                    positionInEndedFarming={positionInEndedFarming}
+                    selectedPosition={selectedPosition}
+                />
             )}
         </div>
     );