Replace old send page with new new one - Closes #1743

i18n/locales/en/common.json

@@ -78,6 +78,7 @@
   "Confirm": "Confirm",
   "Confirm (Fee: 1 LSK)": "Confirm (Fee: 1 LSK)",
   "Confirm (Fee: {{fee}} LSK)": "Confirm (Fee: {{fee}} LSK)",
+  "Confirm on Ledger": "Confirm on Ledger",
   "Confirm to register your second passphrase on the blockchain.": "Confirm to register your second passphrase on the blockchain.",
   "Confirm transaction on Ledger Nano S": "Confirm transaction on Ledger Nano S",
   "Confirm transfer": "Confirm transfer",
@@ -129,6 +130,7 @@
   "Delegates have great responsibility within the Lisk system for securing the blockchain. Becoming a delegate requires the registration of a name. The top 101 delegates are eligible to forge.": "Delegates have great responsibility within the Lisk system for securing the blockchain. Becoming a delegate requires the registration of a name. The top 101 delegates are eligible to forge.",
   "Details": "Details",
   "Discard": "Discard",
+  "Does the problem still persist?": "Does the problem still persist?",
   "Done": "Done",
   "Don’t be a stranger! Connect with our worldwide community.": "Don’t be a stranger! Connect with our worldwide community.",
   "Dowload started": "Dowload started",
@@ -209,7 +211,6 @@
   "Invalid address": "Invalid address",
   "Invalid amount": "Invalid amount",
   "Is Blockchain Secure?": "Is Blockchain Secure?",
-  "Is the problem presisting?": "Is the problem presisting?",
   "It is highly recommended to delete the PDF and remove it from your trash after printing.": "It is highly recommended to delete the PDF and remove it from your trash after printing.",
   "It is recommended that you initialize your Lisk ID.": "It is recommended that you initialize your Lisk ID.",
   "It will cost you only the usual {{fee}} LSK transaction fee.": "It will cost you only the usual {{fee}} LSK transaction fee.",
@@ -243,6 +244,7 @@
   "Lisk.Chat": "Lisk.Chat",
   "Loading accounts": "Loading accounts",
   "Local": "Local",
+  "Log Out": "Log Out",
   "Login Type not recognized.": "Login Type not recognized.",
   "Logout": "Logout",
   "Look at your Ledger for confirmation": "Look at your Ledger for confirmation",
@@ -263,6 +265,7 @@
   "Minimize": "Minimize",
   "Multisignature Creation": "Multisignature Creation",
   "My Account": "My Account",
+  "My Wallet": "My Wallet",
   "Name": "Name",
   "Name is already taken!": "Name is already taken!",
   "Name is available": "Name is available",
@@ -288,6 +291,7 @@
   "Okay": "Okay",
   "Onboarding whenever you need": "Onboarding whenever you need",
   "Oops! Wrong passphrase": "Oops! Wrong passphrase",
+  "Oops, looks like something went wrong. Please try again.": "Oops, looks like something went wrong. Please try again.",
   "Open the Lisk App": "Open the Lisk App",
   "Open the Lisk App with your Ledger Nano S": "Open the Lisk App with your Ledger Nano S",
   "Out": "Out",
@@ -340,7 +344,6 @@
   "Remove from bookmarks": "Remove from bookmarks",
   "Removed Votes": "Removed Votes",
   "Report the error via E-Mail": "Report the error via E-Mail",
-  "Report the error via email": "Report the error via email",
   "Request": "Request",
   "Request LSK": "Request LSK",
   "Requested amount": "Requested amount",
@@ -380,7 +383,7 @@
   "Send to Address": "Send to Address",
   "Send to address": "Send to address",
   "Send to this address": "Send to this address",
-  "Send {{value}} LSK": "Send {{value}} LSK",
+  "Send {{amount}} LSK": "Send {{amount}} LSK",
   "Sender": "Sender",
   "Session timeout": "Session timeout",
   "Session timeout in": "Session timeout in",
@@ -445,10 +448,12 @@
   "Transaction": "Transaction",
   "Transaction Fee": "Transaction Fee",
   "Transaction ID": "Transaction ID",
