@broxus/evm-connect 1.2.1 → 1.3.0

package/README.md

@@ -18,6 +18,39 @@ or using **yarn**:
 yarn add @broxus/evm-connect
 ```
 
+### Requirements
+
+In general it works great with our [UIkit](https://www.npmjs.com/package/@broxus/react-uikit) package.
+If you use this package you don't need to worry about the details.
+
+#### Minimum requirements
+
+If you are only going to use stores, you should install a few required packages
+
+```shell
+npm i web3 mobx
+```
+
+or using **yarn**:
+
+```shell
+yarn add web3 mobx
+```
+
+#### Full requirements
+
+If you would like to use stores and included react components, you need to install a few more packages
+
+```shell
+npm i web3 mobx mobx-react-lite react-intl
+```
+
+or using **yarn**:
+
+```shell
+yarn add web3 mobx-react-lite react-intl
+```
+
 ### EvmWalletService
 
 The Wallet Service is a key part of this module. It accepts a number of settings and
@@ -179,4 +212,12 @@ const walletService = new EvmWalletService({
 await walletService.connect()
 ```
 
-> This is library/framework agnostic component. So, you can use it anywhere.
+## Styling
+
+If you are using our [UIkit](https://www.npmjs.com/package/@broxus/react-uikit) package it will it automatically adapts to your interface colors.
+
+Otherwise, you can import standalone CSS
+
+```typescript jsx
+import '~@broxus/evm-connect/style.min.css'
+```

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

@@ -18,9 +18,9 @@
 
 .evm-connect-modal .uk-modal-title {
     color: var(--evm-connect-modal-title-color);
-    font-size: var(--evm-connect-modal-font-size);
-    font-weight: var(--evm-connect-modal-font-weight);
-    line-height: var(--evm-connect-modal-line-height);
+    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;
 }
 
@@ -56,9 +56,9 @@
 
 .evm-connect-drawer .uk-drawer-title {
     color: var(--evm-connect-drawer-title-color);
-    font-size: var(--evm-connect-drawer-font-size);
-    font-weight: var(--evm-connect-drawer-font-weight);
-    line-height: var(--evm-connect-drawer-line-height);
+    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;
 }
 
@@ -102,9 +102,9 @@
     --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-font-size: var(--modal-title-font-size, 24px);
-    --evm-connect-modal-font-weight: 500;
-    --evm-connect-modal-line-height: var(--modal-title-line-height, 28px);
+    --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;
@@ -120,9 +120,9 @@
     --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-font-size: var(--drawer-title-font-size, 24px);
-    --evm-connect-drawer-font-weight: 500;
-    --evm-connect-drawer-line-height: var(--drawer-title-line-height, 28px);
+    --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;

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

@@ -30,8 +30,8 @@
     --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, 0);
+    --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, #333);
+    --evm-connect-dropdown-link-color: var(--dropdown-color, #0af);
 }

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

@@ -26,6 +26,7 @@
     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:hover,