@broxus/evm-connect 1.11.10 → 1.11.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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}
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)}.evm-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}
@@ -40,18 +40,11 @@ const React = __importStar(require("react"));
40
40
  const EvmConnectDialog_1 = require("../../components/EvmConnectDialog");
41
41
  const context_1 = require("../../context");
42
42
  const utils_1 = require("../../utils");
43
- exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ children, disabled, network, popupClassName, popupType, type = 'primary', onClose, onConnect, onOpen, ...props }) => {
43
+ exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
44
44
  const walletService = (0, context_1.useEvmWalletService)();
45
45
  const walletProviders = React.useContext(context_1.EvmWalletProvidersContext);
46
46
  const { standalone = walletService.providers?.length === 1, ...restProps } = props;
47
47
  const [isModalShown, setModalVisibility] = React.useState(false);
48
- const connect = React.useCallback(async () => {
49
- setModalVisibility(false);
50
- await Promise.allSettled([
51
- onConnect?.(walletService),
52
- walletService.connect(network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined),
53
- ]);
54
- }, [network, onConnect, walletService]);
55
48
  const close = React.useCallback(() => {
56
49
  setModalVisibility(false);
57
50
  onClose?.();
@@ -60,10 +53,25 @@ exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ children, disabled
60
53
  setModalVisibility(true);
61
54
  onOpen?.();
62
55
  }, [onOpen]);
56
+ const connect = React.useCallback(async () => {
57
+ setModalVisibility(false);
58
+ const networkParams = network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
59
+ await Promise.allSettled([
60
+ onConnect?.(walletService),
61
+ walletService.connect(networkParams).catch(() => {
62
+ if (walletService.providers?.length > 1) {
63
+ open();
64
+ }
65
+ }),
66
+ ]);
67
+ }, [network, onConnect, open, walletService]);
68
+ const mergedDisabled = disabled === undefined
69
+ ? walletService.isInitializing || walletService.isConnecting
70
+ : disabled;
63
71
  return (React.createElement(React.Fragment, null,
64
- React.createElement(react_uikit_1.Button, { "aria-disabled": walletService.isInitializing || walletService.isConnecting, disabled: disabled === undefined
65
- ? walletService.isInitializing || walletService.isConnecting
66
- : disabled, type: type, ...restProps, onClick: standalone ? connect : open }, children),
72
+ typeof trigger === 'function'
73
+ ? trigger({ connect: standalone ? connect : open, disabled: mergedDisabled })
74
+ : (React.createElement(react_uikit_1.Button, { "aria-disabled": mergedDisabled, disabled: mergedDisabled, ...restProps, onClick: standalone ? connect : open })),
67
75
  !standalone && (React.createElement(context_1.EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
68
76
  React.createElement(EvmConnectDialog_1.EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
69
77
  });
@@ -92,7 +92,7 @@
92
92
  padding-right: var(--global-scroll-width, 17px);
93
93
  }
94
94
 
95
- .tvm-modal-page body {
95
+ .evm-modal-page body {
96
96
  overflow: hidden;
97
97
  overflow: clip;
98
98
  width: 100%;
@@ -3,6 +3,15 @@
3
3
  max-width: max-content;
4
4
  }
5
5
 
6
+ .evm-connect-connector .evm-connect-connector-icon {
7
+ background-color: var(--global-muted-background);
8
+ border-radius: 50%;
9
+ box-sizing: border-box;
10
+ height: 32px;
11
+ min-width: 32px;
12
+ width: 32px;
13
+ }
14
+
6
15
  .evm-connect-connector .evm-connect-connector-suffix {
7
16
  position: relative;
8
17
  }
@@ -54,7 +54,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
54
54
  const walletService = (0, context_1.useEvmWalletService)();
55
55
  const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
56
56
  const drop = React.useRef(null);
57
- 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;
57
+ 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, warnUnsupportedNetwork = true, } = props;
58
58
  const changeWallet = () => {
59
59
  drop.current?.close();
60
60
  };
@@ -70,7 +70,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
70
70
  };
71
71
  const isDisconnected = !walletService.isConnected || walletService.address === undefined;
72
72
  let subTitle = intl.formatMessage(intl_1.default.EVM_CONNECT_NOT_CONNECTED_HINT);
73
- if (walletService.isUnsupportedNetwork && !isDisconnected) {
73
+ if (walletService.isUnsupportedNetwork && !isDisconnected && warnUnsupportedNetwork) {
74
74
  subTitle = (React.createElement(react_uikit_1.Text, { color: "danger" }, intl.formatMessage(intl_1.default.EVM_CONNECT_UNSUPPORTED_NETWORK_WARNING)));
75
75
  }
76
76
  else if (walletService.isSyncing) {
@@ -79,14 +79,17 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
79
79
  else if (walletService.isReady) {
80
80
  subTitle = `${(0, js_utils_1.formattedTokenAmount)(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
81
81
  }
82
- let networkIcon = React.createElement(react_components_1.Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
83
- if (walletService.network?.icon) {
82
+ let networkIcon = React.createElement("div", { className: "evm-connect-connector-icon" }), providerIcon;
83
+ if (network?.icon) {
84
+ networkIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: network.icon, size: 32 });
85
+ }
86
+ else if (walletService.network?.icon) {
84
87
  networkIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
85
88
  }
86
89
  if (walletService.providerInfo?.icon) {
87
90
  providerIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: walletService.providerInfo.icon, size: 16 });
88
91
  }
89
- if (walletService.isUnsupportedNetwork && !isDisconnected) {
92
+ if (walletService.isUnsupportedNetwork && !isDisconnected && warnUnsupportedNetwork) {
90
93
  networkIcon = React.createElement(react_components_1.Icon, { icon: "danger", ratio: 1.6 });
91
94
  }
92
95
  const networkName = network?.shortName ?? walletService.network?.shortName;
@@ -105,5 +108,5 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
105
108
  React.createElement(react_uikit_1.List.Item, null,
106
109
  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" },
107
110
  React.createElement(react_components_1.Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
108
- !walletService.isConnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
111
+ isDisconnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, trigger: connectButtonTrigger, type: connectButtonType }, connectButtonText)))));
109
112
  });
@@ -87,13 +87,13 @@ exports.ProviderButton = (0, mobx_react_lite_1.observer)((props) => {
87
87
  if (!hasProvider) {
88
88
  const [platform = 'UNKNOWN', uri] = (0, utils_1.getEvmProviderPlatformLink)({ ...providerConfig.info.links }) ?? [];
89
89
  if (!uri && homepage) {
90
- return (React.createElement(react_uikit_1.Button, { className: "tvm-connect-provider-button", href: homepage, rel: "noopener noreferrer", target: "_blank" },
91
- React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(react_components_1.TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
92
- React.createElement("span", { className: "tvm-connect-provider-title" },
90
+ return (React.createElement(react_uikit_1.Button, { className: "evm-connect-provider-button", href: homepage, rel: "noopener noreferrer", target: "_blank" },
91
+ React.createElement("span", { className: "evm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(react_components_1.TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
92
+ React.createElement("span", { className: "evm-connect-provider-title" },
93
93
  intl.formatMessage(intl_1.default.EVM_CONNECT_PROVIDER_HOMEPAGE, {
94
94
  providerName: providerConfig.info.name ?? '',
95
95
  }),
96
- React.createElement(react_uikit_1.Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(intl_1.default.EVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
96
+ React.createElement(react_uikit_1.Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(intl_1.default.EVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
97
97
  }
98
98
  let text;
99
99
  try {
@@ -108,7 +108,7 @@ exports.ProviderButton = (0, mobx_react_lite_1.observer)((props) => {
108
108
  intl.formatMessage(intl_1.default.EVM_CONNECT_INSTALL_PROVIDER, {
109
109
  providerName: providerConfig.info.name ?? '',
110
110
  }),
111
- React.createElement(react_uikit_1.Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, text))));
111
+ React.createElement(react_uikit_1.Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, text))));
112
112
  }
113
113
  const isConnected = walletService.isConnected && walletService.providerId === providerConfig.id;
114
114
  const isConnecting = walletService.isConnecting && walletProviders.connectingProvider?.id === providerConfig.id;
@@ -20,19 +20,20 @@ const web3_1 = __importDefault(require("web3"));
20
20
  const utils_1 = require("../utils");
21
21
  class EvmWalletService extends js_core_1.AbstractStore {
22
22
  params;
23
+ name = 'EvmWalletService';
23
24
  constructor(params) {
24
25
  super();
25
26
  this.params = params;
26
27
  this.setData(() => ({
27
28
  networks: params?.networks || [],
28
29
  }));
30
+ const hasProvider = params?.providers?.some(provider => provider.id === params.providerId);
29
31
  this.setState(() => ({
30
32
  isSyncing: undefined,
31
- providerId: params?.providerId,
33
+ providerId: hasProvider ? params?.providerId : undefined,
32
34
  }));
33
35
  (0, mobx_1.makeObservable)(this);
34
- const autoInit = params?.autoInit ?? true;
35
- if (autoInit) {
36
+ if (params?.autoInit ?? true) {
36
37
  this._init().catch(reason => {
37
38
  (0, js_utils_1.error)('Wallet init failed with an error', reason);
38
39
  });
@@ -52,28 +53,30 @@ class EvmWalletService extends js_core_1.AbstractStore {
52
53
  * Manually connect to the wallet
53
54
  * @returns {Promise<void>}
54
55
  */
55
- async connect(chainIdOrParams) {
56
+ async connect(networkIdOParams) {
56
57
  if (this.isConnecting || this.isDisconnecting) {
57
58
  return;
58
59
  }
59
60
  try {
60
- const defaultNetworkId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId
61
+ const defaultNetworkId = typeof networkIdOParams === 'number' ? networkIdOParams : networkIdOParams?.chainId
61
62
  ?? this.params?.defaultNetworkId
62
63
  ?? this.network?.chainId
63
64
  ?? 1;
64
65
  const network = this.networks.find(_network => _network.chainId === defaultNetworkId?.toString());
65
66
  // eslint-disable-next-line no-nested-ternary
66
- const chainParams = typeof chainIdOrParams === 'object'
67
- ? chainIdOrParams
67
+ const networkParams = typeof networkIdOParams === 'object'
68
+ ? networkIdOParams
68
69
  : network ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
69
- await this.connector?.connect(chainParams ?? 1);
70
+ await this.connector?.connect(networkParams ?? 1);
70
71
  }
71
72
  catch (e) {
72
- (0, js_utils_1.error)('EVM Wallet connect error', e);
73
+ (0, js_utils_1.error)('Evm Wallet connect error', e);
74
+ throw e;
73
75
  }
74
76
  }
75
77
  /**
76
78
  * Manually disconnect from the wallet
79
+ * @param {boolean} force
77
80
  * @returns {Promise<void>}
78
81
  */
79
82
  async disconnect(force) {
@@ -217,7 +220,8 @@ class EvmWalletService extends js_core_1.AbstractStore {
217
220
  * @returns {Readonly<EvmNetworkConfig|undefined>}
218
221
  */
219
222
  get network() {
220
- return this.networks?.find(network => network.type === 'evm' && network.chainId === this.chainId?.toString());
223
+ const chainId = this.chainId?.toString() ?? this.params?.defaultNetworkId?.toString();
224
+ return this.networks?.find(network => network.type === 'evm' && network.chainId === chainId);
221
225
  }
222
226
  /**
223
227
  Returns details about current connected provider
@@ -231,7 +235,7 @@ class EvmWalletService extends js_core_1.AbstractStore {
231
235
  * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
232
236
  */
233
237
  get providers() {
234
- return this.params?.providers;
238
+ return this.params?.providers ?? [];
235
239
  }
236
240
  /**
237
241
  * Returns current network chain id
@@ -3,21 +3,24 @@ import * as React from 'react';
3
3
  import { type EvmConnectDialogProps } from '../../components/EvmConnectDialog';
4
4
  import { type EvmWalletService } from '../../services';
5
5
  import { type EvmNetworkConfig } from '../../types';
6
- export type EvmConnectButtonProps = React.PropsWithChildren<{
6
+ interface TriggerProps {
7
+ disabled?: boolean;
8
+ connect: VoidFunction;
9
+ }
10
+ export interface EvmConnectButtonProps extends ButtonProps {
7
11
  agreementsNote?: React.ReactNode;
8
12
  className?: string;
9
13
  disabled?: boolean;
10
14
  network?: EvmNetworkConfig;
11
15
  popupClassName?: EvmConnectDialogProps['className'];
12
16
  popupType?: EvmConnectDialogProps['type'];
13
- shape?: ButtonProps['shape'];
14
- size?: ButtonProps['size'];
15
17
  standalone?: boolean;
16
- type?: ButtonProps['type'];
18
+ trigger?: (props: TriggerProps) => React.ReactNode;
17
19
  onClose?: VoidFunction;
18
20
  onConnect?: (walletService?: EvmWalletService) => Promise<void> | void;
19
21
  onOpen?: VoidFunction;
20
- }>;
21
- export declare const EvmConnectButton: (({ children, disabled, network, popupClassName, popupType, type, onClose, onConnect, onOpen, ...props }: EvmConnectButtonProps) => React.JSX.Element) & {
22
+ }
23
+ export declare const EvmConnectButton: (({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }: React.PropsWithChildren<EvmConnectButtonProps>) => React.JSX.Element) & {
22
24
  displayName: string;
23
25
  };
26
+ export {};
@@ -4,18 +4,11 @@ import * as React from 'react';
4
4
  import { EvmConnectDialog } from '../../components/EvmConnectDialog';
5
5
  import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
6
6
  import { convertNetworkToChainParams } from '../../utils';
7
- export const EvmConnectButton = observer(({ children, disabled, network, popupClassName, popupType, type = 'primary', onClose, onConnect, onOpen, ...props }) => {
7
+ export const EvmConnectButton = observer(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
8
8
  const walletService = useEvmWalletService();
9
9
  const walletProviders = React.useContext(EvmWalletProvidersContext);
10
10
  const { standalone = walletService.providers?.length === 1, ...restProps } = props;
11
11
  const [isModalShown, setModalVisibility] = React.useState(false);
12
- const connect = React.useCallback(async () => {
13
- setModalVisibility(false);
14
- await Promise.allSettled([
15
- onConnect?.(walletService),
16
- walletService.connect(network?.chainId ? convertNetworkToChainParams(network) : undefined),
17
- ]);
18
- }, [network, onConnect, walletService]);
19
12
  const close = React.useCallback(() => {
20
13
  setModalVisibility(false);
21
14
  onClose?.();
@@ -24,10 +17,25 @@ export const EvmConnectButton = observer(({ children, disabled, network, popupCl
24
17
  setModalVisibility(true);
25
18
  onOpen?.();
26
19
  }, [onOpen]);
20
+ const connect = React.useCallback(async () => {
21
+ setModalVisibility(false);
22
+ const networkParams = network?.chainId ? convertNetworkToChainParams(network) : undefined;
23
+ await Promise.allSettled([
24
+ onConnect?.(walletService),
25
+ walletService.connect(networkParams).catch(() => {
26
+ if (walletService.providers?.length > 1) {
27
+ open();
28
+ }
29
+ }),
30
+ ]);
31
+ }, [network, onConnect, open, walletService]);
32
+ const mergedDisabled = disabled === undefined
33
+ ? walletService.isInitializing || walletService.isConnecting
34
+ : disabled;
27
35
  return (React.createElement(React.Fragment, null,
28
- React.createElement(Button, { "aria-disabled": walletService.isInitializing || walletService.isConnecting, disabled: disabled === undefined
29
- ? walletService.isInitializing || walletService.isConnecting
30
- : disabled, type: type, ...restProps, onClick: standalone ? connect : open }, children),
36
+ typeof trigger === 'function'
37
+ ? trigger({ connect: standalone ? connect : open, disabled: mergedDisabled })
38
+ : (React.createElement(Button, { "aria-disabled": mergedDisabled, disabled: mergedDisabled, ...restProps, onClick: standalone ? connect : open })),
31
39
  !standalone && (React.createElement(EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
32
40
  React.createElement(EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
33
41
  });
@@ -92,7 +92,7 @@
92
92
  padding-right: var(--global-scroll-width, 17px);
93
93
  }
94
94
 
95
- .tvm-modal-page body {
95
+ .evm-modal-page body {
96
96
  overflow: hidden;
97
97
  overflow: clip;
98
98
  width: 100%;
@@ -3,6 +3,15 @@
3
3
  max-width: max-content;
4
4
  }
5
5
 
6
+ .evm-connect-connector .evm-connect-connector-icon {
7
+ background-color: var(--global-muted-background);
8
+ border-radius: 50%;
9
+ box-sizing: border-box;
10
+ height: 32px;
11
+ min-width: 32px;
12
+ width: 32px;
13
+ }
14
+
6
15
  .evm-connect-connector .evm-connect-connector-suffix {
7
16
  position: relative;
8
17
  }
@@ -7,6 +7,10 @@ export interface EvmConnectorProps {
7
7
  className?: string;
8
8
  connectButtonShape?: ButtonProps['shape'];
9
9
  connectButtonText?: React.ReactNode;
10
+ connectButtonTrigger?: (props: {
11
+ disabled?: boolean;
12
+ connect: VoidFunction;
13
+ }) => React.ReactNode;
10
14
  connectButtonType?: ButtonProps['type'];
11
15
  disconnectButtonText?: React.ReactNode;
12
16
  network?: EvmNetworkConfig;
@@ -15,6 +19,7 @@ export interface EvmConnectorProps {
15
19
  showDropMenu?: boolean;
16
20
  showSubIcon?: boolean;
17
21
  standalone?: boolean;
22
+ warnUnsupportedNetwork?: boolean;
18
23
  }
19
24
  export declare const EvmConnector: ((props: EvmConnectorProps) => React.JSX.Element) & {
20
25
  displayName: string;
@@ -15,7 +15,7 @@ export const EvmConnector = observer((props) => {
15
15
  const walletService = useEvmWalletService();
16
16
  const [, setRecentMeta] = useRecentConnectionMeta();
17
17
  const drop = React.useRef(null);
18
- 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;
18
+ 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, warnUnsupportedNetwork = true, } = props;
19
19
  const changeWallet = () => {
20
20
  drop.current?.close();
21
21
  };
@@ -31,7 +31,7 @@ export const EvmConnector = observer((props) => {
31
31
  };
32
32
  const isDisconnected = !walletService.isConnected || walletService.address === undefined;
33
33
  let subTitle = intl.formatMessage(messages.EVM_CONNECT_NOT_CONNECTED_HINT);
34
- if (walletService.isUnsupportedNetwork && !isDisconnected) {
34
+ if (walletService.isUnsupportedNetwork && !isDisconnected && warnUnsupportedNetwork) {
35
35
  subTitle = (React.createElement(Text, { color: "danger" }, intl.formatMessage(messages.EVM_CONNECT_UNSUPPORTED_NETWORK_WARNING)));
36
36
  }
37
37
  else if (walletService.isSyncing) {
@@ -40,14 +40,17 @@ export const EvmConnector = observer((props) => {
40
40
  else if (walletService.isReady) {
41
41
  subTitle = `${formattedTokenAmount(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
42
42
  }
43
- let networkIcon = React.createElement(Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
44
- if (walletService.network?.icon) {
43
+ let networkIcon = React.createElement("div", { className: "evm-connect-connector-icon" }), providerIcon;
44
+ if (network?.icon) {
45
+ networkIcon = React.createElement(TokenIcon, { iconUrl: network.icon, size: 32 });
46
+ }
47
+ else if (walletService.network?.icon) {
45
48
  networkIcon = React.createElement(TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
46
49
  }
47
50
  if (walletService.providerInfo?.icon) {
48
51
  providerIcon = React.createElement(TokenIcon, { iconUrl: walletService.providerInfo.icon, size: 16 });
49
52
  }
50
- if (walletService.isUnsupportedNetwork && !isDisconnected) {
53
+ if (walletService.isUnsupportedNetwork && !isDisconnected && warnUnsupportedNetwork) {
51
54
  networkIcon = React.createElement(Icon, { icon: "danger", ratio: 1.6 });
52
55
  }
53
56
  const networkName = network?.shortName ?? walletService.network?.shortName;
@@ -66,5 +69,5 @@ export const EvmConnector = observer((props) => {
66
69
  React.createElement(List.Item, null,
67
70
  React.createElement(Button, { "aria-disabled": walletService.isDisconnecting, className: "evm-connect-logout", disabled: walletService.isDisconnecting, type: "link", onClick: disconnect }, disconnectButtonText)))), placement: "bottom-right" },
68
71
  React.createElement(Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
69
- !walletService.isConnected && (React.createElement(EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
72
+ isDisconnected && (React.createElement(EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, trigger: connectButtonTrigger, type: connectButtonType }, connectButtonText)))));
70
73
  });
@@ -48,13 +48,13 @@ export const ProviderButton = observer((props) => {
48
48
  if (!hasProvider) {
49
49
  const [platform = 'UNKNOWN', uri] = getEvmProviderPlatformLink({ ...providerConfig.info.links }) ?? [];
50
50
  if (!uri && homepage) {
51
- return (React.createElement(Button, { className: "tvm-connect-provider-button", href: homepage, rel: "noopener noreferrer", target: "_blank" },
52
- React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
53
- React.createElement("span", { className: "tvm-connect-provider-title" },
51
+ return (React.createElement(Button, { className: "evm-connect-provider-button", href: homepage, rel: "noopener noreferrer", target: "_blank" },
52
+ React.createElement("span", { className: "evm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
53
+ React.createElement("span", { className: "evm-connect-provider-title" },
54
54
  intl.formatMessage(messages.EVM_CONNECT_PROVIDER_HOMEPAGE, {
55
55
  providerName: providerConfig.info.name ?? '',
56
56
  }),
57
- React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(messages.EVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
57
+ React.createElement(Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(messages.EVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
58
58
  }
59
59
  let text;
60
60
  try {
@@ -69,7 +69,7 @@ export const ProviderButton = observer((props) => {
69
69
  intl.formatMessage(messages.EVM_CONNECT_INSTALL_PROVIDER, {
70
70
  providerName: providerConfig.info.name ?? '',
71
71
  }),
72
- React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, text))));
72
+ React.createElement(Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, text))));
73
73
  }
74
74
  const isConnected = walletService.isConnected && walletService.providerId === providerConfig.id;
75
75
  const isConnecting = walletService.isConnecting && walletProviders.connectingProvider?.id === providerConfig.id;
@@ -26,6 +26,7 @@ export interface EvmWalletServiceState {
26
26
  }
27
27
  export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData, EvmWalletServiceState> {
28
28
  protected readonly params?: Readonly<EvmWalletServiceCtorParams> | undefined;
29
+ readonly name = "EvmWalletService";
29
30
  constructor(params?: Readonly<EvmWalletServiceCtorParams> | undefined);
30
31
  /**
31
32
  * Define current provider connector
@@ -37,9 +38,10 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
37
38
  * Manually connect to the wallet
38
39
  * @returns {Promise<void>}
39
40
  */
40
- connect(chainIdOrParams?: number | AddEthereumChainParams): Promise<void>;
41
+ connect(networkIdOParams?: number | AddEthereumChainParams): Promise<void>;
41
42
  /**
42
43
  * Manually disconnect from the wallet
44
+ * @param {boolean} force
43
45
  * @returns {Promise<void>}
44
46
  */
45
47
  disconnect(force?: boolean): Promise<void>;
@@ -138,7 +140,7 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
138
140
  * The list of the supported providers
139
141
  * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
140
142
  */
141
- get providers(): Readonly<EvmWalletProviderConfig[] | undefined>;
143
+ get providers(): Readonly<EvmWalletProviderConfig[]>;
142
144
  /**
143
145
  * Returns current network chain id
144
146
  * @returns {EthereumConnector["chainId"]}
@@ -14,19 +14,20 @@ import Web3 from 'web3';
14
14
  import { convertNetworkToChainParams } from '../utils';
15
15
  export class EvmWalletService extends AbstractStore {
16
16
  params;
17
+ name = 'EvmWalletService';
17
18
  constructor(params) {
18
19
  super();
19
20
  this.params = params;
20
21
  this.setData(() => ({
21
22
  networks: params?.networks || [],
22
23
  }));
24
+ const hasProvider = params?.providers?.some(provider => provider.id === params.providerId);
23
25
  this.setState(() => ({
24
26
  isSyncing: undefined,
25
- providerId: params?.providerId,
27
+ providerId: hasProvider ? params?.providerId : undefined,
26
28
  }));
27
29
  makeObservable(this);
28
- const autoInit = params?.autoInit ?? true;
29
- if (autoInit) {
30
+ if (params?.autoInit ?? true) {
30
31
  this._init().catch(reason => {
31
32
  error('Wallet init failed with an error', reason);
32
33
  });
@@ -46,28 +47,30 @@ export class EvmWalletService extends AbstractStore {
46
47
  * Manually connect to the wallet
47
48
  * @returns {Promise<void>}
48
49
  */
49
- async connect(chainIdOrParams) {
50
+ async connect(networkIdOParams) {
50
51
  if (this.isConnecting || this.isDisconnecting) {
51
52
  return;
52
53
  }
53
54
  try {
54
- const defaultNetworkId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId
55
+ const defaultNetworkId = typeof networkIdOParams === 'number' ? networkIdOParams : networkIdOParams?.chainId
55
56
  ?? this.params?.defaultNetworkId
56
57
  ?? this.network?.chainId
57
58
  ?? 1;
58
59
  const network = this.networks.find(_network => _network.chainId === defaultNetworkId?.toString());
59
60
  // eslint-disable-next-line no-nested-ternary
60
- const chainParams = typeof chainIdOrParams === 'object'
61
- ? chainIdOrParams
61
+ const networkParams = typeof networkIdOParams === 'object'
62
+ ? networkIdOParams
62
63
  : network ? convertNetworkToChainParams(network) : undefined;
63
- await this.connector?.connect(chainParams ?? 1);
64
+ await this.connector?.connect(networkParams ?? 1);
64
65
  }
65
66
  catch (e) {
66
- error('EVM Wallet connect error', e);
67
+ error('Evm Wallet connect error', e);
68
+ throw e;
67
69
  }
68
70
  }
69
71
  /**
70
72
  * Manually disconnect from the wallet
73
+ * @param {boolean} force
71
74
  * @returns {Promise<void>}
72
75
  */
73
76
  async disconnect(force) {
@@ -211,7 +214,8 @@ export class EvmWalletService extends AbstractStore {
211
214
  * @returns {Readonly<EvmNetworkConfig|undefined>}
212
215
  */
213
216
  get network() {
214
- return this.networks?.find(network => network.type === 'evm' && network.chainId === this.chainId?.toString());
217
+ const chainId = this.chainId?.toString() ?? this.params?.defaultNetworkId?.toString();
218
+ return this.networks?.find(network => network.type === 'evm' && network.chainId === chainId);
215
219
  }
216
220
  /**
217
221
  Returns details about current connected provider
@@ -225,7 +229,7 @@ export class EvmWalletService extends AbstractStore {
225
229
  * @returns {Readonly<EvmWalletProviderConfig[]|undefined>}
226
230
  */
227
231
  get providers() {
228
- return this.params?.providers;
232
+ return this.params?.providers ?? [];
229
233
  }
230
234
  /**
231
235
  * Returns current network chain id
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@broxus/evm-connect",
3
- "version": "1.11.10",
3
+ "version": "1.11.12",
4
4
  "description": "Ethereum wallets connector.",
5
5
  "license": "MIT",
6
6
  "keywords": [
7
7
  "blockchain",
8
8
  "evm",
9
+ "dapp",
9
10
  "connect",
10
11
  "web3"
11
12
  ],
@@ -95,5 +96,5 @@
95
96
  "web3-types": "^1.x",
96
97
  "web3-utils": "^4.x"
97
98
  },
98
- "gitHead": "38f3971affac4af6f814720ecea063dc105ef105"
99
+ "gitHead": "6229efdf10f9974da3fbc0af2d9580bbf3d0ee1b"
99
100
  }