Add personalised link to each witness and highlight when clicked

src/app/components/elements/Icon.jsx

@@ -57,6 +57,7 @@ const icons_map = {};
 for (const i of icons) icons_map[i] = require(`assets/icons/${i}.svg`);
 
 const rem_sizes = {
+    '0.7x': '0.7',
     '1x': '1.12',
     '1_5x': '1.5',
     '2x': '2',
@@ -69,7 +70,16 @@ const rem_sizes = {
 export default class Icon extends React.Component {
     static propTypes = {
         name: PropTypes.string.isRequired,
-        size: PropTypes.oneOf(['1x', '1_5x', '2x', '3x', '4x', '5x', '10x']),
+        size: PropTypes.oneOf([
+            '0.7x',
+            '1x',
+            '1_5x',
+            '2x',
+            '3x',
+            '4x',
+            '5x',
+            '10x',
+        ]),
         inverse: PropTypes.bool,
         className: PropTypes.string,
     };

src/app/components/pages/Witnesses.jsx

@@ -56,6 +56,7 @@ class Witnesses extends React.Component {
             proxy: '',
             proxyFailed: false,
             witnessAccounts: {},
+            witnessToHighlight: '',
         };
         this.accountWitnessVote = (accountName, approve, e) => {
             e.preventDefault();
@@ -79,22 +80,12 @@ class Witnesses extends React.Component {
     }
 
     componentDidMount() {
+        this.setState({
+            witnessToHighlight: this.props.location.query.highlight,
+        });
         this.loadWitnessAccounts();
 
-        if (typeof document !== 'undefined') {
-            setTimeout(() => {
-                const highlightedWitnessElement = document.querySelector(
-                    '.Witnesses__highlight'
-                );
-                if (highlightedWitnessElement) {
-                    highlightedWitnessElement.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'center',
-                        inline: 'center',
-                    });
-                }
-            }, 1000);
-        }
+        this.scrollToHighlightedWitness();
     }
 
     shouldComponentUpdate(np, ns) {
@@ -107,7 +98,8 @@ class Witnesses extends React.Component {
             ns.customUsername !== this.state.customUsername ||
             ns.proxy !== this.state.proxy ||
             ns.proxyFailed !== this.state.proxyFailed ||
-            ns.witnessAccounts !== this.state.witnessAccounts
+            ns.witnessAccounts !== this.state.witnessAccounts ||
+            ns.witnessToHighlight !== this.state.witnessToHighlight
         );
     }
 
@@ -151,6 +143,29 @@ class Witnesses extends React.Component {
         return true;
     }
 
+    scrollToHighlightedWitness() {
+        if (typeof document !== 'undefined') {
+            setTimeout(() => {
+                const highlightedWitnessElement = document.querySelector(
+                    '.Witnesses__highlight'
+                );
+                if (highlightedWitnessElement) {
+                    highlightedWitnessElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                        inline: 'center',
+                    });
+                }
+            }, 1000);
+        }
+    }
+
+    updateWitnessToHighlight(witness) {
+        this.setState({ witnessToHighlight: witness });
+        this.scrollToHighlightedWitness();
+        window.history.pushState('', '', `/~witnesses?highlight=${witness}`);
+    }
+
     render() {
         const {
             props: {
@@ -159,12 +174,17 @@ class Witnesses extends React.Component {
                 current_proxy,
                 head_block,
             },
-            state: { customUsername, proxy, witnessAccounts },
+            state: {
+                customUsername,
+                proxy,
+                witnessAccounts,
+                witnessToHighlight,
+            },
             accountWitnessVote,
             accountWitnessProxy,
             onWitnessChange,
+            updateWitnessToHighlight,
         } = this;
-        const witnessToHighlight = this.props.location.query.highlight;
         const sorted_witnesses = this.props.witnesses.sort((a, b) =>
             Long.fromString(String(b.get('votes'))).subtract(
                 Long.fromString(String(a.get('votes'))).toString()
@@ -315,6 +335,21 @@ class Witnesses extends React.Component {
                                 <Link to={'/@' + owner} style={ownerStyle}>
                                     {owner}
                                 </Link>
+                                <Link
+                                    to={`/~witnesses?highlight=${owner}`}
+                                    onClick={event => {
+                                        event.preventDefault();
+                                        updateWitnessToHighlight.apply(this, [
+                                            owner,
+                                        ]);
+                                    }}
+                                >
+                                    <Icon
+                                        name="chain"
+                                        size="0.7x"
+                                        className="Witnesses__permlink"
+                                    />
+                                </Link>
                             </div>
                             <div>
                                 <small>

src/app/components/pages/Witnesses.scss

@@ -65,6 +65,11 @@
         margin-bottom: 10px;
         border-bottom: 1px dotted #dcdcdc;
     }
+    .Icon.Witnesses__permlink svg {
+        width: 0.7rem;
+        height: 0.7rem;
+        margin-left: 10px;
+    }
 }