From 069d89f71f443fa6317e4c542dcf64fbdb483823 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 13 Mar 2023 19:22:51 +0100
Subject: [PATCH] fix lint and reformat
---
.github/workflows/ci.yml | 54 +++++++++----------
apps/mobile/screens/channel.tsx | 10 ++--
apps/web/src/main.tsx | 6 +--
packages/components/.storybook/preview.tsx | 1 -
.../components/src/accordion/accordion.tsx | 6 +--
packages/components/src/author/author.tsx | 2 +-
packages/components/src/avatar/avatar.tsx | 2 +-
packages/components/src/button/button.tsx | 1 +
packages/components/src/composer/composer.tsx | 3 +-
.../components/src/image/image.stories.tsx | 2 -
packages/components/src/messages/message.tsx | 43 +++++++++------
packages/components/src/tamagui.config.ts | 30 +++++------
.../chat-menu/edit-group-chat-dialog.tsx | 2 -
.../src/components/chat-menu/index.tsx | 2 -
.../create-profile-dialog/index.tsx | 2 -
.../src/components/failed/index.tsx | 2 -
.../src/components/loading/index.tsx | 2 -
.../components/chats/chat-category.tsx | 2 +-
.../components/chats/chat-item.tsx | 2 +-
.../main-sidebar/components/chats/index.tsx | 2 -
.../community-info/community-dialog.tsx | 2 -
.../components/community-info/index.tsx | 2 -
.../get-started/connect-wallet-dialog.tsx | 2 +-
.../components/get-started/index.tsx | 2 -
.../sync-status-profile-dialog.tsx | 2 +-
.../throwaway-profile-found-dialog.tsx | 2 -
.../src/components/main-sidebar/index.tsx | 2 -
.../member-sidebar/disconnect-dialog.tsx | 2 -
.../src/components/member-sidebar/index.tsx | 2 -
.../member-sidebar/member-group.tsx | 4 +-
.../components/member-sidebar/member-item.tsx | 2 -
.../components/member-sidebar/user-item.tsx | 2 -
.../src/components/reaction-popover/index.tsx | 3 +-
.../components/user-profile-dialog/index.tsx | 2 -
.../src/components/welcome-dialog/index.tsx | 2 +-
.../status-react/src/contexts/app-context.tsx | 3 +-
.../src/contexts/chat-context.tsx | 3 +-
.../src/contexts/dialog-context.tsx | 4 +-
packages/status-react/src/icons/bell-icon.tsx | 2 +-
.../src/icons/chevron-down-icon.tsx | 2 +-
.../src/icons/chevron-right-icon.tsx | 2 +-
.../status-react/src/icons/cross-icon.tsx | 2 +-
packages/status-react/src/icons/dots-icon.tsx | 2 +-
.../src/icons/double-tick-icon.tsx | 2 +-
packages/status-react/src/icons/edit-icon.tsx | 2 +-
.../status-react/src/icons/emoji-icon.tsx | 2 +-
packages/status-react/src/icons/exit-icon.tsx | 2 +-
packages/status-react/src/icons/gif-icon.tsx | 2 +-
.../status-react/src/icons/group-icon.tsx | 2 +-
.../status-react/src/icons/image-icon.tsx | 2 +-
.../status-react/src/icons/pencil-icon.tsx | 2 +-
packages/status-react/src/icons/pin-icon.tsx | 2 +-
.../status-react/src/icons/reaction-icon.tsx | 2 +-
.../status-react/src/icons/reply-icon.tsx | 2 +-
.../status-react/src/icons/sticker-icon.tsx | 2 +-
.../src/icons/tiny-chevron-right-icon.tsx | 2 +-
.../src/icons/tiny-community-icon.tsx | 2 +-
.../src/icons/tiny-reply-icon.tsx | 2 +-
.../status-react/src/icons/trash-icon.tsx | 2 +-
.../status-react/src/icons/unpin-icon.tsx | 2 +-
.../status-react/src/protocol/provider.tsx | 3 +-
.../chat/components/chat-info/index.tsx | 2 -
.../chat-info/pinned-messages-dialog.tsx | 2 -
.../chat/components/chat-input/index.tsx | 4 +-
.../components/chat-input/input-reply.tsx | 2 -
.../chat/components/chat-message/actions.tsx | 2 -
.../chat/components/chat-message/index.tsx | 2 +-
.../components/chat-message/message-reply.tsx | 2 -
.../components/chat-message/reactions.tsx | 2 +-
.../chat/components/date-divider/index.tsx | 2 -
.../chat/components/loading-toast/index.tsx | 2 -
.../chat/components/message-loader/index.tsx | 2 -
.../activity-center-popover/index.tsx | 2 +-
.../routes/chat/components/navbar/index.tsx | 2 -
.../status-react/src/routes/chat/index.tsx | 2 +-
packages/status-react/src/routes/index.tsx | 2 -
.../src/system/activity/activity.tsx | 2 -
.../status-react/src/system/avatar/avatar.tsx | 2 +-
.../status-react/src/system/badge/badge.tsx | 2 -
.../src/system/button-group/button-group.tsx | 4 +-
.../status-react/src/system/button/button.tsx | 3 +-
.../src/system/checkbox/checkbox.tsx | 2 +-
.../src/system/context-menu/context-menu.tsx | 3 +-
.../src/system/copy-input/copy-input.tsx | 2 +-
.../src/system/dialog/alert-dialog.tsx | 3 +-
.../status-react/src/system/dialog/dialog.tsx | 3 +-
.../system/dropdown-menu/dropdown-menu.tsx | 3 +-
.../src/system/emoji-hash/emoji-hash.tsx | 2 -
.../src/system/eth-address/eth-address.tsx | 2 -
.../src/system/icon-button/icon-button.tsx | 3 +-
.../status-react/src/system/icon/icon.tsx | 4 +-
.../status-react/src/system/image/image.tsx | 2 -
.../status-react/src/system/menu/menu.tsx | 4 +-
.../src/system/popover/popover.tsx | 3 +-
.../status-react/src/system/tabs/tabs.tsx | 2 +-
packages/status-react/src/system/tag/tag.tsx | 2 -
.../src/system/text-input/text-input.tsx | 3 +-
.../src/system/tooltip/tooltip.tsx | 3 +-
.../visually-hidden/visually-hidden.tsx | 4 +-
99 files changed, 160 insertions(+), 201 deletions(-)
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 92948c1f..c0b2ce39 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,43 +2,43 @@ name: CI
on:
push:
- branches: ["main"]
+ branches: ['main']
pull_request:
types: [opened, synchronize]
jobs:
build:
- name: Build and Test
- timeout-minutes: 15
- runs-on: ${{ matrix.os }}
+ name: Build and Test
+ timeout-minutes: 15
+ runs-on: ${{ matrix.os }}
- strategy:
- matrix:
- os: [ubuntu-latest, macos-latest]
+ strategy:
+ matrix:
+ os: [ubuntu-latest, macos-latest]
- steps:
- - name: Check out code
- uses: actions/checkout@v3
- with:
- fetch-depth: 2
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v3
+ with:
+ fetch-depth: 2
- - name: Setup Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
- with:
- node-version: 16
- cache: 'yarn'
+ - name: Setup Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ cache: 'yarn'
- - name: Install dependencies
- run: yarn --frozen-lockfile
+ - name: Install dependencies
+ run: yarn --frozen-lockfile
- - name: Build
- run: yarn build
+ - name: Build
+ run: yarn build
- - name: Typecheck
- run: yarn typecheck
+ - name: Typecheck
+ run: yarn typecheck
- - name: Lint
- run: yarn lint && yarn format:check
+ - name: Lint
+ run: yarn lint && yarn format:check
- - name: Test
- run: yarn test
+ - name: Test
+ run: yarn test
diff --git a/apps/mobile/screens/channel.tsx b/apps/mobile/screens/channel.tsx
index a2cc5e41..a383df38 100644
--- a/apps/mobile/screens/channel.tsx
+++ b/apps/mobile/screens/channel.tsx
@@ -1,6 +1,3 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable import/namespace */
-
import { useRef } from 'react'
import { Composer, Messages } from '@status-im/components'
@@ -25,7 +22,8 @@ export const ChannelScreen = ({ route }: ChannelScreenProps) => {
const theme = useTheme()
// We need to get the channel name from the route params
- const channelName = route.params.channelId
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const _channelName = route.params.channelId
const scrollRef = useRef(null)
return (
@@ -47,9 +45,7 @@ export const ChannelScreen = ({ route }: ChannelScreenProps) => {
-
+
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index e52e12b6..95b8ca8f 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -4,7 +4,7 @@ import '@tamagui/core/reset.css'
import '@tamagui/font-inter/css/400.css'
import '@tamagui/font-inter/css/700.css'
-import React from 'react'
+import { StrictMode } from 'react'
import { Provider } from '@status-im/components'
import { createRoot } from 'react-dom/client'
@@ -14,9 +14,9 @@ import App from './app'
const root = document.getElementById('root') as HTMLElement
createRoot(root).render(
-
+
-
+
)
diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index 8e419500..0d1d407e 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
import { Provider } from '../src'
import { Parameters, Decorator } from '@storybook/react'
diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
index e9a2a0fd..1517e21d 100644
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { Fragment, useState } from 'react'
import { ChevronRightIcon } from '@status-im/icons/20'
import { Stack } from '@tamagui/core'
@@ -104,9 +104,7 @@ const Accordion = ({
- {isExpanded && (
- {children}
- )}
+ {isExpanded && {children}}
diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx
index 8ea8f65d..280abf8c 100644
--- a/packages/components/src/author/author.tsx
+++ b/packages/components/src/author/author.tsx
@@ -17,7 +17,7 @@ interface Props {
}
const Author = (props: Props) => {
- const { name, status, nickname, address, time } = props
+ const { name, status, address, time } = props
return (
diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
index 4732e935..87fc2f33 100644
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@@ -163,7 +163,7 @@ const Avatar = (props: Props) => {
useEffect(() => {
setStatus('idle')
- }, [JSON.stringify(src)])
+ }, [src])
return (
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 9601118e..a84a7442 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -8,6 +8,7 @@ import type { GetProps } from '@tamagui/core'
import type { Ref } from 'react'
const Base = styled(Stack, {
+ tag: 'button',
name: 'Button',
accessibilityRole: 'button',
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 4d35e72b..c06b7593 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@@ -20,9 +20,10 @@ import { useChatDispatch, useChatState } from '../provider'
import { Reply } from '../reply'
interface Props {
- blur: boolean
+ blur?: boolean
}
+// pb={insets.bottom + Platform.select({ android: 12, ios: 0 })}
const Composer = (props: Props) => {
const { blur } = props
diff --git a/packages/components/src/image/image.stories.tsx b/packages/components/src/image/image.stories.tsx
index 5c6d6610..a9ff10b6 100644
--- a/packages/components/src/image/image.stories.tsx
+++ b/packages/components/src/image/image.stories.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Stack } from '@tamagui/core'
import { Image } from './image'
diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx
index 06f0efdb..3a5dfb03 100644
--- a/packages/components/src/messages/message.tsx
+++ b/packages/components/src/messages/message.tsx
@@ -1,7 +1,6 @@
-import React from 'react'
-
import { PinIcon } from '@status-im/icons/16'
-import { Stack, Unspaced, XStack, YStack } from 'tamagui'
+import { View } from 'react-native'
+import { Stack, styled, Unspaced, XStack, YStack } from 'tamagui'
import { Author } from '../author/author'
import { Avatar } from '../avatar'
@@ -22,6 +21,27 @@ interface Props {
pinned?: boolean
}
+const Wrapper = styled(View, {
+ position: 'relative',
+ paddingHorizontal: 8,
+ paddingVertical: 8,
+ borderRadius: 16,
+ alignItems: 'flex-start',
+
+ variants: {
+ active: {
+ true: {
+ backgroundColor: '$neutral-5',
+ },
+ },
+ pinned: {
+ true: {
+ backgroundColor: '$blue-50-opa-5',
+ },
+ },
+ } as const,
+})
+
const Message = (props: Props) => {
const { text, images, reactions, reply, pinned } = props
@@ -34,17 +54,10 @@ const Message = (props: Props) => {
const dispatch = useChatDispatch()
return (
- setHovered(true)}
- onMouseLeave={() => setHovered(false)}
+ setHovered(true)}
+ onHoverOut={() => setHovered(false)}
>
{active && (
@@ -122,7 +135,7 @@ const Message = (props: Props) => {
)}
-
+
)
}
diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts
index b3a8a066..8c6d5c9d 100644
--- a/packages/components/src/tamagui.config.ts
+++ b/packages/components/src/tamagui.config.ts
@@ -20,12 +20,12 @@ const interFont = createInterFont({
7: 13,
8: 15,
9: 19,
- 10: 27
+ 10: 27,
},
weight: {
6: '400',
7: '500',
- 8: '600'
+ 8: '600',
},
letterSpacing: {
5: 2,
@@ -36,19 +36,19 @@ const interFont = createInterFont({
10: -3,
12: -4,
14: -5,
- 15: -6
+ 15: -6,
},
face: {
400: { normal: 'Inter' },
500: { normal: 'Inter' },
- 600: { normal: 'InterBold' }
- }
+ 600: { normal: 'InterBold' },
+ },
})
const monoFont = createFont({
family: 'UbuntuMono',
weight: {
- 1: '500'
+ 1: '500',
},
letterSpacing: {
5: 2,
@@ -59,7 +59,7 @@ const monoFont = createFont({
10: -3,
12: -4,
14: -5,
- 15: -6
+ 15: -6,
},
size: {
1: 11,
@@ -77,25 +77,25 @@ const monoFont = createFont({
13: 72,
14: 92,
15: 114,
- 16: 124
+ 16: 124,
},
lineHeight: {
1: 14,
- 2: 15
- }
+ 2: 15,
+ },
})
export const config = createTamagui({
fonts: {
inter: interFont,
- mono: monoFont
+ mono: monoFont,
},
themes,
tokens: {
colors: {
- ...tokens.color
+ ...tokens.color,
},
- ...tokens
+ ...tokens,
},
shouldAddPrefersColorThemes: true,
media: createMedia({
@@ -112,8 +112,8 @@ export const config = createTamagui({
short: { maxHeight: 820 },
tall: { minHeight: 820 },
hoverNone: { hover: 'none' },
- pointerCoarse: { pointer: 'coarse' }
+ pointerCoarse: { pointer: 'coarse' },
}),
shorthands,
- animations
+ animations,
})
diff --git a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
index b5ac7df7..12dffcc0 100644
--- a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
+++ b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Avatar, Dialog, TextInput } from '../../system'
export const EditGroupChatDialog = () => {
diff --git a/packages/status-react/src/components/chat-menu/index.tsx b/packages/status-react/src/components/chat-menu/index.tsx
index b5f0aa26..3a8c44e5 100644
--- a/packages/status-react/src/components/chat-menu/index.tsx
+++ b/packages/status-react/src/components/chat-menu/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { BellIcon } from '../../icons/bell-icon'
import { ContextMenu, DropdownMenu } from '../../system'
// import { useAlertDialog } from '../../system/dialog/alert-dialog'
diff --git a/packages/status-react/src/components/create-profile-dialog/index.tsx b/packages/status-react/src/components/create-profile-dialog/index.tsx
index b863bab2..ef5cf186 100644
--- a/packages/status-react/src/components/create-profile-dialog/index.tsx
+++ b/packages/status-react/src/components/create-profile-dialog/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import {
Avatar,
Dialog,
diff --git a/packages/status-react/src/components/failed/index.tsx b/packages/status-react/src/components/failed/index.tsx
index 6892cef2..0a4936f4 100644
--- a/packages/status-react/src/components/failed/index.tsx
+++ b/packages/status-react/src/components/failed/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Text } from '../../system'
export const Failed = () => {
diff --git a/packages/status-react/src/components/loading/index.tsx b/packages/status-react/src/components/loading/index.tsx
index 93fb2f0e..0da226bc 100644
--- a/packages/status-react/src/components/loading/index.tsx
+++ b/packages/status-react/src/components/loading/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import ContentLoader from 'react-content-loader'
import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx b/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
index 784a30f8..fbeae1d6 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import * as Collapsible from '@radix-ui/react-collapsible'
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
index e582e8e3..e202daaf 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
import { NavLink } from 'react-router-dom'
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
index 265a9ad2..90b26eb9 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useSortedChats } from '../../../../protocol'
import { Box } from '../../../../system'
import { ChatCategory } from './chat-category'
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
index f8c13530..688c0944 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useProtocol } from '../../../../protocol'
import { Button, CopyInput, Dialog, Flex, Grid, Text } from '../../../../system'
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
index 0343c19f..04353c04 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useProtocol } from '../../../../protocol'
import { styled } from '../../../../styles/config'
import { Avatar, DialogTrigger, Text } from '../../../../system'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
index 18d5014f..8e152cdf 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import { styled } from '../../../../styles/config'
import { Dialog, Grid, Text } from '../../../../system'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
index f162ed7e..ddd109ea 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useAccount } from '../../../../protocol'
import { Button, Flex } from '../../../../system'
import { Grid } from '../../../../system/grid'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
index bb605944..49655e2a 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import { QRCodeSVG } from 'qrcode.react'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
index 8a687893..96ed241a 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import {
Avatar,
Dialog,
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index 4b5cf560..3feffeb7 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useAppState } from '../../contexts/app-context'
import { useAccount } from '../../protocol'
import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
index 39e8edf5..3db23fcc 100644
--- a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
+++ b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useAccount } from '../../protocol'
import {
Avatar,
diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
index 9939e9d3..28416e00 100644
--- a/packages/status-react/src/components/member-sidebar/index.tsx
+++ b/packages/status-react/src/components/member-sidebar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useAccount, useMembers } from '../../protocol'
import { styled } from '../../styles/config'
import { Grid, Heading } from '../../system'
diff --git a/packages/status-react/src/components/member-sidebar/member-group.tsx b/packages/status-react/src/components/member-sidebar/member-group.tsx
index 797fc269..58c3f1be 100644
--- a/packages/status-react/src/components/member-sidebar/member-group.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-group.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
import { Text } from '../../system'
+import type React from 'react'
+
interface Props {
label: string
children: React.ReactElement[] | React.ReactElement
diff --git a/packages/status-react/src/components/member-sidebar/member-item.tsx b/packages/status-react/src/components/member-sidebar/member-item.tsx
index b3830848..21e91afd 100644
--- a/packages/status-react/src/components/member-sidebar/member-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-item.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Avatar, EthAddress, Flex, Text } from '../../system'
import type { Member } from '../../protocol'
diff --git a/packages/status-react/src/components/member-sidebar/user-item.tsx b/packages/status-react/src/components/member-sidebar/user-item.tsx
index 2f91c979..a64361da 100644
--- a/packages/status-react/src/components/member-sidebar/user-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/user-item.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { styled } from '../../styles/config'
import { Avatar, DialogTrigger, EthAddress, Flex, Text } from '../../system'
import { DisconnectDialog } from './disconnect-dialog'
diff --git a/packages/status-react/src/components/reaction-popover/index.tsx b/packages/status-react/src/components/reaction-popover/index.tsx
index 52af43b1..e7665b14 100644
--- a/packages/status-react/src/components/reaction-popover/index.tsx
+++ b/packages/status-react/src/components/reaction-popover/index.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
-
import { useAccount } from '../../protocol'
import { styled } from '../../styles/config'
import { Flex, Image, Popover, PopoverTrigger } from '../../system'
import type { Reaction, Reactions } from '../../protocol'
+import type React from 'react'
interface Props {
children: React.ReactElement
diff --git a/packages/status-react/src/components/user-profile-dialog/index.tsx b/packages/status-react/src/components/user-profile-dialog/index.tsx
index 6544db4d..7de9cf1c 100644
--- a/packages/status-react/src/components/user-profile-dialog/index.tsx
+++ b/packages/status-react/src/components/user-profile-dialog/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Avatar, Dialog, EmojiHash, Heading, Text } from '../../system'
import type { Member } from '../../protocol'
diff --git a/packages/status-react/src/components/welcome-dialog/index.tsx b/packages/status-react/src/components/welcome-dialog/index.tsx
index 7b8c7363..156ee978 100644
--- a/packages/status-react/src/components/welcome-dialog/index.tsx
+++ b/packages/status-react/src/components/welcome-dialog/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import { useProtocol } from '../../protocol'
import { Avatar, Checkbox, Dialog, Flex, Text } from '../../system'
diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx
index c065c20e..edb66cc0 100644
--- a/packages/status-react/src/contexts/app-context.tsx
+++ b/packages/status-react/src/contexts/app-context.tsx
@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
import type { Config } from '../types/config'
+import type React from 'react'
import type { Dispatch, Reducer } from 'react'
type Context = {
diff --git a/packages/status-react/src/contexts/chat-context.tsx b/packages/status-react/src/contexts/chat-context.tsx
index 3e1e5baf..07063d43 100644
--- a/packages/status-react/src/contexts/chat-context.tsx
+++ b/packages/status-react/src/contexts/chat-context.tsx
@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
import type { Member, Message } from '../protocol'
+import type React from 'react'
import type { Dispatch, Reducer } from 'react'
type Context = {
diff --git a/packages/status-react/src/contexts/dialog-context.tsx b/packages/status-react/src/contexts/dialog-context.tsx
index f5247bec..3d7541c4 100644
--- a/packages/status-react/src/contexts/dialog-context.tsx
+++ b/packages/status-react/src/contexts/dialog-context.tsx
@@ -1,4 +1,6 @@
-import React, { cloneElement, createContext, useContext, useState } from 'react'
+import { cloneElement, createContext, useContext, useState } from 'react'
+
+import type React from 'react'
const DialogContext = createContext<
((dialog: React.ReactElement) => void) | null
diff --git a/packages/status-react/src/icons/bell-icon.tsx b/packages/status-react/src/icons/bell-icon.tsx
index 57d2752e..819415fa 100644
--- a/packages/status-react/src/icons/bell-icon.tsx
+++ b/packages/status-react/src/icons/bell-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const BellIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/chevron-down-icon.tsx b/packages/status-react/src/icons/chevron-down-icon.tsx
index a01397c1..42950940 100644
--- a/packages/status-react/src/icons/chevron-down-icon.tsx
+++ b/packages/status-react/src/icons/chevron-down-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ChevronDownIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/chevron-right-icon.tsx b/packages/status-react/src/icons/chevron-right-icon.tsx
index 9094fede..ad865eb3 100644
--- a/packages/status-react/src/icons/chevron-right-icon.tsx
+++ b/packages/status-react/src/icons/chevron-right-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ChevronRightIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/cross-icon.tsx b/packages/status-react/src/icons/cross-icon.tsx
index 7ddbd567..2ac605b0 100644
--- a/packages/status-react/src/icons/cross-icon.tsx
+++ b/packages/status-react/src/icons/cross-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const CrossIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/dots-icon.tsx b/packages/status-react/src/icons/dots-icon.tsx
index f50d8a7d..229a54b0 100644
--- a/packages/status-react/src/icons/dots-icon.tsx
+++ b/packages/status-react/src/icons/dots-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const DotsIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/double-tick-icon.tsx b/packages/status-react/src/icons/double-tick-icon.tsx
index 0725b63a..420d3043 100644
--- a/packages/status-react/src/icons/double-tick-icon.tsx
+++ b/packages/status-react/src/icons/double-tick-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const DoubleTickIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/edit-icon.tsx b/packages/status-react/src/icons/edit-icon.tsx
index 95a59f08..e50c07f5 100644
--- a/packages/status-react/src/icons/edit-icon.tsx
+++ b/packages/status-react/src/icons/edit-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const EditIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/emoji-icon.tsx b/packages/status-react/src/icons/emoji-icon.tsx
index e80c8f55..f3f27f5c 100644
--- a/packages/status-react/src/icons/emoji-icon.tsx
+++ b/packages/status-react/src/icons/emoji-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const EmojiIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/exit-icon.tsx b/packages/status-react/src/icons/exit-icon.tsx
index f3041f06..0667e403 100644
--- a/packages/status-react/src/icons/exit-icon.tsx
+++ b/packages/status-react/src/icons/exit-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ExitIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/gif-icon.tsx b/packages/status-react/src/icons/gif-icon.tsx
index e4c942c3..820e379d 100644
--- a/packages/status-react/src/icons/gif-icon.tsx
+++ b/packages/status-react/src/icons/gif-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const GifIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/group-icon.tsx b/packages/status-react/src/icons/group-icon.tsx
index b780b4c7..d6b01249 100644
--- a/packages/status-react/src/icons/group-icon.tsx
+++ b/packages/status-react/src/icons/group-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const GroupIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/image-icon.tsx b/packages/status-react/src/icons/image-icon.tsx
index 143dc54a..a650b6f2 100644
--- a/packages/status-react/src/icons/image-icon.tsx
+++ b/packages/status-react/src/icons/image-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ImageIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/pencil-icon.tsx b/packages/status-react/src/icons/pencil-icon.tsx
index 4bf16352..f1468467 100644
--- a/packages/status-react/src/icons/pencil-icon.tsx
+++ b/packages/status-react/src/icons/pencil-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const PencilIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/pin-icon.tsx b/packages/status-react/src/icons/pin-icon.tsx
index 3aab7865..d0a05b94 100644
--- a/packages/status-react/src/icons/pin-icon.tsx
+++ b/packages/status-react/src/icons/pin-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const PinIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/reaction-icon.tsx b/packages/status-react/src/icons/reaction-icon.tsx
index bdce9195..e4d3f672 100644
--- a/packages/status-react/src/icons/reaction-icon.tsx
+++ b/packages/status-react/src/icons/reaction-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ReactionIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/reply-icon.tsx b/packages/status-react/src/icons/reply-icon.tsx
index 916b7808..79f13fc0 100644
--- a/packages/status-react/src/icons/reply-icon.tsx
+++ b/packages/status-react/src/icons/reply-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const ReplyIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/sticker-icon.tsx b/packages/status-react/src/icons/sticker-icon.tsx
index ffedcb75..d447a24c 100644
--- a/packages/status-react/src/icons/sticker-icon.tsx
+++ b/packages/status-react/src/icons/sticker-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const StickerIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/tiny-chevron-right-icon.tsx b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
index ccfe8e07..70bfee86 100644
--- a/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
+++ b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const TinyChevronRightIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/tiny-community-icon.tsx b/packages/status-react/src/icons/tiny-community-icon.tsx
index 9ebbcc95..e38a4d52 100644
--- a/packages/status-react/src/icons/tiny-community-icon.tsx
+++ b/packages/status-react/src/icons/tiny-community-icon.tsx
@@ -1,5 +1,5 @@
// todo: add to /tiny folder
-import React from 'react'
+import type React from 'react'
export const TinyCommunityIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/tiny-reply-icon.tsx b/packages/status-react/src/icons/tiny-reply-icon.tsx
index 600f64ec..ac0698c5 100644
--- a/packages/status-react/src/icons/tiny-reply-icon.tsx
+++ b/packages/status-react/src/icons/tiny-reply-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const TinyReplyIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/trash-icon.tsx b/packages/status-react/src/icons/trash-icon.tsx
index 3d86cd18..f052b4cc 100644
--- a/packages/status-react/src/icons/trash-icon.tsx
+++ b/packages/status-react/src/icons/trash-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const TrashIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/icons/unpin-icon.tsx b/packages/status-react/src/icons/unpin-icon.tsx
index 32cc4414..5cb8e6c7 100644
--- a/packages/status-react/src/icons/unpin-icon.tsx
+++ b/packages/status-react/src/icons/unpin-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
export const UnpinIcon = (props: React.SVGProps) => {
return (
diff --git a/packages/status-react/src/protocol/provider.tsx b/packages/status-react/src/protocol/provider.tsx
index b315059e..5cd884b8 100644
--- a/packages/status-react/src/protocol/provider.tsx
+++ b/packages/status-react/src/protocol/provider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useReducer } from 'react'
+import { createContext, useEffect, useReducer } from 'react'
import { createClient } from '@status-im/js'
@@ -6,6 +6,7 @@ import { Failed } from '../components/failed'
import { Loading } from '../components/loading'
import type { Account, Client, ClientOptions, Community } from '@status-im/js'
+import type React from 'react'
export const Context = createContext(undefined)
diff --git a/packages/status-react/src/routes/chat/components/chat-info/index.tsx b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
index b2da60bc..30560b29 100644
--- a/packages/status-react/src/routes/chat/components/chat-info/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
// import { PinIcon } from '../../../../icons/pin-icon'
import { Avatar, Flex, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
index 637aff1a..c0d75fb8 100644
--- a/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Dialog } from '../../../../system'
export const PinnedMessagesDialog = () => {
diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
index 30cff605..1f602d36 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { useChatContext } from '../../../../contexts/chat-context'
import { useAccount } from '../../../../protocol'
@@ -10,6 +10,8 @@ import { styled } from '../../../../styles/config'
// import { Box, Flex, IconButton } from '../../../../system'
import { InputReply } from './input-reply'
+import type React from 'react'
+
interface Props {
mode?: 'normal' | 'editing'
value?: string
diff --git a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
index 05527264..8a1bb038 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useChatContext } from '../../../../contexts/chat-context'
import { CrossIcon } from '../../../../icons/cross-icon'
import { MessageContentType } from '../../../../protocol'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
index 1a9e46df..1c265080 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { ReactionPopover } from '../../../../components/reaction-popover'
import { PencilIcon } from '../../../../icons/pencil-icon'
// import { PinIcon } from '../../../../icons/pin-icon'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
index 7ccc9df5..2a5ad3e6 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import { useMatch } from 'react-router-dom'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
index dfcb4171..4b7414f1 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { MessageContentType, useProtocol } from '../../../../protocol'
import { styled } from '../../../../styles/config'
import { Avatar, Box, Flex, Image, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx b/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
index 6a7fe204..ade18f72 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import {
emojis,
diff --git a/packages/status-react/src/routes/chat/components/date-divider/index.tsx b/packages/status-react/src/routes/chat/components/date-divider/index.tsx
index 0a7ec31d..0753a92c 100644
--- a/packages/status-react/src/routes/chat/components/date-divider/index.tsx
+++ b/packages/status-react/src/routes/chat/components/date-divider/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import isSameDay from 'date-fns/isSameDay'
import { Flex, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/loading-toast/index.tsx b/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
index 5766063d..9c5f3788 100644
--- a/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
+++ b/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { keyframes } from '../../../../styles/config'
import { Box, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/message-loader/index.tsx b/packages/status-react/src/routes/chat/components/message-loader/index.tsx
index 369f61bd..4bb73451 100644
--- a/packages/status-react/src/routes/chat/components/message-loader/index.tsx
+++ b/packages/status-react/src/routes/chat/components/message-loader/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import ContentLoader from 'react-content-loader'
export const MessageLoader = () => {
diff --git a/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
index a9c6d993..580b7689 100644
--- a/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
+++ b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import { Fragment, useState } from 'react'
import format from 'date-fns/format'
import isSameDay from 'date-fns/isSameDay'
diff --git a/packages/status-react/src/routes/chat/components/navbar/index.tsx b/packages/status-react/src/routes/chat/components/navbar/index.tsx
index 9c2a1f30..c95c9b82 100644
--- a/packages/status-react/src/routes/chat/components/navbar/index.tsx
+++ b/packages/status-react/src/routes/chat/components/navbar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useMatch } from 'react-router-dom'
// import { ChatMenu } from '../../../../components/chat-menu'
diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
index 5fb625f4..4ba82fdc 100644
--- a/packages/status-react/src/routes/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef } from 'react'
+import { Fragment, useEffect, useRef } from 'react'
import isSameDay from 'date-fns/isSameDay'
import { useLocation, useMatch } from 'react-router-dom'
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index e3657bb0..05e3301d 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import {
BrowserRouter,
Navigate,
diff --git a/packages/status-react/src/system/activity/activity.tsx b/packages/status-react/src/system/activity/activity.tsx
index ec5793a2..a3f50abf 100644
--- a/packages/status-react/src/system/activity/activity.tsx
+++ b/packages/status-react/src/system/activity/activity.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useNavigate } from 'react-router-dom'
import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/system/avatar/avatar.tsx b/packages/status-react/src/system/avatar/avatar.tsx
index 79a5f2dc..32b64f29 100644
--- a/packages/status-react/src/system/avatar/avatar.tsx
+++ b/packages/status-react/src/system/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
import { Image } from '../image'
import { Base, Content, Indicator, Initials } from './styles'
diff --git a/packages/status-react/src/system/badge/badge.tsx b/packages/status-react/src/system/badge/badge.tsx
index 0224c491..3f2c78b9 100644
--- a/packages/status-react/src/system/badge/badge.tsx
+++ b/packages/status-react/src/system/badge/badge.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Text } from '../text'
import { Base } from './styles'
diff --git a/packages/status-react/src/system/button-group/button-group.tsx b/packages/status-react/src/system/button-group/button-group.tsx
index 87cb5c2a..351ff465 100644
--- a/packages/status-react/src/system/button-group/button-group.tsx
+++ b/packages/status-react/src/system/button-group/button-group.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
import { Button, Group } from './styles'
+import type React from 'react'
+
interface Props {
value: V
onChange: (value: V) => void
diff --git a/packages/status-react/src/system/button/button.tsx b/packages/status-react/src/system/button/button.tsx
index 36e763da..3a60e760 100644
--- a/packages/status-react/src/system/button/button.tsx
+++ b/packages/status-react/src/system/button/button.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
import { Base } from './styles'
import type { Variants } from './styles'
+import type React from 'react'
import type { Ref } from 'react'
type ButtonProps = React.ButtonHTMLAttributes & {
diff --git a/packages/status-react/src/system/checkbox/checkbox.tsx b/packages/status-react/src/system/checkbox/checkbox.tsx
index 74f0b99e..0d1d9acb 100644
--- a/packages/status-react/src/system/checkbox/checkbox.tsx
+++ b/packages/status-react/src/system/checkbox/checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
import { Text } from '../text'
import { Indicator, Root, Wrapper } from './styles'
diff --git a/packages/status-react/src/system/context-menu/context-menu.tsx b/packages/status-react/src/system/context-menu/context-menu.tsx
index e0b38003..1f45afd1 100644
--- a/packages/status-react/src/system/context-menu/context-menu.tsx
+++ b/packages/status-react/src/system/context-menu/context-menu.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from 'react'
+import { cloneElement, useState } from 'react'
import * as Primitive from '@radix-ui/react-context-menu'
@@ -10,6 +10,7 @@ import type {
ContextMenuSeparatorProps,
ContextMenuTriggerProps,
} from '@radix-ui/react-context-menu'
+import type React from 'react'
interface TriggerProps extends ContextMenuTriggerProps {
children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/copy-input/copy-input.tsx b/packages/status-react/src/system/copy-input/copy-input.tsx
index 19cffe8a..cf919862 100644
--- a/packages/status-react/src/system/copy-input/copy-input.tsx
+++ b/packages/status-react/src/system/copy-input/copy-input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import { forwardRef, useRef } from 'react'
import { composeRefs } from '@radix-ui/react-compose-refs'
diff --git a/packages/status-react/src/system/dialog/alert-dialog.tsx b/packages/status-react/src/system/dialog/alert-dialog.tsx
index 2f30506d..fcdc46fd 100644
--- a/packages/status-react/src/system/dialog/alert-dialog.tsx
+++ b/packages/status-react/src/system/dialog/alert-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, useCallback, useRef } from 'react'
+import { cloneElement, useCallback, useRef } from 'react'
import * as Primitive from '@radix-ui/react-alert-dialog'
@@ -12,6 +12,7 @@ import { Actions, Body, Content, Header, Overlay } from './styles'
import type { ButtonProps } from '../button'
import type { DialogContentProps } from '@radix-ui/react-dialog'
+import type React from 'react'
interface TriggerProps {
open?: boolean
diff --git a/packages/status-react/src/system/dialog/dialog.tsx b/packages/status-react/src/system/dialog/dialog.tsx
index 3906d808..4c4ff14b 100644
--- a/packages/status-react/src/system/dialog/dialog.tsx
+++ b/packages/status-react/src/system/dialog/dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
import * as Primitive from '@radix-ui/react-dialog'
@@ -13,6 +13,7 @@ import { Actions, Body, Content, Header, Overlay } from './styles'
import type { ButtonProps } from '../button'
import type { Variants } from './styles'
import type { DialogContentProps } from '@radix-ui/react-dialog'
+import type React from 'react'
interface DialogTriggerProps {
children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx b/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
index 9bd1bd82..4615fb6d 100644
--- a/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
+++ b/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import * as Primitive from '@radix-ui/react-dropdown-menu'
import * as Menu from '../menu'
@@ -10,6 +8,7 @@ import type {
DropdownMenuSeparatorProps,
DropdownMenuTriggerProps,
} from '@radix-ui/react-dropdown-menu'
+import type React from 'react'
interface TriggerProps extends DropdownMenuTriggerProps {
children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
index ac27e8bd..fac6daf7 100644
--- a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
+++ b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Base } from './styles'
interface Props {
diff --git a/packages/status-react/src/system/eth-address/eth-address.tsx b/packages/status-react/src/system/eth-address/eth-address.tsx
index a0412012..5b83bc39 100644
--- a/packages/status-react/src/system/eth-address/eth-address.tsx
+++ b/packages/status-react/src/system/eth-address/eth-address.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Text } from '../text'
import type { TextProps } from '../text'
diff --git a/packages/status-react/src/system/icon-button/icon-button.tsx b/packages/status-react/src/system/icon-button/icon-button.tsx
index 33457977..8b90bd63 100644
--- a/packages/status-react/src/system/icon-button/icon-button.tsx
+++ b/packages/status-react/src/system/icon-button/icon-button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
import { Link } from 'react-router-dom'
@@ -7,6 +7,7 @@ import { Base } from './styles'
import type { Variants } from './styles'
import type Stitches from '@stitches/react'
+import type React from 'react'
import type { Ref } from 'react'
import type { LinkProps } from 'react-router-dom'
diff --git a/packages/status-react/src/system/icon/icon.tsx b/packages/status-react/src/system/icon/icon.tsx
index 37f78db2..e39ddf51 100644
--- a/packages/status-react/src/system/icon/icon.tsx
+++ b/packages/status-react/src/system/icon/icon.tsx
@@ -1,7 +1,9 @@
-import React, { cloneElement } from 'react'
+import { cloneElement } from 'react'
import { Root } from '@radix-ui/react-accessible-icon'
+import type React from 'react'
+
type Props = ({ label: string; hidden?: false } | { hidden: true }) & {
children: React.ReactElement
}
diff --git a/packages/status-react/src/system/image/image.tsx b/packages/status-react/src/system/image/image.tsx
index e1e3b21c..e01f4d0d 100644
--- a/packages/status-react/src/system/image/image.tsx
+++ b/packages/status-react/src/system/image/image.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { Base } from './styles'
import type { Variants } from './styles'
diff --git a/packages/status-react/src/system/menu/menu.tsx b/packages/status-react/src/system/menu/menu.tsx
index f392d7eb..ef8bc75c 100644
--- a/packages/status-react/src/system/menu/menu.tsx
+++ b/packages/status-react/src/system/menu/menu.tsx
@@ -1,10 +1,12 @@
-import React, { cloneElement } from 'react'
+import { cloneElement } from 'react'
import { ChevronRightIcon } from '../../icons/chevron-right-icon'
import { styled, theme } from '../../styles/config'
import { Box } from '../box'
import { Icon } from '../icon'
+import type React from 'react'
+
const Content = styled('div', {
minWidth: 176,
padding: '8px 0',
diff --git a/packages/status-react/src/system/popover/popover.tsx b/packages/status-react/src/system/popover/popover.tsx
index 9eecc417..55d4f02e 100644
--- a/packages/status-react/src/system/popover/popover.tsx
+++ b/packages/status-react/src/system/popover/popover.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
import * as Primitive from '@radix-ui/react-popover'
@@ -6,6 +6,7 @@ import { Content } from './styles'
import type { PopoverContentProps } from '@radix-ui/react-popover'
import type Stitches from '@stitches/react'
+import type React from 'react'
import type { Ref } from 'react'
interface TriggerProps {
diff --git a/packages/status-react/src/system/tabs/tabs.tsx b/packages/status-react/src/system/tabs/tabs.tsx
index 8a63b768..e451accc 100644
--- a/packages/status-react/src/system/tabs/tabs.tsx
+++ b/packages/status-react/src/system/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
diff --git a/packages/status-react/src/system/tag/tag.tsx b/packages/status-react/src/system/tag/tag.tsx
index feb83a78..c373acd3 100644
--- a/packages/status-react/src/system/tag/tag.tsx
+++ b/packages/status-react/src/system/tag/tag.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
import { useNavigate } from 'react-router-dom'
import { TinyChevronRightIcon } from '../../icons/tiny-chevron-right-icon'
diff --git a/packages/status-react/src/system/text-input/text-input.tsx b/packages/status-react/src/system/text-input/text-input.tsx
index 96199707..2c0e22a8 100644
--- a/packages/status-react/src/system/text-input/text-input.tsx
+++ b/packages/status-react/src/system/text-input/text-input.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
import { Box } from '../box'
import { Text } from '../text'
import { Base } from './styles'
+import type React from 'react'
import type { Ref } from 'react'
type InputProps = React.InputHTMLAttributes
diff --git a/packages/status-react/src/system/tooltip/tooltip.tsx b/packages/status-react/src/system/tooltip/tooltip.tsx
index d5563ab6..0e9b5094 100644
--- a/packages/status-react/src/system/tooltip/tooltip.tsx
+++ b/packages/status-react/src/system/tooltip/tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
import * as Primitive from '@radix-ui/react-tooltip'
@@ -8,6 +8,7 @@ import type {
TooltipArrowProps,
TooltipContentProps,
} from '@radix-ui/react-tooltip'
+import type React from 'react'
import type { Ref } from 'react'
interface Props {
diff --git a/packages/status-react/src/system/visually-hidden/visually-hidden.tsx b/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
index cbb7e9e5..aa1632d1 100644
--- a/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
+++ b/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
import { Root } from '@radix-ui/react-visually-hidden'
+import type React from 'react'
+
type Props = {
children: React.ReactNode
}