feat: add emoji picker

apps/web/package.json

@@ -17,6 +17,7 @@
     "@aws-sdk/client-s3": "^3.282.0",
     "@aws-sdk/lib-storage": "^3.282.0",
     "@bundlr-network/client": "^0.10.5",
+    "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.12",
     "@hookform/resolvers": "^2.9.11",
     "@livepeer/react": "^2.2.5",
@@ -28,6 +29,7 @@
     "axios": "^1.3.4",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.6",
+    "emoji-mart": "^5.5.2",
     "ethers": "5.6.0",
     "filereader-stream": "^2.0.0",
     "graphql": "^16.6.0",

apps/web/src/components/Common/Icons/EmojiOutline.tsx

@@ -9,17 +9,17 @@ const EmojiOutline = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M14.4753 8.51567C14.6897 9.31587 14.4311 10.0804 13.8976 10.2234C13.3641 10.3663 12.7579 9.83351 12.5434 9.03331C12.329 8.23311 12.5877 7.46854 13.1211 7.3256C13.6546 7.18266 14.2609 7.71547 14.4753 8.51567Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 1.75C5.89137 1.75 1.75 5.89137 1.75 11C1.75 16.1086 5.89137 20.25 11 20.25C16.1086 20.25 20.25 16.1086 20.25 11C20.25 5.89137 16.1086 1.75 11 1.75ZM0.25 11C0.25 5.06294 5.06294 0.25 11 0.25C16.9371 0.25 21.75 5.06294 21.75 11C21.75 16.9371 16.9371 21.75 11 21.75C5.06294 21.75 0.25 16.9371 0.25 11ZM7.39747 14.5534C7.64413 14.2206 8.11385 14.1508 8.44661 14.3975C9.17495 14.9373 10.0541 15.25 11 15.25C11.9459 15.25 12.825 14.9373 13.5534 14.3975C13.8862 14.1508 14.3559 14.2206 14.6025 14.5534C14.8492 14.8862 14.7794 15.3559 14.4466 15.6025C13.4742 16.3233 12.285 16.75 11 16.75C9.71503 16.75 8.5258 16.3233 7.55339 15.6025C7.22062 15.3559 7.15082 14.8862 7.39747 14.5534Z"
       fill="currentColor"
     />
     <path
