Improve ESLint monorepo configuration (#228)

* Unify ESLint configuration

* Add .eslintignore file

* Add Node and Jest ESLint plugins

* Fix linting issues

* Sort imports and type imports

.eslintignore

@@ -0,0 +1,3 @@
+**/dist
+**/node_modules
+**/proto

.eslintrc

@@ -0,0 +1,80 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    // TODO: Enable type-aware linting (https://typescript-eslint.io/docs/linting/type-linting)
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "warnOnUnsupportedTypeScriptVersion": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "simple-import-sort",
+    "react",
+    "jsx-a11y"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:eslint-comments/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    // "plugin:node/recommended",
+    // "plugin:jest/recommended",
+    "prettier"
+  ],
+  "rules": {
+    // "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
+    "@typescript-eslint/consistent-type-imports": "error",
+    // "@typescript-eslint/consistent-type-exports": "error",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          // Side effect imports.
+          ["^\\u0000"],
+          // `react` related packages come first.
+          ["react"],
+          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+          ["^@?\\w"],
+          // Absolute imports and other imports such as Vue-style `@/foo`.
+          // Anything not matched in another group.
+          ["^"],
+          // Relative imports.
+          // Anything that starts with a dot.
+          ["^\\."],
+          // type imports last as a separate group
+          ["^.+\\u0000$"]
+        ]
+      }
+    ],
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      },
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  }
+}

.eslintrc.json

@@ -1,48 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": { "project": "./tsconfig.json" },
-  "env": {
-    "es6": true,
-    "node": true,
-    "mocha": true,
-    "browser": true
-  },
-  "ignorePatterns": ["node_modules", "build", "coverage", "proto"],
-  "plugins": ["import", "eslint-comments", "functional"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:eslint-comments/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
-    "prettier",
-    "prettier/@typescript-eslint"
-  ],
-  "globals": { "BigInt": true, "console": true, "WebAssembly": true },
-  "rules": {
-    "@typescript-eslint/explicit-function-return-type": ["error"],
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "eslint-comments/disable-enable-pair": [
-      "error",
-      { "allowWholeFile": true }
-    ],
-    "eslint-comments/no-unused-disable": "error",
-    "import/order": [
-      "error",
-      { "newlines-between": "always", "alphabetize": { "order": "asc" } }
-    ],
-    "no-constant-condition": ["error", { "checkLoops": false }],
-    "sort-imports": [
-      "error",
-      { "ignoreDeclarationSort": true, "ignoreCase": true }
-    ]
-  },
-  "overrides": [
-    {
-      "files": ["*.spec.ts", "**/test_utils/*.ts"],
-      "rules": {
-        "@typescript-eslint/no-non-null-assertion": "off"
-      }
-    }
-  ]
-}

package.json

