fix: Prevent all dialogs from closing when returning the hasPaymentPa…

…ssword field

context:
https://matterslab.slack.com/archives/C88CK7Q7L/p1715860132687759?thread_ts=1715860043.505749&cid=C88CK7Q7L

src/components/Context/PaymentPassword/index.tsx

@@ -0,0 +1,27 @@
+import { createContext, useState } from 'react'
+
+export const PaymentPasswordContext = createContext(
+  {} as {
+    hasPaymentPassword: boolean
+    setHasPaymentPassword: (hasPaymentPassword: boolean) => void
+  }
+)
+
+export const PaymentPasswordProvider = ({
+  children,
+  hasPaymentPassword: _hasPaymentPassword,
+}: {
+  children: React.ReactNode
+  hasPaymentPassword: boolean
+}) => {
+  const [hasPaymentPassword, setHasPaymentPassword] =
+    useState(_hasPaymentPassword)
+
+  return (
+    <PaymentPasswordContext.Provider
+      value={{ hasPaymentPassword, setHasPaymentPassword }}
+    >
+      {children}
+    </PaymentPasswordContext.Provider>
+  )
+}

src/components/Context/index.ts

@@ -4,4 +4,5 @@ export * from './CommentDrafts'
 export * from './DraftDetailState'
 export * from './Features'
 export * from './Language'
+export * from './PaymentPassword'
 export * from './Viewer'

src/components/Dialogs/AddCreditDialog/index.tsx

@@ -4,10 +4,10 @@ import { useContext, useEffect } from 'react'
 import { analytics } from '~/common/utils'
 import {
   Dialog,
+  PaymentPasswordContext,
   SpinnerBlock,
   useDialogSwitch,
   useStep,
-  ViewerContext,
 } from '~/components'
 
 type Step = 'setPaymentPassword' | 'addCredit'
