Merge pull request #3876 from thematters/fix/New-Login

Fix/new login bugs

lang/default.json

@@ -1553,6 +1553,10 @@
     "defaultMessage": "mentioned you in broadcast comment in {circleName}",
     "description": "src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx"
   },
+  "rADhX5": {
+    "defaultMessage": "Unavailable",
+    "description": "FORBIDDEN_BY_STATE"
+  },
   "rBjwQy": {
     "defaultMessage": "Weibo",
     "description": "src/components/Share/Buttons/Weibo.tsx"

lang/en.json

@@ -1553,6 +1553,10 @@
     "defaultMessage": "mentioned you in broadcast comment in {circleName}",
     "description": "src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx"
   },
+  "rADhX5": {
+    "defaultMessage": "Unavailable",
+    "description": "FORBIDDEN_BY_STATE"
+  },
   "rBjwQy": {
     "defaultMessage": "Weibo",
     "description": "src/components/Share/Buttons/Weibo.tsx"

lang/zh-Hans.json

@@ -381,7 +381,7 @@
     "defaultMessage": "选集名称"
   },
   "A6r2p1": {
-    "defaultMessage": "Enter Matters"
+    "defaultMessage": "进入 Matters"
   },
   "A7ugfn": {
     "defaultMessage": "更多操作"
@@ -1553,6 +1553,10 @@
     "defaultMessage": "在 {circleName} 的广播留言中提及你",
     "description": "src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx"
   },
+  "rADhX5": {
+    "defaultMessage": "不可用",
+    "description": "FORBIDDEN_BY_STATE"
+  },
   "rBjwQy": {
     "defaultMessage": "微博",
     "description": "src/components/Share/Buttons/Weibo.tsx"

lang/zh-Hant.json

@@ -381,7 +381,7 @@
     "defaultMessage": "選集名稱"
   },
   "A6r2p1": {
-    "defaultMessage": "Enter Matters"
+    "defaultMessage": "進入 Matters"
   },
   "A7ugfn": {
     "defaultMessage": "更多操作"
@@ -1553,6 +1553,10 @@
     "defaultMessage": "在 {circleName} 的廣播留言中提及你",
     "description": "src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx"
   },
+  "rADhX5": {
+    "defaultMessage": "不可用",
+    "description": "FORBIDDEN_BY_STATE"
+  },
   "rBjwQy": {
     "defaultMessage": "微博",
     "description": "src/components/Share/Buttons/Weibo.tsx"

src/common/enums/oauth.ts

@@ -314,7 +314,9 @@ export const OAUTH_STORAGE_CODE_VERIFIER = 'oauth-storage-code-verifier'
 export const OAUTH_STORAGE_BIND_RESULT = 'oauth-storage-result'
 export const OAUTH_STORAGE_BIND_STATE = 'oauth-storage-bind-state'
 export const OAUTH_STORAGE_BIND_STATE_SUCCESS = 'oauth-storage-state-success'
-export const OAUTH_STORAGE_BIND_STATE_FAILURE = 'oauth-srorage-state-failure'
+export const OAUTH_STORAGE_BIND_STATE_FAILURE = 'oauth-storage-state-failure'
+export const OAUTH_STORAGE_BIND_STATE_UNAVAILABLE =
+  'oauth-storage-state-unavailable'
 export const OAUTH_STORAGE_SEND_EMAIL_CODE_COUNTDOWN =
   'oauth-storage-send-email-code-countdown'
 

src/components/AuthMethodFeed/AuthWalletFeed.tsx

@@ -18,11 +18,13 @@ export interface Props {
   closeDialog?: () => void
   back?: () => void
   hasWalletExist?: boolean
+  hasUnavailable?: boolean
 }
 
 export const AuthWalletFeed: React.FC<Props> = ({
   submitCallback,
   hasWalletExist,
+  hasUnavailable,
   closeDialog,
   back,
 }) => {
@@ -120,6 +122,16 @@ export const AuthWalletFeed: React.FC<Props> = ({
             </p>
           </section>
         )}
+        {hasUnavailable && (
+          <section className={styles.errorHint}>
+            <p>
+              <FormattedMessage
+                defaultMessage="Unavailable"
+                description="FORBIDDEN_BY_STATE"
+              />
+            </p>
+          </section>
+        )}
         <section className={styles.title}>
           <a href={PATHS.GUIDE} target="_blank">
             <FormattedMessage

src/components/Dialogs/AddWalletLoginDialog/Content.tsx

@@ -14,6 +14,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
   const [step, setStep] = useState<Step>('select')
   const [walletType, setWalletType] = useState<WalletType>('MetaMask')
   const [hasWalletExist, setHasWalletExist] = useState(false)
+  const [hasUnavailable, setHasUnavailable] = useState(false)
   const isSelect = step === 'select'
   const isConnect = step === 'connect'
 
@@ -45,6 +46,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
                 setStep('connect')
               }}
               hasWalletExist={hasWalletExist}
