Our currency exchange app will constitute of the following:

• The main App.js file
• The following React components:
  • Container.js
  • AppLogin.js
  • AddressBar.js
  • TradePanel.js
  • Orderbook.js
  • Trades.js 
• The following asset interfaces:
  • Assets.js
  • USD.js
  • GBP.js
  • EUR.js

The following is a brief description of the components:

• App.js: The main App.js file that implements the methods that interact with the Stellar network and submits transactions to the network. It invokes Container.js for rendering the child components and forwards the current state to Container.js.
• React components: These components render our currency exchange app:
  • Container.js: It receives the current state from App.js and passes it to the child components.
  • AppLogin.js: A login screen that asks for the user's secret key, to set the default user account. All transactions are submitted from this account. The secret key is held within the app, and not stored permanently.
  • AddressBar.js: It implements an address bar that shows the user's Stellar account ID and current USD, GBP, and EUR balance.
  • TradePanel.js: It renders a buy-and-sell panel that permits the user to enter the amount and price, and submit a buy or sell request to the app.
  • OrderBook.js: This component renders the orderbook in the app for a selected trading pair. It maps the bids and asks arrays for each asset pair, and displays it to the user. The bids[] and asks[] arrays are populated with buy-and-sell orders from Stellar's distributed exchange.
  • Trades.js: This component renders and displays the successful trades in the exchange.
• Asset interfaces: These are used to instantiate the asset object within the app. They contain the asset code, issuer account, and symbol. There is one interface for each asset. The master interface, Assets.js, exports all three assets as an array within the app.