1 files changed, 40 insertions, 0 deletions
diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx
new file mode 100644
index 000000000..28ec28ed5
--- /dev/null
+++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx
@@ -0,0 +1,40 @@
+import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import * as React from 'react';
+import { constants } from 'ts/utils/constants';
+
+interface NetworkDropDownProps {
+    updateSelectedNetwork: (e: any, index: number, value: number) => void;
+    selectedNetworkId: number;
+    avialableNetworkIds: number[];
+}
+
+interface NetworkDropDownState {}
+
+export class NetworkDropDown extends React.Component<NetworkDropDownProps, NetworkDropDownState> {
+    public render() {
+        return (
+            <div className="mx-auto" style={{ width: 120 }}>
+                <DropDownMenu value={this.props.selectedNetworkId} onChange={this.props.updateSelectedNetwork}>
+                    {this._renderDropDownItems()}
+                </DropDownMenu>
+            </div>
+        );
+    }
+    private _renderDropDownItems() {
+        const items = _.map(this.props.avialableNetworkIds, networkId => {
+            const networkName = constants.NETWORK_NAME_BY_ID[networkId];
+            const primaryText = (
+                <div className="flex">
+                    <div className="pr1" style={{ width: 14, paddingTop: 2 }}>
+                        <img src={`/images/network_icons/${networkName.toLowerCase()}.png`} style={{ width: 14 }} />
+                    </div>
+                    <div>{networkName}</div>
+                </div>
+            );
+            return <MenuItem key={networkId} value={networkId} primaryText={primaryText} />;
+        });
+        return items;
+    }
+}