diff --git a/lang/default.json b/lang/default.json
index 718815cb62..861978e627 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -208,10 +208,6 @@
     "defaultMessage": "Balance:",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "Welcome to use your wallet! {br} Please set a transaction password first",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "No data yet",
     "description": "src/views/Me/History/index.tsx"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "Broadcast"
   },
-  "bhehIF": {
-    "defaultMessage": "To protect your assets,"
-  },
   "c/z318": {
     "defaultMessage": "Incorrect email or password",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "Support Again"
   },
+  "fLvbqA": {
+    "defaultMessage": "To protect the security of your assets, please set a six-digit transaction password first."
+  },
   "fPcF7H": {
     "defaultMessage": "Adding tags helps readers find your articles."
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "This operation cannot be undone, confirm archiving?"
   },
-  "yBkdMI": {
-    "defaultMessage": "please set transaction password before top-up"
-  },
   "yCTXXb": {
     "defaultMessage": "Enter content…"
   },
diff --git a/lang/en.json b/lang/en.json
index d2ba72c65d..472a3e40cd 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -208,10 +208,6 @@
     "defaultMessage": "Balance:",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "Welcome to use your wallet! {br} Please set a transaction password first",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "No data yet",
     "description": "src/views/Me/History/index.tsx"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "Broadcast"
   },
-  "bhehIF": {
-    "defaultMessage": "To protect your assets,"
-  },
   "c/z318": {
     "defaultMessage": "Incorrect email or password",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "Support Again"
   },
+  "fLvbqA": {
+    "defaultMessage": "To protect the security of your assets, please set a six-digit transaction password first."
+  },
   "fPcF7H": {
     "defaultMessage": "Adding tags helps readers find your articles."
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "This operation cannot be undone, confirm archiving?"
   },
-  "yBkdMI": {
-    "defaultMessage": "please set transaction password before top-up"
-  },
   "yCTXXb": {
     "defaultMessage": "Enter content…"
   },
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 48802e898d..2b0d3c5467 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -208,10 +208,6 @@
     "defaultMessage": "余额：",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "欢迎使用钱包！请先设置交易密码",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "尚无阅读记录",
     "description": "src/views/Me/History/index.tsx"
@@ -647,7 +643,7 @@
     "description": "src/views/ArticleDetail/Comments/LatestComments/index.tsx"
   },
   "9UNFGm": {
-    "defaultMessage": "交易密码"
+    "defaultMessage": "设置交易密码"
   },
   "9Vkz9W": {
     "defaultMessage": "图片面积不得超过 1 亿像素（如 10,000 x 10,000 像素）"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "广播"
   },
-  "bhehIF": {
-    "defaultMessage": "为了保护你的资产安全"
-  },
   "c/z318": {
     "defaultMessage": "邮箱或密码错误",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "再次支持"
   },
+  "fLvbqA": {
+    "defaultMessage": "为了保护你的资产安全，请先设置六位数字交易密码"
+  },
   "fPcF7H": {
     "defaultMessage": "添加适合标签，帮助读者找到你的作品"
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "操作无法撤销，确认归档吗？"
   },
-  "yBkdMI": {
-    "defaultMessage": "在储值前请先设置交易密码"
-  },
   "yCTXXb": {
     "defaultMessage": "请输入正文…"
   },
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 5870c574e4..06eff75003 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -208,10 +208,6 @@
     "defaultMessage": "餘額：",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "歡迎使用錢包！請先設置交易密碼",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "尚無閱讀紀錄",
     "description": "src/views/Me/History/index.tsx"
@@ -647,7 +643,7 @@
     "description": "src/views/ArticleDetail/Comments/LatestComments/index.tsx"
   },
   "9UNFGm": {
-    "defaultMessage": "交易密碼"
+    "defaultMessage": "設置交易密碼"
   },
   "9Vkz9W": {
     "defaultMessage": "圖片面積不得超過 1 億像素（如 10,000x10,000 像素）"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "廣播"
   },
-  "bhehIF": {
-    "defaultMessage": "爲了保護你的資產安全"
-  },
   "c/z318": {
     "defaultMessage": "郵件地址或密碼錯誤",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "再次支持"
   },
