@dynamic-labs/sdk-react-core 5.6.1 → 5.8.0

package/src/lib/components/TransactionCard/TransactionCard.cjs

@@ -105,6 +105,7 @@ require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../context/OnrampContext/OnrampContext.cjs');
 require('../../utils/hooks/useWalletDelegation/DelegationError.cjs');
 require('../../store/state/sendBalances.cjs');
+var getTransactionAssetTransfers = require('./getTransactionAssetTransfers.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -127,7 +128,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, walletConnector, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t } = reactI18next.useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
@@ -157,27 +158,6 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
             return undefined;
         return feeInUsd < 0.01 ? '<$0.01' : `~$${feeInUsd.toFixed(2)}`;
     };
-    const totalAmountInUsd = React.useMemo(() => {
-        var _a;
-        const outgoingAssetsTotal = ((_a = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _a === void 0 ? void 0 : _a.reduce((acc, transfer) => {
-            var _a;
-            const transferOutTotal = ((_a = transfer.transferOut) === null || _a === void 0 ? void 0 : _a.reduce((sum, t) => sum + Number((t === null || t === void 0 ? void 0 : t.usdPrice) || 0), 0)) || 0;
-            return acc + transferOutTotal;
-        }, 0)) || 0;
-        if (blockaidOn && isAATransaction) {
-            return outgoingAssetsTotal;
-        }
-        // for solana, the fee is included in the outgoing assets already
-        return (outgoingAssetsTotal +
-            (nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
-    }, [
-        simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
-        nativeCurrencySymbol,
-        feeInUsd,
-        blockaidOn,
-        isAATransaction,
-        isGasSponsored,
-    ]);
     const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
         if (!totalAmountInUsd)
             return undefined;
@@ -187,7 +167,8 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
     };
     const renderAssetTransfer = (transfer, index, array) => {
         var _a, _b;
-        if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
+        if (transfer.isSimulated &&
+            ['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
             (activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain) === 'SOL' &&
             transaction.fee.gas) {
             transfer.amount = (Number(transfer.amount) -
@@ -219,6 +200,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
                 amount: (_a = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.value) !== null && _a !== void 0 ? _a : '',
                 asset: assetDiff.asset,
                 direction: 'in',
+                isSimulated: true,
                 usdPrice: (_b = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
             });
         })) || [];
@@ -231,6 +213,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
                 amount: (_a = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.value) !== null && _a !== void 0 ? _a : '',
                 asset: assetDiff.asset,
                 direction: 'out',
+                isSimulated: true,
                 usdPrice: (_b = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
             });
         })) || [];
@@ -245,7 +228,46 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
     const outAssetsWithoutFeeEvm = outAssetsWithoutFee.filter((asset) => !(asset.asset.type === 'NATIVE' &&
         transaction.chain === 'EVM' &&
         !transaction.value));