+              hasUnavailable={hasUnavailable}
             />
           </DialogBeta.Content>
           <DialogBeta.Footer
@@ -71,6 +73,10 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
             setHasWalletExist(true)
             setStep('select')
           }}
+          setUnavailable={() => {
+            setHasUnavailable(true)
+            setStep('select')
+          }}
         />
       )}
     </>

src/components/Dialogs/SetEmailDialog/Content.tsx

@@ -5,6 +5,7 @@ import React, { useContext } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
+  ERROR_CODES,
   KEYVALUE,
   MAX_CHANGE_EMAIL_TIME_DAILY,
   TOAST_SEND_EMAIL_VERIFICATION,
@@ -117,7 +118,17 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
       } catch (error) {
         const [messages, codes] = parseFormSubmitErrors(error as any)
         codes.forEach((code) => {
-          setFieldError('email', intl.formatMessage(messages[code]))
+          if (code.includes(ERROR_CODES.FORBIDDEN_BY_STATE)) {
+            setFieldError(
+              'email',
+              intl.formatMessage({
+                defaultMessage: 'Unavailable',
+                description: 'FORBIDDEN_BY_STATE',
+              })
+            )
+          } else {
+            setFieldError('email', intl.formatMessage(messages[code]))
+          }
         })
         setSubmitting(false)
       }

src/components/Forms/EmailLoginForm/index.tsx

@@ -179,6 +179,14 @@ export const EmailLoginForm: React.FC<FormProps> = ({
                   'This login code has expired, please try to resend',
               })
             )
+          } else if (code.includes(ERROR_CODES.FORBIDDEN_BY_STATE)) {
+            setFieldError(
+              'email',
+              intl.formatMessage({
+                defaultMessage: 'Unavailable',
+                description: 'FORBIDDEN_BY_STATE',
+              })
+            )
           } else {
             setFieldError('password', intl.formatMessage(messages[code]))
           }
