[redesign][ln] Overview tab

app/actions/LNActions.js

@@ -407,6 +407,7 @@ const loadLNStartupInfo = () => (dispatch) => {
   dispatch(getScbInfo());
   dispatch(getDescribeGraph());
   dispatch(getAutopilotStatus());
+  dispatch(getTransactions(0, -1)); // endHeight set to -1 which includes unconfirmed transactions
 };
 
 export const LNWALLET_INFO_UPDATED = "LNWALLET_INFO_UDPATED";
@@ -1193,3 +1194,33 @@ export const getAutopilotStatus = () => async (dispatch, getState) => {
     dispatch({ error, type: LNWALLET_GET_AUTOPILOT_STATUS_FAILED });
   }
 };
+
+export const LNWALLET_GETTRANSACTIONS_ATTEMPT =
+  "LNWALLET_GETTRANSACTIONS_ATTEMPT";
+export const LNWALLET_GETTRANSACTIONS_SUCCESS =
+  "LNWALLET_GETTRANSACTIONS_SUCCESS";
+export const LNWALLET_GETTRANSACTIONS_FAILED =
+  "LNWALLET_GETTRANSACTIONS_FAILED";
+
+export const getTransactions = (startHeight, endHeight) => (
+  dispatch,
+  getState
+) => {
+  const { client } = getState().ln;
+  if (!client) return;
+
+  dispatch({ type: LNWALLET_GETTRANSACTIONS_ATTEMPT });
+  ln.getTransactions(client, startHeight, endHeight)
+    .then((transactions) => {
+      dispatch({
+        transactions,
+        type: LNWALLET_GETTRANSACTIONS_SUCCESS
+      });
+    })
+    .catch((error) => {
+      dispatch({ error, type: LNWALLET_GETTRANSACTIONS_FAILED });
+    });
+};
+
+export const goToChannelsTab = (pubKey) => (dispatch) =>
+  dispatch(pushHistory(`/ln/channels?pubKey=${pubKey}`));

app/components/buttons/SearchForNodesButton/SearchForNodesButton.jsx

@@ -3,15 +3,22 @@ import ModalButton from "../ModalButton";
 import styles from "./SearchForNodesButton.module.css";
 import { classNames, Icon, Button } from "pi-ui";
 
