feat: remove loading process in approve screen

packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx

@@ -50,6 +50,7 @@ describe('ApproveTransaction Component', () => {
         return;
       },
       useNetworkFeeReturn: {
+        isFetchedEstimateGasInfo: true,
         isFetchedPriceTiers: true,
         currentGasInfo: {
           gasFee: 0.00000048,

packages/adena-extension/src/components/molecules/approve-transaction/index.tsx

@@ -1,11 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { Button, Text } from '@components/atoms';
-import {
-  ApproveInjectionLoading,
-  ApproveLoading,
-  BottomFixedButtonGroup,
-} from '@components/molecules';
+import { ApproveLoading, BottomFixedLoadingButtonGroup } from '@components/molecules';
 
 import IconArraowDown from '@assets/arrowS-down-gray.svg';
 import IconArraowUp from '@assets/arrowS-up-gray.svg';
@@ -64,7 +60,6 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
   changeMemo,
   onToggleTransactionData,
   onResponse,
-  onTimeout,
   onClickConfirm,
   onClickCancel,
 }) => {
@@ -95,14 +90,16 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
     setOpenedNetworkFeeSetting(false);
   }, [useNetworkFeeReturn.save]);
 
+  useEffect(() => {
+    if (done) {
+      onResponse();
+    }
+  }, [done, onResponse]);
+
   if (loading) {
     return <ApproveLoading rightButtonText='Approve' />;
   }
 
-  if (processing) {
-    return <ApproveInjectionLoading done={done} onResponse={onResponse} onTimeout={onTimeout} />;
-  }
-
   if (openedNetworkFeeSetting) {
     return (
       <ApproveTransactionNetworkFeeWrapper>
@@ -198,7 +195,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
         )}
       </div>
 
-      <BottomFixedButtonGroup
+      <BottomFixedLoadingButtonGroup
         filled
         leftButton={{
           text: 'Cancel',
@@ -208,6 +205,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
           primary: true,
           disabled: isErrorNetworkFee,
           text: 'Approve',
+          loading: processing,
           onClick: onClickConfirm,
         }}
       />

packages/adena-extension/src/components/molecules/bottom-fixed-loading-button-group/index.tsx

