feat(core): add wallet security alerts (power down/routes), routes rework, bug fixe, and UI/FAQ improvement

src/app/ResolveRoute.js

@@ -3,7 +3,7 @@ import GDPRUserList from './utils/GDPRUserList';
 
 export const routeRegex = {
     UserProfile1: /^\/(@[\w\.\d-]+)\/?$/,
-    UserProfile2: /^\/(@[\w\.\d-]+)\/(transfers|curation-rewards|author-rewards|permissions|communities|password|settings|delegations)\/?$/,
+    UserProfile2: /^\/(@[\w\.\d-]+)\/(transfers|curation-rewards|author-rewards|permissions|communities|password|settings|delegations|proposals|witnesses)\/?$/,
 };
 
 export default function resolveRoute(path) {

src/app/ResolveRoute.test.js

@@ -7,7 +7,7 @@ describe('routeRegex', () => {
             ['UserProfile1', /^\/(@[\w\.\d-]+)\/?$/],
             [
                 'UserProfile2',
-                /^\/(@[\w\.\d-]+)\/(transfers|curation-rewards|author-rewards|permissions|communities|password|settings|delegations)\/?$/,
+                /^\/(@[\w\.\d-]+)\/(transfers|curation-rewards|author-rewards|permissions|communities|password|settings|delegations|proposals|witnesses)\/?$/,
             ],
         ];
 

src/app/assets/stylesheets/_themes.scss

@@ -9,6 +9,8 @@ $themes: (
     backgroundColorOpaque: $color-background-off-white,
     backgroundTransparent: transparent,
     backgroundColorWarning: $color-background-warning,
+    backgroundColorDanger: $alert-color,
+    backgroundColorSecondary: $color-white,
     moduleBackgroundColor: $color-white,
     menuBackgroundColor: $color-background-dark,
     moduleMediumBackgroundColor: $color-white,
@@ -20,6 +22,7 @@ $themes: (
     borderDark: 1px solid $color-text-gray,
     borderAccent: 1px solid $color-blue,
     borderWarning: 1px solid $color-text-warning,
+    borderDanger: 1px solid $alert-color,
     borderTransparent: transparent,
     roundedCorners: 5px,
     roundedCornersTop: 5px 5px 0 0,
@@ -30,6 +33,7 @@ $themes: (
     textColorAccent: $color-text-blue,
     textColorAccentHover: $color-blue-original-dark,
     textColorError: $color-text-red,
+    textColorOnDanger: $color-white,
     contentBorderAccent: $color-transparent,
     buttonBackground: $color-blue-original-dark,
     buttonBackgroundHover: $color-blue-original-light,
@@ -48,6 +52,8 @@ $themes: (
     backgroundColorOpaque: $color-background-off-white,
     backgroundTransparent: transparent,
     backgroundColorWarning: $color-background-warning,
+    backgroundColorDanger: $alert-color,
+    backgroundColorSecondary: $color-white,
     moduleBackgroundColor: $color-white,
     menuBackgroundColor: $color-background-dark,
     moduleMediumBackgroundColor: $color-transparent,
@@ -59,6 +65,7 @@ $themes: (
     borderDark: 1px solid $color-text-gray,
     borderAccent: 1px solid $color-teal,
     borderWarning: 1px solid $color-text-warning,
+    borderDanger: 1px solid $alert-color,
     borderTransparent: transparent,
     roundedCorners: 5px,
     roundedCornersTop: 5px 5px 0 0,
@@ -69,6 +76,7 @@ $themes: (
     textColorAccent: $color-text-teal,
     textColorAccentHover: $color-teal,
     textColorError: $color-text-red,
+    textColorOnDanger: $color-white,
     contentBorderAccent: $color-teal,
     buttonBackground: $color-blue-black,
     buttonBackgroundHover: $color-teal,
@@ -87,6 +95,8 @@ $themes: (
     backgroundColorEmphasis: $color-background-super-dark,
     backgroundColorOpaque: $color-blue-dark,
     backgroundColorWarning: $color-background-warning-dark,
+    backgroundColorDanger: $alert-color,
+    backgroundColorSecondary: $color-blue-dark,
     moduleBackgroundColor: $color-background-dark,
     backgroundTransparent: transparent,
     menuBackgroundColor: $color-blue-dark,
@@ -99,6 +109,7 @@ $themes: (
     borderDark: 1px solid $color-text-gray-light,
     borderAccent: 1px solid $color-teal,
     borderWarning: 1px solid $color-background-warning-dark,
+    borderDanger: 1px solid $alert-color,
     borderTransparent: transparent,
     roundedCorners: 5px,
     roundedCornersTop: 5px 5px 0 0,
@@ -109,6 +120,7 @@ $themes: (
     textColorAccent: $color-teal,
     textColorAccentHover: $color-teal-light,
     textColorError: $color-text-red,
+    textColorOnDanger: $color-white,
     contentBorderAccent: $color-teal,
     buttonBackground: $color-white,
     buttonBackgroundHover: $color-teal,

src/app/client_config.js

@@ -51,3 +51,7 @@ export const SITE_DESCRIPTION =
 
 // various
 export const SUPPORT_EMAIL = 'support@' + APP_DOMAIN;
+
+// External links
+export const STEEMDB_BLOCK_URL = "https://steemdb.io/block";
+export const STEEMDB_TRANSACTION_URL = "https://steemdb.io/tx";

src/app/components/all.scss

@@ -29,6 +29,8 @@
 @import './elements/OutgoingDelegations';
 @import './elements/VotersModal';
 @import './elements/ProposalCreatorModal';
+@import './elements/RouteSettings';
+@import './elements/WithdrawRoutesModal';
 
 // modules
 @import './modules/Header/styles';

src/app/components/cards/TransferHistoryRow/index.jsx

@@ -6,12 +6,15 @@ import Memo from 'app/components/elements/Memo';
 import { numberWithCommas, vestsToSp } from 'app/utils/StateFunctions';
 import tt from 'counterpart';
 import GDPRUserList from 'app/utils/GDPRUserList';
+import { STEEMDB_BLOCK_URL, STEEMDB_TRANSACTION_URL } from 'app/client_config';
 
 class TransferHistoryRow extends React.Component {
     render() {
         const {
             op,
             context,
+            block,
+            trx,
             curation_reward,
             author_reward,
             benefactor_reward,
@@ -287,8 +290,14 @@ class TransferHistoryRow extends React.Component {
         }
         return (
             <tr key={op[0]} className="Trans">
-                <td>
+                <td style={{ whiteSpace: 'nowrap', width: '1%' }}>
                     <TimeAgoWrapper date={op[1].timestamp} />
+                    {block && (<div>
+                        Block: <a href={`${STEEMDB_BLOCK_URL}/${block}`} target="_blank" >{block}</a>
+                    </div>)}
+                    {(trx && trx !== '0000000000000000000000000000000000000000') && (<div>
+                        TxID: <a href={`${STEEMDB_TRANSACTION_URL}/${trx}`} target="_blank" >{trx}</a>
+                    </div>)}
                 </td>
                 <td
                     className="TransferHistoryRow__text"

src/app/components/elements/ConfirmWithdrawVestingRoute/index.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import tt from 'counterpart';
+
+const ConfirmWithdrawVestingRoute = ({ operation }) => {
+    const { from, to, percentage, asset } = operation;
+
+    const getAssetLabel = (isAutoVest) => {
+        return isAutoVest ? tt('advanced_routes.steem_power') : tt('advanced_routes.steem');
+    };
+
+    return (
+        <div className="info">
+            <div className="input-group">
+                <span className="input-group-label" style={{ textTransform: 'capitalize' }}>
+                    {tt('advanced_routes.from')}
+                </span>
+                <input
+                    className="input-group-field"
+                    type="text"
+                    value={from}
+                    disabled={true}
+                />
+            </div>
+            <div className="input-group">
+                <span className="input-group-label" style={{ textTransform: 'capitalize' }}>
+                    {tt('advanced_routes.to')}
+                </span>
+                <input
+                    className="input-group-field"
+                    type="text"
+                    value={to}
+                    disabled={true}
+                />
+            </div>
+            <div className="input-group">
+                <span className="input-group-label" style={{ textTransform: 'capitalize' }}>
+                    {tt('advanced_routes.percentage')}
+                </span>
+                <input
+                    className="input-group-field"
+                    type="text"
+                    value={`${percentage}%`}
+                    disabled={true}
+                />
+                <input
+                    className="input-group-field"
+                    type="text"
+                    value={getAssetLabel(asset)}
+                    disabled={true}
+                />
+            </div>
+        </div>
+    );
+};
+
+ConfirmWithdrawVestingRoute.propTypes = {
+    operation: PropTypes.shape({
+        from: PropTypes.string.isRequired,
+        to: PropTypes.string.isRequired,
+        percentage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        asset: PropTypes.bool.isRequired,
+    }).isRequired,
+};
+
+export default ConfirmWithdrawVestingRoute;

src/app/components/elements/ConversionsModal.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactModal from 'react-modal';
 import CloseButton from 'app/components/elements/CloseButton';
+import tt from 'counterpart';
 
 ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0, 0, 0, 0.6)';
 
@@ -9,22 +10,22 @@ const ConversionsModal = ({ isOpen, onClose, combinedConversions }) => {
         <ReactModal
             isOpen={isOpen}
             onRequestClose={onClose}
-            className="VotersModal__content"
+            className="ContainerModal__content"
             ariaHideApp={false}
         >
             <CloseButton onClick={onClose} />
             <div className="conversions-modal__container">
-                <h3>Conversions</h3>
+                <h3>{tt('converttosteem_jsx.current_conversions')}</h3>
                 {combinedConversions.length === 0 ? (
-                    <p>No conversion data available.</p>
+                    <p>{tt('converttosteem_jsx.no_conversion_data')}</p>
                 ) : (
                     <table className="conversions-table">
                         <thead>
                             <tr>
-                                <th>ID</th>
-                                <th>Request ID</th>
-                                <th>Amount</th>
-                                <th>Date</th>
+                                <th>{tt('converttosteem_jsx.id')}</th>
+                                <th>{tt('converttosteem_jsx.request_id')}</th>
+                                <th>{tt('g.amount')}</th>
+                                <th>{tt('g.date')}</th>
                             </tr>
                         </thead>
                         <tbody>

src/app/components/elements/ConvertToSteem.jsx

@@ -22,6 +22,7 @@ class ConvertToSteem extends React.Component {
         this.shouldComponentUpdate = shouldComponentUpdate(this, 'ConvertToSteem');
         this.state = {
             toggle_check: false,
+            errorMessage: undefined,
         };
         this.initForm(props);
     }
@@ -73,10 +74,10 @@ class ConvertToSteem extends React.Component {
             this.setState({ loading: false });
             if (onClose) onClose();
         };
-        const error = () => {
-            this.setState({ loading: false });
+        const error = (msg_error) => {
+            this.setState({ loading: false,  errorMessage: String(msg_error) });
         };
-        this.setState({ loading: true });
+        this.setState({ errorMessage: undefined, loading: true });
 
         convert(currentUser, amount.value, success, error);
     };
@@ -103,7 +104,7 @@ class ConvertToSteem extends React.Component {
 
     render() {
         const { onClose, currentUser, sbd_balance } = this.props;
-        const { loading, amount, marketRate } = this.state;
+        const { loading, amount, marketRate, errorMessage } = this.state;
         const { submitting, valid, handleSubmit } = this.state.convertToSteem;
 
         const { prices } = this.props;
@@ -276,6 +277,13 @@ class ConvertToSteem extends React.Component {
                             </div>
                             ) : null}
                     </div>
+                    {errorMessage && (
+                        <div className="row">
+                            <div className="column small-12 callout alert">
+                                {errorMessage}
+                            </div>
+                        </div>
+                    )}
                     <div className="row">
                         <div className="column toggle_container">
                             <span>

src/app/components/elements/OutgoingDelegations.jsx

@@ -319,14 +319,12 @@ class OutgoingDelegations extends React.Component {
                             type="text"
                             id="delegatee"
                             name="delegatee"
+                            placeholder={tt(
+                                'outgoingdelegations_jsx.filters.search_delegatee'
+                            )}
                             value={delegatee}
                             onChange={this.handleFindAccounts}
                         />
-                        <label htmlFor="delegatee">
-                            {tt(
-                                'outgoingdelegations_jsx.filters.search_delegatee'
-                            )}
-                        </label>
                     </div>
                 </div>
                 <div className="OutgoingDelegations__table-container">

src/app/components/elements/OutgoingDelegations.scss

@@ -2,11 +2,20 @@
     width: 100%;
     font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 1rem;
-    border: 1px solid #7e7d7d;
     outline: none;
     padding: 0.25rem 0.5rem 0.5rem 0;
     border-radius: 5px;
     padding: 1.5rem .5rem;
+    border-color: transparent;
+    background: transparent;
+    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
+    @include themify($themes) {
+     color: themed('textColorPrimary');
+   }
+  input::placeholder {
+    font-weight: lighter;
+    color: #7e7d7d;
+  }
 }
 
 .input-box{
@@ -16,30 +25,5 @@
 
 .input-box input:focus{
     border: 1px solid #06D6A9;
-}
-
-.input-box label {
-    transform: translateX(10px) translateY(-3rem);
-    left: 0;
-    padding: 1rem;
-    padding-top: 0.5rem;
-    pointer-events: none;
-    font-size: 1rem;
-    color: #7e7d7d;
-    transition: 0.5s;
-    margin-right: 15px;
-    max-width: fit-content;
-}
-
-.input-box input:focus ~ label,
-.input-box .focus ~ label{
-    transform: translateX(10px) translateY(-3.95rem);
-    font-size: .75rem;
-    padding: .45rem;
-    padding-top: .1rem;
-    padding-bottom: .1rem;
-    background-color: #06D6A9;
-    font-weight: bold;
-    color: #FFFFFF;
-    border-radius: 5px;
+    background: transparent;
 }