-      d="M8.67989 10.0689C8.8943 10.8691 8.63566 11.6337 8.10219 11.7766C7.56873 11.9195 6.96245 11.3867 6.74804 10.5865C6.53363 9.78633 6.79227 9.02176 7.32574 8.87882C7.8592 8.73588 8.46548 9.26869 8.67989 10.0689Z"
+      d="M15 9.5C15 10.3284 14.5523 11 14 11C13.4477 11 13 10.3284 13 9.5C13 8.67157 13.4477 8 14 8C14.5523 8 15 8.67157 15 9.5Z"
       fill="currentColor"
     />
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13.608 1.81525C12.4288 1.9672 10.9309 2.36692 8.83706 2.92795C6.74324 3.48899 5.24617 3.89178 4.14897 4.34979C3.07186 4.79941 2.48597 5.26096 2.12941 5.87854C1.77286 6.49612 1.66608 7.23429 1.81525 8.3919C1.9672 9.57111 2.36692 11.069 2.92795 13.1628C3.48899 15.2566 3.89178 16.7537 4.34979 17.8509C4.79941 18.928 5.26096 19.5139 5.87854 19.8705C6.49612 20.227 7.23429 20.3338 8.3919 20.1846C9.57111 20.0327 11.069 19.633 13.1628 19.0719C15.2566 18.5109 16.7537 18.1081 17.8509 17.6501C18.928 17.2005 19.5139 16.7389 19.8705 16.1214C20.227 15.5038 20.3338 14.7656 20.1846 13.608C20.0327 12.4288 19.633 10.9309 19.0719 8.83706C18.5109 6.74324 18.1081 5.24617 17.6501 4.14897C17.2005 3.07186 16.7389 2.48597 16.1214 2.12941C15.5038 1.77286 14.7656 1.66608 13.608 1.81525ZM13.4163 0.327552C14.7404 0.156932 15.8555 0.243899 16.8714 0.830375C17.8872 1.41685 18.5201 2.33915 19.0343 3.57114C19.5357 4.77217 19.963 6.36709 20.5061 8.39374L20.5356 8.50378C21.0786 10.5305 21.506 12.1254 21.6723 13.4163C21.843 14.7404 21.756 15.8555 21.1695 16.8713C20.583 17.8872 19.6607 18.5201 18.4288 19.0343C17.2277 19.5357 15.6328 19.963 13.6062 20.5061L13.4961 20.5356C11.4694 21.0786 9.87443 21.506 8.58361 21.6723C7.25954 21.843 6.14435 21.756 5.12854 21.1695C4.11274 20.583 3.47982 19.6607 2.96555 18.4288C2.46419 17.2277 2.03684 15.6328 1.49381 13.6061L1.46431 13.496C0.921257 11.4693 0.493887 9.87442 0.327552 8.58361C0.156932 7.25954 0.243899 6.14435 0.830375 5.12854C1.41685 4.11274 2.33915 3.47982 3.57114 2.96555C4.77218 2.46419 6.36711 2.03685 8.39378 1.49382L8.50388 1.46431C10.5305 0.921257 12.1255 0.493887 13.4163 0.327552ZM16.1788 12.3408C16.4669 12.6384 16.4592 13.1133 16.1616 13.4014C15.9916 13.5659 15.8128 13.7245 15.6256 13.8765L15.844 14.3214C16.397 15.448 15.9213 16.8093 14.787 17.3463C13.6751 17.8726 12.3467 17.4084 11.8047 16.3041L11.5315 15.7476C10.2117 15.998 8.90915 15.956 7.7302 15.6605C7.32842 15.5598 7.08434 15.1525 7.18505 14.7507C7.28575 14.3489 7.6931 14.1049 8.09488 14.2056C9.2252 14.4889 10.5232 14.4924 11.841 14.1393C13.1587 13.7862 14.2811 13.1341 15.1183 12.3236C15.4159 12.0355 15.8907 12.0432 16.1788 12.3408ZM13.0048 15.3449L13.1512 15.6432C13.3319 16.0112 13.7746 16.1659 14.1452 15.9905C14.5232 15.8116 14.6818 15.3579 14.4975 14.9824L14.3707 14.7241C13.9417 14.963 13.4851 15.1715 13.0048 15.3449Z"
+      d="M9 9.5C9 10.3284 8.55229 11 8 11C7.44772 11 7 10.3284 7 9.5C7 8.67157 7.44772 8 8 8C8.55229 8 9 8.67157 9 9.5Z"
       fill="currentColor"
     />
   </svg>

apps/web/src/components/Settings/BasicInfo.tsx

@@ -2,6 +2,7 @@ import { LENS_PERIPHERY_ABI } from '@abis/LensPeriphery'
 import CopyOutline from '@components/Common/Icons/CopyOutline'
 import IsVerified from '@components/Common/IsVerified'
 import { Button } from '@components/UIElements/Button'
+import EmojiPicker from '@components/UIElements/EmojiPicker'
 import { Input } from '@components/UIElements/Input'
 import { Loader } from '@components/UIElements/Loader'
 import { TextArea } from '@components/UIElements/TextArea'
