Merge remote-tracking branch 'origin/feat/gas-account' into tmp/20240830

RabbyHub · Sep 2, 2024 · c583873 · c583873
2 parents 61be1d8 + 283ddb3
commit c583873
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 45 deletions.
diff --git a/src/ui/views/GasAccount/components/GasAccountTxPopups.tsx b/src/ui/views/GasAccount/components/GasAccountTxPopups.tsx
@@ -7,6 +7,8 @@ import { noop } from 'lodash';
 import clsx from 'clsx';
 import PNGDepositTip from '@/ui/assets/gas-account/gas-account-deposit-tip.png';
 import { GasAccountBlueLogo } from './GasAccountBlueLogo';
+import { ReactComponent as RcIconQuoteStart } from '@/ui/assets/gas-account/quote-start.svg';
+import { ReactComponent as RcIconQuoteEnd } from '@/ui/assets/gas-account/quote-end.svg';
 
 const GasAccountDepositTipContent = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
@@ -56,11 +58,19 @@ const GasAccountLoginTipContent = ({ onClose }: { onClose: () => void }) => {
   return (
     <div className="w-full h-full flex flex-col justify-center items-center">
       <GasAccountBlueLogo className="w-[60px] h-[60px] my-24" />
-      <div className="mb-[20px] text-16 font-medium text-r-blue-default">
+      <div className="relative mb-[20px] text-16 font-medium text-r-blue-default">
+        <RcIconQuoteStart
+          viewBox="0 0 11 9"
+          className="absolute top-0 left-[-20px]"
+        />
         {t('page.gasAccount.loginInTip.title')}
       </div>
-      <div className="text-15 font-medium text-r-blue-default">
+      <div className="relative text-15 font-medium text-r-blue-default">
         {t('page.gasAccount.loginInTip.desc')}
+        <RcIconQuoteEnd
+          viewBox="0 0 11 9"
+          className="absolute top-0 right-[-20px]"
+        />
       </div>
       <img src={PNGDepositTip} className="w-[283px] h-[152px] my-[22px]" />
 

diff --git a/src/ui/views/GasAccount/components/LogoutPopop.tsx b/src/ui/views/GasAccount/components/LogoutPopop.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Popup } from '@/ui/component';
 import { message } from 'antd';
@@ -20,12 +20,17 @@ const GasAccountLogoutContent = ({ onClose }: { onClose: () => void }) => {
 
   const gasAccount = useRabbySelector((s) => s.gasAccount.account);
 
+  const [loading, setLoading] = useState(false);
+
   const handleLogout = async () => {
     try {
+      setLoading(true);
       await logout();
       onClose();
     } catch (error) {
       message.error(error?.message || String(error));
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -48,7 +53,11 @@ const GasAccountLogoutContent = ({ onClose }: { onClose: () => void }) => {
           {t('global.Cancel')}
         </GasAccountBlueBorderedButton>
 
-        <GasAccountRedBorderedButton onClick={handleLogout} block>
+        <GasAccountRedBorderedButton
+          onClick={handleLogout}
+          block
+          loading={loading}
+        >
           {t('page.gasAccount.logoutConfirmModal.logout')}
         </GasAccountRedBorderedButton>
       </div>

diff --git a/src/ui/views/GasAccount/components/WithdrawPopup.tsx b/src/ui/views/GasAccount/components/WithdrawPopup.tsx
@@ -13,7 +13,6 @@ import { ReactComponent as RcIconOpenExternalCC } from '@/ui/assets/open-externa
 import { ReactComponent as RcIconConfirm } from '@/ui/assets/gas-account/confirm.svg';
 import { formatUsdValue, openInTab, useWallet } from '@/ui/utils';
 import { useRabbySelector } from '@/ui/store';
-import { ReactComponent as RcIconCloseCC } from 'ui/assets/component/close-cc.svg';
 import { GasAccountCloseIcon } from './PopupCloseIcon';
 
 const WithdrawContent = ({
@@ -30,8 +29,13 @@ const WithdrawContent = ({
   const { sig, accountId } = useGasAccountSign();
   const wallet = useWallet();
 
+  const [loading, setLoading] = useState(false);
+
+  const gasAccount = useRabbySelector((s) => s.gasAccount.account);
+
   const withdraw = async () => {
     try {
+      setLoading(true);
       await wallet.openapi.withdrawGasAccount({
         sig: sig!,
         account_id: accountId!,
@@ -41,6 +45,8 @@ const WithdrawContent = ({
       onAfterConfirm?.();
     } catch (error) {
       message.error(error?.message || String(error));
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -64,7 +70,7 @@ const WithdrawContent = ({
           {t('page.gasAccount.withdrawPopup.to')}
         </div>
 
-        <GasACcountCurrentAddress />
+        <GasACcountCurrentAddress account={gasAccount} />
       </div>
 
       <div
@@ -78,6 +84,7 @@ const WithdrawContent = ({
           className="h-[48px] text-15 font-medium text-r-neutral-title-2"
           onClick={withdraw}
           block
+          loading={loading}
         >
           {t('global.confirm')}
         </Button>

diff --git a/src/ui/views/GasAccount/hooks/index.ts b/src/ui/views/GasAccount/hooks/index.ts
@@ -45,51 +45,13 @@ export const useGasAccountInfo = () => {
       });
   }, [sig, refreshId]);
 
-  if (error) {
+  if (error?.message?.includes('failed') && sig && accountId) {
     dispatch.gasAccount.setGasAccountSig({});
   }
 
   return { loading, value };
 };
 
-export const useGasAccountLogin = () => {
-  const wallet = useWallet();
-  const { sig, accountId } = useGasAccountSign();
-  const { loading, value } = useGasAccountInfo();
-
-  const dispatch = useRabbyDispatch();
-
-  const isLogin = useMemo(() => (!loading ? !!value?.account?.id : !!sig), [
-    sig,
-    loading,
-    value,
-  ]);
-
-  const login = useCallback(async () => {
-    wallet.signGasAccount();
-    window.close();
-  }, []);
-
-  const logout = useCallback(async () => {
-    if (sig && accountId) {
-      try {
-        const result = await wallet.openapi.logoutGasAccount({
-          sig,
-          account_id: accountId,
-        });
-        if (result.success) {
-          dispatch.gasAccount.setGasAccountSig({});
-        } else {
-          message.error('please retry');
-        }
-      } catch (error) {
-        message.error(error.message || String(error));
-      }
-    }
-  }, []);
-  return { login, logout, isLogin };
-};
-
 export const useGasAccountMethods = () => {
   const wallet = useWallet();
   const dispatch = useRabbyDispatch();
@@ -118,6 +80,20 @@ export const useGasAccountMethods = () => {
   return { login, logout };
 };
 
+export const useGasAccountLogin = () => {
+  const { sig, accountId } = useGasAccountSign();
+  const { loading, value } = useGasAccountInfo();
+
+  const { login, logout } = useGasAccountMethods();
+
+  const isLogin = useMemo(
+    () => (!loading ? !!value?.account?.id : !!sig && !!accountId),
+    [sig, accountId, loading, value]
+  );
+
+  return { login, logout, isLogin };
+};
+
 export const useGasAccountHistory = () => {
   const { sig, accountId } = useGasAccountSign();