Merge pull request #3217 from thematters/develop

chore(release): v4.17.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",
@@ -92,6 +92,7 @@
     "nprogress": "^0.2.0",
     "number-precision": "^1.6.0",
     "path-to-regexp": "^6.2.1",
+    "pulltorefreshjs": "^0.1.22",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -134,6 +135,7 @@
     "@types/jump.js": "^1.0.4",
     "@types/lodash": "^4.14.191",
     "@types/nprogress": "0.2.0",
+    "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.26",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-copy-to-clipboard": "^5.0.4",

src/common/styles/vendors/ptr.css

@@ -0,0 +1,48 @@
+/* @styled-jsx=global */
+
+/* https://github.com/BoxFactura/pulltorefresh.js/blob/master/src/lib/styles.js */
+
+.ptr--ptr {
+  top: 0;
+  display: flex;
+  align-content: stretch;
+  align-items: flex-end;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  text-align: center;
+  pointer-events: none;
+  transition: height 0.3s, min-height 0.3s;
+}
+
+.ptr--box {
+  flex-basis: 100%;
+  padding: var(--spacing-base);
+}
+
+.ptr--pull {
+  transition: none;
+}
+
+.ptr--text {
+  font-size: 0;
+  visibility: hidden;
+}
+
+.ptr--icon {
+  font-size: 0;
+  color: var(--color-grey-light);
+  transition: transform 0.3s;
+}
+
+/*
+When at the top of the page, disable vertical overscroll so passive touch
+listeners can take over.
+*/
+.ptr--top {
+  touch-action: pan-x pan-down pinch-zoom;
+}
+
+.ptr--release .ptr--icon {
+  transform: rotate(180deg);
+}

src/common/utils/form/validate.ts

@@ -150,7 +150,11 @@ export const validateComparedUserName = (
   }
 }
 
