Ana/fix rewards updating (#3235)

* fix lint error

* fix more lint errors

* add userrewardsincremented. err cannot query field

* changelog

* fix user rewards increment add validator fragment

* get rid of user rewards increment subscription

* rewards updating in tmbalance

* update rewards also for validators

* delete unnecessary code

* delete usertransaction added completely

* pass logic from livalidator to tablevalidators

* fix lint

changes/ana_fix-rewards-updating

@@ -0,0 +1 @@
+[Added] [#3095](https://github.com/cosmos/lunie/issues/3095) Add the subscription to automatically update the user rewards @Bitcoinera

src/components/common/TmBalance.vue

@@ -147,6 +147,26 @@ export default {
           // query if successful or not as even an unsuccessful tx costs fees
           refetchNetworkOnly(this.$apollo.queries.overview)
         }
+      },
+      blockAdded: {
+        variables() {
+          return {
+            networkId: this.network
+          }
+        },
+        query() {
+          return gql`
+            subscription($networkId: String!) {
+              blockAdded(networkId: $networkId) {
+                height
+                chainId
+              }
+            }
+          `
+        },
+        result() {
+          refetchNetworkOnly(this.$apollo.queries.overview)
+        }
       }
     }
   }

src/components/staking/LiValidator.vue

@@ -62,7 +62,6 @@
 <script>
 import { percent, shortDecimals, atoms } from "scripts/num"
 import Avatar from "common/Avatar"
-
 export default {
   name: `li-validator`,
   components: {
@@ -109,50 +108,42 @@ export default {
   border-bottom: 1px solid var(--bc-dim);
   border-radius: 0.25rem;
 }
-
 .li-validator:last-child {
   border-bottom: none;
 }
-
 .validator-info {
   display: flex;
   flex-direction: column;
   padding-left: 1rem;
   text-overflow: ellipsis;
 }
-
 .li-validator h4,
 .li-validator h5 {
   font-size: var(--sm);
   display: inline-block;
 }
-
 .li-validator h5 {
   padding-left: 0.5rem;
   color: var(--success);
 }
-
 .li-validator:hover {
   cursor: pointer;
   background: var(--hover-bg);
   color: var(--bright);
 }
-
 .li-validator-name {
   font-size: 1rem;
   line-height: 18px;
   font-weight: 500;
   color: var(--bright);
   display: inline-block;
 }
-
 .li-validator-image {
   border-radius: 0.25rem;
   height: 2.5rem;
   width: 2.5rem;
   border: 1px solid var(--bc-dim);
 }
-
 .validator-status {
   text-transform: uppercase;
   font-size: 10px;
@@ -161,12 +152,10 @@ export default {
   padding: 2px 4px;
   border-radius: 0.25rem;
 }
-
 .validator-status.inactive {
   color: var(--warning);
   border-color: var(--warning);
 }
-
 .validator-status.active {
   color: var(--success);
   border-color: var(--success);

src/components/staking/PageValidator.vue

@@ -163,14 +163,15 @@ import moment from "moment"
 import { mapGetters, mapState } from "vuex"
 import { atoms, shortDecimals, fullDecimals, percent } from "scripts/num"
 import { noBlanks, fromNow } from "src/filters"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 import TmBtn from "common/TmBtn"
 import DelegationModal from "src/ActionModal/components/DelegationModal"
 import UndelegationModal from "src/ActionModal/components/UndelegationModal"
 import Avatar from "common/Avatar"
 import Bech32 from "common/Bech32"
 import TmPage from "common/TmPage"
 import gql from "graphql-tag"
-import { ValidatorProfile, UserTransactionAdded } from "src/gql"
+import { ValidatorProfile } from "src/gql"
 
 function getStatusText(statusDetailed) {
   switch (statusDetailed) {
@@ -334,23 +335,24 @@ export default {
       }
     },
     $subscribe: {
-      userTransactionAdded: {
+      blockAdded: {
         variables() {
           return {
-            networkId: this.network,
-            address: this.userAddress
+            networkId: this.network
           }
         },
-        skip() {
-          return !this.userAddress
+        query() {
+          return gql`
+            subscription($networkId: String!) {
+              blockAdded(networkId: $networkId) {
+                height
+                chainId
+              }
+            }
+          `
         },
-        query: UserTransactionAdded,
-        result({ data }) {
-          if (data.userTransactionAdded.success) {
-            this.$apollo.queries.validator.refetch()
-            this.$apollo.queries.rewards.refetch()
-            this.$apollo.queries.delegation.refetch()
-          }
+        result() {
+          refetchNetworkOnly(this.$apollo.queries.rewards)
         }
       }
     }

src/components/staking/TableValidators.vue

@@ -29,6 +29,7 @@
 
 <script>
 import { mapGetters } from "vuex"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 import orderBy from "lodash.orderby"
 import LiValidator from "staking/LiValidator"
 import PanelSort from "staking/PanelSort"
@@ -152,6 +153,28 @@ export default {
       update: result => {
         return result.rewards || []
       }
+    },
+    $subscribe: {
+      blockAdded: {
+        variables() {
+          return {
+            networkId: this.network
+          }
+        },
+        query() {
+          return gql`
+            subscription($networkId: String!) {
+              blockAdded(networkId: $networkId) {
+                height
+                chainId
+              }
+            }
+          `
+        },
+        result() {
+          refetchNetworkOnly(this.$apollo.queries.rewards)
+        }
+      }
     }
   }
 }