Convert ClipboardLabel to a styled component

6 files changed, 46 insertions, 39 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index f0cbbe0495..8d4d42eecb 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import AccountExpiry from '../../shared/account-expiry';
 import { messages } from '../../shared/gettext';
-import styles from './AccountStyles';
-import AccountTokenLabel from './AccountTokenLabel';
+import styles, { StyledAccountTokenLabel } from './AccountStyles';
 import * as AppButton from './AppButton';
 import { Container, Layout } from './Layout';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
@@ -49,10 +48,7 @@ export default class Account extends Component<IProps> {
                     <Text style={styles.account__row_label}>
                       {messages.pgettext('account-view', 'Account number')}
                     </Text>
-                    <AccountTokenLabel
-                      style={styles.account__row_value}
-                      accountToken={this.props.accountToken || ''}
-                    />
+                    <StyledAccountTokenLabel accountToken={this.props.accountToken || ''} />
                   </View>
 
                   <View style={styles.account__row}>
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index bb230ee759..ac0f5f6dbf 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -1,5 +1,15 @@
 import { Styles } from 'reactxp';
+import styled from 'styled-components';
 import { colors } from '../../config.json';
+import AccountTokenLabel from './AccountTokenLabel';
+
+export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
+  fontFamily: 'Open Sans',
+  fontSize: '16px',
+  lineHeight: '19px',
+  fontWeight: 800,
+  color: colors.white,
+});
 
 export default {
   account: Styles.createViewStyle({
diff --git a/gui/src/renderer/components/AccountTokenLabel.tsx b/gui/src/renderer/components/AccountTokenLabel.tsx
index d581749871..a2459ee61a 100644
--- a/gui/src/renderer/components/AccountTokenLabel.tsx
+++ b/gui/src/renderer/components/AccountTokenLabel.tsx
@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { Types } from 'reactxp';
 import { formatAccountToken } from '../lib/account';
 import ClipboardLabel from './ClipboardLabel';
 
 interface IAccountTokenLabelProps {
   accountToken: string;
-  style?: Types.StyleRuleSetRecursive<Types.TextStyleRuleSet>;
+  className?: string;
 }
 
 export default function AccountTokenLabel(props: IAccountTokenLabelProps) {
   return (
     <ClipboardLabel
-      style={props.style}
       value={props.accountToken}
       displayValue={formatAccountToken(props.accountToken)}
+      className={props.className}
     />
   );
 }
diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index 567c41e45c..e0a507cc48 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -1,20 +1,26 @@
+import log from 'electron-log';
 import * as React from 'react';
-import { Clipboard, Component, Text, Types } from 'reactxp';
+import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
+import { Scheduler } from '../../shared/scheduler';
 
 interface IProps {
   value: string;
   displayValue?: string;
   delay: number;
   message: string;
-  style?: Types.StyleRuleSetRecursive<Types.TextStyleRuleSet>;
+  className?: string;
 }
 
 interface IState {
   showsMessage: boolean;
 }
 
-export default class ClipboardLabel extends Component<IProps, IState> {
+const Label = styled.span({
+  cursor: 'pointer',
+});
+
+export default class ClipboardLabel extends React.Component<IProps, IState> {
   public static defaultProps: Partial<IProps> = {
     delay: 3000,
     message: messages.gettext('COPIED TO CLIPBOARD!'),
@@ -24,31 +30,28 @@ export default class ClipboardLabel extends Component<IProps, IState> {
     showsMessage: false,
   };
 
-  private timer?: NodeJS.Timeout;
+  private scheduler = new Scheduler();
 
   public componentWillUnmount() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
+    this.scheduler.cancel();
   }
 
   public render() {
     const displayValue = this.props.displayValue || this.props.value;
     return (
-      <Text style={this.props.style} onPress={this.handlePress}>
+      <Label className={this.props.className} onClick={this.handlePress}>
         {this.state.showsMessage ? this.props.message : displayValue}
-      </Text>
+      </Label>
     );
   }
 
-  private handlePress = () => {
-    if (this.timer) {
-      clearTimeout(this.timer);
+  private handlePress = async () => {
+    try {
+      await navigator.clipboard.writeText(this.props.value);
+      this.scheduler.schedule(() => this.setState({ showsMessage: false }), this.props.delay);
+      this.setState({ showsMessage: true });
+    } catch (error) {
+      log.error(`Failed to copy to clipboard: ${error.message}`);
     }
-
-    this.timer = global.setTimeout(() => this.setState({ showsMessage: false }), this.props.delay);
-    this.setState({ showsMessage: true });
-
-    Clipboard.setText(this.props.value);
   };
 }
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 68f0c9c30b..b2ae12f9b5 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -7,10 +7,9 @@ import { AccountToken } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import RedeemVoucherContainer from '../containers/RedeemVoucherContainer';
 import { LoginState } from '../redux/account/reducers';
-import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
-import styles from './ExpiredAccountErrorViewStyles';
+import styles, { StyledAccountTokenLabel } from './ExpiredAccountErrorViewStyles';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType } from './Modal';
 import {
@@ -121,10 +120,7 @@ export default class ExpiredAccountErrorView extends Component<
             {messages.pgettext('connect-view', 'Here’s your account number. Save it!')}
           </Text>
           <View style={styles.accountTokenContainer}>
-            <AccountTokenLabel
-              style={styles.accountToken}
-              accountToken={this.props.accountToken || ''}
-            />
+            <StyledAccountTokenLabel accountToken={this.props.accountToken || ''} />
           </View>
         </View>
 
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 93535a043b..15891dd230 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -1,5 +1,15 @@
 import { Styles } from 'reactxp';
+import styled from 'styled-components';
 import { colors } from '../../config.json';
+import AccountTokenLabel from './AccountTokenLabel';
+
+export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
+  fontFamily: 'Open Sans',
+  lineHeight: '24px',
+  fontSize: '24px',
+  fontWeight: 800,
+  color: colors.white,
+});
 
 export default {
   container: Styles.createViewStyle({
@@ -56,13 +66,6 @@ export default {
     height: 68,
     justifyContent: 'center',
   }),
-  accountToken: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    lineHeight: 24,
-    fontSize: 24,
-    fontWeight: '800',
-    color: colors.white,
-  }),
   button: Styles.createViewStyle({
     marginBottom: 24,
   }),