Merge pull request #3091 from thematters/develop

Release: v4.13.5
thematters · Jan 13, 2023 · a7fe758 · a7fe758
2 parents 7c07530 + 278efa6
commit a7fe758
Show file tree

Hide file tree

Showing 26 changed files with 185 additions and 113 deletions.
diff --git a/next.config.js b/next.config.js
@@ -43,6 +43,10 @@ const nextConfig = {
                   name: 'removeDimensions',
                   active: true,
                 },
+                {
+                  name: 'prefixIds',
+                  active: true,
+                },
               ],
             },
           },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.13.3",
+  "version": "4.13.5",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",
@@ -36,7 +36,7 @@
     "@apollo/react-ssr": "^3.1.3",
     "@ensdomains/content-hash": "^2.5.7",
     "@matters/apollo-upload-client": "^11.1.0",
-    "@matters/matters-editor": "^0.1.27-alpha.1",
+    "@matters/matters-editor": "^0.1.27-alpha.3",
     "@next/bundle-analyzer": "^13.1.1",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.17.0",

diff --git a/src/common/utils/number/index.ts b/src/common/utils/number/index.ts
@@ -9,7 +9,7 @@ export const numPrefix = (num: number | string) => {
   return parsedNum > 0 ? `+${num}` : num
 }
 
