New page allowing to blend NFTs airdropped.

frontend/.env.polygon

@@ -6,3 +6,6 @@ VUE_APP_BENIS_CONTRACT=0xefa4aED9Cf41A8A0FcdA4e88EfA2F60675bAeC9F
 VUE_APP_EXPECTED_CHAIN_ID=0x89
 VUE_APP_BLOCKCHAIN=polygon
 VUE_APP_DEX_URL="https://app.sushi.com"
+
+VUE_APP_NFT_REWARDS_CONTRACT=0xBdc2108A7ec871797325B4a67A9c31E0d1BE2f26
+VUE_APP_NFT_OPENSEA_URL=https://opensea.io/assets/matic

frontend/.env.polygonstaging

@@ -6,3 +6,6 @@ VUE_APP_BENIS_CONTRACT=0xCA24D45C36951f0969574023507F21CA636D6345
 VUE_APP_EXPECTED_CHAIN_ID=0x13881
 VUE_APP_BLOCKCHAIN=polygon
 VUE_APP_DEX_URL="https://app.apeswap.finance"
+
+VUE_APP_NFT_REWARDS_CONTRACT=0xb64E91801B3e1666DEc22F6a43552847162a82eb
+VUE_APP_NFT_OPENSEA_URL=https://testnets.opensea.io/assets/mumbai

frontend/package.json

@@ -22,7 +22,8 @@
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "vuex-class": "^0.3.2",
-    "vuex-module-decorators": "^1.0.1"
+    "vuex-module-decorators": "^1.0.1",
+    "wban-nfts": "^0.2.0"
   },
   "devDependencies": {
     "@quasar/app": "^2.2.4",

frontend/src/components/nft/NftPicture.vue

@@ -0,0 +1,33 @@
+<template>
+	<q-img
+		v-if="uri !== null"
+		:src="uri"
+		:class="nftClass"
+		fit="scaled-down"
+		spinner-color="white"
+		style="max-width: 300px; height: 300px;"
+	/>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class NftPicture extends Vue {
+	@Prop({ type: String, required: true }) uri!: string
+	@Prop({ type: Boolean, default: false }) disabled!: boolean
+
+	get nftClass() {
+		if (this.disabled) {
+			return 'nft-disabled'
+		} else {
+			return ''
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.nft-disabled
+	opacity: 0.2
+</style>

frontend/src/components/nft/NftReward.vue

@@ -0,0 +1,69 @@
+<template>
+	<div class="col-xl-3 col-lg-3 col-md-4 col-sm-8 col-xs-12 flex">
+		<q-card class="nft-card fit text-white">
+			<q-item>
+				<q-item-section>
+					<q-item-label>
+						<div class="text-bold">{{ data.name }}</div>
+					</q-item-label>
+				</q-item-section>
+				<q-item-section side>
+					<q-item-label class="text-right text-bold">Qty: {{ data.balance }}</q-item-label>
+				</q-item-section>
+			</q-item>
+			<q-separator class="bg-secondary" />
+			<q-card-section class="text-center">
+				<nft-picture :uri="data.image" :disabled="data.balance === 0" />
+			</q-card-section>
+			<q-separator class="bg-secondary" />
+			<q-card-actions class="nft-actions">
+				<q-btn-group outline spread class="fit">
+					<q-btn @click="buyOrSell()" color="primary" class="fit" flat>Buy/Sell</q-btn>
+				</q-btn-group>
+			</q-card-actions>
+		</q-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import NftPicture from '@/components/nft/NftPicture.vue'
+import NftData from '@/models/nft/NftData'
+import { openURL } from 'quasar'
+
+const nftStore = namespace('nft')
+
+@Component({
+	components: {
+		NftPicture
+	}
+})
+export default class NftReward extends Vue {
+	@Prop({ type: String, required: true }) nftId!: string
+	@Prop({ type: Object, required: true }) data!: NftData
+
+	@nftStore.Getter('uri')
+	uriTemplate!: string
+
+	name = ''
+	description = ''
+	uri = ''
+
+	static NFT_REWARDS_CONTRACT: string = process.env.VUE_APP_NFT_REWARDS_CONTRACT || ''
+	static NFT_OPENSEA_URL: string = process.env.VUE_APP_NFT_OPENSEA_URL || ''
+
+	buyOrSell() {
+		openURL(`${NftReward.NFT_OPENSEA_URL}/${NftReward.NFT_REWARDS_CONTRACT}/${this.nftId}`)
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+@import '@/styles/quasar.sass'
+
+.nft-card
+	background-color: lighten($secondary, 10%) !important
+	.nft-actions
+		background-color: lighten($secondary, 10%) !important
+</style>

frontend/src/models/nft/ClaimGoldenRequest.ts

@@ -0,0 +1,9 @@
+import { WBANLPRewards } from "wban-nfts"
+
+type ClaimGoldenRequest = {
+	contract: WBANLPRewards
+	account: string
+	level: number
+}
+
+export default ClaimGoldenRequest

frontend/src/models/nft/LoadBalanceRequest.ts

@@ -0,0 +1,8 @@
+import { WBANLPRewards } from "wban-nfts"
+
+type LoadBalanceRequest = {
+	contract: WBANLPRewards
+	account: string
+}
+
+export default LoadBalanceRequest

frontend/src/models/nft/NftData.ts

@@ -0,0 +1,9 @@
+type NftData = {
+	id: string
+	name: string
+	description: string
+	image: string
+	balance: number
+}
+
+export default NftData