@@ -0,0 +1,129 @@
+import { Button, Text } from '@components/atoms';
+import { IconButtonLoading } from '@components/atoms/icon/icon-assets';
+import mixins from '@styles/mixins';
+import { getTheme } from '@styles/theme';
+import { ReactElement, useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+
+interface ButtonProps {
+  primary?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  text: string;
+  onClick: () => void;
+}
+
+interface BottomFixedLoadingButtonGroupProps {
+  leftButton: ButtonProps;
+  rightButton: ButtonProps;
+  filled?: boolean;
+}
+
+function mapClassName(buttonProps: ButtonProps): string {
+  return `${buttonProps.primary && 'primary'} ${buttonProps.disabled && 'disabled'}`;
+}
+
+export const BottomFixedLoadingButtonGroup = ({
+  leftButton,
+  rightButton,
+  filled,
+}: BottomFixedLoadingButtonGroupProps): ReactElement => {
+  const leftClassName = useMemo(() => {
+    return mapClassName(leftButton);
+  }, [leftButton]);
+
+  const rightClassName = useMemo(() => {
+    return mapClassName(rightButton);
+  }, [rightButton]);
+
+  const onClickLeftButton = useCallback(() => {
+    leftButton.onClick();
+  }, [leftButton]);
+
+  const onClickRightButton = useCallback(() => {
+    rightButton.onClick();
+  }, [rightButton]);
+
+  return (
+    <ButtonWrap filled={filled}>
+      <LoadingButton
+        className={leftClassName}
+        loading={leftButton.loading}
+        text={leftButton.text}
+        onClick={onClickLeftButton}
+      />
+      <LoadingButton
+        className={rightClassName}
+        loading={rightButton.loading}
+        text={rightButton.text}
+        onClick={onClickRightButton}
+      />
+    </ButtonWrap>
+  );
+};
+
+interface LoadingButtonProps {
+  loading?: boolean;
+  className?: string;
+  text: string;
+  onClick: () => void;
+}
+
+const LoadingButton: React.FC<LoadingButtonProps> = ({
+  loading,
+  className,
+  text,
+  onClick,
+}: LoadingButtonProps) => {
+  return (
+    <Button className={className} fullWidth onClick={onClick}>
+      {loading ? <IconButtonLoading /> : <Text type='body1Bold'>{text}</Text>}
+    </Button>
+  );
+};
+
+const ButtonWrap = styled.div<{ filled?: boolean }>`
+  ${mixins.flex({ direction: 'row', align: 'flex-start' })};
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  padding: 0 20px;
+  height: ${({ filled }): '48px' | '96px' => (filled ? '96px' : '48px')};
+  bottom: ${({ filled }): '0' | '24px' => (filled ? '0' : '24px')};
+  ${({ filled }): false | 'box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);' | undefined =>
+    filled && 'box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);'}
+  ${({ filled }): false | 'align-items: center;' | undefined => filled && 'align-items: center;'}
+  background-color: ${({ filled, theme }): string => (filled ? theme.neutral._8 : 'transparent')};
+  z-index: 1;
+
+  & > button {
+    margin-right: 10px;
+    background-color: ${getTheme('neutral', '_5')};
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover:not(.disabled) {
+      background-color: ${getTheme('neutral', '_6')};
+    }
+
+    &.primary {
+      background-color: ${getTheme('primary', '_6')};
+
+      &:hover:not(.disabled) {
+        background-color: ${getTheme('primary', '_7')};
+      }
+    }
+  }
+
+  & > button.disabled {
+    cursor: default;
+    color: ${getTheme('neutral', '_5')};
+    background-color: ${getTheme('neutral', '_7')};
+
+    &.primary {
+      background-color: ${getTheme('primary', '_9')};
+    }
+  }
+`;

packages/adena-extension/src/components/molecules/index.ts

@@ -1,23 +1,23 @@
-export * from './error-container';
-export * from './seed-box';
-export * from './title-with-desc';
-export * from './terms-checkbox';
-export * from './transaction-history';
-export * from './loading-nft';
-export * from './token-balance';
 export * from './approve-injection-loading';
 export * from './approve-ledger-loading';
 export * from './approve-loading';
 export * from './approve-transaction';
 export * from './bottom-fixed-button';
 export * from './bottom-fixed-button-group';
+export * from './bottom-fixed-loading-button-group';
 export * from './cancel-and-confirm-button';
 export * from './close-shadow-button';
 export * from './double-button';
+export * from './error-container';
+export * from './ghost-button';
+export * from './loading-nft';
+export * from './seed-box';
 export * from './seed-view-and-copy';
+export * from './terms-checkbox';
+export * from './title-with-desc';
+export * from './token-balance';
+export * from './transaction-history';
 export * from './underline-text-button';
-export * from './ghost-button';
-
 // web
 export * from './web-seed-box';
 export * from './web-seed-input';

packages/adena-extension/src/hooks/wallet/broadcast-transaction/use-broadcast-transaction-screen.ts

@@ -1,19 +1,19 @@
-import { useCallback, useMemo, useState } from 'react';
+import { MsgEndpoint } from '@gnolang/gno-js-client';
+import { Tx } from '@gnolang/tm2-js-client';
 import {
-  RawTx,
-  strToSignedTx,
   RawBankSendMessage,
-  RawVmCallMessage,
+  RawTx,
   RawVmAddPackageMessage,
+  RawVmCallMessage,
   RawVmRunMessage,
+  strToSignedTx,
 } from 'adena-module';
-import { MsgEndpoint } from '@gnolang/gno-js-client';
-import { Tx } from '@gnolang/tm2-js-client';
+import { useCallback, useMemo, useState } from 'react';
 
 import { makeGnotAmountByRaw } from '@common/utils/amount-utils';
+import useAppNavigate from '@hooks/use-app-navigate';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
-import useAppNavigate from '@hooks/use-app-navigate';
 import { RoutePath } from '@types';
 
 export type BroadcastTransactionState = 'UPLOAD_TRANSACTION' | 'LOADING' | 'FAILED' | 'SUCCESS';
@@ -213,7 +213,7 @@ const useBroadcastTransactionScreen = (): UseBroadcastTransactionScreenReturn =>
     }
     setBroadcastTransactionState('LOADING');
     const isSuccessBroadcasting = await transactionService
-      .sendTransaction(wallet, currentAccount, transaction, true)
+      .sendTransaction(wallet, currentAccount, transaction, false)
       .then((response) => {
         return Boolean(response?.hash);
       })

