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

RabbyHub · Sep 3, 2024 · 8e92d86 · 8e92d86
2 parents ea94eea + 7892480
commit 8e92d86
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 37 deletions.
diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
@@ -360,6 +360,7 @@
         "watchUnavailableTip": "Watch-only address is not supported for Free Gas"
       },
       "gasAccount": {
+        "customRPC": "Not supported when using custom RPC",
         "notEnough": "Gas balance is not enough",
         "useGasAccount": "Use GasAccount",
         "WalletConnectTips": "WalletConnect is not supported by GasAccount",

diff --git a/src/ui/utils/number.ts b/src/ui/utils/number.ts
@@ -32,6 +32,9 @@ export const formatTokenAmount = (
   if (moreDecimalsWhenNotEnough && bn.lt(0.0001) && decimals < 8) {
     realDecimals = 8;
   }
+  if (moreDecimalsWhenNotEnough && bn.lt(0.00000001)) {
+    return '<0.00000001';
+  }
   if (!split[1] || split[1].length < realDecimals) {
     return splitNumberByStep(bn.toFixed());
   }

diff --git a/src/ui/views/AddressManagement/index.tsx b/src/ui/views/AddressManagement/index.tsx
@@ -515,7 +515,7 @@ const AddressManagement = () => {
         {enableSwitch
           ? t('page.manageAddress.current-address')
           : t('page.manageAddress.address-management')}
-        <div className="bg-r-neutral-card2 rounded absolute top-20 right-0 w-[32px] h-[28px] flex items-center justify-center">
+        <div className="bg-r-neutral-card1 rounded absolute top-20 right-0 w-[32px] h-[28px] flex items-center justify-center">
           <RcIconAddAddress
             viewBox="0 0 20 20"
             className={clsx(

diff --git a/src/ui/views/Approval/components/FooterBar/FooterBar.tsx b/src/ui/views/Approval/components/FooterBar/FooterBar.tsx
@@ -51,6 +51,7 @@ interface Props extends Omit<ActionGroupProps, 'account'> {
   isGasAccountLogin?: boolean;
   isWalletConnect?: boolean;
   gasAccountCanPay?: boolean;
+  noCustomRPC?: boolean;
 }
 
 const Wrapper = styled.section`
@@ -161,6 +162,7 @@ export const FooterBar: React.FC<Props> = ({
   isGasAccountLogin,
   isWalletConnect,
   gasAccountCanPay,
+  noCustomRPC,
   ...props
 }) => {
   const [account, setAccount] = React.useState<Account>();
@@ -316,7 +318,7 @@ export const FooterBar: React.FC<Props> = ({
           ) : isWatchAddr ? null : (
             <GasLessNotEnough
               gasLessFailedReason={gasLessFailedReason}
-              gasAccountCost={gasAccountCost}
+              gasAccountCanPay={gasAccountCanPay}
               onChangeGasAccount={onChangeGasAccount}
             />
           )
@@ -327,6 +329,7 @@ export const FooterBar: React.FC<Props> = ({
             gasAccountCost={gasAccountCost}
             isGasAccountLogin={isGasAccountLogin}
             isWalletConnect={isWalletConnect}
+            noCustomRPC={noCustomRPC}
           />
         ) : null}
       </Wrapper>

diff --git a/src/ui/views/Approval/components/FooterBar/GasLessComponents.tsx b/src/ui/views/Approval/components/FooterBar/GasLessComponents.tsx
@@ -29,25 +29,20 @@ export type GasLessConfig = {
 
 export function GasLessNotEnough({
   gasLessFailedReason,
-  gasAccountCost,
   onChangeGasAccount,
+  gasAccountCanPay,
 }: {
   url?: string;
   gasLessFailedReason?: string;
-  gasAccountCost?: GasAccountCheckResult;
   onChangeGasAccount?: () => void;
+  gasAccountCanPay?: boolean;
 }) {
   const { t } = useTranslation();
   const [
     hoverGasLessFailedReason,
     setHoverGasLessFailedReason,
   ] = React.useState(false);
 
-  const canUseGasAccount =
-    !!gasAccountCost?.is_gas_account &&
-    !!gasAccountCost?.balance_is_enough &&
-    !gasAccountCost?.chain_not_support;
-
   return (
     <div
       className="security-level-tip bg-r-neutral-card2 text-r-neutral-card2 mt-[15px] items-center"
@@ -62,7 +57,7 @@ export function GasLessNotEnough({
         {t('page.signFooterBar.gasAccount.notEnough')}
       </span>
 
-      {canUseGasAccount ? (
+      {gasAccountCanPay ? (
         <div
           style={{
             cursor: 'pointer',
@@ -360,15 +355,20 @@ export function GasAccountTips({
   gasAccountCost,
   isGasAccountLogin,
   isWalletConnect,
+  noCustomRPC,
 }: {
   gasAccountCost?: GasAccountCheckResult;
   isGasAccountLogin?: boolean;
   isWalletConnect?: boolean;
+  noCustomRPC?: boolean;
 }) {
   const { t } = useTranslation();
   const [tipPopupVisible, setTipPopupVisible] = useState(false);
 
   const [tip, btnText] = useMemo(() => {
+    if (!noCustomRPC) {
+      return [t('page.signFooterBar.gasAccount.customRPC'), null];
+    }
     if (isWalletConnect) {
       return [t('page.signFooterBar.gasAccount.WalletConnectTips'), null];
     }
@@ -400,7 +400,8 @@ export function GasAccountTips({
     !isWalletConnect &&
     isGasAccountLogin &&
     gasAccountCost?.balance_is_enough &&
-    !gasAccountCost.chain_not_support
+    !gasAccountCost.chain_not_support &&
+    noCustomRPC
   ) {
     return null;
   }

diff --git a/src/ui/views/Approval/components/MiniSignTx/MiniFooterBar.tsx b/src/ui/views/Approval/components/MiniSignTx/MiniFooterBar.tsx
@@ -58,6 +58,7 @@ interface Props extends Omit<ActionGroupProps, 'account'> {
   isGasAccountLogin?: boolean;
   isWalletConnect?: boolean;
   gasAccountCanPay?: boolean;
+  noCustomRPC?: boolean;
 }
 
 const Wrapper = styled.section`
@@ -169,6 +170,7 @@ export const MiniFooterBar: React.FC<Props> = ({
   isGasAccountLogin,
   isWalletConnect,
   gasAccountCanPay,
+  noCustomRPC,
   task,
   ...props
 }) => {
@@ -290,7 +292,7 @@ export const MiniFooterBar: React.FC<Props> = ({
         ) : isWatchAddr ? null : (
           <GasLessNotEnough
             gasLessFailedReason={gasLessFailedReason}
-            gasAccountCost={gasAccountCost}
+            gasAccountCanPay={gasAccountCanPay}
             onChangeGasAccount={onChangeGasAccount}
           />
         )
@@ -301,6 +303,7 @@ export const MiniFooterBar: React.FC<Props> = ({
           gasAccountCost={gasAccountCost}
           isGasAccountLogin={isGasAccountLogin}
           isWalletConnect={isWalletConnect}
+          noCustomRPC={noCustomRPC}
         />
       ) : null}
     </>

diff --git a/src/ui/views/Approval/components/MiniSignTx/index.tsx b/src/ui/views/Approval/components/MiniSignTx/index.tsx
@@ -895,6 +895,7 @@ export const MiniSignTx = ({
             />
           </div>
         }
+        noCustomRPC={noCustomRPC}
         gasMethod={gasMethod}
         gasAccountCost={gasAccountCost}
         gasAccountCanPay={gasAccountCanPay}

diff --git a/src/ui/views/Approval/components/SignTx.tsx b/src/ui/views/Approval/components/SignTx.tsx
@@ -2034,6 +2034,7 @@ const SignTx = ({ params, origin }: SignTxProps) => {
             isWatchAddr={
               currentAccountType === KEYRING_TYPE.WatchAddressKeyring
             }
+            noCustomRPC={noCustomRPC}
             gasMethod={gasMethod}
             gasAccountCost={gasAccountCost}
             gasAccountCanPay={gasAccountCanPay}

diff --git a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx
@@ -713,7 +713,8 @@ const GasSelectorHeader = ({
   const gasCostAmountStr = useMemo(() => {
     return `${formatTokenAmount(
       new BigNumber(modalExplainGas.gasCostAmount).toString(10),
-      6
+      6,
+      true
     )} ${chain.nativeTokenSymbol}`;
   }, [modalExplainGas?.gasCostAmount]);
 
@@ -791,8 +792,8 @@ const GasSelectorHeader = ({
               </>
             ) : gasMethod === 'gasAccount' ? (
               <div className="gas-selector-card-content-item relative">
-                <TooltipWithMagnetArrow
-                  className="rectangle w-[max-content]"
+                <Tooltip
+                  overlayClassName="rectangle"
                   title={
                     <>
                       <div>
@@ -817,13 +818,13 @@ const GasSelectorHeader = ({
                     </>
                   }
                 >
-                  <div className="text-[16px] font-medium text-r-blue-default border-b border-dashed border-rabby-blue-disable">
+                  <div className="text-[16px] font-medium text-r-blue-default">
                     {gasAccountCost?.gas_account_cost.total_cost} USD
                   </div>
-                </TooltipWithMagnetArrow>
+                </Tooltip>
               </div>
             ) : (
-              <div className="gas-selector-card-content-item">
+              <div className="gas-selector-card-content-item relative">
                 <div
                   className={clsx(
                     'gas-selector-card-amount translate-y-1 flex items-center',
@@ -838,14 +839,14 @@ const GasSelectorHeader = ({
                   )}
                 >
                   {gasMethod ? (
-                    <div className="truncate max-w-[180px] group">
-                      <span className="hidden  group-hover:inline">
-                        {gasCostUsdStr}
-                      </span>
-                      <span className="group-hover:hidden">
-                        {gasCostAmountStr}
-                      </span>
-                    </div>
+                    <Tooltip
+                      overlayClassName="rectangle"
+                      title={`≈${gasCostUsdStr}`}
+                    >
+                      <div className="truncate max-w-[180px] group">
+                        <span>{gasCostAmountStr}</span>
+                      </div>
+                    </Tooltip>
                   ) : (
                     <span
                       className="truncate max-w-[110px]"
@@ -1137,10 +1138,14 @@ const GasMethod = (props: {
 }) => {
   const { active, onChange, ActiveComponent, BlurComponent, tips } = props;
   return (
-    <TooltipWithMagnetArrow
-      className="rectangle w-[max-content]"
+    <Tooltip
+      overlayClassName="rectangle"
       title={tips}
       visible={tips ? undefined : false}
+      placement="topLeft"
+      align={{
+        offset: [-4, 0],
+      }}
     >
       <div
         className={clsx(
@@ -1160,7 +1165,7 @@ const GasMethod = (props: {
           )}
         />
       </div>
-    </TooltipWithMagnetArrow>
+    </Tooltip>
   );
 };
 

diff --git a/src/ui/views/GasAccount/components/GasAccountTxPopups.tsx b/src/ui/views/GasAccount/components/GasAccountTxPopups.tsx
@@ -9,12 +9,13 @@ 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';
+import { GasAccountWrapperBg } from './WrapperBg';
 
 const GasAccountDepositTipContent = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="w-full h-full flex flex-col justify-center items-center">
+    <GasAccountWrapperBg className="w-full h-full flex flex-col justify-center items-center">
       <div className="text-20 font-medium text-r-neutral-title1 my-24">
         {t('page.gasAccount.GasAccountDepositTipPopup.title')}
       </div>
@@ -29,7 +30,7 @@ const GasAccountDepositTipContent = ({ onClose }: { onClose: () => void }) => {
           {t('page.gasAccount.GasAccountDepositTipPopup.gotIt')}
         </Button>
       </div>
-    </div>
+    </GasAccountWrapperBg>
   );
 };
 
@@ -56,7 +57,7 @@ const GasAccountLoginTipContent = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="w-full h-full flex flex-col justify-center items-center">
+    <GasAccountWrapperBg className="w-full h-full flex flex-col justify-center items-center">
       <GasAccountBlueLogo className="w-[60px] h-[60px] my-24" />
       <div className="relative mb-[16px] text-18 font-medium text-r-blue-default">
         <RcIconQuoteStart
@@ -84,7 +85,7 @@ const GasAccountLoginTipContent = ({ onClose }: { onClose: () => void }) => {
           {t('page.gasAccount.GasAccountDepositTipPopup.gotIt')}
         </Button>
       </div>
-    </div>
+    </GasAccountWrapperBg>
   );
 };
 

diff --git a/src/ui/views/GasAccount/components/LoginPopup.tsx b/src/ui/views/GasAccount/components/LoginPopup.tsx
@@ -117,7 +117,7 @@ const GasAccountLoginContent = ({ onClose }: { onClose: () => void }) => {
             block
             size="large"
             type="primary"
-            className="h-[44px] text-r-neutral-title2 text-15 font-medium"
+            className="h-[48px] text-r-neutral-title2 text-15 font-medium"
           >
             {t('global.Confirm')}
           </Button>

diff --git a/src/ui/views/GasAccount/hooks/checkTxs.ts b/src/ui/views/GasAccount/hooks/checkTxs.ts
@@ -30,7 +30,7 @@ export const useGasAccountTxsCheck = ({
       setIsGasAccountLogin(false);
     }
     return wallet.openapi.checkGasAccountTxs({
-      sig: sig!,
+      sig: sig || '',
       account_id: accountId!,
       tx_list: txs,
     });

diff --git a/src/ui/views/GasAccount/hooks/index.ts b/src/ui/views/GasAccount/hooks/index.ts
@@ -146,7 +146,10 @@ export const useGasAccountHistory = () => {
       reloadDeps: [sig],
       isNoMore(data) {
         if (data) {
-          return !(!!data?.rechargeList && data?.rechargeList?.length > 0);
+          return (
+            data.totalCount <=
+            (data.list.length || 0) + (data?.rechargeList?.length || 0)
+          );
         }
         return true;
       },
@@ -191,9 +194,12 @@ export const useGasAccountHistory = () => {
 
   const [inViewport] = useInViewport(ref);
 
+  console.log('inViewport', inViewport, noMore, loadingMore);
+
   useEffect(() => {
     if (!noMore && inViewport && !loadingMore && loadMore) {
       loadMore();
+      console.log('loadMore');
     }
   }, [inViewport, loadMore, loading, loadingMore, noMore]);
 

diff --git a/src/ui/views/GasAccount/index.tsx b/src/ui/views/GasAccount/index.tsx
@@ -153,7 +153,10 @@ const GasAccountInner = () => {
       />
       <GasAccountLogoutPopup
         visible={logoutVisible}
-        onCancel={() => setLogoutVisible(false)}
+        onCancel={() => {
+          gotoDashboard();
+          setLogoutVisible(false);
+        }}
       />
       <GasAccountDepositPopup
         visible={depositVisible}