add hashtag input

2025-01-30 03:15:02 +03:00 · 2025-01-30 03:15:02 +03:00 · 9c2a415886
parent 0fc292829f
commit 9c2a415886
7 changed files with 1079 additions and 652 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "@hookform/resolvers": "^3.3.4",
+        "@ton/core": "^0.59.1",
+        "@tonconnect/ui-react": "^2.0.2",
        "@vkruglikov/react-telegram-web-app": "^2.1.9",
        "axios": "^1.6.7",
        "clsx": "^2.1.0",
@ -18,6 +20,7 @@
        "react-player": "^2.15.1",
        "react-query": "^3.39.3",
        "react-router-dom": "^6.22.2",
+        "react-tag-input": "^6.10.3",
        "tailwind-merge": "^2.2.1",
        "zod": "^3.22.4",
        "zustand": "^4.5.2"
@ -1108,6 +1111,27 @@
        "url": "https://opencollective.com/unts"
      }
    },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
+      "integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/@remix-run/router": {
      "version": "1.15.2",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz",
@ -1285,6 +1309,105 @@
        "win32"
      ]
    },
+    "node_modules/@ton/core": {
+      "version": "0.59.1",
+      "resolved": "https://registry.npmjs.org/@ton/core/-/core-0.59.1.tgz",
+      "integrity": "sha512-SxFBAvutYJaIllTkv82vbHTJhJI6NxzqUhi499CDEjJEZ9i6i9lHJiK2df4dlLAb/4SiWX6+QUzESkK4DEdnCw==",
+      "license": "MIT",
+      "dependencies": {
+        "symbol.inspect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@ton/crypto": ">=3.2.0"
+      }
+    },
+    "node_modules/@ton/crypto": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@ton/crypto/-/crypto-3.3.0.tgz",
+      "integrity": "sha512-/A6CYGgA/H36OZ9BbTaGerKtzWp50rg67ZCH2oIjV1NcrBaCK9Z343M+CxedvM7Haf3f/Ee9EhxyeTp0GKMUpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@ton/crypto-primitives": "2.1.0",
+        "jssha": "3.2.0",
+        "tweetnacl": "1.0.3"
+      }
+    },
+    "node_modules/@ton/crypto-primitives": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@ton/crypto-primitives/-/crypto-primitives-2.1.0.tgz",
+      "integrity": "sha512-PQesoyPgqyI6vzYtCXw4/ZzevePc4VGcJtFwf08v10OevVJHVfW238KBdpj1kEDQkxWLeuNHEpTECNFKnP6tow==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "jssha": "3.2.0"
+      }
+    },
+    "node_modules/@tonconnect/isomorphic-eventsource": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-eventsource/-/isomorphic-eventsource-0.0.2.tgz",
+      "integrity": "sha512-B4UoIjPi0QkvIzZH5fV3BQLWrqSYABdrzZQSI9sJA9aA+iC0ohOzFwVVGXanlxeDAy1bcvPbb29f6sVUk0UnnQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "eventsource": "^2.0.2"
+      }
+    },
+    "node_modules/@tonconnect/isomorphic-fetch": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-fetch/-/isomorphic-fetch-0.0.3.tgz",
+      "integrity": "sha512-jIg5nTrDwnite4fXao3dD83eCpTvInTjZon/rZZrIftIegh4XxyVb5G2mpMqXrVGk1e8SVXm3Kj5OtfMplQs0w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "node-fetch": "^2.6.9"
+      }
+    },
+    "node_modules/@tonconnect/protocol": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.2.6.tgz",
+      "integrity": "sha512-kyoDz5EqgsycYP+A+JbVsAUYHNT059BCrK+m0pqxykMODwpziuSAXfwAZmHcg8v7NB9VKYbdFY55xKeXOuEd0w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tweetnacl": "^1.0.3",
+        "tweetnacl-util": "^0.15.1"
+      }
+    },
+    "node_modules/@tonconnect/sdk": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-3.0.6.tgz",
+      "integrity": "sha512-dJipe0Cw43p/7o3Pa6Y6h0QMDtY2V2YKzwdCqcYvmyCYadBNmvA+8ScH9QK5GpkngRJnYaWq+321lAaQTFpUwA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tonconnect/isomorphic-eventsource": "^0.0.2",
+        "@tonconnect/isomorphic-fetch": "^0.0.3",
+        "@tonconnect/protocol": "^2.2.6"
+      }
+    },
+    "node_modules/@tonconnect/ui": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui/-/ui-2.0.11.tgz",
+      "integrity": "sha512-5TOhfEDeyY8R9oyEGavLU+DRmDW3wSGyxVshWhHisi8597cZIuG39HHNbP05WJBBjmVm/Kh/bhcHtfx7lQp/Ig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tonconnect/sdk": "3.0.6",
+        "classnames": "^2.3.2",
+        "csstype": "^3.1.1",
+        "deepmerge": "^4.2.2",
+        "ua-parser-js": "^1.0.35"
+      }
+    },
+    "node_modules/@tonconnect/ui-react": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui-react/-/ui-react-2.0.11.tgz",
+      "integrity": "sha512-h8E4zlbdNBJCAPgg6+O5ZkVDZh8mvnc82VRmhInSPLFAr6qDZbE+qSjRVm4lkuN1N/m24lhkDXFCFjvJ9CgCow==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tonconnect/ui": "2.0.11"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1344,11 +1467,26 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
    "node_modules/@types/node": {
      "version": "20.11.24",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.24.tgz",
      "integrity": "sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "undici-types": "~5.26.4"
      }
