feat: add referral link

src/renderer/component/copyableText/view.jsx

@@ -9,34 +9,39 @@ type Props = {
   copyable: string,
   snackMessage: ?string,
   doToast: ({ message: string }) => void,
+  label?: string,
 };
 
 export default class CopyableText extends React.PureComponent<Props> {
   constructor() {
     super();
 
-    this.input = null;
+    this.input = React.createRef();
+    (this: any).onFocus = this.onFocus.bind(this);
   }
 
-  input: ?HTMLInputElement;
+  input: { current: React.ElementRef<any> };
+
+  onFocus() {
+    // We have to go a layer deep since the input is inside the form component
+    const topRef = this.input.current;
+    if (topRef && topRef.input && topRef.input.current) {
+      topRef.input.current.select();
+    }
+  }
 
   render() {
-    const { copyable, doToast, snackMessage } = this.props;
+    const { copyable, doToast, snackMessage, label } = this.props;
 
     return (
       <FormField
         type="text"
         className="form-field--copyable"
         readOnly
+        label={label}
         value={copyable || ''}
-        ref={input => {
-          this.input = input;
-        }}
-        onFocus={() => {
-          if (this.input) {
-            this.input.select();
-          }
-        }}
+        ref={this.input}
+        onFocus={this.onFocus}
         inputButton={
           <Button
             button="primary"

src/renderer/component/inviteNew/index.js

@@ -3,6 +3,7 @@ import {
   selectUserInvitesRemaining,
   selectUserInviteNewIsPending,
   selectUserInviteNewErrorMessage,
+  selectUserInviteReferralLink,
   doUserInviteNew,
 } from 'lbryinc';
 import InviteNew from './view';
@@ -10,6 +11,7 @@ import InviteNew from './view';
 const select = state => ({
   errorMessage: selectUserInviteNewErrorMessage(state),
   invitesRemaining: selectUserInvitesRemaining(state),
+  referralLink: selectUserInviteReferralLink(state),
   isPending: selectUserInviteNewIsPending(state),
 });
 

src/renderer/component/inviteNew/view.jsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import Button from 'component/button';
 import { Form, FormField, Submit } from 'component/common/form';
+import CopyableText from 'component/copyableText';
 
 type FormProps = {
   inviteNew: string => void,
@@ -64,11 +65,12 @@ type Props = {
   inviteNew: string => void,
   isPending: boolean,
   rewardAmount: number,
+  referralLink: string,
 };
 
 class InviteNew extends React.PureComponent<Props> {
   render() {
-    const { errorMessage, inviteNew, isPending, rewardAmount } = this.props;
+    const { errorMessage, inviteNew, isPending, rewardAmount, referralLink } = this.props;
 
     return (
       <section className="card card--section">
@@ -87,6 +89,12 @@ class InviteNew extends React.PureComponent<Props> {
             isPending={isPending}
             rewardAmount={rewardAmount}
           />
+        </div>
+        <div className="card__content">
+          <CopyableText
+            label={__('Or share this link with your friends')}
+            copyable={referralLink}
+          />
 
           <p className="help">
             {__('Earn')} <Button button="link" navigate="/rewards" label={__('rewards')} />{' '}