+  "fLvbqA": {
+    "defaultMessage": "為了保護你的資產安全，請先設置六位數字交易密碼"
+  },
   "fPcF7H": {
     "defaultMessage": "添加合適標籤，讓站內外讀者找到你的作品"
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "操作無法撤銷，確認封存嗎？"
   },
-  "yBkdMI": {
-    "defaultMessage": "在儲值前請先設置交易密碼"
-  },
   "yCTXXb": {
     "defaultMessage": "請輸入正文…"
   },
diff --git a/src/components/Context/PaymentPassword/index.tsx b/src/components/Context/PaymentPassword/index.tsx
new file mode 100644
index 0000000000..7fd0ebde27
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Context/index.ts b/src/components/Context/index.ts
index 5228c0a9b4..a67da27b5b 100644
--- a/src/components/Context/index.ts
+++ b/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'
diff --git a/src/components/Dialogs/AddCreditDialog/index.tsx b/src/components/Dialogs/AddCreditDialog/index.tsx
index bf3a2a9876..56ddc2d255 100644
--- a/src/components/Dialogs/AddCreditDialog/index.tsx
+++ b/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 = () => {
diff --git a/src/components/Dialogs/SetPaymentPasswordDialog/Content.tsx b/src/components/Dialogs/SetPaymentPasswordDialog/Content.tsx
index 8011e71f86..1cb863e652 100644
--- a/src/components/Dialogs/SetPaymentPasswordDialog/Content.tsx
+++ b/src/components/Dialogs/SetPaymentPasswordDialog/Content.tsx
@@ -27,17 +27,12 @@ const SetPaymentPasswordContent: React.FC<FormProps> = ({
   const isInComparedPassword = currStep === 'comparedPassword'
 
   const header = (
-    <section className={styles.reason}>
+    <section className={styles.hint}>
       {isInPassword && (
         <p>
           <FormattedMessage
-            defaultMessage="To protect your assets,"
-            id="bhehIF"
-          />
-          <br />
-          <FormattedMessage
-            defaultMessage="please set transaction password before top-up"
-            id="yBkdMI"
+            defaultMessage="To protect the security of your assets, please set a six-digit transaction password first."
+            id="fLvbqA"
           />
         </p>
       )}
@@ -51,13 +46,6 @@ const SetPaymentPasswordContent: React.FC<FormProps> = ({
           />
         </p>
       )}
-
-      <p className={styles.hint}>
-        <FormattedMessage
-          defaultMessage="Enter a 6-digit payment password."
-          id="OpeFTV"
-        />
-      </p>
     </section>
   )
 
diff --git a/src/components/Dialogs/SetPaymentPasswordDialog/styles.module.css b/src/components/Dialogs/SetPaymentPasswordDialog/styles.module.css
index f4e5c739d2..81c93f2d85 100644
--- a/src/components/Dialogs/SetPaymentPasswordDialog/styles.module.css
+++ b/src/components/Dialogs/SetPaymentPasswordDialog/styles.module.css
@@ -1,15 +1,7 @@
-.reason {
-  padding: var(--sp24) 0;
-  margin: 0 var(--sp16);
-  font-size: var(--text16);
-  font-weight: var(--font-bold);
-  line-height: 1.5rem;
-  text-align: center;
-}
-
 .hint {
-  margin-top: var(--sp8);
+  margin-bottom: var(--sp24);
   font-size: var(--text14);
-  font-weight: var(--font-normal);
-  color: var(--color-grey);
+  line-height: 1.375rem;
+  color: var(--color-grey-darker);
+  text-align: left;
 }
diff --git a/src/components/Dialogs/SubscribeCircleDialog/index.tsx b/src/components/Dialogs/SubscribeCircleDialog/index.tsx
index ac4fbe60e2..eaffdb12d1 100644
--- a/src/components/Dialogs/SubscribeCircleDialog/index.tsx
+++ b/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)
diff --git a/src/components/Form/PinInput/styles.module.css b/src/components/Form/PinInput/styles.module.css
index e4b2158ad9..5a1d4361b5 100644
--- a/src/components/Form/PinInput/styles.module.css
+++ b/src/components/Form/PinInput/styles.module.css
@@ -2,7 +2,6 @@
   @mixin flex-center-all;
 
   width: 100%;
-  padding: 0 var(--sp16);
   margin: 0 auto;
 
   & .pinInputItem {
diff --git a/src/components/Forms/PaymentForm/SetPassword/index.tsx b/src/components/Forms/PaymentForm/SetPassword/index.tsx
deleted file mode 100644
index 644158e1cf..0000000000
--- a/src/components/Forms/PaymentForm/SetPassword/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import _pickBy from 'lodash/pickBy'
-import React from 'react'
-import { FormattedMessage } from 'react-intl'
-
-import { PAYMENT_CURRENCY as CURRENCY } from '~/common/enums'
-import { Dialog, SetPaymentPasswordForm, Spacer, useStep } from '~/components'
-import { UserDonationRecipientFragment } from '~/gql/graphql'
-
-import PaymentInfo from '../PaymentInfo'
-import styles from './styles.module.css'
-
-interface FormProps {
-  submitCallback: () => void
-  amount: number
-  currency: CURRENCY
-  recipient: UserDonationRecipientFragment
-  switchToSetAmount: () => void
-  loadingConponent?: React.ReactNode
-}
-
-const PaymentSetPasswordForm: React.FC<FormProps> = ({
-  submitCallback,
-  amount,
-  currency,
-  recipient,
-  switchToSetAmount,
-}) => {
-  const { currStep, forward } = useStep<'password' | 'comparedPassword'>(
-    'password'
-  )
-  const isInPassword = currStep === 'password'
-  const isInComparedPassword = currStep === 'comparedPassword'
-
-  return (
-    <section className={styles.container}>
-      <PaymentInfo amount={amount} currency={currency} recipient={recipient} />
-
-      <p className={styles.hint}>
-        {isInPassword && (
-          <FormattedMessage
-            defaultMessage="Welcome to use your wallet! {br} Please set a transaction password first"
-            id="1WeErK"
-            values={{ br: <br /> }}
-            description="src/components/Forms/PaymentForm/SetPassword/index.tsx"
-          />
-        )}
-        {isInComparedPassword && (
-          <FormattedMessage
-            defaultMessage="Please confirm transaction password"
-            id="RU5NDB"
-            description="src/components/Forms/PaymentForm/SetPassword/index.tsx"
-          />
-        )}
-      </p>
-
-      <SetPaymentPasswordForm
-        submitCallback={submitCallback}
-        step={currStep}
-        forward={forward}
-      />
-
-      <Spacer size="loose" />
-      <Dialog.RoundedButton
-        color="black"
-        onClick={switchToSetAmount}
-        borderColor="greyLight"
-        borderWidth="sm"
-        textWeight="normal"
-        borderActiveColor="grey"
-        text={
-          <FormattedMessage
-            defaultMessage="Back"
-            id="QfrKA6"
-            description="src/components/Forms/PaymentForm"
-          />
-        }
-      />
-    </section>
-  )
-}
-
-export default PaymentSetPasswordForm
diff --git a/src/components/Forms/PaymentForm/SetPassword/styles.module.css b/src/components/Forms/PaymentForm/SetPassword/styles.module.css
deleted file mode 100644
index 22590cc06c..0000000000
--- a/src/components/Forms/PaymentForm/SetPassword/styles.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.hint {
-  margin-bottom: var(--sp16);
-  font-size: var(--text14);
-  font-weight: var(--font-medium);
-  line-height: 1.375rem;
-  color: var(--color-black);
-  text-align: center;
-}
diff --git a/src/components/Forms/SetPaymentPasswordForm/index.tsx b/src/components/Forms/SetPaymentPasswordForm/index.tsx
index 8aedd26c4b..e1cef7f1f4 100644
--- a/src/components/Forms/SetPaymentPasswordForm/index.tsx
+++ b/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()
diff --git a/src/components/Root/index.tsx b/src/components/Root/index.tsx
index 43f7278976..3b9dc44aea 100644
--- a/src/components/Root/index.tsx
+++ b/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>
   )
diff --git a/src/views/ArticleDetail/Support/SupportAuthor/index.tsx b/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
index 63115ffeac..8edb070f12 100644
--- a/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
+++ b/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
@@ -6,11 +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'
@@ -44,11 +45,6 @@ const DynamicPayToFormComplete = dynamic(
   { loading: () => <SpinnerBlock /> }
 )
 
-const DynamicPaymentSetPasswordForm = dynamic(
-  () => import('~/components/Forms/PaymentForm/SetPassword'),
-  { loading: () => <SpinnerBlock /> }
-)
-
 const DynamicAddCreditForm = dynamic(
   () => import('~/components/Forms/PaymentForm/AddCredit'),
   { loading: () => <SpinnerBlock /> }
@@ -71,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
@@ -108,13 +104,14 @@ const SupportAuthor = (props: SupportAuthorProps) => {
   const [tabUrl, setTabUrl] = useState('')
   const [tx, setTx] = useState<PayToMutation['payTo']['transaction']>()
 
-  const setAmountCallback = (values: SetAmountCallbackValues) => {
+  const setAmountCallback = (
+    values: SetAmountCallbackValues,
+    openSetPaymentPasswordDialog: () => void
+  ) => {
     setAmount(values.amount)
     setCurrency(values.currency)
-    if (values.currency === CURRENCY.HKD) {
-      forward(
-        viewer.status?.hasPaymentPassword ? 'confirm' : 'setPaymentPassword'
-      )
+    if (values.currency === CURRENCY.HKD && !hasPaymentPassword) {
+      openSetPaymentPasswordDialog()
     } else {
       forward('confirm')
     }
@@ -154,7 +151,6 @@ const SupportAuthor = (props: SupportAuthorProps) => {
   const isConfirm = currStep === 'confirm'
   const isProcessing = currStep === 'processing'
   const isComplete = currStep === 'complete'
-  const isSetPaymentPassword = currStep === 'setPaymentPassword'
   const isTopup = currStep === 'topup'
   const isWalletSelect = currStep === 'walletSelect'
   const isNetworkSelect = currStep === 'networkSelect'
@@ -184,20 +180,26 @@ const SupportAuthor = (props: SupportAuthorProps) => {
       )}
       {isSetAmount && (
         <>
-          <DynamicPayToFormSetAmount
-            amount={amount}
-            setAmount={setAmount}
-            currency={currency}
-            recipient={recipient}
-            article={article}
-            submitCallback={setAmountCallback}
-            switchToAddCredit={() => {
-              forward('topup')
-            }}
-            setTabUrl={setTabUrl}
-            setTx={setTx}
-            targetId={targetId}
-          />
+          <SetPaymentPasswordDialog submitCallback={() => forward('confirm')}>
+            {({ openDialog: openSetPaymentPasswordDialog }) => (
+              <DynamicPayToFormSetAmount
+                amount={amount}
+                setAmount={setAmount}
+                currency={currency}
+                recipient={recipient}
+                article={article}
+                submitCallback={(value) => {
+                  setAmountCallback(value, openSetPaymentPasswordDialog)
+                }}
+                switchToAddCredit={() => {
+                  forward('topup')
+                }}
+                setTabUrl={setTabUrl}
+                setTx={setTx}
+                targetId={targetId}
+              />
+            )}
+          </SetPaymentPasswordDialog>
         </>
       )}
       {isConfirm && (
@@ -247,15 +249,6 @@ const SupportAuthor = (props: SupportAuthorProps) => {
           switchToBindWallet={() => forward('bindWallet')}
         />
       )}
-      {isSetPaymentPassword && (
-        <DynamicPaymentSetPasswordForm
-          submitCallback={() => forward('confirm')}
-          recipient={recipient}
-          amount={amount}
-          currency={currency}
-          switchToSetAmount={() => forward('setAmount')}
-        />
-      )}
 
       {isTopup && (
         <DynamicAddCreditForm
diff --git a/src/views/ArticleDetail/Support/SupportAuthor/types.d.ts b/src/views/ArticleDetail/Support/SupportAuthor/types.d.ts
index cac47ac703..ba64cc9a66 100644
--- a/src/views/ArticleDetail/Support/SupportAuthor/types.d.ts
+++ b/src/views/ArticleDetail/Support/SupportAuthor/types.d.ts
@@ -10,7 +10,6 @@ export type Step =
   | 'complete'
   | 'processing'
   | 'resetPassword'
-  | 'setPaymentPassword'
   // Wallet
   | 'walletSelect'
   | 'networkSelect'
diff --git a/src/views/Me/Wallet/index.tsx b/src/views/Me/Wallet/index.tsx
index 25e3247a22..266e58a223 100644
--- a/src/views/Me/Wallet/index.tsx
+++ b/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 (