@dynamic-labs/sdk-react-core 0.17.26 → 0.17.28

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -65,7 +65,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
-    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionValue, gasEstimate, isGasPriceLoading, total, } = useTransactionData.useTransactionData({
+    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionGas, transactionValue, isGasLoading, gasEstimate, isGasPriceLoading, total, } = useTransactionData.useTransactionData({
         provider,
         transaction,
     });
@@ -90,7 +90,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         return `Insufficient funds due to gas price increase from estimate. Please add ${amountLeft} ${currencySymbol} to continue.`;
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, Object.assign({ onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isLoadingTransaction || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'From (You)', isLoading: isTransactionFromAddressLoading, title: transactionFromAddress }, { children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'To', isLoading: isTransactionToAddressLoading, title: transactionToAddress }, { children: transactionToAddress &&
-                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber.formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas (estimated)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber.formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-gas-free' }, { children: gasEstimate ? formatBigNumber.formatBigNumber(gasEstimate, 10) : 'N/A' })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber.formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber.formatBigNumber(total, 10) : 'N/A' }))] })));
+                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber.formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 })), transactionGas ? (jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas', isEmpty: !transactionGas, isLoading: isGasLoading, title: transactionGas && formatBigNumber.formatBigNumber(transactionGas), suffix: transactionGas && currencySymbol, icon: transactionGas && chainIcon, dataTestId: 'transaction-gas-fee' }, { children: transactionGas ? formatBigNumber.formatBigNumber(transactionGas, 10) : 'N/A' }))) : (jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas (estimate)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber.formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-estimated-gas-fee' }, { children: gasEstimate ? formatBigNumber.formatBigNumber(gasEstimate, 10) : 'N/A' }))), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber.formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber.formatBigNumber(total, 10) : 'N/A' }))] })));
 };
 
 exports.TransactionConfirmationView = TransactionConfirmationView;

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -61,7 +61,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
-    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionValue, gasEstimate, isGasPriceLoading, total, } = useTransactionData({
+    const { isLoading: isLoadingTransaction, isTransactionFromAddressLoading, isTransactionToAddressLoading, transactionFromAddress, transactionToAddress, isEffectiveValueLoading, transactionGas, transactionValue, isGasLoading, gasEstimate, isGasPriceLoading, total, } = useTransactionData({
         provider,
         transaction,
     });
@@ -86,7 +86,7 @@ const TransactionConfirmationView = ({ provider, transaction, mutation, onError,
         return `Insufficient funds due to gas price increase from estimate. Please add ${amountLeft} ${currencySymbol} to continue.`;
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxs(TransactionConfirmationPageLayout, Object.assign({ onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isLoadingTransaction || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage }, { children: [jsx(TransactionRow, Object.assign({ label: 'From (You)', isLoading: isTransactionFromAddressLoading, title: transactionFromAddress }, { children: shortenWalletAddress(transactionFromAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'To', isLoading: isTransactionToAddressLoading, title: transactionToAddress }, { children: transactionToAddress &&
-                    shortenWalletAddress(transactionToAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 })), jsx(TransactionRow, Object.assign({ label: 'Gas (estimated)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-gas-free' }, { children: gasEstimate ? formatBigNumber(gasEstimate, 10) : 'N/A' })), jsx(TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber(total, 10) : 'N/A' }))] })));
+                    shortenWalletAddress(transactionToAddress, 4, 4) })), jsx(TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 })), transactionGas ? (jsx(TransactionRow, Object.assign({ label: 'Gas', isEmpty: !transactionGas, isLoading: isGasLoading, title: transactionGas && formatBigNumber(transactionGas), suffix: transactionGas && currencySymbol, icon: transactionGas && chainIcon, dataTestId: 'transaction-gas-fee' }, { children: transactionGas ? formatBigNumber(transactionGas, 10) : 'N/A' }))) : (jsx(TransactionRow, Object.assign({ label: 'Gas (estimate)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-estimated-gas-fee' }, { children: gasEstimate ? formatBigNumber(gasEstimate, 10) : 'N/A' }))), jsx(TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber(total, 10) : 'N/A' }))] })));
 };
 
 export { TransactionConfirmationView };

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.cjs

