# Price settlement representations
A company is receiving price quote on different products (Oil, Red Wine, etc) and in different currency (EUR, GBP, JPY, USD, ...)

Every 5 minutes, the company will execute some of the orders following the rules of offer and demand.

Settlements therefore are just a list of TOKENS (assets you buy, or the currency you use to pay) that are part of the solution, together with the trades that are executing.

One trivial example is:
- Bob wants to buy 5 red wine bottles 🍷 at most 10 EUR the bottle.
- Alice wants to sell 100 red wine bottles for at least 9 EUR the bottle.

A settlement will be able to satisfy Bob and Alice, and may decide to set the price in 9.5 EUR

The settlement could look like:

{
    "tokens": {
        "EUR": { "label": "EUR" },
        "RED": { "label": "Red wine" }
    },
    "prices": {
        "EUR": "1.0",
        "RED": "9.5"
    },
    "orders": {
        "01": {
            "sell_token": "EUR",
            "buy_token": "RED",
            "sell_amount": "50.0",
            "buy_amount": "10.0",
            "is_sell_order": false,
            "allow_partial_fill": false,
            "exec_sell_amount": "47.5",
            "exec_buy_amount": "5"
        },
        "02": {
            "sell_token": "RED",
            "buy_token": "EUR",
            "sell_amount": "100",
            "buy_amount": "900",
            "is_sell_order": true,
            "allow_partial_fill": true,
            "exec_sell_amount": "5",
            "exec_buy_amount": "47.5"
        }
    }
}

Note that in the settlement:
- Bob wants either to buy at his price or better, but only if he can get the 5 bottles of wines (`allow_partial_fill = false`)
- Alice, is a merchant, she is willing to accept partial orders
- `sell_amount/buy_amount` defines the price. For Bob it means "at most that price" or better, this is because it's a buy order
- For alice, the price the price means "at least", because its a sell order
- `exec_sell_amount`, `exec_buy_amount` reflects how much of the order is executed in the settlement

## The challenge
**We need to build a React component that represent a settlement given a JSON.**

In the following link, you will find an example of something similar (use only as a reference, use your best jusgement to decide how it should look like): https://defiant-owl.surge.sh/solution-graph.html

At the end of this document, you will find an example of a settlemnt.

Some keys for doing this settlement:
- The solution should allow to personalize the nodes, so we can add images for representing currencies and product. Although including image is not strictly required.
- Nice to be able to visualize in tooltips or similar different aspects of the node or trade
- You can, and probably should, use a 3rd party library to represent the graph
- The example presents one typical example, but we would like you to take into account that settlements can be simpler or way more complicated than this (many products and currency). It shold be easy to visualize the solution.
- Is not required to have a perfectly finished solution, the most important part will be to present the options that were considered, and why one is chosen over the other for this specific problem
- Ideally would have a working snipped of code in a React/Typescript. It can be used CRA or https://codesandbox.io or any other option.
- Only the component will be relevant for the review, setup of the app or anything out of this component is excluded from the challenge review

## Delivery format
The solution should come with a simple doc explaining the solution applied and why, pros/cons. The code doesn't need to be complete, it can be explained in text how would you tackle the problem or improve the provided code.

The code can be delivered in https://codesandbox.io or in a github repository.

## Time estimation
`3h`

It's not the purpose of the challenge to build the perfect component, but to propose a pragmatic solution to the problem and explain your reasonings.

## Example of a settlement

{
  "tokens": {
      "EUR": { "label": "EUR" },
      "OIL": { "label": "Oil" }
      "RED": { "label": "Red wine" }
  },
  "prices": {
      "EUR": "1.0",
      "OIL": "13.0",
      "RED": "14.0"
  },
  "orders": {
      "01": {
          "sell_token": "RED",
          "buy_token": "OIL",
          "sell_amount": "12.0",
          "buy_amount": "12.0",
          "is_sell_order": true,
          "allow_partial_fill": false,
          "exec_sell_amount": "12.0",
          "exec_buy_amount": "12.923"
      },
      "02": {
          "sell_token": "OIL",
          "buy_token": "RED",
          "sell_amount": "2.0",
          "buy_amount": "2.2",
          "is_sell_order": true,
          "allow_partial_fill": false,
          "exec_sell_amount": "0.0",
          "exec_buy_amount": "0.0"
      },
      "03": {
          "sell_token": "RED",
          "buy_token": "EUR",
          "sell_amount": "10.0",
          "buy_amount": "150.0",
          "is_sell_order": true,
          "allow_partial_fill": false,
          "exec_sell_amount": "0.0",
          "exec_buy_amount": "0.0"
      },
      "04": {
          "sell_token": "OIL",
          "buy_token": "EUR",
          "sell_amount": "15.0",
          "buy_amount": "180.0",
          "is_sell_order": true,
          "allow_partial_fill": false,
          "exec_sell_amount": "15.0",
          "exec_buy_amount": "195.0"
      },
      "05": {
          "sell_token": "EUR",
          "buy_token": "OIL",
          "sell_amount": "52.0",
          "buy_amount": "4.0",
          "is_sell_order": false,
          "allow_partial_fill": true,
          "exec_sell_amount": "27.0",
          "exec_buy_amount": "2.077"
      },
      "06": {
          "sell_token": "EUR",
          "buy_token": "RED",
          "sell_amount": "280.0",
          "buy_amount": "20.0",
          "is_sell_order": false,
          "allow_partial_fill": true,
          "exec_sell_amount": "168.0",
          "exec_buy_amount": "12.0"
      }
  }
}