add currency component (forgot to add earlier...) and render other pairs if available

websrc/components/Currency.tsx

@@ -0,0 +1,45 @@
+import {Button, ButtonGroup, Dropdown} from "react-bootstrap";
+import React, {Component} from "react";
+import DropdownItem from "react-bootstrap/DropdownItem";
+import {CurrencyPair} from "../types";
+
+
+export type CurrencyPairProps = {
+    active_pair: CurrencyPair,
+    pairs: Array<CurrencyPair>
+}
+
+export class CurrencyDropdown extends Component<CurrencyPairProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    dropdownItems() {
+        return this.props.pairs.map((pair) => {
+            return (
+                <DropdownItem key={String(pair.base) + String(pair.quote)}> {pair.base} / {pair.quote} </DropdownItem>)
+        })
+    }
+
+    render() {
+        return (
+            <Dropdown as={ButtonGroup} className={"mr-3"}>
+                <Button variant="outline-primary"><b>{this.props.active_pair.base} / {this.props.active_pair.quote}</b></Button>
+
+                {this.props.pairs.length > 0 &&
+
+                <>
+                    <Dropdown.Toggle split variant="primary" id="dropdown-split-basic"/>
+
+                    <Dropdown.Menu className={"mr-3"}>
+                        {this.dropdownItems()}
+                    </Dropdown.Menu>
+                </>
+                }
+
+            </Dropdown>
+        )
+    }
+
+}
+