Skip to content

fix/PRO-2692/boring-avatars-placeholders #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RanaBug merged 4 commits into from
Sep 19, 2024
Merged

fix/PRO-2692/boring-avatars-placeholders #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
332731c
applying boring avatars as token and chain logos placeholders
RanaBug Sep 18, 2024
d616313
change variant and add name to random avatar for consistency, profile…
RanaBug Sep 18, 2024
3468514
Merge branch 'staging' into fix/PRO-2692/boring-avatars-placeholders
RanaBug Sep 19, 2024
bf4814b
update test snapshot
RanaBug Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/apps/pillarx-app/components/HorizontalToken/HorizontalToken.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
// images
import defaultLogo from '../../images/logo-unknown.png';

// components
import RandomAvatar from '../RandomAvatar/RandomAvatar';
import TokensPercentage from '../TokensPercentage/TokensPercentage';
import Body from '../Typography/Body';
import BodySmall from '../Typography/BodySmall';
Expand Down Expand Up @@ -36,11 +34,17 @@ const HorizontalToken = ({
<BodySmall className="text-purple_light mr-[18px]">
0{tokenIndex}
</BodySmall>
<img
src={tokenLogo ?? defaultLogo}
alt="token-logo"
className="w-[50px] h-[50px] object-fill rounded mr-3.5"
/>
{tokenLogo ? (
<img
src={tokenLogo}
alt="token-logo"
className="w-[50px] h-[50px] object-fill rounded mr-3.5"
/>
) : (
<div className="w-[50px] h-[50px] object-fill rounded mr-3.5 overflow-hidden">
<RandomAvatar name={tokenName || ''} />
</div>
)}
<div className="flex flex-col">
{tokenSymbol && <Body>{tokenSymbol}</Body>}
{tokenName && (
Expand Down
11 changes: 4 additions & 7 deletions src/apps/pillarx-app/components/HorizontalToken/test/HorizontalToken.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
// components
import HorizontalToken from '../HorizontalToken';

// images
import defaultLogo from '../../../images/logo-unknown.png';

// Mock components
jest.mock('../../Typography/BodySmall', () => 'BodySmall');
jest.mock('../../Typography/Body', () => 'Body');
Expand Down Expand Up @@ -66,7 +63,7 @@ describe('<HorizontalToken />', () => {
expect(imgProp.props.src).toBe(logo);
});

it('renders the default logo when logo is not provided', () => {
it('renders the default logo (random avatar) when logo is not provided', () => {
const tree = renderer
.create(
<HorizontalToken
Expand All @@ -85,12 +82,12 @@ describe('<HorizontalToken />', () => {
) as ReactTestRendererJSON;

const imgProp = divElement.children?.find(
(child) => typeof child === 'object' && child.type === 'img'
(child) => typeof child === 'object' && child.type === 'div'
) as ReactTestRendererJSON;

expect(imgProp).not.toBeNull();
expect(imgProp.type).toBe('img');
expect(imgProp.props.src).toBe(defaultLogo);
expect(imgProp.type).toBe('div');
expect(imgProp.props.className).toContain('overflow-hidden');
});

it('renders the token symbol and name correctly', () => {
Expand Down
33 changes: 5 additions & 28 deletions src/apps/pillarx-app/components/MediaGridCollection/DisplayCollectionImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import Avatar from 'boring-avatars';

type AvatarVariantType =
| 'marble'
| 'beam'
| 'pixel'
| 'sunset'
| 'ring'
| 'bauhaus';
// components
import RandomAvatar from '../RandomAvatar/RandomAvatar';

type DisplayCollectionImageProps = {
name: string;
image?: string;
className: string;
url?: string;
};

const DisplayCollectionImage = ({
name,
image,
className,
url,
Expand All @@ -26,32 +21,14 @@ const DisplayCollectionImage = ({
};

if (!image) {
const variants: AvatarVariantType[] = [
'marble',
'beam',
'pixel',
'sunset',
'ring',
'bauhaus',
];

const randomVariant: AvatarVariantType =
variants[Math.floor(Math.random() * variants.length)];

return (
<div
id="pillarx-feed-display-collection-avatar"
data-testid="display-collection-image"
className={`overflow-hidden ${className} ${url && 'cursor-pointer'}`}
onClick={handleClick}
>
<Avatar
name="Random Avatar"
variant={randomVariant}
className="rounded-md"
square
data-testid="display-collection-avatar"
/>
<RandomAvatar isRandomVariant name={name} />
</div>
);
}
Expand Down
5 changes: 5 additions & 0 deletions src/apps/pillarx-app/components/MediaGridCollection/MediaGridCollection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const MediaGridCollection = ({ gridData }: MediaGridCollectionProps) => {
className={`flex h-full ${gridItems.length > 1 ? 'basis-[73%]' : 'w-full'}`}
>
<DisplayCollectionImage
name={gridItems[0].name || 'image 1'}
image={gridItems[0].imageUrl}
url={gridItems[0].url}
className="object-cover w-full h-full rounded-md"
Expand All @@ -34,20 +35,23 @@ const MediaGridCollection = ({ gridData }: MediaGridCollectionProps) => {
<div className="flex flex-col basis-[27%] h-full ml-1">
{gridItems[1] && (
<DisplayCollectionImage
name={gridItems[1].name || 'image 2'}
image={gridItems[1].imageUrl}
url={gridItems[1].url}
className="object-cover w-full h-[calc((274px-8px)/3)] rounded-md"
/>
)}
{gridItems[2] && (
<DisplayCollectionImage
name={gridItems[2].name || 'image 3'}
image={gridItems[2].imageUrl}
url={gridItems[2].url}
className="object-cover w-full h-[calc((274px-8px)/3)] rounded-md mt-1"
/>
)}
{gridItems[3] && (
<DisplayCollectionImage
name={gridItems[3].name || 'image 4'}
image={gridItems[3].imageUrl}
url={gridItems[3].url}
className="object-cover w-full h-[calc((274px-8px)/3)] rounded-md mt-1"
Expand All @@ -58,6 +62,7 @@ const MediaGridCollection = ({ gridData }: MediaGridCollectionProps) => {
</div>
<div className="flex mt-4 pb-3 px-2.5 items-center">
<DisplayCollectionImage
name={gridData.name || 'collection'}
image={gridData.image_url}
url={gridData.opensea_url}
className="object-cover w-[50px] h-[50px] rounded-2xl mr-4"
Expand Down
20 changes: 16 additions & 4 deletions src/apps/pillarx-app/components/MediaGridCollection/tests/DisplayCollectionImage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,29 @@ describe('<DisplayCollectionImage />', () => {
it('renders correctly and matches snapshot with image', () => {
const tree = renderer
.create(
<DisplayCollectionImage image="test-image.png" className="test-class" />
<DisplayCollectionImage
name="image-name"
image="test-image.png"
className="test-class"
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('renders correctly and matches snapshot without image', () => {
const tree = renderer
.create(<DisplayCollectionImage className="test-class" />)
.create(
<DisplayCollectionImage name="image-name" className="test-class" />
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('renders image with correct attributes and handles click', () => {
render(
<DisplayCollectionImage
name="image-name"
image="test-image.png"
className="test-class"
url="https://example.com"
Expand All @@ -52,12 +59,13 @@ describe('<DisplayCollectionImage />', () => {
it('renders Avatar when no image is provided and handles click', () => {
render(
<DisplayCollectionImage
name="image-name"
className="test-class"
url="https://example.com"
/>
);

const avatar = screen.getByTestId('display-collection-avatar');
const avatar = screen.getByTestId('random-avatar');
expect(avatar).toBeInTheDocument();

const div = screen.getByTestId('display-collection-image');
Expand All @@ -74,7 +82,11 @@ describe('<DisplayCollectionImage />', () => {

it('does not render cursor-pointer class when no url is provided', () => {
render(
<DisplayCollectionImage className="test-class" image="test-image.png" />
<DisplayCollectionImage
name="image-name"
className="test-class"
image="test-image.png"
/>
);

const img = screen.getByTestId('display-collection-image');
Expand Down
18 changes: 9 additions & 9 deletions ...p/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`<DisplayCollectionImage /> renders correctly and matches snapshot witho
>
<svg
className="rounded-md"
data-testid="display-collection-avatar"
data-testid="random-avatar"
fill="none"
role="img"
viewBox="0 0 80 80"
Expand All @@ -44,29 +44,29 @@ exports[`<DisplayCollectionImage /> renders correctly and matches snapshot witho
mask="url(#:r0:)"
>
<rect
fill="#C20D90"
fill="#F0AB3D"
height={80}
width={80}
/>
<rect
fill="#92A1C6"
height={80}
transform="translate(-2 -2) rotate(108 40 40)"
fill="#C271B4"
height={10}
transform="translate(6 -6) rotate(254 40 40)"
width={80}
x={10}
y={30}
/>
<circle
cx={40}
cy={40}
fill="#146A7C"
fill="#C20D90"
r={16}
transform="translate(-9 -9)"
transform="translate(-6 6)"
/>
<line
stroke="#F0AB3D"
stroke="#92A1C6"
strokeWidth={2}
transform="translate(16 -16) rotate(216 40 40)"
transform="translate(-8 -8) rotate(148 40 40)"
x1={0}
x2={80}
y1={40}
Expand Down
7 changes: 4 additions & 3 deletions src/apps/pillarx-app/components/PortfolioOverview/PortfolioOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useWalletAddress } from '@etherspot/transaction-kit';
import { useTranslation } from 'react-i18next';

// utils
Expand All @@ -8,7 +9,6 @@ import { WalletData, WalletPortfolioData } from '../../../../types/api';

// images
import BlendIcon from '../../images/blend-icon.svg';
import DefaultLogo from '../../images/logo-unknown.png';
import RoutingIcon from '../../images/routing-icon.svg';

// components
Expand All @@ -28,6 +28,7 @@ type PortfolioOverviewProps = {

const PortfolioOverview = ({ data, isDataLoading }: PortfolioOverviewProps) => {
const [t] = useTranslation();
const accountAddress = useWalletAddress();
Copy link
Collaborator

@IAmKio IAmKio Sep 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this

const { data: dataPortlioOverview } = data || {};
const dataWallet = dataPortlioOverview as WalletPortfolioData | undefined;
const { realized: pnl24hRealized = 0, unrealized: pnl24hUnrealized = 0 } =
Expand All @@ -40,7 +41,7 @@ const PortfolioOverview = ({ data, isDataLoading }: PortfolioOverviewProps) => {

const allBlockchainsLogos =
dataWallet?.assets
?.map((asset) => (asset.asset.logo ? asset.asset.logo : DefaultLogo))
?.map((asset) => (asset.asset.logo ? asset.asset.logo : 'random-avatar'))
.flat() || [];

const numberOfBlockchains =
Expand Down Expand Up @@ -82,7 +83,7 @@ const PortfolioOverview = ({ data, isDataLoading }: PortfolioOverviewProps) => {
className="p-10 gap-20 tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23] mobile:flex-col mobile:gap-4"
>
<div className="flex flex-col justify-between">
<WalletAddressOverview address={dataWallet?.wallet ?? ''} />
<WalletAddressOverview address={accountAddress ?? ''} />
<div className="mobile:border mobile:border-medium_grey mobile:rounded-[10px] mobile:p-4 mobile:w-full">
<Body className="text-purple_light mb-2">{t`title.totalBalance`}</Body>
<div className="flex gap-4 items-end">
Expand Down
Loading