add option to set a custom electrum server hostname and port

[mr-zwets]

Joemar posted the following feature request related to their CashScript workshops in university/schools

Would it be possible to have an option in playground to set a custom electrum server hostname and port?

In some schools here, the outgoing port 50006 is blocked

currently always the default provider is used for each network

  function changeNetwork(newNetwork: Network){
    const newprovider = newNetwork == "mocknet" ? 
      new MockNetworkProvider({ updateUtxoSet: false }) : new ElectrumNetworkProvider(newNetwork)
    setProvider(newprovider)
    localStorage.setItem("network", newNetwork)
  }

i'm not sure what port 50006 is used for on the electrumNetwork providers

[joemarct]

Our workaround was to spin up our own electrum running in port 443 -- one of the few ports that was allowed. In our scripts we just override the hostname and port in ElectrumNetworkProvider with this code:

import { ElectrumClient, } from '@electrum-cash/network';
import { ElectrumWebSocket } from '@electrum-cash/web-socket';
import { ElectrumNetworkProvider } from 'cashscript'

const websocket = new ElectrumWebSocket('<electrum-server-hostname>', 443)
const electrum = new ElectrumClient(
    'CashScript Application',
    '1.4.1',
    websocket,
    { disableBrowserVisibilityHandling: true }
);
const provider = new ElectrumNetworkProvider('mainnet', { electrum })

The playground though does not allow setting a custom electrum server hostname and port. It would be good if we can have a UI for overriding the default.