@@ -91,7 +92,8 @@ const BasicInfo = ({ channel }: Props) => {
     register,
     handleSubmit,
     formState: { errors },
-    getValues
+    getValues,
+    setValue
   } = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -353,14 +355,21 @@ const BasicInfo = ({ channel }: Props) => {
           validationError={errors.displayName?.message}
         />
       </div>
-      <div className="mt-4">
+      <div className="relative mt-4">
         <TextArea
           label="Channel Description"
           placeholder="More about your channel"
           rows={4}
           validationError={errors.description?.message}
           {...register('description')}
         />
+        <div className="absolute bottom-2 right-2">
+          <EmojiPicker
+            onEmojiSelect={(emoji) =>
+              setValue('description', `${getValues('description')}${emoji}`)
+            }
+          />
+        </div>
       </div>
       <div className="mt-4">
         <Input

apps/web/src/components/UIElements/DropMenu.tsx

@@ -47,7 +47,9 @@ const DropMenu: FC<Props> = ({
         positionClassName
       )}
     >
-      <Menu.Items static>{children}</Menu.Items>
+      <Menu.Items className="outline-none" static>
+        {children}
+      </Menu.Items>
     </Transition>
   </Menu>
 )

apps/web/src/components/UIElements/EmojiPicker.tsx

@@ -0,0 +1,55 @@
+import EmojiOutline from '@components/Common/Icons/EmojiOutline'
+import Picker from '@emoji-mart/react'
+import axios from 'axios'
+import { useTheme } from 'next-themes'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { STATIC_ASSETS } from 'utils'
+
+import DropMenu from './DropMenu'
+
+type EmojiData = {
+  aliases: Object
+  categories: Object[]
+  emojis: Object
+  sheet: Object
+}
+
+type Props = {
+  onEmojiSelect: (emoji: string) => void
+}
+
+const EmojiPicker: FC<Props> = ({ onEmojiSelect }) => {
+  const [data, setData] = useState<EmojiData>()
+  const { resolvedTheme } = useTheme()
+
+  const fetchEmojiData = async () => {
+    const response = await axios.get(`${STATIC_ASSETS}/data/emoji.json`)
+    setData(response.data)
+  }
+
+  useEffect(() => {
+    fetchEmojiData()
+  }, [])
+
+  return (
+    <DropMenu
+      trigger={
+        <div className="hidden text-inherit opacity-50 hover:opacity-100 group-hover:visible md:block">
+          <EmojiOutline className="h-5 w-5" />
+        </div>
+      }
+    >
+      <Picker
+        autoFocus
+        data={data}
+        navPosition="bottom"
+        theme={resolvedTheme}
+        previewPosition="none"
+        onEmojiSelect={(data: { native: string }) => onEmojiSelect(data.native)}
+      />
+    </DropMenu>
+  )
+}
+
+export default EmojiPicker

apps/web/src/components/Upload/Details.tsx

@@ -2,6 +2,7 @@ import Alert from '@components/Common/Alert'
 import BytesOutline from '@components/Common/Icons/BytesOutline'
 import TimesOutline from '@components/Common/Icons/TimesOutline'
 import { Button } from '@components/UIElements/Button'