@@ -54,19 +54,28 @@ const useTransactionData = ({ provider, transaction, }) => {
         const { from } = transaction, transactionWithNoOrigin = _tslib.__rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
-    const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise.usePromise(() => provider.getGasPrice());
-    const isGasPriceLoading = isEstimatedGasLoading || isFeeDataLoading;
-    const gasEstimate = React.useMemo(() => gasPrice && estimatedGas
-        ? ethers.ethers.BigNumber.from(gasPrice).mul(estimatedGas)
-        : undefined, [gasPrice, estimatedGas]);
+    const { data: providerGasPrice, isLoading: isProviderGasPrice } = usePromise.usePromise(() => provider.getGasPrice(), []);
+    const { data: transactionGasPrice, isLoading: isTransactionGasPriceLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const gasPrice = yield transaction.gasPrice;
+        return gasPrice ? ethers.ethers.BigNumber.from(gasPrice) : undefined;
+    }), [transaction.gasPrice]);
+    const isGasPriceLoading = isEstimatedGasLoading || isProviderGasPrice || isTransactionGasPriceLoading;
+    const isGasLoading = isProviderGasPrice || isTransactionGasPriceLoading;
+    const transactionGas = React.useMemo(() => transactionGasPrice && estimatedGas
+        ? ethers.ethers.BigNumber.from(transactionGasPrice).mul(estimatedGas)
+        : undefined, [estimatedGas, transactionGasPrice]);
+    const gasEstimate = React.useMemo(() => !transactionGasPrice && providerGasPrice && estimatedGas
+        ? ethers.ethers.BigNumber.from(providerGasPrice).mul(estimatedGas)
+        : undefined, [transactionGasPrice, estimatedGas, providerGasPrice]);
     const { data: transactionToAddress, isLoading: isTransactionToAddressLoading, } = usePromise.usePromise(() => transaction.to);
     const { data: transactionFromAddress, isLoading: isTransactionFromAddressLoading, } = usePromise.usePromise(() => transaction.from);
     const total = React.useMemo(() => {
-        if (gasEstimate !== undefined && transactionValue !== undefined) {
-            return gasEstimate.add(transactionValue);
+        const transactionGasFee = transactionGas || gasEstimate;
+        if (transactionGasFee !== undefined && transactionValue !== undefined) {
+            return transactionGasFee.add(transactionValue);
         }
         return transactionValue || gasEstimate;
-    }, [gasEstimate, transactionValue]);
+    }, [gasEstimate, transactionGas, transactionValue]);
     const isLoading = React.useMemo(() => isEffectiveValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
@@ -79,12 +88,16 @@ const useTransactionData = ({ provider, transaction, }) => {
     return {
         gasEstimate,
         isEffectiveValueLoading,
+        isGasLoading,
         isGasPriceLoading,
         isLoading,
         isTransactionFromAddressLoading,
+        isTransactionGasPriceLoading,
         isTransactionToAddressLoading,
         total,
         transactionFromAddress,
+        transactionGas,
+        transactionGasPrice,
         transactionToAddress,
         transactionValue,
     };

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.d.ts

@@ -6,12 +6,16 @@ type TransactionDataHookProps = {
 export declare const useTransactionData: ({ provider, transaction, }: TransactionDataHookProps) => {
     gasEstimate: ethers.BigNumber | undefined;
     isEffectiveValueLoading: boolean;
+    isGasLoading: boolean;
     isGasPriceLoading: boolean;
     isLoading: boolean;
     isTransactionFromAddressLoading: boolean;
+    isTransactionGasPriceLoading: boolean;
     isTransactionToAddressLoading: boolean;
     total: ethers.BigNumber | undefined;
     transactionFromAddress: string | undefined;
+    transactionGas: ethers.BigNumber | undefined;
+    transactionGasPrice: ethers.BigNumber | undefined;
     transactionToAddress: string | undefined;
     transactionValue: ethers.BigNumber | undefined;
 };

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.js

@@ -50,19 +50,28 @@ const useTransactionData = ({ provider, transaction, }) => {
         const { from } = transaction, transactionWithNoOrigin = __rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
-    const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise(() => provider.getGasPrice());
-    const isGasPriceLoading = isEstimatedGasLoading || isFeeDataLoading;
-    const gasEstimate = useMemo(() => gasPrice && estimatedGas
-        ? ethers.BigNumber.from(gasPrice).mul(estimatedGas)
-        : undefined, [gasPrice, estimatedGas]);
+    const { data: providerGasPrice, isLoading: isProviderGasPrice } = usePromise(() => provider.getGasPrice(), []);
+    const { data: transactionGasPrice, isLoading: isTransactionGasPriceLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const gasPrice = yield transaction.gasPrice;
+        return gasPrice ? ethers.BigNumber.from(gasPrice) : undefined;
+    }), [transaction.gasPrice]);
+    const isGasPriceLoading = isEstimatedGasLoading || isProviderGasPrice || isTransactionGasPriceLoading;
+    const isGasLoading = isProviderGasPrice || isTransactionGasPriceLoading;
+    const transactionGas = useMemo(() => transactionGasPrice && estimatedGas
+        ? ethers.BigNumber.from(transactionGasPrice).mul(estimatedGas)
+        : undefined, [estimatedGas, transactionGasPrice]);
+    const gasEstimate = useMemo(() => !transactionGasPrice && providerGasPrice && estimatedGas
+        ? ethers.BigNumber.from(providerGasPrice).mul(estimatedGas)
+        : undefined, [transactionGasPrice, estimatedGas, providerGasPrice]);
     const { data: transactionToAddress, isLoading: isTransactionToAddressLoading, } = usePromise(() => transaction.to);
     const { data: transactionFromAddress, isLoading: isTransactionFromAddressLoading, } = usePromise(() => transaction.from);
     const total = useMemo(() => {
-        if (gasEstimate !== undefined && transactionValue !== undefined) {
-            return gasEstimate.add(transactionValue);
+        const transactionGasFee = transactionGas || gasEstimate;
+        if (transactionGasFee !== undefined && transactionValue !== undefined) {
+            return transactionGasFee.add(transactionValue);
         }
         return transactionValue || gasEstimate;
-    }, [gasEstimate, transactionValue]);
+    }, [gasEstimate, transactionGas, transactionValue]);
     const isLoading = useMemo(() => isEffectiveValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
@@ -75,12 +84,16 @@ const useTransactionData = ({ provider, transaction, }) => {
     return {
         gasEstimate,
         isEffectiveValueLoading,
+        isGasLoading,
         isGasPriceLoading,
         isLoading,
         isTransactionFromAddressLoading,
+        isTransactionGasPriceLoading,
         isTransactionToAddressLoading,
         total,
         transactionFromAddress,
+        transactionGas,
+        transactionGasPrice,
         transactionToAddress,
         transactionValue,
     };