-export const numAbbr = (num: number, decPlaces: number = 2) =>
+export const numAbbr = (num: number, decPlaces: number = 1) =>
   abbr(num, decPlaces)
 
 export const numRound = (num: number, decPlaces: number = 2) => {

diff --git a/src/components/Dialogs/LikeCoinDialog/SetupLikeCoin/Binding/index.tsx b/src/components/Dialogs/LikeCoinDialog/SetupLikeCoin/Binding/index.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerLikerIdQuery } from '~/gql/graphql'
@@ -23,15 +23,22 @@ const VIEWER_LIKER_ID = gql`
 `
 
 const Binding: React.FC<Props> = ({ prevStep, nextStep, windowRef }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerLikerIdQuery>(VIEWER_LIKER_ID, {
-    pollInterval: polling ? 1000 : undefined,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerLikerIdQuery>(VIEWER_LIKER_ID, {
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    })
   const likerId = data?.viewer?.liker.likerId
 
+  useEffect(() => {
+    startPolling(1000)
+
+    return () => {
+      stopPolling()
+    }
+  }, [])
+
   useEffect(() => {
     if (likerId) {
       nextStep()
@@ -44,7 +51,7 @@ const Binding: React.FC<Props> = ({ prevStep, nextStep, windowRef }) => {
     }
 
     if (error) {
-      setPolling(false)
+      stopPolling()
     }
   })
 

diff --git a/src/components/Dialogs/TagEditorDialog/List/index.tsx b/src/components/Dialogs/TagEditorDialog/List/index.tsx
@@ -144,34 +144,39 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
             <Translate
               zh_hant="協作者可以與你共同管理精選"
               zh_hans="协作者可以与你共同管理精选"
-              en="collaborator can manage selected feed with you"
+              en="Collaborator can manage selected feed with you."
             />
             <br />
             {(isHavingNoneEditors || isReachingLimit) && (
               <>
                 <Translate
                   zh_hant="每個標籤最多添加"
                   zh_hans="每个标签最多添加"
-                  en="every tag can have maximum"
+                  en="Every tag can have maximum"
+                />
+                <span className="count"> 4 </span>
+                <Translate
+                  zh_hant="名協作者"
+                  zh_hans="名协作者"
+                  en="collaborators."
                 />
-                <span className="count">{' 4 '}</span>
               </>
             )}
             {isAllowAdd && isHavingEditors && (
               <>
                 <Translate
                   zh_hant="你還可以添加"
                   zh_hans="你还可以添加"
-                  en="you can add"
+                  en="You can add"
                 />
                 <span className="count"> {4 - count} </span>
+                <Translate
+                  zh_hant="名協作者"
+                  zh_hans="名协作者"
+                  en="more collaborators."
+                />
               </>
             )}
-            <Translate
-              zh_hant="名協作者"
-              zh_hans="名协作者"
-              en="more collaborators"
-            />
           </p>
         </Dialog.Message>
       </Dialog.Content>
@@ -186,7 +191,7 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
             <Translate
               zh_hant="新增協作者"
               zh_hans="新增协作者"
-              en="add collaborator"
+              en="Add collaborator"
             />
           </Dialog.Footer.Button>
         </Dialog.Footer>

diff --git a/src/components/Forms/PaymentForm/ConnectStripeAccount/Onboarding.tsx b/src/components/Forms/PaymentForm/ConnectStripeAccount/Onboarding.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerStripeAccountQuery } from '~/gql/graphql'
@@ -25,17 +25,24 @@ const VIEWER_STRIPE_ACCOUNT = gql`
 
 const Onboarding: React.FC<Props> = ({ nextStep }) => {
   const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerStripeAccountQuery>(
-    VIEWER_STRIPE_ACCOUNT,
-    {
-      pollInterval: polling ? 1000 : undefined,
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerStripeAccountQuery>(VIEWER_STRIPE_ACCOUNT, {
       errorPolicy: 'none',
       fetchPolicy: 'network-only',
       skip: typeof window === 'undefined',
-    }
-  )
+    })
   const stripeAccount = data?.viewer?.wallet.stripeAccount?.id
 
+  useEffect(() => {
+    if (polling) {
+      startPolling(1000)
+    }
+
+    return () => {
+      stopPolling()
+    }
+  }, [polling])
+
   if (stripeAccount) {
     nextStep()
     return null

diff --git a/src/components/Forms/PaymentForm/Processing/index.tsx b/src/components/Forms/PaymentForm/Processing/index.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import { ethers } from 'ethers'
 import gql from 'graphql-tag'
 import _get from 'lodash/get'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect } from 'react'
 import { useAccount, useContractWrite, useNetwork } from 'wagmi'
 
 import {
@@ -76,14 +76,13 @@ const OthersProcessingForm: React.FC<Props> = ({
   closeDialog,
   windowRef,
 }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerTxStateQuery>(VIEWER_TX_STATE, {
-    variables: { id: txId },
-    pollInterval: polling ? 1000 : undefined,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerTxStateQuery>(VIEWER_TX_STATE, {
+      variables: { id: txId },
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    })
   const txState = _get(data, 'viewer.wallet.transactions.edges.0.node.state')
 
   const succeededFn = () => {
@@ -101,19 +100,27 @@ const OthersProcessingForm: React.FC<Props> = ({
     }
   }
 
-  if (txState === 'succeeded') {
-    if (currency === CURRENCY.HKD) {
-      setTimeout(() => {
-        succeededFn()
-      }, 3 * 1000)
+  useEffect(() => {
+    if (error) {
+      stopPolling()
     } else {
-      succeededFn()
+      startPolling(1000)
     }
-  }
 
-  if (error) {
-    setPolling(false)
-  }
+    return () => {}
+  }, [error])
+
+  useEffect(() => {
+    if (txState === 'succeeded') {
+      if (currency === CURRENCY.HKD) {
+        setTimeout(() => {
+          succeededFn()
+        }, 3 * 1000)
+      } else {
+        succeededFn()
+      }
+    }
+  }, [txState])
 
   return (
     <>

diff --git a/src/components/Forms/PaymentForm/SubscribeCircle/Processing/index.tsx b/src/components/Forms/PaymentForm/SubscribeCircle/Processing/index.tsx
@@ -1,6 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
-import _get from 'lodash/get'
-import { useState } from 'react'
+import { useEffect } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerCircleStateQuery } from '~/gql/graphql'
@@ -13,27 +12,30 @@ interface Props {
 }
 
 const Processing: React.FC<Props> = ({ circleName, nextStep }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerCircleStateQuery>(
-    VIEWER_CIRLCE_STATE,
-    {
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerCircleStateQuery>(VIEWER_CIRLCE_STATE, {
       variables: { name: circleName },
-      pollInterval: polling ? 1000 : undefined,
       errorPolicy: 'none',
       fetchPolicy: 'network-only',
       skip: typeof window === 'undefined',
-    }
-  )
+    })
   const isMember = data?.circle?.isMember
 
-  if (isMember) {
-    nextStep()
-    return null
-  }
+  useEffect(() => {
+    if (error) {
+      stopPolling()
+    } else {
+      startPolling(1000)
+    }
 
-  if (error) {
-    setPolling(false)
-  }
+    return () => {}
+  }, [error])
+
+  useEffect(() => {
+    if (isMember) {
+      nextStep()
+    }
+  }, [isMember])
 
   return (
     <Dialog.Message type={error ? 'error' : undefined} spacing="md">

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -1,5 +1,4 @@
 import NextHead from 'next/head'
-import NextScript from 'next/script'
 import { useContext } from 'react'
 
 import IMAGE_APPLE_TOUCH_ICON from '@/public/static/apple-touch-icon.png'
@@ -219,13 +218,6 @@ export const Head: React.FC<HeadProps> = (props) => {
           key="ld-json-data"
         />
       )}
-
-      <NextScript
-        async
-        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5129054622209245"
-        strategy="lazyOnload"
-        crossOrigin="anonymous"
-      />
     </NextHead>
   )
 }

diff --git a/src/components/Notice/NoticeActorAvatar.tsx b/src/components/Notice/NoticeActorAvatar.tsx
@@ -23,7 +23,9 @@ const NoticeActorAvatar = ({
 
   return (
     <Link {...path}>
-      <Avatar user={user} size={size} />
+      <a>
+        <Avatar user={user} size={size} />
+      </a>
     </Link>
   )
 }

diff --git a/src/components/Notice/NoticeActorName.tsx b/src/components/Notice/NoticeActorName.tsx
@@ -18,7 +18,11 @@ const NoticeActorName = ({
     userName: user.userName || '',
   })
 
-  return <Link {...path}>{user.displayName}</Link>
+  return (
+    <Link {...path}>
+      <a>{user.displayName}</a>
+    </Link>
+  )
 }
 
 NoticeActorName.fragments = {