colw/api-improve-loading-speed (#3080)

* Remove unwanted data from validator query * Only load rewards on open * Poll for rewards every minute * createPersistedQueryLink to send optimistic hash * Skip queries until ActionModal is opened * Rename modal queries for clarity * Only retrieve rewards in Withdraw modal * Lint * Lint and name modal queries * Add comment explaining createPersistedQueryLink * Update test * snapshots * Failing tests on ActionModal * Remove async from function * Action modal tests * Update feature check in ActionModal * Test e2e config update * Update again * Lint * More lint * update backend repo checkout * Uncomment Delegations e2e test * Show loading for validators * Show loading indicator for validators page * Lint * Export SentryDSN property * Update snapshot * Test failing e2e - Button is disabled if delegations aren't loaded * Fix e2e test, data-name selector * Revert "Test failing e2e" c87cc8c * Remove duplicate config key * Update e2e test data property * Await next block * Remove loading state * Update PageValidator snapshot * Update snapshot * Remove unused error state * A small hack to account for a delay in the node TODO: Find a cleaner, server side solution. * Change operator name * Fabo/force network loading for refetch queries (#3111) * some fixes * fixed fetching and caching issues * fixed tests * better failing of e2e tests * renaming * lint * adding log to wait for API * fix totalStake query * fix api query again * switch to local testing * clear cache for transactions * clear undelegations cache * fix typo * remove log * Apply suggestions from code review
luniehq · Nov 11, 2019 · c68e7fa · c68e7fa
1 parent 7f3a4d1
commit c68e7fa
Show file tree

Hide file tree

Showing 38 changed files with 1,192 additions and 399 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -148,14 +148,21 @@ jobs:
           command: |
             nvm install v10.13.0
             nvm alias default v10.13.0
+      - run:
+          name: Install Chrome
+          command: |
+            wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+            sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+            sudo apt-get update
+            sudo apt-get -y install google-chrome-stable
       - run:
           name: Run testnet
           command: |
             cd lunie-backend
             docker-compose up --build -d
       - run:
           name: Test
-          command: npm run serve:dist & npm run test:e2e:browserstack
+          command: npm run serve:dist & npm run test:e2e:local
           no_output_timeout: 120
       - store_artifacts:
           path: ./screenshots

diff --git a/config.js b/config.js
@@ -18,5 +18,5 @@ export default {
 
   graphqlHost: graphql,
 
-  e2e: process.env.VUE_APP_E2E
+  e2e: process.env.VUE_APP_E2E || false
 }
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@sentry/integrations": "5.7.1",
     "apollo-boost": "^0.4.3",
     "apollo-cache-inmemory": "^1.6.2",
+    "apollo-link-persisted-queries": "0.2.2",
     "apollo-link-ws": "1.0.19",
     "apollo-utilities": "1.3.2",
     "autosize": "^4.0.2",

diff --git a/src/ActionModal/components/ActionModal.vue b/src/ActionModal/components/ActionModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition v-if="show" name="slide-fade">
+  <transition v-if="show && !$apollo.loading" name="slide-fade">
     <div v-focus-last class="action-modal" tabindex="0" @keyup.esc="close">
       <div
         v-if="(step === feeStep || step === signStep) && !sending"
@@ -23,7 +23,7 @@
         <Steps
           v-if="
             [defaultStep, feeStep, signStep].includes(step) &&
-              featureAvailable &&
+              checkFeatureAvailable &&
               !isMobileApp
           "
           :steps="['Details', 'Fees', 'Sign']"
@@ -42,7 +42,7 @@
           extension.
         </p>
       </div>
-      <template v-if="!featureAvailable">
+      <template v-if="!checkFeatureAvailable">
         <FeatureNotAvailable :feature="title" />
       </template>
       <template v-else>
@@ -367,6 +367,10 @@ export default {
       type: [String, Number],
       default: `0`
     },
+    rewards: {
+      type: Array,
+      default: () => []
+    },
     transactionData: {
       type: Object,
       default: () => {}
@@ -410,6 +414,15 @@ export default {
     ...mapState([`extension`, `session`]),
     ...mapGetters([`connected`, `isExtensionAccount`]),
     ...mapGetters({ networkId: `network` }),
+    checkFeatureAvailable() {
+      /* istanbul ignore next */
+      if (this.network.testnet) {
+        return true
+      }
+
+      const action = `action_${this.title.toLowerCase().replace(" ", "_")}`
+      return this.network[action] === true
+    },
     requiresSignIn() {
       return !this.session.signedIn
     },
@@ -473,6 +486,9 @@ export default {
       }
     }
   },
+  created() {
+    this.$apollo.skipAll = true
+  },
   updated: function() {
     const context = this.createContext()
     this.actionManager.setContext(context)
@@ -511,13 +527,13 @@ export default {
     },
     open() {
       this.confirmModalOpen()
+      this.$apollo.skipAll = false
       if (this.session.currrentModalOpen) {
         return
       }
 
       this.$store.commit(`setCurrrentModalOpen`, this)
       this.trackEvent(`event`, `modal`, this.title)
-      this.checkFeatureAvailable()
       this.gasPrice = config.default_gas_price.toFixed(9)
       this.show = true
     },
@@ -529,6 +545,7 @@ export default {
       this.show = false
       this.sending = false
       this.includedHeight = undefined
+      this.$apollo.skipAll = true
 
       // reset form
       this.$v.$reset()
@@ -661,16 +678,6 @@ export default {
     },
     async connectLedger() {
       await this.$store.dispatch(`connectLedgerApp`)
-    },
-    async checkFeatureAvailable() {
-      /* istanbul ignore next */
-      if (this.network === "testnet") {
-        this.featureAvailable = true
-        return
-      }
-
-      const action = `action_${this.title.toLowerCase().replace(" ", "_")}`
-      this.featureAvailable = this.network[action] === true
     }
   },
   validations() {
@@ -698,7 +705,7 @@ export default {
   apollo: {
     overview: {
       query: gql`
-        query overview($networkId: String!, $address: String!) {
+        query OverviewActionModal($networkId: String!, $address: String!) {
           overview(networkId: $networkId, address: $address) {
             totalRewards
             liquidStake
@@ -729,6 +736,7 @@ export default {
         query NetworkActionModal($networkId: String!) {
           network(id: $networkId) {
             id
+            testnet
             stakingDenom
             chain_id
             rpc_url
@@ -751,12 +759,16 @@ export default {
       },
       update(data) {
         /* istanbul ignore next */
+
         return data.network
       }
     },
     delegations: {
       query: gql`
-        query Delegations($networkId: String!, $delegatorAddress: String!) {
+        query DelegationsActionModal(
+          $networkId: String!
+          $delegatorAddress: String!
+        ) {
           delegations(
             networkId: $networkId
             delegatorAddress: $delegatorAddress
@@ -782,28 +794,6 @@ export default {
         return data.delegations
       }
     },
-    rewards: {
-      query: gql`
-        query RewardsActionModal(
-          $networkId: String!
-          $delegatorAddress: String!
-        ) {
-          rewards(networkId: $networkId, delegatorAddress: $delegatorAddress) {
-            validator {
-              operatorAddress
-            }
-            amount
-          }
-        }
-      `,
-      variables() {
-        return {
-          networkId: this.networkId,
-          delegatorAddress: this.session.address
-        }
-      },
-      update: result => result.rewards
-    },
     $subscribe: {
       userTransactionAdded: {
         variables() {

diff --git a/src/ActionModal/components/DelegationModal.vue b/src/ActionModal/components/DelegationModal.vue
@@ -10,6 +10,7 @@
     :transaction-data="transactionData"
     :notify-message="notifyMessage"
     @close="clear"
+    @txIncluded="onSuccess"
   >
     <TmFormGroup class="action-modal-form-group">
       <div class="form-message notice">
@@ -143,6 +144,7 @@ import ActionModal from "./ActionModal"
 import transaction from "../utils/transactionTypes"
 import { toMicroDenom } from "src/scripts/common"
 import { formatBech32 } from "src/filters"
+import { UserTransactionAdded } from "src/gql"
 
 export default {
   name: `delegation-modal`,
@@ -253,6 +255,10 @@ export default {
       return this.fromOptions[this.selectedIndex].maximum
     }
   },
+  mounted() {
+    this.$apollo.queries.balance.refetch()
+    this.$apollo.queries.delegations.refetch()
+  },
   methods: {
     open(options) {
       if (options && options.redelegation && this.fromOptions.length > 1) {
@@ -279,6 +285,9 @@ export default {
     },
     enterPressed() {
       this.$refs.actionModal.validateChangeStep()
+    },
+    onSuccess(event) {
+      this.$emit(`success`, event)
     }
   },
   validations() {
@@ -293,7 +302,10 @@ export default {
   apollo: {
     delegations: {
       query: gql`
-        query Delegations($networkId: String!, $delegatorAddress: String!) {
+        query DelegationsDelegationModal(
+          $networkId: String!
+          $delegatorAddress: String!
+        ) {
           delegations(
             networkId: $networkId
             delegatorAddress: $delegatorAddress
@@ -322,7 +334,11 @@ export default {
     },
     balance: {
       query: gql`
-        query balance($networkId: String!, $address: String!, $denom: String!) {
+        query BalanceDelegationModal(
+          $networkId: String!
+          $address: String!
+          $denom: String!
+        ) {
           balance(networkId: $networkId, address: $address, denom: $denom) {
             amount
             denom
@@ -342,7 +358,7 @@ export default {
     },
     denom: {
       query: gql`
-        query Networks($networkId: String!) {
+        query NetworksDelegationModal($networkId: String!) {
           network(id: $networkId) {
             id
             stakingDenom
@@ -359,6 +375,25 @@ export default {
         return data.network.stakingDenom
       }
     }
+  },
+  $subscribe: {
+    userTransactionAdded: {
+      variables() {
+        return {
+          networkId: this.network,
+          address: this.address
+        }
+      },
+      skip() {
+        return !this.address
+      },
+      query: UserTransactionAdded,
+      result({ data }) {
+        if (data.userTransactionAdded.success) {
+          this.$apollo.queries.delegations.refetch()
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/src/ActionModal/components/ModalDeposit.vue b/src/ActionModal/components/ModalDeposit.vue
@@ -146,7 +146,11 @@ export default {
   apollo: {
     balance: {
       query: gql`
-        query balance($networkId: String!, $address: String!, $denom: String!) {
+        query BalanceModalDeposit(
+          $networkId: String!
+          $address: String!
+          $denom: String!
+        ) {
           balance(networkId: $networkId, address: $address, denom: $denom) {
             amount
             denom

diff --git a/src/ActionModal/components/ModalPropose.vue b/src/ActionModal/components/ModalPropose.vue
@@ -233,7 +233,11 @@ export default {
   apollo: {
     balance: {
       query: gql`
-        query balance($networkId: String!, $address: String!, $denom: String!) {
+        query BalanceModalPropos(
+          $networkId: String!
+          $address: String!
+          $denom: String!
+        ) {
           balance(networkId: $networkId, address: $address, denom: $denom) {
             amount
             denom

diff --git a/src/ActionModal/components/ModalWithdrawRewards.vue b/src/ActionModal/components/ModalWithdrawRewards.vue
@@ -7,6 +7,7 @@
     title="Claim Rewards"
     class="modal-withdraw-rewards"
     submission-error-prefix="Withdrawal failed"
+    :rewards="rewards"
     :disable="validatorsWithRewards"
   >
     <span class="form-message notice withdraw-limit">

diff --git a/src/ActionModal/components/SendModal.vue b/src/ActionModal/components/SendModal.vue
@@ -9,6 +9,7 @@
     :transaction-data="transactionData"
     :notify-message="notifyMessage"
     @close="clear"
+    @txIncluded="onSuccess"
   >
     <TmFormGroup
       :error="$v.address.$error && $v.address.$invalid"
@@ -194,6 +195,9 @@ export default {
     open() {
       this.$refs.actionModal.open()
     },
+    onSuccess(event) {
+      this.$emit(`success`, event)
+    },
     validateForm() {
       this.$v.$touch()
 
@@ -257,7 +261,11 @@ export default {
   apollo: {
     balance: {
       query: gql`
-        query balance($networkId: String!, $address: String!, $denom: String!) {
+        query BalanceSendModal(
+          $networkId: String!
+          $address: String!
+          $denom: String!
+        ) {
           balance(networkId: $networkId, address: $address, denom: $denom) {
             amount
             denom