diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx
index ef49f6ab..91353fcd 100644
--- a/packages/components/src/messages/components/actions.tsx
+++ b/packages/components/src/messages/components/actions.tsx
@@ -121,9 +121,16 @@ export const Actions = (props: Props) => {
}
- label="Delete message"
+ label="Delete for me"
danger
- onSelect={() => console.log('delete')}
+ onSelect={() => console.log('delete for me')}
+ />
+
+ }
+ label="Delete for everyone"
+ danger
+ onSelect={() => console.log('delete for everyone')}
/>
diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx
index c338709b..96e23fcc 100644
--- a/packages/components/src/messages/index.tsx
+++ b/packages/components/src/messages/index.tsx
@@ -2,7 +2,7 @@ import { Stack } from '@tamagui/core'
import { DividerDate, DividerNewMessages } from '../dividers'
import { MessageSkeleton } from '../skeleton'
-import { PinAnnouncement } from '../system-messages'
+import { SystemMessage } from '../system-message'
import { Message } from './message'
import type { ReactionsType } from './types'
@@ -66,6 +66,11 @@ export const Messages = (props: Props) => {
reactions={{}}
id="1234-1237"
/>
+
{
pinned
id="1234-1239"
/>
-
{
reactions={reactions}
id="1234-1243"
/>
+
+ state: SystemMessageState
+}
+
+const AddedUsersMessageContent = (props: Props) => {
+ const { user, users, timestamp, state } = props
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {user.name}
+
+ added
+ {users.length === 1 && (
+
+
+
+ {users[0].name}
+
+
+ {timestamp}
+
+
+ )}
+ {users.length > 1 && (
+
+
+ {users.map((user, i) => {
+ return (
+ <>
+
+ {users.length === i + 1 ? ' and ' : null}
+
+
+
+ {user.name}
+
+ >
+ )
+ })}
+
+
+ {timestamp}
+
+
+ )}
+
+
+ >
+ )
+}
+
+export { AddedUsersMessageContent }
diff --git a/packages/components/src/system-message/components/deleted-message-content.tsx b/packages/components/src/system-message/components/deleted-message-content.tsx
new file mode 100644
index 00000000..f2d76ed7
--- /dev/null
+++ b/packages/components/src/system-message/components/deleted-message-content.tsx
@@ -0,0 +1,67 @@
+import { TimeoutIcon } from '@status-im/icons/12'
+import { DeleteIcon } from '@status-im/icons/20'
+import { Stack } from 'tamagui'
+
+import { IconAvatar } from '../../avatar'
+import { Button } from '../../button'
+import { Text } from '../../text'
+
+import type { SystemMessageState } from '../system-message'
+
+type Props = {
+ timestamp: string
+ text: string
+ action?: {
+ label: string
+ onPress: () => void
+ }
+ state: SystemMessageState
+}
+
+const DeletedMessageContent = (props: Props) => {
+ const { timestamp, text, action, state } = props
+
+ return (
+ <>
+
+
+
+
+
+
+ {text}
+
+ {timestamp}
+
+
+ {action && (
+ }
+ >
+ {action.label}
+
+ )}
+
+
+ >
+ )
+}
+
+export { DeletedMessageContent }
diff --git a/packages/components/src/system-message/components/pinned-message-content.tsx b/packages/components/src/system-message/components/pinned-message-content.tsx
new file mode 100644
index 00000000..e3b82e85
--- /dev/null
+++ b/packages/components/src/system-message/components/pinned-message-content.tsx
@@ -0,0 +1,76 @@
+import { PinIcon } from '@status-im/icons/20'
+import { Stack } from 'tamagui'
+
+import { Avatar, IconAvatar } from '../../avatar'
+import { Text } from '../../text'
+
+import type { SystemMessageState, User } from '../system-message'
+
+type Props = {
+ timestamp: string
+ user: User
+ message: {
+ author: User
+ text: string
+ images?: {
+ type: 'photo' | 'gif'
+ srcs: Array
+ }
+ }
+ state: SystemMessageState
+}
+
+const PinnedMessageContent = (props: Props) => {
+ const { timestamp, user, message, state } = props
+
+ const { author, images, text } = message
+
+ return (
+ <>
+
+
+
+
+
+
+ {user.name}
+
+ pinned a message
+
+ {timestamp}
+
+
+
+
+
+
+ {author.name}
+
+ {images?.type === 'gif' ? 'GIF' : text}
+
+ {images?.type === 'photo' && images.srcs.length > 0 && (
+
+ {images.srcs.length} photos
+
+ )}
+
+
+ >
+ )
+}
+
+export { PinnedMessageContent }
diff --git a/packages/components/src/system-message/index.ts b/packages/components/src/system-message/index.ts
new file mode 100644
index 00000000..346b2039
--- /dev/null
+++ b/packages/components/src/system-message/index.ts
@@ -0,0 +1 @@
+export { SystemMessage } from './system-message'
diff --git a/packages/components/src/system-message/system-message.stories.tsx b/packages/components/src/system-message/system-message.stories.tsx
new file mode 100644
index 00000000..d64228ed
--- /dev/null
+++ b/packages/components/src/system-message/system-message.stories.tsx
@@ -0,0 +1,142 @@
+import { action } from '@storybook/addon-actions'
+import { Stack } from '@tamagui/core'
+
+import { SystemMessage } from './system-message'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+ component: SystemMessage,
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['default', 'pressed', 'landed'],
+ },
+ },
+}
+
+type Story = StoryObj
+
+export const AllVariants: Story = {
+ args: { state: 'default' },
+ render: ({ state }) => (
+
+
+
+
+
+
+
+
+
+
+
+ ),
+}
+
+export default meta
diff --git a/packages/components/src/system-message/system-message.tsx b/packages/components/src/system-message/system-message.tsx
new file mode 100644
index 00000000..99399eb7
--- /dev/null
+++ b/packages/components/src/system-message/system-message.tsx
@@ -0,0 +1,121 @@
+import { styled } from '@tamagui/core'
+import { View } from 'react-native'
+
+import { AddedUsersMessageContent } from './components/added-users-message-content'
+import { DeletedMessageContent } from './components/deleted-message-content'
+import { PinnedMessageContent } from './components/pinned-message-content'
+
+type User = {
+ id: string
+ name: string
+ src: string
+}
+
+type SystemMessageState = 'default' | 'pressed' | 'landed'
+
+type Props = {
+ state?: SystemMessageState
+ timestamp: string
+} & (
+ | {
+ type: 'pinned'
+ user: User
+ message: {
+ author: User
+ text: string
+ images?: {
+ type: 'photo' | 'gif'
+ srcs: Array
+ }
+ }
+ }
+ | {
+ type: 'deleted'
+ text: string
+ action?: {
+ label: string
+ onClick: () => void
+ }
+ }
+ | {
+ type: 'added'
+ user: User
+ users: Array
+ }
+)
+
+const SystemMessage = (props: Props) => {
+ const { state = 'default', timestamp, type } = props
+
+ const renderMessage = (type: 'pinned' | 'deleted' | 'added') => {
+ switch (type) {
+ case 'pinned':
+ return (
+
+ )
+ case 'deleted':
+ return (
+
+ )
+ case 'added':
+ return (
+
+ )
+ }
+ }
+
+ return (
+
+ {renderMessage(type)}
+
+ )
+}
+
+export { SystemMessage }
+export type { Props as SystemMessageProps, SystemMessageState, User }
+
+const Base = styled(View, {
+ backgroundColor: '$white-50',
+ borderRadius: '$16',
+ padding: 8,
+
+ variants: {
+ state: {
+ default: {
+ backgroundColor: '$white-50',
+ },
+ pressed: {
+ backgroundColor: '$neutral-5',
+ },
+ landed: {
+ backgroundColor: '$blue-50-opa-5',
+ },
+ landed_deleted: {
+ backgroundColor: '$red-50-opa-5',
+ },
+ },
+ },
+})
diff --git a/packages/components/src/system-messages/index.ts b/packages/components/src/system-messages/index.ts
deleted file mode 100644
index 63e89270..00000000
--- a/packages/components/src/system-messages/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { PinAnnouncement } from './pin-announcement'
diff --git a/packages/components/src/system-messages/pin-announcement.stories.tsx b/packages/components/src/system-messages/pin-announcement.stories.tsx
deleted file mode 100644
index c5d659eb..00000000
--- a/packages/components/src/system-messages/pin-announcement.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { PinAnnouncement } from './pin-announcement'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const mockMessage = {
- text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.',
- reactions: {},
- pinned: true,
- id: '1234-1234',
-}
-
-const meta: Meta = {
- component: PinAnnouncement,
-}
-
-type Story = StoryObj
-
-export const Primary: Story = {
- args: {
- name: 'Pavel',
- message: mockMessage,
- },
-}
-
-export default meta
diff --git a/packages/components/src/system-messages/pin-announcement.tsx b/packages/components/src/system-messages/pin-announcement.tsx
deleted file mode 100644
index fab4f65e..00000000
--- a/packages/components/src/system-messages/pin-announcement.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { PinIcon } from '@status-im/icons/16'
-import { Stack } from '@tamagui/core'
-
-import { Avatar, IconAvatar } from '../avatar'
-import { Text } from '../text'
-
-import type { MessageProps } from '../messages'
-
-type Props = {
- message: MessageProps
- name: string
-}
-
-const PinAnnouncement = (props: Props) => {
- const { message, name } = props
-
- return (
-
-
-
-
-
-
-
- {name}
-
- pinned a message
-
- 09:30
-
-
-
-
-
- Alisher Yakupov
-
- {message.text}
-
-
-
- )
-}
-
-export { PinAnnouncement }
-export type { Props as PinAnnouncementProps }
diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts
index 812453e4..a5590bdf 100644
--- a/packages/components/src/tokens.ts
+++ b/packages/components/src/tokens.ts
@@ -180,6 +180,7 @@ export const tokens = createTokens({
xdai: 'hsla(179, 51%, 50%, 1)',
polygon: 'hsla(268, 84%, 70%, 1)',
unknown: 'hsla(206, 26%, 95%, 1)',
+ transparent: 'hsla(0, 0%, 0%, 0)',
},
size,
space,