@ -2108,6 +2246,12 @@
        "node": ">= 6"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
    "node_modules/clsx": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
@ -2191,8 +2335,7 @@
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/debug": {
      "version": "4.3.4",
@ -2296,6 +2439,18 @@
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
      "dev": true
    },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -2957,11 +3112,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "node_modules/fast-diff": {
      "version": "1.3.0",
@ -3448,6 +3611,16 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@ -3871,6 +4044,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/jssha": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.2.0.tgz",
+      "integrity": "sha512-QuruyBENDWdN4tZwJbQq7/eAK85FqrI4oDbXjy5IBhYD+2pTJyBUWZe8ctWaCkrV0gy6AaelgOZZBMeswEa/6Q==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -3928,6 +4111,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@ -4096,6 +4285,26 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/node-releases": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@ -4712,6 +4921,47 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-dnd": {
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
+      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
+      "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -4828,6 +5078,33 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-tag-input": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/react-tag-input/-/react-tag-input-6.10.3.tgz",
+      "integrity": "sha512-IVneBnT0/7N8FktHsFUA2UVDvcwLSJoWDTdEm/Ei/r5O6iBABaVw1RMh6SlG+P7oummvzSY6EBjGCXr/Ntq8rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash-es": "^4.17.12",
+        "classnames": "~2.3.1",
+        "lodash-es": "^4.17.21"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/ad1992"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dnd": "^14.0.2",
+        "react-dnd-html5-backend": "^14.0.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/react-tag-input/node_modules/classnames": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.3.tgz",
+      "integrity": "sha512-1inzZmicIFcmUya7PGtUQeXtcF7zZpPnxtQoYOrz0uiOBGlLFa4ik4361seYL2JCcRDIyfdFHiwQolESFlw+Og==",
+      "license": "MIT"
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -4849,6 +5126,16 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.14.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@ -5383,6 +5670,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/symbol.inspect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/symbol.inspect/-/symbol.inspect-1.0.1.tgz",
+      "integrity": "sha512-YQSL4duoHmLhsTD1Pw8RW6TZ5MaTX5rXJnqacJottr2P2LZBF/Yvrc3ku4NUpMOm8aM0KOCqM+UAkMA5HWQCzQ==",
+      "license": "ISC"
+    },
    "node_modules/synckit": {
      "version": "0.8.8",
      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
@ -5496,6 +5789,12 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
    "node_modules/ts-api-utils": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
@ -5564,6 +5863,18 @@
      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
      "dev": true
    },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
+      "license": "Unlicense"
+    },
+    "node_modules/tweetnacl-util": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz",
+      "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==",
+      "license": "Unlicense"
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -5674,6 +5985,32 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.40",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz",
+      "integrity": "sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/unbox-primitive": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@ -5693,7 +6030,7 @@
      "version": "5.26.5",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/unload": {
      "version": "2.2.0",
@ -5831,6 +6168,22 @@
        }
      }
    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "react-player": "^2.15.1",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.2",
+    "react-tag-input": "^6.10.3",
    "tailwind-merge": "^2.2.1",
    "zod": "^3.22.4",
    "zustand": "^4.5.2"
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@ -79,4 +79,37 @@
    outline: none; /* Remove outline */
    transition: background 0.3s;
  }
