refactor(game): 重构项目结构,优化链路, 移动端适配

- 移除 useGameBoardVm 数据层实施说明文档
- 移除核心玩法与前端规则摘要文档
- 移除游戏模块数据与界面分层第一阶段实施稿文档
- 清理与数据层重构相关的技术方案说明
- 删除关于 PC 和 Mobile 界面分离的设计规划
- 移除 view-model hooks 架构设计相关内容

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

@@ -0,0 +1,640 @@
+import { Minus, Plus } from 'lucide-react'
+import { type ReactNode, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
+import lengthGreenBtn from '@/assets/system/length-green-btn.webp'
+import { SmartBackground } from '@/components/smart-background.tsx'
+import { Input } from '@/components/ui/input.tsx'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.tsx'
+import { useWithdrawSubmit } from '@/hooks/use-withdraw-submit'
+import { useWithdrawVm } from '@/hooks/use-withdraw-vm'
+import { cn } from '@/lib/utils'
+import { useModalStore } from '@/store'
+
+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)*10)_rgba(88,225,238,0.08)]'
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat('en-US').format(value)
+}
+
+function getPaymentGlyph(code: string, name: string) {
+  if (code.toLowerCase().includes('alipay')) {
+    return '支'
+  }
+
+  return name.trim().slice(0, 1).toUpperCase() || code.slice(0, 1).toUpperCase()
+}
+
+function WithdrawField({
+  label,
+  children,
+}: {
+  label: string
+  children: ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-design-3">
+      <div className="text-design-10 font-medium uppercase leading-none text-[#6FD4DA]">
+        {label}
+      </div>
+      <div className="min-w-0">{children}</div>
+    </div>
+  )
+}
+
+function AmountShell({
+  amount,
+  availableBalanceText,
+  onAmountChange,
+  onMinus,
+  onPlus,
+}: {
+  amount: number
+  availableBalanceText: string
+  onAmountChange: (value: number) => void
+  onMinus: () => void
+  onPlus: () => void
+}) {
+  function handleInputChange(value: string) {
+    const nextValue = Number(value.replace(/[^\d]/g, ''))
+
+    onAmountChange(Number.isFinite(nextValue) ? nextValue : 0)
+  }
+
+  return (
+    <div className="flex flex-col gap-design-2">
+      <div className="flex h-design-34 items-center gap-design-6 rounded-[calc(var(--design-unit)*5)] border border-[rgba(103,227,239,0.32)] bg-[linear-gradient(180deg,rgba(14,64,74,0.82),rgba(8,36,47,0.78))] px-design-6 shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(93,239,255,0.08)]">
+        <button
+          type="button"
+          onClick={onMinus}
+          className="flex h-design-24 w-design-24 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*4)] border border-[rgba(109,232,244,0.44)] bg-[rgba(37,115,123,0.32)] text-[#E1FEFF] transition hover:border-[rgba(170,247,255,0.82)] hover:bg-[rgba(66,146,151,0.35)]"
+        >
+          <Minus className="h-design-12 w-design-12" />
+        </button>
+
+        <input
+          value={amount === 0 ? '' : String(amount)}
+          onChange={(event) => handleInputChange(event.target.value)}
+          inputMode="numeric"
+          pattern="[0-9]*"
+          className="h-full min-w-0 flex-1 bg-transparent text-center text-design-16 font-medium text-[#A1EBF3] outline-none placeholder:text-[rgba(109,170,176,0.55)]"
+          placeholder="0"
+        />
+
+        <button
+          type="button"
+          onClick={onPlus}
+          className="flex h-design-24 w-design-24 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*4)] border border-[rgba(109,232,244,0.44)] bg-[rgba(37,115,123,0.32)] text-[#E1FEFF] transition hover:border-[rgba(170,247,255,0.82)] hover:bg-[rgba(66,146,151,0.35)]"
+        >
+          <Plus className="h-design-12 w-design-12" />
+        </button>
+      </div>
+
+      <div className="pl-design-2 text-design-10 text-[#6DAAB0]">
+        {availableBalanceText}
+      </div>
+    </div>
+  )
+}
+
+function QuickAmountCard({
+  amount,
+  preview,
+  active,
+  onClick,
+}: {
+  amount: number
+  preview: string
+  active: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'group relative flex h-design-42 min-w-0 w-full cursor-pointer flex-col items-start justify-center overflow-hidden rounded-[calc(var(--design-unit)*6)] border px-design-6 text-left transition-[border-color,background-color,box-shadow,filter] duration-150',
+        active
+          ? 'border-[#D18A43] bg-[linear-gradient(180deg,rgba(88,54,28,0.96),rgba(56,33,18,0.92))] shadow-[0_0_calc(var(--design-unit)*10)_rgba(209,138,67,0.2),inset_0_0_calc(var(--design-unit)*10)_rgba(255,217,120,0.08)]'
+          : 'border-[rgba(103,227,239,0.26)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] hover:border-[rgba(170,247,255,0.62)] hover:brightness-110',
+      )}
+    >
+      <span
+        className={cn(
+          'absolute right-design-6 top-design-6 h-design-5 w-design-5 rounded-full transition',
+          active
+            ? 'bg-[#FFD15E] shadow-[0_0_8px_rgba(255,209,94,0.8)]'
+            : 'bg-[rgba(122,220,230,0.26)]',
+        )}
+      />
+      <div className="max-w-full truncate text-design-13 font-semibold leading-none text-[#FFE229]">
+        {amount}
+      </div>
+      <div
+        className={cn(
+          'max-w-full truncate pt-design-3 text-design-10 leading-none',
+          active ? 'text-[#FFDFA4]' : 'text-[#63AEB6]',
+        )}
+      >
+        {preview}
+      </div>
+    </button>
+  )
+}
+
+function PaymentCard({
+  active,
+  label,
+  glyph,
+  onClick,
+}: {
+  active: boolean
+  label: string
+  glyph: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'group relative flex h-design-42 min-w-0 cursor-pointer items-center gap-design-6 rounded-[calc(var(--design-unit)*6)] border px-design-6 text-left transition-[border-color,background-color,box-shadow,filter] duration-150',
+        active
+          ? 'border-[#D18A43] bg-[linear-gradient(180deg,rgba(88,54,28,0.96),rgba(56,33,18,0.92))] shadow-[0_0_calc(var(--design-unit)*10)_rgba(209,138,67,0.18),inset_0_0_calc(var(--design-unit)*10)_rgba(255,217,120,0.08)]'
+          : 'border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] hover:border-[rgba(170,247,255,0.62)] hover:brightness-110',
+      )}
+    >
+      <span
+        className={cn(
+          'absolute right-design-6 top-design-6 h-design-5 w-design-5 rounded-full transition',
+          active
+            ? 'bg-[#FFD15E] shadow-[0_0_8px_rgba(255,209,94,0.8)]'
+            : 'bg-[rgba(122,220,230,0.26)]',
+        )}
+      />
+      <div
+        className={cn(
+          'flex h-design-26 w-design-26 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*5)] border text-design-12 font-semibold leading-none transition-colors',
+          active
+            ? 'border-[rgba(255,218,132,0.45)] bg-[rgba(255,211,113,0.16)] text-[#FFD97A]'
+            : 'border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] text-[#8DE4EA]',
+        )}
+      >
+        {glyph}
+      </div>
+      <div className="min-w-0 flex-1 pr-design-7">
+        <div
+          className={cn(
+            'truncate !text-design-12 font-medium leading-none',
+            active ? 'text-[#FFF1C9]' : 'text-[#D7FBFF]',
+          )}
+        >
+          {label}
+        </div>
+        <div
+          className={cn(
+            'pt-design-2 !text-design-10 uppercase leading-none tracking-[0.03em]',
+            active ? 'text-[#FFDFA4]' : 'text-[#63AEB6]',
+          )}
+        >
+          Channel
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function InputShell({
+  value,
+  onChange,
+  placeholder,
+  error,
+  errorMessage,
+  uppercase = false,
+  type = 'text',
+}: {
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  error?: boolean
+  errorMessage?: string
+  uppercase?: boolean
+  type?: 'text' | 'email' | 'tel'
+}) {
+  return (
+    <div className="flex w-full flex-col gap-design-3">
+      <Input
+        type={type}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        className={cn(
+          'h-design-30 rounded-[calc(var(--design-unit)*5)] border px-design-8 text-design-12',
+          uppercase && 'uppercase',
+          error
+            ? 'border-[#B93F44] bg-[rgba(34,13,16,0.78)] text-[#FCEEEE]'
+            : 'border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(10,47,57,0.84),rgba(5,23,32,0.92))] text-[#ACF1F6]',
+        )}
+      />
+      {error && errorMessage ? (
+        <div className="pl-design-2 text-design-10 text-[#F44F4F]">
+          {errorMessage}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function PreviewRow({
+  label,
+  value,
+  highlight = false,
+}: {
+  label: string
+  value: ReactNode
+  highlight?: boolean
+}) {
+  return (
+    <div className="flex border-b border-[rgba(89,209,223,0.2)] last:border-b-0">
+      <div className="flex w-[46%] shrink-0 items-center border-r border-[rgba(89,209,223,0.2)] px-design-6 py-design-7 text-design-10 font-medium uppercase leading-[1.15] text-[#7CE3E8]">
+        {label}
+      </div>
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center justify-end px-design-6 py-design-7 text-right text-design-10 text-[#E6FFFF]',
+          highlight && 'text-design-11 font-semibold text-[#6DFF83]',
+        )}
+      >
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function MobileWithdraw() {
+  const { t } = useTranslation()
+  const vm = useWithdrawVm()
+  const withdrawSubmitMutation = useWithdrawSubmit()
+  const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const [hasSubmitted, setHasSubmitted] = useState(false)
+  const [activeQuickAmountId, setActiveQuickAmountId] = useState<string | null>(
+    null,
+  )
+
+  function handleAmountChange(nextAmount: number) {
+    vm.setAmount(Math.max(0, nextAmount))
+    setActiveQuickAmountId(null)
+  }
+
+  function handleQuickAmountSelect(optionId: string, amount: number) {
+    vm.setAmount(Math.max(0, amount))
+    setActiveQuickAmountId(optionId)
+  }
+
+  function resetWithdrawFormState() {
+    setHasSubmitted(false)
+    setActiveQuickAmountId(null)
+    vm.resetForm()
+  }
+
+  function handleCloseWithdraw() {
+    resetWithdrawFormState()
+    setModalOpen('desktopWithdrawTopup', false)
+  }
+
+  function handleConfirmWithdraw() {
+    if (withdrawSubmitMutation.isPending) {
+      return
+    }
+
+    setHasSubmitted(true)
+
+    if (
+      vm.amountRequiredError ||
+      vm.amountExceedsBalance ||
+      vm.holderNameError ||
+      vm.bankAccountError ||
+      vm.paymentChannelCodeError ||
+      vm.bankCodeError ||
+      vm.receiverEmailError ||
+      vm.receiverPhoneError
+    ) {
+      return
+    }
+
+    withdrawSubmitMutation.mutate(
+      {
+        bank_code: vm.bankCode,
+        channel_code: vm.paymentChannelCode,
+        idempotency_key: String(Date.now()),
+        receive_account: vm.bankAccount.trim(),
+        receiver_email: vm.receiverEmail.trim(),
+        receiver_mobile: vm.receiverPhone.trim(),
+        receiver_name: vm.holderName.trim(),
+        receive_type: 'bank',
+        withdraw_coin: vm.amount,
+      },
+      {
+        onSuccess: () => {
+          handleCloseWithdraw()
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 w-full px-design-6 pb-design-6 text-[#D9FFFF]">
+      <div
+        className={cn(
+          PANEL_CLASS,
+          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden',
+        )}
+      >
+        <div className="min-h-0 flex-1 overflow-y-auto px-design-8 py-design-7">
+          <div className="flex flex-col !gap-design-10">
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.diamondAmount')}
+            >
+              <AmountShell
+                amount={vm.amount}
+                availableBalanceText={t(
+                  'gameDesktop.withdraw.availableBalance',
+                  { amount: formatNumber(vm.availableBalance) },
+                )}
+                onAmountChange={handleAmountChange}
+                onMinus={() => handleAmountChange(vm.amount - 1)}
+                onPlus={() => handleAmountChange(vm.amount + 1)}
+              />
+              {hasSubmitted && vm.amountRequiredError ? (
+                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
+                  {t('gameDesktop.withdraw.errors.amountRequired')}
+                </div>
+              ) : null}
+              {hasSubmitted && vm.amountExceedsBalance ? (
+                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
+                  {t('gameDesktop.withdraw.errors.amountExceedsBalance')}
+                </div>
+              ) : null}
+            </WithdrawField>
+
+            <div className="grid min-w-0 grid-cols-3 gap-design-5">
+              {vm.quickAmounts.map((option) => (
+                <QuickAmountCard
+                  key={option.id}
+                  amount={option.diamonds}
+                  preview={option.preview}
+                  active={option.id === activeQuickAmountId}
+                  onClick={() =>
+                    handleQuickAmountSelect(option.id, option.diamonds)
+                  }
+                />
+              ))}
+            </div>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.currencyType')}
+            >
+              <Select
+                value={vm.currencyCode}
+                onValueChange={vm.setCurrencyCode}
+              >
+                <SelectTrigger
+                  className="h-design-30 w-full rounded-[calc(var(--design-unit)*5)] border-[rgba(103,227,239,0.3)] bg-[linear-gradient(180deg,rgba(12,61,72,0.82),rgba(6,28,39,0.9))] px-design-8 text-left !text-design-12 text-[#A5EDF4] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(94,237,255,0.08)] data-[size=default]:h-design-30 data-[placeholder]:text-[rgba(109,170,176,0.55)] [&_svg]:h-design-14 [&_svg]:w-design-14 [&_svg]:text-[#79DFEA]"
+                  aria-label={t('gameDesktop.withdraw.currencySelection')}
+                >
+                  <SelectValue
+                    placeholder={t('gameDesktop.withdraw.selectCurrency')}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {vm.config.currencies.map((option) => (
+                    <SelectItem key={option.code} value={option.code}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </WithdrawField>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.paymentChannel')}
+            >
+              <div className="flex w-full flex-col gap-design-3">
+                {vm.sortedPayChannels.length > 0 ? (
+                  <div className="grid grid-cols-2 gap-design-5">
+                    {vm.sortedPayChannels.map((channel) => (
+                      <PaymentCard
+                        key={channel.code}
+                        active={channel.code === vm.paymentChannelCode}
+                        label={channel.name}
+                        glyph={getPaymentGlyph(channel.code, channel.name)}
+                        onClick={() => vm.setPaymentChannelCode(channel.code)}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex min-h-design-38 items-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.45)] bg-[rgba(34,13,16,0.6)] px-design-8 text-design-10 text-[#F4B1B1]">
+                    {t('gameDesktop.withdraw.errors.paymentChannelUnavailable')}
+                  </div>
+                )}
+                {hasSubmitted && vm.paymentChannelCodeError ? (
+                  <div className="pl-design-2 text-design-10 text-[#F44F4F]">
+                    {t('gameDesktop.withdraw.errors.paymentChannelRequired')}
+                  </div>
+                ) : null}
+              </div>
+            </WithdrawField>
+
+            <WithdrawField label={t('gameDesktop.withdraw.fields.bankCode')}>
+              <div className="flex w-full flex-col gap-design-3">
+                <Select
+                  value={vm.bankCode}
+                  onValueChange={vm.setBankCode}
+                  disabled={vm.sortedBanks.length === 0}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      'h-design-30 w-full rounded-[calc(var(--design-unit)*5)] bg-[linear-gradient(180deg,rgba(12,61,72,0.82),rgba(6,28,39,0.9))] px-design-8 text-left !text-design-12 text-[#A5EDF4] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(94,237,255,0.08)] data-[size=default]:h-design-30 data-[placeholder]:text-[rgba(109,170,176,0.55)] [&_svg]:h-design-14 [&_svg]:w-design-14 [&_svg]:text-[#79DFEA]',
+                      hasSubmitted && vm.bankCodeError
+                        ? 'border-[#B93F44]'
+                        : 'border-[rgba(103,227,239,0.3)]',
+                    )}
+                    aria-label={t('gameDesktop.withdraw.fields.bankCode')}
+                  >
+                    <SelectValue
+                      placeholder={t(
+                        'gameDesktop.withdraw.placeholders.bankCode',
+                      )}
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {vm.sortedBanks.map((bank) => (
+                      <SelectItem key={bank.code} value={bank.code}>
+                        {bank.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {vm.sortedBanks.length === 0 ? (
+                  <div className="pl-design-2 text-design-10 text-[#F4B1B1]">
+                    {t('gameDesktop.withdraw.errors.bankCodeUnavailable')}
+                  </div>
+                ) : null}
+                {hasSubmitted && vm.bankCodeError ? (
+                  <div className="pl-design-2 text-design-10 text-[#F44F4F]">
+                    {t('gameDesktop.withdraw.errors.bankCodeRequired')}
+                  </div>
+                ) : null}
+              </div>
+            </WithdrawField>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.cardHolderName')}
+            >
+              <InputShell
+                value={vm.holderName}
+                onChange={vm.setHolderName}
+                placeholder={t(
+                  'gameDesktop.withdraw.placeholders.cardHolderName',
+                )}
+                error={hasSubmitted && vm.holderNameError}
+                errorMessage={t(
+                  'gameDesktop.withdraw.errors.cardHolderNameRequired',
+                )}
+              />
+            </WithdrawField>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.bankAccountNumber')}
+            >
+              <InputShell
+                value={vm.bankAccount}
+                onChange={vm.setBankAccount}
+                placeholder={t(
+                  'gameDesktop.withdraw.placeholders.bankAccountNumber',
+                )}
+                error={hasSubmitted && vm.bankAccountError}
+                errorMessage={t(
+                  'gameDesktop.withdraw.errors.bankAccountRequired',
+                )}
+              />
+            </WithdrawField>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.receiverEmail')}
+            >
+              <InputShell
+                value={vm.receiverEmail}
+                onChange={vm.setReceiverEmail}
+                placeholder={t(
+                  'gameDesktop.withdraw.placeholders.receiverEmail',
+                )}
+                type="email"
+                error={hasSubmitted && vm.receiverEmailError}
+                errorMessage={t(
+                  'gameDesktop.withdraw.errors.receiverEmailInvalid',
+                )}
+              />
+            </WithdrawField>
+
+            <WithdrawField
+              label={t('gameDesktop.withdraw.fields.receiverPhone')}
+            >
+              <InputShell
+                value={vm.receiverPhone}
+                onChange={vm.setReceiverPhone}
+                placeholder={t(
+                  'gameDesktop.withdraw.placeholders.receiverPhone',
+                )}
+                type="tel"
+                error={hasSubmitted && vm.receiverPhoneError}
+                errorMessage={t(
+                  'gameDesktop.withdraw.errors.receiverPhoneInvalid',
+                )}
+              />
+            </WithdrawField>
+
+            <div className="overflow-hidden rounded-[calc(var(--design-unit)*4)] border border-[rgba(89,209,223,0.22)] bg-[rgba(4,19,28,0.58)]">
+              <PreviewRow
+                label={t('gameDesktop.withdraw.preview.diamondAmount')}
+                value={formatNumber(vm.amount)}
+              />
+              <PreviewRow
+                label={vm.selectedCurrencyPreview.exchangeRateLabel}
+                value={vm.selectedCurrencyPreview.exchangeRateValue}
+              />
+              <PreviewRow
+                label={vm.selectedCurrencyPreview.convertibleLabel}
+                value={vm.selectedCurrencyPreview.convertibleValue}
+                highlight={true}
+              />
+              <PreviewRow
+                label={t(
+                  'gameDesktop.withdraw.preview.fixedExchangeDiamondAmount',
+                )}
+                value="0-0-0 0:0:0"
+              />
+            </div>
+
+            <div className="rounded-[calc(var(--design-unit)*4)] border border-[rgba(240,175,66,0.2)] bg-[rgba(110,77,26,0.24)] px-design-8 py-design-6 text-design-10 leading-[1.3] text-[#F0B44A]">
+              {vm.withdrawCopy.rateHint}
+            </div>
+
+            <div className="flex flex-col gap-design-3 px-design-1 text-design-10 uppercase leading-[1.3] text-[#7AD8E0]">
+              <div>
+                {vm.withdrawCopy.processingLabel}:{' '}
+                <span className="text-[#77FF76]">
+                  {vm.withdrawCopy.processingValue}
+                </span>
+              </div>
+              <div>
+                {vm.withdrawCopy.noticeLabel}:{' '}
+                <span className="text-red-700">{vm.withdrawCopy.feeNote}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center justify-between gap-design-6 border-t border-[rgba(89,209,223,0.22)] bg-[rgba(3,15,24,0.86)] px-design-8 py-design-5">
+          <SmartBackground
+            as="button"
+            type="button"
+            src={lengthGreenBtn}
+            size="100% 100%"
+            onClick={handleCloseWithdraw}
+            className="flex h-design-38 flex-1 cursor-pointer items-center justify-center pb-design-2 text-center !text-design-12 font-bold uppercase text-[#F0FFFF] transition hover:brightness-110 active:scale-[0.98]"
+          >
+            {t('gameDesktop.withdraw.cancel')}
+          </SmartBackground>
+          <SmartBackground
+            as="button"
+            type="button"
+            src={lengthBlueBtn}
+            size="100% 100%"
+            onClick={handleConfirmWithdraw}
+            disabled={withdrawSubmitMutation.isPending}
+            className={cn(
+              'flex h-design-38 flex-1 items-center justify-center whitespace-nowrap pb-design-2 text-center !text-design-12 font-bold uppercase leading-[1.05] text-[#F0FFFF] transition',
+              withdrawSubmitMutation.isPending
+                ? 'cursor-not-allowed opacity-70'
+                : 'cursor-pointer hover:brightness-110 active:scale-[0.98]',
+            )}
+          >
+            {withdrawSubmitMutation.isPending
+              ? t('commonUi.action.submitting')
+              : `${t('gameDesktop.withdraw.confirm')}`}
+          </SmartBackground>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MobileWithdraw