diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
index 6fb62eefea..f3d9691117 100644
--- a/i18n/locales/en/common.json
+++ b/i18n/locales/en/common.json
@@ -26,7 +26,6 @@
"Add a new bookmark": "Add a new bookmark",
"Add address to bookmarks": "Add address to bookmarks",
"Add bookmark": "Add bookmark",
- "Add some {{activeToken}} to your Lisk Hub account now!": "Add some {{activeToken}} to your Lisk Hub account now!",
"Added Votes": "Added Votes",
"Added votes": "Added votes",
"Adding extensions is currently disabled in production version of Lisk Hub": "Adding extensions is currently disabled in production version of Lisk Hub",
@@ -94,7 +93,6 @@
"Connection re-established": "Connection re-established",
"Continue": "Continue",
"Continue to Dashboard": "Continue to Dashboard",
- "Copied": "Copied",
"Copied!": "Copied!",
"Copy": "Copy",
"Copy Link": "Copy Link",
@@ -130,6 +128,7 @@
"Delegates are the most commited Lisk community members responsible for \n securing the network and processing all the transactions on Lisk’s blockchain \n network.": "Delegates are the most commited Lisk community members responsible for \n securing the network and processing all the transactions on Lisk’s blockchain \n network.",
"Delete": "Delete",
"Details": "Details",
+ "Dive into the details": "Dive into the details",
"Does the problem still persist?": "Does the problem still persist?",
"Don’t be a stranger! Connect with our worldwide community.": "Don’t be a stranger! Connect with our worldwide community.",
"Don’t worry, we’re here to help": "Don’t worry, we’re here to help",
@@ -246,6 +245,7 @@
"Looking for a device...": "Looking for a device...",
"Low": "Low",
"Mainnet": "Mainnet",
+ "Manage your LSK with ease": "Manage your LSK with ease",
"Manage your most used accounts": "Manage your most used accounts",
"Max": "Max",
"Max amount must be greater than Min amount": "Max amount must be greater than Min amount",
@@ -363,6 +363,7 @@
"Send {{amount}} {{token}}": "Send {{amount}} {{token}}",
"Send {{token}}": "Send {{token}}",
"Send {{token}} to this Account ": "Send {{token}} to this Account ",
+ "Send, request and receive LSK tokens in one place! You can even attach personal message to each outgoing transaction.": "Send, request and receive LSK tokens in one place! You can even attach personal message to each outgoing transaction.",
"Sender": "Sender",
"Session timeout": "Session timeout",
"Settings": "Settings",
@@ -443,6 +444,7 @@
"Version": "Version",
"View": "View",
"View All": "View All",
+ "View the full history of your account, including; voting, incoming and outgoing transactions.": "View the full history of your account, including; voting, incoming and outgoing transactions.",
"Visit Help Center": "Visit Help Center",
"Visit Lisk.Chat": "Visit Lisk.Chat",
"Vote weight": "Vote weight",
@@ -476,7 +478,6 @@
"Would you like to download it now?": "Would you like to download it now?",
"Write message": "Write message",
"You can explore Lisk network using Hub without signing in.": "You can explore Lisk network using Hub without signing in.",
- "You can find the {{activeToken}} token on all of the worlds top exchanges and send them to your unique {{currency}} address:": "You can find the {{activeToken}} token on all of the worlds top exchanges and send them to your unique {{currency}} address:",
"You can print your passphrase and store it in a safe place. ": "You can print your passphrase and store it in a safe place. ",
"You can share your Lisk ID with anyone you wish, but never reveal your passphrase to anyone as it would allow full access to your account.": "You can share your Lisk ID with anyone you wish, but never reveal your passphrase to anyone as it would allow full access to your account.",
"You can use your passphrase to sign a message. This signed message can prove that you are the owner of the account, since only your passphrase can produce it. We reccomend including date & time or a specific keyword.": "You can use your passphrase to sign a message. This signed message can prove that you are the owner of the account, since only your passphrase can produce it. We reccomend including date & time or a specific keyword.",
diff --git a/src/assets/images/illustrations/diveIntoDetails.svg b/src/assets/images/illustrations/diveIntoDetails.svg
new file mode 100644
index 0000000000..8b708e84a8
--- /dev/null
+++ b/src/assets/images/illustrations/diveIntoDetails.svg
@@ -0,0 +1,65 @@
+
+
diff --git a/src/assets/images/illustrations/manageYourLSK.svg b/src/assets/images/illustrations/manageYourLSK.svg
new file mode 100644
index 0000000000..aca7030676
--- /dev/null
+++ b/src/assets/images/illustrations/manageYourLSK.svg
@@ -0,0 +1,34 @@
+
+
diff --git a/src/components/toolbox/illustration/index.js b/src/components/toolbox/illustration/index.js
index d316b03bab..8a9def0b3f 100644
--- a/src/components/toolbox/illustration/index.js
+++ b/src/components/toolbox/illustration/index.js
@@ -22,6 +22,8 @@ import emptyBookmarkFiler from '../../../assets/images/illustrations/empty-bookm
import emptyBookmarksList from '../../../assets/images/illustrations/empty-bookmarks-list.svg';
import helpCenter from '../../../assets/images/help/Illustration.svg';
import emptyWallet from '../../../assets/images/illustrations/empty-wallet.svg';
+import diveIntoDetails from '../../../assets/images/illustrations/diveIntoDetails.svg';
+import manageYourLSK from '../../../assets/images/illustrations/manageYourLSK.svg';
export const illustrations = {
@@ -47,6 +49,8 @@ export const illustrations = {
emptyBookmarksList,
emptyWallet,
helpCenter,
+ diveIntoDetails,
+ manageYourLSK,
};
const Illustration = ({ name, className }) => (
diff --git a/src/components/toolbox/onboarding/onboarding.css b/src/components/toolbox/onboarding/onboarding.css
index f754ebc33e..48bfee101e 100644
--- a/src/components/toolbox/onboarding/onboarding.css
+++ b/src/components/toolbox/onboarding/onboarding.css
@@ -7,7 +7,7 @@
box-sizing: border-box;
color: var(--color-white);
display: flex;
- margin: 15px 0;
+ margin: 35px 0 20px 0;
overflow: hidden;
position: relative;
height: 400px;
@@ -59,9 +59,9 @@
border: 1px solid var(--color-slate-gray);
border-radius: 50%;
display: block;
- height: 7px;
+ height: 6px;
margin-right: 10px;
- width: 7px;
+ width: 6px;
&:last-child {
margin-right: 0;
diff --git a/src/components/toolbox/pageHeader/pageHeader.css b/src/components/toolbox/pageHeader/pageHeader.css
index 14395880b6..44174fb9cb 100644
--- a/src/components/toolbox/pageHeader/pageHeader.css
+++ b/src/components/toolbox/pageHeader/pageHeader.css
@@ -3,7 +3,7 @@
.wrapper {
display: flex;
justify-content: space-between;
- margin-top: 16px;
+ padding-top: 16px;
& h1 {
@mixin headingNormalIntermediate;
diff --git a/src/components/transactions/walletTransactions/walletOnboarding.js b/src/components/transactions/walletTransactions/walletOnboarding.js
new file mode 100644
index 0000000000..516fd66311
--- /dev/null
+++ b/src/components/transactions/walletTransactions/walletOnboarding.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Onboarding from '../../toolbox/onboarding/onboarding';
+
+export default function WalletOnboarding({
+ t,
+}) {
+ function getOnboardingSlides() {
+ return [{
+ title: t('Manage your LSK with ease'),
+ content: t('Send, request and receive LSK tokens in one place! You can even attach personal message to each outgoing transaction.'),
+ illustration: 'manageYourLSK',
+ }, {
+ title: t('Dive into the details'),
+ content: t('View the full history of your account, including; voting, incoming and outgoing transactions.'),
+ illustration: 'diveIntoDetails',
+ }];
+ }
+ return (
+
+ );
+}
diff --git a/src/components/transactions/walletTransactions/walletTransactions.css b/src/components/transactions/walletTransactions/walletTransactions.css
deleted file mode 100644
index 0301c0ce49..0000000000
--- a/src/components/transactions/walletTransactions/walletTransactions.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '../../app/variables.css';
-
-.onboarding {
- margin-bottom: 24px;
-
- & .copyAddress {
- display: flex;
- flex-wrap: wrap;
- margin-top: 40px;
- width: 100%;
-
- & .address {
- background-color: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 4px;
- box-sizing: border-box;
- color: var(--color-white);
- font-family: var(--content-font);
- font-size: var(--paragraph-font-size-s);
- font-weight: var(--font-weight-bold);
- letter-spacing: 0.3px;
- line-height: 1.07;
- margin-right: 24px;
- outline: none;
- padding: 16px 24px;
- text-align: center;
- }
-
- & > button {
- width: 116px;
- }
- }
-}
diff --git a/src/components/transactions/walletTransactions/walletTransactions.js b/src/components/transactions/walletTransactions/walletTransactions.js
index bf95768ed9..f1ccec2c02 100644
--- a/src/components/transactions/walletTransactions/walletTransactions.js
+++ b/src/components/transactions/walletTransactions/walletTransactions.js
@@ -1,20 +1,14 @@
import React from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { SecondaryButton } from '../../toolbox/buttons/button';
-import { tokenMap } from '../../../constants/tokens';
-import localJSONStorage from '../../../utils/localJSONStorage';
import txFilters from '../../../constants/transactionFilters';
-import Banner from '../../toolbox/banner/banner';
import TransactionsOverviewHeader from '../transactionsOverviewHeader/transactionsOverviewHeader';
import routes from '../../../constants/routes';
-import styles from './walletTransactions.css';
import TabsContainer from '../../toolbox/tabsContainer/tabsContainer';
import WalletTab from '../../wallet/walletTab';
import DelegateTab from '../../delegate';
import VotesTab from '../../votes';
+import WalletOnboarding from './walletOnboarding';
class WalletTransactions extends React.Component {
- // eslint-disable-next-line max-statements
constructor() {
super();
@@ -28,12 +22,8 @@ class WalletTransactions extends React.Component {
message: '',
},
activeCustomFilters: {},
- copied: false,
- closedOnboarding: false,
};
- this.copyTimeout = null;
-
this.saveFilters = this.saveFilters.bind(this);
this.clearFilter = this.clearFilter.bind(this);
this.clearAllFilters = this.clearAllFilters.bind(this);
@@ -41,16 +31,9 @@ class WalletTransactions extends React.Component {
this.onLoadMore = this.onLoadMore.bind(this);
this.onFilterSet = this.onFilterSet.bind(this);
this.onTransactionRowClick = this.onTransactionRowClick.bind(this);
- this.onCopy = this.onCopy.bind(this);
- this.closeOnboarding = this.closeOnboarding.bind(this);
this.updateCustomFilters = this.updateCustomFilters.bind(this);
}
- /* istanbul ignore next */
- componentWillUnmount() {
- clearTimeout(this.copyTimeout);
- }
-
onInit() {
this.props.loadLastTransaction(this.props.account.address);
@@ -129,23 +112,6 @@ class WalletTransactions extends React.Component {
this.setState({ customFilters });
}
- onCopy() {
- clearTimeout(this.copyTimeout);
- this.setState({
- copied: true,
- });
-
- this.copyTimeout = setTimeout(() =>
- this.setState({
- copied: false,
- }), 3000);
- }
-
- closeOnboarding() {
- localJSONStorage.set('closedWalletOnboarding', 'true');
- this.setState({ closedOnboarding: true });
- }
-
render() {
const overviewProps = {
...this.props,
@@ -170,6 +136,7 @@ class WalletTransactions extends React.Component {
return (
+
- { account.balance === 0 && localJSONStorage.get('closedWalletOnboarding') !== 'true'
- ? (
-
- {account.address}
-
-
- {this.state.copied ? t('Copied') : t('Copy')}
-
-
-
- )}
- >
-
{t('You can find the {{activeToken}} token on all of the worlds top exchanges and send them to your unique {{currency}} address:', { activeToken, currency: tokenMap[activeToken].label })}