+
+  /* English comment: override react-tag-input classes */
+  .ReactTags__tagInputField {
+    @apply bg-transparent text-gray placeholder:text-gray outline-none w-full h-8;
+    @apply border border-white py-[20px] !important;
+    /* English comment: 
+       'bg-transparent' to blend with your dark background 
+       'text-white' to have white text 
+       'placeholder:text-gray-400' to see the placeholder text in a lighter gray 
+       'outline-none' to remove default borders 
+    */
+  }
+
+  /* English comment: style for the tag itself when it's rendered */
+  .ReactTags__selected .ReactTags__tag {
+    @apply bg-[#363636] text-white text-sm inline-flex items-center px-2 py-1 rounded mr-1;
+    /* English comment:
+       'bg-[#363636]' to have a dark gray background
+       'text-white' keeps the text white 
+       'text-sm' smaller text 
+       'inline-flex items-center' for better alignment 
+       'px-2 py-1 rounded mr-1' for spacing and rounding 
+    */
+  }
+
+  .ReactTags__selected .ReactTags__remove {
+    @apply ml-1 text-gray hover:text-white cursor-pointer;
+    /* English comment:
+       'ml-1' a small margin to separate the 'x' or close symbol
+       'text-gray-400' by default, and change to white on hover
+       'cursor-pointer' so it looks clickable
+    */
+  }
 }
--- a/src/pages/root/steps/data-step/index.tsx
+++ b/src/pages/root/steps/data-step/index.tsx
@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import ReactPlayer from "react-player/lazy";
+import { WithContext as ReactTagInput } from 'react-tag-input';

 import { FormLabel } from "~/shared/ui/form-label";
 import { Input } from "~/shared/ui/input";
@ -13,6 +14,7 @@ import { HiddenFileInput } from "~/shared/ui/hidden-file-input";
 import { useRootStore } from "~/shared/stores/root";
 import { Checkbox } from "~/shared/ui/checkbox";
 import { AudioPlayer } from "~/shared/ui/audio-player";
+import { HashtagInput } from "~/shared/ui/hashtag-input";

 type DataStepProps = {
  nextStep(): void;
@ -82,6 +84,10 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
            />
          </FormLabel>

+          <FormLabel label={"Хэштеги"}>
+            <HashtagInput />
+          </FormLabel>
+
          <FormLabel label={"Файл"}>
            <HiddenFileInput
                id={"file"}
--- a/src/shared/stores/root/index.ts
+++ b/src/shared/stores/root/index.ts
@ -44,6 +44,9 @@ type RootStore = {

  licenseResalePrice: number;
  setLicenseResalePrice: (licenseResalePrice: number) => void;
+
+  hashtags: string[];
+  setHashtags: (hashtags: string[]) => void;
 };

 export const useRootStore = create<RootStore>((set) => ({
@ -85,4 +88,7 @@ export const useRootStore = create<RootStore>((set) => ({

  licenseResalePrice: 0,
  setLicenseResalePrice: (licenseResalePrice) => set({ licenseResalePrice }),
+
+  hashtags: [],
+  setHashtags: (hashtags: string[]) => set({ hashtags }),
 }));
--- a/src/shared/ui/hashtag-input/index.tsx
+++ b/src/shared/ui/hashtag-input/index.tsx
@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { WithContext as ReactTags } from "react-tag-input";
+import { useRootStore } from "~/shared/stores/root";
+
+// English comment: no extra Tag interface, just cast to any
+export const HashtagInput = () => {
+  const { hashtags, setHashtags } = useRootStore();
+
+  // English comment: local state as string[] for simplicity
+  const [tags, setTags] = useState<string[]>(hashtags);
+
+  const KeyCodes = { comma: 188, enter: 13 };
+  const delimiters = [KeyCodes.comma, KeyCodes.enter];
+
+  const handleDelete = (i: number) => {
+    const newTags = tags.filter((_, index) => index !== i);
+    setTags(newTags);
+    setHashtags(newTags);
+  };
+
+  // English comment: pass "any" to the function
+  const handleAddition = (newTag: any) => {
+    // English comment: newTag might be { id, text, ... } from react-tag-input
+    const updatedTags = [...tags, newTag?.text || newTag?.id || ""];
+    setTags(updatedTags);
+    setHashtags(updatedTags);
+  };
+
+  return (
+    <ReactTags
+      tags={tags.map((t) => ({ id: t, text: t })) as any}
+      delimiters={delimiters as any}
+      handleDelete={handleDelete as any}
+      handleAddition={handleAddition as any}
+      allowDragDrop={false}
+      placeholder="[ enter a hashtag ]"
+    />
+  );
+};
--- a/yarn.lock
+++ b/yarn.lock