@broxus/evm-connect 1.7.2 → 1.7.3

package/README.md

@@ -221,3 +221,63 @@ Otherwise, you can import standalone CSS
 ```typescript jsx
 import '~@broxus/evm-connect/style.min.css'
 ```
+Below you can find all supported CSS variables and their defaults
+
+```css
+/* Connector */
+--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 rgb(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);
+
+/* Providers list buttons */
+--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);
+
+/* Modal */
+--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 rgb(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);
+
+/* Drawer */
+--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 rgb(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);
+
+/* Connection approve popup stage */
+--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);
+```

package/dist/cjs/components/EvmProvidersDispatcher/ConnectionRequest/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionRequest = void 0;
+exports.ConnectionRequest = ConnectionRequest;
 const react_components_1 = require("@broxus/react-components");
 const react_uikit_1 = require("@broxus/react-uikit");
 const classnames_1 = __importDefault(require("classnames"));
@@ -62,4 +62,3 @@ function ConnectionRequest() {
                 React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(react_uikit_1.Text, { color: "danger" }, walletProviders.error.message)) : intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
                 React.createElement(react_uikit_1.Button, { className: "evm-connect-connection-request-button", type: "default", onClick: tryAgain }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT)))))));
 }
-exports.ConnectionRequest = ConnectionRequest;

package/dist/cjs/components/EvmProvidersDispatcher/index.css

@@ -4,7 +4,7 @@
     flex-direction: column;
     height: inherit;
     overflow: hidden;
-    transition: height var(--transition-fast-duration) var(--ease-in);
+    transition: height var(--transition-fast-duration, '100ms') var(--ease-in);
     width: inherit;
 }
 

package/dist/cjs/context/EvmWalletProvidersContext.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EvmWalletProvidersProvider = exports.useEvmWalletProviders = exports.EvmWalletProvidersContext = void 0;
+exports.EvmWalletProvidersProvider = exports.EvmWalletProvidersContext = void 0;
+exports.useEvmWalletProviders = useEvmWalletProviders;
 const js_utils_1 = require("@broxus/js-utils");
 const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_react_lite_1 = require("mobx-react-lite");
@@ -35,7 +36,6 @@ exports.EvmWalletProvidersContext = React.createContext(null);
 function useEvmWalletProviders() {
     return (0, react_uikit_1.useContext)(exports.EvmWalletProvidersContext);
 }
-exports.useEvmWalletProviders = useEvmWalletProviders;
 exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreementsNote, children, network, onConnect, }) => {
     const walletService = (0, EvmWalletServiceContext_1.useEvmWalletService)();
     const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();

package/dist/cjs/context/EvmWalletServiceContext.js

@@ -23,7 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EvmWalletServiceProvider = exports.useEvmWalletService = exports.EvmWalletServiceContext = void 0;
+exports.EvmWalletServiceContext = void 0;
+exports.useEvmWalletService = useEvmWalletService;
+exports.EvmWalletServiceProvider = EvmWalletServiceProvider;
 const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_1 = require("mobx");
 const React = __importStar(require("react"));
@@ -34,7 +36,6 @@ exports.EvmWalletServiceContext = React.createContext(null);
 function useEvmWalletService() {
     return (0, react_uikit_1.useContext)(exports.EvmWalletServiceContext);
 }
-exports.useEvmWalletService = useEvmWalletService;
 function EvmWalletServiceProvider({ agreementsNote, children, params, wallet, }) {
     const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const context = React.useMemo(() => {
@@ -52,7 +53,6 @@ function EvmWalletServiceProvider({ agreementsNote, children, params, wallet, })
     return (React.createElement(exports.EvmWalletServiceContext.Provider, { value: context },
         React.createElement(EvmWalletProvidersContext_1.EvmWalletProvidersProvider, { agreementsNote: agreementsNote }, children)));
 }
-exports.EvmWalletServiceProvider = EvmWalletServiceProvider;
 if (process.env.NODE_ENV !== 'production') {
     exports.EvmWalletServiceContext.displayName = 'EvmWalletServiceContext';
 }

package/dist/cjs/hooks/useEIP6963Connections.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEIP6963Connections = exports.store = void 0;
+exports.store = void 0;
+exports.useEIP6963Connections = useEIP6963Connections;
 const React = __importStar(require("react"));
 const types_1 = require("../types");
 let providers = [];
@@ -44,4 +45,3 @@ exports.store = {
 function useEIP6963Connections() {
     return React.useSyncExternalStore(exports.store.subscribe, exports.store.value, exports.store.value);
 }
-exports.useEIP6963Connections = useEIP6963Connections;

package/dist/cjs/hooks/useFilteredConnections.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFilteredConnections = void 0;
+exports.useFilteredConnections = useFilteredConnections;
 function useFilteredConnections(providers, ids) {
     return providers.filter(provider => ids.includes(provider.id));
 }
-exports.useFilteredConnections = useFilteredConnections;

package/dist/cjs/hooks/useOrderedConnections.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOrderedConnections = void 0;
+exports.useOrderedConnections = useOrderedConnections;
 const React = __importStar(require("react"));
 const useRecentConnectionMeta_1 = require("../hooks/useRecentConnectionMeta");
 function useOrderedConnections(providers) {
@@ -38,4 +38,3 @@ function useOrderedConnections(providers) {
         return acc;
     }, []), [providers, recentMeta?.providerId]);
 }
-exports.useOrderedConnections = useOrderedConnections;

package/dist/cjs/hooks/useRecentConnectionMeta.js

@@ -23,7 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRecentConnectionMeta = exports.getRecentConnectionMeta = exports.storeRecentConnectionMeta = void 0;
+exports.storeRecentConnectionMeta = storeRecentConnectionMeta;
+exports.getRecentConnectionMeta = getRecentConnectionMeta;
+exports.useRecentConnectionMeta = useRecentConnectionMeta;
 const js_utils_1 = require("@broxus/js-utils");
 const React = __importStar(require("react"));
 const constants_1 = require("../constants");
@@ -40,7 +42,6 @@ function storeRecentConnectionMeta(meta) {
     (0, js_utils_1.debug)('Store EVM recent connection', meta);
     js_utils_1.storage.set(constants_1.EVM_RECENT_CONNECTION, JSON.stringify(meta));
 }
-exports.storeRecentConnectionMeta = storeRecentConnectionMeta;
 function getRecentConnectionMeta() {
     const value = js_utils_1.storage.get(constants_1.EVM_RECENT_CONNECTION);
     if (!value) {
@@ -58,7 +59,6 @@ function getRecentConnectionMeta() {
     storeRecentConnectionMeta(undefined);
     return undefined;
 }
-exports.getRecentConnectionMeta = getRecentConnectionMeta;
 function useRecentConnectionMeta() {
     const [meta, setMeta] = React.useState(getRecentConnectionMeta());
     React.useEffect(() => {
@@ -77,4 +77,3 @@ function useRecentConnectionMeta() {
     }, []);
     return [meta, storeRecentConnectionMeta];
 }
-exports.useRecentConnectionMeta = useRecentConnectionMeta;