From 04709518c200d78f3e9fa402f9196a97e399c607 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Mon, 20 Jan 2025 18:32:05 +0800
Subject: [PATCH] fix: gasaccount empty status

---
 _raw/locales/en/messages.json                 |  5 +-
 .../GasAccount/components/WithdrawPopup.tsx   | 49 +++++++++++++++++--
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
index 7ea9b1067a6..05ee0a88c18 100644
--- a/_raw/locales/en/messages.json
+++ b/_raw/locales/en/messages.json
@@ -2347,9 +2347,12 @@
         "amount": "Amount",
         "to": "To",
         "selectChain": "Select Chain",
+        "selectAddr": "Select Address",
         "recipientAddress": "Recipient address",
         "destinationChain": "Destination chain",
-        "deductGasFees": "Received amount will deduct gas fees"
+        "deductGasFees": "Received amount will deduct gas fees",
+        "noEligibleAddr": "No eligible address for withdrawal",
+        "noEligibleChain": "No eligible chain for withdrawal"
       },
       "withdrawConfirmModal": {
         "title": "Transferred to your DeBank L2 Wallet",
diff --git a/src/ui/views/GasAccount/components/WithdrawPopup.tsx b/src/ui/views/GasAccount/components/WithdrawPopup.tsx
index 14d366b3f58..7786cf6a107 100644
--- a/src/ui/views/GasAccount/components/WithdrawPopup.tsx
+++ b/src/ui/views/GasAccount/components/WithdrawPopup.tsx
@@ -1,6 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Popup, Item, TokenWithChain, AddressViewer } from '@/ui/component';
+import {
+  Popup,
+  Item,
+  TokenWithChain,
+  AddressViewer,
+  Empty,
+} from '@/ui/component';
 import { Button, message, Skeleton, Tooltip } from 'antd';
 import { PopupProps } from '@/ui/component/Popup';
 import { noop, set } from 'lodash';
@@ -299,7 +305,7 @@ const Selector = ({
           </div>
         </div>
         <div className="overflow-y-auto flex-1 relative px-20">
-          {isSelectChain ? (
+          {!sortedList?.length ? null : isSelectChain ? (
             <FixedSizeList<RechargeChainItem[]>
               width={'100%'}
               height={328}
@@ -320,6 +326,18 @@ const Selector = ({
               {AddressRow}
             </FixedSizeList>
           )}
+          {!sortedList?.length && (
+            <Empty
+              className="mt-[75px]"
+              title={
+                <span className="text-13 text-r-neutral-foot text-center">
+                  {isSelectChain
+                    ? t('page.gasAccount.withdrawPopup.noEligibleChain')
+                    : t('page.gasAccount.withdrawPopup.noEligibleAddr')}
+                </span>
+              }
+            />
+          )}
         </div>
       </div>
     </Popup>
@@ -510,8 +528,12 @@ const WithdrawContent = ({
                   />
                 </div>
               </div>
-            ) : (
+            ) : !selectedAccount ? (
               <AddressRightAreaInItem account={selectedAccount} />
+            ) : (
+              <span className="text-15 font-medium text-r-neutral-title1">
+                {t('page.gasAccount.withdrawPopup.selectAddr')}
+              </span>
             )
           }
           hoverBorder={!loading}
@@ -527,8 +549,27 @@ const WithdrawContent = ({
           py={0}
           className="rounded-[6px] w-full h-[52px]"
           bgColor="var(--r-neutral-card2, #F2F4F7)"
+          hoverBorder={!loading}
+          right={loading ? () => null : undefined}
           left={
-            chainInfo ? (
+            loading ? (
+              <div
+                className={clsx('flex items-center gap-[6px] ', [
+                  'rounded-[2px]',
+                ])}
+              >
+                <Skeleton.Avatar
+                  className="rounded-[12px] w-[24px] h-[24px]"
+                  active
+                />
+                <div className="flex flex-col overflow-hidden gap-[6px]">
+                  <Skeleton.Input
+                    className="rounded w-[89px] h-[16px]"
+                    active
+                  />
+                </div>
+              </div>
+            ) : chainInfo ? (
               <div
                 className={clsx('flex items-center gap-[6px] ', [
                   'rounded-[2px]',