Vote mobile page and logic

src/App.vue

@@ -143,6 +143,7 @@ export default defineComponent({
       const message = m as ProtocolStateChangedMessage;
       store.commit('stakingV3/setProtocolState', message.state, { root: true });
 
+      console.log('protocol state', message.state);
       await getAllRewards();
     });
 

src/components/dapp-staking/stake-manage/StakeForm.vue

@@ -83,17 +83,15 @@
       <div v-if="warningMsg && currentAccount" class="row--box-error">
         <span class="color--white"> {{ $t(warningMsg) }}</span>
       </div>
-      <div class="wrapper__row--button" :class="!errMsg && 'btn-margin-adjuster'">
-        <astar-button
-          class="btn-size--confirm"
-          :disabled="!!errMsg || !Number(amount)"
-          @click="handleStake({ amount, targetContractId: dapp.dapp.address })"
-        >
-          <span class="text--btn-confirm">
-            {{ $t('confirm') }}
-          </span>
-        </astar-button>
-      </div>
+      <astar-button
+        class="btn-size--confirm"
+        :disabled="!!errMsg || !Number(amount)"
+        @click="handleStake({ amount, targetContractId: dapp.dapp.address })"
+      >
+        <span class="text--btn-confirm">
+          {{ $t('confirm') }}
+        </span>
+      </astar-button>
     </div>
   </div>
 </template>

src/i18n/en-US/index.ts

@@ -684,6 +684,26 @@ export default {
     unavailableStakeFunds:
       'The staking amount surpasses the current balance available for staking.',
     successfullyStaked: 'You successfully staked to {contractAddress}',
+    voteTitle: 'Vote!',
+    minimumStakingAmount: 'Minimum staking amount is {amount} {symbol}',
+    minBalanceAfterStaking:
+      'Account must hold more than {amount} {symbol} transferrable tokens after you stake.',
+    selectProjects: 'Select projects',
+    chooseProject: 'Choose a project to vote',
+    availableToVote: 'Available to vote',
+    totalTransferable: 'Total transferable',
+    lockedForVoting: 'Locked for voting',
+    alreadyVoted: 'Already voted',
+    remainLockedToken: 'Remain locked token',
+    voteLockedTokensWarning:
+      'Be sure you vote on dapps otherwise those tokens are not eligible for any rewards.',
+    rewardsWillBeClaimed: 'Your unclaimed rewards will be claimed.',
+    basicRewards: 'Basic rewards',
+    bonusRewards: 'Bonus rewards',
+    dAppRewards: 'dApp rewards',
+    tokensToBeLocked: 'Tokens to be locked',
+    additionalTokensLockedWarning:
+      'Additional tokens will be locked to be able to stake a desired amount.',
   },
   bridge: {
     bridge: 'Bridge',

src/router/routes.ts

@@ -14,6 +14,7 @@ import RegisterDapp from 'src/pages/RegisterDapp.vue';
 import StakeManage from 'src/pages/StakeManage.vue';
 import DappPage from 'src/pages/DappPage.vue';
 import DappStakingV3Page from 'src/pages/DappStakingV3.vue';
+import { Vote } from 'src/staking-v3';
 import DiscoverV3 from 'src/staking-v3/components/DiscoverV3.vue';
 import { RouteRecordRaw } from 'vue-router';
 
@@ -43,6 +44,7 @@ export enum Path {
   XvmTransfer = '/xvm-transfer',
   Register = '/register',
   DappStakingV3 = '/dapp-staking-v3',
+  Vote = '/vote',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -178,6 +180,10 @@ const routes: RouteRecordRaw[] = [
         path: 'discover',
         component: DiscoverV3,
       },
+      {
+        path: 'vote',
+        component: Vote,
+      },
     ],
   },
 