@@ -197,26 +205,41 @@ export const EmailLoginForm: React.FC<FormProps> = ({
 
     const redirectUrl = signinCallbackUrl(values.email)
 
-    await sendCode({
-      variables: {
-        input: {
-          email: values.email,
-          type: 'email_otp',
-          redirectUrl,
-          language: lang,
+    try {
+      await sendCode({
+        variables: {
+          input: {
+            email: values.email,
+            type: 'email_otp',
+            redirectUrl,
+            language: lang,
+          },
         },
-      },
-    })
-    setCountdown(SEND_CODE_COUNTDOWN)
-    setHasSendCode(true)
+      })
+      setCountdown(SEND_CODE_COUNTDOWN)
+      setHasSendCode(true)
 
-    // clear
-    setErrors({})
-    setFieldValue('password', '')
-    setErrorCode(null)
+      // clear
+      setErrors({})
+      setFieldValue('password', '')
+      setErrorCode(null)
 
-    if (passwordRef.current) {
-      passwordRef.current.focus()
+      if (passwordRef.current) {
+        passwordRef.current.focus()
+      }
+    } catch (error) {
+      const [, codes] = parseFormSubmitErrors(error as any)
+      codes.forEach((code) => {
+        if (code.includes(ERROR_CODES.FORBIDDEN_BY_STATE)) {
+          setFieldError(
+            'email',
+            intl.formatMessage({
+              defaultMessage: 'Unavailable',
+              description: 'FORBIDDEN_BY_STATE',
+            })
+          )
+        }
+      })
     }
   }
 

src/components/Forms/EmailSignUpForm/Init.tsx

@@ -4,6 +4,7 @@ import _pickBy from 'lodash/pickBy'
 import { useContext, useRef, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { ERROR_CODES } from '~/common/enums'
 import {
   parseFormSubmitErrors,
   signupCallbackUrl,
@@ -122,7 +123,17 @@ const Init: React.FC<FormProps> = ({
         setSubmitting(false)
 
         const [messages, codes] = parseFormSubmitErrors(error as any)
-        setFieldError('email', intl.formatMessage(messages[codes[0]]))
+        if (codes[0].includes(ERROR_CODES.FORBIDDEN_BY_STATE)) {
+          setFieldError(
+            'email',
+            intl.formatMessage({
+              defaultMessage: 'Unavailable',
+              description: 'FORBIDDEN_BY_STATE',
+            })
+          )
+        } else {
+          setFieldError('email', intl.formatMessage(messages[codes[0]]))
+        }
 
         refreshToken?.()
         turnstileRef.current?.reset()

src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx

@@ -240,8 +240,8 @@ const Confirm: React.FC<FormProps> = ({
           <>
             <p className={styles.hint}>
               <Translate
-                zh_hant="數入六位數字交易密碼即可完成："
-                zh_hans="数入六位数字交易密码即可完成："
+                zh_hant="输入六位數字交易密碼即可完成："
+                zh_hans="輸入六位数字交易密码即可完成："
                 en="Please Enter a 6-digit payment password"
               />
             </p>

src/components/Forms/SelectAuthMethodForm/index.tsx

@@ -21,6 +21,7 @@ interface FormProps {
   authFeedType: AuthFeedType
   setAuthFeedType: (type: AuthFeedType) => void
 
+  hasUnavailable?: boolean
   closeDialog?: () => void
 }
 
@@ -33,6 +34,7 @@ export const SelectAuthMethodForm: React.FC<FormProps> = ({
   authFeedType = 'normal',
   setAuthFeedType,
   checkWallet,
+  hasUnavailable,
 }) => {
   const isInPage = purpose === 'page'
   const isInDialog = purpose === 'dialog'
@@ -62,7 +64,12 @@ export const SelectAuthMethodForm: React.FC<FormProps> = ({
           gotoEmailLogin={gotoEmailLogin}
         />
       )}
-      {isWallet && <AuthWalletFeed submitCallback={gotoWalletConnect} />}
+      {isWallet && (
+        <AuthWalletFeed
+          submitCallback={gotoWalletConnect}
+          hasUnavailable={hasUnavailable}
+        />
+      )}
     </>
   )
 

src/components/Forms/WalletAuthForm/Connect.tsx

@@ -54,6 +54,7 @@ interface FormProps {
   back?: () => void
   gotoSignInTab?: () => void
   setHasWalletExist?: () => void
+  setUnavailable?: () => void
 }
 
 interface FormValues {
@@ -69,6 +70,7 @@ const Connect: React.FC<FormProps> = ({
   back,
   gotoSignInTab,
   setHasWalletExist,
+  setUnavailable,
 }) => {
   const isInPage = purpose === 'page'
   const isInDialog = purpose === 'dialog'
@@ -237,7 +239,11 @@ const Connect: React.FC<FormProps> = ({
           } else if (code.includes(ERROR_CODES.CRYPTO_WALLET_EXISTS)) {
             disconnect()
             !!setHasWalletExist && setHasWalletExist()
+          } else if (code.includes(ERROR_CODES.FORBIDDEN_BY_STATE)) {
+            disconnect()
+            !!setUnavailable && setUnavailable()
           } else {
+            disconnect()
             setFieldError('address', intl.formatMessage(messages[code]))
           }
         })

src/components/GlobalDialogs/UniversalAuthDialog/index.tsx

@@ -54,6 +54,7 @@ type Step =
 const BaseUniversalAuthDialog = () => {
   const { currStep, forward } = useStep<Step>('select-login-method')
   const [email, setEmail] = useState('')
+  const [hasUnavailable, setHasUnavailable] = useState(false)
 
   const [firstRender, setFirstRender] = useState(true)
 
@@ -108,6 +109,7 @@ const BaseUniversalAuthDialog = () => {
           authFeedType={authFeedType}
           setAuthFeedType={setAuthFeedType}
           checkWallet={false}
+          hasUnavailable={hasUnavailable}
         />
       )}
 
@@ -124,6 +126,9 @@ const BaseUniversalAuthDialog = () => {
               setAuthFeedType('normal')
               forward('select-login-method')
             }}
+            setUnavailable={() => {
+              setHasUnavailable(true)
+            }}
           />
         </ReCaptchaProvider>
       )}

src/components/Head/index.tsx

@@ -5,6 +5,7 @@ import IMAGE_APPLE_TOUCH_ICON from '@/public/static/apple-touch-icon.png'
 import IMAGE_FAVICON_16 from '@/public/static/favicon-16x16.png'
 import IMAGE_FAVICON_32 from '@/public/static/favicon-32x32.png'
 import IMAGE_FAVICON_64 from '@/public/static/favicon-64x64.png'
+import IMAGE_FAVICON_128 from '@/public/static/favicon-128x128.png'
 import IMAGE_INTRO from '@/public/static/images/intro.jpg'
 import {
   toLocale,
@@ -88,6 +89,7 @@ export const Head: React.FC<HeadProps> = (props) => {
         rel="icon"
         type="image/png"
         href={IMAGE_FAVICON_16.src}
+        // href={IMAGE_FAVICON_128.src}
         sizes="16x16"
         key="favicon-16"
       />
@@ -108,9 +110,10 @@ export const Head: React.FC<HeadProps> = (props) => {
       <link
         rel="shortcut icon"
         type="image/png"
-        href={IMAGE_FAVICON_64.src}
-        sizes="64x64"
-        key="favicon-wallet-64"
+        href={IMAGE_FAVICON_128.src}
+        sizes="128x128"
+        // With the attribute key, the metamask does not work
+        // key="favicon-128"
       />
       <link
         rel="search"