Copy WireGuard key when clicking

2 files changed, 10 insertions, 2 deletions

diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index fdb9982b3f..e801538c29 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -3,6 +3,7 @@ import { Clipboard, Component, Text, Types } from 'reactxp';
 
 interface IProps {
   value: string;
+  displayValue?: string;
   delay: number;
   message: string;
   style?: Types.TextStyleRuleSet;
@@ -31,9 +32,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..cbc19909d9 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,15 @@ 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) + '...'}
+                message={messages.pgettext('account-view', 'COPIED TO CLIPBOARD!')}
+              />
             </Text>
           </View>
         );