From 08f7666d210317d8caaca72f5a81c860478a2387 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 28 Jun 2018 23:24:57 -0700
Subject: Create AccountConnection component

---
 .../ts/components/ui/account_connection.tsx        | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 packages/website/ts/components/ui/account_connection.tsx

(limited to 'packages/website/ts/components/ui/account_connection.tsx')

diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx
new file mode 100644
index 000000000..0f61ecde4
--- /dev/null
+++ b/packages/website/ts/components/ui/account_connection.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { AccountState } from 'ts/types';
+
+export interface AccountConnectionProps {
+    accountState: AccountState;
+    injectedProviderName: string;
+}
+
+export const AccountConnection: React.StatelessComponent<AccountConnectionProps> = ({
+    accountState,
+    injectedProviderName,
+}) => {
+    return (
+        <Container className="flex items-center">
+            <Circle diameter={6} fillColor={getInjectedProviderColor(accountState)} />
+            <Container marginLeft="6px">
+                <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
+                    {injectedProviderName}
+                </Text>
+            </Container>
+        </Container>
+    );
+};
+
+function getInjectedProviderColor(accountState: AccountState): string {
+    switch (accountState) {
+        case AccountState.Ready:
+            return colors.limeGreen;
+        case AccountState.Locked:
+        case AccountState.Loading:
+        case AccountState.Disconnected:
+        default:
+            return colors.red;
+    }
+}
-- 
cgit v1.2.3