Edge FlipInput component architecture

FlipInput Architecture

This is a proposed architecture for the commonly used, and frequently buggy, FlipInput and ExchangeFlipInput component. 

## FlipInput

FlipInput component is not to access any redux state and all state is to be contained inside component. This will be a non-connected component. FlipInput will know nothing about nativeAmounts. All amounts going into and out of FlipInput are floatingpoint big numbers in US locale decimal format with no 1000s separator and are agnostic of native vs currency vs display amounts. All values are “decimal” values. Internally, FlipInput will display locale fixed `displayAmounts` which will have 1000s separators and decimal points added. For nomenclature, `displayAmounts` will refer to values with localized amounts in string format with 1000s separator. `decimalAmounts` will refer to en_US decimal format amounts with no 1000s separator and a `.` as the decimal point. Note that the FlipInput no longer returns both the primary and secondary values when they change nor does it notify when the inputs have flipped. Flips are handled internally and the parent assumes to only care about the primary value.

Component accepts the following props

```
export type FlipInputOwnProps = {
  // Override value of the primary field. This will be the initial value of the primary field. Only changes to this value will
  // cause changes to the primary field
  overridePrimaryDecimalAmount: string, 
  
  // Exchange rate
  exchangeSecondaryToPrimaryRatio: string,
  
  // Information regarding the primary and secondary field. Mostly related to currency name, code, and denominations
  primaryInfo: FlipInputFieldInfo,
  secondaryInfo: FlipInputFieldInfo,
  
  // Callback when primaryDecimalAmount changes. **This is only called when the user types into a field or if
  // exchangeSecondaryToPrimaryRatio changes. This does NOT get called when overridePrimaryDecimalAmount is changed by the parent
  onAmountChanged(decimalAmount: string): void,
}

export type FlipInputFieldInfo = {
  currencyName: string,
  currencySymbol: string,  // currency symbol of field
  currencyCode: string, // 3-5 digit currency code
  
  // Maximum number of decimals to allow the user to enter. FlipInput will automatically truncate use input to this
  // number of decimals as the user types.
  maxEntryDecimals: number, 
  
  // Maximum number of decimals to convert from the opposite field to this field. 
  // ie If the user is typing into the fiat field, and this FlipInputFieldInfo refers to a BTC field, then this is the number of
  // decimals to use when converting the fiat value into this crypto field.
  maxConversionDecimals: number, 
}

## ExchangeFlipInput

As before, the ExchangeFlipInput is a wrapper component around the FlipInput. It's primary task is to setup the props sent to FlipInput based on the higher level GuiCurrencyInfo structures passed in from the parent. ExchangeFlipInput accepts the following props

export type ExchangedFlipInputAmounts = {
  exchangeAmount: string,
  nativeAmount: string
}

export type ExchangedFlipInputOwnProps = {
  // Initial amount of the primary field in `exchangeAmount` denomination. This is converted to a `decimalAmount`
  // in the proper display denomination to be passed into FlipInput
  overridePrimaryExchangeAmount: string,
  primaryCurrencyInfo: GuiCurrencyInfo,
  secondaryCurrencyInfo: GuiCurrencyInfo,

  // Exchange rate
  exchangeSecondaryToPrimaryRatio: number,

  // Callback for when the `primaryAmount` changes. This returns both a `nativeAmount` and an `exchangeAmount`. Both
  // amounts are ONLY for the primary field. Parent will not be given values for the secondary field.
  onExchangeAmountChanged(amounts: ExchangedFlipInputAmounts): void
}