-const SearchForNodesButton = ({ className, recentNodes, onSubmit }) => (
+const SearchForNodesButton = ({
+  className,
+  recentNodes,
+  onSubmit,
+  buttonLabel
+}) => (
   <ModalButton
     className={classNames(styles.button, className)}
     modalComponent={SearchForNodesModal}
     buttonComponent={Button}
     recentnodes={recentNodes}
     onSubmit={onSubmit}
     data-testid="searchForNodesButton"
-    buttonLabel={<Icon type="search" iconColor="#fff" />}></ModalButton>
+    buttonLabel={
+      buttonLabel ? buttonLabel : <Icon type="search" iconColor="#fff" />
+    }></ModalButton>
 );
 
 export default SearchForNodesButton;

app/components/views/LNPage/WalletTab/WalletTab.jsx → app/components/views/LNPage/AdvancedTab/AdvancedTab.jsx

@@ -3,58 +3,54 @@ import { FormattedMessage as T } from "react-intl";
 import { DescriptionHeader } from "layout";
 import { Subtitle } from "shared";
 import { InfoDocModalButton } from "buttons";
-import BalanceHeader from "./BalanceHeader/BalanceHeader";
 import BackupInfoHeader from "./BackupInfoHeader/BackupInfoHeader";
 import BackupInfoDetails from "./BackupInfoDetails/BackupInfoDetails";
-import styles from "./WalletTab.module.css";
-import { useWalletTab } from "./hooks";
+import styles from "./AdvancedTab.module.css";
+import { useAdvancedTab } from "./hooks";
+import BalancesHeader from "../BalancesHeader";
+import Network from "./Network";
+import Watchtowers from "./Watchtowers";
 
-export const WalletTabHeader = () => (
+export const AdvancedTabHeader = () => (
   <DescriptionHeader
     description={
-      <T
-        id="ln.description.wallet"
-        m="On-chain balance and actions of the LN Wallet"
-      />
+      <>
+        <T
+          id="ln.advancedTab.description.header"
+          m="On-chain balance and actions of the LN Wallet"
+        />
+        <BalancesHeader />
+      </>
     }
   />
 );
 
-const WalletTab = () => {
+const AdvancedTab = () => {
   const {
-    walletBalances,
     info,
     scbPath,
     scbUpdatedTime,
     onBackup,
     onVerifyBackup
-  } = useWalletTab();
-
-  const { confirmedBalance, unconfirmedBalance, totalBalance } = walletBalances;
+  } = useAdvancedTab();
 
   const { alias, identityPubkey } = info;
 
   return (
-    <>
-      <Subtitle title={<T id="ln.walletTab.balances" m="Balances" />} />
-      <BalanceHeader
-        confirmedBalance={confirmedBalance}
-        unconfirmedBalance={unconfirmedBalance}
-        totalBalance={totalBalance}
-      />
-      <Subtitle title={<T id="ln.walletTab.infos" m="Infos" />} />
+    <div className={styles.container}>
+      <Subtitle title={<T id="ln.advancedTab.infos" m="Infos" />} />
       <div className={styles.nodeInfos}>
-        <T id="ln.walletTab.nodeInfos.alias" m="Node Alias" />
+        <T id="ln.advancedTab.nodeInfos.alias" m="Node Alias" />
         <div className={styles.nodeAlias}>{alias}</div>
       </div>
       <div className={classNames(styles.nodeInfos, styles.lastItem)}>
-        <T id="ln.walletTab.nodeInfos.ID" m="Node ID" />
+        <T id="ln.advancedTab.nodeInfos.ID" m="Node ID" />
         <CopyableText id="copyablePubkey" className={styles.copyableText}>
           {identityPubkey}
         </CopyableText>
       </div>
       <Subtitle
-        title={<T id="ln.walletTab.backup" m="Backup" />}
+        title={<T id="ln.advancedTab.backup" m="Backup" />}
         className={styles.backupSubtitle}>
         <div className={styles.backupInfoBtn}>
           <InfoDocModalButton document="LNBackupInfo" double draggable />
@@ -67,8 +63,19 @@ const WalletTab = () => {
           onVerifyBackup={onVerifyBackup}
         />
       </div>
-    </>
+      <Subtitle
+        title={
+          <T id="ln.watchtowersTab.addWatchtowerHeader" m="Add Watchtower" />
+        }
+      />
+      <Watchtowers />
+      <Subtitle
+        title={<T id="ln.advancedTab.network" m="Network" />}
+        className={styles.networkTitle}
+      />
+      <Network />
+    </div>
   );
 };
 
-export default WalletTab;
+export default AdvancedTab;

app/components/views/LNPage/WalletTab/WalletTab.module.css → app/components/views/LNPage/AdvancedTab/AdvancedTab.module.css

@@ -1,3 +1,7 @@
+.container {
+  width: 764px;
+}
+
 .nodeInfos {
   margin-top: 1em;
   background-color: var(--background-back-color);
@@ -33,20 +37,6 @@
   border: 1px var(--input-copy-hover-color) solid;
 }
 
-.copyableText svg {
-  color: var(--tab-text-active-hover);
-  padding: 7px;
-  box-shadow: 0 3px 5px var(--icons-shadow);
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 0 15px 2px 15px;
-  transition: background-color 0.5s;
-}
-
-.copyableText svg:hover {
-  background-color: var(--background-copy-color);
-}
-
 .copyableText > div > div:nth-child(1) {
   position: absolute;
   top: 35px;
@@ -62,7 +52,7 @@
   background-repeat: no-repeat;
   background-size: 45px;
   margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
   padding: 30px 40px 30px 95px;
 }
 
@@ -112,3 +102,7 @@
 .lastItem {
   margin-bottom: 40px;
 }
+
+.networkTitle {
+  margin-bottom: 40px;
+}

app/components/views/LNPage/NetworkTab/NetworkTab.jsx → app/components/views/LNPage/AdvancedTab/Network/Network.jsx

@@ -1,30 +1,15 @@
-import { useNetworkTab } from "./hooks";
+import { useNetwork } from "./hooks";
 import { useState } from "react";
 import { SimpleLoading } from "indicators";
-import NodeInfo from "./NodeInfo/NodeInfo";
-import RoutesInfo from "./RoutesInfo/RoutesInfo";
-import NodeInfoError from "./NodeInfoError/NodeInfoError";
-import NetworkInfo from "./NetworkInfo/NetworkInfo";
-import QueryNode from "./QueryNode/QueryNode";
-import QueryRoutes from "./QueryRoutes/QueryRoutes";
-import Tabs from "./Tabs/Tabs";
-import { DescriptionHeader } from "layout";
-import { FormattedMessage as T } from "react-intl";
+import NodeInfo from "./NodeInfo";
+import RoutesInfo from "./RoutesInfo";
+import NodeInfoError from "./NodeInfoError";
+import QueryNode from "./QueryNode";
+import QueryRoutes from "./QueryRoutes";
+import Tabs from "./Tabs";
 
-export const NetworkTabHeader = () => (
-  <DescriptionHeader
-    description={
-      <T
-        id="ln.description.network"
-        m="General information about the current state of Decred's LN."
-      />
-    }
-  />
-);
-
-const NetworkTab = () => {
+const Network = () => {
   const {
-    network,
     nodeInfo,
     routesInfo,
     tsDate,
@@ -33,7 +18,7 @@ const NetworkTab = () => {
     getRoutesInfoAttempt,
     getRoutesInfo,
     chanpointURL
-  } = useNetworkTab();
+  } = useNetwork();
 
   const [activeTab, setActiveTab] = useState(0);
   const [nodeID, setNodeID] = useState("");
@@ -42,7 +27,6 @@ const NetworkTab = () => {
 
   return (
     <>
-      {!!network && <NetworkInfo network={network} />}
       <Tabs active={activeTab} set={setActiveTab} />
       {activeTab === 0 ? (
         <QueryNode getNodeInfo={getNodeInfo} />
@@ -76,4 +60,4 @@ const NetworkTab = () => {
   );
 };
 
-export default NetworkTab;
+export default Network;

app/components/views/LNPage/AdvancedTab/Network/NodeInfo/Channel/index.js

@@ -0,0 +1 @@
+export { default } from "./Channel";

app/components/views/LNPage/NetworkTab/NodeInfo/NodeInfo.jsx → app/components/views/LNPage/AdvancedTab/Network/NodeInfo/NodeInfo.jsx

@@ -1,6 +1,6 @@
 import { FormattedMessage as T } from "react-intl";
 import { Subtitle, Balance } from "shared";
-import Channel from "./Channel/Channel";
+import Channel from "./Channel";
 import styles from "./NodeInfo.module.css";
 
 const NodeInfo = ({ nodeInfo, tsDate, chanpointURL }) => (

app/components/views/LNPage/AdvancedTab/Network/NodeInfo/index.js

@@ -0,0 +1 @@
+export { default } from "./NodeInfo";

app/components/views/LNPage/AdvancedTab/Network/NodeInfoError/index.js

@@ -0,0 +1 @@
+export { default } from "./NodeInfoError";

app/components/views/LNPage/NetworkTab/QueryNode/QueryNode.jsx → app/components/views/LNPage/AdvancedTab/Network/QueryNode/QueryNode.jsx

@@ -16,7 +16,9 @@ const QueryNode = ({ getNodeInfo }) => {
 
   return (
     <div className={styles.queryNode}>
-      <T id="ln.networkTab.queryNodeId" m="Node ID" />
+      <label htmlFor="nodeIDInput">
+        <T id="ln.networkTab.queryNodeId" m="Node ID" />
+      </label>
       <TextInput id="nodeIDInput" value={node} onChange={nodeChanged} />
     </div>
   );

app/components/views/LNPage/AdvancedTab/Network/QueryNode/index.js

@@ -0,0 +1 @@
+export { default } from "./QueryNode";

app/components/views/LNPage/AdvancedTab/Network/QueryRoutes/index.js

@@ -0,0 +1 @@
+export { default } from "./QueryRoutes";

app/components/views/LNPage/AdvancedTab/Network/RoutesInfo/index.js

@@ -0,0 +1 @@
+export { default } from "./RoutesInfo";

app/components/views/LNPage/AdvancedTab/Network/Tabs/index.js

@@ -0,0 +1 @@
+export { default } from "./Tabs";

app/components/views/LNPage/NetworkTab/hooks.js → app/components/views/LNPage/AdvancedTab/Network/hooks.js

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import * as lna from "actions/LNActions";
 
-export function useNetworkTab() {
+export function useNetwork() {
   const dispatch = useDispatch();
   const network = useSelector(sel.lnNetwork);
   const nodeInfo = useSelector(sel.lnNodeInfo);

app/components/views/LNPage/AdvancedTab/Network/index.js

@@ -0,0 +1 @@
+export { default } from "./Network";

app/components/views/LNPage/WatchtowersTab/AddWatchtower/AddWatchtower.jsx → app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/AddWatchtower.jsx

@@ -12,19 +12,23 @@ const AddWatchtower = ({ addWatchtower, listWatchtowers }) => {
     <div className={styles.addWatchtower}>
       <div className={styles.addWatchtowerContent}>
         <div className={styles.addWatchtowerNest}>
-          <div className={styles.addWatchtowerNestPrefix}>
+          <label
+            className={styles.addWatchtowerNestPrefix}
+            htmlFor="towerIdInput">
             <T id="ln.watchtowersTab.Pubkey" m="Tower ID:" />
-          </div>
+          </label>
           <TextInput
             id="towerIdInput"
             value={pubkey}
             onChange={(e) => setPubkey(e.target.value.trim())}
           />
         </div>
         <div className={styles.addWatchtowerNest}>
-          <div className={styles.addWatchtowerNestPrefix}>
+          <label
+            className={styles.addWatchtowerNestPrefix}
+            htmlFor="addressInput">
             <T id="ln.watchtowersTab.address" m="Address:" />
-          </div>
+          </label>
           <TextInput
             id="addressInput"
             value={addr}

app/components/views/LNPage/AdvancedTab/Watchtowers/AddWatchtower/index.js

@@ -0,0 +1 @@
+export { default } from "./AddWatchtower";

app/components/views/LNPage/WatchtowersTab/WatchtowersTab.jsx → app/components/views/LNPage/AdvancedTab/Watchtowers/Watchtowers.jsx

@@ -1,37 +1,20 @@
 import { FormattedMessage as T } from "react-intl";
 import { classNames, CopyableText, Tooltip } from "pi-ui";
-import { useWatchtowersTab } from "./hooks";
-import styles from "./WatchtowersTab.module.css";
+import { useWatchtowers } from "./hooks";
+import styles from "./Watchtowers.module.css";
 import { Subtitle } from "shared";
-import AddWatchtower from "./AddWatchtower/AddWatchtower";
-import { DescriptionHeader } from "layout";
+import AddWatchtower from "./AddWatchtower";
 
-export const WatchtowersTabHeader = () => (
-  <DescriptionHeader
-    description={
-      <T
-        id="ln.description.watchtowers"
-        m="Manage connection to watchtowers."
-      />
-    }
-  />
-);
-
-const WatchtowersTab = () => {
+const Watchtowers = () => {
   const {
     addWatchtower,
     removeWatchtower,
     listWatchtowers,
     towersList
-  } = useWatchtowersTab();
+  } = useWatchtowers();
 
   return (
     <>
-      <Subtitle
-        title={
-          <T id="ln.watchtowersTab.addWatchtowerHeader" m="Add Watchtower" />
-        }
-      />
       <AddWatchtower
         addWatchtower={addWatchtower}
         listWatchtowers={listWatchtowers}
@@ -92,4 +75,4 @@ const WatchtowersTab = () => {
   );
 };
 
-export default WatchtowersTab;
+export default Watchtowers;