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
2023-04-25 12:02:58 +02:00 · 2023-04-25 12:02:58 +02:00 · 1df8c16091
parent 811fa081a8
commit 1df8c16091
5 changed files with 735 additions and 117 deletions
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -37,8 +37,8 @@
    "@radix-ui/react-tabs": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.3",
    "@radix-ui/react-tooltip": "^1.0.5",
-    "@status-im/icons": "*",
    "@status-im/colors": "*",
+    "@status-im/icons": "*",
    "@tamagui/animations-css": "1.11.1",
    "@tamagui/animations-react-native": "1.11.1",
    "@tamagui/core": "1.11.1",
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@ -41,7 +41,7 @@ type WalletAvatarProps = {

 type ChannelAvatarProps = {
  type: 'channel'
-  size: 80 | 32 | 24 | 20
+  size: 80 | 32 | 28 | 24 | 20
  emoji: string
  backgroundColor?: ColorTokens
  background?: ColorTokens
@ -50,7 +50,7 @@ type ChannelAvatarProps = {

 type CommunityAvatarProps = {
  type: 'community'
-  size: 80 | 32 | 24 | 20
+  size: 80 | 32 | 28 | 24 | 20
  name: string
  src?: string
  backgroundColor?: ColorTokens
@ -66,7 +66,7 @@ type AccountAvatarProps = {

 type IconAvatarProps = {
  type: 'icon'
-  size: 48 | 32 | 20
+  size: 48 | 32 | 28 | 24 | 20
  icon: React.ReactElement
  backgroundColor?: ColorTokens
  color?: ColorTokens
@ -108,6 +108,7 @@ const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =
    // todo: design review
    '80': 27,
    '32': 15,
+    '28': 13,
    '24': 13,
    '20': 11,
  }
@ -145,6 +146,7 @@ const channelLockIconVariants: Record<
  // todo: design review
  '80': { baseVariant: 80, iconSize: 40 },
  '32': { baseVariant: 24, iconSize: 12 },
+  '28': { baseVariant: 24, iconSize: 12 },
  '24': { baseVariant: 24, iconSize: 12 },
  '20': { baseVariant: 20, iconSize: 12 },
 }
--- a/packages/components/src/context-tag/context-tag.stories.tsx
+++ b/packages/components/src/context-tag/context-tag.stories.tsx
@ -1,5 +1,5 @@
-import { PendingIcon } from '@status-im/icons'
-import { Stack } from '@tamagui/core'
+import { MembersIcon, PendingIcon } from '@status-im/icons'
+import { Stack } from 'tamagui'

 import { ContextTag } from './context-tag'

@ -8,9 +8,19 @@ import type { Meta, StoryObj } from '@storybook/react'
 const meta: Meta<typeof ContextTag> = {
  component: ContextTag,
  argTypes: {
-    label: {
-      control: ['Rarible', '# channel-name'],
-    },
+    type: [
+      'default',
+      'account',
+      'group',
+      'community',
+      'channel',
+      'token',
+      'network',
+      'collectible',
+      'address',
+      'icon',
+      'audio',
+    ],
    size: [24, 32],
    outline: [true, false],
    blur: [true, false],
@ -19,8 +29,14 @@ const meta: Meta<typeof ContextTag> = {

 type Story = StoryObj<typeof ContextTag>

-export const Base: Story = {
-  args: { label: 'Name', size: 24, outline: false, blur: false },
+export const Default: Story = {
+  args: {
+    type: 'account',
+    user: { name: 'user name ', emoji: '🐷' },
+    size: 24,
+    outline: false,
+    blur: false,
+  },
 }

 export const AllVariants: Story = {
@ -28,31 +44,501 @@ export const AllVariants: Story = {
  render: () => (
    <Stack space flexDirection="row">
      <Stack space flexDirection="column" alignItems="flex-start">
-        <ContextTag label="Name" />
-        <ContextTag type="group" label="Group" />
+        <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}
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={24}
+          />
          <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"
            type="channel"
-          label={['Rarible', '# 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}
          />
          <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"
            type="community"
-          label="Coinbase"
-          outline={true}
+            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" label="10 ETH" />
-        <ContextTag type="network" label="Network" />
-        <ContextTag type="account" label="Account Name" />
-        <ContextTag type="collectible" label="Collectible #123" />
-        <ContextTag type="address" label="0x045...1ah" />
+          <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="audio" label="00:32" />
+          <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>
  ),
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/packages/components/src/context-tag/context-tag.tsx
@ -1,93 +1,228 @@
-import { cloneElement, Fragment } from 'react'
-
-import { ChevronRightIcon } from '@status-im/icons'
-import { styled } from '@tamagui/core'
+import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
+import { Stack, styled } from '@tamagui/core'
 import { View } from 'react-native'

 import { Avatar } from '../avatar'
 import { Text } from '../text'

-import type { AvatarProps } from '../avatar'
 import type { TextProps } from '../text'

-type ContextTagType =
-  | 'default'
-  | 'group'
-  | 'channel'
-  | 'community'
-  | 'token'
-  | 'network'
-  | 'account'
-  | 'collectible'
-  | 'address'
-  | 'icon'
-  | 'audio'
-
 type Props = {
  children?: React.ReactNode
-  src?: string
-  icon?: React.ReactElement
-  label: string | [string, string]
-  type?: ContextTagType
  size?: 24 | 32
  blur?: 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']> = {
  '32': 15,
  '24': 13,
 }

-const avatarSizes: Record<NonNullable<Props['size']>, AvatarProps['size']> = {
+const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
  '32': 28,
  '24': 20,
 }

-const Label = ({ children, size }: { children: string; size: 24 | 32 }) => (
-  <Text size={textSizes[size]} weight="medium" color="$neutral-100">
+const Label = ({
+  children,
+  size,
+  type = 'default',
+}: {
+  children: string
+  size: 24 | 32
+  type?: 'default' | 'monospace'
+}) => (
+  <Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
    {children}
  </Text>
 )

 const ContextTag = (props: Props) => {
-  const {
-    src,
-    icon,
-    label,
-    // type = 'default', // this is commented because it's not being used
-    size = 24,
-    blur = false,
-    outline,
-  } = props
+  const { size = 24, blur = false, outline, type } = props

-  const hasImg = Boolean(src || icon)
+  const rounded = type === 'account' || type === 'collectible'
+  const hasAvatar = type !== 'address'

+  const renderContent = () => {
+    switch (type) {
+      case 'default': {
        return (
-    <Base outline={outline} size={size} hasImg={hasImg} blur={blur}>
-      {src && <Avatar type="user" name="" size={avatarSizes[size]} src={src} />}
-      {icon && cloneElement(icon, { color: '$neutral-50' })}
-
-      {Array.isArray(label) ? (
-        label.map((item, i) => {
-          if (i !== 0) {
-            return (
-              <Fragment key={item}>
-                <ChevronRightIcon size={16} color="$neutral-50" />
-                <Label size={size}>{item}</Label>
-              </Fragment>
+          <>
+            <Avatar
+              type="user"
+              size={avatarSizes[size]}
+              src={props.user.src}
+              name={props.user.name}
+            />
+            <Label size={size}>{props.user.name}</Label>
+          </>
        )
-          } else {
+      }
+      case 'community': {
        return (
-              <Label size={size} key={item}>
-                {item}
+          <>
+            <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>
        )
      }
-        })
-      ) : (
-        <Label size={size}>{label}</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 (
+    <Base
+      outline={outline}
+      blur={blur}
+      borderRadius={rounded ? '$8' : '$full'}
+      size={size}
+      paddingVertical={hasAvatar ? 0 : 1}
+      paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
+    >
+      {renderContent()}
    </Base>
  )
 }
@ -97,8 +232,6 @@ export type { Props as ContextTagProps }

 const Base = styled(View, {
  backgroundColor: '$neutral-10',
-  paddingVertical: 1,
-  borderRadius: '$20',
  display: 'inline-flex',
  flexDirection: 'row',
  alignItems: 'center',
@ -124,24 +257,16 @@ const Base = styled(View, {
      },
    },
    size: {
-      24: props => {
-        // there is only first param which is "size" and hasImg doesn't exist here
-        return {
-          space: 4,
-          paddingLeft: props.hasImg ? 8 : 2,
-          paddingRight: 8,
-        }
+      24: {
+        height: 24,
+        gap: 4,
+        paddingHorizontal: 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,
 })
--- a/packages/components/src/pinned-message/pinned-message.tsx
+++ b/packages/components/src/pinned-message/pinned-message.tsx
@ -36,8 +36,13 @@ const PinnedMessage = (props: Props) => {
              Pinned Messages
            </Text>
            <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"
-              label={['Rarible', '# random']}
+              size={24}
+              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>