@@ -27,16 +27,14 @@ const DynamicAddCreditForm = dynamic(
 )
 
 const BaseAddCreditDialog = ({ children }: AddCreditDialogProps) => {
-  const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
   const {
     show,
     openDialog: baseOpenDialog,
     closeDialog,
   } = useDialogSwitch(true)
 
-  const initialStep = viewer.status?.hasPaymentPassword
-    ? 'addCredit'
-    : 'setPaymentPassword'
+  const initialStep = hasPaymentPassword ? 'addCredit' : 'setPaymentPassword'
   const { currStep, forward } = useStep<Step>(initialStep)
 
   const openDialog = () => {

src/components/Dialogs/SubscribeCircleDialog/index.tsx

@@ -5,11 +5,11 @@ import { OPEN_SUBSCRIBE_CIRCLE_DIALOG } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
   Dialog,
+  PaymentPasswordContext,
   SpinnerBlock,
   useDialogSwitch,
   useEventListener,
   useStep,
-  ViewerContext,
 } from '~/components'
 
 import { fragments } from './gql'
@@ -27,14 +27,14 @@ const BaseSubscribeCircleDialog = ({
   children,
   ...restProps
 }: SubscribeCircleDialogProps) => {
-  const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
   const {
     show,
     openDialog: baseOpenDialog,
     closeDialog,
   } = useDialogSwitch(true)
 
-  const initialStep = viewer.status?.hasPaymentPassword
+  const initialStep = hasPaymentPassword
     ? 'subscribeCircle'
     : 'setPaymentPassword'
   const { currStep, forward, prevStep, back } = useStep<Step>(initialStep)

src/components/Forms/SetPaymentPasswordForm/index.tsx

@@ -1,7 +1,7 @@
 import { useFormik } from 'formik'
 import gql from 'graphql-tag'
 import _pickBy from 'lodash/pickBy'
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { useIntl } from 'react-intl'
 
 import { PAYMENT_PASSSWORD_LENGTH } from '~/common/enums'
@@ -10,7 +10,7 @@ import {
   validateComparedPassword,
   validatePaymentPassword,
 } from '~/common/utils'
-import { Form, useMutation } from '~/components'
+import { Form, PaymentPasswordContext, useMutation } from '~/components'
 import { SetPaymentPasswordMutation } from '~/gql/graphql'
 
 interface FormProps {
@@ -30,9 +30,10 @@ const SET_PAYMENT_PASSWORD = gql`
   mutation SetPaymentPassword($password: String) {
     updateUserInfo(input: { paymentPassword: $password }) {
       id
-      status {
-        hasPaymentPassword
-      }
+      # FIXME: Returning this field forces all dialog to close
+      # status {
+      #   hasPaymentPassword
+      # }
     }
   }
 `
@@ -45,6 +46,7 @@ export const SetPaymentPasswordForm: React.FC<FormProps> = ({
   header,
 }) => {
   const intl = useIntl()
+  const { setHasPaymentPassword } = useContext(PaymentPasswordContext)
 
   const [setPassword] = useMutation<SetPaymentPasswordMutation>(
     SET_PAYMENT_PASSWORD,
@@ -95,6 +97,7 @@ export const SetPaymentPasswordForm: React.FC<FormProps> = ({
     onSubmit: async ({ password }, { setFieldError, setSubmitting }) => {
       try {
         await setPassword({ variables: { password } })
+        setHasPaymentPassword(true)
 
         setSubmitting(false)
         submitCallback()

src/components/Root/index.tsx

@@ -16,6 +16,7 @@ import {
   LanguageProvider,
   Layout,
   MediaContextProvider,
+  PaymentPasswordProvider,
   QueryError,
   TranslationsProvider,
   useRoute,
@@ -110,22 +111,26 @@ const Root = ({
   return (
     <WagmiConfig config={wagmiConfig}>
       <ViewerProvider viewer={viewer}>
-        <LanguageProvider headers={headers}>
-          <FeaturesProvider official={official}>
-            <MediaContextProvider>
-              <TranslationsProvider>
-                {shouldApplyLayout ? <Layout>{children}</Layout> : children}
-
-                <DynamicToaster />
-                <DynamicAnalyticsInitilizer user={viewer || {}} />
-                <DynamicGlobalDialogs />
-                <DynamicGlobalToasts />
-                <DynamicProgressBar />
-                <DynamicFingerprint />
-              </TranslationsProvider>
-            </MediaContextProvider>
-          </FeaturesProvider>
-        </LanguageProvider>
+        <PaymentPasswordProvider
+          hasPaymentPassword={!!viewer.status?.hasPaymentPassword}
+        >
+          <LanguageProvider headers={headers}>
+            <FeaturesProvider official={official}>
+              <MediaContextProvider>
+                <TranslationsProvider>
+                  {shouldApplyLayout ? <Layout>{children}</Layout> : children}
+
+                  <DynamicToaster />
+                  <DynamicAnalyticsInitilizer user={viewer || {}} />
+                  <DynamicGlobalDialogs />
+                  <DynamicGlobalToasts />
+                  <DynamicProgressBar />
+                  <DynamicFingerprint />
+                </TranslationsProvider>
+              </MediaContextProvider>
+            </FeaturesProvider>
+          </LanguageProvider>
+        </PaymentPasswordProvider>
       </ViewerProvider>
     </WagmiConfig>
   )

src/views/ArticleDetail/Support/SupportAuthor/index.tsx

@@ -6,12 +6,12 @@ import { PAYMENT_CURRENCY as CURRENCY } from '~/common/enums'
 import { featureSupportedChains } from '~/common/utils'
 import {
   AuthWalletFeed,
+  PaymentPasswordContext,
   SetPaymentPasswordDialog,
   Spacer,
   SpinnerBlock,
   useStep,
   useTargetNetwork,
-  ViewerContext,
 } from '~/components'
 import PaymentProcessingForm from '~/components/Forms/PaymentForm/Processing'
 import { PayToMutation } from '~/gql/graphql'
@@ -67,7 +67,7 @@ export type SupportAuthorProps = BaseSupportAuthorProps & {
 
 const SupportAuthor = (props: SupportAuthorProps) => {
   const { recipient, targetId, article, updateSupportStep, onClose } = props
-  const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
   const [windowRef, setWindowRef] = useState<Window | undefined>(undefined)
   const { currStep, forward: _forward } = useStep<SupportStep>('setAmount')
   const hasAuthorAddress = recipient.info.ethAddress
@@ -110,10 +110,7 @@ const SupportAuthor = (props: SupportAuthorProps) => {
   ) => {
     setAmount(values.amount)
     setCurrency(values.currency)
-    if (
-      values.currency === CURRENCY.HKD &&
-      !viewer.status?.hasPaymentPassword
-    ) {
+    if (values.currency === CURRENCY.HKD && !hasPaymentPassword) {
       openSetPaymentPasswordDialog()
     } else {
       forward('confirm')

src/views/Me/Wallet/index.tsx

@@ -13,6 +13,7 @@ import {
   Button,
   Head,
   Layout,
+  PaymentPasswordContext,
   SpinnerBlock,
   TableView,
   TextIcon,
@@ -32,6 +33,7 @@ import ViewStripeCustomerPortal from './ViewStripeCustomerPortal'
 const Wallet = () => {
   const intl = useIntl()
   const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
 
   const currency = viewer.settings.currency
 
@@ -65,7 +67,6 @@ const Wallet = () => {
   const balanceHKD = data?.viewer?.wallet.balance.HKD || 0
   const canPayout = balanceHKD >= PAYMENT_MINIMAL_PAYOUT_AMOUNT.HKD
   const hasStripeAccount = !!data?.viewer?.wallet.stripeAccount?.id
-  const hasPaymentPassword = viewer.status?.hasPaymentPassword
 
   if (exchangeRateLoading || loading) {
     return (