fixes and changes

configs/app/features/pools.ts

@@ -3,9 +3,9 @@ import type { Feature } from './types';
 import { getEnvValue } from '../utils';
 
 const contractInfoApiHost = getEnvValue('NEXT_PUBLIC_CONTRACT_INFO_API_HOST');
-const dexPoolsEnabled = getEnvValue('NEXT_PUBLIC_DEX_POOLS_ENABLED');
+const dexPoolsEnabled = getEnvValue('NEXT_PUBLIC_DEX_POOLS_ENABLED') === 'true';
 
-const title = 'Pools';
+const title = 'DEX Pools';
 
 const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
   if (contractInfoApiHost && dexPoolsEnabled) {

lib/getItemIndex.ts

@@ -0,0 +1,5 @@
+const DEFAULT_PAGE_SIZE = 50;
+
+export default function getItemIndex(index: number, page: number, pageSize: number = DEFAULT_PAGE_SIZE) {
+  return (page - 1) * pageSize + index + 1;
+};

lib/pools/getPoolLinks.ts

@@ -0,0 +1,21 @@
+import type { Pool } from 'types/api/pools';
+
+type PoolLink = {
+  url: string;
+  image: string;
+  title: string;
+};
+
+export default function getPoolLinks(pool?: Pool): Array<PoolLink> {
+  if (!pool) {
+    return [];
+  }
+
+  return [
+    {
+      url: pool.coin_gecko_terminal_url,
+      image: '/static/gecko_terminal.png',
+      title: 'GeckoTerminal',
+    },
+  ].filter(link => Boolean(link.url));
+}

lib/pools/getPoolTitle.ts

@@ -0,0 +1,5 @@
+import type { Pool } from 'types/api/pools';
+
+export const getPoolTitle = (pool: Pool) => {
+  return `${ pool.base_token_symbol } / ${ pool.quote_token_symbol } ${ pool.fee ? `(${ pool.fee }%)` : '' }`;
+};

mocks/pools/pool.ts

@@ -13,6 +13,7 @@ export const base: Pool = {
   market_cap_usd: '139312819076.195',
   liquidity: '2099941.2238',
   dex: { id: 'sushiswap', name: 'SushiSwap' },
+  fee: '0.03',
   coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x06da0fd433c1a5d7a4faa01111c044910a184553',
 };
 

pages/pools/index.tsx

@@ -8,7 +8,7 @@ const Pools = dynamic(() => import('ui/pages/Pools'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/name-domains">
+    <PageNextJs pathname="/pools">
       <Pools/>
     </PageNextJs>
   );

types/api/pools.tsx

@@ -22,5 +22,6 @@ export type Pool = {
     id: string;
     name: string;
   };
+  fee?: string;
   coin_gecko_terminal_url: string;
 };

ui/marketplace/MarketplaceAppInfo.pw.tsx

@@ -16,7 +16,7 @@ test.describe('mobile', () => {
 
   test('base view', async({ render, page }) => {
     await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
-    await page.getByLabel('Show project info').click();
+    await page.getByLabel('Show info').click();
     await expect(page).toHaveScreenshot();
   });
 });

ui/pages/Accounts.tsx

@@ -2,6 +2,7 @@ import { Hide, Show } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import getItemIndex from 'lib/getItemIndex';
 import { TOP_ADDRESS } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import AddressesListItem from 'ui/addresses/AddressesListItem';
@@ -12,8 +13,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-const PAGE_SIZE = 50;
-
 const Accounts = () => {
   const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
     resourceName: 'addresses',
@@ -39,7 +38,7 @@ const Accounts = () => {
     </ActionBar>
   );
 
-  const pageStartIndex = (pagination.page - 1) * PAGE_SIZE + 1;
+  const pageStartIndex = getItemIndex(0, pagination.page);
   const totalSupply = React.useMemo(() => {
     return BigNumber(data?.total_supply || '0');
   }, [ data?.total_supply ]);

ui/pages/Pool.pw.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
 import * as poolMock from 'mocks/pools/pool';
 import { test, expect } from 'playwright/lib';
 
@@ -16,6 +17,7 @@ const hooksConfig = {
 test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse('pool', poolMock.base, { pathParams: { chainId: config.chain.id, hash: addressHash } });
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash: poolMock.base.contract_address } });
   await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
   await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_md.jpg');
   const component = await render(<Pool/>, { hooksConfig });

ui/pages/Pool.tsx

@@ -1,11 +1,13 @@
-import { Tag, Box, Flex, Image } from '@chakra-ui/react';
+import { Tag, Box, Flex, Image, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getPoolLinks from 'lib/pools/getPoolLinks';
+import { getPoolTitle } from 'lib/pools/getPoolTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import * as addressStubs from 'stubs/address';
 import { POOL } from 'stubs/pools';
@@ -61,12 +63,7 @@ const Pool = () => {
     );
   })();
 
