@dynamic-labs/sdk-react-core 4.0.0-alpha.29 → 4.0.0-alpha.30

package/CHANGELOG.md

@@ -1,4 +1,21 @@
 
+## [4.0.0-alpha.30](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.29...v4.0.0-alpha.30) (2024-11-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* check wallet limitations from metadata (#7413)
+
+### Bug Fixes
+
+* confirmation ui disabled for solana signall and signTransaction ([#7403](https://github.com/dynamic-labs/dynamic-auth/issues/7403)) ([98a352a](https://github.com/dynamic-labs/dynamic-auth/commit/98a352a826202abad734f00df1b3d19080ecf1e2))
+* get starknet wallets directly from window ([#7421](https://github.com/dynamic-labs/dynamic-auth/issues/7421)) ([13e24f7](https://github.com/dynamic-labs/dynamic-auth/commit/13e24f70accf7747f5137fc3f2b05c00939c3af3))
+* issue with SollanaWalletConnectorWithConfig embedded wallets ([#7405](https://github.com/dynamic-labs/dynamic-auth/issues/7405)) ([f08ecd6](https://github.com/dynamic-labs/dynamic-auth/commit/f08ecd6955faf191177bb9833b7a594637a6c4cc))
+* set override key in starknet injected connector ([#7420](https://github.com/dynamic-labs/dynamic-auth/issues/7420)) ([74b2887](https://github.com/dynamic-labs/dynamic-auth/commit/74b28874661b3bad1e0a0f92aa9d3c987dc71225))
+
+
+* check wallet limitations from metadata ([#7413](https://github.com/dynamic-labs/dynamic-auth/issues/7413)) ([a419de6](https://github.com/dynamic-labs/dynamic-auth/commit/a419de643ea4ff240a27825c10670ba92589b71b))
+
 ## [4.0.0-alpha.29](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.28...v4.0.0-alpha.29) (2024-11-07)
 
 ## [4.0.0-alpha.28](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.27...v4.0.0-alpha.28) (2024-11-07)

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.0.0-alpha.29";
+var version = "4.0.0-alpha.30";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.563",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.0.0-alpha.29";
+var version = "4.0.0-alpha.30";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.563",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.29",
+  "version": "4.0.0-alpha.30",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.563",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -13,16 +13,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.0.0-alpha.29",
-    "@dynamic-labs/iconic": "4.0.0-alpha.29",
-    "@dynamic-labs/logger": "4.0.0-alpha.29",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.29",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.29",
-    "@dynamic-labs/store": "4.0.0-alpha.29",
-    "@dynamic-labs/types": "4.0.0-alpha.29",
-    "@dynamic-labs/utils": "4.0.0-alpha.29",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.29",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.29",
+    "@dynamic-labs/assert-package-version": "4.0.0-alpha.30",
+    "@dynamic-labs/iconic": "4.0.0-alpha.30",
+    "@dynamic-labs/logger": "4.0.0-alpha.30",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.30",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.30",
+    "@dynamic-labs/store": "4.0.0-alpha.30",
+    "@dynamic-labs/types": "4.0.0-alpha.30",
+    "@dynamic-labs/utils": "4.0.0-alpha.30",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.30",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.30",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.cjs

@@ -134,7 +134,7 @@ const AuthProviderIcon = ({ iconSize = 64, showNetworkIcon = false, wallet, }) =
     }
     // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
     if (deniedAddress) {
-        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -148,7 +148,7 @@ const AuthProviderIcon = ({ iconSize = 64, showNetworkIcon = false, wallet, }) =
         user: user !== null && user !== void 0 ? user : userWithMissingInfo,
         wallet: walletForIcon,
     });
-    return (jsxRuntime.jsx(WalletIconWithNetwork.WalletIconWithNetwork, { iconSize: iconSize, Icon: Icon !== null && Icon !== void 0 ? Icon : null, chainName: walletForIcon.chain, showNetwork: showNetworkIcon, walletKey: walletForIcon.key }));
+    return (jsxRuntime.jsx(WalletIconWithNetwork.WalletIconWithNetwork, { iconSize: iconSize, Icon: Icon !== null && Icon !== void 0 ? Icon : null, chainName: walletForIcon.chain, showNetwork: showNetworkIcon, walletKey: walletForIcon.key, iconUrl: walletForIcon.connector.metadata.icon }));
 };
 
 exports.AuthProviderIcon = AuthProviderIcon;

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -130,7 +130,7 @@ const AuthProviderIcon = ({ iconSize = 64, showNetworkIcon = false, wallet, }) =
     }
     // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
     if (deniedAddress) {
-        return (jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+        return (jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -144,7 +144,7 @@ const AuthProviderIcon = ({ iconSize = 64, showNetworkIcon = false, wallet, }) =
         user: user !== null && user !== void 0 ? user : userWithMissingInfo,
         wallet: walletForIcon,
     });
-    return (jsx(WalletIconWithNetwork, { iconSize: iconSize, Icon: Icon !== null && Icon !== void 0 ? Icon : null, chainName: walletForIcon.chain, showNetwork: showNetworkIcon, walletKey: walletForIcon.key }));
+    return (jsx(WalletIconWithNetwork, { iconSize: iconSize, Icon: Icon !== null && Icon !== void 0 ? Icon : null, chainName: walletForIcon.chain, showNetwork: showNetworkIcon, walletKey: walletForIcon.key, iconUrl: walletForIcon.connector.metadata.icon }));
 };
 
 export { AuthProviderIcon };

package/src/lib/components/IconWithStatus/IconWithStatus.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var walletBook = require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/sdk-api-core');
 require('../../utils/constants/values.cjs');
 require('@dynamic-labs/utils');
@@ -17,6 +16,7 @@ require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
+require('@dynamic-labs/wallet-book');
 require('../../store/state/loadingAndLifecycle.cjs');
 require('../../shared/consts/index.cjs');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
@@ -26,17 +26,13 @@ require('../../locale/locale.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var StatusDot = require('../StatusDot/StatusDot.cjs');
-var Icon = require('../Icon/Icon.cjs');
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletKey ? (jsxRuntime.jsx("div", { className: 'inner-icon__container', children: jsxRuntime.jsx("div", { className: classNames.classNames('inner-icon'), children: jsxRuntime.jsx(Icon.Icon, { size: 'medium', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: primaryWalletKey }) }) }) })) : (jsxRuntime.jsx("div", { className: 'inner-icon__container', children: jsxRuntime.jsx("div", { className: classNames.classNames('inner-icon', `inner-icon--${variant}`), children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) }) }));
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('icon-with-status__container', containerClassName || ''), children: [typeof Icon$1 === 'string' ? (jsxRuntime.jsx("img", { style: {
-                    height: pixelToRem.pixelToRem(iconSize),
-                    width: pixelToRem.pixelToRem(iconSize),
-                }, src: Icon$1, alt: '', className: 'icon' })) : (jsxRuntime.jsx(Icon$1, { style: {
-                    height: pixelToRem.pixelToRem(iconSize),
-                    width: pixelToRem.pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] }));
-};
+const IconWithStatus = ({ Icon, InnerIcon, containerClassName, iconSize = 16, variant = 'green', }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('icon-with-status__container', containerClassName || ''), children: [typeof Icon === 'string' ? (jsxRuntime.jsx("img", { style: {
+                height: pixelToRem.pixelToRem(iconSize),
+                width: pixelToRem.pixelToRem(iconSize),
+            }, src: Icon, alt: '', className: 'icon' })) : (jsxRuntime.jsx(Icon, { style: {
+                height: pixelToRem.pixelToRem(iconSize),
+                width: pixelToRem.pixelToRem(iconSize),
+            } })), InnerIcon ? (jsxRuntime.jsx("div", { className: 'inner-icon__container', children: jsxRuntime.jsx("div", { className: classNames.classNames('inner-icon', `inner-icon--${variant}`), children: jsxRuntime.jsx(InnerIcon, {}) }) })) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] }));
 
 exports.IconWithStatus = IconWithStatus;

package/src/lib/components/IconWithStatus/IconWithStatus.d.ts

@@ -5,8 +5,7 @@ type Props = {
     InnerIcon?: Icon;
     containerClassName?: string;
     iconSize?: number;
-    primaryWalletKey?: string;
     variant?: 'green' | 'red' | 'yellow';
 };
-export declare const IconWithStatus: ({ Icon, InnerIcon, primaryWalletKey, containerClassName, iconSize, variant, }: Props) => JSX.Element;
+export declare const IconWithStatus: ({ Icon, InnerIcon, containerClassName, iconSize, variant, }: Props) => JSX.Element;
 export {};

package/src/lib/components/IconWithStatus/IconWithStatus.js

@@ -1,6 +1,5 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api-core';
 import '../../utils/constants/values.js';
 import '@dynamic-labs/utils';
@@ -13,6 +12,7 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
+import '@dynamic-labs/wallet-book';
 import '../../store/state/loadingAndLifecycle.js';
 import '../../shared/consts/index.js';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
@@ -22,17 +22,13 @@ import '../../locale/locale.js';
 import '../../store/state/projectSettings/projectSettings.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { StatusDot } from '../StatusDot/StatusDot.js';
-import { Icon } from '../Icon/Icon.js';
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletKey ? (jsx("div", { className: 'inner-icon__container', children: jsx("div", { className: classNames('inner-icon'), children: jsx(Icon, { size: 'medium', children: jsx(WalletIcon, { walletKey: primaryWalletKey }) }) }) })) : (jsx("div", { className: 'inner-icon__container', children: jsx("div", { className: classNames('inner-icon', `inner-icon--${variant}`), children: InnerIcon && jsx(InnerIcon, {}) }) }));
-    return (jsxs("div", { className: classNames('icon-with-status__container', containerClassName || ''), children: [typeof Icon$1 === 'string' ? (jsx("img", { style: {
-                    height: pixelToRem(iconSize),
-                    width: pixelToRem(iconSize),
-                }, src: Icon$1, alt: '', className: 'icon' })) : (jsx(Icon$1, { style: {
-                    height: pixelToRem(iconSize),
-                    width: pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] }));
-};
+const IconWithStatus = ({ Icon, InnerIcon, containerClassName, iconSize = 16, variant = 'green', }) => (jsxs("div", { className: classNames('icon-with-status__container', containerClassName || ''), children: [typeof Icon === 'string' ? (jsx("img", { style: {
+                height: pixelToRem(iconSize),
+                width: pixelToRem(iconSize),
+            }, src: Icon, alt: '', className: 'icon' })) : (jsx(Icon, { style: {
+                height: pixelToRem(iconSize),
+                width: pixelToRem(iconSize),
+            } })), InnerIcon ? (jsx("div", { className: 'inner-icon__container', children: jsx("div", { className: classNames('inner-icon', `inner-icon--${variant}`), children: jsx(InnerIcon, {}) }) })) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] }));
 
 export { IconWithStatus };

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.cjs

@@ -128,7 +128,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     if (!Object.keys((_b = walletBook$1 === null || walletBook$1 === void 0 ? void 0 : walletBook$1.wallets) !== null && _b !== void 0 ? _b : {}).length) {
         return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'walletlist-footer-content__container' });
     }
-    return (jsxRuntime.jsx("div", { className: 'walletlist-help-content__container', children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, { delay: '300ms', children: [jsxRuntime.jsx("div", { className: 'walletlist-help-content__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) }), jsxRuntime.jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxRuntime.jsxs(Typography.Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', walletBook.getWalletBookWallet(walletBook$1, walletKey).name] }), jsxRuntime.jsx(Typography.Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsxRuntime.jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxRuntime.jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsxRuntime.jsx(Typography.Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
+    return (jsxRuntime.jsx("div", { className: 'walletlist-help-content__container', children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, { delay: '300ms', children: [jsxRuntime.jsx("div", { className: 'walletlist-help-content__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { icon: newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata.icon, walletKey: walletKey, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) }), jsxRuntime.jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxRuntime.jsxs(Typography.Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', walletBook.getWalletBookWallet(walletBook$1, walletKey).name] }), jsxRuntime.jsx(Typography.Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsxRuntime.jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxRuntime.jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsxRuntime.jsx(Typography.Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
 };
 
 exports.WalletListHelpContent = WalletListHelpContent;

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.js

@@ -124,7 +124,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     if (!Object.keys((_b = walletBook === null || walletBook === void 0 ? void 0 : walletBook.wallets) !== null && _b !== void 0 ? _b : {}).length) {
         return jsx(Skeleton, { className: 'walletlist-footer-content__container' });
     }
-    return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', getWalletBookWallet(walletBook, walletKey).name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
+    return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { icon: newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata.icon, walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', getWalletBookWallet(walletBook, walletKey).name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
 };
 
 export { WalletListHelpContent };