improves wallet server ux and resilience

package.json

@@ -127,7 +127,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#bd9f1b1b0d2a16eaa9c08483400c9c3085301962",
+    "lbry-redux": "lbryio/lbry-redux#74eba1f297cd1fe458033323776a9c8d891a4fa1",
     "lbryinc": "lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

static/app-strings.json

@@ -931,5 +931,7 @@
   "In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.": "In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.",
   "lbry.tv": "lbry.tv",
   "Your Blocked Channels": "Your Blocked Channels",
-  "Bid position must be a number.": "Bid position must be a number."
+  "Bid position must be a number.": "Bid position must be a number.",
+  "Copy": "Copy",
+  "Text copied": "Text copied"
 }

ui/component/settingWalletServer/index.js

@@ -1,22 +1,26 @@
 import { connect } from 'react-redux';
-import { DAEMON_SETTINGS } from 'lbry-redux';
+import { DAEMON_SETTINGS, selectIsWalletReconnecting } from 'lbry-redux';
-import { doSetDaemonSetting, doClearDaemonSetting, doGetDaemonStatus, doSaveCustomWalletServers, doFetchDaemonSettings } from 'redux/actions/settings';
+import {
-import { selectDaemonSettings, selectSavedWalletServers, selectDaemonStatus, selectHasWalletServerPrefs } from 'redux/selectors/settings';
+  doSetDaemonSetting,
+  doClearDaemonSetting,
+  doGetDaemonStatus,
+  doSaveCustomWalletServers,
+} from 'redux/actions/settings';
+import { selectSavedWalletServers, selectDaemonStatus, selectHasWalletServerPrefs } from 'redux/selectors/settings';
 import SettingWalletServer from './view';
 
 const select = state => ({
-  daemonSettings: selectDaemonSettings(state),
   daemonStatus: selectDaemonStatus(state),
   customWalletServers: selectSavedWalletServers(state),
   hasWalletServerPrefs: selectHasWalletServerPrefs(state),
+  walletReconnecting: selectIsWalletReconnecting(state),
 });
 
 const perform = dispatch => ({
-  setCustomWalletServers: (value) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS, value)),
+  setCustomWalletServers: value => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS, value)),
   clearWalletServers: () => dispatch(doClearDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS)),
   getDaemonStatus: () => dispatch(doGetDaemonStatus()),