+  "Transaction aborted on device": "Transaction aborted on device",
   "Transaction failed": "Transaction failed",
   "Transaction fee": "Transaction fee",
   "Transaction is being processed and will be confirmed. It may take up to 15 minutes to be secured in the blockchain.": "Transaction is being processed and will be confirmed. It may take up to 15 minutes to be secured in the blockchain.",
   "Transaction not found": "Transaction not found",
+  "Transaction submitted": "Transaction submitted",
   "Transaction summary": "Transaction summary",
   "Transactions can’t be reversed": "Transactions can’t be reversed",
   "Transfer Transaction": "Transfer Transaction",
@@ -518,11 +523,13 @@
   "You can use your passphrase to sign a message. ": "You can use your passphrase to sign a message. ",
   "You have already registered as a delegate.": "You have already registered as a delegate.",
   "You have cancelled the transaction on your hardware wallet. You can either continue or retry.": "You have cancelled the transaction on your hardware wallet. You can either continue or retry.",
+  "You have cancelled the transaction on your harware wallet.": "You have cancelled the transaction on your harware wallet.",
   "You have cancelled voting on your hardware wallet.": "You have cancelled voting on your hardware wallet.",
   "You must keep it safe as it is the only way to access your wallet and cannot be recovered if lost.": "You must keep it safe as it is the only way to access your wallet and cannot be recovered if lost.",
   "You only need to do this once for each Lisk ID.": "You only need to do this once for each Lisk ID.",
   "You will be able to select the desired network when signing in": "You will be able to select the desired network when signing in",
   "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.": "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.",
+  "You will find it in My Transactions in a matter of minutes": "You will find it in My Transactions in a matter of minutes",
   "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.": "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.",
   "You will send a small amount of {{fee}} LSK to yourself and therefore initialize your ID.": "You will send a small amount of {{fee}} LSK to yourself and therefore initialize your ID.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
@@ -570,7 +577,5 @@
   "{{count}} delegate(s) selected to vote_plural": "{{count}} delegates selected to vote",
   "{{length}} extra characters": "{{length}} extra characters",
   "{{length}} out of {{total}} characters left": "{{length}} out of {{total}} characters left",
-  "{{paragraph}}": "{{paragraph}}",
-  "{{title}}": "{{title}}",
   "{{title}} has been added to your Dashboard.": "{{title}} has been added to your Dashboard."
 }

src/actions/transactions.js

@@ -13,6 +13,7 @@ import Fees from '../constants/fees';
 import transactionTypes from '../constants/transactionTypes';
 import { toRawLsk } from '../utils/lsk';
 import { sendWithLedger } from '../utils/api/ledger';
