@broxus/evm-connect 1.11.10 → 1.11.11

package/dist/style.min.css

@@ -1 +1 @@
-.evm-connect-modal>:not([class]){width:100%}.evm-connect-modal .uk-modal-content{background:var(--evm-connect-modal-content-background);border-radius:var(--evm-connect-modal-content-border-radius);box-shadow:var(--evm-connect-modal-content-box-shadow);color:var(--evm-connect-modal-content-color);padding:var(--evm-connect-modal-content-padding-vertical) var(--evm-connect-modal-content-padding-horizontal)}.evm-connect-modal .uk-modal-header{background:none;padding:0 var(--evm-connect-modal-header-padding-horizontal) var(--evm-connect-modal-header-padding-vertical)}.evm-connect-modal .uk-modal-title{color:var(--evm-connect-modal-title-color);font-size:var(--evm-connect-modal-title-font-size);font-weight:var(--evm-connect-modal-title-font-weight);line-height:var(--evm-connect-modal-title-line-height);text-align:center}.evm-connect-modal .uk-modal-body{padding:var(--evm-connect-modal-body-padding-vertical) var(--evm-connect-modal-body-padding-horizontal)}.evm-connect-modal .uk-modal-body:last-child{padding-bottom:0}.evm-connect-modal .uk-modal-footer{background:none;padding:var(--evm-connect-modal-footer-padding-vertical) var(--evm-connect-modal-footer-padding-horizontal) 0}.evm-connect-drawer .uk-drawer-content-wrapper{--drawer-height:auto}.evm-connect-drawer .uk-drawer-content{background:var(--evm-connect-drawer-content-background);border-radius:var(--evm-connect-drawer-content-border-radius) var(--evm-connect-drawer-content-border-radius) 0 0;box-shadow:none;color:var(--evm-connect-drawer-content-color);padding:var(--evm-connect-drawer-content-padding-vertical) var(--evm-connect-drawer-content-padding-horizontal)}.evm-connect-drawer .uk-drawer-header{padding:0 var(--evm-connect-drawer-header-padding-horizontal) var(--evm-connect-drawer-header-padding-vertical)}.evm-connect-drawer .uk-drawer-title{color:var(--evm-connect-drawer-title-color);font-size:var(--evm-connect-drawer-title-font-size);font-weight:var(--evm-connect-drawer-title-font-weight);line-height:var(--evm-connect-drawer-title-line-height);text-align:center}.evm-connect-drawer .uk-drawer-body{padding:var(--evm-connect-drawer-body-padding-vertical) var(--evm-connect-drawer-body-padding-horizontal)}.evm-connect-drawer .uk-drawer-body:last-child{padding-bottom:0}.evm-connect-drawer .uk-drawer-close,.evm-connect-drawer .uk-modal-close-default{color:var(--close-color,#a5a9b4)}.evm-connect-drawer .uk-drawer-close{--drawer-close-position:var(--modal-close-position,24px)}.evm-connect-drawer .uk-drawer-close:focus,.evm-connect-drawer .uk-drawer-close:hover,.evm-connect-modal .uk-modal-close-default:focus,.evm-connect-modal .uk-modal-close-default:hover{color:var(--close-hover-color,#383838)}.evm-modal-page{box-sizing:border-box;overflow-y:clip;padding-right:var(--global-scroll-width,17px)}.tvm-modal-page body{overflow:hidden;overflow:clip;width:100%}.wcm-overlay{--wcm-z-index:calc(var(--modal-z-index) + 20)}:root{--evm-connect-modal-content-background:var(--modal-content-background,#fff);--evm-connect-modal-content-border-radius:12px;--evm-connect-modal-content-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-modal-content-color:var(--base-body-color,#383838);--evm-connect-modal-content-padding-horizontal:18px;--evm-connect-modal-content-padding-vertical:var(--evm-connect-modal-content-padding-horizontal);--evm-connect-modal-header-padding-horizontal:0;--evm-connect-modal-header-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-modal-title-color:var(--base-heading-color,#383838);--evm-connect-modal-title-font-size:var(--modal-title-font-size,18px);--evm-connect-modal-title-font-weight:500;--evm-connect-modal-title-line-height:var(--modal-title-line-height,22px);--evm-connect-modal-body-padding-horizontal:0;--evm-connect-modal-body-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-modal-footer-padding-horizontal:0;--evm-connect-modal-footer-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-drawer-content-background:var(--drawer-content-background,#fff);--evm-connect-drawer-content-border-radius:16px;--evm-connect-drawer-content-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-drawer-content-color:var(--base-body-color,#383838);--evm-connect-drawer-content-padding-horizontal:24px;--evm-connect-drawer-content-padding-vertical:var(--evm-connect-drawer-content-padding-horizontal);--evm-connect-drawer-header-padding-horizontal:0;--evm-connect-drawer-header-padding-vertical:var(--evm-connect-drawer-content-padding-vertical);--evm-connect-drawer-title-color:var(--base-heading-color,#383838);--evm-connect-drawer-title-font-size:var(--drawer-title-font-size,24px);--evm-connect-drawer-title-font-weight:500;--evm-connect-drawer-title-line-height:var(--drawer-title-line-height,28px);--evm-connect-drawer-body-padding-horizontal:0;--evm-connect-drawer-body-padding-vertical:var(--evm-connect-drawer-content-padding-vertical);--evm-connect-drawer-footer-padding-horizontal:0;--evm-connect-drawer-footer-padding-vertical:var(--evm-connect-drawer-content-padding-vertical)}.evm-connect-connector{display:inline-flex;max-width:max-content}.evm-connect-connector .evm-connect-connector-suffix{position:relative}.evm-connect-connector .evm-connect-dropdown-trigger{align-items:center;cursor:pointer;display:flex;height:100%;padding:var(--evm-connect-dropdown-trigger-vertical-padding) var(--evm-connect-dropdown-trigger-horizontal-padding)}.evm-connect-dropdown{background:var(--evm-connect-dropdown-background);border-radius:var(--evm-connect-dropdown-border-radius);box-shadow:var(--evm-connect-dropdown-box-shadow);color:var(--evm-connect-dropdown-color)}.evm-connect-dropdown .uk-button.uk-button-link{color:var(--evm-connect-dropdown-link-color)}:root{--evm-connect-dropdown-trigger-horizontal-padding:var(--global-small-gutter,8px);--evm-connect-dropdown-trigger-vertical-padding:0;--evm-connect-dropdown-background:var(--dropdown-background,#fff);--evm-connect-dropdown-border-radius:var(--dropdown-border-radius,5px);--evm-connect-dropdown-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-dropdown-color:var(--dropdown-color,#333);--evm-connect-dropdown-link-color:var(--dropdown-color,#0af)}.evm-connect-connection-request .evm-connect-connection-request-back-button{color:var(--close-color,#333);left:var(--modal-close-position);position:absolute;top:var(--modal-close-position)}.evm-connect-connection-request .evm-connect-connection-request-back-button:focus,.evm-connect-connection-request .evm-connect-connection-request-back-button:hover{color:var(--close-hover-color,#5e5e5e)}.evm-connect-connection-request .evm-connect-connection-request-title{color:var(--base-body-color,#333);font-weight:600;margin-bottom:var(--global-small-margin,10px)}.evm-connect-connection-request .evm-connect-connection-request-button{background-color:rgba(0,0,0,.12);border:var(--evm-connect-connection-request-button-border-width) var(--evm-connect-connection-request-button-border-style) var(--evm-connect-connection-request-button-border);border-radius:8px;box-sizing:border-box;color:var(--base-body-color,#383838);line-height:var(--button-line-height,32px)}.evm-connect-connection-request .evm-connect-connection-request-button:focus,.evm-connect-connection-request .evm-connect-connection-request-button:hover{background-color:rgba(0,0,0,.16);border-color:var(--evm-connect-provider-button-hover-border);color:var(--base-body-color,#383838)}:root{--evm-connect-connection-request-button-border-width:2px;--evm-connect-connection-request-button-border-style:solid;--evm-connect-connection-request-button-border:transparent;--evm-connect-connection-request-button-hover-border:var(--global-border,transparent)}.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button{align-content:center;align-items:center;background-color:rgb(0 0 0/8%);border:var(--evm-connect-provider-button-border-width) var(--evm-connect-provider-button-border-style) var(--evm-connect-provider-button-border);border-radius:8px;box-sizing:border-box;color:var(--base-body-color,#383838);display:grid;gap:16px;grid-auto-rows:max-content;grid-template-columns:30px minmax(50%,100%) auto;line-height:normal;min-height:65px;padding:0 20px;text-align:left;width:100%}.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:focus:not(:disabled),.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:hover:not(:disabled){background-color:rgba(0,0,0,.12);border-color:var(--evm-connect-provider-button-hover-border);color:var(--base-body-color,#383838)}.evm-connect-providers-list .evm-connect-provider-title{color:var(--base-body-color,#383838);font-size:18px;font-weight:500}.evm-connect-providers-list .evm-connect-provider-subtitle{max-width:100%;opacity:.8}.evm-connect-providers-list .evm-connect-provider-connected,.evm-connect-providers-list .evm-connect-provider-recent{background:var(--evm-connect-modal-content-background);border-radius:3px;color:var(--global-muted-color,#383838);display:inline-block;font-size:12px;justify-self:flex-end;padding:1px 5px}:root{--evm-connect-provider-button-border-width:2px;--evm-connect-provider-button-border-style:solid;--evm-connect-provider-button-border:transparent;--evm-connect-provider-button-hover-border:var(--global-primary-border,transparent)}.evm-connect-providers-dispatcher{backface-visibility:hidden;display:flex;flex-direction:column;height:inherit;overflow:hidden;transition:height var(--transition-fast-duration,"100ms") var(--ease-in);width:inherit}.evm-connect-providers-list{margin:0}
+.evm-connect-modal>:not([class]){width:100%}.evm-connect-modal .uk-modal-content{background:var(--evm-connect-modal-content-background);border-radius:var(--evm-connect-modal-content-border-radius);box-shadow:var(--evm-connect-modal-content-box-shadow);color:var(--evm-connect-modal-content-color);padding:var(--evm-connect-modal-content-padding-vertical) var(--evm-connect-modal-content-padding-horizontal)}.evm-connect-modal .uk-modal-header{background:none;padding:0 var(--evm-connect-modal-header-padding-horizontal) var(--evm-connect-modal-header-padding-vertical)}.evm-connect-modal .uk-modal-title{color:var(--evm-connect-modal-title-color);font-size:var(--evm-connect-modal-title-font-size);font-weight:var(--evm-connect-modal-title-font-weight);line-height:var(--evm-connect-modal-title-line-height);text-align:center}.evm-connect-modal .uk-modal-body{padding:var(--evm-connect-modal-body-padding-vertical) var(--evm-connect-modal-body-padding-horizontal)}.evm-connect-modal .uk-modal-body:last-child{padding-bottom:0}.evm-connect-modal .uk-modal-footer{background:none;padding:var(--evm-connect-modal-footer-padding-vertical) var(--evm-connect-modal-footer-padding-horizontal) 0}.evm-connect-drawer .uk-drawer-content-wrapper{--drawer-height:auto}.evm-connect-drawer .uk-drawer-content{background:var(--evm-connect-drawer-content-background);border-radius:var(--evm-connect-drawer-content-border-radius) var(--evm-connect-drawer-content-border-radius) 0 0;box-shadow:none;color:var(--evm-connect-drawer-content-color);padding:var(--evm-connect-drawer-content-padding-vertical) var(--evm-connect-drawer-content-padding-horizontal)}.evm-connect-drawer .uk-drawer-header{padding:0 var(--evm-connect-drawer-header-padding-horizontal) var(--evm-connect-drawer-header-padding-vertical)}.evm-connect-drawer .uk-drawer-title{color:var(--evm-connect-drawer-title-color);font-size:var(--evm-connect-drawer-title-font-size);font-weight:var(--evm-connect-drawer-title-font-weight);line-height:var(--evm-connect-drawer-title-line-height);text-align:center}.evm-connect-drawer .uk-drawer-body{padding:var(--evm-connect-drawer-body-padding-vertical) var(--evm-connect-drawer-body-padding-horizontal)}.evm-connect-drawer .uk-drawer-body:last-child{padding-bottom:0}.evm-connect-drawer .uk-drawer-close,.evm-connect-drawer .uk-modal-close-default{color:var(--close-color,#a5a9b4)}.evm-connect-drawer .uk-drawer-close{--drawer-close-position:var(--modal-close-position,24px)}.evm-connect-drawer .uk-drawer-close:focus,.evm-connect-drawer .uk-drawer-close:hover,.evm-connect-modal .uk-modal-close-default:focus,.evm-connect-modal .uk-modal-close-default:hover{color:var(--close-hover-color,#383838)}.evm-modal-page{box-sizing:border-box;overflow-y:clip;padding-right:var(--global-scroll-width,17px)}.tvm-modal-page body{overflow:hidden;overflow:clip;width:100%}.wcm-overlay{--wcm-z-index:calc(var(--modal-z-index) + 20)}:root{--evm-connect-modal-content-background:var(--modal-content-background,#fff);--evm-connect-modal-content-border-radius:12px;--evm-connect-modal-content-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-modal-content-color:var(--base-body-color,#383838);--evm-connect-modal-content-padding-horizontal:18px;--evm-connect-modal-content-padding-vertical:var(--evm-connect-modal-content-padding-horizontal);--evm-connect-modal-header-padding-horizontal:0;--evm-connect-modal-header-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-modal-title-color:var(--base-heading-color,#383838);--evm-connect-modal-title-font-size:var(--modal-title-font-size,18px);--evm-connect-modal-title-font-weight:500;--evm-connect-modal-title-line-height:var(--modal-title-line-height,22px);--evm-connect-modal-body-padding-horizontal:0;--evm-connect-modal-body-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-modal-footer-padding-horizontal:0;--evm-connect-modal-footer-padding-vertical:var(--evm-connect-modal-content-padding-vertical);--evm-connect-drawer-content-background:var(--drawer-content-background,#fff);--evm-connect-drawer-content-border-radius:16px;--evm-connect-drawer-content-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-drawer-content-color:var(--base-body-color,#383838);--evm-connect-drawer-content-padding-horizontal:24px;--evm-connect-drawer-content-padding-vertical:var(--evm-connect-drawer-content-padding-horizontal);--evm-connect-drawer-header-padding-horizontal:0;--evm-connect-drawer-header-padding-vertical:var(--evm-connect-drawer-content-padding-vertical);--evm-connect-drawer-title-color:var(--base-heading-color,#383838);--evm-connect-drawer-title-font-size:var(--drawer-title-font-size,24px);--evm-connect-drawer-title-font-weight:500;--evm-connect-drawer-title-line-height:var(--drawer-title-line-height,28px);--evm-connect-drawer-body-padding-horizontal:0;--evm-connect-drawer-body-padding-vertical:var(--evm-connect-drawer-content-padding-vertical);--evm-connect-drawer-footer-padding-horizontal:0;--evm-connect-drawer-footer-padding-vertical:var(--evm-connect-drawer-content-padding-vertical)}.evm-connect-connector{display:inline-flex;max-width:max-content}.evm-connect-connector .evm-connect-connector-icon{background-color:var(--global-muted-background);border-radius:50%;box-sizing:border-box;height:32px;min-width:32px;width:32px}.evm-connect-connector .evm-connect-connector-suffix{position:relative}.evm-connect-connector .evm-connect-dropdown-trigger{align-items:center;cursor:pointer;display:flex;height:100%;padding:var(--evm-connect-dropdown-trigger-vertical-padding) var(--evm-connect-dropdown-trigger-horizontal-padding)}.evm-connect-dropdown{background:var(--evm-connect-dropdown-background);border-radius:var(--evm-connect-dropdown-border-radius);box-shadow:var(--evm-connect-dropdown-box-shadow);color:var(--evm-connect-dropdown-color)}.evm-connect-dropdown .uk-button.uk-button-link{color:var(--evm-connect-dropdown-link-color)}:root{--evm-connect-dropdown-trigger-horizontal-padding:var(--global-small-gutter,8px);--evm-connect-dropdown-trigger-vertical-padding:0;--evm-connect-dropdown-background:var(--dropdown-background,#fff);--evm-connect-dropdown-border-radius:var(--dropdown-border-radius,5px);--evm-connect-dropdown-box-shadow:0 8px 32px 0 rgba(63,74,111,.12),0 1px 4px 0 rgb(63 74 111/8%);--evm-connect-dropdown-color:var(--dropdown-color,#333);--evm-connect-dropdown-link-color:var(--dropdown-color,#0af)}.evm-connect-connection-request .evm-connect-connection-request-back-button{color:var(--close-color,#333);left:var(--modal-close-position);position:absolute;top:var(--modal-close-position)}.evm-connect-connection-request .evm-connect-connection-request-back-button:focus,.evm-connect-connection-request .evm-connect-connection-request-back-button:hover{color:var(--close-hover-color,#5e5e5e)}.evm-connect-connection-request .evm-connect-connection-request-title{color:var(--base-body-color,#333);font-weight:600;margin-bottom:var(--global-small-margin,10px)}.evm-connect-connection-request .evm-connect-connection-request-button{background-color:rgba(0,0,0,.12);border:var(--evm-connect-connection-request-button-border-width) var(--evm-connect-connection-request-button-border-style) var(--evm-connect-connection-request-button-border);border-radius:8px;box-sizing:border-box;color:var(--base-body-color,#383838);line-height:var(--button-line-height,32px)}.evm-connect-connection-request .evm-connect-connection-request-button:focus,.evm-connect-connection-request .evm-connect-connection-request-button:hover{background-color:rgba(0,0,0,.16);border-color:var(--evm-connect-provider-button-hover-border);color:var(--base-body-color,#383838)}:root{--evm-connect-connection-request-button-border-width:2px;--evm-connect-connection-request-button-border-style:solid;--evm-connect-connection-request-button-border:transparent;--evm-connect-connection-request-button-hover-border:var(--global-border,transparent)}.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button{align-content:center;align-items:center;background-color:rgb(0 0 0/8%);border:var(--evm-connect-provider-button-border-width) var(--evm-connect-provider-button-border-style) var(--evm-connect-provider-button-border);border-radius:8px;box-sizing:border-box;color:var(--base-body-color,#383838);display:grid;gap:16px;grid-auto-rows:max-content;grid-template-columns:30px minmax(50%,100%) auto;line-height:normal;min-height:65px;padding:0 20px;text-align:left;width:100%}.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:focus:not(:disabled),.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:hover:not(:disabled){background-color:rgba(0,0,0,.12);border-color:var(--evm-connect-provider-button-hover-border);color:var(--base-body-color,#383838)}.evm-connect-providers-list .evm-connect-provider-title{color:var(--base-body-color,#383838);font-size:18px;font-weight:500}.evm-connect-providers-list .evm-connect-provider-subtitle{max-width:100%;opacity:.8}.evm-connect-providers-list .evm-connect-provider-connected,.evm-connect-providers-list .evm-connect-provider-recent{background:var(--evm-connect-modal-content-background);border-radius:3px;color:var(--global-muted-color,#383838);display:inline-block;font-size:12px;justify-self:flex-end;padding:1px 5px}:root{--evm-connect-provider-button-border-width:2px;--evm-connect-provider-button-border-style:solid;--evm-connect-provider-button-border:transparent;--evm-connect-provider-button-hover-border:var(--global-primary-border,transparent)}.evm-connect-providers-dispatcher{backface-visibility:hidden;display:flex;flex-direction:column;height:inherit;overflow:hidden;transition:height var(--transition-fast-duration,"100ms") var(--ease-in);width:inherit}.evm-connect-providers-list{margin:0}

package/lib/cjs/components/EvmConnectButton/index.js

@@ -40,18 +40,11 @@ const React = __importStar(require("react"));
 const EvmConnectDialog_1 = require("../../components/EvmConnectDialog");
 const context_1 = require("../../context");
 const utils_1 = require("../../utils");
-exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ children, disabled, network, popupClassName, popupType, type = 'primary', onClose, onConnect, onOpen, ...props }) => {
+exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
     const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = React.useContext(context_1.EvmWalletProvidersContext);
     const { standalone = walletService.providers?.length === 1, ...restProps } = props;
     const [isModalShown, setModalVisibility] = React.useState(false);
-    const connect = React.useCallback(async () => {
-        setModalVisibility(false);
-        await Promise.allSettled([
-            onConnect?.(walletService),
-            walletService.connect(network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined),
-        ]);
-    }, [network, onConnect, walletService]);
     const close = React.useCallback(() => {
         setModalVisibility(false);
         onClose?.();
@@ -60,10 +53,25 @@ exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ children, disabled
         setModalVisibility(true);
         onOpen?.();
     }, [onOpen]);
+    const connect = React.useCallback(async () => {
+        setModalVisibility(false);
+        const networkParams = network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
+        await Promise.allSettled([
+            onConnect?.(walletService),
+            walletService.connect(networkParams).catch(() => {
+                if (walletService.providers?.length > 1) {
+                    open();
+                }
+            }),
+        ]);
+    }, [network, onConnect, open, walletService]);
+    const mergedDisabled = disabled === undefined
+        ? walletService.isInitializing || walletService.isConnecting
+        : disabled;
     return (React.createElement(React.Fragment, null,
-        React.createElement(react_uikit_1.Button, { "aria-disabled": walletService.isInitializing || walletService.isConnecting, disabled: disabled === undefined
-                ? walletService.isInitializing || walletService.isConnecting
-                : disabled, type: type, ...restProps, onClick: standalone ? connect : open }, children),
+        typeof trigger === 'function'
+            ? trigger({ connect: standalone ? connect : open, disabled: mergedDisabled })
+            : (React.createElement(react_uikit_1.Button, { "aria-disabled": mergedDisabled, disabled: mergedDisabled, ...restProps, onClick: standalone ? connect : open })),
         !standalone && (React.createElement(context_1.EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
             React.createElement(EvmConnectDialog_1.EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

package/lib/cjs/components/EvmConnector/index.css

@@ -3,6 +3,15 @@
     max-width: max-content;
 }
 
+.evm-connect-connector .evm-connect-connector-icon {
+    background-color: var(--global-muted-background);
+    border-radius: 50%;
+    box-sizing: border-box;
+    height: 32px;
+    min-width: 32px;
+    width: 32px;
+}
+
 .evm-connect-connector .evm-connect-connector-suffix {
     position: relative;
 }

package/lib/cjs/components/EvmConnector/index.js

@@ -54,7 +54,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
     const walletService = (0, context_1.useEvmWalletService)();
     const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const drop = React.useRef(null);
-    const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
+    const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
     const changeWallet = () => {
         drop.current?.close();
     };
@@ -79,8 +79,11 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
     else if (walletService.isReady) {
         subTitle = `${(0, js_utils_1.formattedTokenAmount)(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
     }
-    let networkIcon = React.createElement(react_components_1.Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
-    if (walletService.network?.icon) {
+    let networkIcon = React.createElement("div", { className: "tvm-connect-connector-icon" }), providerIcon;
+    if (network?.icon) {
+        networkIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: network.icon, size: 32 });
+    }
+    else if (walletService.network?.icon) {
         networkIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
     }
     if (walletService.providerInfo?.icon) {
@@ -105,5 +108,5 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
                     React.createElement(react_uikit_1.List.Item, null,
                         React.createElement(react_uikit_1.Button, { "aria-disabled": walletService.isDisconnecting, className: "evm-connect-logout", disabled: walletService.isDisconnecting, type: "link", onClick: disconnect }, disconnectButtonText)))), placement: "bottom-right" },
                 React.createElement(react_components_1.Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
-            !walletService.isConnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
+            isDisconnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, trigger: connectButtonTrigger, type: connectButtonType }, connectButtonText)))));
 });

package/lib/cjs/services/EvmWalletService.js

@@ -20,19 +20,20 @@ const web3_1 = __importDefault(require("web3"));
 const utils_1 = require("../utils");
 class EvmWalletService extends js_core_1.AbstractStore {
     params;
+    name = 'EvmWalletService';
     constructor(params) {
         super();
         this.params = params;
         this.setData(() => ({
             networks: params?.networks || [],
         }));
+        const hasProvider = params?.providers?.some(provider => provider.id === params.providerId);
         this.setState(() => ({
             isSyncing: undefined,
-            providerId: params?.providerId,
+            providerId: hasProvider ? params?.providerId : undefined,
         }));
         (0, mobx_1.makeObservable)(this);
-        const autoInit = params?.autoInit ?? true;
-        if (autoInit) {
+        if (params?.autoInit ?? true) {
             this._init().catch(reason => {
                 (0, js_utils_1.error)('Wallet init failed with an error', reason);
             });
@@ -52,28 +53,30 @@ class EvmWalletService extends js_core_1.AbstractStore {
      * Manually connect to the wallet
      * @returns {Promise<void>}
      */
-    async connect(chainIdOrParams) {
+    async connect(networkIdOParams) {
         if (this.isConnecting || this.isDisconnecting) {
             return;
         }
         try {
-            const defaultNetworkId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId
+            const defaultNetworkId = typeof networkIdOParams === 'number' ? networkIdOParams : networkIdOParams?.chainId
                 ?? this.params?.defaultNetworkId
                 ?? this.network?.chainId
                 ?? 1;
             const network = this.networks.find(_network => _network.chainId === defaultNetworkId?.toString());
             // eslint-disable-next-line no-nested-ternary
-            const chainParams = typeof chainIdOrParams === 'object'
-                ? chainIdOrParams
+            const networkParams = typeof networkIdOParams === 'object'
+                ? networkIdOParams
                 : network ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
-            await this.connector?.connect(chainParams ?? 1);
+            await this.connector?.connect(networkParams ?? 1);
         }
         catch (e) {
-            (0, js_utils_1.error)('EVM Wallet connect error', e);
+            (0, js_utils_1.error)('Evm Wallet connect error', e);
+            throw e;
         }
     }
     /**
      * Manually disconnect from the wallet
+     * @param {boolean} force
      * @returns {Promise<void>}
      */
     async disconnect(force) {
@@ -217,7 +220,8 @@ class EvmWalletService extends js_core_1.AbstractStore {
      * @returns {Readonly<EvmNetworkConfig|undefined>}
      */
     get network() {
-        return this.networks?.find(network => network.type === 'evm' && network.chainId === this.chainId?.toString());
+        const chainId = this.chainId?.toString() ?? this.params?.defaultNetworkId?.toString();
+        return this.networks?.find(network => network.type === 'evm' && network.chainId === chainId);
     }
     /**
      Returns details about current connected provider
@@ -231,7 +235,7 @@ class EvmWalletService extends js_core_1.AbstractStore {
      * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
      */
     get providers() {
-        return this.params?.providers;
+        return this.params?.providers ?? [];
     }
     /**
      * Returns current network chain id

package/lib/esm/components/EvmConnectButton/index.d.ts

@@ -3,21 +3,24 @@ import * as React from 'react';
 import { type EvmConnectDialogProps } from '../../components/EvmConnectDialog';
 import { type EvmWalletService } from '../../services';
 import { type EvmNetworkConfig } from '../../types';
-export type EvmConnectButtonProps = React.PropsWithChildren<{
+interface TriggerProps {
+    disabled?: boolean;
+    connect: VoidFunction;
+}
+export interface EvmConnectButtonProps extends ButtonProps {
     agreementsNote?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     network?: EvmNetworkConfig;
     popupClassName?: EvmConnectDialogProps['className'];
     popupType?: EvmConnectDialogProps['type'];
-    shape?: ButtonProps['shape'];
-    size?: ButtonProps['size'];
     standalone?: boolean;
-    type?: ButtonProps['type'];
+    trigger?: (props: TriggerProps) => React.ReactNode;
     onClose?: VoidFunction;
     onConnect?: (walletService?: EvmWalletService) => Promise<void> | void;
     onOpen?: VoidFunction;
-}>;
-export declare const EvmConnectButton: (({ children, disabled, network, popupClassName, popupType, type, onClose, onConnect, onOpen, ...props }: EvmConnectButtonProps) => React.JSX.Element) & {
+}
+export declare const EvmConnectButton: (({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }: React.PropsWithChildren<EvmConnectButtonProps>) => React.JSX.Element) & {
     displayName: string;
 };
+export {};

package/lib/esm/components/EvmConnectButton/index.js

@@ -4,18 +4,11 @@ import * as React from 'react';
 import { EvmConnectDialog } from '../../components/EvmConnectDialog';
 import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
 import { convertNetworkToChainParams } from '../../utils';
-export const EvmConnectButton = observer(({ children, disabled, network, popupClassName, popupType, type = 'primary', onClose, onConnect, onOpen, ...props }) => {
+export const EvmConnectButton = observer(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
     const walletService = useEvmWalletService();
     const walletProviders = React.useContext(EvmWalletProvidersContext);
     const { standalone = walletService.providers?.length === 1, ...restProps } = props;
     const [isModalShown, setModalVisibility] = React.useState(false);
-    const connect = React.useCallback(async () => {
-        setModalVisibility(false);
-        await Promise.allSettled([
-            onConnect?.(walletService),
-            walletService.connect(network?.chainId ? convertNetworkToChainParams(network) : undefined),
-        ]);
-    }, [network, onConnect, walletService]);
     const close = React.useCallback(() => {
         setModalVisibility(false);
         onClose?.();
@@ -24,10 +17,25 @@ export const EvmConnectButton = observer(({ children, disabled, network, popupCl
         setModalVisibility(true);
         onOpen?.();
     }, [onOpen]);
+    const connect = React.useCallback(async () => {
+        setModalVisibility(false);
+        const networkParams = network?.chainId ? convertNetworkToChainParams(network) : undefined;
+        await Promise.allSettled([
+            onConnect?.(walletService),
+            walletService.connect(networkParams).catch(() => {
+                if (walletService.providers?.length > 1) {
+                    open();
+                }
+            }),
+        ]);
+    }, [network, onConnect, open, walletService]);
+    const mergedDisabled = disabled === undefined
+        ? walletService.isInitializing || walletService.isConnecting
+        : disabled;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { "aria-disabled": walletService.isInitializing || walletService.isConnecting, disabled: disabled === undefined
-                ? walletService.isInitializing || walletService.isConnecting
-                : disabled, type: type, ...restProps, onClick: standalone ? connect : open }, children),
+        typeof trigger === 'function'
+            ? trigger({ connect: standalone ? connect : open, disabled: mergedDisabled })
+            : (React.createElement(Button, { "aria-disabled": mergedDisabled, disabled: mergedDisabled, ...restProps, onClick: standalone ? connect : open })),
         !standalone && (React.createElement(EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
             React.createElement(EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

package/lib/esm/components/EvmConnector/index.css

@@ -3,6 +3,15 @@
     max-width: max-content;
 }
 
+.evm-connect-connector .evm-connect-connector-icon {
+    background-color: var(--global-muted-background);
+    border-radius: 50%;
+    box-sizing: border-box;
+    height: 32px;
+    min-width: 32px;
+    width: 32px;
+}
+
 .evm-connect-connector .evm-connect-connector-suffix {
     position: relative;
 }

package/lib/esm/components/EvmConnector/index.d.ts

@@ -7,6 +7,10 @@ export interface EvmConnectorProps {
     className?: string;
     connectButtonShape?: ButtonProps['shape'];
     connectButtonText?: React.ReactNode;
+    connectButtonTrigger?: (props: {
+        disabled?: boolean;
+        connect: VoidFunction;
+    }) => React.ReactNode;
     connectButtonType?: ButtonProps['type'];
     disconnectButtonText?: React.ReactNode;
     network?: EvmNetworkConfig;

package/lib/esm/components/EvmConnector/index.js

@@ -15,7 +15,7 @@ export const EvmConnector = observer((props) => {
     const walletService = useEvmWalletService();
     const [, setRecentMeta] = useRecentConnectionMeta();
     const drop = React.useRef(null);
-    const { changeWalletButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(messages.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonType, disconnectButtonText = intl.formatMessage(messages.EVM_CONNECT_DISCONNECT_BTN_TEXT), network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
+    const { changeWalletButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(messages.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(messages.EVM_CONNECT_DISCONNECT_BTN_TEXT), network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
     const changeWallet = () => {
         drop.current?.close();
     };
@@ -40,8 +40,11 @@ export const EvmConnector = observer((props) => {
     else if (walletService.isReady) {
         subTitle = `${formattedTokenAmount(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
     }
-    let networkIcon = React.createElement(Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
-    if (walletService.network?.icon) {
+    let networkIcon = React.createElement("div", { className: "tvm-connect-connector-icon" }), providerIcon;
+    if (network?.icon) {
+        networkIcon = React.createElement(TokenIcon, { iconUrl: network.icon, size: 32 });
+    }
+    else if (walletService.network?.icon) {
         networkIcon = React.createElement(TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
     }
     if (walletService.providerInfo?.icon) {
@@ -66,5 +69,5 @@ export const EvmConnector = observer((props) => {
                     React.createElement(List.Item, null,
                         React.createElement(Button, { "aria-disabled": walletService.isDisconnecting, className: "evm-connect-logout", disabled: walletService.isDisconnecting, type: "link", onClick: disconnect }, disconnectButtonText)))), placement: "bottom-right" },
                 React.createElement(Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
-            !walletService.isConnected && (React.createElement(EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
+            isDisconnected && (React.createElement(EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, trigger: connectButtonTrigger, type: connectButtonType }, connectButtonText)))));
 });

package/lib/esm/services/EvmWalletService.d.ts

@@ -26,6 +26,7 @@ export interface EvmWalletServiceState {
 }
 export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData, EvmWalletServiceState> {
     protected readonly params?: Readonly<EvmWalletServiceCtorParams> | undefined;
+    readonly name = "EvmWalletService";
     constructor(params?: Readonly<EvmWalletServiceCtorParams> | undefined);
     /**
      * Define current provider connector
@@ -37,9 +38,10 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
      * Manually connect to the wallet
      * @returns {Promise<void>}
      */
-    connect(chainIdOrParams?: number | AddEthereumChainParams): Promise<void>;
+    connect(networkIdOParams?: number | AddEthereumChainParams): Promise<void>;
     /**
      * Manually disconnect from the wallet
+     * @param {boolean} force
      * @returns {Promise<void>}
      */
     disconnect(force?: boolean): Promise<void>;
@@ -138,7 +140,7 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
      * The list of the supported providers
      * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
      */
-    get providers(): Readonly<EvmWalletProviderConfig[] | undefined>;
+    get providers(): Readonly<EvmWalletProviderConfig[]>;
     /**
      * Returns current network chain id
      * @returns {EthereumConnector["chainId"]}

package/lib/esm/services/EvmWalletService.js

@@ -14,19 +14,20 @@ import Web3 from 'web3';
 import { convertNetworkToChainParams } from '../utils';
 export class EvmWalletService extends AbstractStore {
     params;
+    name = 'EvmWalletService';
     constructor(params) {
         super();
         this.params = params;
         this.setData(() => ({
             networks: params?.networks || [],
         }));
+        const hasProvider = params?.providers?.some(provider => provider.id === params.providerId);
         this.setState(() => ({
             isSyncing: undefined,
-            providerId: params?.providerId,
+            providerId: hasProvider ? params?.providerId : undefined,
         }));
         makeObservable(this);
-        const autoInit = params?.autoInit ?? true;
-        if (autoInit) {
+        if (params?.autoInit ?? true) {
             this._init().catch(reason => {
                 error('Wallet init failed with an error', reason);
             });
@@ -46,28 +47,30 @@ export class EvmWalletService extends AbstractStore {
      * Manually connect to the wallet
      * @returns {Promise<void>}
      */
-    async connect(chainIdOrParams) {
+    async connect(networkIdOParams) {
         if (this.isConnecting || this.isDisconnecting) {
             return;
         }
         try {
-            const defaultNetworkId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId
+            const defaultNetworkId = typeof networkIdOParams === 'number' ? networkIdOParams : networkIdOParams?.chainId
                 ?? this.params?.defaultNetworkId
                 ?? this.network?.chainId
                 ?? 1;
             const network = this.networks.find(_network => _network.chainId === defaultNetworkId?.toString());
             // eslint-disable-next-line no-nested-ternary
-            const chainParams = typeof chainIdOrParams === 'object'
-                ? chainIdOrParams
+            const networkParams = typeof networkIdOParams === 'object'
+                ? networkIdOParams
                 : network ? convertNetworkToChainParams(network) : undefined;
-            await this.connector?.connect(chainParams ?? 1);
+            await this.connector?.connect(networkParams ?? 1);
         }
         catch (e) {
-            error('EVM Wallet connect error', e);
+            error('Evm Wallet connect error', e);
+            throw e;
         }
     }
     /**
      * Manually disconnect from the wallet
+     * @param {boolean} force
      * @returns {Promise<void>}
      */
     async disconnect(force) {
@@ -211,7 +214,8 @@ export class EvmWalletService extends AbstractStore {
      * @returns {Readonly<EvmNetworkConfig|undefined>}
      */
     get network() {
-        return this.networks?.find(network => network.type === 'evm' && network.chainId === this.chainId?.toString());
+        const chainId = this.chainId?.toString() ?? this.params?.defaultNetworkId?.toString();
+        return this.networks?.find(network => network.type === 'evm' && network.chainId === chainId);
     }
     /**
      Returns details about current connected provider
@@ -225,7 +229,7 @@ export class EvmWalletService extends AbstractStore {
      * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
      */
     get providers() {
-        return this.params?.providers;
+        return this.params?.providers ?? [];
     }
     /**
      * Returns current network chain id

package/package.json

@@ -1,11 +1,12 @@
 {
     "name": "@broxus/evm-connect",
-    "version": "1.11.10",
+    "version": "1.11.11",
     "description": "Ethereum wallets connector.",
     "license": "MIT",
     "keywords": [
         "blockchain",
         "evm",
+        "dapp",
         "connect",
         "web3"
     ],
@@ -95,5 +96,5 @@
         "web3-types": "^1.x",
         "web3-utils": "^4.x"
     },
-    "gitHead": "38f3971affac4af6f814720ecea063dc105ef105"
+    "gitHead": "56a1bbceddafc82041ea6eafe24d383cafb1f5d9"
 }