// @flow import React, { useState, useEffect, useRef } from 'react'; import { FormField } from 'component/common/form'; import Button from 'component/button'; import I18nMessage from 'component/i18nMessage'; import * as ICONS from 'constants/icons'; import ServerInputRow from './internal/inputRow'; import { stringifyServerParam } from 'util/sync-settings'; type StatusOfServer = { host: string, port: string, availability: boolean, latency: number, }; type ServerTuple = [string, string]; // ['host', 'port'] type ServerStatus = Array; type ServerConfig = Array; type DaemonStatus = { wallet: any, }; type Props = { getDaemonStatus: () => void, setCustomWalletServers: (any) => void, clearWalletServers: () => void, customWalletServers: ServerConfig, saveServerConfig: (Array) => void, hasWalletServerPrefs: boolean, daemonStatus: DaemonStatus, walletReconnecting: boolean, }; function SettingWalletServer(props: Props) { const { daemonStatus, setCustomWalletServers, getDaemonStatus, clearWalletServers, saveServerConfig, customWalletServers, hasWalletServerPrefs, walletReconnecting, } = props; const [advancedMode, setAdvancedMode] = useState(false); const walletStatus = daemonStatus && daemonStatus.wallet; const activeWalletServers: ServerStatus = (walletStatus && walletStatus.servers) || []; 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); } }, []); useEffect(() => { const interval = setInterval(() => { getDaemonStatus(); }, STATUS_INTERVAL); return () => clearInterval(interval); }, []); function doClear() { setAdvancedMode(false); clearWalletServers(); } function onAdd(serverTuple: ServerTuple) { let newServerConfig = serverConfig.concat(); newServerConfig.push(serverTuple); updateServers(newServerConfig); } function onDelete(i: number) { const newServerConfig = serverConfig.concat(); newServerConfig.splice(i, 1); updateServers(newServerConfig); } function updateServers(newConfig) { saveServerConfig(newConfig); setCustomWalletServers(stringifyServerParam(newConfig)); } return ( { if (e.target.checked) { doClear(); } }} /> { setAdvancedMode(e.target.checked); if (e.target.checked && customWalletServers.length) { setCustomWalletServers(stringifyServerParam(customWalletServers)); } }} label={__('Use custom wallet servers')} />

, }} > Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%

{advancedMode && (
{serverConfig && serverConfig.map((entry, index) => { const [host, port] = entry; const available = activeWalletServers.some( (s) => s.host === entry[0] && String(s.port) === entry[1] && s.availability ); return (

{host}:{port}

{available ? __('Connected') : walletReconnecting ? __('Connecting...') : __('Not connected')}
); })}
)}
); } export default SettingWalletServer;