Refactor Context tag component (#379)

* switch

* context tag refactor

* merge conflicts

* use new Avatar component

* clean up

* clean up

* simplify

* fix

* fix

* omg final fix

* pr fixes

* type fix

* fix positioning

* clean up
This commit is contained in:
Jakub Kotula 2023-04-25 12:02:58 +02:00 committed by GitHub
parent 811fa081a8
commit 1df8c16091
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
5 changed files with 735 additions and 117 deletions

View File

@ -37,8 +37,8 @@
"@radix-ui/react-tabs": "^1.0.3", "@radix-ui/react-tabs": "^1.0.3",
"@radix-ui/react-toast": "^1.1.3", "@radix-ui/react-toast": "^1.1.3",
"@radix-ui/react-tooltip": "^1.0.5", "@radix-ui/react-tooltip": "^1.0.5",
"@status-im/icons": "*",
"@status-im/colors": "*", "@status-im/colors": "*",
"@status-im/icons": "*",
"@tamagui/animations-css": "1.11.1", "@tamagui/animations-css": "1.11.1",
"@tamagui/animations-react-native": "1.11.1", "@tamagui/animations-react-native": "1.11.1",
"@tamagui/core": "1.11.1", "@tamagui/core": "1.11.1",

View File

@ -41,7 +41,7 @@ type WalletAvatarProps = {
type ChannelAvatarProps = { type ChannelAvatarProps = {
type: 'channel' type: 'channel'
size: 80 | 32 | 24 | 20 size: 80 | 32 | 28 | 24 | 20
emoji: string emoji: string
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
background?: ColorTokens background?: ColorTokens
@ -50,7 +50,7 @@ type ChannelAvatarProps = {
type CommunityAvatarProps = { type CommunityAvatarProps = {
type: 'community' type: 'community'
size: 80 | 32 | 24 | 20 size: 80 | 32 | 28 | 24 | 20
name: string name: string
src?: string src?: string
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
@ -66,7 +66,7 @@ type AccountAvatarProps = {
type IconAvatarProps = { type IconAvatarProps = {
type: 'icon' type: 'icon'
size: 48 | 32 | 20 size: 48 | 32 | 28 | 24 | 20
icon: React.ReactElement icon: React.ReactElement
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
color?: ColorTokens color?: ColorTokens
@ -108,6 +108,7 @@ const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =
// todo: design review // todo: design review
'80': 27, '80': 27,
'32': 15, '32': 15,
'28': 13,
'24': 13, '24': 13,
'20': 11, '20': 11,
} }
@ -145,6 +146,7 @@ const channelLockIconVariants: Record<
// todo: design review // todo: design review
'80': { baseVariant: 80, iconSize: 40 }, '80': { baseVariant: 80, iconSize: 40 },
'32': { baseVariant: 24, iconSize: 12 }, '32': { baseVariant: 24, iconSize: 12 },
'28': { baseVariant: 24, iconSize: 12 },
'24': { baseVariant: 24, iconSize: 12 }, '24': { baseVariant: 24, iconSize: 12 },
'20': { baseVariant: 20, iconSize: 12 }, '20': { baseVariant: 20, iconSize: 12 },
} }

View File

@ -1,5 +1,5 @@
import { PendingIcon } from '@status-im/icons' import { MembersIcon, PendingIcon } from '@status-im/icons'
import { Stack } from '@tamagui/core' import { Stack } from 'tamagui'
import { ContextTag } from './context-tag' import { ContextTag } from './context-tag'
@ -8,9 +8,19 @@ import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<typeof ContextTag> = { const meta: Meta<typeof ContextTag> = {
component: ContextTag, component: ContextTag,
argTypes: { argTypes: {
label: { type: [
control: ['Rarible', '# channel-name'], 'default',
}, 'account',
'group',
'community',
'channel',
'token',
'network',
'collectible',
'address',
'icon',
'audio',
],
size: [24, 32], size: [24, 32],
outline: [true, false], outline: [true, false],
blur: [true, false], blur: [true, false],
@ -19,8 +29,14 @@ const meta: Meta<typeof ContextTag> = {
type Story = StoryObj<typeof ContextTag> type Story = StoryObj<typeof ContextTag>
export const Base: Story = { export const Default: Story = {
args: { label: 'Name', size: 24, outline: false, blur: false }, args: {
type: 'account',
user: { name: 'user name ', emoji: '🐷' },
size: 24,
outline: false,
blur: false,
},
} }
export const AllVariants: Story = { export const AllVariants: Story = {
@ -28,31 +44,501 @@ export const AllVariants: Story = {
render: () => ( render: () => (
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag label="Name" /> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="group" label="Group" /> <ContextTag
<ContextTag type="default"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images" user={{
type="channel" name: 'User',
label={['Rarible', '# channel']} src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
/> }}
<ContextTag size={24}
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images" />
type="community" <ContextTag
label="Coinbase" type="group"
outline={true} group={{
/> name: 'Group',
<ContextTag type="token" label="10 ETH" /> icon: <MembersIcon size={12} />,
<ContextTag type="network" label="Network" /> }}
<ContextTag type="account" label="Account Name" /> size={24}
<ContextTag type="collectible" label="Collectible #123" /> />
<ContextTag type="address" label="0x045...1ah" /> <ContextTag
<ContextTag type="channel"
icon={<PendingIcon size={12} />} channel={{
type="icon" communityName: 'Rarible',
label="Context" src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
outline name: 'channel',
/> }}
<ContextTag type="audio" label="00:32" /> size={24}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
/>
<ContextTag type="address" address="0x045...1ah" size={24} />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
/>
<ContextTag type="audio" audioLength="00:32" size={24} />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={16} />,
}}
size={32}
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={32}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={32}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
/>
<ContextTag type="address" address="0x045...1ah" size={32} />
<ContextTag
icon={<PendingIcon size={16} />}
type="icon"
label="Context"
size={32}
/>
<ContextTag type="audio" audioLength="00:32" size={32} />
</Stack>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
outline
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
outline
/>
<ContextTag type="address" address="0x045...1ah" size={24} outline />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
outline
/>
<ContextTag type="audio" audioLength="00:32" size={24} outline />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={16} />,
}}
size={32}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={32}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
outline
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={32}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
outline
/>
<ContextTag type="address" address="0x045...1ah" size={32} outline />
<ContextTag
icon={<PendingIcon size={16} />}
type="icon"
label="Context"
size={32}
outline
/>
<ContextTag type="audio" audioLength="00:32" size={32} outline />
</Stack>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
blur
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
blur
/>
<ContextTag type="address" address="0x045...1ah" size={24} blur />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
blur
/>
<ContextTag type="audio" audioLength="00:32" size={24} blur />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={16} />,
}}
size={32}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={32}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
blur
/>
<ContextTag
type="account"
user={{
name: 'User Name',
emoji: '🐷',
}}
size={32}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={32}
blur
/>
<ContextTag type="address" address="0x045...1ah" size={32} blur />
<ContextTag
icon={<PendingIcon size={16} />}
type="icon"
label="Context"
size={32}
blur
/>
<ContextTag type="audio" audioLength="00:32" size={32} blur />
</Stack>
</Stack> </Stack>
</Stack> </Stack>
), ),

View File

@ -1,93 +1,228 @@
import { cloneElement, Fragment } from 'react' import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
import { Stack, styled } from '@tamagui/core'
import { ChevronRightIcon } from '@status-im/icons'
import { styled } from '@tamagui/core'
import { View } from 'react-native' import { View } from 'react-native'
import { Avatar } from '../avatar' import { Avatar } from '../avatar'
import { Text } from '../text' import { Text } from '../text'
import type { AvatarProps } from '../avatar'
import type { TextProps } from '../text' import type { TextProps } from '../text'
type ContextTagType =
| 'default'
| 'group'
| 'channel'
| 'community'
| 'token'
| 'network'
| 'account'
| 'collectible'
| 'address'
| 'icon'
| 'audio'
type Props = { type Props = {
children?: React.ReactNode children?: React.ReactNode
src?: string
icon?: React.ReactElement
label: string | [string, string]
type?: ContextTagType
size?: 24 | 32 size?: 24 | 32
blur?: boolean blur?: boolean
outline?: boolean outline?: boolean
} } & (
| { type: 'default'; user: { name: string; src: string } }
| { type: 'account'; user: { name: string; emoji: string } }
| {
type: 'group'
group: {
name: string
icon: React.ReactElement
}
}
| { type: 'community'; community: { name: string; src: string } }
| {
type: 'channel'
channel: { communityName: string; src: string; name: string }
}
| { type: 'token'; token: { name: string; src: string } }
| { type: 'network'; network: { name: string; src: string } }
| { type: 'collectible'; collectible: { name: string; src: string } }
| { type: 'address'; address: string }
| { type: 'icon'; icon: React.ReactElement; label: string }
| { type: 'audio'; audioLength: string }
)
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = { const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
'32': 15, '32': 15,
'24': 13, '24': 13,
} }
const avatarSizes: Record<NonNullable<Props['size']>, AvatarProps['size']> = { const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
'32': 28, '32': 28,
'24': 20, '24': 20,
} }
const Label = ({ children, size }: { children: string; size: 24 | 32 }) => ( const Label = ({
<Text size={textSizes[size]} weight="medium" color="$neutral-100"> children,
size,
type = 'default',
}: {
children: string
size: 24 | 32
type?: 'default' | 'monospace'
}) => (
<Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
{children} {children}
</Text> </Text>
) )
const ContextTag = (props: Props) => { const ContextTag = (props: Props) => {
const { const { size = 24, blur = false, outline, type } = props
src,
icon,
label,
// type = 'default', // this is commented because it's not being used
size = 24,
blur = false,
outline,
} = props
const hasImg = Boolean(src || icon) const rounded = type === 'account' || type === 'collectible'
const hasAvatar = type !== 'address'
const renderContent = () => {
switch (type) {
case 'default': {
return (
<>
<Avatar
type="user"
size={avatarSizes[size]}
src={props.user.src}
name={props.user.name}
/>
<Label size={size}>{props.user.name}</Label>
</>
)
}
case 'community': {
return (
<>
<Avatar
type="community"
size={avatarSizes[size]}
src={props.community.src}
name={props.community.name}
/>
<Label size={size}>{props.community.name}</Label>
</>
)
}
case 'channel': {
return (
<>
<Avatar
type="community"
size={avatarSizes[size]}
src={props.channel.src}
name={props.channel.name}
/>
<Stack flexDirection="row" gap="$0" alignItems="center">
<Label size={size}>{props.channel.communityName}</Label>
<ChevronRightIcon color="$neutral-50" size={20} />
<Label size={size}>{`# ` + props.channel.name}</Label>
</Stack>
</>
)
}
case 'token': {
return (
<>
<Avatar
type="community"
size={avatarSizes[size]}
src={props.token.src}
name={props.token.name}
/>
<Label size={size}>{props.token.name}</Label>
</>
)
}
case 'address': {
return (
<Label size={size} type="monospace">
{props.address}
</Label>
)
}
case 'audio': {
return (
<>
<Avatar
type="icon"
size={avatarSizes[size]}
icon={<PlayIcon size={16} />}
backgroundColor="$primary-50"
color="$white-100"
/>
<Label size={size}>{props.audioLength}</Label>
</>
)
}
case 'account': {
return (
<>
<Avatar
type="account"
size={avatarSizes[size]}
name={props.user.emoji}
/>
<Label size={size}>{props.user.name}</Label>
</>
)
}
case 'group': {
return (
<>
<Avatar
type="icon"
size={avatarSizes[size]}
backgroundColor="$purple-50"
color="$white-70"
icon={props.group.icon}
/>
<Label size={size}>{props.group.name}</Label>
</>
)
}
case 'network': {
return (
<>
<Avatar
type="community"
size={avatarSizes[size]}
src={props.network.src}
name={props.network.name}
/>
<Label size={size}>{props.network.name}</Label>
</>
)
}
case 'collectible': {
return (
<>
<Avatar
type="account"
size={avatarSizes[size]}
src={props.collectible.src}
name={props.collectible.name}
/>
<Label size={size}>{props.collectible.name}</Label>
</>
)
}
case 'icon': {
return (
<>
<Avatar
type="icon"
size={avatarSizes[size]}
icon={props.icon}
backgroundColor="$transparent"
color="$neutral-50"
/>
<Label size={size}>{props.label}</Label>
</>
)
}
}
}
return ( return (
<Base outline={outline} size={size} hasImg={hasImg} blur={blur}> <Base
{src && <Avatar type="user" name="" size={avatarSizes[size]} src={src} />} outline={outline}
{icon && cloneElement(icon, { color: '$neutral-50' })} blur={blur}
borderRadius={rounded ? '$8' : '$full'}
{Array.isArray(label) ? ( size={size}
label.map((item, i) => { paddingVertical={hasAvatar ? 0 : 1}
if (i !== 0) { paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
return ( >
<Fragment key={item}> {renderContent()}
<ChevronRightIcon size={16} color="$neutral-50" />
<Label size={size}>{item}</Label>
</Fragment>
)
} else {
return (
<Label size={size} key={item}>
{item}
</Label>
)
}
})
) : (
<Label size={size}>{label}</Label>
)}
</Base> </Base>
) )
} }
@ -97,8 +232,6 @@ export type { Props as ContextTagProps }
const Base = styled(View, { const Base = styled(View, {
backgroundColor: '$neutral-10', backgroundColor: '$neutral-10',
paddingVertical: 1,
borderRadius: '$20',
display: 'inline-flex', display: 'inline-flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@ -124,24 +257,16 @@ const Base = styled(View, {
}, },
}, },
size: { size: {
24: props => { 24: {
// there is only first param which is "size" and hasImg doesn't exist here height: 24,
return { gap: 4,
space: 4, paddingHorizontal: 8,
paddingLeft: props.hasImg ? 8 : 2, },
paddingRight: 8, 32: {
} height: 32,
gap: 8,
paddingHorizontal: 12,
}, },
32: ({ hasImg }) => ({
// this therefore doesn't work as well
space: 8,
paddingLeft: hasImg ? 12 : 2,
paddingRight: 12,
}),
}, },
hasImg: {
true: {},
false: {},
}, // to correctly infer the type of the variant
} as const, } as const,
}) })

View File

@ -36,8 +36,13 @@ const PinnedMessage = (props: Props) => {
Pinned Messages Pinned Messages
</Text> </Text>
<ContextTag <ContextTag
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images" size={24}
label={['Rarible', '# random']} type="channel"
channel={{
communityName: 'Rarible',
name: 'random',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat',
}}
/> />
</Stack> </Stack>
</Stack> </Stack>