moved components to TypeScript

src/components/dialogs/ProviderDialog.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
+import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+import { changeProvider as changeProviderAction } from "$redux/user/actions";
+import { IRootState } from "$redux/user/reducer";
+
+interface Props extends IRootState {
+  changeProvider: typeof changeProviderAction,
+}
+
+export const ProviderDialog = ({ provider, changeProvider }: Props) => (
+  <div className="control-dialog top right control-dialog-provider">
+    <div className="helper provider-helper">
+      {
+        Object.keys(PROVIDERS).map(item => (
+          <div
+            className={classnames('provider-helper-thumb', { active: provider === item })}
+            style={{
+              backgroundImage: `url(${replaceProviderUrl(item, { x: 5980, y: 2589, zoom: 13 })})`,
+            }}
+            onMouseDown={() => changeProvider(item)}
+            key={PROVIDERS[item].name}
+          >
+            {
+              provider === item &&
+                <div className="provider-helper-check">
+                  <Icon icon="icon-check-1" />
+                </div>
+            }
+          </div>
+        ))
+      }
+    </div>
+  </div>
+);