diff --git a/src/apps/pillarx-app/components/AnimatedTile/AnimatedTitle.tsx b/src/apps/pillarx-app/components/AnimatedTile/AnimatedTitle.tsx index 4e22d75b..8da4c4ba 100644 --- a/src/apps/pillarx-app/components/AnimatedTile/AnimatedTitle.tsx +++ b/src/apps/pillarx-app/components/AnimatedTile/AnimatedTitle.tsx @@ -32,7 +32,6 @@ const AnimatedTile = ({ const tileDisplay = meta?.display; const [ref, inView] = useInView({ - threshold: 0.1, rootMargin: '100px 0px 0px 0px', }); @@ -53,7 +52,7 @@ const AnimatedTile = ({ const animationProps = useSpring({ transform: - inView && !isDataLoading ? 'translateY(0px)' : 'translateY(100px)', + inView && !isDataLoading ? 'translateY(0px)' : 'translateY(75px)', config: { tension: 170, friction: 26 }, onRest: () => { if (inView) { diff --git a/src/apps/pillarx-app/components/EditorialTile/EditorialTile.tsx b/src/apps/pillarx-app/components/EditorialTile/EditorialTile.tsx index b94a3088..a91a80b7 100644 --- a/src/apps/pillarx-app/components/EditorialTile/EditorialTile.tsx +++ b/src/apps/pillarx-app/components/EditorialTile/EditorialTile.tsx @@ -70,7 +70,12 @@ const EditorialTile = ({ data, isDataLoading }: EditorialTileProps) => { } }; - if (!data || isDataLoading) { + if ( + !data || + !editorialDisplay || + Object.keys(editorialDisplay).length < 2 || + isDataLoading + ) { return null; } diff --git a/src/apps/pillarx-app/components/EditorialTile/test/EditorialTile.test.tsx b/src/apps/pillarx-app/components/EditorialTile/test/EditorialTile.test.tsx index a1f83123..727afcb0 100644 --- a/src/apps/pillarx-app/components/EditorialTile/test/EditorialTile.test.tsx +++ b/src/apps/pillarx-app/components/EditorialTile/test/EditorialTile.test.tsx @@ -221,4 +221,62 @@ describe('', () => { expect(video).not.toBeInTheDocument(); expect(audio).not.toBeInTheDocument(); }); + + it('renders nothing when data is undefined', () => { + render( + + + + ); + + expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument(); + }); + + it('renders nothing when editorialDisplay is undefined', () => { + const mockDataWithoutDisplay = { + ...mockDataEditorial, + meta: { + ...mockDataEditorial.meta, + display: undefined, + }, + }; + + render( + + + + ); + + expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument(); + }); + + it('renders nothing when editorialDisplay has less than 2 keys', () => { + const mockDataWithEmptyDisplay = { + ...mockDataEditorial, + meta: { + ...mockDataEditorial.meta, + display: { + title: 'Editorial title', + }, + }, + }; + + render( + + + + ); + + expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument(); + }); + + it('renders nothing when isDataLoading is true', () => { + render( + + + + ); + + expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument(); + }); }); diff --git a/src/apps/pillarx-app/components/GenericBannerTile/GenericBannerTile.tsx b/src/apps/pillarx-app/components/GenericBannerTile/GenericBannerTile.tsx index 592807ff..ff354754 100644 --- a/src/apps/pillarx-app/components/GenericBannerTile/GenericBannerTile.tsx +++ b/src/apps/pillarx-app/components/GenericBannerTile/GenericBannerTile.tsx @@ -17,7 +17,14 @@ const GenericBannerTile = ({ data, isDataLoading }: GenericBannerTileProps) => { window.open(bannerDisplay?.cta?.href, '_blank'); }; - if (!data || isDataLoading) { + if ( + !data || + !meta || + Object.keys(meta).length === 0 || + !bannerDisplay || + Object.keys(bannerDisplay).length === 0 || + isDataLoading + ) { return null; } diff --git a/src/apps/pillarx-app/components/GenericBannerTile/test/GenericBannerTile.test.tsx b/src/apps/pillarx-app/components/GenericBannerTile/test/GenericBannerTile.test.tsx index f8e0be16..bb9fae4a 100644 --- a/src/apps/pillarx-app/components/GenericBannerTile/test/GenericBannerTile.test.tsx +++ b/src/apps/pillarx-app/components/GenericBannerTile/test/GenericBannerTile.test.tsx @@ -111,4 +111,52 @@ describe('', () => { expect(screen.queryByRole('button')).toBeNull(); }); + + it('returns null if data is undefined', () => { + render(); + expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument(); + }); + + it('returns null if meta is an empty object', () => { + const mockDataWithEmptyMeta = { + ...mockDataGenericBanner, + meta: {}, + }; + render( + + ); + expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument(); + }); + + it('returns null if bannerDisplay is undefined', () => { + const mockDataWithNoBannerDisplay = { + ...mockDataGenericBanner, + meta: { + display: undefined, + }, + }; + render( + + ); + expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument(); + }); + + it('returns null if bannerDisplay is an empty object', () => { + const mockDataWithEmptyBannerDisplay = { + ...mockDataGenericBanner, + meta: { + display: {}, + }, + }; + render( + + ); + expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument(); + }); }); diff --git a/src/apps/pillarx-app/components/HighlightedMediaGridTile/HighlightedMediaGridTile.tsx b/src/apps/pillarx-app/components/HighlightedMediaGridTile/HighlightedMediaGridTile.tsx index 319c6635..58d56497 100644 --- a/src/apps/pillarx-app/components/HighlightedMediaGridTile/HighlightedMediaGridTile.tsx +++ b/src/apps/pillarx-app/components/HighlightedMediaGridTile/HighlightedMediaGridTile.tsx @@ -56,7 +56,8 @@ const HighlightedMediaGridTile = ({ return null; } - if (!dataMediaGrid?.grids) return null; + if (!dataMediaGrid?.grids?.length || Object.keys(dataMediaGrid).length === 0) + return null; return (
diff --git a/src/apps/pillarx-app/components/HighlightedMediaGridTile/test/HighlightedMediaGridTile.test.tsx b/src/apps/pillarx-app/components/HighlightedMediaGridTile/test/HighlightedMediaGridTile.test.tsx index 51051b51..405d20da 100644 --- a/src/apps/pillarx-app/components/HighlightedMediaGridTile/test/HighlightedMediaGridTile.test.tsx +++ b/src/apps/pillarx-app/components/HighlightedMediaGridTile/test/HighlightedMediaGridTile.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import { render, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; -import { ApiLayout, Projection } from '../../../../../types/api'; +import { ApiLayout, MediaGridData, Projection } from '../../../../../types/api'; import HighlightedMediaGridTile from '../HighlightedMediaGridTile'; // Mock useRefDimensions @@ -63,4 +63,19 @@ describe('', () => { expect(screen.queryByText('Title')).not.toBeInTheDocument(); expect(screen.queryAllByTestId('media-grid-collection')).toHaveLength(0); }); + + it('does not render when dataMediaGrid is an empty object', () => { + const mockDataEmpty: Projection = { + ...mockData, + data: {} as MediaGridData, + }; + + render( + + ); + + expect( + screen.queryByTestId('pillarx-feed-highlighted-media-grid-tile') + ).not.toBeInTheDocument(); + }); }); diff --git a/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap b/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap index 723a3282..6db6fbf1 100644 --- a/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap +++ b/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap @@ -23,22 +23,21 @@ exports[` renders correctly and matches snapshot witho data-testid="random-avatar" fill="none" role="img" - viewBox="0 0 80 80" + viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" > renders correctly and matches snapshot witho > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + height={36} + width={36} + /> + + + + + +
diff --git a/src/apps/pillarx-app/components/PointsTile/PointsTile.tsx b/src/apps/pillarx-app/components/PointsTile/PointsTile.tsx index 959aa0d3..9afbdd4e 100644 --- a/src/apps/pillarx-app/components/PointsTile/PointsTile.tsx +++ b/src/apps/pillarx-app/components/PointsTile/PointsTile.tsx @@ -78,7 +78,7 @@ const PointsTile = ({ data, isDataLoading }: PointsTileProps) => { }; }, [copied]); - if (!data || isDataLoading) { + if (!data || Object.keys(pointsData).length === 0 || isDataLoading) { return null; } diff --git a/src/apps/pillarx-app/components/PointsTile/test/PointsTile.test.tsx b/src/apps/pillarx-app/components/PointsTile/test/PointsTile.test.tsx index e1cedea0..1821b8f5 100644 --- a/src/apps/pillarx-app/components/PointsTile/test/PointsTile.test.tsx +++ b/src/apps/pillarx-app/components/PointsTile/test/PointsTile.test.tsx @@ -113,4 +113,15 @@ describe('', () => { expect(screen.queryByText('My Points Tile')).not.toBeInTheDocument(); expect(screen.queryByText('500')).not.toBeInTheDocument(); }); + + it('does not render when data.data is an empty object', () => { + const mockPointsDataEmpty: Projection = { + ...mockPointsData, + data: {} as Points, + }; + + render(); + + expect(screen.queryByTestId('points-tile')).not.toBeInTheDocument(); + }); }); diff --git a/src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snap b/src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snap index 9a53fa15..9b136caa 100644 --- a/src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snap +++ b/src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snap @@ -159,7 +159,7 @@ exports[` renders correctly and matches snapshot 1`] = ` class="desktop:text-[22px] tablet:text-lg mobile:text-lg text-white" data-testid="points-formatted-timestamp" > - -33 + -32 @@ -411,7 +411,7 @@ exports[` renders correctly and matches snapshot 1`] = ` class="desktop:text-[22px] tablet:text-lg mobile:text-lg text-white" data-testid="points-formatted-timestamp" > - -33 + -32 diff --git a/src/apps/pillarx-app/components/TokensHorizontalTile/TokensHorizontalTile.tsx b/src/apps/pillarx-app/components/TokensHorizontalTile/TokensHorizontalTile.tsx index 5f2d8ad2..f9269946 100644 --- a/src/apps/pillarx-app/components/TokensHorizontalTile/TokensHorizontalTile.tsx +++ b/src/apps/pillarx-app/components/TokensHorizontalTile/TokensHorizontalTile.tsx @@ -54,7 +54,7 @@ const TokensHorizontalTile = ({ const numberTokensHorizontal = Math.floor(dimensions.width / tokenHorizontalWidth) ?? 0; - if (!data || isDataLoading) { + if (!data || !dataTokensHorizontal?.length || isDataLoading) { return null; } diff --git a/src/apps/pillarx-app/components/TokensHorizontalTile/test/TokensHorizontalTile.test.tsx b/src/apps/pillarx-app/components/TokensHorizontalTile/test/TokensHorizontalTile.test.tsx index cb5f06b8..bedaf3f5 100644 --- a/src/apps/pillarx-app/components/TokensHorizontalTile/test/TokensHorizontalTile.test.tsx +++ b/src/apps/pillarx-app/components/TokensHorizontalTile/test/TokensHorizontalTile.test.tsx @@ -66,4 +66,30 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + + it('returns null when dataTokens is empty', () => { + const emptyMockData: Projection = { + meta: { + display: { + title: 'horizontal title', + }, + }, + data: [], + layout: ApiLayout.TOKENS_HORIZONTAL, + id: 'horizontal', + }; + + const tree = renderer + .create( + + + + ) + .toJSON(); + + expect(tree).toBeNull(); + }); }); diff --git a/src/apps/pillarx-app/components/TokensVerticalTile/TokensVerticalTile.tsx b/src/apps/pillarx-app/components/TokensVerticalTile/TokensVerticalTile.tsx index c10799eb..dff20273 100644 --- a/src/apps/pillarx-app/components/TokensVerticalTile/TokensVerticalTile.tsx +++ b/src/apps/pillarx-app/components/TokensVerticalTile/TokensVerticalTile.tsx @@ -22,7 +22,7 @@ const TokensVerticalTile = ({ const dataLeft = dataTokensVertical?.slice(0, 3) || []; const dataRight = dataTokensVertical?.slice(3, 6) || []; - if (!data || isDataLoading) { + if (!data || !dataTokensVertical?.length || isDataLoading) { return null; } diff --git a/src/apps/pillarx-app/components/TokensVerticalTile/test/TokensVerticalTile.test.tsx b/src/apps/pillarx-app/components/TokensVerticalTile/test/TokensVerticalTile.test.tsx index 6c3c9fbb..a44e375a 100644 --- a/src/apps/pillarx-app/components/TokensVerticalTile/test/TokensVerticalTile.test.tsx +++ b/src/apps/pillarx-app/components/TokensVerticalTile/test/TokensVerticalTile.test.tsx @@ -53,4 +53,27 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + + it('returns null when dataTokens is empty', () => { + const emptyMockData: Projection = { + meta: { + display: { + title: 'vertical', + }, + }, + data: [], + layout: ApiLayout.TOKENS_VERTICAL, + id: 'vertical', + }; + + const tree = renderer + .create( + + + + ) + .toJSON(); + + expect(tree).toBeNull(); + }); }); diff --git a/src/apps/the-exchange/components/ExchangeAction/ExchangeAction.tsx b/src/apps/the-exchange/components/ExchangeAction/ExchangeAction.tsx index e1b9c92f..70a7442b 100644 --- a/src/apps/the-exchange/components/ExchangeAction/ExchangeAction.tsx +++ b/src/apps/the-exchange/components/ExchangeAction/ExchangeAction.tsx @@ -1,7 +1,8 @@ import { useEtherspotSwaps } from '@etherspot/transaction-kit'; import { CircularProgress } from '@mui/material'; -import { ethers } from 'ethers'; +import { BigNumber } from 'ethers'; import { useEffect, useState } from 'react'; +import { formatEther } from 'viem'; // services import { @@ -90,6 +91,10 @@ const ExchangeAction = () => { if ('receiveAmount' in bestOffer.offer) { // eslint-disable-next-line no-plusplus for (let i = 0; i < bestOffer.offer.transactions.length; ++i) { + const { value } = bestOffer.offer.transactions[i]; + const bigIntValue = BigNumber.from(value).toBigInt(); + const integerValue = formatEther(bigIntValue); + addToBatch({ title: getTransactionTitle( i, @@ -101,7 +106,7 @@ const ExchangeAction = () => { '', chainId: chainNameToChainIdTokensData(swapToken?.blockchain) || 0, to: bestOffer.offer.transactions[i].to, - value: bestOffer.offer.transactions[i].value, + value: integerValue, data: bestOffer.offer.transactions[i].data, }); } @@ -117,6 +122,9 @@ const ExchangeAction = () => { if (stepTransactions) { // eslint-disable-next-line no-plusplus for (let i = 0; i < stepTransactions.length; ++i) { + const { value } = stepTransactions[i]; + const bigIntValue = BigNumber.from(value).toBigInt(); + const integerValue = formatEther(bigIntValue); addToBatch({ title: getTransactionTitle( i, @@ -128,7 +136,7 @@ const ExchangeAction = () => { '', chainId: chainNameToChainIdTokensData(swapToken?.blockchain) || 0, to: stepTransactions[i].to || '', - value: ethers.BigNumber.from(stepTransactions[i].value), + value: integerValue, data: stepTransactions[i].data?.toString() ?? '', }); } diff --git a/src/services/tokensData.ts b/src/services/tokensData.ts index 22f801bf..74ede186 100644 --- a/src/services/tokensData.ts +++ b/src/services/tokensData.ts @@ -47,18 +47,42 @@ export const loadTokensData = (): Token[] => { if (tokensData.length === 0) { tokensData = (tokens as TokenDataType).data.flatMap((item) => item.blockchains - .map((blockchain, index) => ({ - id: item.id, - name: item.name, - symbol: item.symbol, - logo: item.logo, - blockchain, - contract: item.contracts[index], - decimals: item.decimals[index], - })) - .filter((token) => allowedBlockchains.includes(token.blockchain)) + .map((blockchain, index) => { + let { name } = item; + let { symbol } = item; + const contract = item.contracts[index]; + + if (name === 'XDAI' && symbol === 'XDAI') { + name = 'Wrapped XDAI'; + symbol = 'WXDAI'; + } + + if ( + name === 'Ethereum' && + symbol === 'ETH' && + contract !== '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee' + ) { + name = 'Wrapped Ether'; + symbol = 'WETH'; + } + + return contract !== '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee' + ? { + id: item.id, + name, + symbol, + logo: item.logo, + blockchain, + contract, + decimals: item.decimals[index], + } + : null; + }) + .filter( + (token): token is Token => + token !== null && allowedBlockchains.includes(token.blockchain) + ) ); - // Add native/gas tokens CompatibleChains.forEach((chain) => { const nativeAsset = getNativeAssetForChainId(chain.chainId);