packages/adena-extension/src/hooks/wallet/use-network-fee.ts

@@ -12,6 +12,7 @@ import { useGetEstimateGasPriceTiers } from './transaction-gas/use-get-estimate-
 
 export interface UseNetworkFeeReturn {
   isFetchedPriceTiers: boolean;
+  isFetchedEstimateGasInfo: boolean;
   currentGasInfo: GasInfo | null;
   currentGasFeeRawAmount: number;
   changedGasInfo: GasInfo | null;
@@ -39,7 +40,7 @@ export const useNetworkFee = (
   const [gasAdjustment, setGasAdjustment] = useState<string>(DEFAULT_GAS_ADJUSTMENT.toString());
 
   const { data: defaultEstimatedGasInfo } = useGetDefaultEstimateGasInfo(document);
-  const { data: estimatedGasInfo } = useGetEstimateGasInfo(
+  const { data: estimatedGasInfo, isFetched: isFetchedEstimateGasInfo } = useGetEstimateGasInfo(
     document,
     defaultEstimatedGasInfo?.gasUsed || 0,
     defaultEstimatedGasInfo?.gasPrice || 0,
@@ -114,7 +115,8 @@ export const useNetworkFee = (
         amount: BigNumber(document?.fee.amount?.[0].amount || 0)
           .shiftedBy(-GasToken.decimals)
           .toFixed(GasToken.decimals)
-          .replace(/0+$/, ''),
+          .replace(/(\.\d*?)0+$/, '$1')
+          .replace(/\.$/, ''),
         denom: document?.fee.amount?.[0].denom || GasToken.symbol,
       };
     }
@@ -130,16 +132,17 @@ export const useNetworkFee = (
       };
     }
 
-    const networkFeeAmount = BigNumber(currentEstimateGas.gasFee)
-      .shiftedBy(GasToken.decimals * -1)
-      .toFixed(6, BigNumber.ROUND_UP)
-      .replace(/0+$/, '');
+    const networkFeeAmount = BigNumber(currentEstimateGas.gasFee || 0)
+      .shiftedBy(-GasToken.decimals)
+      .toFixed(GasToken.decimals)
+      .replace(/(\.\d*?)0+$/, '$1')
+      .replace(/\.$/, '');
 
     return {
       amount: networkFeeAmount,
       denom: GasToken.symbol,
     };
-  }, [currentEstimateGas, selectedTier]);
+  }, [currentEstimateGas, selectedTier, document]);
 
   const setNetworkFeeSetting = useCallback((settingInfo: NetworkFeeSettingInfo): void => {
     setNetworkFeeSettingType(settingInfo.settingType);
@@ -151,6 +154,7 @@ export const useNetworkFee = (
   }, [changedSettingType]);
 
   return {
+    isFetchedEstimateGasInfo,
     isFetchedPriceTiers,
     currentGasInfo,
     currentGasFeeRawAmount,

packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx

@@ -97,6 +97,20 @@ const ApproveTransactionContainer: React.FC = () => {
     return true;
   }, [requestData?.data?.memo]);
 
+  const displayNetworkFee = useMemo(() => {
+    if (!networkFee) {
+      return {
+        amount: '0',
+        denom: GasToken.symbol,
+      };
+    }
+
+    return {
+      amount: networkFee.amount,
+      denom: GasToken.symbol,
+    };
+  }, [networkFee]);
+
   const isErrorNetworkFee = useMemo(() => {
     if (!networkFee) {
       return false;
@@ -254,7 +268,7 @@ const ApproveTransactionContainer: React.FC = () => {
         BroadcastTxCommitResult | BroadcastTxSyncResult | TM2Error | null
       >((resolve) => {
         transactionService
-          .sendTransaction(walletInstance, currentAccount, signed, true)
+          .sendTransaction(walletInstance, currentAccount, signed, false)
           .then(resolve)
           .catch((error: TM2Error | Error) => {
             resolve(error);
@@ -406,7 +420,7 @@ const ApproveTransactionContainer: React.FC = () => {
       done={done}
       logo={favicon}
       isErrorNetworkFee={isErrorNetworkFee}
-      networkFee={networkFee}
+      networkFee={displayNetworkFee}
       useNetworkFeeReturn={useNetworkFeeReturn}
       changeMemo={changeMemo}
       onClickConfirm={onClickConfirm}