+import { loginType } from '../constants/hwConstants';
 
 export const cleanTransactions = () => ({
   type: actionTypes.cleanTransactions,
@@ -243,10 +244,10 @@ export const transactionsUpdated = ({
 const handleSentError = ({ error, account, dispatch }) => {
   let text;
   switch (account.loginType) {
-    case 0:
+    case loginType.normal:
       text = error && error.message ? `${error.message}.` : i18next.t('An error occurred while creating the transaction.');
       break;
-    case 1:
+    case loginType.ledger:
       text = i18next.t('You have cancelled the transaction on your hardware wallet. You can either continue or retry.');
       break;
     default:
@@ -268,11 +269,11 @@ export const sent = ({
     const liskAPIClient = getState().peers.liskAPIClient;
     const timeOffset = getTimeOffset(getState());
     switch (account.loginType) {
-      case 0:
+      case loginType.normal:
         // eslint-disable-next-line
         [error, callResult] = await to(send(liskAPIClient, recipientId, toRawLsk(amount), passphrase, secondPassphrase, data, timeOffset));
         break;
-      case 1:
+      case loginType.ledger:
         // eslint-disable-next-line
         [error, callResult] = await to(sendWithLedger(liskAPIClient, account, recipientId, toRawLsk(amount), secondPassphrase, data, timeOffset));
         break;

src/components/sendV2/form/form.css

@@ -10,7 +10,7 @@
   max-width: 443px;
   height: auto;
   background-color: var(--color-white);
-  box-shadow: var(--box-shadow-standar2);
+  box-shadow: var(--box-shadow-graph-selector);
   border-radius: var(--border-radius-box);
 }
 

src/components/sendV2/form/form.js

@@ -68,20 +68,27 @@ class Form extends React.Component {
     const { prevState } = this.props;
 
     if (prevState.fields && Object.entries(prevState.fields).length > 0) {
-      this.setState({ fields: { ...prevState.fields } });
+      this.setState({
+        ...this.state,
+        fields: {
+          ...this.state.fields,
+          ...prevState.fields,
+        },
+      });
     }
   }
 
   ifDataFromUrl() {
     const { fields = {} } = this.props;
 
-    if (Object.entries(fields).length > 0) {
+    if (fields.recipient.address !== '' || fields.amount.value !== '' || fields.reference.value !== '') {
       this.setState({
         fields: {
           ...this.state.fields,
           recipient: {
             ...this.state.fields.recipient,
             address: fields.recipient.address,
+            value: fields.recipient.address,
           },
           amount: {
             ...this.state.fields.amount,
@@ -324,7 +331,7 @@ class Form extends React.Component {
                 src={ fields.amount.error ? svg.alert_icon : svg.ok_icon}
               />
             </span>
-            <span className={`${styles.feedback} ${fields.amount.error ? 'error' : ''} ${fields.amount.feedback ? styles.show : ''}`}>
+            <span className={`${styles.feedback} ${fields.amount.error ? 'error' : ''} ${fields.amount.feedback ? styles.show : ''} amount-feedback`}>
               {fields.amount.feedback}
             </span>
             <span className={styles.amountHint}>
@@ -360,7 +367,7 @@ class Form extends React.Component {
                 name='reference'
                 value={fields.reference.value}
                 placeholder={this.props.t('Write message')}
-                className={`${styles.textarea} ${fields.reference.error ? 'error' : ''}`} />
+                className={`${styles.textarea} ${fields.reference.error ? 'error' : ''} message`} />
               <SpinnerV2 className={`${styles.spinner} ${this.state.isLoading && fields.reference.value ? styles.show : styles.hide}`}/>
               <img
                 className={`${styles.status} ${!this.state.isLoading && fields.reference.value ? styles.show : styles.hide}`}
@@ -374,7 +381,7 @@ class Form extends React.Component {
 
         <footer>
           <PrimaryButtonV2
-            className={`${styles.confirmButton} btn-submit`}
+            className={`${styles.confirmButton} btn-submit send-next-button`}
             disabled={isBtnDisabled}
             onClick={this.onGoNext}
           >

src/components/sendV2/form/form.test.js

@@ -48,7 +48,11 @@ describe('Form', () => {
 
   const props = {
     t: v => v,
-    fields: {},
+    fields: {
+      recipient: { address: '' },
+      amount: { value: '' },
+      reference: { value: '' },
+    },
     prevState: {
       fields: {},
     },

src/components/sendV2/send.css

@@ -23,6 +23,18 @@
   height: auto;
 }
 
+footer > div {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+
+  & > .btn {
+    max-width: 209px;
+  }
+}
+
 :global(.offlineWrapper) {
   height: 100%;
 }

src/components/sendV2/send.test.js

@@ -32,7 +32,9 @@ describe('Form', () => {
     },
     transactions: {
       failed: undefined,
+      pending: [],
     },
+    failedTransactions: '',
     account: {
       balance: accounts.genesis.balance,
     },
@@ -81,7 +83,6 @@ describe('Form', () => {
     prevState: {
       fields: {},
     },
-    fields: {},
     followedAccounts: [
       {
         title: 'ABC',

src/components/sendV2/summary/index.js

@@ -6,6 +6,8 @@ import Summary from './summary';
 
 const mapStateToProps = state => ({
   account: state.account,
+  failedTransactions: state.transactions.failed,
+  pendingTransactions: state.transactions.pending,
 });
 
 const mapDispatchToProps = {