feat: support market modal in prime leaderboard

Author: cuzz-venus

apps/evm/src/pages/PrimeLeaderboard/MarketActions/__tests__/index.spec.tsx

@@ -0,0 +1,20 @@
+import { fireEvent, screen } from '@testing-library/react';
+
+import { xvs } from '__mocks__/models/tokens';
+import { renderComponent } from 'testUtils/render';
+
+import { MarketActions } from '..';
+
+vi.mock('pages/Market/OperationForm', () => ({
+  OperationForm: () => <div data-testid="operation-form" />,
+}));
+
+describe('pages/PrimeLeaderboard/MarketActions', () => {
+  it('opens the market operation modal when clicked', async () => {
+    renderComponent(<MarketActions token={xvs} />);
+
+    fireEvent.click(screen.getByLabelText('Open market actions'));
+
+    expect(await screen.findByTestId('operation-form')).toBeInTheDocument();
+  });
+});

apps/evm/src/pages/PrimeLeaderboard/MarketActions/index.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+import { useGetPools } from 'clients/api';
+import { Icon, Modal } from 'components';
+import { useTranslation } from 'libs/translations';
+import { useAccountAddress } from 'libs/wallet';
+import { OperationForm } from 'pages/Market/OperationForm';
+import type { Token } from 'types';
+import { areAddressesEqual } from 'utilities';
+
+export interface MarketActionsProps {
+  token: Token;
+}
+
+export const MarketActions: React.FC<MarketActionsProps> = ({ token }) => {
+  const { t } = useTranslation();
+  const { accountAddress } = useAccountAddress();
+  const { data: getPoolsData } = useGetPools({ accountAddress });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const market = getPoolsData?.pools
+    .flatMap(pool =>
+      pool.assets.map(asset => ({ asset, poolComptrollerAddress: pool.comptrollerAddress })),
+    )
+    .find(({ asset }) => areAddressesEqual(asset.vToken.underlyingToken.address, token.address));
+
+  if (!market) {
+    return undefined;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={t('primeLeaderboard.userRewards.marketActions')}
+        className="ml-2 shrink-0"
+        onClick={() => setIsModalOpen(true)}
+      >
+        <Icon name="dotShortcut" className="text-light-grey" />
+      </button>
+
+      {isModalOpen && (
+        <Modal
+          isOpen
+          title={market.asset.vToken.underlyingToken.symbol}
+          handleClose={() => setIsModalOpen(false)}
+        >
+          <OperationForm
+            vToken={market.asset.vToken}
+            poolComptrollerAddress={market.poolComptrollerAddress}
+            onSubmitSuccess={() => setIsModalOpen(false)}
+          />
+        </Modal>
+      )}
+    </>
+  );
+};

apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'libs/translations';
 import type { Token } from 'types';
 import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
 
+import { MarketActions } from '../MarketActions';
 import { MarketRewardRow } from '../MarketRewardRow';
 
 export interface UserMarketReward {
@@ -62,13 +63,7 @@ export const UserRewardsCard: React.FC<UserRewardsCardProps> = ({
               <span className="text-b1s">{formatPercentageToReadableValue(apyPercentage)}</span>
             </div>
 
-            <button
-              type="button"
-              aria-label={t('primeLeaderboard.userRewards.marketActions')}
-              className="ml-2 shrink-0"
-            >
-              <Icon name="dots" className="text-light-grey" />
-            </button>
+            <MarketActions token={token} />
           </MarketRewardRow>
         ))}
       </div>