+import EmojiPicker from '@components/UIElements/EmojiPicker'
 import InputMentions from '@components/UIElements/InputMentions'
 import RadioInput from '@components/UIElements/RadioInput'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -113,6 +114,16 @@ const Details: FC<Props> = ({ onUpload, onCancel }) => {
                 rows={5}
                 mentionsSelector="input-mentions-textarea"
               />
+              <div className="absolute bottom-1.5 right-1.5">
+                <EmojiPicker
+                  onEmojiSelect={(emoji) =>
+                    setValue(
+                      'description',
+                      `${getValues('description')}${emoji}`
+                    )
+                  }
+                />
+              </div>
               <div className="absolute top-0 right-1 mt-1 flex items-center justify-end">
                 <span
                   className={clsx('text-[10px] opacity-50', {
@@ -123,25 +134,25 @@ const Details: FC<Props> = ({ onUpload, onCancel }) => {
                   {watch('description')?.length}/5000
                 </span>
               </div>
-              <div className="mt-2 flex items-center space-x-1.5 rounded-full bg-gradient-to-br from-orange-200 to-orange-100 px-3 py-1 text-sm font-medium text-black text-opacity-80">
-                <BytesOutline className="h-4 w-4 flex-none" />
-                <span>
-                  Using
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setValue(
-                        'description',
-                        `${getValues('description')} #bytes`
-                      )
-                    }}
-                    className="mx-1 text-indigo-600 outline-none dark:text-indigo-400"
-                  >
-                    #bytes
-                  </button>
-                  in description will upload this as a short form video.
-                </span>
-              </div>
+            </div>
+            <div className="mt-2 flex items-center space-x-1.5 rounded-full bg-gradient-to-br from-orange-200 to-orange-100 px-3 py-1 text-sm font-medium text-black text-opacity-80">
+              <BytesOutline className="h-4 w-4 flex-none" />
+              <span>
+                Using
+                <button
+                  type="button"
+                  onClick={() => {
+                    setValue(
+                      'description',
+                      `${getValues('description')} #bytes`
+                    )
+                  }}
+                  className="mx-1 text-indigo-600 outline-none dark:text-indigo-400"
+                >
+                  #bytes
+                </button>
+                in description will upload this as a short form video.
+              </span>
             </div>
             <div className="mt-4">
               <CollectModule />

apps/web/src/components/Watch/NewComment.tsx

@@ -1,5 +1,6 @@
 import { LENSHUB_PROXY_ABI } from '@abis/LensHubProxy'
 import { Button } from '@components/UIElements/Button'
+import EmojiPicker from '@components/UIElements/EmojiPicker'
 import InputMentions from '@components/UIElements/InputMentions'
 import { zodResolver } from '@hookform/resolvers/zod'
 import useAppStore from '@lib/store'
@@ -271,17 +272,26 @@ const NewComment: FC<Props> = ({ video }) => {
               alt={selectedChannel?.handle}
             />
           </div>
-          <InputMentions
-            placeholder="How's this video?"
-            autoComplete="off"
-            validationError={errors.comment?.message}
-            value={watch('comment')}
-            onContentChange={(value) => {
-              setValue('comment', value)
-              clearErrors('comment')
-            }}
-            mentionsSelector="input-mentions-single"
-          />
+          <div className="relative w-full">
+            <InputMentions
+              placeholder="How's this video?"
+              autoComplete="off"
+              validationError={errors.comment?.message}
+              value={watch('comment')}
+              onContentChange={(value) => {
+                setValue('comment', value)
+                clearErrors('comment')
+              }}
+              mentionsSelector="input-mentions-single"
+            />
+            <div className="absolute bottom-2 right-2">
+              <EmojiPicker
+                onEmojiSelect={(emoji) =>
+                  setValue('comment', `${getValues('comment')}${emoji}`)
+                }
+              />
+            </div>
+          </div>
         </div>
         <Button loading={loading}>Comment</Button>
       </form>

apps/web/src/styles/index.css

@@ -71,7 +71,7 @@ input[type='number'] {
 }
 .input-mentions-textarea textarea,
 .input-mentions-single textarea {
-  @apply bg-white text-sm resize-y px-2.5 py-2 rounded-xl focus:ring-1 focus:ring-indigo-500 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 outline-none disabled:opacity-60 disabled:bg-gray-500 disabled:bg-opacity-20 w-full;
+  @apply bg-white text-sm resize-y px-2.5 pt-2 rounded-xl focus:ring-1 focus:ring-indigo-500 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 outline-none disabled:opacity-60 disabled:bg-gray-500 disabled:bg-opacity-20 w-full;
 }
 .input-mentions-textarea__suggestions,
 .input-mentions-single__suggestions {

yarn.lock

@@ -1586,6 +1586,11 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@emoji-mart/react@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
+  integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -6458,6 +6463,11 @@ elliptic@6.5.4, elliptic@^6.5.4:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"