Redux Store Setup

web/src/App.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { MainFrame } from './components/MainFrame';
 import './App.css';
+import {useDispatch, useSelector} from "react-redux";
+import {RootStore} from "./Store";
+import { GetWalletAddress } from '../src/api/Wallet'
 
 function App() {
+
   return (
-      <div>
-        <MainFrame currentPage="home"/>
-      </div>
+    <div>
+        <MainFrame currentPage="home" />
+    </div>
+
+
   );
 }
 
-export default App;
+export default App;

web/src/Store.ts

@@ -0,0 +1,10 @@
+import { createStore, applyMiddleware } from 'redux';
+import RootReducer from './reducers/RootReducer';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import thunk from 'redux-thunk';
+
+const Store = createStore(RootReducer, composeWithDevTools(applyMiddleware(thunk)));
+
+export type RootStore = ReturnType<typeof RootReducer>
+
+export default Store;

web/src/api/Config.ts

@@ -15,7 +15,9 @@ export const RequestConfig: AxiosRequestConfig = {
         'Access-Control-Allow-Origin': '*',
         'Cache-Control': 'no-cache',
         'Content-Type': 'text/plain',
-        'Accept': 'application/json'
+        'Accept': 'application/json',
+        "Access-Control-Allow-Headers": "X-Requested-With, content-type",
+        "Access-Control-Allow-Methods": "PUT, POST, GET, DELETE, PATCH, OPTIONS",
     },
     responseType: 'json'
 };

web/src/api/Wallet.ts

@@ -1,5 +1,87 @@
 import axios from 'axios';
+import { Dispatch } from 'redux';
 import { RequestConfig }from "./Config";