src/staking-v3/components/Amount.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="wrapper--amount">
+      <img class="token--logo" alt="token-logo" :src="nativeTokenImg" />
+      <span class="text--title">{{ nativeTokenSymbol }}</span>
+      <input
+        :value="amount"
+        inputmode="decimal"
+        type="number"
+        min="0"
+        pattern="^[0-9]*(\.)?[0-9]*$"
+        placeholder="0.0"
+        class="input--amount input--no-spin"
+        @input="handleInputAmount"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, PropType } from 'vue';
+import { getTokenImage } from 'src/modules/token';
+import { useNetworkInfo } from 'src/hooks';
+
+export default defineComponent({
+  props: {
+    amountChanged: {
+      type: Function as PropType<(amount: number) => void | undefined>,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { nativeTokenSymbol } = useNetworkInfo();
+    const amount = ref<number | undefined>(undefined);
+
+    const nativeTokenImg = computed<string>(() =>
+      getTokenImage({ isNativeToken: true, symbol: nativeTokenSymbol.value })
+    );
+
+    const handleInputAmount = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+      if (props.amountChanged) {
+        props.amountChanged(Number(target.value));
+      }
+    };
+
+    return { nativeTokenImg, nativeTokenSymbol, amount, handleInputAmount };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.wrapper--amount {
+  display: flex;
+}
+
+.input--amount {
+  flex-grow: 1;
+  text-align: right;
+  font-size: 18px;
+  outline: none;
+  background: transparent;
+  text-align: right;
+  font-weight: 600;
+  color: $navy-1;
+}
+
+.token--logo {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+</style>

src/staking-v3/components/StakingHome.vue

@@ -5,13 +5,12 @@
     <p>Protocol state: {{ protocolState }}</p>
     <br />
     <div v-for="(dapp, index) in registeredDapps" :key="index">
+      <button @click="navigateToVote()">Vote</button> |
       <button @click="stake(dapp.chain.address, 1000)">Stake</button> |
       <button @click="unstake(dapp.chain.address, 10)">Unstake</button> |
-      <button :disabled="!canClaimStakerRewards()" @click="claimStakerRewards()">
-        Claim staker
-      </button>
-      | <button :disabled="!canClaimDappRewards()" @click="claimDappRewards()">Claim dApp</button> |
-      <button :disabled="!canClaimBonusRewards()" @click="claimBonusRewards()">Claim bonus</button>
+      <button :disabled="!hasStakerRewards" @click="claimStakerRewards()">Claim staker</button>
+      | <button :disabled="!hasDappRewards" @click="claimDappRewards()">Claim dApp</button> |
+      <button :disabled="!hasBonusRewards" @click="claimBonusRewards()">Claim bonus</button>
       | <button @click="fetchDappToStore(dapp.chain.address)">Details</button> | [{{
         dapp.chain.address
       }}]
@@ -22,27 +21,36 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, watch, watchEffect } from 'vue';
-import { useDapps, useDappStaking } from '../hooks';
 import { useAccount } from 'src/hooks';
+import { useDappStaking, useDapps } from '../hooks';
+import { Path, networkParam } from 'src/router/routes';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
+  components: {},
   setup() {
+    const router = useRouter();
     const { registeredDapps, fetchDappsToStore, fetchDappToStore } = useDapps();
     const {
       protocolState,
       rewards,
+      hasStakerRewards,
+      hasBonusRewards,
+      hasDappRewards,
       stake,
       unstake,
       claimStakerRewards,
       claimDappRewards,
       claimBonusRewards,
       getAllRewards,
-      canClaimBonusRewards,
-      canClaimDappRewards,
-      canClaimStakerRewards,
     } = useDappStaking();
     const { currentAccount } = useAccount();
 
+    const navigateToVote = (): void => {
+      const base = networkParam + Path.DappStakingV3 + Path.Vote;
+      router.push(base);
+    };
+
     onMounted(async () => {
       await fetchDappsToStore();
     });
@@ -62,15 +70,16 @@ export default defineComponent({
       registeredDapps,
       protocolState,
       rewards,
+      hasStakerRewards,
+      hasBonusRewards,
+      hasDappRewards,
       stake,
       unstake,
       fetchDappToStore,
       claimStakerRewards,
       claimDappRewards,
       claimBonusRewards,
-      canClaimBonusRewards,
-      canClaimDappRewards,
-      canClaimStakerRewards,
+      navigateToVote,
     };
   },
 });