From 68380c892566a025cf5fb2969dbbe1d42e90563e Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Thu, 6 May 2021 15:45:21 +0800
Subject: [PATCH 1/5] Updated ListContainer.js

---
 imports/ui/transactions/ListContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/imports/ui/transactions/ListContainer.js b/imports/ui/transactions/ListContainer.js
index 898714ed4..43a62a6f5 100644
--- a/imports/ui/transactions/ListContainer.js
+++ b/imports/ui/transactions/ListContainer.js
@@ -9,7 +9,7 @@ export default ValidatorDetailsContainer = withTracker((props) => {
 
     if (Meteor.isClient){
         transactionsHandle = Meteor.subscribe('transactions.list', props.limit);
-        loading = !transactionsHandle.ready();
+        loading = !transactionsHandle.ready() && props.limit == Meteor.settings.public.initialPageSize;
 
         if (!loading) {
             transactions = Transactions.find({}, {sort:{height:-1}}).fetch();

From 13ec66f3b9e8f8d50b9e5ff10c8ffdd6e7f06f5a Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Thu, 6 May 2021 15:51:12 +0800
Subject: [PATCH 2/5] Added CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df9e4bbbd..15a9e0fb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [UNRELEASED]
 * [#524] Added `noreferrer` to Banner links
+* [#447] Fixed txs scrolling issue that was causing page to reload and jump to the top when user scrolled to the bottom of the page. 
 
 ## v0.41.x-14
 * [#488] Updated missing proposer address in proposals.

From 78e3b6f2b92863b7fd2ff77ec4dd5edeb3741c78 Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Tue, 18 May 2021 22:55:42 +0800
Subject: [PATCH 3/5] Wrap list in container

---
 imports/ui/transactions/TransactionsList.jsx | 69 ++++++++++----------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/imports/ui/transactions/TransactionsList.jsx b/imports/ui/transactions/TransactionsList.jsx
index 4a9544796..95185114f 100644
--- a/imports/ui/transactions/TransactionsList.jsx
+++ b/imports/ui/transactions/TransactionsList.jsx
@@ -83,7 +83,7 @@ export default class Transactions extends Component{
     }
 
     render(){
-        return !this.props.homepage ?  <div id="transactions">
+        return !this.props.homepage ?  <div>
             <Helmet>
                 <title>Latest Transactions on {Meteor.settings.public.chainName} | Big Dipper</title>
                 <meta name="description" content="See what is happening on {Meteor.settings.public.chainName}" />
@@ -108,41 +108,44 @@ export default class Transactions extends Component{
                 >
                 </Sidebar>} />
             </Switch>
-            <List limit={this.state.limit} />
+            <Container fluid id="transactions">
+                <List limit={this.state.limit} />
+            </Container>
             <LoadMore show={this.state.loadmore} />
-        </div> : <Card className="h-100 overflow-auto">
-            <div className="card-header"><T>transactions.transactions</T></div>
-            <CardBody className="tx-list-homepage">
-                <Table striped className="tx-home">
-                    <thead>
-                        <tr>
-                            <Switch>
-                                <Route path="/transactions/:txId" render={(props) => <Sidebar
-                                    sidebar={<Transaction {...props} />}
-                                    open={this.state.sidebarOpen}
-                                    onSetOpen={this.onSetSidebarOpen}
-                                    styles={{
-                                        sidebar: {
-                                            background: "white",
-                                            position: "fixed",
-                                            width: '85%',
-                                            zIndex: 4
-                                        }, overlay: {
-                                            zIndex: 3
-                                        }
-                                    }}
-                                >
-                                </Sidebar>} />
+        </div> 
+            : <Card className="h-100 overflow-auto">
+                <div className="card-header"><T>transactions.transactions</T></div>
+                <CardBody className="tx-list-homepage">
+                    <Table striped className="tx-home">
+                        <thead>
+                            <tr>
+                                <Switch>
+                                    <Route path="/transactions/:txId" render={(props) => <Sidebar
+                                        sidebar={<Transaction {...props} />}
+                                        open={this.state.sidebarOpen}
+                                        onSetOpen={this.onSetSidebarOpen}
+                                        styles={{
+                                            sidebar: {
+                                                background: "white",
+                                                position: "fixed",
+                                                width: '85%',
+                                                zIndex: 4
+                                            }, overlay: {
+                                                zIndex: 3
+                                            }
+                                        }}
+                                    >
+                                    </Sidebar>} />
 
-                            </Switch>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <List limit={this.state.limit} /></tbody>
+                                </Switch>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <List limit={this.state.limit} /></tbody>
                      
 
-                </Table>
-            </CardBody>
-        </Card>;
+                    </Table>
+                </CardBody>
+            </Card>;
     }
 }
\ No newline at end of file

From e396a9dbdfa84a02c49c749f462c0ffd46552fc3 Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Thu, 27 May 2021 18:01:19 +0800
Subject: [PATCH 4/5] WIP: Add react-window pkg

---
 imports/ui/transactions/List.jsx             | 69 +++++++++++++-------
 imports/ui/transactions/ListContainer.js     |  3 +-
 imports/ui/transactions/TransactionsList.jsx | 60 +++++++++--------
 package-lock.json                            | 40 +++++++++++-
 package.json                                 |  1 +
 5 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/imports/ui/transactions/List.jsx b/imports/ui/transactions/List.jsx
index 18b2ecbf4..5f43f6cef 100644
--- a/imports/ui/transactions/List.jsx
+++ b/imports/ui/transactions/List.jsx
@@ -2,8 +2,11 @@ import React, { Component } from 'react';
 import { Row, Col, Spinner } from 'reactstrap';
 import { TransactionRow } from './TransactionRow.jsx';
 import i18n from 'meteor/universe:i18n';
+import { VariableSizeList } from 'react-window';
 
+const PADDING_SIZE = 10;
 const T = i18n.createComponent();
+
 export default class Transactions extends Component{
     constructor(props){
         super(props);
@@ -19,10 +22,10 @@ export default class Transactions extends Component{
             if (this.props.transactions.length > 0){
                 this.setState({
                     txs: this.props.transactions.map((tx, i) => {
-                        return <TransactionRow 
-                            key={i} 
-                            index={i} 
-                            tx={tx} 
+                        return <TransactionRow
+                            key={i}
+                            index={i}
+                            tx={tx}
                         />
                     })
                 })    
@@ -30,24 +33,42 @@ export default class Transactions extends Component{
         }
     }
 
-    render(){
-        if (this.props.loading){
-            return <Spinner type="grow" color="primary" />
-        }
-        else if (!this.props.transactionsExist){
-            return <div><T>transactions.notFound</T></div>
-        }
-        else{
-            return <div className="transactions-list">
-                <Row className="header text-nowrap d-none d-lg-flex">
-                    <Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
-                    <Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
-                    <Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
-                    <Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
-                    {!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null }
-                </Row>
-                {this.state.txs}
-            </div>
-        }
-    }
+     getItemSize = index => (117 * (this.state.txs[index]?.props?.tx?.tx?.body?.messages.length))
+
+     TxRow = ({ index, style }) => (
+         <div style={{
+             ...style,
+             top: `${parseFloat(style.top) + PADDING_SIZE}px`
+         }}>{this.state.txs[index]}</div>
+
+     );
+
+     render(){
+         if (this.props.loading){
+             return <Spinner type="grow" color="primary" />
+         }
+         else if (!this.props.transactionsExist){
+             return <div><T>transactions.notFound</T></div>
+         }
+         else{
+             return <div className="transactions-list">
+                 <Row className="header text-nowrap d-none d-lg-flex">
+                     <Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
+                     <Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
+                     <Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
+                     <Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
+                     {!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null }
+                 </Row>
+                 {this.state.txs ? 
+                     <VariableSizeList
+                         height={700}
+                         itemCount={this.props.transactionsCount}
+                         itemSize={this.getItemSize}
+                         width="100%"
+                     >
+                         {this.TxRow}
+                     </VariableSizeList> : ''}
+             </div>
+         }
+     }
 }
\ No newline at end of file
diff --git a/imports/ui/transactions/ListContainer.js b/imports/ui/transactions/ListContainer.js
index 43a62a6f5..71c1f6340 100644
--- a/imports/ui/transactions/ListContainer.js
+++ b/imports/ui/transactions/ListContainer.js
@@ -8,7 +8,7 @@ export default ValidatorDetailsContainer = withTracker((props) => {
     let loading = true;
 
     if (Meteor.isClient){
-        transactionsHandle = Meteor.subscribe('transactions.list', props.limit);
+        transactionsHandle = Meteor.subscribe('transactions.list', 2200);
         loading = !transactionsHandle.ready() && props.limit == Meteor.settings.public.initialPageSize;
 
         if (!loading) {
@@ -26,5 +26,6 @@ export default ValidatorDetailsContainer = withTracker((props) => {
         loading,
         transactionsExist,
         transactions: transactionsExist ? transactions : {},
+        transactionsCount: transactionsExist ? transactions.length : 0
     };
 })(List);
\ No newline at end of file
diff --git a/imports/ui/transactions/TransactionsList.jsx b/imports/ui/transactions/TransactionsList.jsx
index 95185114f..a1ed0fbcd 100644
--- a/imports/ui/transactions/TransactionsList.jsx
+++ b/imports/ui/transactions/TransactionsList.jsx
@@ -12,12 +12,12 @@ import i18n from 'meteor/universe:i18n';
 
 const T = i18n.createComponent();
 
-export default class Transactions extends Component{
-    constructor(props){
+export default class Transactions extends Component {
+    constructor(props) {
         super(props);
 
         this.state = {
-            limit: props.homepage ? 16: Meteor.settings.public.initialPageSize,
+            limit: props.homepage ? 16 : Meteor.settings.public.initialPageSize,
             monikerDir: 1,
             votingPowerDir: -1,
             uptimeDir: -1,
@@ -33,17 +33,17 @@ export default class Transactions extends Component{
     isBottom(el) {
         return el.getBoundingClientRect().bottom <= window.innerHeight;
     }
-      
+
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);
     }
-    
+
     componentWillUnmount() {
         document.removeEventListener('scroll', this.trackScrolling);
     }
-    
-    componentDidUpdate(prevProps){
-        if (this.props?.location?.pathname != prevProps?.location?.pathname){
+
+    componentDidUpdate(prevProps) {
+        if (this.props?.location?.pathname != prevProps?.location?.pathname) {
             this.setState({
                 sidebarOpen: (this.props?.location?.pathname.split("/transactions/").length == 2)
             })
@@ -55,15 +55,15 @@ export default class Transactions extends Component{
         if (this.isBottom(wrappedElement)) {
             // console.log('header bottom reached');
             document.removeEventListener('scroll', this.trackScrolling);
-            this.setState({loadmore:true});
+            this.setState({ loadmore: true });
             this.setState({
-                limit: this.state.limit+10
+                limit: this.state.limit + 10
             }, (err, result) => {
-                if (!err){
+                if (!err) {
                     document.addEventListener('scroll', this.trackScrolling);
                 }
-                if (result){
-                    this.setState({loadmore:false});
+                if (result) {
+                    this.setState({ loadmore: false });
                 }
             })
         }
@@ -71,19 +71,19 @@ export default class Transactions extends Component{
 
     onSetSidebarOpen(open) {
         // console.log(open);
-        this.setState({ sidebarOpen: open }, (error, result) =>{
+        this.setState({ sidebarOpen: open }, (error, result) => {
             let timer = Meteor.setTimeout(() => {
-                if (!open){
+                if (!open) {
                     this.props.history.push('/transactions');
                 }
                 Meteor.clearTimeout(timer);
-            },500)
+            }, 500)
         });
-        
+
     }
 
-    render(){
-        return !this.props.homepage ?  <div>
+    render() {
+        return !this.props.homepage ? <div id="transactions">
             <Helmet>
                 <title>Latest Transactions on {Meteor.settings.public.chainName} | Big Dipper</title>
                 <meta name="description" content="See what is happening on {Meteor.settings.public.chainName}" />
@@ -93,18 +93,20 @@ export default class Transactions extends Component{
                 <Col md={9} xs={12} className="text-md-right"><ChainStates /></Col>
             </Row>
             <Switch>
-                <Route path="/transactions/:txId" render={(props)=> <Sidebar 
+                <Route path="/transactions/:txId" render={(props) => <Sidebar
                     sidebar={<Transaction {...props} />}
                     open={this.state.sidebarOpen}
                     onSetOpen={this.onSetSidebarOpen}
-                    styles={{ sidebar: { 
-                        background: "white", 
-                        position: "fixed",
-                        width: '85%',
-                        zIndex: 4
-                    },overlay: {
-                        zIndex: 3
-                    } }}
+                    styles={{
+                        sidebar: {
+                            background: "white",
+                            position: "fixed",
+                            width: '85%',
+                            zIndex: 4
+                        }, overlay: {
+                            zIndex: 3
+                        }
+                    }}
                 >
                 </Sidebar>} />
             </Switch>
@@ -142,7 +144,7 @@ export default class Transactions extends Component{
                         </thead>
                         <tbody>
                             <List limit={this.state.limit} /></tbody>
-                     
+
 
                     </Table>
                 </CardBody>
diff --git a/package-lock.json b/package-lock.json
index b71de92da..cfa3e4245 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4698,8 +4698,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mute-stream": {
       "version": "0.0.7",
@@ -5920,6 +5919,15 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-window": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz",
+      "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "reactstrap": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
@@ -6837,6 +6845,34 @@
         "supercop.js": "^2.0.1",
         "varstruct": "^6.1.1",
         "websocket-stream": "^5.1.1"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.19.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+          "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+          "requires": {
+            "follow-redirects": "1.5.10"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+              "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
+        }
       }
     },
     "text-table": {
diff --git a/package.json b/package.json
index 0077af2f0..6f9f235e6 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react-showdown": "^1.6.0",
     "react-sidebar": "^3.0.2",
     "react-toastify": "^4.5.2",
+    "react-window": "^1.8.6",
     "reactstrap": "^8.9.0",
     "rollup": "^2.49.0",
     "secp256k1": "^3.8.0",

From d46703d0e94512f78c45be90be3596d4ef4130af Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Thu, 3 Jun 2021 16:52:49 +0800
Subject: [PATCH 5/5] WIP: Add VariableSizeList

---
 client/styles.scss                           |   4 +
 imports/ui/transactions/List.jsx             | 110 +++++++++++--------
 imports/ui/transactions/ListContainer.js     |  12 +-
 imports/ui/transactions/Transaction.jsx      |  45 ++++----
 imports/ui/transactions/TransactionRow.jsx   |  80 ++++++++------
 imports/ui/transactions/TransactionsList.jsx |  78 ++++++-------
 6 files changed, 176 insertions(+), 153 deletions(-)

diff --git a/client/styles.scss b/client/styles.scss
index 61106cde3..834cfb4ac 100644
--- a/client/styles.scss
+++ b/client/styles.scss
@@ -568,6 +568,10 @@ body {
       padding-bottom: 0.4rem;
       border-bottom: 1px solid $gray-300;
     }
+    &.tx-info-row{
+      padding-top: 0.4rem;
+      padding-bottom: 0.4rem;
+    }
   }
   
   .tx-info.invalid {
diff --git a/imports/ui/transactions/List.jsx b/imports/ui/transactions/List.jsx
index 5f43f6cef..935e0dcb5 100644
--- a/imports/ui/transactions/List.jsx
+++ b/imports/ui/transactions/List.jsx
@@ -4,71 +4,89 @@ import { TransactionRow } from './TransactionRow.jsx';
 import i18n from 'meteor/universe:i18n';
 import { VariableSizeList } from 'react-window';
 
-const PADDING_SIZE = 10;
-const T = i18n.createComponent();
 
-export default class Transactions extends Component{
-    constructor(props){
+const T = i18n.createComponent();
+export default class Transactions extends Component {
+    constructor(props) {
         super(props);
+        this.childRef = React.createRef();
+
         this.state = {
             txs: "",
-            homepage:  window?.location?.pathname === '/' ? true : false
-
+            homepage: window?.location?.pathname === '/' ? true : false,
         }
     }
 
-    componentDidUpdate(prevProps){
-        if (this.props != prevProps){
-            if (this.props.transactions.length > 0){
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props != prevProps) {
+            if (this.props.transactions.length > 0) {
                 this.setState({
                     txs: this.props.transactions.map((tx, i) => {
                         return <TransactionRow
                             key={i}
                             index={i}
                             tx={tx}
+                            ref={this.childRef}
                         />
-                    })
-                })    
+                    }),
+                    height: this.childRef.current?.myRef?.current?.clientHeight
+                })
             }
         }
     }
 
-     getItemSize = index => (117 * (this.state.txs[index]?.props?.tx?.tx?.body?.messages.length))
+    componentDidMount() {
+        this.childRef?.current?.myRef?.current?.clientHeight
+    }
+
 
-     TxRow = ({ index, style }) => (
-         <div style={{
-             ...style,
-             top: `${parseFloat(style.top) + PADDING_SIZE}px`
-         }}>{this.state.txs[index]}</div>
+    getItemSize = index => {
+        if (this.state.txs[index]?.props?.tx?.tx?.body?.messages.length > 1) {
+            if (this.state.txs[index]?.props?.tx?.tx?.body?.messages[0]['@type'] === '/cosmos.bank.v1beta1.MsgSend') {
+                return 100 * this.state.txs[index]?.props?.tx?.tx?.body?.messages.length
+            }
+            return 80 * this.state.txs[index]?.props?.tx?.tx?.body?.messages.length
+        }
+        else {
+            return 130
+        }
+    }
 
-     );
+    TxRow = ({ index, style }) => (
+        <div className="tx-info" id="tx-infos"
+            style={{
+                ...style
+            }}
+        >{this.state.txs[index]}</div>
+    );
 
-     render(){
-         if (this.props.loading){
-             return <Spinner type="grow" color="primary" />
-         }
-         else if (!this.props.transactionsExist){
-             return <div><T>transactions.notFound</T></div>
-         }
-         else{
-             return <div className="transactions-list">
-                 <Row className="header text-nowrap d-none d-lg-flex">
-                     <Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
-                     <Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
-                     <Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
-                     <Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
-                     {!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null }
-                 </Row>
-                 {this.state.txs ? 
-                     <VariableSizeList
-                         height={700}
-                         itemCount={this.props.transactionsCount}
-                         itemSize={this.getItemSize}
-                         width="100%"
-                     >
-                         {this.TxRow}
-                     </VariableSizeList> : ''}
-             </div>
-         }
-     }
+    render() {
+        if (this.props.loading) {
+            return <Spinner type="grow" color="primary" />
+        }
+        else if (!this.props.transactionsExist) {
+            return <div><T>transactions.notFound</T></div>
+        }
+        else {
+            return <div className="transactions-list">
+                <Row className="header text-nowrap d-none d-lg-flex">
+                    <Col xs={9} lg={this.state.homepage ? 5 : 7}><i className="material-icons">message</i> <span className="d-none d-md-inline-block"><T>transactions.activities</T></span></Col>
+                    <Col xs={3} lg={!this.state.homepage ? { size: 1, order: "last" } : { size: 2, order: "last" }}><span className={this.state.homepage ? "ml-5" : null}><i className="fas fa-hashtag"></i> <span className="d-none d-md-inline-block"><T>transactions.txHash</T></span></span></Col>
+                    <Col xs={4} md={2} lg={1}><i className="fas fa-database"></i> <span className="d-none d-md-inline-block"><T>common.height</T></span></Col>
+                    <Col xs={2} md={1} className="text-nowrap"><span className={this.state.homepage ? "ml-4" : null}><i className="material-icons">check_circle</i> <span className="d-none d-lg-inline-block"><T>transactions.valid</T></span></span></Col>
+                    {!this.state.homepage ? <Col xs={12} lg={2}><i className="material-icons">monetization_on</i> <span className="d-none d-md-inline-block"><T>transactions.fee</T></span></Col> : null}
+                </Row>
+                {this.state.txs ?
+                    <VariableSizeList
+                        height={700}
+                        itemCount={this.props.transactionsCount}
+                        itemSize={this.getItemSize}
+                        width="100%"
+                    >
+                        {this.TxRow}
+                    </VariableSizeList>
+                    : ''}
+            </div>
+        }
+    }
 }
\ No newline at end of file
diff --git a/imports/ui/transactions/ListContainer.js b/imports/ui/transactions/ListContainer.js
index 71c1f6340..e2b48e17e 100644
--- a/imports/ui/transactions/ListContainer.js
+++ b/imports/ui/transactions/ListContainer.js
@@ -7,21 +7,21 @@ export default ValidatorDetailsContainer = withTracker((props) => {
     let transactionsHandle, transactions, transactionsExist;
     let loading = true;
 
-    if (Meteor.isClient){
-        transactionsHandle = Meteor.subscribe('transactions.list', 2200);
+    if (Meteor.isClient) {
+        transactionsHandle = Meteor.subscribe('transactions.list', props.limit);
         loading = !transactionsHandle.ready() && props.limit == Meteor.settings.public.initialPageSize;
 
         if (!loading) {
-            transactions = Transactions.find({}, {sort:{height:-1}}).fetch();
+            transactions = Transactions.find({}, { sort: { height: -1 } }).fetch();
             transactionsExist = !loading && !!transactions;
         }
     }
 
-    if (Meteor.isServer){
-        transactions = Transactions.find({}, {sort:{height:-1}}).fetch();
+    if (Meteor.isServer) {
+        transactions = Transactions.find({}, { sort: { height: -1 } }).fetch();
         transactionsExist = !!transactions;
     }
-    
+
     return {
         loading,
         transactionsExist,
diff --git a/imports/ui/transactions/Transaction.jsx b/imports/ui/transactions/Transaction.jsx
index d066ff286..9ed6ac7e3 100644
--- a/imports/ui/transactions/Transaction.jsx
+++ b/imports/ui/transactions/Transaction.jsx
@@ -12,32 +12,32 @@ import Coin from '/both/utils/coins.js';
 import TimeStamp from '../components/TimeStamp.jsx';
 
 const T = i18n.createComponent();
-export default class Transaction extends Component{
-    constructor(props){
+export default class Transaction extends Component {
+    constructor(props) {
         super(props);
-        let showdown  = require('showdown');
+        let showdown = require('showdown');
         showdown.setFlavor('github');
         let denom = this.props.denom;
     }
 
-    render(){
-        
-        
-        if (this.props.loading){
+    render() {
+
+
+        if (this.props.loading) {
             return <Container id="transaction">
                 <Spinner type="grow" color="primary" />
             </Container>
         }
-        else{
-            if (this.props.transactionExist){
+        else {
+            if (this.props.transactionExist) {
                 let tx = this.props.transaction;
                 return <Container id="transaction">
                     <Helmet>
                         <title>Transaction {tx.txhash} on {Meteor.settings.public.chainName} | Big Dipper</title>
-                        <meta name="description" content={"Details of transaction "+tx.txhash} />
+                        <meta name="description" content={"Details of transaction " + tx.txhash} />
                     </Helmet>
-                    <h4><T>transactions.transaction</T> {(!tx.code)?<TxIcon valid />:<TxIcon />}</h4>
-                    {(tx.code)?<Row><Col xs={{size:12, order:"last"}} className="error">
+                    <h4><T>transactions.transaction</T> {(!tx.code) ? <TxIcon valid /> : <TxIcon />}</h4>
+                    {(tx.code) ? <Row><Col xs={{ size: 12, order: "last" }} className="error">
                         <Alert color="danger">
                             <CosmosErrors
                                 code={tx.code}
@@ -45,7 +45,7 @@ export default class Transaction extends Component{
                                 log={tx.raw_log}
                             />
                         </Alert>
-                    </Col></Row>:''}
+                    </Col></Row> : ''}
                     <Card>
                         <div className="card-header"><T>common.information</T></div>
                         <CardBody>
@@ -54,30 +54,29 @@ export default class Transaction extends Component{
                                 <Col md={8} className="value text-nowrap overflow-auto address">{tx.txhash}</Col>
                                 <Col md={4} className="label"><T>common.height</T></Col>
                                 <Col md={8} className="value">
-                                    <Link to={"/blocks/"+tx.height}>{numbro(tx.height).format("0,0")}</Link>
-                                    {tx.block()?<span> <TimeStamp time={tx.block().time}/></span>:null}
+                                    <Link to={"/blocks/" + tx.height}>{numbro(tx.height).format("0,0")}</Link>
+                                    {tx.block() ? <span> <TimeStamp time={tx.block().time} /></span> : null}
                                 </Col>
                                 <Col md={4} className="label"><T>transactions.fee</T></Col>
-                                <Col md={8} className="value">{(tx.tx.auth_info.fee.amount.length > 0)?tx.tx.auth_info.fee.amount.map((fee,i) => {
+                                <Col md={8} className="value">{(tx.tx.auth_info.fee.amount.length > 0) ? tx.tx.auth_info.fee.amount.map((fee, i) => {
                                     return <span className="text-nowrap" key={i}> {(new Coin(parseFloat(fee.amount), fee.denom)).toString(6)} </span>
-                                }):<span><T>transactions.noFee</T></span>}</Col>
+                                }) : <span><T>transactions.noFee</T></span>}</Col>
                                 <Col md={4} className="label"><T>transactions.gasUsedWanted</T></Col>
                                 <Col md={8} className="value">{numbro(tx.tx_response.gas_used).format("0,0")} / {numbro(tx.tx_response.gas_wanted).format("0,0")}</Col>
                                 <Col md={4} className="label"><T>transactions.memo</T></Col>
-                                <Col md={8} className="value"><Markdown markup={ tx.tx.body.memo } /></Col>
-                              
+                                <Col md={8} className="value"><Markdown markup={tx.tx.body.memo} /></Col>
                             </Row>
                         </CardBody>
                     </Card>
                     <Card>
                         <div className="card-header"><T>transactions.activities</T></div>
                     </Card>
-                    {(tx.tx.body.messages && tx.tx.body.messages.length >0)?tx.tx.body.messages.map((msg,i) => {
-                        return <Card body key={i}><Activities msg={msg} invalid={(!!tx.tx_response.code)} events={(tx.tx_response.logs&&tx.tx_response.logs[i])?tx.tx_response.logs[i].events:null} denom={this.denom}/></Card>
-                    }):''}
+                    {(tx.tx.body.messages && tx.tx.body.messages.length > 0) ? tx.tx.body.messages.map((msg, i) => {
+                        return <Card body key={i}><Activities collapse={true} msg={msg} invalid={(!!tx.tx_response.code)} events={(tx.tx_response.logs && tx.tx_response.logs[i]) ? tx.tx_response.logs[i].events : null} denom={this.denom} /></Card>
+                    }) : ''}
                 </Container>
             }
-            else{
+            else {
                 return <Container id="transaction"><div><T>transactions.noTxFound</T></div></Container>
             }
         }
diff --git a/imports/ui/transactions/TransactionRow.jsx b/imports/ui/transactions/TransactionRow.jsx
index e60ffa90f..9ea186643 100644
--- a/imports/ui/transactions/TransactionRow.jsx
+++ b/imports/ui/transactions/TransactionRow.jsx
@@ -11,41 +11,51 @@ import numbro from 'numbro';
 import Coin from '/both/utils/coins.js'
 import SentryBoundary from '../components/SentryBoundary.jsx';
 import { Markdown } from 'react-showdown';
+import {
+    useRef,
+    useEffect,
+    createRef,
+} from 'react';
 
-let showdown  = require('showdown');
+let showdown = require('showdown');
 showdown.setFlavor('github');
 
-export const TransactionRow = (props) => {
-    let tx = props.tx;
-    let homepage = window?.location?.pathname === '/' ? true : false;
-
-    return <SentryBoundary><Row className={(tx.code)?"tx-info w-40 invalid":"tx-info w-40"}>
-        <Col xs={12} lg={homepage ? 5 : 7} className="activity" >{(tx?.tx?.body?.messages && tx?.tx?.body?.messages.length >0)?tx?.tx?.body?.messages.map((msg,i) => {
-            return <Card body key={i}><Activities msg={msg} invalid={(!!tx.tx_response.code)} events={(tx.tx_response.logs&&tx.tx_response.logs[i])?tx.tx_response.logs[i].events:null} /></Card>
-        }):''}</Col>
-        {!homepage ? <Col xs={(!props.blockList)?{size:6,order:"last"}:{size:12,order:"last"}} md={(!props.blockList)?{size:3, order: "last"}:{size:7, order: "last"}} lg={(!props.blockList)?{size:1,order:"last"}:{size:2,order:"last"}} className="text-truncate"><i className="fas fa-hashtag d-lg-none"></i> <Link to={"/transactions/"+tx.txhash}>{tx.txhash}</Link></Col> : 
-            <Col xs={(!props.blockList)?{size:6,order:"last"}:{size:12,order:"last"}} md={(!props.blockList)?{size:3, order: "last"}:{size:7, order: "last"}} lg={{size:2,order:"last"}} className="text-truncate ml-n4"><i className="fas fa-hashtag d-lg-none"></i> <Link to={"/transactions/"+tx.txhash}>{tx.txhash}</Link></Col>}
-        <Col xs={6} md={9} lg={{size:2,order:"last"}} className="text-nowrap"><i className="material-icons">schedule</i> <span>{tx.block()?<TimeAgo time={tx.block().time} />:''}</span>{(tx?.tx?.body?.memo && tx?.tx?.body?.memo != "")?<span>
-            <i className="material-icons ml-2 memo-button" id={"memo-"+tx.txhash}>message</i>
-            <UncontrolledPopover trigger="legacy" placement="top-start" target={"memo-"+tx.txhash}>
-                <PopoverBody><Markdown markup={tx.tx.body.memo} /></PopoverBody>
-            </UncontrolledPopover>
-        </span>:""}</Col>
-        {(!props.blockList) ? <Col xs={4} md={2} lg={!homepage ? 1 : 2}><i className="fas fa-database d-lg-none"></i> <Link to={"/blocks/"+tx.height}>{numbro(tx.height).format("0,0")}</Link></Col>:''}
-        <Col xs={(!props.blockList)?2:4} md={1}>{(!tx.code)?<TxIcon valid />:<TxIcon />}</Col> 
-        {!homepage ? <Col xs={(!props.blockList)?6:8} md={(!props.blockList)?9:4} lg={2} className="fee"><i className="material-icons d-lg-none">monetization_on</i> {(tx?.tx?.auth_info?.fee?.amount.length > 0)?tx?.tx?.auth_info?.fee?.amount.map((fee,i) => {
-            return <span className="text-nowrap" key={i}>{(new Coin(parseFloat(fee.amount), (fee)?fee.denom:null)).toString(6)}</span>
-        }) : <span>No fee</span>}</Col> : <Col xs={(!props.blockList) ? 6 : 8} md={(!props.blockList) ? 9 : 4} lg={2} className="fee d-sm-none"><i className="material-icons d-lg-none">monetization_on</i> {(tx?.tx?.auth_info?.fee?.amount.length > 0) ? tx?.tx?.auth_info?.fee?.amount.map((fee, i) => {
-            return <span className="text-nowrap" key={i}>{(new Coin(parseFloat(fee.amount), (fee) ? fee.denom : null)).toString(6)}</span>
-        }) : <span>No fee</span>}</Col> } 
-        {(tx.code)?<Col xs={{size:12, order:"last"}} className="error">
-            <Alert color="danger">
-                <CosmosErrors
-                    code={tx.code}
-                    codespace={tx.codespace}
-                    log={tx.raw_log}
-                />
-            </Alert>
-        </Col>:''}
-    </Row></SentryBoundary>
-}
+export class TransactionRow extends React.Component {
+    constructor(props) {
+        super(props);
+        this.myRef = React.createRef();
+    }
+    render() {
+        let tx = this.props.tx;
+        let homepage = window?.location?.pathname === '/' ? true : false;
+        return <SentryBoundary><div ref={this.myRef}><Row className={(tx.code) ? "tx-info-row w-40 invalid" : "tx-info-row w-40"}>
+            <Col xs={12} lg={homepage ? 5 : 7} className="activity" >{(tx?.tx?.body?.messages && tx?.tx?.body?.messages.length > 0) ? tx?.tx?.body?.messages.map((msg, i) => {
+                return <Card body key={i}><Activities msg={msg} id={this.props.index} invalid={(!!tx.tx_response.code)} events={(tx.tx_response.logs && tx.tx_response.logs[i]) ? tx.tx_response.logs[i].events : null} collapse={false} /></Card>
+            }) : ''}</Col>
+            {!homepage ? <Col xs={(!this.props.blockList) ? { size: 6, order: "last" } : { size: 12, order: "last" }} md={(!this.props.blockList) ? { size: 3, order: "last" } : { size: 7, order: "last" }} lg={(!this.props.blockList) ? { size: 1, order: "last" } : { size: 2, order: "last" }} className="text-truncate"><i className="fas fa-hashtag d-lg-none"></i> <Link to={"/transactions/" + tx.txhash}>{tx.txhash}</Link></Col> :
+                <Col xs={(!this.props.blockList) ? { size: 6, order: "last" } : { size: 12, order: "last" }} md={(!this.props.blockList) ? { size: 3, order: "last" } : { size: 7, order: "last" }} lg={{ size: 2, order: "last" }} className="text-truncate ml-n4"><i className="fas fa-hashtag d-lg-none"></i> <Link to={"/transactions/" + tx.txhash}>{tx.txhash}</Link></Col>}
+            <Col xs={6} md={9} lg={{ size: 2, order: "last" }} className="text-nowrap"><i className="material-icons">schedule</i> <span>{tx.block() ? <TimeAgo time={tx.block().time} /> : ''}</span>{(tx?.tx?.body?.memo && tx?.tx?.body?.memo != "") ? <span>
+                <i className="material-icons ml-2 memo-button" id={"memo-" + tx.txhash}>message</i>
+                <UncontrolledPopover trigger="legacy" placement="top-start" target={"memo-" + tx.txhash}>
+                    <PopoverBody><Markdown markup={tx.tx.body.memo} /></PopoverBody>
+                </UncontrolledPopover>
+            </span> : ""}</Col>
+            {(!this.props.blockList) ? <Col xs={4} md={2} lg={!homepage ? 1 : 2}><i className="fas fa-database d-lg-none"></i> <Link to={"/blocks/" + tx.height}>{numbro(tx.height).format("0,0")}</Link></Col> : ''}
+            <Col xs={(!this.props.blockList) ? 2 : 4} md={1}>{(!tx.code) ? <TxIcon valid /> : <TxIcon />}</Col>
+            {!homepage ? <Col xs={(!this.props.blockList) ? 6 : 8} md={(!this.props.blockList) ? 9 : 4} lg={2} className="fee"><i className="material-icons d-lg-none">monetization_on</i> {(tx?.tx?.auth_info?.fee?.amount.length > 0) ? tx?.tx?.auth_info?.fee?.amount.map((fee, i) => {
+                return <span className="text-nowrap" key={i}>{(new Coin(parseFloat(fee.amount), (fee) ? fee.denom : null)).toString(6)}</span>
+            }) : <span>No fee</span>}</Col> : <Col xs={(!this.props.blockList) ? 6 : 8} md={(!this.props.blockList) ? 9 : 4} lg={2} className="fee d-sm-none"><i className="material-icons d-lg-none">monetization_on</i> {(tx?.tx?.auth_info?.fee?.amount.length > 0) ? tx?.tx?.auth_info?.fee?.amount.map((fee, i) => {
+                return <span className="text-nowrap" key={i}>{(new Coin(parseFloat(fee.amount), (fee) ? fee.denom : null)).toString(6)}</span>
+            }) : <span>No fee</span>}</Col>}
+            {(tx.code) ? <Col xs={{ size: 12, order: "last" }} className="error">
+                <Alert color="danger">
+                    <CosmosErrors
+                        code={tx.code}
+                        codespace={tx.codespace}
+                        log={tx.raw_log}
+                    />
+                </Alert>
+            </Col> : ''}
+        </Row></div></SentryBoundary>
+    }
+}
\ No newline at end of file
diff --git a/imports/ui/transactions/TransactionsList.jsx b/imports/ui/transactions/TransactionsList.jsx
index a1ed0fbcd..54bd62af4 100644
--- a/imports/ui/transactions/TransactionsList.jsx
+++ b/imports/ui/transactions/TransactionsList.jsx
@@ -12,7 +12,7 @@ import i18n from 'meteor/universe:i18n';
 
 const T = i18n.createComponent();
 
-export default class Transactions extends Component {
+export default class TransactionsList extends Component {
     constructor(props) {
         super(props);
 
@@ -24,7 +24,7 @@ export default class Transactions extends Component {
             proposerDir: -1,
             priority: 2,
             loadmore: false,
-            sidebarOpen: (props?.location?.pathname.split("/transactions/").length == 2)
+            sidebarOpen: (props?.location?.pathname.split("/transactions/").length == 2),
         }
 
         this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
@@ -53,11 +53,10 @@ export default class Transactions extends Component {
     trackScrolling = () => {
         const wrappedElement = document.getElementById('transactions');
         if (this.isBottom(wrappedElement)) {
-            // console.log('header bottom reached');
             document.removeEventListener('scroll', this.trackScrolling);
             this.setState({ loadmore: true });
             this.setState({
-                limit: this.state.limit + 10
+                limit: this.state.limit + 3000
             }, (err, result) => {
                 if (!err) {
                     document.addEventListener('scroll', this.trackScrolling);
@@ -70,7 +69,6 @@ export default class Transactions extends Component {
     };
 
     onSetSidebarOpen(open) {
-        // console.log(open);
         this.setState({ sidebarOpen: open }, (error, result) => {
             let timer = Meteor.setTimeout(() => {
                 if (!open) {
@@ -110,44 +108,38 @@ export default class Transactions extends Component {
                 >
                 </Sidebar>} />
             </Switch>
-            <Container fluid id="transactions">
-                <List limit={this.state.limit} />
-            </Container>
-            <LoadMore show={this.state.loadmore} />
-        </div> 
-            : <Card className="h-100 overflow-auto">
-                <div className="card-header"><T>transactions.transactions</T></div>
-                <CardBody className="tx-list-homepage">
-                    <Table striped className="tx-home">
-                        <thead>
-                            <tr>
-                                <Switch>
-                                    <Route path="/transactions/:txId" render={(props) => <Sidebar
-                                        sidebar={<Transaction {...props} />}
-                                        open={this.state.sidebarOpen}
-                                        onSetOpen={this.onSetSidebarOpen}
-                                        styles={{
-                                            sidebar: {
-                                                background: "white",
-                                                position: "fixed",
-                                                width: '85%',
-                                                zIndex: 4
-                                            }, overlay: {
-                                                zIndex: 3
-                                            }
-                                        }}
-                                    >
-                                    </Sidebar>} />
+            <List limit={this.state.limit}  />
+        </div> : <Card className="h-100 overflow-auto">
+            <div className="card-header"><T>transactions.transactions</T></div>
+            <CardBody className="tx-list-homepage">
+                <Table striped className="tx-home">
+                    <thead>
+                        <tr>
+                            <Switch>
+                                <Route path="/transactions/:txId" render={(props) => <Sidebar
+                                    sidebar={<Transaction {...props} />}
+                                    open={this.state.sidebarOpen}
+                                    onSetOpen={this.onSetSidebarOpen}
+                                    styles={{
+                                        sidebar: {
+                                            background: "white",
+                                            position: "fixed",
+                                            width: '85%',
+                                            zIndex: 4
+                                        }, overlay: {
+                                            zIndex: 3
+                                        }
+                                    }}
+                                >
+                                </Sidebar>} />
 
-                                </Switch>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <List limit={this.state.limit} /></tbody>
-
-
-                    </Table>
-                </CardBody>
-            </Card>;
+                            </Switch>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <List limit={this.state.limit} /></tbody>
+                </Table>
+            </CardBody>
+        </Card>;
     }
 }
\ No newline at end of file