+import { 
+    AddressRes,
+    MnemonicRes,
+    ImportMnemonicReq,
+    ImportMnemonicRes,
+    UnlockWalletReq,
+    UnlockWalletRes,
+    EncryptWalletReq,
+    EncryptWalletRes,
+} from '../types/Wallet';
+import { 
+    WALLET_ADDRESS_RESPONSE,
+    MNEMONIC_RESPONSE,
+    IMPORT_MNEMONIC_REQUEST,
+    IMPORT_MNEMONIC_RESPONSE,
+    UNLOCK_WALLET_REQUEST,
+    UNLOCK_WALLET_RESPONSE,
+    ENCRYPT_WALLET_REQUEST,
+    ENCRYPT_WALLET_RESPONSE,
+    WalletActionTypes,
+    AppActions
+ } from '../types/actions';
+ import { AppState } from '../store/configureStore';
+
+export const getMnemonicResponse = (mnemonic_response: MnemonicRes[]): AppActions => ({
+    type: MNEMONIC_RESPONSE,
+    mnemonic_response
+})
+
+export const getWalletAdress = (address_response: AddressRes ): AppActions => ({
+    type: WALLET_ADDRESS_RESPONSE,
+    address_response
+})
+
+export const MnemonicRequest = (mnemonic_request: ImportMnemonicReq[]): AppActions => ({
+    type: IMPORT_MNEMONIC_REQUEST,
+    mnemonic_request
+}) 
+
+export const RestoreMnemonicResponse = (restore_mnemonic_response: ImportMnemonicRes ): AppActions => ({
+    type: IMPORT_MNEMONIC_RESPONSE,
+    restore_mnemonic_response
+})
+
+export const UnlockRequest = (wallet_request: UnlockWalletReq[]): AppActions => ({
+    type: UNLOCK_WALLET_REQUEST,
+    wallet_request
+})
+
+export const UnlockResponse = (wallet_response: UnlockWalletRes): AppActions => ({
+    type: UNLOCK_WALLET_RESPONSE,
+    wallet_response
+})
+
+export const EncryptRequest = (encrypt_request: EncryptWalletReq): AppActions => ({
+    type: ENCRYPT_WALLET_REQUEST,
+    encrypt_request
+})
+
+export const EncryptResponse = (encrypt_response: EncryptWalletRes): AppActions => ({
+    type: ENCRYPT_WALLET_RESPONSE,
+    encrypt_response
+})
+
+export const GetWalletAddress = () => async (dispatch: Dispatch<WalletActionTypes>) => {
+    try {
+        const response = await axios.get("/wallet/defaultaddress", RequestConfig);
+        console.log(response, "response inside Wallet Address Action. ts")
+        dispatch({
+            type: WALLET_ADDRESS_RESPONSE,
+            address_response: response.data
+        })
+    } catch(error) {
+        var errMessage = "GetWalletAddresses execute [Get] /wallet/defaultaddress error: " + error;
+        var errResponse: WalletAddressResponse = {
+            address: errMessage
+        }
+        return errResponse;
+    }
+
+}
 
 export interface WalletAddressResponse {
     address: string;
@@ -38,12 +120,13 @@ export interface EncryptWalletResponse {
     result: string;
 };
 
+
 export const GetMnemonic = async (): Promise<MnemonicResponse> => {
     return await axios.get<MnemonicResponse>("/wallet/mnemonic", RequestConfig).then(function (response) {
+
         return response.data;
     }).catch(function (error) {
         var errMessage = "GetMnemonics execute [Get] /wallet/mnemonic error: " + error;
-        console.log(errMessage);
         var errResponse: MnemonicResponse = {
             hdseed: "",
             mnemonic: "",

web/src/components/MainFrame.tsx

@@ -1,8 +1,10 @@
 import React, { Component } from "react";
 import { Settings } from "./Settings";
+import ReactDOM from "react-dom";
 import { TerminalPage } from "./TerminalPage";
 import { SetupWizard } from "./SetupWizard";
 import { WalletView } from "./wallet/View";
+import {useDispatch, useSelector} from "react-redux";
 import {
   Button,
   Dropdown,
@@ -33,7 +35,7 @@ export class MainFrame extends Component<MainFrameProps, MainFrameState> {
     this.currentPage = props.currentPage ? props.currentPage : "home";
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.changePage = this.changePage.bind(this);
   }
 
@@ -46,7 +48,7 @@ export class MainFrame extends Component<MainFrameProps, MainFrameState> {
     });
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private changePage(pageName: string): void {
     this.currentPage = pageName;
@@ -106,6 +108,10 @@ export class MainFrame extends Component<MainFrameProps, MainFrameState> {
                       />
                     </Dropdown.Menu>
                   </Dropdown>
+                  <Menu.Item onClick={() => this.changePage("bridges")} as="a">
+                    <Icon name="connectdevelop" />
+                    Test Button
+                  </Menu.Item>
                 </Menu>
               </div>
             </div>

web/src/components/Settings.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import ReactDOM from "react-dom";
 import { Button, Form, Header } from "semantic-ui-react";
 import { RestartWebServer, UpdateWebServerConfig, WebServerConfig, WebServerRestartRequest } from "../api/WebServerConfig";
 import { UpdateIceConfig, IceServerConfig } from "../api/IceServerConfig";
@@ -28,7 +29,7 @@ export class Settings extends Component<SettingsProps, SettingsState> {
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.getConfigSettings = this.getConfigSettings.bind(this);
     this.updateIceConfig = this.updateIceConfig.bind(this);
     this.updateWebServerConfig = this.updateWebServerConfig.bind(this);
@@ -39,7 +40,7 @@ export class Settings extends Component<SettingsProps, SettingsState> {
     this.getConfigSettings();
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private getConfigSettings = () => {
     GetConfigSettings().then((data) => {

web/src/components/SetupWizard.tsx

@@ -16,14 +16,14 @@ export class SetupWizard extends Component<SetupWizardProps, SetupWizardState> {
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
   }
 
   componentDidMount(): void {
     this.setState({ currentStep: this.props.currentStep });
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   render() {
     return (

web/src/components/TerminalPage.tsx

@@ -18,14 +18,14 @@ export class TerminalPage extends Component<TerminalProps, TerminalState> {
 
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
   }
 
   componentDidMount(): void {
     this.setState({ mode: this.props.mode });
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   render() {
     return (

web/src/components/wallet/FileRestore.tsx

@@ -33,7 +33,7 @@ export class WalletFileRestore extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.filesSelectedHandler = this.filesSelectedHandler.bind(this);
     this.loadSecureFileData = this.loadSecureFileData.bind(this);
     this.onMnemonic = this.onMnemonic.bind(this);
@@ -47,7 +47,7 @@ export class WalletFileRestore extends Component<
     this.setState({ fileContents: undefined });
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private loadSecureFileData = (file: FilePathInfo, reader?: FileReader) => {
     if (reader) {

web/src/components/wallet/MnemonicBackup.tsx

@@ -27,7 +27,7 @@ export class MnemonicBackup extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.backupSecureFile = this.backupSecureFile.bind(this);
     this.getMnemonic = this.getMnemonic.bind(this);
   }
@@ -36,7 +36,7 @@ export class MnemonicBackup extends Component<
     this.getMnemonic();
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   backupSecureFile = async () => {
     if (this.state && this.state.mnemonic) {

web/src/components/wallet/MnemonicRestore.tsx

@@ -27,13 +27,13 @@ export class WalletMnemonicRestore extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.setMnemonic = this.setMnemonic.bind(this);
   }
 
   componentDidMount(): void {}
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private setMnemonic(words: string): void {
     this.setState({ mnemonic: words });

web/src/components/wallet/MnemonicWarning.tsx

@@ -20,13 +20,13 @@ export class MnemonicWarning extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount(): void {}
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   handleSubmit = (e: FormEvent) => {
     //if we don't prevent form submission, causes a browser reload

web/src/components/wallet/Restore.tsx

@@ -25,14 +25,14 @@ export class WalletRestore extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
   }
 
   componentDidMount(): void {
     this.setState({ useMnemonic: undefined });
   }
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   render() {
     return (

web/src/components/wallet/RestoreFilePassword.tsx

@@ -28,13 +28,13 @@ export class WalletRestoreFilePassword extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.decryptSecureMnemonicFile = this.decryptSecureMnemonicFile.bind(this);
   }
 
   componentDidMount(): void {}
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private decryptSecureMnemonicFile(): void {
     let mnemonicFilePassphrase = this.state.passwordText;

web/src/components/wallet/SecureFilePassword.tsx

@@ -31,15 +31,15 @@ export class WalletSecureFilePassword extends Component<
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.encryptSecureMnemonicFile = this.encryptSecureMnemonicFile.bind(this);
     // init state
     this.state = { password: "", confirmPassword: "" };
   }
 
   componentDidMount(): void {}
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private encryptSecureMnemonicFile = async () => {
     if (this.state.password !== this.state.confirmPassword) {

web/src/components/wallet/Setup.tsx

@@ -44,7 +44,7 @@ export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.componentDidUnmount = this.componentDidUnmount.bind(this);
+    this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.onNewWallet = this.onNewWallet.bind(this);
     this.onMnemonicBackup = this.onMnemonicBackup.bind(this);
     // set initial state
@@ -57,7 +57,7 @@ export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
 
   componentDidMount(): void {}
 
-  componentDidUnmount(): void {}
+  componentWillUnmount(): void {}
 
   private onNewWallet(): void {
     this.props.onComplete();