Merge pull request #33 from getsafle/bugfix-ui-overflow

UI fix and error message added

CHANGELOG.md

@@ -45,3 +45,9 @@
 ##### Fixed token amounts overflow and USD value
 
 * Fixed token amounts overflow and USD values
+
+### 1.1.7 (2023-02-06)
+
+##### UI font-sizes fix and show correct error messages
+
+* UI font-sizes fix and show correct error messages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getsafle/safle-keyless-js",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "",
   "engines": {
     "node": ">=12.22.9"

src/helpers/blockchains.js

@@ -5,11 +5,11 @@ const blockchainInfo = {
         explorer: 'https://etherscan.io/tx/',
         chain_name: 'ethereum',
     },
-    3: {
-        name: 'Ropsten Testnet',
-        rpcURL: 'https://ropsten.infura.io/v3/',
-        explorer: 'https://ropsten.etherscan.io/tx/',
-        chain_name: 'ropsten',
+    420: {
+        name: 'Goerli Testnet',
+        rpcURL: 'https://goerli.infura.io/v3/',
+        explorer: 'https://goerli.etherscan.io/tx/',
+        chain_name: 'goerli',
     },
     137: {
         name: 'Polygon Mainnet',

src/index.js

@@ -6,9 +6,9 @@ import config from './config/config';
 
 
 const getNetworks = async () => {
-    const networks = await fetch( config.networks ).then(e=>e.json());
-    const allowedIds = [ 1, 3, 137, 80001 ];
-    return Object.values( networks ).reduce( (acc, e) => acc.concat( e ), [] ).filter( e=> allowedIds.indexOf( e.chainId ) != -1 );
+    const networks = await fetch(config.networks).then(e => e.json());
+    const allowedIds = [1, 420, 137, 80001];
+    return Object.values(networks).reduce((acc, e) => acc.concat(e), []).filter(e => allowedIds.indexOf(e.chainId) != -1);
 
     return networks;
 

src/scss/items/_transaction.scss

@@ -40,6 +40,11 @@
 
   .transaction {
     position: relative;
+
+    .transaction_amount {
+      font-size: 17px;
+      padding: 0px;
+    }
     .hover-info--1 {
       position: absolute;
       top: 60px;

src/ui/SendScreen.js

@@ -551,14 +551,27 @@ class SendScreen extends UIScreen {
     checkCanProceed() {
         if (this.isToken) {
             if ((parseFloat(this.balance) < parseFloat(this.feeETH)) || (parseFloat(this.tokenBalance) < parseFloat(this.tokenValue))) {
-                this.setProceedActive(false);
+                if ((parseFloat(this.balance) < parseFloat(this.feeETH))) {
+                    this.el.querySelector('.insufficient-balance-message-div').style.display = "block"
+                    this.el.querySelector('.insufficient-balance-message').innerHTML = 'Insufficient balance'
+                    this.setProceedActive(false);
+                }
+                else {
+                    this.el.querySelector('.insufficient-balance-message-div').style.display = "block"
+                    this.el.querySelector('.insufficient-balance-message').innerHTML = 'Insufficient token balance'
+                    this.setProceedActive(false);
+                }
             } else {
+                this.el.querySelector('.insufficient-balance-message-div').style.display = "none"
                 this.setProceedActive(true);
             }
         } else {
             if (parseFloat(this.balance) < (parseFloat(this.amt) + parseFloat(this.feeETH))) {
+                this.el.querySelector('.insufficient-balance-message-div').style.display = "block"
+                this.el.querySelector('.insufficient-balance-message').innerHTML = 'Insufficient balance'
                 this.setProceedActive(false);
             } else {
+                this.el.querySelector('.insufficient-balance-message-div').style.display = "none"
                 this.setProceedActive(true);
             }
         }
@@ -644,6 +657,8 @@ class SendScreen extends UIScreen {
             </div>
         </div>
 
+        <div class="insufficient-balance-message-div"><p style="color: red" class="insufficient-balance-message">Insufficient balance</p></div>
+
         <button class="btn__tp--1 confirm_btn">Confirm</button>
         <button class="btn__tp--2 reject_btn">Reject</button>
         <button class="btn__tp--2 c--gray open_wallet_btn">