feat(game): 重构充值功能添加支付渠道选择

- 在 API 类型定义中添加支付渠道、货币代码和银行信息字段
- 实现充值 ViewModel 管理支付渠道、货币、支付方式和银行的选择逻辑
- 添加下拉选择组件让用户选择支付渠道、货币、支付方式和银行
- 更新桌面端和移动端充值界面的 UI 布局和样式设计
- 集成 Lucide 图标库提供支付方式相关的图标显示
- 重构存款配置标准化逻辑支持备用支付渠道数据处理
- 添加多语言本地化资源支持新的支付流程界面文本
- 优化充值创建请求的数据结构和参数传递机制

src/api/finance-api.ts

@@ -81,6 +81,8 @@ function normalizeRate(dto: FinanceRateConfigDto) {
 function normalizePayChannel(dto: FinancePayChannelDto) {
   return {
     code: dto.code,
+    currencyCodes: Array.isArray(dto.currency_codes) ? dto.currency_codes : [],
+    depositBanks: (dto.deposit_banks ?? []).map(normalizeWithdrawBank),
     name: dto.name,
     sort: Number.isFinite(dto.sort) ? dto.sort : 0,
     status: typeof dto.status === 'number' ? dto.status : 1,
@@ -133,12 +135,22 @@ function normalizeDepositFields(dto: FinanceDepositFieldsDto | undefined = {}) {
   }
 }
 
-function normalizeDepositConfig(dto: FinanceDepositConfigDto | undefined) {
+function normalizeDepositConfig(
+  dto: FinanceDepositConfigDto | undefined,
+  fallbackPayChannels: FinancePayChannelDto[] = [],
+) {
+  const payChannels =
+    dto?.pay_channels && dto.pay_channels.length > 0
+      ? dto.pay_channels
+      : fallbackPayChannels
+
   return {
     banks: (dto?.banks ?? []).map(normalizeWithdrawBank),
+    defaultChannelCode: dto?.default_channel_code ?? '',
     defaultChannelByCurrency: dto?.default_channel_by_currency ?? {},
     fields: normalizeDepositFields(dto?.fields),
     methods: (dto?.methods ?? []).map(normalizeDepositMethod),
+    payChannels: payChannels.map(normalizePayChannel),
   }
 }
 
@@ -176,7 +188,7 @@ function normalizeDepositWithdrawConfig(
   return {
     currencies: (dto.currencies ?? []).map(normalizeCurrency),
     defaultDepositChannelCode: dto.default_deposit_channel_code ?? '',
-    deposit: normalizeDepositConfig(dto.deposit),
+    deposit: normalizeDepositConfig(dto.deposit, dto.pay_channels ?? []),
     payChannels: (dto.pay_channels ?? []).map(normalizePayChannel),
     platformCoinLabel: dto.platform_coin_label,
     rates: (dto.rates ?? []).map(normalizeRate),
@@ -204,6 +216,10 @@ function normalizeDepositTierItem(
     typeof dto.pay_channel_code === 'string' && dto.pay_channel_code.length > 0
       ? dto.pay_channel_code
       : null
+  const channelCode =
+    typeof dto.channel_code === 'string' && dto.channel_code.length > 0
+      ? dto.channel_code
+      : (payChannelCode ?? null)
   const sort = toFiniteNumber(dto.sort ?? dto.pay_amount ?? dto.amount)
   const status = toFiniteNumber(dto.status ?? 1)
   const channels = (dto.channels ?? [])
@@ -217,6 +233,7 @@ function normalizeDepositTierItem(
   return {
     amount,
     bonusAmount,
+    channelCode,
     channels,
     coins,
     currency,

src/constants/game.ts

@@ -288,6 +288,7 @@ export const DEFAULT_WITHDRAW_CONFIG: DepositWithdrawConfig = {
   defaultDepositChannelCode: '',
   deposit: {
     banks: [],
+    defaultChannelCode: '',
     defaultChannelByCurrency: {},
     fields: {
       depositBankAccountParam: 'deposit_bank_account',
@@ -300,6 +301,7 @@ export const DEFAULT_WITHDRAW_CONFIG: DepositWithdrawConfig = {
       requirePaymentType: false,
     },
     methods: [],
+    payChannels: [],
   },
   payChannels: [],
   platformCoinLabel: '钻石',

src/features/game/components/desktop/desktop-topup.tsx

@@ -1,59 +1,62 @@
 import { useMutation } from '@tanstack/react-query'
+import { CircleDollarSign, CreditCard, Landmark } from 'lucide-react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createDeposit } from '@/api'
 import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
-import { DEFAULT_WITHDRAW_CONFIG } from '@/constants'
+import {
-import { useDepositTierList } from '@/hooks/use-deposit-tier-list'
+  Select,
-import { useDepositWithdrawConfig } from '@/hooks/use-deposit-withdraw-config'
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useTopupVm } from '@/hooks/use-topup-vm'
 import { notify } from '@/lib/notify'
 import { cn } from '@/lib/utils'
-import type { DepositTierItem } from '@/type'
+import type { DepositCreateRequestDto, DepositTierItem } from '@/type'
 
 const PANEL_CLASS =
-  'rounded-md border border-[rgba(110,229,243,0.24)] bg-[linear-gradient(180deg,rgba(7,30,43,0.9),rgba(3,15,26,0.94))] shadow-[inset_0_0_calc(var(--design-unit)*14)_rgba(88,225,238,0.08),0_0_calc(var(--design-unit)*10)_rgba(32,163,186,0.12)]'
+  'rounded-md border border-[rgba(126,234,244,0.22)] bg-[linear-gradient(180deg,rgba(4,18,29,0.98),rgba(1,8,16,0.99))] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_0_calc(var(--design-unit)*16)_rgba(44,210,230,0.1)]'
+
+const FILTER_BAR_CLASS =
+  'rounded-[calc(var(--design-unit)*8)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(9,35,48,0.82),rgba(5,20,32,0.9))] p-design-10 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]'
+
+const FIELD_LABEL_CLASS =
+  'mb-design-5 flex items-center gap-design-5 text-design-11 font-semibold uppercase tracking-[0.08em] text-[#8FE7EF]'
+
+const SELECT_TRIGGER_CLASS =
+  'h-design-42 w-full rounded-[calc(var(--design-unit)*6)] border-[rgba(126,234,244,0.18)] bg-[rgba(2,15,26,0.78)] px-design-10 text-design-12 font-semibold text-[#E9FEFF] shadow-none hover:border-[rgba(170,247,255,0.48)] focus-visible:border-[#7CE3E8] focus-visible:ring-[#7CE3E8]/25 data-placeholder:text-[#6FAAB2]'
 
 function formatNumber(value: number) {
   return new Intl.NumberFormat('en-US').format(value)
 }
 
+function getMethodIcon(gatewayCode: string) {
+  if (gatewayCode === 'ONLINE_DEBIT') {
+    return Landmark
+  }
+
+  if (gatewayCode === 'E_WALLET') {
+    return CreditCard
+  }
+
+  return CircleDollarSign
+}
+
 function DesktopTopup() {
   const { t } = useTranslation()
-  const depositWithdrawConfigQuery = useDepositWithdrawConfig()
+  const vm = useTopupVm()
-  const tierListQuery = useDepositTierList()
-  const depositWithdrawConfig =
-    depositWithdrawConfigQuery.data ?? DEFAULT_WITHDRAW_CONFIG
-  const isLoading =
-    tierListQuery.isLoading || depositWithdrawConfigQuery.isLoading
-  const isError = tierListQuery.isError || depositWithdrawConfigQuery.isError
-  const tiers = tierListQuery.data ?? []
   const createDepositInFlightRef = useRef(false)
   const pendingPayWindowRef = useRef<Window | null>(null)
   const createDepositMutation = useMutation({
-    mutationFn: ({
+    mutationFn: (payload: DepositCreateRequestDto) => createDeposit(payload),
-      channelCode,
+  })
-      depositBank,
+
-      depositBankAccount,
+  const getPaymentMethodLabel = (method: (typeof vm.methods)[number]) =>
-      depositFromAddress,
+    method.name.trim() ||
-      paymentType,
+    t(`gameDesktop.topup.flow.paymentMethods.${method.gatewayCode}`, {
-      tierId,
+      defaultValue: t('gameDesktop.topup.flow.methodTitle'),
-    }: {
-      channelCode: string
-      depositBank?: string
-      depositBankAccount?: string
-      depositFromAddress?: string
-      paymentType: string
-      tierId: string
-    }) =>
-      createDeposit({
-        channel_code: channelCode,
-        deposit_bank: depositBank,
-        deposit_bank_account: depositBankAccount,
-        deposit_from_address: depositFromAddress,
-        idempotency_key: String(Date.now()),
-        payment_type: paymentType,
-        tier_id: tierId,
-      }),
     })
 
   const handleCreateDeposit = async (tier: DepositTierItem) => {
@@ -61,30 +64,9 @@ function DesktopTopup() {
       return
     }
 
-    const channelCode =
+    const payload = vm.getCreateDepositPayload(tier)
-      tier.payChannelCode ??
-      tier.channels[0]?.code ??
-      (tier.currency
-        ? depositWithdrawConfig.deposit.defaultChannelByCurrency[tier.currency]
-        : undefined) ??
-      depositWithdrawConfig.defaultDepositChannelCode
-    const selectedPaymentMethod =
-      depositWithdrawConfig.deposit.methods.find(
-        (method) => method.currencyCode === tier.currency,
-      ) ?? depositWithdrawConfig.deposit.methods[0]
-    const paymentType = selectedPaymentMethod?.code ?? ''
-    const depositBank = selectedPaymentMethod?.requiresBank
-      ? depositWithdrawConfig.deposit.banks.find(
-          (bank) => bank.currencyCode === tier.currency,
-        )?.code
-      : undefined
 
-    if (!channelCode) {
+    if (!payload) {
-      notify.error(t('commonUi.toast.configError'))
-      return
-    }
-
-    if (!paymentType) {
       notify.error(t('commonUi.toast.configError'))
       return
     }
@@ -102,12 +84,7 @@ function DesktopTopup() {
     pendingPayWindowRef.current = payWindow
 
     try {
-      const result = await createDepositMutation.mutateAsync({
+      const result = await createDepositMutation.mutateAsync(payload)
-        channelCode,
-        depositBank,
-        paymentType,
-        tierId: tier.id,
-      })
       const payUrl = result.pay_url.trim()
 
       if (!payUrl) {
@@ -139,31 +116,205 @@ function DesktopTopup() {
       <div
         className={cn(
           PANEL_CLASS,
-          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden px-design-16 py-design-14',
+          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden p-design-12',
         )}
       >
-        <div className="mb-design-10 flex items-center border-b border-[rgba(89,209,223,0.2)] pb-design-10">
+        {vm.isLoading ? (
-          <div className="text-design-20 font-semibold text-[#9AF5FB]">
+          <DataLoadingIndicator
-            {t('gameDesktop.topup.tier.title')}
+            label={t('gameDesktop.topup.tier.loading')}
+            className="h-full min-h-0 rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
+          />
+        ) : vm.isError ? (
+          <div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*7)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] text-design-16 text-[#F4A9AE]">
+            {t('gameDesktop.topup.tier.failed')}
+          </div>
+        ) : (
+          <div className="flex h-full min-h-0 flex-col gap-design-10">
+            <div className={FILTER_BAR_CLASS}>
+              <div className="grid grid-cols-[1.15fr_0.78fr_1fr_1.15fr] gap-design-8">
+                <div className="min-w-0">
+                  <label
+                    htmlFor="desktop-topup-channel"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CreditCard className="h-design-12 w-design-12" />
+                    <span>{t('gameDesktop.topup.flow.channelTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedPayChannelCode || undefined}
+                    onValueChange={vm.setSelectedPayChannelCode}
+                    disabled={vm.payChannels.length === 0}
+                  >
+                    <SelectTrigger
+                      id="desktop-topup-channel"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.channelTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-design-240">
+                      {vm.payChannels.map((channel) => (
+                        <SelectItem
+                          key={channel.code}
+                          value={channel.code}
+                          className="py-design-7 text-design-12"
+                        >
+                          {channel.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="min-w-0">
+                  <label
+                    htmlFor="desktop-topup-currency"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CircleDollarSign className="h-design-12 w-design-12" />
+                    <span>{t('gameDesktop.topup.flow.currencyTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedCurrencyCode || undefined}
+                    onValueChange={vm.setSelectedCurrencyCode}
+                    disabled={
+                      !vm.selectedPayChannel ||
+                      vm.selectedPayChannel.currencyCodes.length === 0
+                    }
+                  >
+                    <SelectTrigger
+                      id="desktop-topup-currency"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.currencyTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {vm.selectedPayChannel?.currencyCodes.map(
+                        (currencyCode) => (
+                          <SelectItem
+                            key={currencyCode}
+                            value={currencyCode}
+                            className="py-design-7 text-design-12"
+                          >
+                            {currencyCode}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="min-w-0">
+                  <label
+                    htmlFor="desktop-topup-method"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CreditCard className="h-design-12 w-design-12" />
+                    <span>{t('gameDesktop.topup.flow.methodTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedPaymentMethodCode || undefined}
+                    onValueChange={vm.setSelectedPaymentMethodCode}
+                    disabled={vm.methods.length === 0}
+                  >
+                    <SelectTrigger
+                      id="desktop-topup-method"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.methodTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {vm.methods.map((method) => {
+                        const MethodIcon = getMethodIcon(method.gatewayCode)
+
+                        return (
+                          <SelectItem
+                            key={method.code}
+                            value={method.code}
+                            className="py-design-7 text-design-12"
+                          >
+                            <span className="flex items-center gap-design-6">
+                              <MethodIcon className="h-design-12 w-design-12" />
+                              <span>{getPaymentMethodLabel(method)}</span>
+                            </span>
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="min-w-0">
+                  <label
+                    htmlFor="desktop-topup-bank"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <Landmark className="h-design-12 w-design-12" />
+                    <span>{t('gameDesktop.topup.flow.bankTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedBankCode || undefined}
+                    onValueChange={vm.setSelectedBankCode}
+                    disabled={vm.banks.length === 0}
+                  >
+                    <SelectTrigger
+                      id="desktop-topup-bank"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t(
+                          vm.banks.length === 0
+                            ? 'gameDesktop.topup.flow.noBank'
+                            : 'gameDesktop.topup.flow.bankPlaceholder',
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-design-240">
+                      {vm.banks.map((bank) => (
+                        <SelectItem
+                          key={bank.code}
+                          value={bank.code}
+                          className="py-design-7 text-design-12"
+                        >
+                          {bank.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             </div>
 
-        {isLoading ? (
+            <div className="flex min-h-0 flex-1 flex-col rounded-[calc(var(--design-unit)*8)] border border-[rgba(126,234,244,0.13)] bg-[rgba(2,13,23,0.42)] p-design-10">
-          <DataLoadingIndicator
+              <div className="mb-design-8 flex shrink-0 items-center justify-between gap-design-10">
-            label={t('gameDesktop.topup.tier.loading')}
+                <div className="min-w-0">
-            className="h-full min-h-0 rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
+                  <div className="text-design-15 font-semibold text-[#E8FDFF]">
-          />
+                    {t('gameDesktop.topup.tier.title')}
-        ) : isError ? (
-          <div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] text-design-16 text-[#F4A9AE]">
-            {t('gameDesktop.topup.tier.failed')}
                   </div>
-        ) : tiers.length === 0 ? (
+                  <div className="mt-design-2 truncate text-design-10 text-[#70AEB8]">
-          <div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)] text-design-16 text-[#8FDDE6]">
+                    {vm.selectedPayChannel?.name}
+                    {vm.selectedCurrencyCode
+                      ? ` / ${vm.selectedCurrencyCode}`
+                      : ''}
+                  </div>
+                </div>
+                <div className="rounded-full border border-[rgba(126,234,244,0.18)] bg-[rgba(4,25,38,0.72)] px-design-8 py-design-3 text-design-11 font-semibold text-[#9CE8F0]">
+                  {vm.filteredTiers.length}
+                </div>
+              </div>
+
+              {vm.filteredTiers.length === 0 ? (
+                <div className="flex min-h-0 flex-1 items-center justify-center rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.16)] bg-[rgba(6,24,35,0.44)] text-design-16 text-[#8FDDE6]">
                   {t('gameDesktop.topup.tier.empty')}
                 </div>
               ) : (
-          <div className="grid min-w-0 grid-cols-4 gap-design-8">
+                <div className="grid min-h-0 min-w-0 grid-cols-4 content-start gap-design-8 overflow-y-auto pr-design-1">
-            {tiers.map((tier) => (
+                  {vm.filteredTiers.map((tier) => (
                     <button
                       key={tier.id}
                       type="button"
@@ -171,59 +322,45 @@ function DesktopTopup() {
                         void handleCreateDeposit(tier)
                       }}
                       className={cn(
-                  'relative overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] px-design-10 py-design-10 text-left shadow-[0_0_calc(var(--design-unit)*10)_rgba(88,225,238,0.08)] transition-[transform,border-color,box-shadow] duration-150',
+                        'group relative min-h-design-126 cursor-pointer overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(8,36,50,0.88),rgba(3,18,29,0.96))] px-design-10 py-design-10 text-left transition-[border-color,background-color,box-shadow,filter] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7CE3E8]/50',
                         createDepositMutation.isPending
                           ? 'cursor-wait opacity-80'
-                    : 'cursor-pointer hover:-translate-y-[1px] hover:border-[rgba(170,247,255,0.62)] hover:shadow-[0_0_calc(var(--design-unit)*14)_rgba(88,225,238,0.14)]',
+                          : 'hover:border-[rgba(255,226,41,0.5)] hover:bg-[linear-gradient(180deg,rgba(12,46,61,0.94),rgba(4,22,34,0.98))] hover:shadow-[0_0_calc(var(--design-unit)*14)_rgba(255,226,41,0.08)] active:brightness-90',
                       )}
                     >
-                <div className="absolute right-design-8 top-design-8 rounded-full border border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] px-design-6 py-[2px] text-design-10 leading-none text-[#7CDDE7]">
+                      <div className="flex items-start justify-between gap-design-8">
-                  {tier.currency ?? 'FIAT'}
+                        <div className="min-w-0">
-                </div>
+                          <div className="truncate text-design-11 uppercase tracking-[0.05em] text-[#65B2BA]">
-
-                <div className="pr-design-46 text-design-11 uppercase tracking-[0.06em] text-[#63AEB6]">
                             {tier.title}
                           </div>
-
+                          <div className="pt-design-7 text-design-24 font-semibold leading-none text-[#FFE229]">
-                <div className="pt-design-5 text-design-20 font-semibold leading-none text-[#FFE229]">
                             {formatNumber(tier.payAmount)}
                           </div>
-                <div className="pt-design-3 text-design-11 text-[#9FDCE3]">
+                        </div>
-                  {t('gameDesktop.topup.tier.coins')}:{' '}
+                        <div className="shrink-0 rounded-full border border-[rgba(121,219,229,0.24)] bg-[rgba(10,39,52,0.72)] px-design-6 py-[2px] text-design-10 leading-none text-[#7CDDE7]">
-                  {formatNumber(tier.totalAmount)}
+                          {tier.currency ?? 'FIAT'}
+                        </div>
                       </div>
 
-                <div className="mt-design-8 rounded-[calc(var(--design-unit)*5)] border border-[rgba(89,209,223,0.18)] bg-[rgba(4,19,28,0.58)] px-design-8 py-design-6">
+                      <div className="mt-design-9 rounded-[calc(var(--design-unit)*5)] bg-[rgba(255,226,41,0.06)] px-design-7 py-design-6">
-                  <div className="flex items-center justify-between gap-design-8 text-design-11">
+                        <div className="flex items-center justify-between gap-design-6">
-                    <span className="text-[#7CE3E8]">
+                          <span className="text-design-10 text-[#74B8C0]">
                             {t('gameDesktop.topup.tier.bonus')}
                           </span>
-                    <span className="text-[#FFF1C9]">
+                          <span className="text-design-12 font-semibold text-[#FFF1C9]">
                             {formatNumber(tier.bonusAmount)}
                           </span>
                         </div>
-                  <div className="mt-design-4 flex items-center justify-between gap-design-8 text-design-11">
-                    <span className="text-[#7CE3E8]">Channels</span>
-                    <span className="line-clamp-1 text-right text-[#6DFF83]">
-                      {tier.channels.length > 0
-                        ? tier.channels
-                            .map((channel) => channel.name)
-                            .join(', ')
-                        : '--'}
-                    </span>
                       </div>
-                </div>
-                {tier.desc ? (
-                  <div className="mt-design-6 line-clamp-2 text-design-10 leading-[1.3] text-[#6DAAB0]">
-                    {tier.desc}
-                  </div>
-                ) : null}
                     </button>
                   ))}
                 </div>
               )}
             </div>
           </div>
+        )}
+      </div>
+    </div>
   )
 }
 

src/features/game/components/mobile/mobile-topup.tsx

@@ -1,59 +1,62 @@
 import { useMutation } from '@tanstack/react-query'
+import { CircleDollarSign, CreditCard, Landmark } from 'lucide-react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createDeposit } from '@/api'
 import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
-import { DEFAULT_WITHDRAW_CONFIG } from '@/constants'
+import {
-import { useDepositTierList } from '@/hooks/use-deposit-tier-list'
+  Select,
-import { useDepositWithdrawConfig } from '@/hooks/use-deposit-withdraw-config'
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useTopupVm } from '@/hooks/use-topup-vm'
 import { notify } from '@/lib/notify'
 import { cn } from '@/lib/utils'
-import type { DepositTierItem } from '@/type'
+import type { DepositCreateRequestDto, DepositTierItem } from '@/type'
 
 const PANEL_CLASS =
-  'rounded-md border border-[rgba(110,229,243,0.24)] bg-[linear-gradient(180deg,rgba(7,30,43,0.9),rgba(3,15,26,0.94))] shadow-[inset_0_0_calc(var(--design-unit)*12)_rgba(88,225,238,0.08)]'
+  'rounded-md border border-[rgba(126,234,244,0.22)] bg-[linear-gradient(180deg,rgba(4,18,29,0.98),rgba(1,8,16,0.99))] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_0_calc(var(--design-unit)*12)_rgba(44,210,230,0.08)]'
+
+const FILTER_BAR_CLASS =
+  'rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(9,35,48,0.82),rgba(5,20,32,0.9))] p-design-7 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]'
+
+const FIELD_LABEL_CLASS =
+  'mb-design-3 flex items-center gap-design-4 text-design-9 font-semibold uppercase tracking-[0.07em] text-[#8FE7EF]'
+
+const SELECT_TRIGGER_CLASS =
+  'h-design-34 w-full rounded-[calc(var(--design-unit)*5)] border-[rgba(126,234,244,0.18)] bg-[rgba(2,15,26,0.78)] px-design-8 text-design-10 font-semibold text-[#E9FEFF] shadow-none focus-visible:border-[#7CE3E8] focus-visible:ring-[#7CE3E8]/25 data-placeholder:text-[#6FAAB2]'
 
 function formatNumber(value: number) {
   return new Intl.NumberFormat('en-US').format(value)
 }
 
+function getMethodIcon(gatewayCode: string) {
+  if (gatewayCode === 'ONLINE_DEBIT') {
+    return Landmark
+  }
+
+  if (gatewayCode === 'E_WALLET') {
+    return CreditCard
+  }
+
+  return CircleDollarSign
+}
+
 function MobileTopup() {
   const { t } = useTranslation()
-  const depositWithdrawConfigQuery = useDepositWithdrawConfig()
+  const vm = useTopupVm()
-  const tierListQuery = useDepositTierList()
-  const depositWithdrawConfig =
-    depositWithdrawConfigQuery.data ?? DEFAULT_WITHDRAW_CONFIG
-  const isLoading =
-    tierListQuery.isLoading || depositWithdrawConfigQuery.isLoading
-  const isError = tierListQuery.isError || depositWithdrawConfigQuery.isError
-  const tiers = tierListQuery.data ?? []
   const createDepositInFlightRef = useRef(false)
   const pendingPayWindowRef = useRef<Window | null>(null)
   const createDepositMutation = useMutation({
-    mutationFn: ({
+    mutationFn: (payload: DepositCreateRequestDto) => createDeposit(payload),
-      channelCode,
+  })
-      depositBank,
+
-      depositBankAccount,
+  const getPaymentMethodLabel = (method: (typeof vm.methods)[number]) =>
-      depositFromAddress,
+    method.name.trim() ||
-      paymentType,
+    t(`gameDesktop.topup.flow.paymentMethods.${method.gatewayCode}`, {
-      tierId,
+      defaultValue: t('gameDesktop.topup.flow.methodTitle'),
-    }: {
-      channelCode: string
-      depositBank?: string
-      depositBankAccount?: string
-      depositFromAddress?: string
-      paymentType: string
-      tierId: string
-    }) =>
-      createDeposit({
-        channel_code: channelCode,
-        deposit_bank: depositBank,
-        deposit_bank_account: depositBankAccount,
-        deposit_from_address: depositFromAddress,
-        idempotency_key: String(Date.now()),
-        payment_type: paymentType,
-        tier_id: tierId,
-      }),
     })
 
   const handleCreateDeposit = async (tier: DepositTierItem) => {
@@ -61,30 +64,9 @@ function MobileTopup() {
       return
     }
 
-    const channelCode =
+    const payload = vm.getCreateDepositPayload(tier)
-      tier.payChannelCode ??
-      tier.channels[0]?.code ??
-      (tier.currency
-        ? depositWithdrawConfig.deposit.defaultChannelByCurrency[tier.currency]
-        : undefined) ??
-      depositWithdrawConfig.defaultDepositChannelCode
-    const selectedPaymentMethod =
-      depositWithdrawConfig.deposit.methods.find(
-        (method) => method.currencyCode === tier.currency,
-      ) ?? depositWithdrawConfig.deposit.methods[0]
-    const paymentType = selectedPaymentMethod?.code ?? ''
-    const depositBank = selectedPaymentMethod?.requiresBank
-      ? depositWithdrawConfig.deposit.banks.find(
-          (bank) => bank.currencyCode === tier.currency,
-        )?.code
-      : undefined
 
-    if (!channelCode) {
+    if (!payload) {
-      notify.error(t('commonUi.toast.configError'))
-      return
-    }
-
-    if (!paymentType) {
       notify.error(t('commonUi.toast.configError'))
       return
     }
@@ -102,12 +84,7 @@ function MobileTopup() {
     pendingPayWindowRef.current = payWindow
 
     try {
-      const result = await createDepositMutation.mutateAsync({
+      const result = await createDepositMutation.mutateAsync(payload)
-        channelCode,
-        depositBank,
-        paymentType,
-        tierId: tier.id,
-      })
       const payUrl = result.pay_url.trim()
 
       if (!payUrl) {
@@ -139,31 +116,205 @@ function MobileTopup() {
       <div
         className={cn(
           PANEL_CLASS,
-          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden px-design-10 py-design-10',
+          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden p-design-8',
         )}
       >
-        <div className="mb-design-8 flex items-center border-b border-[rgba(89,209,223,0.2)] pb-design-8">
+        {vm.isLoading ? (
-          <div className="text-design-16 font-semibold text-[#9AF5FB]">
-            {t('gameDesktop.topup.tier.title')}
-          </div>
-        </div>
-
-        {isLoading ? (
           <DataLoadingIndicator
             label={t('gameDesktop.topup.tier.loading')}
             className="h-full min-h-0 rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
           />
-        ) : isError ? (
+        ) : vm.isError ? (
           <div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] px-design-12 text-center text-design-14 text-[#F4A9AE]">
             {t('gameDesktop.topup.tier.failed')}
           </div>
-        ) : tiers.length === 0 ? (
+        ) : (
-          <div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)] px-design-12 text-center text-design-14 text-[#8FDDE6]">
+          <div className="flex h-full min-h-0 flex-col gap-design-7">
+            <div className={FILTER_BAR_CLASS}>
+              <div className="grid grid-cols-2 gap-design-6">
+                <div className="col-span-2 min-w-0">
+                  <label
+                    htmlFor="mobile-topup-channel"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CreditCard className="h-design-10 w-design-10" />
+                    <span>{t('gameDesktop.topup.flow.channelTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedPayChannelCode || undefined}
+                    onValueChange={vm.setSelectedPayChannelCode}
+                    disabled={vm.payChannels.length === 0}
+                  >
+                    <SelectTrigger
+                      id="mobile-topup-channel"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.channelTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-design-200">
+                      {vm.payChannels.map((channel) => (
+                        <SelectItem
+                          key={channel.code}
+                          value={channel.code}
+                          className="py-design-6 text-design-10"
+                        >
+                          {channel.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="min-w-0">
+                  <label
+                    htmlFor="mobile-topup-currency"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CircleDollarSign className="h-design-10 w-design-10" />
+                    <span>{t('gameDesktop.topup.flow.currencyTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedCurrencyCode || undefined}
+                    onValueChange={vm.setSelectedCurrencyCode}
+                    disabled={
+                      !vm.selectedPayChannel ||
+                      vm.selectedPayChannel.currencyCodes.length === 0
+                    }
+                  >
+                    <SelectTrigger
+                      id="mobile-topup-currency"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.currencyTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {vm.selectedPayChannel?.currencyCodes.map(
+                        (currencyCode) => (
+                          <SelectItem
+                            key={currencyCode}
+                            value={currencyCode}
+                            className="py-design-6 text-design-10"
+                          >
+                            {currencyCode}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="min-w-0">
+                  <label
+                    htmlFor="mobile-topup-method"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <CreditCard className="h-design-10 w-design-10" />
+                    <span>{t('gameDesktop.topup.flow.methodTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedPaymentMethodCode || undefined}
+                    onValueChange={vm.setSelectedPaymentMethodCode}
+                    disabled={vm.methods.length === 0}
+                  >
+                    <SelectTrigger
+                      id="mobile-topup-method"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t('gameDesktop.topup.flow.methodTitle')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {vm.methods.map((method) => {
+                        const MethodIcon = getMethodIcon(method.gatewayCode)
+
+                        return (
+                          <SelectItem
+                            key={method.code}
+                            value={method.code}
+                            className="py-design-6 text-design-10"
+                          >
+                            <span className="flex items-center gap-design-5">
+                              <MethodIcon className="h-design-10 w-design-10" />
+                              <span>{getPaymentMethodLabel(method)}</span>
+                            </span>
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="col-span-2 min-w-0">
+                  <label
+                    htmlFor="mobile-topup-bank"
+                    className={FIELD_LABEL_CLASS}
+                  >
+                    <Landmark className="h-design-10 w-design-10" />
+                    <span>{t('gameDesktop.topup.flow.bankTitle')}</span>
+                  </label>
+                  <Select
+                    value={vm.selectedBankCode || undefined}
+                    onValueChange={vm.setSelectedBankCode}
+                    disabled={vm.banks.length === 0}
+                  >
+                    <SelectTrigger
+                      id="mobile-topup-bank"
+                      className={SELECT_TRIGGER_CLASS}
+                    >
+                      <SelectValue
+                        placeholder={t(
+                          vm.banks.length === 0
+                            ? 'gameDesktop.topup.flow.noBank'
+                            : 'gameDesktop.topup.flow.bankPlaceholder',
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-design-200">
+                      {vm.banks.map((bank) => (
+                        <SelectItem
+                          key={bank.code}
+                          value={bank.code}
+                          className="py-design-6 text-design-10"
+                        >
+                          {bank.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex min-h-0 flex-1 flex-col rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.13)] bg-[rgba(2,13,23,0.42)] p-design-7">
+              <div className="mb-design-6 flex shrink-0 items-center justify-between gap-design-6">
+                <div className="min-w-0">
+                  <div className="text-design-12 font-semibold text-[#E8FDFF]">
+                    {t('gameDesktop.topup.tier.title')}
+                  </div>
+                  <div className="mt-design-1 truncate text-design-9 text-[#70AEB8]">
+                    {vm.selectedPayChannel?.name}
+                    {vm.selectedCurrencyCode
+                      ? ` / ${vm.selectedCurrencyCode}`
+                      : ''}
+                  </div>
+                </div>
+                <div className="rounded-full border border-[rgba(126,234,244,0.18)] bg-[rgba(4,25,38,0.72)] px-design-6 py-design-2 text-design-9 font-semibold text-[#9CE8F0]">
+                  {vm.filteredTiers.length}
+                </div>
+              </div>
+
+              {vm.filteredTiers.length === 0 ? (
+                <div className="flex min-h-0 flex-1 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.16)] bg-[rgba(6,24,35,0.44)] px-design-12 text-center text-design-14 text-[#8FDDE6]">
                   {t('gameDesktop.topup.tier.empty')}
                 </div>
               ) : (
-          <div className="grid min-h-0 min-w-0 grid-cols-2 gap-design-8 overflow-y-auto pr-design-1">
+                <div className="grid min-h-0 min-w-0 grid-cols-2 content-start gap-design-7 overflow-y-auto pr-design-1">
-            {tiers.map((tier) => (
+                  {vm.filteredTiers.map((tier) => (
                     <button
                       key={tier.id}
                       type="button"
@@ -171,59 +322,45 @@ function MobileTopup() {
                         void handleCreateDeposit(tier)
                       }}
                       className={cn(
-                  'relative min-h-design-126 overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] px-design-8 py-design-8 text-left shadow-[0_0_calc(var(--design-unit)*8)_rgba(88,225,238,0.08)] transition-[border-color,box-shadow,filter] duration-150',
+                        'relative min-h-design-118 cursor-pointer overflow-hidden rounded-[calc(var(--design-unit)*6)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(8,36,50,0.88),rgba(3,18,29,0.96))] px-design-8 py-design-8 text-left transition-[border-color,background-color,filter] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7CE3E8]/50',
                         createDepositMutation.isPending
                           ? 'cursor-wait opacity-80'
-                    : 'cursor-pointer hover:border-[rgba(170,247,255,0.62)] hover:brightness-110 active:brightness-90',
+                          : 'hover:border-[rgba(255,226,41,0.5)] active:brightness-90',
                       )}
                     >
-                <div className="absolute right-design-6 top-design-6 max-w-design-48 truncate rounded-full border border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] px-design-5 py-[2px] text-design-8 leading-none text-[#7CDDE7]">
+                      <div className="flex items-start justify-between gap-design-6">
-                  {tier.currency ?? 'FIAT'}
+                        <div className="min-w-0">
-                </div>
+                          <div className="truncate text-design-10 uppercase tracking-[0.04em] text-[#65B2BA]">
-
-                <div className="pr-design-46 text-design-10 uppercase leading-tight tracking-[0.04em] text-[#63AEB6]">
                             {tier.title}
                           </div>
-
+                          <div className="pt-design-6 text-design-20 font-semibold leading-none text-[#FFE229]">
-                <div className="pt-design-5 text-design-18 font-semibold leading-none text-[#FFE229]">
                             {formatNumber(tier.payAmount)}
                           </div>
-                <div className="pt-design-3 text-design-10 text-[#9FDCE3]">
+                        </div>
-                  {t('gameDesktop.topup.tier.coins')}:{' '}
+                        <div className="shrink-0 rounded-full border border-[rgba(121,219,229,0.24)] bg-[rgba(10,39,52,0.72)] px-design-5 py-[2px] text-design-8 leading-none text-[#7CDDE7]">
-                  {formatNumber(tier.totalAmount)}
+                          {tier.currency ?? 'FIAT'}
+                        </div>
                       </div>
 
-                <div className="mt-design-7 rounded-[calc(var(--design-unit)*5)] border border-[rgba(89,209,223,0.18)] bg-[rgba(4,19,28,0.58)] px-design-6 py-design-5">
+                      <div className="mt-design-7 rounded-[calc(var(--design-unit)*5)] bg-[rgba(255,226,41,0.06)] px-design-6 py-design-5">
-                  <div className="flex items-center justify-between gap-design-6 text-design-10">
+                        <div className="flex items-center justify-between gap-design-5 text-design-9">
-                    <span className="text-[#7CE3E8]">
+                          <span className="text-[#74B8C0]">
                             {t('gameDesktop.topup.tier.bonus')}
                           </span>
-                    <span className="text-[#FFF1C9]">
+                          <span className="font-semibold text-[#FFF1C9]">
                             {formatNumber(tier.bonusAmount)}
                           </span>
                         </div>
-                  <div className="mt-design-3 flex items-center justify-between gap-design-6 text-design-10">
-                    <span className="text-[#7CE3E8]">Channels</span>
-                    <span className="line-clamp-1 text-right text-[#6DFF83]">
-                      {tier.channels.length > 0
-                        ? tier.channels
-                            .map((channel) => channel.name)
-                            .join(', ')
-                        : '--'}
-                    </span>
                       </div>
-                </div>
-                {tier.desc ? (
-                  <div className="mt-design-5 line-clamp-2 text-design-9 leading-[1.25] text-[#6DAAB0]">
-                    {tier.desc}
-                  </div>
-                ) : null}
                     </button>
                   ))}
                 </div>
               )}
             </div>
           </div>
+        )}
+      </div>
+    </div>
   )
 }
 

src/hooks/use-topup-vm.ts

@@ -1,3 +1,192 @@
-export function useTopupVm() {
+import { useCallback, useEffect, useMemo, useState } from 'react'
-  return {}
+import { DEFAULT_WITHDRAW_CONFIG } from '@/constants'
+import { useDepositTierList } from '@/hooks/use-deposit-tier-list'
+import { useDepositWithdrawConfig } from '@/hooks/use-deposit-withdraw-config'
+import type {
+  DepositCreateRequestDto,
+  DepositTierItem,
+  DepositWithdrawConfig,
+  FinancePayChannel,
+} from '@/type'
+
+function getTierChannelCode(tier: DepositTierItem) {
+  return tier.channelCode ?? tier.channels[0]?.code ?? tier.payChannelCode ?? ''
+}
+
+function getInitialChannelCode(config: DepositWithdrawConfig) {
+  return (
+    config.deposit.payChannels[0]?.code ??
+    config.deposit.defaultChannelCode ??
+    config.defaultDepositChannelCode ??
+    ''
+  )
+}
+
+function getChannelCurrencyCodes(channel: FinancePayChannel | null) {
+  return channel?.currencyCodes ?? []
+}
+
+export function useTopupVm() {
+  const depositWithdrawConfigQuery = useDepositWithdrawConfig()
+  const tierListQuery = useDepositTierList()
+  const config = depositWithdrawConfigQuery.data ?? DEFAULT_WITHDRAW_CONFIG
+  const payChannels = useMemo(
+    () =>
+      [...config.deposit.payChannels]
+        .filter((channel) => channel.status === 1)
+        .sort((left, right) => left.sort - right.sort),
+    [config.deposit.payChannels],
+  )
+  const [selectedPayChannelCode, setSelectedPayChannelCode] = useState(() =>
+    getInitialChannelCode(config),
+  )
+  const selectedPayChannel = useMemo(
+    () =>
+      payChannels.find((channel) => channel.code === selectedPayChannelCode) ??
+      payChannels[0] ??
+      null,
+    [payChannels, selectedPayChannelCode],
+  )
+  const currencyCodes = useMemo(
+    () => getChannelCurrencyCodes(selectedPayChannel),
+    [selectedPayChannel],
+  )
+  const [selectedCurrencyCode, setSelectedCurrencyCode] = useState(
+    () => currencyCodes[0] ?? '',
+  )
+  const methods = useMemo(
+    () =>
+      config.deposit.methods.filter(
+        (method) => method.currencyCode === selectedCurrencyCode,
+      ),
+    [config.deposit.methods, selectedCurrencyCode],
+  )
+  const [selectedPaymentMethodCode, setSelectedPaymentMethodCode] = useState(
+    () => methods[0]?.code ?? '',
+  )
+  const selectedPaymentMethod = useMemo(
+    () =>
+      methods.find((method) => method.code === selectedPaymentMethodCode) ??
+      methods[0] ??
+      null,
+    [methods, selectedPaymentMethodCode],
+  )
+  const banks = useMemo(
+    () =>
+      (selectedPayChannel?.depositBanks ?? []).filter(
+        (bank) => bank.currencyCode === selectedCurrencyCode,
+      ),
+    [selectedCurrencyCode, selectedPayChannel?.depositBanks],
+  )
+  const [selectedBankCode, setSelectedBankCode] = useState(
+    () => banks[0]?.code ?? '',
+  )
+  const selectedBank = useMemo(
+    () =>
+      banks.find((bank) => bank.code === selectedBankCode) ?? banks[0] ?? null,
+    [banks, selectedBankCode],
+  )
+  const tiers = tierListQuery.data ?? []
+  const filteredTiers = useMemo(
+    () =>
+      tiers.filter((tier) => {
+        const tierChannelCode = getTierChannelCode(tier)
+        const matchesChannel =
+          selectedPayChannel === null ||
+          tierChannelCode === selectedPayChannel.code
+        const matchesCurrency =
+          !selectedCurrencyCode || tier.currency === selectedCurrencyCode
+
+        return matchesChannel && matchesCurrency
+      }),
+    [selectedCurrencyCode, selectedPayChannel, tiers],
+  )
+
+  useEffect(() => {
+    const nextPayChannelCode = getInitialChannelCode(config)
+
+    if (
+      selectedPayChannelCode &&
+      payChannels.some((channel) => channel.code === selectedPayChannelCode)
+    ) {
+      return
+    }
+
+    setSelectedPayChannelCode(nextPayChannelCode)
+  }, [config, payChannels, selectedPayChannelCode])
+
+  useEffect(() => {
+    const nextCurrencyCode = currencyCodes[0] ?? ''
+
+    if (selectedCurrencyCode && currencyCodes.includes(selectedCurrencyCode)) {
+      return
+    }
+
+    setSelectedCurrencyCode(nextCurrencyCode)
+  }, [currencyCodes, selectedCurrencyCode])
+
+  useEffect(() => {
+    const nextPaymentMethodCode = methods[0]?.code ?? ''
+
+    if (
+      selectedPaymentMethodCode &&
+      methods.some((method) => method.code === selectedPaymentMethodCode)
+    ) {
+      return
+    }
+
+    setSelectedPaymentMethodCode(nextPaymentMethodCode)
+  }, [methods, selectedPaymentMethodCode])
+
+  useEffect(() => {
+    const nextBankCode = banks[0]?.code ?? ''
+
+    if (
+      selectedBankCode &&
+      banks.some((bank) => bank.code === selectedBankCode)
+    ) {
+      return
+    }
+
+    setSelectedBankCode(nextBankCode)
+  }, [banks, selectedBankCode])
+
+  const getCreateDepositPayload = useCallback(
+    (tier: DepositTierItem): DepositCreateRequestDto | null => {
+      if (!selectedPayChannel || !selectedPaymentMethod) {
+        return null
+      }
+
+      return {
+        channel_code: selectedPayChannel.code,
+        deposit_bank: selectedBank?.code,
+        idempotency_key: String(Date.now()),
+        payment_type: selectedPaymentMethod.gatewayCode,
+        tier_id: tier.id,
+      }
+    },
+    [selectedBank?.code, selectedPayChannel, selectedPaymentMethod],
+  )
+
+  return {
+    banks,
+    config,
+    filteredTiers,
+    getCreateDepositPayload,
+    isError: tierListQuery.isError || depositWithdrawConfigQuery.isError,
+    isLoading: tierListQuery.isLoading || depositWithdrawConfigQuery.isLoading,
+    methods,
+    payChannels,
+    selectedBank,
+    selectedBankCode,
+    selectedCurrencyCode,
+    selectedPayChannel,
+    selectedPayChannelCode,
+    selectedPaymentMethod,
+    selectedPaymentMethodCode,
+    setSelectedBankCode,
+    setSelectedCurrencyCode,
+    setSelectedPayChannelCode,
+    setSelectedPaymentMethodCode,
+  }
 }

src/hooks/use-withdraw-vm.ts

@@ -246,11 +246,7 @@ export function useWithdrawVm() {
       exchangeRateLabel: t('gameDesktop.withdraw.preview.exchangeRate', {
         currency: selectedCurrency.code,
       }),
-      exchangeRateValue: t('gameDesktop.withdraw.preview.exchangeRateValue', {
+      exchangeRateValue: `1:${formatNumber(locale, selectedRate)}`,
-        coins: formatNumber(locale, selectedRate),
-        currency: selectedCurrency.code,
-        platformCoinLabel: config.platformCoinLabel,
-      }),
       convertibleLabel: t('gameDesktop.withdraw.preview.convertible', {
         currency: selectedCurrency.code,
       }),
@@ -261,7 +257,6 @@ export function useWithdrawVm() {
     }),
     [
       amount,
-      config.platformCoinLabel,
       locale,
       selectedCurrency.code,
       selectedCurrency.label,

src/locales/en-US.ts

@@ -581,6 +581,19 @@ export default {
       channelLabel: TEXT_PAYMENT_CHANNEL,
       rateHint:
         'Exchange rates are for reference only. The final amount follows the top-up-time rate.',
+      flow: {
+        channelTitle: 'Select Payment Channel',
+        currencyTitle: 'Currency',
+        methodTitle: 'Top-up Method',
+        bankTitle: 'Bank',
+        bankPlaceholder: 'Select a bank',
+        noBank: 'No banks available',
+        paymentMethods: {
+          QR: 'QR Code',
+          ONLINE_DEBIT: 'Online Banking',
+          E_WALLET: 'E-wallet',
+        },
+      },
       tier: {
         bonus: 'Bonus',
         coins: 'Credited Coins',

src/locales/id-ID.ts

@@ -581,6 +581,19 @@ export default {
       channelLabel: TEXT_PAYMENT_CHANNEL,
       rateHint:
         'Kurs hanya sebagai referensi. Jumlah akhir mengikuti kurs saat isi ulang.',
+      flow: {
+        channelTitle: 'Pilih Saluran Pembayaran',
+        currencyTitle: 'Mata Uang',
+        methodTitle: 'Metode Isi Ulang',
+        bankTitle: 'Bank',
+        bankPlaceholder: 'Pilih bank',
+        noBank: 'Tidak ada bank tersedia',
+        paymentMethods: {
+          QR: 'Kode QR',
+          ONLINE_DEBIT: 'Perbankan Online',
+          E_WALLET: 'Dompet Elektronik',
+        },
+      },
       tier: {
         bonus: 'Bonus',
         coins: 'Koin Masuk',

src/locales/ms-MY.ts

@@ -586,6 +586,19 @@ export default {
       channelLabel: TEXT_PAYMENT_CHANNEL,
       rateHint:
         'Kadar pertukaran hanya untuk rujukan. Jumlah akhir tertakluk kepada kadar semasa tambah nilai.',
+      flow: {
+        channelTitle: 'Pilih Saluran Pembayaran',
+        currencyTitle: 'Mata Wang',
+        methodTitle: 'Kaedah Tambah Nilai',
+        bankTitle: 'Bank',
+        bankPlaceholder: 'Pilih bank',
+        noBank: 'Tiada bank tersedia',
+        paymentMethods: {
+          QR: 'Kod QR',
+          ONLINE_DEBIT: 'Perbankan Dalam Talian',
+          E_WALLET: 'Dompet Elektronik',
+        },
+      },
       tier: {
         bonus: 'Bonus',
         coins: 'Syiling Diterima',

src/locales/zh-CN.ts

@@ -565,6 +565,19 @@ export default {
       currencyLabel: TEXT_CURRENCY_TYPE,
       channelLabel: TEXT_PAYMENT_CHANNEL,
       rateHint: '汇率为参考价格，实际以充值时为准。',
+      flow: {
+        channelTitle: '请选择支付渠道',
+        currencyTitle: '选择币种',
+        methodTitle: '充值方式',
+        bankTitle: '选择银行',
+        bankPlaceholder: '请选择银行',
+        noBank: '暂无可选银行',
+        paymentMethods: {
+          QR: '扫码',
+          ONLINE_DEBIT: '网银',
+          E_WALLET: '电子钱包',
+        },
+      },
       tier: {
         bonus: '赠送',
         coins: '到账钻石',

src/type/api.type.ts

@@ -26,6 +26,8 @@ export interface FinanceRateConfigDto {
 
 export interface FinancePayChannelDto {
   code: string
+  currency_codes?: string[]
+  deposit_banks?: FinanceWithdrawBankDto[]
   name: string
   sort: number
   status?: number
@@ -68,8 +70,10 @@ export interface FinanceDepositFieldsDto {
 export interface FinanceDepositConfigDto {
   banks?: FinanceWithdrawBankDto[]
   default_channel_by_currency?: Record<string, string>
+  default_channel_code?: string
   fields?: FinanceDepositFieldsDto
   methods?: FinanceDepositMethodDto[]
+  pay_channels?: FinancePayChannelDto[]
 }
 
 export interface FinanceWithdrawFieldsDto {
@@ -110,6 +114,7 @@ export interface DepositTierItemDto {
   amount?: number | string
   bonus_amount?: number | string
   bonus_coins?: number | string
+  channel_code?: string
   channels?: Array<{ code?: string; name?: string; sort?: number | string }>
   coins?: number | string
   currency?: string
@@ -143,6 +148,8 @@ export interface FinanceRateConfig {
 
 export interface FinancePayChannel {
   code: string
+  currencyCodes: string[]
+  depositBanks: FinanceWithdrawBank[]
   name: string
   sort: number
   status: number
@@ -182,9 +189,11 @@ export interface FinanceDepositFields {
 
 export interface FinanceDepositConfig {
   banks: FinanceWithdrawBank[]
+  defaultChannelCode: string
   defaultChannelByCurrency: Record<string, string>
   fields: FinanceDepositFields
   methods: FinanceDepositMethod[]
+  payChannels: FinancePayChannel[]
 }
 
 export interface FinanceWithdrawFields {
@@ -224,6 +233,7 @@ export interface DepositWithdrawConfig {
 export interface DepositTierItem {
   amount: number
   bonusAmount: number
+  channelCode: string | null
   channels: Array<{ code: string; name: string; sort: number }>
   coins: number
   currency: string | null