-    const allAssets = [...outAssetsWithoutFeeEvm, ...inAssets];
+    const simulatedAssets = [...outAssetsWithoutFeeEvm, ...inAssets];
+    // assets removed by the fee filters are intentionally hidden, so the
+    // transaction fallback applies only when the simulation reported no transfer
+    const hasSimulatedTransfers = outAssets.length > 0 || inAssets.length > 0;
+    const transactionAssetTransfers = hasSimulatedTransfers
+        ? []
+        : getTransactionAssetTransfers.getTransactionAssetTransfers({
+            nativeTokenUsdPrice: (_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.priceData) === null || _d === void 0 ? void 0 : _d.nativeTokenUsdPrice,
+            networkInfoEntry,
+            transaction,
+        });
+    const allAssets = hasSimulatedTransfers
+        ? simulatedAssets
+        : transactionAssetTransfers;
+    const transactionAssetsUsdTotal = transactionAssetTransfers.reduce((acc, transfer) => acc + Number(transfer.usdPrice || 0), 0);
+    const totalAmountInUsd = React.useMemo(() => {
+        var _a;
+        const simulatedOutgoingTotal = ((_a = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _a === void 0 ? void 0 : _a.reduce((acc, transfer) => {
+            var _a;
+            const transferOutTotal = ((_a = transfer.transferOut) === null || _a === void 0 ? void 0 : _a.reduce((sum, t) => sum + Number((t === null || t === void 0 ? void 0 : t.usdPrice) || 0), 0)) || 0;
+            return acc + transferOutTotal;
+        }, 0)) || 0;
+        const outgoingAssetsTotal = simulatedOutgoingTotal + transactionAssetsUsdTotal;
+        if (blockaidOn && isAATransaction) {
+            return outgoingAssetsTotal;
+        }
+        // for solana, the simulated outgoing assets already include the fee
+        const feeIsAlreadyCounted = nativeCurrencySymbol === 'SOL' && hasSimulatedTransfers;
+        return (outgoingAssetsTotal +
+            (feeIsAlreadyCounted || isGasSponsored ? 0 : feeInUsd || 0));
+    }, [
+        simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
+        transactionAssetsUsdTotal,
+        hasSimulatedTransfers,
+        nativeCurrencySymbol,
+        feeInUsd,
+        blockaidOn,
+        isAATransaction,
+        isGasSponsored,
+    ]);
     const getGasFeeDisplay = () => {
         if (feeInUsd) {
             return getFeeInUsdDisplay(feeInUsd);
@@ -258,7 +280,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
         return `-- ${nativeCurrencySymbol}`;
     };
     return (jsxRuntime.jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: allAssets.map((asset, index, array) => (jsxRuntime.jsx(React__default["default"].Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [recipient && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.recipient', children: t('dyn_send_transaction.confirmation.data.recipient') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-recipient', children: shortenWalletAddress.shortenWalletAddress(recipient) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
-                            (transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0]) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsxRuntime.jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__value', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
+                            (transaction.to || ((_e = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _e === void 0 ? void 0 : _e[0])) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress((_f = transaction.to) !== null && _f !== void 0 ? _f : (_g = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _g === void 0 ? void 0 : _g[0]) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsxRuntime.jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__value', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
                             totalAmountInUsd !== undefined &&
                             totalAmountInUsd > 0 &&
                             !(isAATransaction && !isGasSponsored) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'bold', copykey: 'dyn_send_transaction.confirmation.data.total', children: t('dyn_send_transaction.confirmation.data.total') }), jsxRuntime.jsx("div", { className: 'transaction-card__total-amount', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-total', children: getTotalAmountInUsdDisplay(totalAmountInUsd) }) })] })] }))] }) })] }));

package/src/lib/components/TransactionCard/TransactionCard.js

@@ -101,6 +101,7 @@ import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../context/OnrampContext/OnrampContext.js';
 import '../../utils/hooks/useWalletDelegation/DelegationError.js';
 import '../../store/state/sendBalances.js';
+import { getTransactionAssetTransfers } from './getTransactionAssetTransfers.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -119,7 +120,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import '@dynamic-labs-sdk/client/waas';
 
 const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, walletConnector, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings({
@@ -149,27 +150,6 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
             return undefined;
         return feeInUsd < 0.01 ? '<$0.01' : `~$${feeInUsd.toFixed(2)}`;
     };
-    const totalAmountInUsd = useMemo(() => {
-        var _a;
-        const outgoingAssetsTotal = ((_a = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _a === void 0 ? void 0 : _a.reduce((acc, transfer) => {
-            var _a;
-            const transferOutTotal = ((_a = transfer.transferOut) === null || _a === void 0 ? void 0 : _a.reduce((sum, t) => sum + Number((t === null || t === void 0 ? void 0 : t.usdPrice) || 0), 0)) || 0;
-            return acc + transferOutTotal;
-        }, 0)) || 0;
-        if (blockaidOn && isAATransaction) {
-            return outgoingAssetsTotal;
-        }
-        // for solana, the fee is included in the outgoing assets already
-        return (outgoingAssetsTotal +
-            (nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
-    }, [
-        simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
-        nativeCurrencySymbol,
-        feeInUsd,
-        blockaidOn,
-        isAATransaction,
-        isGasSponsored,
-    ]);
     const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
         if (!totalAmountInUsd)
             return undefined;
@@ -179,7 +159,8 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
     };
     const renderAssetTransfer = (transfer, index, array) => {
         var _a, _b;
-        if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
+        if (transfer.isSimulated &&
+            ['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
             (activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain) === 'SOL' &&
             transaction.fee.gas) {
             transfer.amount = (Number(transfer.amount) -
@@ -211,6 +192,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
                 amount: (_a = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.value) !== null && _a !== void 0 ? _a : '',
                 asset: assetDiff.asset,
                 direction: 'in',
+                isSimulated: true,
                 usdPrice: (_b = inTransfer === null || inTransfer === void 0 ? void 0 : inTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
             });
         })) || [];
@@ -223,6 +205,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
                 amount: (_a = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.value) !== null && _a !== void 0 ? _a : '',
                 asset: assetDiff.asset,
                 direction: 'out',
+                isSimulated: true,
                 usdPrice: (_b = outTransfer === null || outTransfer === void 0 ? void 0 : outTransfer.usdPrice) !== null && _b !== void 0 ? _b : '',
             });
         })) || [];
@@ -237,7 +220,46 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
     const outAssetsWithoutFeeEvm = outAssetsWithoutFee.filter((asset) => !(asset.asset.type === 'NATIVE' &&
         transaction.chain === 'EVM' &&
         !transaction.value));
-    const allAssets = [...outAssetsWithoutFeeEvm, ...inAssets];
+    const simulatedAssets = [...outAssetsWithoutFeeEvm, ...inAssets];
+    // assets removed by the fee filters are intentionally hidden, so the
+    // transaction fallback applies only when the simulation reported no transfer
+    const hasSimulatedTransfers = outAssets.length > 0 || inAssets.length > 0;
+    const transactionAssetTransfers = hasSimulatedTransfers
+        ? []
+        : getTransactionAssetTransfers({
+            nativeTokenUsdPrice: (_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.priceData) === null || _d === void 0 ? void 0 : _d.nativeTokenUsdPrice,
+            networkInfoEntry,
+            transaction,
+        });
+    const allAssets = hasSimulatedTransfers
+        ? simulatedAssets
+        : transactionAssetTransfers;
+    const transactionAssetsUsdTotal = transactionAssetTransfers.reduce((acc, transfer) => acc + Number(transfer.usdPrice || 0), 0);
+    const totalAmountInUsd = useMemo(() => {
+        var _a;
+        const simulatedOutgoingTotal = ((_a = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _a === void 0 ? void 0 : _a.reduce((acc, transfer) => {
+            var _a;
+            const transferOutTotal = ((_a = transfer.transferOut) === null || _a === void 0 ? void 0 : _a.reduce((sum, t) => sum + Number((t === null || t === void 0 ? void 0 : t.usdPrice) || 0), 0)) || 0;
+            return acc + transferOutTotal;
+        }, 0)) || 0;
+        const outgoingAssetsTotal = simulatedOutgoingTotal + transactionAssetsUsdTotal;
+        if (blockaidOn && isAATransaction) {
+            return outgoingAssetsTotal;
+        }
+        // for solana, the simulated outgoing assets already include the fee
+        const feeIsAlreadyCounted = nativeCurrencySymbol === 'SOL' && hasSimulatedTransfers;
+        return (outgoingAssetsTotal +
+            (feeIsAlreadyCounted || isGasSponsored ? 0 : feeInUsd || 0));
+    }, [
+        simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
+        transactionAssetsUsdTotal,
+        hasSimulatedTransfers,
+        nativeCurrencySymbol,
+        feeInUsd,
+        blockaidOn,
+        isAATransaction,
+        isGasSponsored,
+    ]);
     const getGasFeeDisplay = () => {
         if (feeInUsd) {
             return getFeeInUsdDisplay(feeInUsd);
@@ -250,7 +272,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
         return `-- ${nativeCurrencySymbol}`;
     };
     return (jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: allAssets.map((asset, index, array) => (jsx(React__default.Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [recipient && (jsxs(Fragment, { children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.recipient', children: t('dyn_send_transaction.confirmation.data.recipient') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-recipient', children: shortenWalletAddress(recipient) })] }), jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
-                            (transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxs(Fragment, { children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0]) })] }), jsx("div", { className: 'transaction-card__divider' })] })), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }), jsx("div", { className: 'transaction-card__value', children: jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
+                            (transaction.to || ((_e = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _e === void 0 ? void 0 : _e[0])) && (jsxs(Fragment, { children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress((_f = transaction.to) !== null && _f !== void 0 ? _f : (_g = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _g === void 0 ? void 0 : _g[0]) })] }), jsx("div", { className: 'transaction-card__divider' })] })), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsx("img", { src: networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }), jsx("div", { className: 'transaction-card__value', children: jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
                             totalAmountInUsd !== undefined &&
                             totalAmountInUsd > 0 &&
                             !(isAATransaction && !isGasSponsored) && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'bold', copykey: 'dyn_send_transaction.confirmation.data.total', children: t('dyn_send_transaction.confirmation.data.total') }), jsx("div", { className: 'transaction-card__total-amount', children: jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-total', children: getTotalAmountInUsdDisplay(totalAmountInUsd) }) })] })] }))] }) })] }));

package/src/lib/components/TransactionCard/getTransactionAssetTransfers.cjs

@@ -0,0 +1,83 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const NATIVE_ASSET_TYPE = 'NATIVE';
+const TOKEN_ASSET_TYPE = 'TOKEN';
+const AMOUNT_PRECISION = 8;
+/** Label of a token whose transaction carries no symbol. */
+const TOKEN_ASSET_SYMBOL = 'Token';
+const getNativeTransfer = ({ transaction, networkInfoEntry, nativeTokenUsdPrice, }) => {
+    var _a, _b;
+    if (!transaction.value)
+        return undefined;
+    const { symbol, decimals, iconUrl } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
+    const amount = transaction.format(transaction.value, {
+        precision: AMOUNT_PRECISION,
+    });
+    const usdPrice = nativeTokenUsdPrice
+        ? String(Number(amount) * Number(nativeTokenUsdPrice))
+        : '';
+    return {
+        amount,
+        asset: {
+            address: null,
+            chainName: (_b = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) !== null && _b !== void 0 ? _b : '',
+            decimals: decimals !== null && decimals !== void 0 ? decimals : 0,
+            logoUrl: iconUrl !== null && iconUrl !== void 0 ? iconUrl : '',
+            name: symbol !== null && symbol !== void 0 ? symbol : '',
+            symbol: symbol !== null && symbol !== void 0 ? symbol : '',
+            type: NATIVE_ASSET_TYPE,
+        },
+        direction: 'out',
+        isSimulated: false,
+        usdPrice,
+    };
+};
+/**
+ * Builds the transfer of the token a transaction sends.
+ *
+ * The decimals of the token scale its raw amount and vary per token, so a
+ * transaction that omits them carries no displayable amount.
+ */
+const getNonNativeTransfer = ({ transaction, networkInfoEntry, }) => {
+    var _a;
+    const { nonNativeValue, nonNativeAddress, nonNativeDecimal } = transaction;
+    if (!nonNativeValue ||
+        nonNativeDecimal === undefined ||
+        !transaction.formatNonNativeToken) {
+        return undefined;
+    }
+    return {
+        amount: transaction.formatNonNativeToken(nonNativeValue, nonNativeDecimal),
+        asset: {
+            address: nonNativeAddress !== null && nonNativeAddress !== void 0 ? nonNativeAddress : null,
+            chainName: (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) !== null && _a !== void 0 ? _a : '',
+            decimals: nonNativeDecimal,
+            logoUrl: '',
+            name: TOKEN_ASSET_SYMBOL,
+            symbol: TOKEN_ASSET_SYMBOL,
+            type: TOKEN_ASSET_TYPE,
+        },
+        direction: 'out',
+        isSimulated: false,
+        usdPrice: '',
+    };
+};
+/**
+ * Builds the outgoing transfers of a transaction, for chains and transactions
+ * where no simulated transfer is available.
+ *
+ * A token transfer carries the amount being sent in `nonNativeValue`, while its
+ * `value` is native currency attached to the message to pay for its execution
+ * (TON jettons), so the token transfer is the only one reported for it.
+ */
+const getTransactionAssetTransfers = (props) => {
+    const transfer = props.transaction.nonNativeValue
+        ? getNonNativeTransfer(props)
+        : getNativeTransfer(props);
+    return transfer ? [transfer] : [];
+};
+
+exports.getTransactionAssetTransfers = getTransactionAssetTransfers;

package/src/lib/components/TransactionCard/getTransactionAssetTransfers.d.ts

@@ -0,0 +1,26 @@
+import { Asset } from '@dynamic-labs/sdk-api-core';
+import { IUITransaction } from '@dynamic-labs/types';
+import { NetworkInfoEntry } from '../../utils/functions/networksAndChains';
+export type AssetTransfer = {
+    asset: Asset;
+    amount: string;
+    direction: 'in' | 'out';
+    usdPrice: string;
+    /** Transfers derived from the transaction itself are not simulated. */
+    isSimulated: boolean;
+};
+type GetTransactionAssetTransfersProps = {
+    transaction: IUITransaction;
+    networkInfoEntry: NetworkInfoEntry | undefined;
+    nativeTokenUsdPrice: number | string | undefined;
+};
+/**
+ * Builds the outgoing transfers of a transaction, for chains and transactions
+ * where no simulated transfer is available.
+ *
+ * A token transfer carries the amount being sent in `nonNativeValue`, while its
+ * `value` is native currency attached to the message to pay for its execution
+ * (TON jettons), so the token transfer is the only one reported for it.
+ */
+export declare const getTransactionAssetTransfers: (props: GetTransactionAssetTransfersProps) => AssetTransfer[];
+export {};

package/src/lib/components/TransactionCard/getTransactionAssetTransfers.js

@@ -0,0 +1,79 @@
+'use client'
+const NATIVE_ASSET_TYPE = 'NATIVE';
+const TOKEN_ASSET_TYPE = 'TOKEN';
+const AMOUNT_PRECISION = 8;
+/** Label of a token whose transaction carries no symbol. */
+const TOKEN_ASSET_SYMBOL = 'Token';
+const getNativeTransfer = ({ transaction, networkInfoEntry, nativeTokenUsdPrice, }) => {
+    var _a, _b;
+    if (!transaction.value)
+        return undefined;
+    const { symbol, decimals, iconUrl } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
+    const amount = transaction.format(transaction.value, {
+        precision: AMOUNT_PRECISION,
+    });
+    const usdPrice = nativeTokenUsdPrice
+        ? String(Number(amount) * Number(nativeTokenUsdPrice))
+        : '';
+    return {
+        amount,
+        asset: {
+            address: null,
+            chainName: (_b = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) !== null && _b !== void 0 ? _b : '',
+            decimals: decimals !== null && decimals !== void 0 ? decimals : 0,
+            logoUrl: iconUrl !== null && iconUrl !== void 0 ? iconUrl : '',
+            name: symbol !== null && symbol !== void 0 ? symbol : '',
+            symbol: symbol !== null && symbol !== void 0 ? symbol : '',
+            type: NATIVE_ASSET_TYPE,
+        },
+        direction: 'out',
+        isSimulated: false,
+        usdPrice,
+    };
+};
+/**
+ * Builds the transfer of the token a transaction sends.
+ *
+ * The decimals of the token scale its raw amount and vary per token, so a
+ * transaction that omits them carries no displayable amount.
+ */
+const getNonNativeTransfer = ({ transaction, networkInfoEntry, }) => {
+    var _a;
+    const { nonNativeValue, nonNativeAddress, nonNativeDecimal } = transaction;
+    if (!nonNativeValue ||
+        nonNativeDecimal === undefined ||
+        !transaction.formatNonNativeToken) {
+        return undefined;
+    }
+    return {
+        amount: transaction.formatNonNativeToken(nonNativeValue, nonNativeDecimal),
+        asset: {
+            address: nonNativeAddress !== null && nonNativeAddress !== void 0 ? nonNativeAddress : null,
+            chainName: (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) !== null && _a !== void 0 ? _a : '',
+            decimals: nonNativeDecimal,
+            logoUrl: '',
+            name: TOKEN_ASSET_SYMBOL,
+            symbol: TOKEN_ASSET_SYMBOL,
+            type: TOKEN_ASSET_TYPE,
+        },
+        direction: 'out',
+        isSimulated: false,
+        usdPrice: '',
+    };
+};
+/**
+ * Builds the outgoing transfers of a transaction, for chains and transactions
+ * where no simulated transfer is available.
+ *
+ * A token transfer carries the amount being sent in `nonNativeValue`, while its
+ * `value` is native currency attached to the message to pay for its execution
+ * (TON jettons), so the token transfer is the only one reported for it.
+ */
+const getTransactionAssetTransfers = (props) => {
+    const transfer = props.transaction.nonNativeValue
+        ? getNonNativeTransfer(props)
+        : getNativeTransfer(props);
+    return transfer ? [transfer] : [];
+};
+
+export { getTransactionAssetTransfers };

package/src/lib/context/DynamicContext/types/IDynamicContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { changeLanguage } from 'i18next';
+import { changeLanguage, i18n as I18nInstance } from 'i18next';
 import { CountryIso2 } from 'react-international-phone';
 import { NameServiceData, ProjectSettings } from '@dynamic-labs/sdk-api-core';
 import { MobileExperience, NetworkConfigurationMap, SocialProviderFilter, UserProfile, WalletUiUtils } from '@dynamic-labs/types';
@@ -68,6 +68,7 @@ export interface IDynamicContext {
     handleLogOutWithReason: (reason: SdkLogoutReason) => Promise<void>;
     removeWallet: (walletId: string, clearStackAndPushInitialView?: () => void) => Promise<void>;
     handlers?: DynamicHandlers;
+    i18nSDKInstance: I18nInstance;
     isBridgeFlow: boolean;
     /** Whether there is an instance of DynamicEmbeddedAuthFlow being rendered */
     isRenderingEmbeddedAuthFlow: boolean;

package/src/lib/context/DynamicContext/useDynamicContext/useDynamicContext.cjs

@@ -35,7 +35,7 @@ const useDynamicContextValue = () => {
 // This is external context hook which is exposed to customers
 const useDynamicContext = () => {
     const context = useDynamicContextValue();
-    const { accountSwitchState, awaitingSignatureState, getNameService, handleLogOut, removeWallet, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, refetchProjectSettings, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, // NOSONAR — deprecated property re-exposed via public API
+    const { accountSwitchState, awaitingSignatureState, getNameService, handleLogOut, removeWallet, i18nSDKInstance, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, refetchProjectSettings, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, // NOSONAR — deprecated property re-exposed via public API
     showAuthFlow, showQrcodeModal, user, // NOSONAR — deprecated property re-exposed via public API
     userWithMissingInfo, bridgeChains, // NOSONAR — deprecated property re-exposed via public API
     bridgeChainsToConnect, primaryWallet, setShowBridgeWidget, sendWagmiSettings, showDynamicUserProfile, selectedTabIndex, setSelectedTabIndex, } = context;
@@ -64,6 +64,7 @@ const useDynamicContext = () => {
         bridgeChainsToConnect,
         getNameService,
         handleLogOut,
+        i18nSDKInstance,
         loadingNetwork,
         locale,
         loginWithEmail,

package/src/lib/context/DynamicContext/useDynamicContext/useDynamicContext.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { AuthMode } from '@dynamic-labs/types';
 import { IDynamicContext } from '../types';
-export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'awaitingSignatureState' | 'getNameService' | 'handleLogOut' | 'removeWallet' | 'loadingNetwork' | 'locale' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'refetchProjectSettings' | 'sdkHasLoaded' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'userWithMissingInfo' | 'bridgeChains' | 'bridgeChainsToConnect' | 'setShowBridgeWidget' | 'sendWagmiSettings' | 'showDynamicUserProfile' | 'selectedTabIndex' | 'setSelectedTabIndex'> & {
+export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'awaitingSignatureState' | 'getNameService' | 'handleLogOut' | 'removeWallet' | 'i18nSDKInstance' | 'loadingNetwork' | 'locale' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'refetchProjectSettings' | 'sdkHasLoaded' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'userWithMissingInfo' | 'bridgeChains' | 'bridgeChainsToConnect' | 'setShowBridgeWidget' | 'sendWagmiSettings' | 'showDynamicUserProfile' | 'selectedTabIndex' | 'setSelectedTabIndex'> & {
     setShowAuthFlow: Dispatch<SetStateAction<boolean>>;
     setAuthMode: (value: AuthMode) => void;
     authMode: AuthMode;

package/src/lib/context/DynamicContext/useDynamicContext/useDynamicContext.js

@@ -31,7 +31,7 @@ const useDynamicContextValue = () => {
 // This is external context hook which is exposed to customers
 const useDynamicContext = () => {
     const context = useDynamicContextValue();
-    const { accountSwitchState, awaitingSignatureState, getNameService, handleLogOut, removeWallet, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, refetchProjectSettings, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, // NOSONAR — deprecated property re-exposed via public API
+    const { accountSwitchState, awaitingSignatureState, getNameService, handleLogOut, removeWallet, i18nSDKInstance, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, refetchProjectSettings, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, // NOSONAR — deprecated property re-exposed via public API
     showAuthFlow, showQrcodeModal, user, // NOSONAR — deprecated property re-exposed via public API
     userWithMissingInfo, bridgeChains, // NOSONAR — deprecated property re-exposed via public API
     bridgeChainsToConnect, primaryWallet, setShowBridgeWidget, sendWagmiSettings, showDynamicUserProfile, selectedTabIndex, setSelectedTabIndex, } = context;
@@ -60,6 +60,7 @@ const useDynamicContext = () => {
         bridgeChainsToConnect,
         getNameService,
         handleLogOut,
+        i18nSDKInstance,
         loadingNetwork,
         locale,
         loginWithEmail,

package/src/lib/shared/assets/add-wallet.cjs

@@ -0,0 +1,59 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path, _path2, _path3;
+var _excluded = ["title", "titleId"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var SvgAddWallet = function SvgAddWallet(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26ZM5 15c-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06A3.97 3.97 0 0 0 5 23c1.46 0 2.73-.78 3.42-1.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4Zm1.49 4.73h-.74v.78c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-.78h-.74c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h.74v-.71c0-.41.34-.75.75-.75s.75.34.75.75v.71h.74a.749.749 0 1 1 0 1.5Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    opacity: 0.4,
+    d: "M22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12Z",
+    fill: "currentColor"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgAddWallet;

package/src/lib/shared/assets/add-wallet.js

@@ -0,0 +1,35 @@
+'use client'
+import * as React from 'react';
+
+var _path, _path2, _path3;
+var _excluded = ["title", "titleId"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var SvgAddWallet = function SvgAddWallet(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26ZM5 15c-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06A3.97 3.97 0 0 0 5 23c1.46 0 2.73-.78 3.42-1.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4Zm1.49 4.73h-.74v.78c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-.78h-.74c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h.74v-.71c0-.41.34-.75.75-.75s.75.34.75.75v.71h.74a.749.749 0 1 1 0 1.5Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    opacity: 0.4,
+    d: "M22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12Z",
+    fill: "currentColor"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    d: "M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgAddWallet as ReactComponent };