Let's go through the sections of our App.js file one by one, as follows:

1. We start by importing the requisite dependencies, components, and asset interfaces, like this:

import React, { Component } from 'react';
import StellarSdk from 'stellar-sdk';
import Nav from './Components/Nav';
import Description from './Components/Description';
import Container from './Components/Container';
import assets from './Assets/Assets';

2. Within our constructor section, we initialize the state of the app, as follows:

class App extends Component {
 
constructor(){
super();
this.appName = 'Currency Exchange';
this.onInputChangeUpdateField =    this.onInputChangeUpdateField.bind(this);
this.assets = assets;

We set the name of the app, bind the methods that change the app state, and map the asset interfaces to the this object.

3. Next, we instantiate the asset objects using the asset interfaces. We use StellarSdk.Asset to instantiate the asset objects. The input parameters (which are the asset code and the issuer account) are fetched from the asset interfaces, like this:

this.USD = new StellarSdk.Asset(this.assets[0].code,this.assets[0].issuer);

this.GBP = new StellarSdk.Asset(this.assets[1].code,this.assets[1].issuer);

this.EUR = new StellarSdk.Asset(this.assets[2].code,this.assets[2].issuer);

4. Next, we set the initial state of our Currency-Exchange app by running the following code:

this.state = {
 
 network: 'Private Testnet',
 account: null,

The network is set to Private Testnet, and the default user account is set to null.

5. Next, we define a set of bids and asks state arrays for each asset pair. Each array will hold the orderbook bids (buys) and asks (sells), and will be updated whenever a new offer is added to the orderbook. The code for this is as follows:

 bidsUSDGBP: [],
 asksUSDGBP: [],
 bidsGBPEUR: [],
 asksGBPEUR: [],
 bidsUSDEUR: [],
 asksUSDEUR: [],

6. The tradesList array stores the successful trades on the network. The initial counter variable for the state is set to the USD asset, while the initial base variable is set to the GBP asset, like this:

tradesList: [],
 counter: this.USD,
 base: this.GBP,

7. Lastly, we set the individual user balances for each asset to zero and initialize the fields used to capture information from the user/trader, like this:

 GBPBalance: 0,
 USDBalance: 0,
 EURBalance: 0,
 fields: {
 secretkey: null, 
 buyprice: null,
 buyamount: null,
 sellprice: null,
 sellamount: null,
 }
 }
 }

8. Next, let's take a look at the componentDidMount() section, as follows:

componentDidMount(){

this.server = new StellarSdk.Server('http://127.0.0.1:8000', {allowHttp: true});
 this.passphrase = 'Standalone Network ; February 2017';
 
}

The componentDidMount() section points the server to the local Horizon instance and instantiates the server object for interacting with the Stellar network. We also set the network passphrase in the this object.

9. Lastly, this app renders the Container component and forwards the current state to the Container component. It also renders the title bar and description using Nav.js and Description.js, like this:

render() {
 
 return (
 <div>
 <Nav appName={this.appName} network={this.state.network} />
 <Description />
 <Container onInputChangeUpdateField={this.onInputChangeUpdateField}
 account={this.state.account}
 base={this.state.base}
 counter={this.state.counter}
 setBalance={this.setBalance}
 assets={this.assets}
 tradesList={this.state.tradesList}
 GBPBalance={this.state.GBPBalance}
 USDBalance={this.state.USDBalance}
 EURBalance={this.state.EURBalance}
 bidsUSDGBP={this.state.bidsUSDGBP}
 asksUSDGBP={this.state.asksUSDGBP}
 bidsUSDEUR={this.state.bidsUSDEUR}
 asksUSDEUR={this.state.asksUSDEUR}
 bidsGBPEUR={this.state.bidsGBPEUR}
 asksGBPEUR={this.state.asksGBPEUR}
 setOrderbookPair = {this.setOrderbookPair}
 Buy={this.Buy}
 Sell={this.Sell} 
 fields={this.state.fields}
 setAccount={this.setAccount}/>
 
 </div>
 )
 }
}
export default App;

OK. Now, we are ready to look at the methods that make our app tick.

Let's start by looking at the setAccount method.