feat: update dependencies about: react next chakra-ui

apps/app/components/ButtonList/index.tsx

@@ -18,7 +18,7 @@ export const ButtonListItem: React.FC<ButtonListItemProps> = ({
 }) => {
   const item = (
     <Button
-      isFullWidth
+      w="full"
       bg="transparent"
       justifyContent="flex-start"
       height="40px"

apps/app/components/ConnectWallet/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState, useMemo, PropsWithChildren } from 'react'
 import {
   coinbase,
   coinbaseStore,
@@ -25,7 +25,9 @@ import {
 } from '../../hooks/useLogin'
 import { UD_CLIENT_ID, UD_REDIRECT_URI } from '../../constants'
 
-export const ConnectWalletApiContextProvider: React.FC = ({ children }) => {
+export const ConnectWalletApiContextProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
   const isAuth = useIsAuthenticated()
   const { onRemember, isLoading: isRemembering } = useRemember()
   const openAuthModal = useOpenAuthModal()

apps/app/components/DaodidComponent/index.tsx

@@ -1,9 +1,12 @@
-import { register } from 'daodid-webcomponent'
-
-register('dao-did')
+// import { register } from 'daodid-webcomponent'
+//
+// register('dao-did')
 
 const Daodid: React.FC<{ bitAccount: string }> = ({ bitAccount }) => (
-  <dao-did cur-bit={bitAccount} theme="light" />
+  // <dao-did cur-bit={bitAccount} theme="light" />
+  <div>{bitAccount}</div>
 )
 
+// TODO: Investigate the cause
+
 export default Daodid

apps/app/components/Developers/item.tsx

@@ -10,17 +10,19 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import React, { ReactNode, useMemo } from 'react'
+import React, { PropsWithChildren, ReactNode, useMemo } from 'react'
 import { GithubIcon, InterestIcon, MirrorIcon, RightArrowIcon } from 'ui'
 import { ReactComponent as SubscribeIcon } from '../../assets/developers/subscribe.svg'
 
-export const Item: React.FC<{
-  title: string
-  descriptionBgColor: string
-  description: string
-  image: string
-  links: ReactNode
-}> = ({ title, descriptionBgColor, description, image, links, children }) => (
+export const Item: React.FC<
+  PropsWithChildren<{
+    title: string
+    descriptionBgColor: string
+    description: string
+    image: string
+    links: ReactNode
+  }>
+> = ({ title, descriptionBgColor, description, image, links, children }) => (
   <Grid
     templateColumns={{ base: 'full', lg: '418px 1fr' }}
     templateRows={{ base: 'min(228px, 1fr) 1fr', lg: 'full' }}

apps/app/components/ExperienceUserGuideDialog/index.tsx

@@ -63,7 +63,7 @@ export const ExperienceUserGuideContent: React.FC = () => {
         <Button
           as={Link}
           variant="outline"
-          isFullWidth
+          w="full"
           leftIcon={<Icon as={BitSvg} w="24px" h="24px" />}
           justifyContent="flex-start"
           px="8px"
@@ -84,7 +84,7 @@ export const ExperienceUserGuideContent: React.FC = () => {
         <Button
           as={Link}
           variant="outline"
-          isFullWidth
+          w="full"
           leftIcon={<Icon as={EnsSvg} w="24px" h="24px" />}
           justifyContent="flex-start"
           px="8px"

apps/app/components/MessageEditor/components/menuButtons/ImageButton.tsx

@@ -1,28 +1,31 @@
 import { Icon, Input } from '@chakra-ui/react'
 import { useCommands } from '@remirror/react'
-import { useCallback, useRef } from 'react'
+import { ChangeEventHandler, useCallback, useRef } from 'react'
 import { ReactComponent as ImageSvg } from 'assets/svg/editor/image.svg'
 import { ButtonBase } from './Base'
 
 export const ImageButton: React.FC = () => {
   const { insertImage } = useCommands()
   const inputFileRef = useRef<HTMLInputElement>(null)
-  const onUploadImage = useCallback(async (e) => {
-    const target = e.target as HTMLInputElement
-    if (!target.files?.[0]) return
-    const file = target.files[0]
-    target.value = ''
-    const blob = await file
-      .arrayBuffer()
-      .then(
-        (arrayBuffer) =>
-          new Blob([new Uint8Array(arrayBuffer)], { type: file.type })
-      )
-    insertImage({
-      src: URL.createObjectURL(blob),
-    })
-    focus()
-  }, [])
+  const onUploadImage = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    async (e) => {
+      const target = e.target as HTMLInputElement
+      if (!target.files?.[0]) return
+      const file = target.files[0]
+      target.value = ''
+      const blob = await file
+        .arrayBuffer()
+        .then(
+          (arrayBuffer) =>
+            new Blob([new Uint8Array(arrayBuffer)], { type: file.type })
+        )
+      insertImage({
+        src: URL.createObjectURL(blob),
+      })
+      focus()
+    },
+    []
+  )
   return (
     <>
       <Input

apps/app/components/MessageEditor/components/menuButtons/LinkButton.tsx

@@ -12,7 +12,7 @@ import {
   Box,
 } from '@chakra-ui/react'
 import { useActive, useCommands, useCurrentSelection } from '@remirror/react'
-import { useMemo, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import { ReactComponent as LinkSvg } from 'assets/svg/editor/link.svg'
 import { Button } from 'ui'
 import { useTranslation } from 'react-i18next'
@@ -51,7 +51,7 @@ export const LinkButton: React.FC = () => {
     () => LinkVerifyRules.find((rule) => rule.match(linkValue))?.error,
     [linkValue]
   )
-  const errorTextMap: { [key in LinkErrorType]?: string } = {
+  const errorTextMap: { [key in LinkErrorType]?: ReactNode } = {
     [LinkErrorType.Invalid]: t('invalid_url'),
     [LinkErrorType.NotHttps]: t('only_supported_https'),
   }

apps/app/components/SafeHydrate/index.tsx

@@ -1,4 +1,6 @@
-export const SafeHydrate: React.FC = ({ children }) => (
+import { PropsWithChildren } from 'react'
+
+export const SafeHydrate: React.FC<PropsWithChildren<{}>> = ({ children }) => (
   <div suppressHydrationWarning>
     {typeof window === 'undefined' ? null : children}
   </div>

apps/app/components/Settings/SettingAvatar.tsx

@@ -10,7 +10,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import styled from '@emotion/styled'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from 'ui'
 import { useForm, UseFormRegisterReturn } from 'react-hook-form'
@@ -30,11 +30,11 @@ import { RoutePath } from '../../route/path'
 import { useAPI, useHomeAPI } from '../../hooks/useAPI'
 import { userPropertiesAtom } from '../../hooks/useLogin'
 
-type FileUploadProps = {
+type FileUploadProps = PropsWithChildren<{
   register: UseFormRegisterReturn
   accept?: string
   multiple?: boolean
-}
+}>
 
 interface SettingAvatarProps {
   isSetup?: boolean

apps/app/components/Subscribe/index.tsx

@@ -22,7 +22,12 @@ import {
   useAccount,
   useTrackClick,
 } from 'hooks'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
 import { Link, useParams } from 'react-router-dom'
@@ -285,7 +290,7 @@ const AlreadySubscribed: React.FC<{
   )
 }
 
-const Desc: React.FC = ({ children }) => (
+const Desc: React.FC<PropsWithChildren> = ({ children }) => (
   <Box
     textAlign="center"
     padding="8px"

apps/app/components/SubscribeButtonInApp/index.tsx

@@ -81,6 +81,7 @@ const SubscribeButtonView: React.FC<{
     >
       {!isMobile ? 'Subscribe' : null}
       <Center
+        as="span"
         bg="#4E52F5"
         transform="skew(-10deg)"
         position="absolute"
@@ -90,7 +91,9 @@ const SubscribeButtonView: React.FC<{
         h="100%"
         fontSize={{ base: '12px', md: '14px' }}
       >
-        <Box transform="skew(10deg)">Earn NFT</Box>
+        <Box as="span" transform="skew(10deg)">
+          Earn NFT
+        </Box>
       </Center>
     </Button>
   )

apps/app/components/SubscribeProfileBody/index.tsx

@@ -62,11 +62,10 @@ import { UserSettingResponse } from '../../api'
 import { MAIL_SERVER_URL } from '../../constants'
 import { SubscribeButtonInApp } from '../SubscribeButtonInApp'
 import { Query } from '../../api/query'
+import { useRootURL } from '../../hooks/useRootURL'
 
 const CONTAINER_MAX_WIDTH = 1280
 
-const homeUrl = typeof window !== 'undefined' ? window.location.origin : APP_URL
-
 enum ButtonType {
   Copy,
   Card,
@@ -156,7 +155,8 @@ export const SubscribeProfileBody: React.FC<SubscribeProfileBodyProps> = ({
 
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const shareUrl: string = useMemo(() => `${homeUrl}/${address}`, [address])
+  const rootURL = useRootURL()
+  const shareURL = `${rootURL}/${address}`
 
   const buttonConfig: Record<
     ButtonType,
@@ -182,14 +182,14 @@ export const SubscribeProfileBody: React.FC<SubscribeProfileBodyProps> = ({
   const actionMap = useMemo(
     () => ({
       [ButtonType.Copy]: async () => {
-        await copyText(shareUrl)
+        await copyText(shareURL)
         toast(t('navbar.copied', { ns: 'common' }))
         popoverRef?.current?.blur()
       },
       [ButtonType.Twitter]: () => {
         shareToTwitter({
           text: 'Hey, visit my Subscription Page to view my latest content @mail3dao',
-          url: shareUrl,
+          url: shareURL,
         })
       },
       [ButtonType.Card]: async () => {
@@ -350,29 +350,29 @@ export const SubscribeProfileBody: React.FC<SubscribeProfileBodyProps> = ({
     [settings?.description]
   )
 
+  useDidMount(() => {
+    setIsDid(true)
+  })
+
   const isShowMore = useMemo(
     () =>
-      isVerifyOverflow({
-        str: desc,
-        fontSize: '12px',
-        height: '20',
-        width: `${descRef.current?.offsetWidth || 560}px`,
-        lineHeight: '20px',
-      }),
+      isDid
+        ? isVerifyOverflow({
+            str: desc,
+            fontSize: '12px',
+            height: '20',
+            width: `${descRef.current?.offsetWidth || 560}px`,
+            lineHeight: '20px',
+          })
+        : false,
     [desc, descRef.current]
   )
 
-  useDidMount(() => {
-    setIsDid(true)
-  })
-
   const buttonList = useMemo(() => {
     if (isMobile) return [ButtonType.Twitter, ButtonType.Copy]
     return [ButtonType.Twitter, ButtonType.Copy, ButtonType.Card]
   }, [isMobile])
 
-  if (!isDid) return null
-
   return (
     <>
       <AspectRatio
@@ -466,12 +466,14 @@ export const SubscribeProfileBody: React.FC<SubscribeProfileBodyProps> = ({
               borderRadius="50%"
               overflow="hidden"
             >
-              <Avatar
-                src={userInfo.avatar}
-                address={priAddress}
-                w="100%"
-                h="100%"
-              />
+              {isDid ? (
+                <Avatar
+                  src={userInfo.avatar}
+                  address={priAddress}
+                  w="100%"
+                  h="100%"
+                />
+              ) : null}
             </Box>
             <Text
               fontWeight="700"

apps/app/components/Subscription/preview.tsx

@@ -18,7 +18,7 @@ import {
 import styled from '@emotion/styled'
 import { atom, useAtom, useAtomValue } from 'jotai'
 import { Subscription } from 'models'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { useQuery } from 'react-query'
 import { TrackEvent, useDialog, useToast, useTrackClick } from 'hooks'
 import { useTranslation } from 'react-i18next'
@@ -121,7 +121,7 @@ const Container = styled(Box)`
 export const SubPreviewIdAtom = atom<string>('')
 export const SubPreviewIsOpenAtom = atom<boolean>(false)
 
-const Wrap: React.FC<{ isSingleMode: boolean }> = ({
+const Wrap: React.FC<{ isSingleMode: boolean } & PropsWithChildren> = ({
   children,
   isSingleMode,
 }) => {

apps/app/components/SubscriptionArticleBody/index.tsx

@@ -3,7 +3,6 @@ import {
   Center,
   Flex,
   Icon,
-  Link,
   Spacer,
   Spinner,
   Text,
@@ -178,8 +177,8 @@ export const SubscriptionArticleBody: React.FC<
 
           {isMobile ? (
             <Flex mt="24px">
-              <Link
-                display="flex"
+              <Flex
+                as="a"
                 href={`${APP_URL}/${address}`}
                 target="_blank"
                 alignItems="center"
@@ -202,7 +201,7 @@ export const SubscriptionArticleBody: React.FC<
                     {truncateMailAddress(mailAddress)}
                   </Box>
                 </Box>
-              </Link>
+              </Flex>
               <Spacer />
               <Flex
                 fontWeight={500}