@dynamic-labs/sdk-react-core 4.80.0 → 4.81.0

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceItem/TokenBalanceItem.js

@@ -113,7 +113,8 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
     currency: 'USD',
     style: 'currency',
 });
-const TokenBalanceItem = ({ tokenBalance, }) => {
+const TokenBalanceItem = ({ tokenBalance, secondaryAction, }) => {
+    var _a;
     const { showFiat } = useInternalDynamicContext();
     const formattedFiatValue = () => {
         var _a;
@@ -124,7 +125,9 @@ const TokenBalanceItem = ({ tokenBalance, }) => {
             ? currencyFormatter.format(parseFloat((_a = tokenBalance.marketValue) === null || _a === void 0 ? void 0 : _a.toFixed(2)))
             : '<$0.01';
     };
-    return (jsxs("div", { className: 'token-balance-item', children: [jsxs("div", { className: 'token-balance-item__name', children: [tokenBalance.logoURI ? (jsx(Image, { src: tokenBalance.logoURI, alt: tokenBalance.symbol, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon' })) : (jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' })), jsx("div", { children: jsx(Typography, { variant: 'body_small', className: 'token-balance-item__title', color: 'primary', children: tokenBalance.name }) })] }), jsxs("div", { className: 'flex', children: [showFiat ? (jsx(Typography, { variant: 'body_small', weight: 'bold', color: 'primary', style: { textAlign: 'right' }, children: formattedFiatValue() })) : null, jsx("div", { className: 'token-balance-item__value', children: jsxs("div", { className: 'token-balance-item__value__balance', "data-testid": 'token-balance-item-balance', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', style: { marginRight: '2px' }, children: roundBalance(String(tokenBalance.balance)) }), jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__symbol', children: tokenBalance.symbol })] }) })] })] }, tokenBalance.address));
+    return (jsxs("div", { className: 'token-balance-item', children: [jsxs("div", { className: 'token-balance-item__row', children: [jsxs("div", { className: 'token-balance-item__name', children: [tokenBalance.logoURI ? (jsx(Image, { src: tokenBalance.logoURI, alt: tokenBalance.symbol, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon' })) : (jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' })), jsx("div", { children: jsx(Typography, { variant: 'body_small', className: 'token-balance-item__title', color: 'primary', children: tokenBalance.name }) })] }), jsxs("div", { className: 'flex', children: [showFiat ? (jsx(Typography, { variant: 'body_small', weight: 'bold', color: 'primary', style: { textAlign: 'right' }, children: formattedFiatValue() })) : null, jsx("div", { className: 'token-balance-item__value', children: jsxs("div", { className: 'token-balance-item__value__balance', "data-testid": 'token-balance-item-balance', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', style: { marginRight: '2px' }, children: roundBalance(String(tokenBalance.balance)) }), jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__symbol', children: tokenBalance.symbol })] }) })] })] }), secondaryAction ? (jsx("button", { type: 'button', onClick: secondaryAction.onClick, disabled: secondaryAction.isLoading, className: 'token-balance-item__secondary-action', "data-testid": (_a = secondaryAction.dataTestId) !== null && _a !== void 0 ? _a : 'token-balance-item-secondary-action', children: jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__secondary-action__label', children: secondaryAction.isLoading
+                        ? 'Working…'
+                        : `${secondaryAction.label} ›` }) })) : null] }, tokenBalance.address));
 };
 
 export { TokenBalanceItem };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceItem/index.d.ts

@@ -1 +1,2 @@
 export { TokenBalanceItem } from './TokenBalanceItem';
+export type { TokenBalanceItemSecondaryAction } from './TokenBalanceItem';

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceList/TokenBalanceList.cjs

@@ -116,9 +116,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TokenBalanceList = ({ tokenBalances }) => {
+const TokenBalanceList = ({ tokenBalances, getSecondaryAction, }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx("ul", { className: 'token-balance-list', children: (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length) === 0 ? (jsxRuntime.jsx("div", { className: 'token-balance-list__empty', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_wallet_information.multi_asset.empty_state', children: t('dyn_wallet_information.multi_asset.empty_state') }) })) : (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.map((tokenBalance, idx) => (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(TokenBalanceItem.TokenBalanceItem, { tokenBalance: tokenBalance }), tokenBalances.length !== idx + 1 ? (jsxRuntime.jsx(Divider.Divider, { className: 'token-balance-list__divider' })) : null] }, idx)))) }));
+    return (jsxRuntime.jsx("ul", { className: 'token-balance-list', children: (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length) === 0 ? (jsxRuntime.jsx("div", { className: 'token-balance-list__empty', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_wallet_information.multi_asset.empty_state', children: t('dyn_wallet_information.multi_asset.empty_state') }) })) : (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.map((tokenBalance, idx) => (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(TokenBalanceItem.TokenBalanceItem, { tokenBalance: tokenBalance, secondaryAction: getSecondaryAction === null || getSecondaryAction === void 0 ? void 0 : getSecondaryAction(tokenBalance) }), tokenBalances.length !== idx + 1 ? (jsxRuntime.jsx(Divider.Divider, { className: 'token-balance-list__divider' })) : null] }, idx)))) }));
 };
 
 exports.TokenBalanceList = TokenBalanceList;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceList/TokenBalanceList.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import type { TokenBalanceItemSecondaryAction } from '../TokenBalanceItem/TokenBalanceItem';
 type TokenBalanceListProps = {
     tokenBalances: TokenBalance[] | undefined;
+    getSecondaryAction?: (tokenBalance: TokenBalance) => TokenBalanceItemSecondaryAction | undefined;
 };
-export declare const TokenBalanceList: ({ tokenBalances }: TokenBalanceListProps) => JSX.Element;
+export declare const TokenBalanceList: ({ tokenBalances, getSecondaryAction, }: TokenBalanceListProps) => JSX.Element;
 export {};

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceList/TokenBalanceList.js

@@ -108,9 +108,9 @@ import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import { TokenBalanceItem } from '../TokenBalanceItem/TokenBalanceItem.js';
 
-const TokenBalanceList = ({ tokenBalances }) => {
+const TokenBalanceList = ({ tokenBalances, getSecondaryAction, }) => {
     const { t } = useTranslation();
-    return (jsx("ul", { className: 'token-balance-list', children: (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length) === 0 ? (jsx("div", { className: 'token-balance-list__empty', children: jsx(Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_wallet_information.multi_asset.empty_state', children: t('dyn_wallet_information.multi_asset.empty_state') }) })) : (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.map((tokenBalance, idx) => (jsxs(React__default.Fragment, { children: [jsx(TokenBalanceItem, { tokenBalance: tokenBalance }), tokenBalances.length !== idx + 1 ? (jsx(Divider, { className: 'token-balance-list__divider' })) : null] }, idx)))) }));
+    return (jsx("ul", { className: 'token-balance-list', children: (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length) === 0 ? (jsx("div", { className: 'token-balance-list__empty', children: jsx(Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_wallet_information.multi_asset.empty_state', children: t('dyn_wallet_information.multi_asset.empty_state') }) })) : (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.map((tokenBalance, idx) => (jsxs(React__default.Fragment, { children: [jsx(TokenBalanceItem, { tokenBalance: tokenBalance, secondaryAction: getSecondaryAction === null || getSecondaryAction === void 0 ? void 0 : getSecondaryAction(tokenBalance) }), tokenBalances.length !== idx + 1 ? (jsx(Divider, { className: 'token-balance-list__divider' })) : null] }, idx)))) }));
 };
 
 export { TokenBalanceList };