Merge branch 'develop' into feat/like-animation-heart-beat

src/common/enums/externalLinks.ts

@@ -37,11 +37,6 @@ export const GUIDE_LINKS = {
     zh_hans: `https://matters.town/@hi176/387126?locale=zh-Hans`,
     en: `https://matters.town/@hi176/387126?locale=en`,
   },
-  connectWallet: {
-    zh_hant: `https://matters.town/@hi176/387112`,
-    zh_hans: `https://matters.town/@hi176/387112?locale=zh-Hans`,
-    en: `https://matters.town@hi176/387112?locale=en`,
-  },
   payment: {
     zh_hant: `https://matters.town/@hi176/387119`,
     zh_hans: `https://matters.town/@hi176/387119?locale=zh-Hans`,
@@ -62,10 +57,15 @@ export const GUIDE_LINKS = {
     zh_hans: `https://matters.town/@hi176/387116?locale=zh-Hans`,
     en: `https://matters.town/@hi176/387116?locale=en`,
   },
-  mobilePayment: {
-    zh_hant: `https://matters.town/@hi176/387120`,
-    zh_hans: `https://matters.town/zh_Hans/@hi176/387120?locale=zh-Hans`,
-    en: `https://matters.town/@hi176/387120?locale=en`,
+  wallet: {
+    zh_hant: `https://matters.town/@hi176/589118`,
+    zh_hans: `https://matters.town/@hi176/589118?locale=zh-Hans`,
+    en: `https://matters.town/@hi176/589118?locale=en`,
+  },
+  mobileWallet: {
+    zh_hant: `https://matters.town/@hi176/589139`,
+    zh_hans: `https://matters.town/@hi176/589139?locale=zh-Hans`,
+    en: `https://matters.town/@hi176/589139?locale=en`,
   },
   billboard: {
     zh_hant: `https://matters.town/@hi176/554162`,

src/components/AuthMethodFeed/AuthWalletFeed.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as IconWalletConnect } from '@/public/static/icons/24px/
 import { EXTERNAL_LINKS, GUIDE_LINKS } from '~/common/enums'
 import { PATHS } from '~/common/enums'
 import { analytics, WalletType } from '~/common/utils'
-import { Icon, LanguageContext, Spinner } from '~/components'
+import { Icon, LanguageContext, Spinner, SpinnerBlock } from '~/components'
 
 import styles from './styles.module.css'
 
@@ -33,6 +33,7 @@ export const AuthWalletFeed: React.FC<Props> = ({
   const { connectors, connect, pendingConnector } = useConnect()
   const { address: account, isConnecting } = useAccount()
   const [walletType, setWalletType] = useState<WalletType>('MetaMask')
+  const [showLoading, setShowLoading] = useState(true)
 
   const injectedConnector = connectors.find((c) => c.id === 'metaMask')
   const walletConnectConnector = connectors.find(
@@ -45,16 +46,24 @@ export const AuthWalletFeed: React.FC<Props> = ({
 
   // auto switch to next step if account is connected
   useEffect(() => {
-    if (!account) return
+    if (!account) {
+      setShowLoading(false)
+      return
+    }
 
     submitCallback(walletType)
+    setShowLoading(false)
   }, [account])
 
   const itemClasses = classNames({
     [styles.item]: true,
     [styles.supportItem]: isInSupport,
   })
 
+  if (showLoading && isInSupport) {
+    return <SpinnerBlock />
+  }
+
   return (
     <>
       <ul className={styles.feed}>

src/components/Balance/styles.module.css

@@ -15,8 +15,7 @@
     @mixin border-left-grey;
 
     padding-left: var(--sp8);
-    margin-top: var(--sp1);
-    margin-bottom: var(--sp1);
+    margin-bottom: var(--sp2);
     margin-left: var(--sp8);
     border-left-color: var(--color-line-matters-golod-lighter);
   }

src/components/CommentBeta/DropdownActions/DeleteComment/Dialog.tsx

@@ -67,12 +67,21 @@ const DeleteCommentDialog = ({
         type: 'delete',
       })
 
-      updateArticlePublic({
-        cache,
-        shortHash: article.shortHash,
-        routerLang,
-        type: 'deleteComment',
-      })
+      if (comment.parentComment) {
+        updateArticlePublic({
+          cache,
+          shortHash: article.shortHash,
+          routerLang,
+          type: 'deleteSecondaryComment',
+        })
+      } else {
+        updateArticlePublic({
+          cache,
+          shortHash: article.shortHash,
+          routerLang,
+          type: 'deleteComment',
+        })
+      }
     },
   })
 

src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx

@@ -128,7 +128,16 @@ const CommentForm: React.FC<CommentFormProps> = ({
               type: 'add',
               comment: mutationResult.data?.putComment,
             })
+          }
 
+          if (!!parentId) {
+            updateArticlePublic({
+              cache,
+              shortHash,
+              routerLang,
+              type: 'addSecondaryComment',
+            })
+          } else {
             updateArticlePublic({
               cache,
               shortHash,

src/components/Expandable/styles.module.css

@@ -24,20 +24,13 @@
       @mixin transition;
 
       margin-top: var(--sp4);
-      font-size: var(--text14);
-      line-height: 1.375rem;
       color: var(--color-grey-darker);
       transition-property: color;
 
       &:hover {
         color: var(--color-black);
       }
     }
-
-    & .text15 {
-      font-size: var(--text15);
-      line-height: 1.75;
-    }
   }
 
   & .richWrapper {
@@ -69,14 +62,17 @@
 /* size */
 .text14 {
   font-size: var(--text14);
+  line-height: 1.375rem;
 }
 
 .text15 {
   font-size: var(--text15);
+  line-height: 1.75;
 }
 
 .text16 {
   font-size: var(--text16);
+  line-height: 1.5;
 }
 
 /* space top */

src/components/Forms/CommentFormBeta/index.tsx

@@ -127,7 +127,16 @@ export const CommentFormBeta: React.FC<CommentFormBetaProps> = ({
               type: 'add',
               comment: mutationResult.data?.putComment,
             })
+          }
 
+          if (!!parentId) {
+            updateArticlePublic({
+              cache,
+              shortHash,
+              routerLang,
+              type: 'addSecondaryComment',
+            })
+          } else {
             updateArticlePublic({
               cache,
               shortHash,

src/components/Forms/PaymentForm/ApproveUsdtContract/index.tsx

@@ -9,6 +9,7 @@ import {
   Dialog,
   Icon,
   LanguageContext,
+  SpinnerBlock,
   TextIcon,
   useAllowanceUSDT,
   useApproveUSDT,
@@ -24,6 +25,7 @@ const ApproveUsdtContract: React.FC<ApproveUsdtContractProps> = ({
   submitCallback,
 }) => {
   const { lang } = useContext(LanguageContext)
+  const [showLoading, setShowLoading] = useState(true)
   const [approveConfirming, setApproveConfirming] = useState(false)
   const {
     data: allowanceData,
@@ -43,6 +45,7 @@ const ApproveUsdtContract: React.FC<ApproveUsdtContractProps> = ({
     if (allowanceUSDT > 0n) {
       submitCallback()
     }
+    setShowLoading(false)
   }, [allowanceData])
 
   // USDT approval
@@ -60,6 +63,10 @@ const ApproveUsdtContract: React.FC<ApproveUsdtContractProps> = ({
   const errorName = _get(approveError, 'cause.name')
   const isUserRejected = errorName === 'UserRejectedRequestError'
 
+  if (showLoading) {
+    return <SpinnerBlock />
+  }
+
   return (
     <section className={styles.container}>
       <section className={styles.content}>

src/components/Forms/PaymentForm/PayTo/CurrencyChoice/Tips/index.tsx

@@ -31,7 +31,7 @@ const Tips = () => {
           />
           <a
             className="u-link-green"
-            href={GUIDE_LINKS.connectWallet[lang]}
+            href={GUIDE_LINKS.wallet[lang]}
             target="_blank"
             rel="noreferrer"
           >

src/components/Forms/PaymentForm/SwitchNetwork/index.tsx

@@ -9,6 +9,7 @@ import {
   Dialog,
   Icon,
   LanguageContext,
+  SpinnerBlock,
   TextIcon,
   useTargetNetwork,
 } from '~/components'
@@ -27,6 +28,7 @@ const SwitchNetwork: React.FC<SwitchNetworkProps> = ({ submitCallback }) => {
     useTargetNetwork(targetNetork)
 
   const [showNote, setShowNote] = useState(false)
+  const [showLoading, setShowLoading] = useState(true)
 
   const toggleNote = () => {
     setShowNote(!showNote)
@@ -36,12 +38,17 @@ const SwitchNetwork: React.FC<SwitchNetworkProps> = ({ submitCallback }) => {
     if (!isUnsupportedNetwork) {
       submitCallback()
     }
+    setShowLoading(false)
   }, [isUnsupportedNetwork])
 
   const noteClasses = classNames({
     [styles.note]: true,
   })
 
+  if (showLoading) {
+    return <SpinnerBlock />
+  }
+
   return (
     <section className={styles.container}>
       <section className={styles.content}>

src/components/Forms/WalletAuthForm/Select.tsx

@@ -44,7 +44,7 @@ const Hint = () => {
           />
           <a
             className="u-link-green"
-            href={GUIDE_LINKS.mobilePayment[lang]}
+            href={GUIDE_LINKS.mobileWallet[lang]}
             target="_blank"
             rel="noreferrer"
           >
@@ -61,7 +61,7 @@ const Hint = () => {
           />
           <a
             className="u-link-green"
-            href={GUIDE_LINKS.connectWallet[lang]}
+            href={GUIDE_LINKS.wallet[lang]}
             target="_blank"
             rel="noreferrer"
           >

src/components/GQL/updates/articlePublic.ts

@@ -15,7 +15,11 @@ export const updateArticlePublic = ({
   cache: DataProxy
   shortHash: string
   routerLang: UserLanguage
-  type: 'deleteComment' | 'addComment'
+  type:
+    | 'deleteComment'
+    | 'addComment'
+    | 'addSecondaryComment'
+    | 'deleteSecondaryComment'
 }) => {
   // FIXME: circular dependencies
   const {
@@ -53,13 +57,21 @@ export const updateArticlePublic = ({
     if (data?.article?.__typename !== 'Article') {
       return
     }
-
-    let commentCount = data.article.comments.totalCount
+    let commentCount = data.article.commentCount
+    let totalCount = data.article.comments.totalCount
     switch (type) {
       case 'addComment':
+        totalCount += 1
         commentCount += 1
         break
       case 'deleteComment':
+        totalCount -= 1
+        commentCount -= 1
+        break
+      case 'addSecondaryComment':
+        commentCount += 1
+        break
+      case 'deleteSecondaryComment':
         commentCount -= 1
         break
     }
@@ -70,9 +82,10 @@ export const updateArticlePublic = ({
       data: {
         article: {
           ...data.article,
+          commentCount: commentCount,
           comments: {
             ...data.article.comments,
-            totalCount: commentCount,
+            totalCount: totalCount,
           },
         },
       },

src/components/Layout/SideFooter/index.tsx

@@ -31,10 +31,6 @@ const CommunityMenu = () => {
   )
 }
 
-const Dot = () => {
-  return <span className={styles.dot}>&nbsp;·&nbsp;</span>
-}
-
 const SideFooter = () => {
   return (
     <footer className={styles.footer}>
@@ -44,21 +40,18 @@ const SideFooter = () => {
         <Link href={PATHS.ABOUT} legacyBehavior>
           <a>
             <FormattedMessage defaultMessage="About" id="g5pX+a" />
-            <Dot />
           </a>
         </Link>
 
         <Link href={PATHS.GUIDE} legacyBehavior>
           <a>
             <FormattedMessage defaultMessage="Explore" id="7JlauX" />
-            <Dot />
           </a>
         </Link>
 
         <Link href={PATHS.TOS} legacyBehavior>
           <a>
             <FormattedMessage defaultMessage="Terms" id="xkr+zo" />
-            <Dot />
           </a>
         </Link>
 

src/components/Layout/SideFooter/styles.module.css

@@ -11,8 +11,8 @@
   font-size: var(--text12);
   line-height: 1.125rem;
   color: var(--color-grey);
-}
 
-.dot {
-  color: var(--color-grey-light);
+  & > * + * {
+    margin-left: var(--sp10);
+  }
 }

src/views/ArticleDetail/Support/SupportWidget/Animation.tsx

@@ -73,6 +73,7 @@ const Animation: React.FC<Props> = ({
   }
 
   const containerClasses = classNames({
+    [styles.container]: true,
     [styles.slideUp]: rendered,
   })