From 6a910b8c3dc0c650a0cced672450e4ec23523204 Mon Sep 17 00:00:00 2001 From: jinoosss Date: Fri, 17 Jan 2025 02:35:59 +0900 Subject: [PATCH 1/2] feat: remove loading process in approve screen --- .../approve-transaction.spec.tsx | 1 + .../molecules/approve-transaction/index.tsx | 22 ++- .../index.tsx | 129 ++++++++++++++++++ .../src/components/molecules/index.ts | 18 +-- .../use-broadcast-transaction-screen.ts | 16 +-- .../wallet/approve-transaction-main/index.tsx | 18 ++- 6 files changed, 173 insertions(+), 31 deletions(-) create mode 100644 packages/adena-extension/src/components/molecules/bottom-fixed-loading-button-group/index.tsx diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx index b3c4998b1..9842c3456 100644 --- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx +++ b/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, diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx index ba19b5137..503adc7d1 100644 --- a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx +++ b/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 = ({ changeMemo, onToggleTransactionData, onResponse, - onTimeout, onClickConfirm, onClickCancel, }) => { @@ -95,14 +90,16 @@ export const ApproveTransaction: React.FC = ({ setOpenedNetworkFeeSetting(false); }, [useNetworkFeeReturn.save]); + useEffect(() => { + if (done) { + onResponse(); + } + }, [done, onResponse]); + if (loading) { return ; } - if (processing) { - return ; - } - if (openedNetworkFeeSetting) { return ( @@ -198,7 +195,7 @@ export const ApproveTransaction: React.FC = ({ )} - = ({ primary: true, disabled: isErrorNetworkFee, text: 'Approve', + loading: processing, onClick: onClickConfirm, }} /> diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-loading-button-group/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-loading-button-group/index.tsx new file mode 100644 index 000000000..ea75bb3f5 --- /dev/null +++ b/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 ( + + + + + ); +}; + +interface LoadingButtonProps { + loading?: boolean; + className?: string; + text: string; + onClick: () => void; +} + +const LoadingButton: React.FC = ({ + loading, + className, + text, + onClick, +}: LoadingButtonProps) => { + return ( + + ); +}; + +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')}; + } + } +`; diff --git a/packages/adena-extension/src/components/molecules/index.ts b/packages/adena-extension/src/components/molecules/index.ts index 25ea2f5eb..96642bf68 100644 --- a/packages/adena-extension/src/components/molecules/index.ts +++ b/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'; diff --git a/packages/adena-extension/src/hooks/wallet/broadcast-transaction/use-broadcast-transaction-screen.ts b/packages/adena-extension/src/hooks/wallet/broadcast-transaction/use-broadcast-transaction-screen.ts index 9b2b327c5..d4ba4106b 100644 --- a/packages/adena-extension/src/hooks/wallet/broadcast-transaction/use-broadcast-transaction-screen.ts +++ b/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); }) diff --git a/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx index 56eecff37..86c9fea45 100644 --- a/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx +++ b/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} From 4e9dc403040fb08e45e10d9b6f60932c71930969 Mon Sep 17 00:00:00 2001 From: jinoosss Date: Fri, 17 Jan 2025 02:36:05 +0900 Subject: [PATCH 2/2] fix: fix a ui --- .../src/hooks/wallet/use-network-fee.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/adena-extension/src/hooks/wallet/use-network-fee.ts b/packages/adena-extension/src/hooks/wallet/use-network-fee.ts index e5381e854..cabcf7a07 100644 --- a/packages/adena-extension/src/hooks/wallet/use-network-fee.ts +++ b/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(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,