Merge branch 'copy-wireguard-key-on-click'

3 files changed, 8 insertions, 4 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 2f16a722d6..1390f78370 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -50,7 +50,6 @@ export default class Account extends Component<IProps> {
                     <ClipboardLabel
                       style={styles.account__row_value}
                       value={this.props.accountToken || ''}
-                      message={messages.pgettext('account-view', 'COPIED TO CLIPBOARD!')}
                     />
                   </View>
 
diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index fdb9982b3f..3a4f96d0a1 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { Clipboard, Component, Text, Types } from 'reactxp';
+import { messages } from '../../shared/gettext';
 
 interface IProps {
   value: string;
+  displayValue?: string;
   delay: number;
   message: string;
   style?: Types.TextStyleRuleSet;
@@ -15,7 +17,7 @@ interface IState {
 export default class ClipboardLabel extends Component<IProps, IState> {
   public static defaultProps: Partial<IProps> = {
     delay: 3000,
-    message: 'Copied!',
+    message: messages.gettext('COPIED TO CLIPBOARD!'),
   };
 
   public state: IState = {
@@ -31,9 +33,10 @@ export default class ClipboardLabel extends Component<IProps, IState> {
   }
 
   public render() {
+    const displayValue = this.props.displayValue || this.props.value;
     return (
       <Text style={this.props.style} onPress={this.handlePress}>
-        {this.state.showsMessage ? this.props.message : this.props.value}
+        {this.state.showsMessage ? this.props.message : displayValue}
       </Text>
     );
   }
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index f51287ce52..4451b8e341 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -6,6 +6,7 @@ import { sprintf } from 'sprintf-js';
 import { messages } from '../../shared/gettext';
 import { IWgKey, WgKeyState } from '../redux/settings/reducers';
 import * as AppButton from './AppButton';
+import ClipboardLabel from './ClipboardLabel';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
 import { BackBarItem, NavigationBar, NavigationContainer, NavigationItems } from './NavigationBar';
@@ -166,10 +167,11 @@ export default class WireguardKeys extends Component<IProps> {
       case 'being-verified':
       case 'key-set':
         // mimicking the truncating of the key from website
+        const publicKey = this.props.keyState.key.publicKey;
         return (
           <View title={this.props.keyState.key.publicKey}>
             <Text style={styles.wgkeys__row_value}>
-              {this.props.keyState.key.publicKey.substring(0, 20) + '...'}
+              <ClipboardLabel value={publicKey} displayValue={publicKey.substring(0, 20) + '...'} />
             </Text>
           </View>
         );