@@ -8,6 +8,8 @@
   "scripts": {
     "fix": "run-s 'fix:*' && wsrun -e -c -s fix",
     "build": "wsrun -e -c -s build",
+    "lint": "eslint 'packages/**/*.{ts,tsx}'",
+    "lint:fix": "eslint 'packages/**/*.{ts,tsx}' --fix",
     "format": "prettier --write .",
     "typecheck": "wsrun -e -c -s typecheck",
     "test": "wsrun -e -c -s test"
@@ -15,6 +17,20 @@
   "devDependencies": {
     "@parcel/packager-ts": "2.3.2",
     "@parcel/transformer-typescript-types": "2.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-node": "^0.3.6",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.3.2",
     "prettier": "^2.5.1",

packages/status-core/.eslintrc.json

@@ -1,42 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": { "project": "./tsconfig.json" },
-  "env": { "es6": true },
-  "ignorePatterns": ["node_modules", "dist", "coverage", "proto"],
-  "plugins": ["import", "eslint-comments", "functional"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:eslint-comments/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
-    "prettier"
-  ],
-  "globals": { "BigInt": true, "console": true, "WebAssembly": true },
-  "rules": {
-    "@typescript-eslint/explicit-function-return-type": ["error"],
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "eslint-comments/disable-enable-pair": [
-      "error",
-      { "allowWholeFile": true }
-    ],
-    "eslint-comments/no-unused-disable": "error",
-    "import/order": [
-      "error",
-      { "newlines-between": "always", "alphabetize": { "order": "asc" } }
-    ],
-    "no-constant-condition": ["error", { "checkLoops": false }],
-    "sort-imports": [
-      "error",
-      { "ignoreDeclarationSort": true, "ignoreCase": true }
-    ]
-  },
-  "overrides": [
-    {
-      "files": ["*.spec.ts", "**/test_utils/*.ts"],
-      "rules": {
-        "@typescript-eslint/no-non-null-assertion": "off"
-      }
-    }
-  ]
-}

packages/status-core/package.json

@@ -36,15 +36,7 @@
     "@types/pbkdf2": "^3.1.0",
     "@types/secp256k1": "^4.0.3",
     "@types/uuid": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
     "chai": "^4.3.4",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-node": "^0.3.6",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-functional": "^3.7.0",
-    "eslint-plugin-import": "^2.24.2",
     "mocha": "^9.1.1",
     "npm-run-all": "^4.1.5",
     "ts-node": "^10.2.1",

packages/status-core/src/chat.ts

@@ -1,7 +1,9 @@
 import { idToContentTopic } from './contentTopic'
 import { createSymKeyFromPassword } from './encryption'
-import { ChatMessage, Content } from './wire/chat_message'
-import { CommunityChat } from './wire/community_chat'
+import { ChatMessage } from './wire/chat_message'
+
+import type { Content } from './wire/chat_message'
+import type { CommunityChat } from './wire/community_chat'
 
 /**
  * Represent a chat room. Only public chats are currently supported.

packages/status-core/src/community.spec.ts

@@ -2,7 +2,8 @@ import { expect } from 'chai'
 import { Waku } from 'js-waku'
 
 import { Community } from './community'
-import { CommunityDescription } from './wire/community_description'
+
+import type { CommunityDescription } from './wire/community_description'
 
 describe('Community [live data]', () => {
   before(function () {

packages/status-core/src/community.ts

@@ -1,11 +1,12 @@
 import debug from 'debug'
-import { Waku } from 'js-waku'
 
 import { Chat } from './chat'
 import { bufToHex, hexToBuf } from './utils'
-import { CommunityChat } from './wire/community_chat'
 import { CommunityDescription } from './wire/community_description'
 
+import type { CommunityChat } from './wire/community_chat'
+import type { Waku } from 'js-waku'
+
 const dbg = debug('communities:community')
 
 export class Community {

packages/status-core/src/contacts.ts

@@ -1,12 +1,14 @@
-import { PageDirection, Waku, WakuMessage } from 'js-waku'
+import { PageDirection, WakuMessage } from 'js-waku'
 
 import { idToContactCodeTopic } from './contentTopic'
-import { Identity } from './identity'
 import { StatusUpdate_StatusType } from './proto/communities/v1/status_update'
 import { bufToHex, getLatestUserNickname } from './utils'
 import { ChatIdentity } from './wire/chat_identity'
 import { StatusUpdate } from './wire/status_update'
 
+import type { Identity } from './identity'
+import type { Waku } from 'js-waku'
+
 const STATUS_BROADCAST_INTERVAL = 30000
 const NICKNAME_BROADCAST_INTERVAL = 300000
 

packages/status-core/src/contentTopic.ts

@@ -1,5 +1,4 @@
 import { Buffer } from 'buffer'
-
 import { keccak256 } from 'js-sha3'
 
 const TopicLength = 4

packages/status-core/src/groupChats.ts

@@ -1,17 +1,17 @@
-import { Waku, WakuMessage } from 'js-waku'
+import { WakuMessage } from 'js-waku'
 import { DecryptionMethod } from 'js-waku/build/main/lib/waku_message'
 
+import { ChatMessage } from '.'
 import { createSymKeyFromPassword } from './encryption'
-import { Identity } from './identity'
 import { MembershipUpdateEvent_EventType } from './proto/communities/v1/membership_update_message'
 import { getNegotiatedTopic, getPartitionedTopic } from './topics'
 import { bufToHex, compressPublicKey } from './utils'
-import {
-  MembershipSignedEvent,
-  MembershipUpdateMessage,
-} from './wire/membership_update_message'
+import { MembershipUpdateMessage } from './wire/membership_update_message'
 
-import { ChatMessage, Content } from '.'
+import type { Content } from '.'
+import type { Identity } from './identity'
+import type { MembershipSignedEvent } from './wire/membership_update_message'
+import type { Waku } from 'js-waku'
 
 type GroupMember = {
   id: string

packages/status-core/src/identity.ts

@@ -1,5 +1,4 @@
 import { Buffer } from 'buffer'
-
 import { keccak256 } from 'js-sha3'
 import { generatePrivateKey } from 'js-waku'
 import * as secp256k1 from 'secp256k1'

packages/status-core/src/index.ts

@@ -1,25 +1,25 @@
-export { Identity } from './identity'
-export { Messenger } from './messenger'
+export { Chat } from './chat'
 export { Community } from './community'
 export { Contacts } from './contacts'
-export { Chat } from './chat'
-export { GroupChats } from './groupChats'
 export type { GroupChat, GroupChatsType } from './groupChats'
+export { GroupChats } from './groupChats'
+export { Identity } from './identity'
+export { Messenger } from './messenger'
 export {
   bufToHex,
-  hexToBuf,
+  compressPublicKey,
   genPrivateKeyWithEntropy,
   getLatestUserNickname,
-  compressPublicKey,
+  hexToBuf,
 } from './utils'
 export { ApplicationMetadataMessage } from './wire/application_metadata_message'
-export { ChatMessage } from './wire/chat_message'
 export type {
-  ContentType,
-  Content,
-  StickerContent,
-  ImageContent,
   AudioContent,
+  Content,
+  ContentType,
+  ImageContent,
+  StickerContent,
   TextContent,
 } from './wire/chat_message'
+export { ChatMessage } from './wire/chat_message'
 export { getNodesFromHostedJson } from 'js-waku'

packages/status-core/src/messenger.spec.ts

@@ -6,9 +6,10 @@ import { Community } from './community'
 import { Identity } from './identity'
 import { Messenger } from './messenger'
 import { bufToHex } from './utils'
-import { ApplicationMetadataMessage } from './wire/application_metadata_message'
 import { ContentType } from './wire/chat_message'
 
+import type { ApplicationMetadataMessage } from './wire/application_metadata_message'
+
 const testChatId = 'test-chat-id'
 
 const dbg = debug('communities:test:messenger')
@@ -97,6 +98,7 @@ describe('Messenger', () => {
 
     const receivedMessage = await receivedMessagePromise
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     expect(bufToHex(receivedMessage.signer!)).to.eq(
       bufToHex(identityAlice.publicKey)
     )

packages/status-core/src/messenger.ts

@@ -1,14 +1,16 @@
 import debug from 'debug'
 import { Waku, WakuMessage } from 'js-waku'
-import { CreateOptions as WakuCreateOptions } from 'js-waku/build/main/lib/waku'
 import { DecryptionMethod } from 'js-waku/build/main/lib/waku_message'
 
 import { Chat } from './chat'
-import { Identity } from './identity'
 import { ApplicationMetadataMessage_Type } from './proto/status/v1/application_metadata_message'
 import { getLatestUserNickname } from './utils'
 import { ApplicationMetadataMessage } from './wire/application_metadata_message'
-import { ChatMessage, Content } from './wire/chat_message'
+import { ChatMessage } from './wire/chat_message'
+
+import type { Identity } from './identity'
+import type { Content } from './wire/chat_message'
+import type { CreateOptions as WakuCreateOptions } from 'js-waku/build/main/lib/waku'
 
 const dbg = debug('communities:messenger')
 

packages/status-core/src/topics.ts

@@ -6,7 +6,7 @@ import { bufToHex } from 'js-waku/build/main/lib/utils'
 import { idToContentTopic } from './contentTopic'
 import { hexToBuf } from './utils'
 
-import { Identity } from '.'
+import type { Identity } from '.'
 
 const EC = new ec('secp256k1')
 const partitionsNum = new BN(5000)

packages/status-core/src/utils.ts

@@ -1,9 +1,11 @@
 import { ec } from 'elliptic'
-import { PageDirection, utils, Waku } from 'js-waku'
+import { PageDirection, utils } from 'js-waku'
 
 import { idToContactCodeTopic } from './contentTopic'
 import { ChatIdentity } from './proto/communities/v1/chat_identity'
 
+import type { Waku } from 'js-waku'
+
 const EC = new ec('secp256k1')
 
 const hexToBuf = utils.hexToBuf

packages/status-core/src/wire/application_metadata_message.ts

@@ -2,13 +2,13 @@ import { keccak256 } from 'js-sha3'
 import { Reader } from 'protobufjs'
 import secp256k1 from 'secp256k1'
 
-import { Identity } from '../identity'
 import * as proto from '../proto/status/v1/application_metadata_message'
-import { ApplicationMetadataMessage_Type } from '../proto/status/v1/application_metadata_message'
 import { hexToBuf } from '../utils'
-
 import { ChatMessage } from './chat_message'
 
+import type { Identity } from '../identity'
+import type { ApplicationMetadataMessage_Type } from '../proto/status/v1/application_metadata_message'
+
 export class ApplicationMetadataMessage {
   private constructor(public proto: proto.ApplicationMetadataMessage) {}
 

packages/status-core/src/wire/chat_identity.ts

@@ -1,7 +1,8 @@
 import { Reader } from 'protobufjs'
 
 import * as proto from '../proto/communities/v1/chat_identity'
-import { IdentityImage } from '../proto/communities/v1/chat_identity'
+
+import type { IdentityImage } from '../proto/communities/v1/chat_identity'
 
 export class ChatIdentity {
   public constructor(public proto: proto.ChatIdentity) {}

packages/status-core/src/wire/chat_message.spec.ts

@@ -5,14 +5,9 @@ import {
   ChatMessage_ContentType,
 } from '../proto/communities/v1/chat_message'
 import { ImageType } from '../proto/communities/v1/enums'
+import { ChatMessage, ContentType } from './chat_message'
 
-import {
-  AudioContent,
-  ChatMessage,
-  ContentType,
-  ImageContent,
-  StickerContent,
-} from './chat_message'
+import type { AudioContent, ImageContent, StickerContent } from './chat_message'
 
 describe('Chat Message', () => {
   it('Encode & decode Image message', () => {

packages/status-core/src/wire/chat_message.ts

@@ -1,14 +1,16 @@
 import { Reader } from 'protobufjs'
 
 import * as proto from '../proto/communities/v1/chat_message'
-import {
+import { ChatMessage_ContentType } from '../proto/communities/v1/chat_message'
+import { MessageType } from '../proto/communities/v1/enums'
+
+import type {
   AudioMessage,
   AudioMessage_AudioType,
-  ChatMessage_ContentType,
   ImageMessage,
   StickerMessage,
 } from '../proto/communities/v1/chat_message'
-import { ImageType, MessageType } from '../proto/communities/v1/enums'
+import type { ImageType } from '../proto/communities/v1/enums'
 
 export type Content = TextContent | StickerContent | ImageContent | AudioContent
 

packages/status-core/src/wire/community_chat.ts

@@ -1,13 +1,13 @@
 import { Reader } from 'protobufjs'
 
 import * as proto from '../proto/communities/v1/communities'
-import {
+import { ChatIdentity } from './chat_identity'
+
+import type {
   CommunityMember,
   CommunityPermissions,
 } from '../proto/communities/v1/communities'
 
-import { ChatIdentity } from './chat_identity'
-
 export class CommunityChat {
   public constructor(public proto: proto.CommunityChat) {}
 

packages/status-core/src/wire/community_description.ts

@@ -1,15 +1,15 @@
 import debug from 'debug'
-import { WakuMessage, WakuStore } from 'js-waku'
 import { Reader } from 'protobufjs'
 
 import { idToContentTopic } from '../contentTopic'
 import { createSymKeyFromPassword } from '../encryption'
 import * as proto from '../proto/communities/v1/communities'
 import { bufToHex } from '../utils'
-
 import { ApplicationMetadataMessage } from './application_metadata_message'
 import { ChatIdentity } from './chat_identity'
-import { CommunityChat } from './community_chat'
+
+import type { CommunityChat } from './community_chat'
+import type { WakuMessage, WakuStore } from 'js-waku'
 
 const dbg = debug('communities:wire:community_description')
 

packages/status-react/.eslintrc.json

@@ -1,42 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": { "project": "./tsconfig.json" },
-  "env": { "es6": true },
-  "ignorePatterns": ["node_modules", "dist", "coverage", "proto"],
-  "plugins": ["import", "eslint-comments", "functional"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:eslint-comments/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  "globals": { "BigInt": true, "console": true, "WebAssembly": true },
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "eslint-comments/disable-enable-pair": [
-      "error",
-      { "allowWholeFile": true }
-    ],
-    "eslint-comments/no-unused-disable": "error",
-    "import/order": [
-      "error",
-      { "newlines-between": "always", "alphabetize": { "order": "asc" } }
-    ],
-    "no-constant-condition": ["error", { "checkLoops": false }],
-    "sort-imports": [
-      "error",
-      { "ignoreDeclarationSort": true, "ignoreCase": true }
-    ]
-  },
-  "overrides": [
-    {
-      "files": ["*.spec.ts", "**/test_utils/*.ts"],
-      "rules": {
-        "@typescript-eslint/no-non-null-assertion": "off"
-      }
-    }
-  ]
-}

packages/status-react/package.json

@@ -37,12 +37,8 @@
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.16",
     "@types/styled-components": "^5.1.12",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.29.0",
     "chai": "^4.3.4",
     "copyfiles": "^2.4.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
     "jsdom": "^16.7.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^9.0.3",

packages/status-react/src/components/ActivityCenter/ActivityButton.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useIdentity } from '../../contexts/identityProvider'
@@ -6,7 +7,6 @@ import { useActivities } from '../../hooks/useActivities'
 import { useClickOutside } from '../../hooks/useClickOutside'
 import { TopBtn } from '../Chat/ChatTopbar'
 import { ActivityIcon } from '../Icons/ActivityIcon'
-
 import { ActivityCenter } from './ActivityCenter'
 
 interface ActivityButtonProps {

packages/status-react/src/components/ActivityCenter/ActivityCenter.tsx

@@ -1,17 +1,18 @@
 import React, { useMemo, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
-import { ActivityAction } from '../../hooks/useActivities'
-import { Activity } from '../../models/Activity'
 import { buttonTransparentStyles } from '../Buttons/buttonStyle'
 import { Tooltip } from '../Form/Tooltip'
 import { HideIcon } from '../Icons/HideIcon'
 import { ReadIcon } from '../Icons/ReadIcon'
 import { ShowIcon } from '../Icons/ShowIcon'
-
 import { ActivityMessage } from './ActivityMessage'
 
+import type { ActivityAction } from '../../hooks/useActivities'
+import type { Activity } from '../../models/Activity'
+
 interface ActivityCenterProps {
   activities: Activity[]
   setShowActivityCenter: (val: boolean) => void

packages/status-react/src/components/ActivityCenter/ActivityMessage.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useModal } from '../../contexts/modalProvider'
 import { useScrollToMessage } from '../../contexts/scrollProvider'
-import { ActivityAction } from '../../hooks/useActivities'
 import { useClickOutside } from '../../hooks/useClickOutside'
-import { Activity } from '../../models/Activity'
 import { equalDate } from '../../utils/equalDate'
 import { DownloadButton } from '../Buttons/DownloadButton'
 import { Mention } from '../Chat/ChatMessageContent'
@@ -35,9 +34,11 @@ import {
 } from '../Messages/Styles'
 import { ProfileModalName } from '../Modals/ProfileModal'
 import { textMediumStyles, textSmallStyles } from '../Text'
-
 import { ActivityBtn, FlexDiv } from './ActivityCenter'
 
+import type { ActivityAction } from '../../hooks/useActivities'
+import type { Activity } from '../../models/Activity'
+
 const today = new Date()
 
 type ActivityMessageProps = {
@@ -168,14 +169,15 @@ export function ActivityMessage({
             )}
             <ActivityText>
               {'message' in activity && activity.message?.content && (
-                <div
+                // TODO: Check if broken (was a div)
+                <button
                   onClick={() => {
                     scroll(activity.message, activity.channel.id)
                     setShowActivityCenter(false)
                   }}
                 >
                   {elements.map(el => el)}
-                </div>
+                </button>
               )}
               {activity.type === 'request' &&
                 activity.requestType === 'income' &&

packages/status-react/src/components/Buttons/BackButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { LeftIcon } from '../Icons/LeftIcon'

packages/status-react/src/components/Buttons/DownloadButton.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { buttonStyles } from './buttonStyle'

packages/status-react/src/components/Channels/Channel.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
-import { ChannelData } from '../../models/ChannelData'
 import { ChannelMenu } from '../Form/ChannelMenu'
 import { Tooltip } from '../Form/Tooltip'
 import { GroupIcon } from '../Icons/GroupIcon'
 import { MutedIcon } from '../Icons/MutedIcon'
 import { textMediumStyles } from '../Text'
-
 import { ChannelIcon } from './ChannelIcon'
 
+import type { ChannelData } from '../../models/ChannelData'
+
 function RenderChannelName({
   channel,
   activeView,

packages/status-react/src/components/Channels/ChannelIcon.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { useNarrow } from '../../contexts/narrowProvider'
-import { ChannelData } from '../../models/ChannelData'
+
+import type { ChannelData } from '../../models/ChannelData'
 
 interface ChannelIconProps {
   channel: ChannelData

packages/status-react/src/components/Channels/Channels.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+
 import styled from 'styled-components'
 
 import { ChatState, useChatState } from '../../contexts/chatStateProvider'
@@ -6,7 +7,6 @@ import { useIdentity } from '../../contexts/identityProvider'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { CreateIcon } from '../Icons/CreateIcon'
 import { UserCreation } from '../UserCreation/UserCreation'
-
 import { Channel } from './Channel'
 
 interface ChannelsProps {

packages/status-react/src/components/Channels/EmptyChannel.tsx

@@ -1,15 +1,16 @@
 import React, { useMemo } from 'react'
+
 import styled from 'styled-components'
 
 import { useUserPublicKey } from '../../contexts/identityProvider'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
-import { ChannelData } from '../../models/ChannelData'
 import { textMediumStyles } from '../Text'
-
 import { ChannelInfo, ChannelName } from './Channel'
 import { ChannelLogo } from './ChannelIcon'
 
+import type { ChannelData } from '../../models/ChannelData'
+
 type ChannelBeggingTextProps = {
   channel: ChannelData
 }

packages/status-react/src/components/Chat/ChatBody.tsx

@@ -1,20 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
-import { Reply } from '../../hooks/useReply'
-import { ChannelData } from '../../models/ChannelData'
 import { TokenRequirement } from '../Form/TokenRequirement'
 import { MessagesList } from '../Messages/MessagesList'
 import { NarrowChannels } from '../NarrowMode/NarrowChannels'
 import { NarrowMembers } from '../NarrowMode/NarrowMembers'
 import { LoadingSkeleton } from '../Skeleton/LoadingSkeleton'
-
 import { ChatCreation } from './ChatCreation'
 import { ChatInput } from './ChatInput'
 import { ChatTopbar, ChatTopbarLoading } from './ChatTopbar'
 
+import type { Reply } from '../../hooks/useReply'
+import type { ChannelData } from '../../models/ChannelData'
+
 export enum ChatBodyState {
   Chat,
   Channels,

packages/status-react/src/components/Chat/ChatCreation.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { ChatState, useChatState } from '../../contexts/chatStateProvider'
 import { useUserPublicKey } from '../../contexts/identityProvider'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
-import { ChannelData } from '../../models/ChannelData'
 import { ActivityButton } from '../ActivityCenter/ActivityButton'
 import { BackButton } from '../Buttons/BackButton'
 import { buttonStyles } from '../Buttons/buttonStyle'
@@ -13,9 +13,10 @@ import { CrossIcon } from '../Icons/CrossIcon'
 import { Member } from '../Members/Member'
 import { SearchBlock } from '../SearchBlock'
 import { textMediumStyles } from '../Text'
-
 import { ChatInput } from './ChatInput'
 
+import type { ChannelData } from '../../models/ChannelData'
+
 interface ChatCreationProps {
   setEditGroup?: (val: boolean) => void
   activeChannel?: ChannelData

packages/status-react/src/components/Chat/ChatInput.tsx

@@ -1,5 +1,7 @@
-import { EmojiData } from 'emoji-mart'
+import 'emoji-mart/css/emoji-mart.css'
+
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { ChatState, useChatState } from '../../contexts/chatStateProvider'
@@ -8,7 +10,6 @@ import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useModal } from '../../contexts/modalProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
-import { Reply } from '../../hooks/useReply'
 import { uintToImgUrl } from '../../utils/uintToImgUrl'
 import { ClearBtn } from '../Form/inputStyles'
 import { ClearSvg } from '../Icons/ClearIcon'
@@ -18,14 +19,15 @@ import { GifIcon } from '../Icons/GifIcon'
 import { PictureIcon } from '../Icons/PictureIcon'
 import { ReplySvg } from '../Icons/ReplyIcon'
 import { StickerIcon } from '../Icons/StickerIcon'
-import 'emoji-mart/css/emoji-mart.css'
 import { SizeLimitModal, SizeLimitModalName } from '../Modals/SizeLimitModal'
 import { UserCreationStartModalName } from '../Modals/UserCreationStartModal'
 import { SearchBlock } from '../SearchBlock'
 import { textMediumStyles, textSmallStyles } from '../Text'
-
 import { EmojiPicker } from './EmojiPicker'
 
+import type { Reply } from '../../hooks/useReply'
+import type { EmojiData } from 'emoji-mart'
+
 interface ChatInputProps {
   reply?: Reply | undefined
   setReply?: (val: Reply | undefined) => void

packages/status-react/src/components/Chat/ChatMessageContent.tsx

@@ -1,17 +1,19 @@
-import { decode } from 'html-entities'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+
+import { decode } from 'html-entities'
 import styled from 'styled-components'
 
 import { useFetchMetadata } from '../../contexts/fetchMetadataProvider'
 import { useUserPublicKey } from '../../contexts/identityProvider'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
-import { ChatMessage } from '../../models/ChatMessage'
-import { Metadata } from '../../models/Metadata'
 import { ContactMenu } from '../Form/ContactMenu'
 import { ImageMenu } from '../Form/ImageMenu'
 import { textMediumStyles, textSmallStyles } from '../Text'
 
+import type { ChatMessage } from '../../models/ChatMessage'
+import type { Metadata } from '../../models/Metadata'
+
 interface MentionProps {
   id: string
   setMentioned: (val: boolean) => void

packages/status-react/src/components/Chat/ChatTopbar.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
@@ -16,7 +17,6 @@ import { MembersIcon } from '../Icons/MembersIcon'
 import { MoreIcon } from '../Icons/MoreIcon'
 import { CommunitySkeleton } from '../Skeleton/CommunitySkeleton'
 import { Loading } from '../Skeleton/Loading'
-
 import { ChatBodyState } from './ChatBody'
 
 export function ChatTopbarLoading() {

packages/status-react/src/components/Chat/EmojiPicker.tsx

@@ -1,9 +1,13 @@
-import { EmojiData, Picker } from 'emoji-mart'
 import React from 'react'
+
+import { Picker } from 'emoji-mart'
 import { useTheme } from 'styled-components'
 
 import { useLow } from '../../contexts/narrowProvider'
-import { lightTheme, Theme } from '../../styles/themes'
+import { lightTheme } from '../../styles/themes'
+
+import type { Theme } from '../../styles/themes'
+import type { EmojiData } from 'emoji-mart'
 
 type EmojiPickerProps = {
   showEmoji: boolean

packages/status-react/src/components/Community.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../contexts/messengerProvider'
 import { useModal } from '../contexts/modalProvider'
-
 import { CommunityIdentity } from './CommunityIdentity'
 import { CommunityModalName } from './Modals/CommunityModal'
 import { CommunitySkeleton } from './Skeleton/CommunitySkeleton'

packages/status-react/src/components/CommunityChat.tsx

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react'
-import { ThemeProvider } from 'styled-components'
-import styled from 'styled-components'
 
-import { ConfigType } from '..'
+import styled, { ThemeProvider } from 'styled-components'
+
 import { ChatStateProvider } from '../contexts/chatStateProvider'
 import { ConfigProvider } from '../contexts/configProvider'
 import { FetchMetadataProvider } from '../contexts/fetchMetadataProvider'
@@ -12,12 +11,13 @@ import { ModalProvider } from '../contexts/modalProvider'
 import { NarrowProvider } from '../contexts/narrowProvider'
 import { ScrollProvider } from '../contexts/scrollProvider'
 import { ToastProvider } from '../contexts/toastProvider'
-import { Metadata } from '../models/Metadata'
 import { GlobalStyle } from '../styles/GlobalStyle'
-import { Theme } from '../styles/themes'
-
 import { CommunityChatRoom } from './CommunityChatRoom'
 
+import type { ConfigType } from '..'
+import type { Metadata } from '../models/Metadata'
+import type { Theme } from '../styles/themes'
+
 interface CommunityChatProps {
   theme: Theme
   communityKey: string

packages/status-react/src/components/CommunityChatRoom.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
+
 import styled from 'styled-components'
 
 import { ChatState, useChatState } from '../contexts/chatStateProvider'
 import { useMessengerContext } from '../contexts/messengerProvider'
 import { useNarrow } from '../contexts/narrowProvider'
-
 import { Channels } from './Channels/Channels'
 import { ChatBody } from './Chat/ChatBody'
 import { ChatCreation } from './Chat/ChatCreation'

packages/status-react/src/components/CommunityIdentity.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../contexts/messengerProvider'
-
 import { textMediumStyles } from './Text'
 
 export interface CommunityIdentityProps {

packages/status-react/src/components/Form/ChannelMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
@@ -6,7 +7,6 @@ import { useModal } from '../../contexts/modalProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
 import { useContextMenu } from '../../hooks/useContextMenu'
-import { ChannelData } from '../../models/ChannelData'
 import { AddMemberIcon } from '../Icons/AddMemberIcon'
 import { CheckIcon } from '../Icons/CheckIcon'
 import { DeleteIcon } from '../Icons/DeleteIcon'
@@ -20,10 +20,11 @@ import { ProfileIcon } from '../Icons/ProfileIcon'
 import { EditModalName } from '../Modals/EditModal'
 import { LeavingModalName } from '../Modals/LeavingModal'
 import { ProfileModalName } from '../Modals/ProfileModal'
-
 import { DropdownMenu, MenuItem, MenuSection, MenuText } from './DropdownMenu'
 import { MuteMenu } from './MuteMenu'
 
+import type { ChannelData } from '../../models/ChannelData'
+
 interface ChannelMenuProps {
   channel: ChannelData
   setShowChannelMenu?: (val: boolean) => void

packages/status-react/src/components/Form/ContactMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+
 import styled from 'styled-components'
 
 import { useUserPublicKey } from '../../contexts/identityProvider'
@@ -15,7 +16,6 @@ import { WarningSvg } from '../Icons/WarningIcon'
 import { UserAddress } from '../Messages/Styles'
 import { ProfileModalName } from '../Modals/ProfileModal'
 import { textMediumStyles } from '../Text'
-
 import { DropdownMenu, MenuItem, MenuText } from './DropdownMenu'
 
 type ContactMenuProps = {

packages/status-react/src/components/Form/CopyInput.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import { copy } from '../../utils/copy'
 import { reduceString } from '../../utils/reduceString'
-
 import {
   ButtonWrapper,
   InputBtn,

packages/status-react/src/components/Form/DropdownMenu.tsx

@@ -1,8 +1,11 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+
 import styled from 'styled-components'
 
 import { textSmallStyles } from '../Text'
 
+import type { ReactNode } from 'react'
+
 type DropdownMenuProps = {
   children: ReactNode
   className?: string

packages/status-react/src/components/Form/ImageMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react'
+
 import styled from 'styled-components'
 
 import { useClickOutside } from '../../hooks/useClickOutside'
@@ -7,7 +8,6 @@ import { copyImg } from '../../utils/copyImg'
 import { downloadImg } from '../../utils/downloadImg'
 import { CopyIcon } from '../Icons/CopyIcon'
 import { DownloadIcon } from '../Icons/DownloadIcon'
-
 import { DropdownMenu, MenuItem, MenuText } from './DropdownMenu'
 
 interface ImageMenuProps {

packages/status-react/src/components/Form/LoginInstructions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { MobileIcon } from '../Icons/MobileIcon'

packages/status-react/src/components/Form/MessageMenu.tsx

@@ -1,5 +1,5 @@
-import { BaseEmoji } from 'emoji-mart'
 import React, { useMemo, useRef } from 'react'
+
 import styled from 'styled-components'
 
 import { useUserPublicKey } from '../../contexts/identityProvider'
@@ -7,16 +7,17 @@ import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
 import { useClickPosition } from '../../hooks/useClickPosition'
 import { useContextMenu } from '../../hooks/useContextMenu'
-import { Reply } from '../../hooks/useReply'
-import { ChatMessage } from '../../models/ChatMessage'
 import { DeleteIcon } from '../Icons/DeleteIcon'
 import { EditIcon } from '../Icons/EditIcon'
 import { PinIcon } from '../Icons/PinIcon'
 import { ReplySvg } from '../Icons/ReplyIcon'
 import { ReactionPicker } from '../Reactions/ReactionPicker'
-
 import { DropdownMenu, MenuItem, MenuSection, MenuText } from './DropdownMenu'
 
+import type { Reply } from '../../hooks/useReply'
+import type { ChatMessage } from '../../models/ChatMessage'
+import type { BaseEmoji } from 'emoji-mart'
+
 interface MessageMenuProps {
   message: ChatMessage
   messageReactions: BaseEmoji[]

packages/status-react/src/components/Form/MuteMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react'
+
 import styled from 'styled-components'
 
 import { DropdownMenu, MenuItem, MenuText } from './DropdownMenu'

packages/status-react/src/components/Form/NameError.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { NameErrors } from '../../hooks/useNameError'
@@ -28,7 +29,7 @@ export function NameError({ error }: NameErrorProps) {
     case NameErrors.EndingWithEth:
       return (
         <ErrorText>
-          Usernames ending with “_eth” or "-eth" are not allowed
+          Usernames ending with {'"_eth"'} or {'"-eth"'} are not allowed
         </ErrorText>
       )
     case NameErrors.TooLong:

packages/status-react/src/components/Form/PasteInput.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { paste } from '../../utils/paste'
-
 import {
   ButtonWrapper,
   InputBtn,

packages/status-react/src/components/Form/TokenRequirement.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'

packages/status-react/src/components/Form/Tooltip.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 import { TipIcon } from '../Icons/TipIcon'

packages/status-react/src/components/Icons/ActivityIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const ActivityIcon = () => {

packages/status-react/src/components/Icons/AddContactIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type AddContactIconProps = {

packages/status-react/src/components/Icons/AddIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const AddIcon = () => {

packages/status-react/src/components/Icons/AddMemberIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type AddMemberIconProps = {

packages/status-react/src/components/Icons/BlockIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type BlockSvgProps = {

packages/status-react/src/components/Icons/ChainIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface ChainIconProps {

packages/status-react/src/components/Icons/ChatIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ChatSvgProps = {

packages/status-react/src/components/Icons/CheckIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type CheckIconProps = {

packages/status-react/src/components/Icons/ClearIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ClearSvgProps = {
@@ -34,8 +35,8 @@ export function ClearSvg({ height, width, className }: ClearSvgProps) {
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
+    fillRule="evenodd"
+    clipRule="evenodd"
     d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11 5C11.2441 5.24408 11.2441 5.63981 11 5.88388L8.88393 8L11 10.1161C11.2441 10.3602 11.2441 10.7559 11 11C10.756 11.2441 10.3602 11.2441 10.1162 11L8.00005 8.88389L5.88393 11C5.63985 11.2441 5.24412 11.2441 5.00005 11C4.75597 10.7559 4.75597 10.3602 5.00005 10.1161L7.11616 8L5.00005 5.88389C4.75597 5.63981 4.75597 5.24408 5.00005 5C5.24412 4.75593 5.63985 4.75593 5.88393 5L8.00005 7.11612L10.1162 5C10.3602 4.75592 10.756 4.75592 11 5Z"
     fill="#939BA1"
   />

packages/status-react/src/components/Icons/ClearIconFull.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ClearSvgFullProps = {

packages/status-react/src/components/Icons/ColorChatIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ColorChatSvgProps = {

packages/status-react/src/components/Icons/CommunityIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type CommunityIconProps = {

packages/status-react/src/components/Icons/CopyIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type CopyIconProps = {

packages/status-react/src/components/Icons/CreateIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const CreateIcon = () => {

packages/status-react/src/components/Icons/CrossIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface CrossIconProps {

packages/status-react/src/components/Icons/DeleteIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type DeleteIconProps = {

packages/status-react/src/components/Icons/DownloadIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type DownloadIconProps = {

packages/status-react/src/components/Icons/EditIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type EditIconProps = {

packages/status-react/src/components/Icons/EmojiIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface ThemeProps {

packages/status-react/src/components/Icons/GifIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface ThemeProps {

packages/status-react/src/components/Icons/GroupIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface GroupIconProps {

packages/status-react/src/components/Icons/HideIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const HideIcon = () => (

packages/status-react/src/components/Icons/LeftIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type LeftIconProps = {

packages/status-react/src/components/Icons/LoadingIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled, { keyframes } from 'styled-components'
 
 const rotation = keyframes`

packages/status-react/src/components/Icons/LogoutIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const LogoutIcon = () => {

packages/status-react/src/components/Icons/MarkerdaoLogo.tsx

@@ -25,8 +25,8 @@ export const MarkerdaoLogo = () => (
         y2="128"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#4FA89B" />
-        <stop offset="1" stop-color="#6ACEBB" />
+        <stop stopColor="#4FA89B" />
+        <stop offset="1" stopColor="#6ACEBB" />
       </linearGradient>
     </defs>
   </svg>

packages/status-react/src/components/Icons/MembersIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const MembersIcon = () => {

packages/status-react/src/components/Icons/MembersSmallIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type MembersSmallIconProps = {

packages/status-react/src/components/Icons/MobileIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const MobileIcon = () => {

packages/status-react/src/components/Icons/MoreIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const MoreIcon = () => {

packages/status-react/src/components/Icons/MuteIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type MuteIconProps = {

packages/status-react/src/components/Icons/MutedIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const MutedIcon = () => {

packages/status-react/src/components/Icons/NextIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const NextIcon = () => {

packages/status-react/src/components/Icons/PictureIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const PictureIcon = () => {

packages/status-react/src/components/Icons/PinIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type PinIconProps = {

packages/status-react/src/components/Icons/ProfileIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ProfileIconProps = {

packages/status-react/src/components/Icons/QuoteIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type QuoteProps = {

packages/status-react/src/components/Icons/ReactionIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ReactionProps = {

packages/status-react/src/components/Icons/ReadIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface ReadIconProps {

packages/status-react/src/components/Icons/ReadMessageIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 interface ReadMessageIconProps {

packages/status-react/src/components/Icons/ReplyActivityIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const ReplyIcon = () => (

packages/status-react/src/components/Icons/ReplyIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 type ReplyProps = {

packages/status-react/src/components/Icons/ScanIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styled from 'styled-components'
 
 export const ScanIcon = () => {