fix: fixed message for swap errors and improvements for custom rpc settings

Author: bradleySuira

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.82.2",
+  "version": "0.82.3",
   "private": true,
   "author": "Liquality <info@liquality.io>",
   "scripts": {

src/components/CustomRpcSettingsForm.vue

@@ -65,15 +65,15 @@ export default {
   computed: {
     ...mapState(['activeNetwork', 'activeWalletId']),
     canSubmit() {
-      const { networkName, newRpcUrl, chainId, currencySymbol, explorerUrl } = this.formData
+      const { networkName, newRpcUrl, chainId, currencySymbol } = this.formData
       const { network } = this.settings
+      const { custom } = network
       if (
-        (networkName &&
-          newRpcUrl &&
-          chainId &&
-          currencySymbol &&
-          newRpcUrl !== this.getBaseUrl(network?.rpcUrl)) ||
-        explorerUrl !== network?.explorerUrl
+        networkName &&
+        newRpcUrl &&
+        chainId &&
+        currencySymbol &&
+        newRpcUrl !== this.getBaseUrl(network?.rpcUrl, custom)
       ) {
         return true
       }
@@ -92,16 +92,20 @@ export default {
         walletId: this.activeWalletId,
         chainId,
         chanifyNetwork: {
+          custom: true,
           ...network,
           explorerUrl: this.formData.explorerUrl,
           rpcUrl: this.formData.newRpcUrl
         }
       }
 
       await this.saveCustomChainSettings(payload)
-      this.setSettings()
     },
-    getBaseUrl(url) {
+    getBaseUrl(url, custom = true) {
+      if (custom === true) {
+        return url
+      }
+
       const pathArray = url.split('/'),
         protocol = pathArray[0],
         host = pathArray[2]
@@ -114,20 +118,28 @@ export default {
         walletId: this.activeWalletId,
         chainId: chain
       })
-      this.setSettings()
     },
     setSettings() {
       const { chain, network, asset, chainId } = this.settings
-      const { rpcUrl, explorerUrl } = network
+      const { rpcUrl, explorerUrl, custom } = network
       this.formData.networkName = chain
       this.formData.chainId = chainId
       this.formData.currencySymbol = asset
-      this.formData.newRpcUrl = this.getBaseUrl(rpcUrl)
+      this.formData.newRpcUrl = this.getBaseUrl(rpcUrl, custom)
       this.formData.explorerUrl = explorerUrl
     }
   },
   created() {
+    console.log('this.settings', this.settings)
     this.setSettings()
+  },
+  watch: {
+    settings: {
+      handler() {
+        this.setSettings()
+      },
+      deep: true
+    }
   }
 }
 </script>

src/components/NavBar.vue

@@ -39,14 +39,6 @@
           <AccountsIcon />
           {{ $t('components.navbar.manageAccounts') }}
         </li>
-        <li
-          id="manage_accounts"
-          v-if="experiments.customNetworkSettings"
-          @click="customNetworkSettings"
-        >
-          <AccountsIcon />
-          {{ $t('common.customNetworkSettings') }}
-        </li>
         <li id="export_privkey" v-if="showExportPrivateKey" @click="exportPrivateKey">
           <KeyIcon />
           {{ $t('components.navbar.exportPrivateKey') }}

src/locales/en/components.json

@@ -22,7 +22,7 @@
         "get": "Get"
     },
     "cannotCoverMinimumMessage": {
-        "needMore": "More %{asset} required to cover min trade plus fees."
+        "needMore": "More %{asset} required to cover minimum trade."
     },
     "connectionDrawer": {
         "dappNetwork": "dApp Network",

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.82.2",
+  "version": "0.82.3",
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
   "default_locale": "en",

src/views/Experiments.vue

@@ -28,6 +28,8 @@
             @change="toggleExperiment({ name: 'manageAccounts' })"
           />
         </div>
+      </div>
+      <div class="setting-item">
         <div class="setting-item_title flex-fill mb-2">
           {{ $t('pages.experiments.errorReporting') }}
           <span class="setting-item_sub">
@@ -42,20 +44,6 @@
             @change="toggleExperiment({ name: 'reportErrors' })"
           />
         </div>
-        <div class="setting-item_title flex-fill mb-2">
-          {{ $t('common.customNetworkSettings') }}
-          <span class="setting-item_sub">
-            {{ $t('common.customNetworkSettings') }}
-          </span>
-        </div>
-        <div class="setting-item_control">
-          <toggle-button
-            id="exp-customNetworkSettings-toggle-switch"
-            :css-colors="true"
-            :value="experiments['customNetworkSettings']"
-            @change="toggleExperiment({ name: 'customNetworkSettings' })"
-          />
-        </div>
       </div>
     </div>
   </div>

src/views/SettingItems.vue

@@ -100,6 +100,7 @@
             {{ $t('pages.settings.networksSub') }}
           </span>
         </div>
+        <ChevronRightIcon class="list-item-chevron" />
       </router-link>
     </div>
   </div>
@@ -232,6 +233,11 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+.setting-item {
+  a {
+    display: flex;
+  }
+}
 .setting-item_title {
   &_accounts {
     display: inline-flex;
@@ -243,4 +249,9 @@ export default {
     }
   }
 }
+
+.list-item-chevron {
+  width: 6px;
+  margin-bottom: 2px;
+}
 </style>

src/views/Swap/Swap.vue

@@ -59,12 +59,12 @@
           :asset="selectedQuote.bridgeAsset"
         />
       </InfoNotification>
-      <InfoNotification v-else-if="cannotCoverMinimum && !insufficientFundsError">
-        <CannotCoverMinimumMessage :asset="asset" :account-id="account.id" />
-      </InfoNotification>
       <InfoNotification v-else-if="ethRequired && !insufficientFundsError">
         <EthRequiredMessage :account-id="account.id" :action="'swap'" />
       </InfoNotification>
+      <InfoNotification v-else-if="cannotCoverMinimum && !insufficientFundsError">
+        <CannotCoverMinimumMessage :asset="asset" :account-id="account.id" />
+      </InfoNotification>
       <div class="wrapper form">
         <div class="wrapper_top">
           <SendInput