-export const validateDisplayName = (value: string, lang: Language) => {
+export const validateDisplayName = (
+  value: string,
+  lang: Language,
+  isAdmin?: boolean
+) => {
   if (!value) {
     return translate({ id: 'required', lang })
   }
@@ -172,7 +176,7 @@ export const validateDisplayName = (value: string, lang: Language) => {
   }
 
   const invalidNameIndex = RESERVED_NAMES.indexOf(value.toLowerCase())
-  if (invalidNameIndex >= 0) {
+  if (invalidNameIndex >= 0 && !isAdmin) {
     return translate({
       zh_hant: `不能使用「${RESERVED_NAMES[invalidNameIndex]}」`,
       zh_hans: `不能使用 “${RESERVED_NAMES[invalidNameIndex]}”`,

src/common/utils/wallet.ts

@@ -3,7 +3,6 @@ import { goerli, mainnet, polygon, polygonMumbai } from 'wagmi/chains'
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
-import { publicProvider } from 'wagmi/providers/public'
 
 import { WalletErrorType } from '~/common/enums'
 
@@ -21,7 +20,7 @@ const defaultChains: Chain[] = isProd
 
 export const { provider: wagmiProvider, chains } = configureChains(
   defaultChains,
-  [alchemyProvider({ apiKey: alchemyId }), publicProvider()]
+  [alchemyProvider({ apiKey: alchemyId })]
 )
 
 export const wagmiClient = createClient({

src/components/Context/Viewer/index.tsx

@@ -68,6 +68,9 @@ const ViewerFragments = {
     private: gql`
       fragment ViewerUserPrivate on User {
         id
+        status {
+          role
+        }
         articles(input: { first: 0 }) {
           totalCount
         }

src/components/Forms/WalletAuthForm/Select.tsx

@@ -223,7 +223,8 @@ const Select: React.FC<FormProps> = ({
               >
                 <FormattedMessage
                   defaultMessage="Install MetaMask"
-                  description="src/components/Forms/WalletAuthForm/Select.tsx" />
+                  description="src/components/Forms/WalletAuthForm/Select.tsx"
+                />
               </TextIcon>
             }
             htmlHref={EXTERNAL_LINKS.METAMASK}

src/components/GlobalStyles/index.tsx

@@ -7,6 +7,7 @@ import interactionStyles from '~/common/styles/utils/interaction.css'
 import linkStyles from '~/common/styles/utils/link.css'
 import motionStyles from '~/common/styles/utils/motion.css'
 import fresnelStyles from '~/common/styles/vendors/fresnel.css'
+import ptrStyles from '~/common/styles/vendors/ptr.css'
 import tippyStyles from '~/common/styles/vendors/tippy.css'
 import { useWindowResize } from '~/components'
 
@@ -56,6 +57,9 @@ export const GlobalStyles = () => {
       <style jsx global>
         {tippyStyles}
       </style>
+      <style jsx global>
+        {ptrStyles}
+      </style>
       <style jsx global>
         {fresnelStyles}
       </style>

src/components/Hook/index.ts

@@ -10,6 +10,7 @@ export * from './useImmersiveMode'
 export * from './useInterval'
 export * from './useNativeEventListener'
 export * from './useOutsideClick'
+export * from './usePullToRefresh'
 export * from './useRoute'
 export * from './useStep'
 export * from './useTargetNetwork'

src/components/Hook/usePullToRefresh.tsx

@@ -0,0 +1,95 @@
+import { useEffect } from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import { ReactComponent as IconPullToRefresh } from '@/public/static/icons/24px/pull-to-refresh.svg'
+import { analytics, sleep } from '~/common/utils'
+import { IconSpinner16, withIcon } from '~/components'
+
+import { useEventListener } from './useEventListener'
+
+/**
+ * Core of Pull to Refresh
+ *
+ * Usage:
+ *
+ * ```tsx
+ * usePullToRefresh.Register()
+ * usePullToRefresh.Handler(refetch)
+ * ```
+ *
+ */
+
+const PTR_START = 'startPullToRefresh'
+const PTR_END = 'endPullToRefresh'
+const PTR_TIMEOUT = 3000
+
+/**
+ * React Hook to register Pull To Refresh
+ */
+const Register = (selector = 'body', timeout = PTR_TIMEOUT) => {
+  let PTR: any
+
+  const initPTR = (ptr: any) => {
+    PTR = ptr
+
+    PTR.init({
+      mainElement: selector,
+      triggerElement: selector,
+      distReload: 56,
+      onRefresh: (cb: () => void) => {
+        // start refresh
+        window.dispatchEvent(new CustomEvent(PTR_START, {}))
+        analytics.trackEvent('pull_to_refresh')
+
+        // end refresh
+        let polling = true
+
+        const onEnd = () => {
+          if (polling) {
+            cb()
+            polling = false
+          }
+          window.removeEventListener(PTR_END, onEnd)
+        }
+
+        window.addEventListener(PTR_END, onEnd)
+        sleep(timeout).then(onEnd)
+      },
+      getStyles: () => ``, // remove default styles
+      iconArrow: ReactDOMServer.renderToString(
+        withIcon(IconPullToRefresh)({ size: 'md' })
+      ),
+      iconRefreshing: ReactDOMServer.renderToString(
+        <IconSpinner16 size="md" />
+      ),
+    })
+  }
+
+  useEffect(() => {
+    import('pulltorefreshjs').then(initPTR)
+
+    return () => {
+      if (PTR) {
+        PTR.destroyAll()
+      }
+    }
+  }, [])
+}
+
+/**
+ * React Hook to handle `PTR_START` event from `usePullToRefresh.Register`
+ */
+const Handler = (onPull: () => any) => {
+  useEventListener(PTR_START, async () => {
+    if (onPull) {
+      await onPull()
+    }
+
+    window.dispatchEvent(new CustomEvent(PTR_END, {}))
+  })
+}
+
+export const usePullToRefresh = {
+  Register,
+  Handler,
+}

src/components/Layout/NavBar/NavListItem.tsx

@@ -39,10 +39,10 @@ const NavListItem = ({
         {...props}
         onClick={onClick}
       >
+        {active ? activeIcon : icon}
         <VisuallyHidden>
           <span>{name}</span>
         </VisuallyHidden>
-        {active ? activeIcon : icon}
       </Button>
 
       <style jsx>{styles}</style>

src/components/Layout/index.tsx

@@ -2,7 +2,14 @@ import { useQuery } from '@apollo/react-hooks'
 import classNames from 'classnames'
 import dynamic from 'next/dynamic'
 
-import { Head, Media, SearchBar, useRoute } from '~/components'
+import {
+  Head,
+  Media,
+  PullToRefresh,
+  SearchBar,
+  usePullToRefresh,
+  useRoute,
+} from '~/components'
 import CLIENT_PREFERENCE from '~/components/GQL/queries/clientPreference'
 import { ClientPreferenceQuery } from '~/gql/graphql'
 
@@ -107,16 +114,21 @@ const Main: React.FC<React.PropsWithChildren<MainProps>> = ({
     hasOnboardingTasks: showOnboardingTasks,
   })
 
+  usePullToRefresh.Register()
+  usePullToRefresh.Handler(() => window.location.reload())
+
   return (
     <>
       <article className={articleClasses}>
-        {children}
+        <PullToRefresh>
+          {children}
 
-        {showOnboardingTasks && (
-          <Media lessThan="xl">
-            <DynamicOnboardingTasksNavBar />
-          </Media>
-        )}
+          {showOnboardingTasks && (
+            <Media lessThan="xl">
+              <DynamicOnboardingTasksNavBar />
+            </Media>
+          )}
+        </PullToRefresh>
       </article>
 
       <aside className="l-col-three-right">