5 files changed, 119 insertions, 2 deletions
diff --git a/gui/packages/components/package.json b/gui/packages/components/package.json
index d1f78a7fb0..c737428e43 100644
--- a/gui/packages/components/package.json
+++ b/gui/packages/components/package.json
@@ -18,6 +18,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jsdom": "^11.0.6",
     "@types/mocha": "^5.2.5",
+    "@types/node": "^10.10.1",
     "@types/react": "^16.4.11",
     "chai": "^4.1.2",
     "enzyme": "^3.3.0",
@@ -32,7 +33,7 @@
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
-    "typescript": "^3.0.1"
+    "typescript": "^3.0.3"
   },
   "dependencies": {},
   "peerDependencies": {
diff --git a/gui/packages/components/src/ClipboardLabel.tsx b/gui/packages/components/src/ClipboardLabel.tsx
new file mode 100644
index 0000000000..9cabe96ffd
--- /dev/null
+++ b/gui/packages/components/src/ClipboardLabel.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Clipboard, Component, Text, Types } from 'reactxp';
+
+interface IProps {
+  value: string;
+  delay: number;
+  message: string;
+  style?: Types.TextStyleRuleSet;
+}
+
+interface IState {
+  showsMessage: boolean;
+}
+
+export default class ClipboardLabel extends Component<IProps, IState> {
+  public static defaultProps: Partial<IProps> = {
+    delay: 3000,
+    message: 'Copied!',
+  };
+
+  public state: IState = {
+    showsMessage: false,
+  };
+
+  private timer: NodeJS.Timer | null = null;
+
+  public componentWillUnmount() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+
+  public render() {
+    return (
+      <Text style={this.props.style} onPress={this.handlePress}>
+        {this.state.showsMessage ? this.props.message : this.props.value}
+      </Text>
+    );
+  }
+
+  private handlePress = () => {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(() => this.setState({ showsMessage: false }), this.props.delay);
+    this.setState({ showsMessage: true });
+
+    Clipboard.setText(this.props.value);
+  };
+}
diff --git a/gui/packages/components/src/SecuredLabel.tsx b/gui/packages/components/src/SecuredLabel.tsx
new file mode 100644
index 0000000000..9bf9ce0cdc
--- /dev/null
+++ b/gui/packages/components/src/SecuredLabel.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Clipboard, Component, Styles, Text, Types } from 'reactxp';
+
+export enum SecuredDisplayStyle {
+  secured,
+  blocked,
+  securing,
+  unsecured,
+}
+
+interface IProps {
+  displayStyle: SecuredDisplayStyle;
+  style: Types.TextStyleRuleSet;
+}
+
+const styles = {
+  securing: Styles.createTextStyle({
+    color: 'rgb(255, 255, 255)', // white
+  }),
+  secured: Styles.createTextStyle({
+    color: 'rgb(68, 173, 77)', // green
+  }),
+  unsecured: Styles.createTextStyle({
+    color: 'rgb(208, 2, 27)', // red
+  }),
+};
+
+export default class SecuredLabel extends Component<IProps> {
+  public render() {
+    return <Text style={[this.props.style, this.getTextStyle()]}>{this.getText()}</Text>;
+  }
+
+  private getText() {
+    switch (this.props.displayStyle) {
+      case SecuredDisplayStyle.secured:
+        return 'SECURE CONNECTION';
+
+      case SecuredDisplayStyle.blocked:
+        return 'BLOCKED CONNECTION';
+
+      case SecuredDisplayStyle.securing:
+        return 'CREATING SECURE CONNECTION';
+
+      case SecuredDisplayStyle.unsecured:
+        return 'UNSECURED CONNECTION';
+    }
+  }
+
+  private getTextStyle() {
+    switch (this.props.displayStyle) {
+      case SecuredDisplayStyle.secured:
+      case SecuredDisplayStyle.blocked:
+        return styles.secured;
+
+      case SecuredDisplayStyle.securing:
+        return styles.securing;
+
+      case SecuredDisplayStyle.unsecured:
+        return styles.unsecured;
+    }
+  }
+}
diff --git a/gui/packages/components/src/index.ts b/gui/packages/components/src/index.ts
index 2a416a4f1d..7d5ad156f0 100644
--- a/gui/packages/components/src/index.ts
+++ b/gui/packages/components/src/index.ts
@@ -1 +1,3 @@
 export { default as Accordion } from './Accordion';
+export { default as ClipboardLabel } from './ClipboardLabel';
+export { default as SecuredLabel, SecuredDisplayStyle } from './SecuredLabel';
diff --git a/gui/packages/components/tsconfig.json b/gui/packages/components/tsconfig.json
index 9ed6e8e8d9..59dcc25146 100644
--- a/gui/packages/components/tsconfig.json
+++ b/gui/packages/components/tsconfig.json
@@ -5,7 +5,8 @@
     "module": "commonjs",
     "jsx": "react",
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["node"]
   },
   "include": [
     "./src/*.ts",