Skip to content

Commit 3641b29

Browse files
feat: update avatar api (#464)
* feat: update avatar api * refactor: add avatar status, migrate avatar api * fix: eslint erro * fix: test error * fix: migrate avatar api on rebase * fix: add outline small src * fix: add changeset
1 parent 62b7ad9 commit 3641b29

File tree

18 files changed

+290
-150
lines changed

18 files changed

+290
-150
lines changed

.changeset/smooth-readers-train.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@mochi-ui/profile-badge': minor
3+
'@mochi-ui/avatar': minor
4+
'@mochi-ui/input': minor
5+
'@mochi-ui/theme': minor
6+
'@mochi-ui/core': minor
7+
---
8+
9+
update avatar api

apps/mochi-web/components/Feed/Row.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
/* eslint-disable react/jsx-key */
22
import { ArrowRightLine } from '@mochi-ui/icons'
3-
import { Avatar, Badge } from '@mochi-ui/core'
3+
import { Avatar, AvatarSmallImage, Badge } from '@mochi-ui/core'
44
import React from 'react'
55
import { Tx } from './store'
66
import RowCell from './RowCell'
77

88
export default function Row({ tx, colWidth }: { tx: Tx; colWidth: string[] }) {
99
return [
1010
<RowCell className="flex gap-x-2 items-center" width="">
11-
<Avatar
12-
smallSrc={tx.platformIcon}
13-
src={tx.fromAvatar}
14-
fallback={tx.from}
15-
size="sm"
16-
/>
11+
<Avatar src={tx.fromAvatar} fallback={tx.from} size="sm">
12+
<AvatarSmallImage src={tx.platformIcon} />
13+
</Avatar>
1714
<div className="flex flex-col justify-between min-w-0">
1815
<span className="text-sm leading-5 break-words truncate text-white-pure">
1916
{tx.from}
@@ -26,12 +23,9 @@ export default function Row({ tx, colWidth }: { tx: Tx; colWidth: string[] }) {
2623
</div>
2724
</RowCell>,
2825
<RowCell className="flex gap-x-2 items-center" width="">
29-
<Avatar
30-
smallSrc={tx.toPlatformIcon}
31-
src={tx.toAvatar}
32-
fallback={tx.to}
33-
size="sm"
34-
/>
26+
<Avatar src={tx.toAvatar} fallback={tx.to} size="sm">
27+
<AvatarSmallImage src={tx.toPlatformIcon} />
28+
</Avatar>
3529
<div className="flex flex-col justify-between min-w-0">
3630
<span className="text-sm leading-5 break-words truncate text-white-pure">
3731
{tx.to}

apps/mochi-web/components/Header/Header.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,10 @@ const MobileHeader = ({ onClose }: { onClose: () => void }) => {
134134
<div className="flex relative z-10 gap-4 items-center p-4 w-full h-full text-white">
135135
<Avatar
136136
fallback={profile?.profile_name}
137-
/* smallSrc={me?.platformIcon} */
138137
src={profile?.avatar as string}
139-
/>
138+
>
139+
{/* <AvatarSmallImage src={me?.platformIcon} /> */}
140+
</Avatar>
140141
<div className="flex flex-1 items-center font-medium">
141142
<span className="inline-block w-max whitespace-nowrap max-w-40 truncate">
142143
{profile?.profile_name}

apps/mochi-web/components/PayRequest/UpperBody.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Typography, Avatar } from '@mochi-ui/core'
1+
import { Typography, Avatar, AvatarSmallImage } from '@mochi-ui/core'
22
import clsx from 'clsx'
33
import Image from 'next/image'
44
import { coinIcon } from '~utils/image'
@@ -42,11 +42,9 @@ export default function UpperBody({
4242

4343
return (
4444
<div className="flex flex-col items-center">
45-
<Avatar
46-
size="lg"
47-
src={avatarUrl || '/logo.png'}
48-
smallSrc={avatarPlatform}
49-
/>
45+
<Avatar size="lg" src={avatarUrl || '/logo.png'}>
46+
<AvatarSmallImage src={avatarPlatform} />
47+
</Avatar>
5048
{/* TODO */}
5149
<Typography
5250
level="p6"

apps/mochi-web/components/Profile/PaymeRequestsTable.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Avatar, Button, ColumnProps, Table, Typography } from '@mochi-ui/core'
1+
import {
2+
Avatar,
3+
AvatarSmallImage,
4+
Button,
5+
ColumnProps,
6+
Table,
7+
Typography,
8+
} from '@mochi-ui/core'
29
import { useFetchPayRequests } from '~hooks/profile/useFetchPayRequests'
310
import { useProfileStore } from '~store'
411
import { ModelPayRequest } from '~types/mochi-pay-schema'
@@ -20,7 +27,9 @@ const Sender: ColumnProps<ModelPayRequest>['cell'] = (props) => {
2027

2128
return (
2229
<div className="flex items-center space-x-3.5">
23-
<Avatar size="base" smallSrc={platformIcon} src={toAvatar} />
30+
<Avatar size="base" src={toAvatar}>
31+
<AvatarSmallImage src={platformIcon} />
32+
</Avatar>
2433
<div>
2534
<Typography level="h8">{to}</Typography>
2635
<Typography level="p6" color="textSecondary">

apps/mochi-web/components/Receipt/Template.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Avatar } from '@mochi-ui/core'
1+
import { Avatar, AvatarSmallImage } from '@mochi-ui/core'
22
import Image from 'next/image'
33
import { hpbd, appreciation, achievement, wedding } from '~utils/image'
44

@@ -49,7 +49,9 @@ export default function Template({
4949
alt={title}
5050
/>
5151
<div className="absolute bottom-0 left-1/2 p-1 rounded-full -translate-x-1/2 translate-y-1/2 bg-inherit">
52-
<Avatar size="xl" src={avatar} smallSrc={platformIcon} />
52+
<Avatar size="xl" src={avatar}>
53+
<AvatarSmallImage src={platformIcon} />
54+
</Avatar>
5355
</div>
5456
</div>
5557
)

apps/mochi-web/components/Receipt/index.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Image from 'next/image'
55
import useSWR from 'swr'
66
import { API } from '~constants/api'
77
import { coinIcon } from '~utils/image'
8-
import { Avatar, Badge, Typography } from '@mochi-ui/core'
8+
import { Avatar, Typography, Badge, AvatarSmallImage } from '@mochi-ui/core'
99
import clsx from 'clsx'
1010
import { truncate } from '@dwarvesf/react-utils'
1111
import { useDisclosure } from '@dwarvesf/react-hooks'
@@ -68,11 +68,9 @@ export default function Receipt({ id, data: _data }: Props) {
6868
<div className="flex flex-col gap-y-12 py-3 px-4 pb-6 md:px-6 !text-neutral-600">
6969
<div className="flex relative flex-col items-center">
7070
{data.data.template ? null : (
71-
<Avatar
72-
smallSrc={data.platformIcon}
73-
size="xl"
74-
src={data.senderAvatar}
75-
/>
71+
<Avatar size="xl" src={data.senderAvatar}>
72+
<AvatarSmallImage src={data.platformIcon} />
73+
</Avatar>
7674
)}
7775
<div className="mt-2 text-sm">
7876
<span className="font-medium">

apps/mochi-web/components/Transaction/TransactionUsernameCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const TransactionUsernameCell = (props: ModelProfileTransaction) => {
2020
return (
2121
<div className="flex gap-[14px] items-center">
2222
<div className="relative h-10">
23-
<Avatar src={from_profile?.avatar ?? ''} smallSrc="" />
23+
<Avatar src={from_profile?.avatar ?? ''} />
2424
<div
2525
className={clsx(
2626
'absolute h-4 w-4',

apps/mochi-web/components/profile.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Platform, utils as mochiUtils } from '@consolelabs/mochi-ui'
55
import { Icon } from '@iconify/react'
66
import { Stats } from '@consolelabs/mochi-rest'
77
import { discordLogo, telegramLogo } from '~utils/image'
8-
import { Avatar } from '@mochi-ui/core'
8+
import { Avatar, AvatarSmallImage } from '@mochi-ui/core'
99
import { Pagination } from './Dashboard/Pagination'
1010
import { NativeImage } from './NativeImage'
1111

@@ -144,11 +144,11 @@ export default function Profile() {
144144
<Box
145145
icon={
146146
stats?.most_send.profile.platformIcon ? (
147-
<Avatar
148-
src={stats.most_send.profile.avatar}
149-
smallSrc={stats.most_send.profile.platformIcon}
150-
size="sm"
151-
/>
147+
<Avatar src={stats.most_send.profile.avatar} size="sm">
148+
<AvatarSmallImage
149+
src={stats.most_send.profile.platformIcon}
150+
/>
151+
</Avatar>
152152
) : null
153153
}
154154
>
@@ -171,11 +171,11 @@ export default function Profile() {
171171
<Box
172172
icon={
173173
stats?.most_receive.profile.platformIcon ? (
174-
<Avatar
175-
src={stats?.most_receive.profile.avatar}
176-
smallSrc={stats.most_receive.profile.platformIcon}
177-
size="sm"
178-
/>
174+
<Avatar src={stats?.most_receive.profile.avatar} size="sm">
175+
<AvatarSmallImage
176+
src={stats.most_receive.profile.platformIcon}
177+
/>
178+
</Avatar>
179179
) : null
180180
}
181181
>

packages/components/avatar/__tests__/avatar.test.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { cleanup, render } from '@testing-library/react'
2-
import Avatar from '../src/avatar'
2+
import Avatar, { AvatarSmallImage } from '../src/avatar'
3+
import { boringAvatar } from '../src/util'
34

45
describe('Avatar', () => {
56
afterEach(cleanup)
@@ -8,22 +9,21 @@ describe('Avatar', () => {
89
<Avatar
910
size="sm"
1011
src="https://ui-avatars.com/api/?name=John+Doe"
11-
smallSrc="https://ui-avatars.com/api/?name=Adam+Smith"
12-
/>,
12+
fallback="fallback"
13+
>
14+
<AvatarSmallImage src="https://ui-avatars.com/api/?name=Adam+Smith" />
15+
</Avatar>,
1316
)
14-
expect(container.querySelector('svg')).toBeInTheDocument()
15-
const images = container.querySelectorAll('image')
17+
expect(container.querySelector('img')).toBeInTheDocument()
18+
const images = container.querySelectorAll('img')
1619
expect(images.length).toBe(2)
1720

1821
const [image1, image2] = Array.from(images)
1922
expect(image1).toHaveAttribute(
20-
'xlink:href',
21-
'https://ui-avatars.com/api/?name=John+Doe',
22-
)
23-
expect(image2).toHaveAttribute(
24-
'xlink:href',
23+
'src',
2524
'https://ui-avatars.com/api/?name=Adam+Smith',
2625
)
26+
expect(image2).toHaveAttribute('src', boringAvatar('fallback'))
2727
})
2828

2929
it('renders correctly with fallback name', () => {

0 commit comments

Comments
 (0)