Ana/livepeer explore mode frontend

changes/ana_livepeer-explore-mode-fe

@@ -0,0 +1,2 @@
+[Changed] [#3349](https://github.com/cosmos/lunie/pull/3349) Now it is possible to also sign in with an Ethereum address @Bitcoinera
+[Changed] [#3349](https://github.com/cosmos/lunie/pull/3349) Now the Undelegations component filters for only pending undelegations @Bitcoinera

package.json

@@ -69,7 +69,8 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.0.3",
     "vuelidate": "^0.7.4",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "web3-utils": "1.2.4"
   },
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.2",

src/components/common/TmSessionExplore.vue

@@ -47,7 +47,7 @@
             type="required"
           />
           <TmFormMsg
-            v-else-if="$v.address.$error && !$v.address.bech32Validate"
+            v-else-if="$v.address.$error && !$v.address.addressValidate"
             name="Your Cosmos Address"
             type="bech32"
           />
@@ -76,6 +76,7 @@ import TmField from "common/TmField"
 import TmFormMsg from "common/TmFormMsg"
 import bech32 from "bech32"
 import { formatBech32 } from "src/filters"
+import * as Web3Utils from "web3-utils"
 
 export default {
   name: `session-explore`,
@@ -142,13 +143,19 @@ export default {
     exploreWith(address) {
       this.address = address
       this.onSubmit()
+    },
+    isEthereumAddress(address) {
+      return Web3Utils.isAddress(address)
+    },
+    addressValidate(address) {
+      return this.bech32Validate(address) || this.isEthereumAddress(address)
     }
   },
   validations() {
     return {
       address: {
         required,
-        bech32Validate: this.bech32Validate,
+        addressValidate: this.addressValidate,
         isNotAValidatorAddress: this.isNotAValidatorAddress
       }
     }

src/components/staking/Undelegations.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    v-if="!$apollo.queries.undelegations.loading && undelegations.length > 0"
+    v-if="
+      !$apollo.queries.undelegations.loading &&
+        undelegations &&
+        undelegations.length > 0
+    "
   >
     <h3 class="tab-header">
       Pending Undelegations
@@ -13,7 +17,8 @@
 import { mapGetters } from "vuex"
 import TableUndelegations from "staking/TableUndelegations"
 import refetchNetworkOnly from "scripts/refetch-network-only"
-import { UndelegationsForDelegator, UserTransactionAdded } from "src/gql"
+import { ValidatorFragment, UserTransactionAdded } from "src/gql"
+import gql from "graphql-tag"
 
 export default {
   name: `undelegations`,
@@ -30,11 +35,23 @@ export default {
     undelegations: {
       query() {
         /* istanbul ignore next */
-        return UndelegationsForDelegator(this.network)
+        return gql`
+        query Undelegations($networkId: String!, $delegatorAddress: String!) {
+          undelegations(networkId: $networkId, delegatorAddress: $delegatorAddress) {
+            validator {
+              ${ValidatorFragment}
+            }
+            amount
+            startHeight
+            endTime
+          }
+        }
+      `
       },
       variables() {
         /* istanbul ignore next */
         return {
+          networkId: this.network,
           delegatorAddress: this.address
         }
       },

src/gql/index.js

@@ -14,7 +14,7 @@ export const schemaMap = {
   testnet: "gaia_testnet_"
 }
 
-const ValidatorFragment = `
+export const ValidatorFragment = `
   name
   operatorAddress
   consensusPubkey
@@ -64,19 +64,6 @@ export const DelegatorValidators = schema => gql`
   }
 `
 
-export const UndelegationsForDelegator = schema => gql`
-  query Undelegations($delegatorAddress: String!) {
-    undelegations(networkId: "${schema}", delegatorAddress: $delegatorAddress) {
-      validator {
-        ${ValidatorFragment}
-      }
-      amount
-      startHeight
-      endTime
-    }
-  }
-`
-
 export const DelegationsForDelegator = schema => gql`
   query Delegations($delegatorAddress: String!) {
     delegations(networkId: "${schema}", delegatorAddress: $delegatorAddress) {

src/vuex/modules/connection.js

@@ -1,7 +1,7 @@
 import config from "src/../config"
 import { Networks } from "../../gql"
 
-export default function ({ apollo }) {
+export default function({ apollo }) {
   const state = {
     stopConnecting: false,
     connected: true, // TODO do connection test

tests/unit/specs/components/ActionModal/components/DelegationModal.spec.js

@@ -29,7 +29,7 @@ describe(`DelegationModal`, () => {
   let wrapper
   const localVue = createLocalVue()
   localVue.use(Vuelidate)
-  localVue.directive("focus", () => { })
+  localVue.directive("focus", () => {})
 
   const state = {
     session: {
@@ -49,8 +49,8 @@ describe(`DelegationModal`, () => {
         $store: { getters, state },
         $apollo: {
           queries: {
-            balance: { refetch: () => { } },
-            delegations: { refetch: () => { } }
+            balance: { refetch: () => {} },
+            delegations: { refetch: () => {} }
           }
         }
       },

tests/unit/specs/components/ActionModal/components/UndelegationModal.spec.js

@@ -12,7 +12,7 @@ describe(`UndelegationModal`, () => {
   }
   const localVue = createLocalVue()
   localVue.use(Vuelidate)
-  localVue.directive("focus", () => { })
+  localVue.directive("focus", () => {})
 
   beforeEach(() => {
     $store = {

tests/unit/specs/components/common/TmSessionExplore.spec.js

@@ -107,4 +107,28 @@ describe(`TmSessionExplore`, () => {
       sessionType: `explore`
     })
   })
+
+  it(`returns "true" if receives a correct Ethereum address all in small caps`, () => {
+    const ethereumAddress = `0x010afb8548a5d1a3a3d62f58ca0a5a1329974206`
+    const check = TmSessionExplore.methods.isEthereumAddress(ethereumAddress)
+    expect(check).toBe(true)
+  })
+
+  it(`returns "true" if receives a correct Ethereum address all in big caps`, () => {
+    const ethereumAddress = `0x010AFB8548A5D1A3A3D62F58CA0A5A1329974206`
+    const check = TmSessionExplore.methods.isEthereumAddress(ethereumAddress)
+    expect(check).toBe(true)
+  })
+
+  it(`returns "false" if receives an incorrect Ethereum address`, () => {
+    const ethereumAddress = `0x010AFB8548A5D1A3A3D62F58`
+    const check = TmSessionExplore.methods.isEthereumAddress(ethereumAddress)
+    expect(check).toBe(false)
+  })
+
+  it(`returns "true" if receives a checksummed Ethereum address`, () => {
+    const ethereumAddress = `0x28f4961F8b06F7361A1efD5E700DE717b1db5292`
+    const check = TmSessionExplore.methods.isEthereumAddress(ethereumAddress)
+    expect(check).toBe(true)
+  })
 })

tests/unit/specs/components/common/TmSessionHardware.spec.js

@@ -8,7 +8,7 @@ localVue.use(Vuex)
 localVue.use(Vuelidate)
 localVue.directive(`tooltip`, () => {})
 localVue.directive(`focus`, () => {})
-localVue.directive('clipboard', () => {})
+localVue.directive("clipboard", () => {})
 
 describe(`TmSessionHardware`, () => {
   let wrapper, store