-  // More links can be added here
-  const externalLinks = [ {
-    url: data?.coin_gecko_terminal_url,
-    image: '/static/gecko_terminal.png',
-    title: 'GeckoTerminal',
-  } ].filter(link => Boolean(link.url));
+  const externalLinks = getPoolLinks(data);
   const hasLinks = externalLinks.length > 0;
 
   const externalLinksComponents = React.useMemo(() => {
@@ -91,7 +88,7 @@ const Pool = () => {
         { hasLinks && (
           <VerifyWith
             links={ externalLinksComponents }
-            label=""
+            label="Verify with"
             longText="View in"
             shortText=""
           />
@@ -113,7 +110,7 @@ const Pool = () => {
     };
   }, [ appProps.referrer ]);
 
-  const poolTitle = data ? `${ data.base_token_symbol } / ${ data.quote_token_symbol }` : '';
+  const poolTitle = data ? getPoolTitle(data) : '';
 
   return (
     <>
@@ -127,7 +124,7 @@ const Pool = () => {
             size="lg"
           />
         ) : null }
-        contentAfter={ <Tag>Pool</Tag> }
+        contentAfter={ <Skeleton isLoaded={ !isPlaceholderData }><Tag>Pool</Tag></Skeleton> }
         secondRow={ titleSecondRow }
         isLoading={ isPlaceholderData }
         withTextAd

ui/pages/Pools.pw.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import config from 'configs/app';
 import * as poolMock from 'mocks/pools/pool';
-import { test, expect } from 'playwright/lib';
+import { test, expect, devices } from 'playwright/lib';
 
 import Pools from './Pools';
 
-test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+test('base view +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
   await mockTextAd();
   await mockApiResponse(
     'pools',
@@ -18,3 +18,20 @@ test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockText
   const component = await render(<Pools/>);
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+    await mockTextAd();
+    await mockApiResponse(
+      'pools',
+      { items: [ poolMock.base, poolMock.noIcons, poolMock.base ], next_page_params: null },
+      { pathParams: { chainId: config.chain.id } },
+    );
+    await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_s.jpg');
+    const component = await render(<Pools/>);
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/pages/Pools.tsx

@@ -1,4 +1,4 @@
-import { Show, Hide } from '@chakra-ui/react';
+import { Show, Hide, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -28,7 +28,7 @@ const Pools = () => {
     pathParams: { chainId: config.chain.id },
     filters: { query: debouncedSearchTerm },
     options: {
-      placeholderData: { items: Array(50).fill(POOL), next_page_params: null },
+      placeholderData: { items: Array(50).fill(POOL), next_page_params: { page_token: 'a', page_size: 50 } },
     },
   });
 
@@ -70,10 +70,20 @@ const Pools = () => {
   );
 
   const actionBar = (
-    <ActionBar mt={ -6 }>
-      { filter }
-      <Pagination { ...poolsQuery.pagination }/>
-    </ActionBar>
+    <>
+      <Flex mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { filter }
+      </Flex>
+      <ActionBar
+        mt={ -6 }
+        display={{ base: poolsQuery.pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
+      >
+        <Hide below="lg">
+          { filter }
+        </Hide>
+        <Pagination { ...poolsQuery.pagination } ml="auto"/>
+      </ActionBar>
+    </>
   );
 
   return (
@@ -90,7 +100,7 @@ const Pools = () => {
         actionBar={ actionBar }
         filterProps={{
           emptyFilteredText: `Couldn${ apos }t find pools that matches your filter query.`,
-          hasActiveFilters: Boolean(searchTerm),
+          hasActiveFilters: Boolean(debouncedSearchTerm),
         }}
       />
     </>

ui/pages/Token.pw.tsx

@@ -56,7 +56,7 @@ test('with verified info', async({ render, page, createSocket, mockApiResponse,
   const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-  await page.getByRole('button', { name: /project info/i }).click();
+  await page.getByLabel('Show info').click();
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(pwConfig.adsBannerSelector) ],

ui/pool/PoolInfo.tsx

@@ -16,7 +16,7 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
   return (
     <Grid
       columnGap={ 8 }
-      rowGap={{ base: 3, lg: 3 }}
+      rowGap={{ base: 1, lg: 3 }}
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
       overflow="hidden"
     >

ui/pools/PoolsListItem.tsx

@@ -1,10 +1,12 @@
-import { Skeleton } from '@chakra-ui/react';
+import { Skeleton, Image } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Pool } from 'types/api/pools';
 
+import getPoolLinks from 'lib/pools/getPoolLinks';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import PoolEntity from 'ui/shared/entities/pool/PoolEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 type Props = {
@@ -13,6 +15,7 @@ type Props = {
 };
 
 const UserOpsListItem = ({ item, isLoading }: Props) => {
+  const externalLinks = getPoolLinks(item);
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
 
@@ -46,6 +49,18 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
           ${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
         </Skeleton>
       </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>View in</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          { externalLinks.map((link) => (
+            <LinkExternal href={ link.url } key={ link.url } display="inline-flex">
+              <Image src={ link.image } alt={ link.title } boxSize={ 5 } mr={ 2 }/>
+              { link.title }
+            </LinkExternal>
+          )) }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
     </ListItemMobileGrid.Container>
   );
 };

ui/pools/PoolsTable.tsx

@@ -1,10 +1,10 @@
-import { Table, Tbody, Th, Tr, Flex, Tooltip } from '@chakra-ui/react';
+import { Table, Tbody, Th, Tr, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Pool } from 'types/api/pools';
 
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import IconSvg from 'ui/shared/IconSvg';
+import Hint from 'ui/shared/Hint';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import PoolsTableItem from './PoolsTableItem';
@@ -24,18 +24,18 @@ const PoolsTable = ({ items, page, isLoading, top }: Props) => {
           <Th width="70%">Pool</Th>
           <Th width="30%">DEX </Th>
           <Th width="120px" isNumeric>
-            <Flex align="center">
+            <Flex alignItems="center" justifyContent="end">
               FDV
-              <Tooltip
+              <Hint
                 label="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
-                placement="bottom"
-              >
-                <IconSvg name="info" boxSize={ 5 } ml={ 1 } color="text_secondary"/>
-              </Tooltip>
+                boxSize={ 5 }
+                ml={ 1 }
+              />
             </Flex>
           </Th>
           <Th width="120px" isNumeric>Market cap</Th>
           <Th width="120px" isNumeric>Liquidity</Th>
+          <Th width="75px" isNumeric>View in</Th>
         </Tr>
       </Thead>
       <Tbody>