Feature/rewards claiming (#110)

* Polkaswap layout redesign (#98)

* pss-498 header redesign

* wip pss-496

* style fixes

* add HelpDialog component

* reexport package.json

* exchange routing fix

* add Rewards stub with coming soon text

* refactoring SidebarItemContent

* refactoring styles

* add FAUCET_URL to env.json

* fixes after review

* fix sidebar item hover css

* fix disabled item css

* Move bridge functionality (#103)

* pss-498 header redesign

* wip pss-496

* style fixes

* add HelpDialog component

* reexport package.json

* exchange routing fix

* add Rewards stub with coming soon text

* refactoring SidebarItemContent

* refactoring styles

* add FAUCET_URL to env.json

* fixes after review

* Move bridge functionality

Co-authored-by: Nikita-Polyakov <[email protected]>

* Update wallet & api

* PSS-524: Bridge (#107)

* pss-498 header redesign

* wip pss-496

* style fixes

* add HelpDialog component
* reexport package.json
* exchange routing fix
* add Rewards stub with coming soon text
* refactoring SidebarItemContent
* refactoring styles
* add FAUCET_URL to env.json
* fixes after review
* Move bridge functionality
* Bridge: Updated unauthorized routes.
* Updated Generic Page Header, updated Bridge screens.
* Fixed token icons.
* Bridge: Updated styles.
* Updated tooltips.
* Removed unused token images.
* Refactored due to PR comments.

Co-authored-by: Nikita-Polyakov <[email protected]>
Co-authored-by: Stefan Popov <[email protected]>

* wip initial screen

* token row wip

* Fix/pss 539 metamsk lock issue (#108)

* improve subscribers

* add check account is connected

* Fix/balance flickering (#109)

* wip update balance flow

* refactoring views and store modules

* remove unused code

* fixes after review

* add TokensRow component

* add rewards amount components

* add ordinal translations

* rename actions

* Update yarn.lock

* wip rewards states

* fix types

* wip rewards parsing

* update states

* add states flags

* remove comments

* sync yarn.lock

* refactoring bridge to use WalletConnectMixin

* css fixes

* change account flow

* save signature

* convert address to hex

* notification for no rewards

* fetch network fee for claiming rewards

* reset rewards for testing

* add types to store

* notification

* disconnect process

* add types for components

* fixes

* improve loading state

* improve notification

* success state ui update

* fetch rewards and network fee parallel

* improve error message

* unsubscribe ethereum events

Co-authored-by: Stefan Popov <[email protected]>
Co-authored-by: Alex Natalia <[email protected]>

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^1.2.0",
-    "@soramitsu/soraneo-wallet-web": "^0.7.9",
+    "@soramitsu/soraneo-wallet-web": "^0.7.12",
     "@walletconnect/web3-provider": "^1.3.3",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",

src/components/Rewards/AmountHeader.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="amount-header">
+    <template v-for="({ amount, symbol }, index) in items">
+      <div :key="symbol" class="amount-block">
+        <div class="amount-block__amount">{{ amount || '-' }}</div>
+        <div class="amount-block__symbol">{{ symbol }}</div>
+      </div>
+      <div v-if="items.length - 1 !== index" class="amount-header-divider" :key="index">
+        <s-divider direction="vertical" class="amount-header-divider__slash" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { RewardsAmountHeaderItem } from '@/types/rewards'
+
+@Component
+export default class AmountHeader extends Vue {
+  @Prop({ default: () => [], type: Array }) items!: Array<RewardsAmountHeaderItem>
+}
+</script>
+
+<style lang="scss" scoped>
+$amount-font-size: 20px;
+$divider-width: 12px;
+$divider-height: 40px;
+
+.amount {
+  &-header {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+
+    &-divider {
+      display: flex;
+      justify-content: center;
+      margin: 0 $inner-spacing-mini;
+      width: $divider-width;
+
+      &__slash {
+        width: 1px;
+        height: $divider-height;
+        margin: 0;
+        background: var(--s-color-base-on-accent);
+        opacity: 0.5;
+        transform: rotate(15deg)
+      }
+    }
+  }
+
+  &-block {
+    flex: 1;
+    color: var(--s-color-base-on-accent);
+    text-align: center;
+
+    &:first-child:not(:last-child) {
+      text-align: right;
+    }
+
+    &:last-child:not(:first-child) {
+      text-align: left;
+    }
+
+    &__amount {
+      font-size: $amount-font-size;
+      font-weight: $s-font-weight-big;
+      line-height: $s-line-height-medium;
+      letter-spacing: $s-letter-spacing-big;
+    }
+
+    &__symbol {
+      font-size: var(--s-font-size-small);
+      line-height: $s-line-height-base;
+    }
+  }
+}
+</style>

src/components/Rewards/AmountTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="amount-table">
+    <div v-for="({ title, amount, symbol }, index) in items" :key="index" class="amount-table-item">
+      <span>{{ title }}</span>
+      <div>
+        <span>{{ amount }}</span>&nbsp;<span>{{ symbol }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { RewardsAmountTableItem } from '@/types/rewards'
+
+@Component
+export default class AmountTable extends Vue {
+  @Prop({ default: () => [], type: Array }) items!: Array<RewardsAmountTableItem>
+}
+</script>
+
+<style lang="scss" scoped>
+.amount-table {
+  &-item {
+    color: var(--s-color-base-on-accent);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--s-font-size-mini);
+    line-height: $s-line-height-base;
+    padding: $inner-spacing-mini / 2 0;
+  }
+}
+</style>

src/components/Rewards/GradientBox.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="['gradient-box', symbolClass]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { KnownSymbols } from '@sora-substrate/util'
+
+@Component
+export default class GradientBox extends Vue {
+  @Prop({ default: '', type: String }) symbol!: KnownSymbols
+
+  get symbolClass (): string {
+    if (!this.symbol) return ''
+
+    return `gradient-box--${this.symbol.toLowerCase()}`
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gradient-box {
+  padding: $basic-spacing * 2;
+  border-radius: var(--s-border-radius-medium);
+  background: linear-gradient(101.79deg, #E81860 8.64%, #F89B29 93.47%);
+  display: flex;
+  flex-flow: column nowrap;
+
+  &--pswap {
+    background: linear-gradient(110.38deg, #E81860 13.54%, #6453C1 86.15%);
+  }
+
+  &--val {
+    background: linear-gradient(110.38deg, #C8AC5F 13.54%, #967E2C 86.15%);
+  }
+}
+</style>

src/components/Rewards/TokensRow.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="tokens-row">
+    <div class="tokens-row-container">
+      <token-logo
+        v-for="(symbol, index) in symbols"
+        :key="symbol"
+        :token-symbol="symbol"
+        :size="size"
+        :style="{ zIndex: symbols.length - index }"
+        class="tokens-row__item"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { KnownSymbols } from '@sora-substrate/util'
+
+import { lazyComponent } from '@/router'
+import { Components, LogoSize } from '@/consts'
+
+@Component({
+  components: {
+    TokenLogo: lazyComponent(Components.TokenLogo)
+  }
+})
+export default class TokensRow extends Vue {
+  @Prop({ default: () => [], type: Array }) symbols!: Array<KnownSymbols>
+  @Prop({ default: LogoSize.LARGE, type: String }) readonly size!: LogoSize
+}
+</script>
+
+<style lang="scss" scoped>
+.tokens-row {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+
+  &-container {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__item {
+    display: block;
+
+    & + & {
+      margin-left: -$basic-spacing * 2;
+    }
+  }
+}
+</style>

src/components/ToggleTextButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <s-button class="toggle-text-button" v-bind="$attrs" v-on="$listeners">
+    <span class="primary-text">{{ primaryText }}</span>
+    <span class="secondary-text">{{ secondaryText }}</span>
+  </s-button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class ToggleTextButton extends Vue {
+  @Prop({ default: '', type: String }) primaryText!: string
+  @Prop({ default: '', type: String }) secondaryText!: string
+}
+</script>
+
+<style lang="scss" scoped>
+.toggle-text-button {
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+
+  span {
+    font-weight: 400 !important;
+  }
+
+  .secondary-text {
+    display: none;
+  }
+
+  &:hover {
+    color: inherit;
+
+    .primary-text {
+      display: none;
+    }
+
+    .secondary-text {
+      display: inline-block;
+    }
+  }
+
+  &[type="link"]:hover .secondary-text {
+    text-decoration: underline;
+  }
+}
+</style>

src/components/TokenLogo.vue

@@ -61,4 +61,5 @@ $token-background-color: var(--s-color-base-on-accent);
 @include element-size('token-logo--mini', 16px);
 @include element-size('token-logo--small', 24px);
 @include element-size('token-logo--medium');
+@include element-size('token-logo--large', 80px);
 </style>

src/components/mixins/TransactionMixin.ts

@@ -1,10 +1,10 @@
 import { Component, Mixins } from 'vue-property-decorator'
-import { History, TransactionStatus, Operation } from '@sora-substrate/util'
+import { History, TransactionStatus, Operation, RewardInfo } from '@sora-substrate/util'
 import { api } from '@soramitsu/soraneo-wallet-web'
 import findLast from 'lodash/fp/findLast'
 import { Action } from 'vuex-class'
 
-import { formatAddress } from '@/utils'
+import { formatAddress, delay } from '@/utils'
 import TranslationMixin from './TranslationMixin'
 import LoadingMixin from './LoadingMixin'
 import NumberFormatterMixin from './NumberFormatterMixin'
@@ -32,17 +32,29 @@ export default class TransactionMixin extends Mixins(TranslationMixin, LoadingMi
     if ([Operation.AddLiquidity, Operation.CreatePair, Operation.Swap].includes(value.type)) {
       params.amount2 = params.amount2 ? this.formatStringValue(params.amount2) : ''
     }
+    if (value.type === Operation.ClaimRewards) {
+      params.rewards = params.rewards.reduce((result, item: RewardInfo) => {
+        if (+item.amount === 0) return result
+
+        const amount = this.getStringFromCodec(item.amount, item.asset.decimals)
+        const itemString = `${amount} ${item.asset.symbol}`
+
+        result.push(itemString)
+
+        return result
+      }, []).join(` ${this.t('rewards.andText')} `)
+    }
     return this.t(`operations.${value.status}.${value.type}`, params)
   }
 
   private async getLastTransaction (): Promise<void> {
     // Now we are checking every transaction with 1 second interval
     const tx = findLast(
-      item => Math.abs(Number(item.startTime) - this.time) < 1000,
+      item => Number(item.startTime) > this.time,
       api.accountHistory
     )
     if (!tx) {
-      await new Promise(resolve => setTimeout(resolve, 50))
+      await delay()
       return await this.getLastTransaction()
     }
     this.transaction = tx

src/components/mixins/TranslationMixin.ts

@@ -1,5 +1,21 @@
 import { Vue, Component } from 'vue-property-decorator'
 
+const OrdinalRules = {
+  en: (v) => {
+    const n = +v
+
+    if (!Number.isFinite(n) || n === 0) return v
+
+    const remainder = n % 10
+
+    if (remainder === 1) return `${n}st`
+    if (remainder === 2) return `${n}nd`
+    if (remainder === 3) return `${n}rd`
+
+    return `${n}th`
+  }
+}
+
 @Component
 export default class TranslationMixin extends Vue {
   t (key: string, values?: any): string {
@@ -13,4 +29,8 @@ export default class TranslationMixin extends Vue {
   te (key: string): boolean {
     return this.$root.$te(key)
   }
+
+  tOrdinal (n) {
+    return OrdinalRules[this.$i18n.locale]?.(n) ?? n
+  }
 }