-  saveServerConfig: (servers) => dispatch(doSaveCustomWalletServers(servers)),
+  saveServerConfig: servers => dispatch(doSaveCustomWalletServers(servers)),
-  fetchDaemonSettings: () => dispatch(doFetchDaemonSettings()),
 });
 
 export default connect(

ui/component/settingWalletServer/view.jsx

@@ -1,16 +1,12 @@
 // @flow
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 
 import ServerInputRow from './internal/inputRow';
 
-type DaemonSettings = {
-  lbryum_servers: Array<string>,
-};
-
 type DaemonStatus = {
   wallet: any,
 };
@@ -22,42 +18,60 @@ type StatusOfServer = {
   latency: number,
 };
 
-type ServerTuple = Array<string>; // ['host', 'port']
+type ServerTuple = [string, string]; // ['host', 'port']
 type ServerStatus = Array<StatusOfServer>;
 type ServerConfig = Array<ServerTuple>;
 
 type Props = {
-  daemonSettings: DaemonSettings,
   getDaemonStatus: () => void,
   setCustomWalletServers: any => void,
   clearWalletServers: () => void,
   customWalletServers: ServerConfig,
-  saveServerConfig: (Array<string>) => void,
+  saveServerConfig: (Array<ServerTuple>) => void,
-  fetchDaemonSettings: () => void,
   hasWalletServerPrefs: boolean,
   daemonStatus: DaemonStatus,
+  walletReconnecting: boolean,
 };
 
 function SettingWalletServer(props: Props) {
   const {
-    daemonSettings,
     daemonStatus,
-    fetchDaemonSettings,
     setCustomWalletServers,
     getDaemonStatus,
     clearWalletServers,
     saveServerConfig,
     customWalletServers,
     hasWalletServerPrefs,
+    walletReconnecting,
   } = props;
 
   const [advancedMode, setAdvancedMode] = useState(false);
 
-  const activeWalletServers: ServerStatus = (daemonStatus && daemonStatus.wallet && daemonStatus.wallet.servers) || [];
+  const walletStatus = daemonStatus && daemonStatus.wallet;
-  const currentServerConfig: ServerConfig = daemonSettings && daemonSettings.lbryum_servers;
+  const activeWalletServers: ServerStatus = (walletStatus && walletStatus.servers) || [];
-  const serverConfig: ServerConfig = customWalletServers.length ? customWalletServers : currentServerConfig;
+  const availableServers = walletStatus && walletStatus.available_servers;
+  const serverConfig: ServerConfig = customWalletServers;
   const STATUS_INTERVAL = 5000;
 
+  // onUnmount, if there are no available servers, doClear()
+  // in order to replicate componentWillUnmount, the effect needs to get the value from a ref
+  const hasAvailableRef = useRef();
+  useEffect(
+    () => () => {
+      hasAvailableRef.current = availableServers;
+    },
+    [availableServers]
+  );
+
+  useEffect(
+    () => () => {
+      if (!hasAvailableRef.current) {
+        doClear();
+      }
+    },
+    []
+  );
+
   useEffect(() => {
     if (hasWalletServerPrefs) {
       setAdvancedMode(true);
@@ -71,10 +85,6 @@ function SettingWalletServer(props: Props) {
     return () => clearInterval(interval);
   }, []);
 
-  useEffect(() => {
-    fetchDaemonSettings();
-  }, []);
-
   function makeServerParam(configList) {
     return configList.reduce((acc, cur) => {
       acc.push(`${cur[0]}:${cur[1]}`);
@@ -87,7 +97,7 @@ function SettingWalletServer(props: Props) {
     clearWalletServers();
   }
 
-  function onAdd(serverTuple: Array<string>) {
+  function onAdd(serverTuple: ServerTuple) {
     let newServerConfig = serverConfig.concat();
     newServerConfig.push(serverTuple);
     updateServers(newServerConfig);
@@ -124,7 +134,7 @@ function SettingWalletServer(props: Props) {
           checked={advancedMode}
           onChange={e => {
             setAdvancedMode(e.target.checked);
-            if (e.target.checked) {
+            if (e.target.checked && customWalletServers.length) {
               setCustomWalletServers(makeServerParam(customWalletServers));
             }
           }}
@@ -147,7 +157,9 @@ function SettingWalletServer(props: Props) {
                     <h3>
                       {host}:{port}
                     </h3>
-                    <span className="help">{available ? 'Connected' : 'Not connected'}</span>
+                    <span className="help">
+                      {available ? 'Connected' : walletReconnecting ? 'Connecting...' : 'Not connected'}
+                    </span>
                     <Button
                       button="close"
                       title={__('Remove custom wallet server')}

ui/component/splash/view.jsx

@@ -108,7 +108,8 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
     const { launchedModal } = this.state;
 
     Lbry.status().then(status => {
-      if (status.is_running) {
+      const { wallet } = status;
+      if (status.is_running && wallet && wallet.available_servers) {
         Lbry.wallet_status().then(walletStatus => {
           if (walletStatus.is_locked) {
             // Clear the error timeout, it might sit on this step for a while until someone enters their password
@@ -155,14 +156,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
     const { wallet, startup_status: startupStatus } = status;
 
     // If the wallet is locked, stop doing anything and make the user input their password
-    if (status.is_running && !waitingForUnlock) {
+    if (startupStatus && wallet && wallet.available_servers < 1) {
+      this.setState({ waitingForWallet: this.state.waitingForWallet + UPDATE_INTERVAL / 1000 });
+    } else if (status.is_running && !waitingForUnlock) {
       Lbry.resolve({ urls: 'lbry://one' }).then(() => {
         this.setState({ isRunning: true }, () => this.continueAppLaunch());
       });
 
       return;
-    } else if (startupStatus && !startupStatus.wallet && wallet && wallet.available_servers < 1) {
-      this.setState({ waitingForWallet: this.state.waitingForWallet + UPDATE_INTERVAL / 1000 });
     } else if (wallet && wallet.blocks_behind > 0) {
       this.setState({
         message: __('Blockchain Sync'),