Concatenate custom RPC labels that are too long

1 files changed, 9 insertions, 1 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index cf865f23f..a05a42516 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -499,6 +499,12 @@ App.prototype.renderCustomOption = function (provider) {
   const { rpcTarget, type } = provider
   if (type !== 'rpc') return null
 
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
   switch (rpcTarget) {
 
     case 'http://localhost:8545':
@@ -506,7 +512,8 @@ App.prototype.renderCustomOption = function (provider) {
 
     default:
       return h(DropMenuItem, {
-        label: `${rpcTarget}`,
+        label,
+        key: rpcTarget,
         closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         icon: h('i.fa.fa-question-circle.fa-lg'),
         activeNetworkRender: 'custom',
@@ -524,6 +531,7 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
     } else {
       return h(DropMenuItem, {
         label: rpc,
+        key: rpc,
         closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         action: () => props.dispatch(actions.setRpcTarget(rpc)),
         icon: h('i.fa.fa-question-circle.fa-lg'),