himitsu: add network type

himitsu/src/Components/Main/MainComponent.tsx

@@ -13,9 +13,8 @@ import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
 import ListItemText from '@material-ui/core/ListItemText';
 import ImportExportIcon from '@material-ui/icons/ImportExport';
 import { ContactMail } from '@material-ui/icons';
-import { Snackbar } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
 import logo from '../../Assets/logo.png';
+import stagenetLogo from '../../Assets/stagenet.png';
 import { useGlobalState } from '../../state';
 import WalletInitComponent from './WalletInitComponent';
 import { useStyles } from './styles';
@@ -24,12 +23,12 @@ import TransactionsComponent from '../Wallet/TransactionsComponent';
 import ContactsComponent from '../Contacts/ContactsComponent';
 import * as Constants from '../../Config/constants';
 import WalletComponent from '../Wallet/WalletComponent';
+import * as Interfaces from '../../Config/interfaces';
 
 const MainComponent: React.FC = (): ReactElement => {
   const [gInit] = useGlobalState('init');
   const [gLock] = useGlobalState('lock');
   const [isDrawerOpen, setDrawer] = useState(false);
-  const [invalidPassword, setInvalidPassword] = useState(false);
   const classes = useStyles();
 
   // panel injection drivers
@@ -96,7 +95,12 @@ const MainComponent: React.FC = (): ReactElement => {
             onClick={handleMoveDrawer}
             type="button"
           >
-            <img src={logo} alt="monero logo" width={50} />
+            <img
+              src={gInit.network === Interfaces.NetworkType.MAINNET
+                ? logo : stagenetLogo}
+              alt="monero logo"
+              width={50}
+            />
           </button>
           <Typography variant="h6" noWrap>
             himitsu v0.1.0-experimental
@@ -151,18 +155,6 @@ const MainComponent: React.FC = (): ReactElement => {
         {isWalletInitialized && isViewingTxs && <TransactionsComponent />}
         {isWalletInitialized && isViewingSettings && <SettingsComponent />}
       </main>
-      <Snackbar
-        open={invalidPassword}
-        autoHideDuration={2000}
-        onClose={() => { setInvalidPassword(false); }}
-      >
-        <Alert
-          onClose={() => { setInvalidPassword(false); }}
-          severity="error"
-        >
-          Invalid password.
-        </Alert>
-      </Snackbar>
     </div>
   );
 };

himitsu/src/Components/Main/WalletInitComponent.tsx

@@ -48,7 +48,7 @@ const WalletInitComponent: React.FC = (): ReactElement => {
     showPassword: false,
     isInitializing: false,
     isAdvanced: false,
-    networkType: 'STAGENET', // TODO: set network type after reading address
+    networkType: Interfaces.NetworkType.MAINNET,
     rpcUserName: null,
     rpcPassword: null,
     seed: '',
@@ -138,7 +138,6 @@ const WalletInitComponent: React.FC = (): ReactElement => {
               isSeedConfirmed: true,
               isWalletInitialized: true,
               isRestoringFromSeed: true,
-              network: values.networkType,
             });
             setGlobalState('account', {
               ...gAccount,
@@ -175,7 +174,6 @@ const WalletInitComponent: React.FC = (): ReactElement => {
               ...gInit,
               isWalletInitialized: true,
               isRestoringFromSeed: false,
-              network: values.networkType,
             }); // TODO: snackbar with error handling
             setGlobalState('account', {
               ...gAccount,

himitsu/src/Components/Wallet/TransactionsComponent.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react';
+import { useCookies } from 'react-cookie';
 import BigDecimal from 'js-big-decimal';
 import * as MUI from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
@@ -12,16 +13,20 @@ import * as Interfaces from '../../Config/interfaces';
 import * as AxiosClients from '../../Axios/Clients';
 import { setGlobalState, useGlobalState } from '../../state';
 import { useStyles } from './styles';
+import LockScreenComponent from '../Modals/LockScreenComponent';
 
 let loaded = false;
 const TransactionsComponent: React.FC = (): ReactElement => {
   const classes = useStyles();
-  const [gInit] = useGlobalState('init');
+  const [gLock] = useGlobalState('lock');
+  const [cookies] = useCookies(['himitsu']);
   const [gTransfer] = useGlobalState('transfer');
   const [copy, setCopy] = useState(false);
   const [noTransfers, setNoTransfers] = useState(false);
   const [showProofValidation, setShowProofValidation] = useState(false);
   const [isGeneratingProof, setIsGeneratingProof] = useState(false);
+  const [unlockState, setUnlockState] = React
+    .useState<Interfaces.UnlockState>({ walletName: '', password: '' });
   const [values, setValues] = React.useState<Interfaces.TransactionState>({
     address: '',
     txid: '',
@@ -34,7 +39,12 @@ const TransactionsComponent: React.FC = (): ReactElement => {
       received: 0n,
     },
   });
-  const host = `http://${gInit.rpcHost}/json_rpc`;
+
+  const setCookieInHeader = async (): Promise<void> => {
+    if (cookies.himitsu) {
+      AxiosClients.RPC.defaults.headers.himitsu = `${cookies.himitsu}`;
+    }
+  };
 
   const handleCopy = (): void => {
     setCopy(!copy);
@@ -78,48 +88,60 @@ const TransactionsComponent: React.FC = (): ReactElement => {
   };
 
   const loadTransactions = async (type: string | null): Promise<void> => {
+    await setCookieInHeader();
     let tBody: Interfaces.ShowTransfersRequest = Constants.SHOW_TRANSFERS_REQUEST;
     if (type) {
       tBody = filterTransactions(type);
     }
-    const transfers: Interfaces.ShowTransfersResponse = await (
-      await AxiosClients.RPC.post(host, tBody)).data;
-    const r = transfers.result;
-    const hasTransfers = r.failed || r.in || r.out || r.pending || r.pool;
-    if (hasTransfers) {
-      let all: Interfaces.Transfer[] = [];
-      if (r.failed) {
-        all = all.concat(...all, r.failed);
-      }
-      if (r.in) {
-        all = all.concat(...all, r.in);
-      }
-      if (r.pending) {
-        all = all.concat(...all, r.pending);
-      }
-      if (r.pool) {
-        all = all.concat(...all, r.pool);
-      }
-      if (r.out) {
-        all = all.concat(...all, r.out);
-      }
-      const filter: Set<Interfaces.Transfer> = new Set(all);
-      setGlobalState('transfer', { ...gTransfer, transferList: Array.from(filter) });
-    } else {
-      setGlobalState('transfer', { ...gTransfer, transferList: [] });
-      handleNoTransfers();
-    }
-    if (!loaded) {
-      loaded = true;
-    }
+    await AxiosClients.RPC.post(Constants.JSON_RPC, tBody)
+      .then((transfers) => {
+        const rResponse: Interfaces.ShowTransfersResponse = transfers.data;
+        const r = rResponse.result;
+        const hasTransfers = r.failed || r.in || r.out || r.pending || r.pool;
+        if (hasTransfers) {
+          let all: Interfaces.Transfer[] = [];
+          if (r.failed) {
+            all = all.concat(...all, r.failed);
+          }
+          if (r.in) {
+            all = all.concat(...all, r.in);
+          }
+          if (r.pending) {
+            all = all.concat(...all, r.pending);
+          }
+          if (r.pool) {
+            all = all.concat(...all, r.pool);
+          }
+          if (r.out) {
+            all = all.concat(...all, r.out);
+          }
+          const filter: Set<Interfaces.Transfer> = new Set(all);
+          setGlobalState('transfer', { ...gTransfer, transferList: Array.from(filter) });
+        } else {
+          setGlobalState('transfer', { ...gTransfer, transferList: [] });
+          handleNoTransfers();
+        }
+        if (!loaded) {
+          loaded = true;
+        }
+      })
+      .catch((e: Interfaces.ReAuthState) => {
+        setUnlockState({
+          ...unlockState,
+          walletName: e.response.data.himitsuName
+            ? e.response.data.himitsuName : unlockState.walletName,
+        });
+        setGlobalState('lock', { ...gLock, isScreenLocked: true, isProcessing: true });
+        loaded = true;
+      });
   };
 
   const generateTxProof = async (txid: string, address: string): Promise<void> => {
     const proofBody: Interfaces.GetTxProofRequest = Constants.GET_TX_PROOF_REQUEST;
     proofBody.params.address = address;
     proofBody.params.txid = txid;
     const proof: Interfaces.GetTxProofResponse = await (
-      await AxiosClients.RPC.post(host, proofBody)).data;
+      await AxiosClients.RPC.post(Constants.JSON_RPC, proofBody)).data;
     setValues({ ...values, txProof: proof.result.signature });
   };
 
@@ -130,7 +152,7 @@ const TransactionsComponent: React.FC = (): ReactElement => {
     proofBody.params.signature = values.txProof;
     proofBody.params.txid = values.txid;
     const proof: Interfaces.CheckTxProofResponse = await (
-      await AxiosClients.RPC.post(host, proofBody)).data;
+      await AxiosClients.RPC.post(Constants.JSON_RPC, proofBody)).data;
     if (proof.result.good) {
       setValues({ ...values, proofValidation: proof.result });
       setShowProofValidation(true);
@@ -145,6 +167,7 @@ const TransactionsComponent: React.FC = (): ReactElement => {
 
   return (
     <div className="container-fluid">
+      <LockScreenComponent refresh={() => loadTransactions(null)} />
       <div className={classes.buttonRow}>
         <MUI.ButtonGroup variant="outlined" aria-label="outlined button group">
           <MUI.Button onClick={() => loadTransactions('failed')}>Failed</MUI.Button>

himitsu/src/Components/Wallet/WalletComponent.tsx

@@ -121,6 +121,12 @@ const WalletComponent: React.FC = (): ReactElement => {
             loaded = true;
             const a: Interfaces.ShowAddressResponse = await aResponse.data;
             if (a.result) {
+              const vReq: Interfaces.ValidateAddressRequest = Constants.VALIDATE_ADDRESS_REQUEST;
+              vReq.params.address = a.result.address;
+              const vRes: Interfaces.ValidateAddressResponse = await (
+                await AxiosClients.RPC.post(Constants.JSON_RPC, vReq)
+              ).data;
+              setGlobalState('init', { ...gInit, network: vRes.result.nettype });
               await AxiosClients.RPC.post(Constants.JSON_RPC, bBody)
                 .then(async (bResponse) => {
                   const b: Interfaces.ShowBalanceResponse = await bResponse.data;

himitsu/src/Config/interfaces.tsx

@@ -7,6 +7,11 @@ export interface RequestContext {
   method: string;
 }
 
+export enum NetworkType {
+  // eslint-disable-next-line no-unused-vars
+  MAINNET = 'mainnet',
+}
+
 // Complex Component State
 export interface WalletInitState {
   monerodHost: string;
@@ -19,7 +24,7 @@ export interface WalletInitState {
   rpcUserName: string | null;
   rpcPassword: string | null;
   seed: string;
-  networkType: string;
+  networkType: NetworkType | null;
   mode: string;
   height: number;
 }
@@ -279,7 +284,7 @@ interface ValidateAddressResult {
   valid: boolean;
   integrated: boolean;
   subaddress: boolean;
-  nettype: string;
+  nettype: NetworkType;
   openalias_address: boolean;
 }
 

himitsu/src/state.tsx

@@ -31,7 +31,7 @@ export const {
     isWalletInitialized: walletInit,
     isRestoringFromSeed: false,
     isSeedConfirmed: seedConfirmationInit,
-    network: '', // TODO: add MAINNET, STAGENET enum / flags
+    network: Interfaces.NetworkType.MAINNET || null,
     rpcHost: host || 'localhost:38083',
   },
   transfer: {