From 13089a1e103f134e1decfd0459cdee9c7981a998 Mon Sep 17 00:00:00 2001
From: wrap-that-potassium <wrap-that-potassium@protonmail.com>
Date: Tue, 7 Sep 2021 10:43:28 +0200
Subject: [PATCH] New page allowing to blend NFTs airdropped.

---
 frontend/.env.polygon                         |   3 +
 frontend/.env.polygonstaging                  |   3 +
 frontend/package.json                         |   3 +-
 frontend/src/components/nft/NftPicture.vue    |  33 +++
 frontend/src/components/nft/NftReward.vue     |  69 +++++
 frontend/src/models/nft/ClaimGoldenRequest.ts |   9 +
 frontend/src/models/nft/LoadBalanceRequest.ts |   8 +
 frontend/src/models/nft/NftData.ts            |   9 +
 frontend/src/pages/NftRewards.vue             | 267 ++++++++++++++++++
 frontend/src/router/routes.ts                 |   6 +
 frontend/src/store/modules/nft.ts             | 129 +++++++++
 frontend/yarn.lock                            |   5 +
 12 files changed, 543 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/nft/NftPicture.vue
 create mode 100644 frontend/src/components/nft/NftReward.vue
 create mode 100644 frontend/src/models/nft/ClaimGoldenRequest.ts
 create mode 100644 frontend/src/models/nft/LoadBalanceRequest.ts
 create mode 100644 frontend/src/models/nft/NftData.ts
 create mode 100644 frontend/src/pages/NftRewards.vue
 create mode 100644 frontend/src/store/modules/nft.ts

diff --git a/frontend/.env.polygon b/frontend/.env.polygon
index e8151ca1..e5be7a34 100644
--- a/frontend/.env.polygon
+++ b/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
diff --git a/frontend/.env.polygonstaging b/frontend/.env.polygonstaging
index 3a0ea828..c53e5919 100644
--- a/frontend/.env.polygonstaging
+++ b/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
diff --git a/frontend/package.json b/frontend/package.json
index 01456724..c5914390 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/nft/NftPicture.vue b/frontend/src/components/nft/NftPicture.vue
new file mode 100644
index 00000000..72f58e67
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/nft/NftReward.vue b/frontend/src/components/nft/NftReward.vue
new file mode 100644
index 00000000..92acc5bc
--- /dev/null
+++ b/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>
diff --git a/frontend/src/models/nft/ClaimGoldenRequest.ts b/frontend/src/models/nft/ClaimGoldenRequest.ts
new file mode 100644
index 00000000..2bae2f88
--- /dev/null
+++ b/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
diff --git a/frontend/src/models/nft/LoadBalanceRequest.ts b/frontend/src/models/nft/LoadBalanceRequest.ts
new file mode 100644
index 00000000..0503f55c
--- /dev/null
+++ b/frontend/src/models/nft/LoadBalanceRequest.ts
@@ -0,0 +1,8 @@
+import { WBANLPRewards } from "wban-nfts"
+
+type LoadBalanceRequest = {
+	contract: WBANLPRewards
+	account: string
+}
+
+export default LoadBalanceRequest
diff --git a/frontend/src/models/nft/NftData.ts b/frontend/src/models/nft/NftData.ts
new file mode 100644
index 00000000..554b05c8
--- /dev/null
+++ b/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
diff --git a/frontend/src/pages/NftRewards.vue b/frontend/src/pages/NftRewards.vue
new file mode 100644
index 00000000..b04e5101
--- /dev/null
+++ b/frontend/src/pages/NftRewards.vue
@@ -0,0 +1,267 @@
+<template>
+	<q-page>
+		<div class="q-pa-md">
+			<div class="row items-center">
+				<h6 class="subtitle justify-center offset-md-1">
+					<q-btn to="/" icon="arrow_back" text-color="primary" flat style="margin-top: -10px" />
+					Home
+				</h6>
+			</div>
+			<div v-if="missingForGolden !== 0" class="row justify-center q-pb-md">
+				<q-banner inline-actions rounded class="bg-primary text-secondary">
+					<span>You are missing only a single NFT in order to claim a golden one.</span>
+					<template v-slot:action>
+						<q-btn flat label="Buy" @click="buy(missingForGolden)" />
+					</template>
+				</q-banner>
+			</div>
+			<div v-if="claimableForGolden !== -1" class="row justify-center q-pb-md">
+				<q-banner inline-actions rounded class="bg-primary text-secondary">
+					<span>You have enough NFTs in order to claim a golden NFT.</span>
+					<template v-slot:action>
+						<q-btn flat label="Claim" @click="promptForGoldenNFT = true" />
+					</template>
+				</q-banner>
+			</div>
+			<div class="nfts row q-col-gutter-md justify-center">
+				<div class="col-4" v-for="[nftId, nftData] in nfts" :key="nftId">
+					<nft-reward :nftId="nftId" :data="nftData" />
+				</div>
+			</div>
+		</div>
+		<q-dialog v-model="promptForGoldenNFT" persistent>
+			<q-card class="claim-golden-nft-dialog">
+				<q-card-section>
+					<div class="text-h6">Claim Golden NFT</div>
+				</q-card-section>
+				<q-card-section>
+					<div class="row">
+						<p>
+							You have the required NFTs in order to claim a
+							<strong>Golden {{ nameForLevel(claimableForGolden) }}</strong> NFT.
+						</p>
+						<p>
+							Doing so will <strong>burn/destroy</strong> your three {{ nameForLevel(claimableForGolden) }} NFTs and
+							give you the Golden {{ nameForLevel(claimableForGolden) }} NFT instead.
+						</p>
+					</div>
+					<div class="row justify-center items-center">
+						<div class="col-3">
+							<q-avatar square class="fit">
+								<img :src="pictureOf(claimableForGolden)" />
+								<q-badge floating outline transparent color="secondary">
+									<q-icon name="whatshot" color="red" style="font-size: 15rem;" />
+								</q-badge>
+							</q-avatar>
+						</div>
+						<div class="col-1 text-center">
+							<q-icon name="add_circle_outline" color="positive" style="font-size: 2rem;" />
+						</div>
+						<div class="col-3">
+							<q-avatar square class="fit">
+								<img :src="pictureOf(10 + claimableForGolden)" />
+								<q-badge floating outline transparent color="secondary">
+									<q-icon name="whatshot" color="red" style="font-size: 15rem;" />
+								</q-badge>
+							</q-avatar>
+						</div>
+						<div class="col-1 text-center">
+							<q-icon name="add_circle_outline" color="positive" style="font-size: 2rem;" />
+						</div>
+						<div class="col-3">
+							<q-avatar square class="fit">
+								<img :src="pictureOf(20 + claimableForGolden)" />
+								<q-badge floating outline transparent color="secondary">
+									<q-icon name="whatshot" color="red" style="font-size: 15rem;" />
+								</q-badge>
+							</q-avatar>
+						</div>
+					</div>
+					<div class="row justify-center" style="padding-top: 20px">
+						<div class="col-auto">
+							<q-icon name="arrow_downward" color="positive" style="font-size: 2rem;" />
+						</div>
+					</div>
+					<div class="row justify-center">
+						<div class="col-3">
+							<q-avatar square class="fit">
+								<img :src="pictureOf(100 + claimableForGolden)" />
+							</q-avatar>
+						</div>
+					</div>
+				</q-card-section>
+				<q-card-actions align="right">
+					<q-btn flat label="Cancel" color="primary" v-close-popup />
+					<q-btn
+						@click="claim(claimableForGolden)"
+						color="primary"
+						text-color="secondary"
+						label="Claim"
+						v-close-popup
+					/>
+				</q-card-actions>
+			</q-card>
+		</q-dialog>
+	</q-page>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import NftReward from '@/components/nft/NftReward.vue'
+import NftPicture from '@/components/nft/NftPicture.vue'
+import NftData from '@/models/nft/NftData'
+import nft from '@/store/modules/nft'
+import accounts from '@/store/modules/accounts'
+import { WBANLPRewards } from 'wban-nfts'
+import { ethers } from 'ethers'
+import { openURL } from 'quasar'
+
+const nftStore = namespace('nft')
+const accountsStore = namespace('accounts')
+
+@Component({
+	components: {
+		NftReward,
+		NftPicture
+	}
+})
+export default class NftRewardsPage extends Vue {
+	@nftStore.Getter('nfts')
+	nfts!: Map<string, NftData>
+
+	@nftStore.Getter('rewardsContract')
+	rewardsContract!: WBANLPRewards
+
+	@accountsStore.State('activeAccount')
+	activeAccount!: string
+
+	@accountsStore.Getter('providerEthers')
+	provider!: ethers.providers.JsonRpcProvider | null
+
+	missingForGolden = 0
+	claimableForGolden = -1
+	promptForGoldenNFT = false
+
+	buy(nftId: number) {
+		openURL(`${NftReward.NFT_OPENSEA_URL}/${NftReward.NFT_REWARDS_CONTRACT}/${nftId}`)
+	}
+
+	nameForLevel(level: number): string {
+		switch (level) {
+			case 0:
+				return 'Shrimp'
+			case 1:
+				return 'Shark'
+			case 2:
+				return 'Whale'
+		}
+		return '???'
+	}
+
+	pictureOf(nftId: number): string {
+		console.debug(`Computing picture uri for ${nftId}`)
+		const nftData = this.nfts.get(nftId.toString())
+		// console.debug(nftData)
+		if (nftData) {
+			console.debug(`URI for ${nftId} is ${nftData.image}`)
+			return nftData.image
+		} else {
+			console.warn(`Can't find picture for ${nftId}`)
+			return ''
+		}
+	}
+
+	/**
+	 * Returns the first nftId missing to get a complete required serie for claiming a golden NFT
+	 */
+	computeFirstMissingNft(): number {
+		const balances: Map<number, number> = new Map()
+		this.nfts.forEach((nft: NftData, key: string) => {
+			if (nft.balance > 0) {
+				balances.set(Number.parseInt(key), nft.balance)
+			}
+		})
+		console.debug(balances)
+		const levels = [0, 1, 2]
+		const missingNfts = levels
+			.map(level => {
+				// missing wBAN staking NFT?
+				if (!balances.has(0 + level) && balances.has(10 + level) && balances.has(20 + level)) {
+					return 0 + level
+				}
+				// missing wBAN-BNB NFT?
+				if (balances.has(0 + level) && !balances.has(10 + level) && balances.has(20 + level)) {
+					return 10 + level
+				}
+				// missing wBAN-BUSD NFT?
+				if (balances.has(0 + level) && balances.has(10 + level) && !balances.has(20 + level)) {
+					return 20 + level
+				}
+			})
+			.filter(level => level !== undefined)
+		if (missingNfts.length > 0 && missingNfts[0] !== undefined) {
+			return missingNfts[0]
+		} else {
+			return 0
+		}
+	}
+
+	/**
+	 * Returns the level of a serie which can be used in order to claim a golden NFT.
+	 * If none are eligible, returns -1.
+	 */
+	canClaimGoldenNft(): number {
+		const balances: Map<number, number> = new Map()
+		this.nfts.forEach((nft: NftData, key: string) => {
+			if (nft.balance > 0) {
+				balances.set(Number.parseInt(key), nft.balance)
+			}
+		})
+		const levels = [0, 1, 2]
+		const claimableLevels = levels.filter(
+			level => balances.has(0 + level) && balances.has(10 + level) && balances.has(20 + level)
+		)
+		if (claimableLevels.length > 0 && claimableLevels[0] !== undefined) {
+			return claimableLevels[0]
+		} else {
+			return -1
+		}
+	}
+
+	async claim(level: number) {
+		await nft.claimGoldenNFT({
+			contract: this.rewardsContract,
+			account: this.activeAccount,
+			level: level
+		})
+	}
+
+	async mounted() {
+		await accounts.initWalletProvider()
+		await nft.initContract(this.provider)
+		await nft.loadNFTs({
+			contract: this.rewardsContract,
+			account: this.activeAccount
+		})
+		// check if there is a single NFT missing in order to claim a golden one
+		this.missingForGolden = this.computeFirstMissingNft()
+		this.claimableForGolden = this.canClaimGoldenNft()
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.nft-banner, .nfts
+	max-width: 1000px
+	margin-left: auto
+	margin-right: auto
+
+@media (min-width: 1000px)
+	.claim-golden-nft-dialog
+		min-width: 1000px
+
+.vertical-center
+	margin-top: auto
+	margin-bottom: auto
+</style>
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index dc910686..15ca97c4 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -31,6 +31,12 @@ const routes: RouteConfig[] = [
 		children: [{ path: '', component: () => import('@/pages/About.vue') }]
 	},
 
+	{
+		path: '/nft',
+		component: () => import('@/layouts/MainLayout.vue'),
+		children: [{ path: '', component: () => import('@/pages/NftRewards.vue') }]
+	},
+
 	// Always leave this as last one,
 	// but you can also remove it
 	{
diff --git a/frontend/src/store/modules/nft.ts b/frontend/src/store/modules/nft.ts
new file mode 100644
index 00000000..f92e72ad
--- /dev/null
+++ b/frontend/src/store/modules/nft.ts
@@ -0,0 +1,129 @@
+import { getModule, VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
+import { namespace } from 'vuex-class'
+import { BindingHelpers } from 'vuex-class/lib/bindings'
+import store from '@/store'
+// eslint-disable-next-line @typescript-eslint/camelcase
+import { WBANLPRewards, WBANLPRewards__factory } from 'wban-nfts'
+import NftData from '@/models/nft/NftData'
+import LoadBalanceRequest from '@/models/nft/LoadBalanceRequest'
+import ClaimGoldenRequest from '@/models/nft/ClaimGoldenRequest'
+import { ethers } from 'ethers'
+import { fetchJson } from 'ethers/lib/utils'
+
+@Module({
+	namespaced: true,
+	name: 'nft',
+	store,
+	dynamic: true
+})
+class NftModule extends VuexModule {
+	private _rewards: WBANLPRewards | null = null
+	private _uri = ''
+	private _nfts: Map<string, NftData> = new Map()
+
+	static NFT_IDS = [0, 1, 2, 10, 11, 12, 20, 21, 22, 100, 101, 102]
+	static NFT_REWARDS_CONTRACT: string = process.env.VUE_APP_NFT_REWARDS_CONTRACT || ''
+	static NFT_OPENSEA_URL: string = process.env.VUE_APP_NFT_OPENSEA_URL || ''
+
+	get rewardsContract() {
+		return this._rewards
+	}
+
+	get uri() {
+		return this._uri
+	}
+
+	get nfts() {
+		return this._nfts
+	}
+
+	@Mutation
+	setRewardsContract(contract: WBANLPRewards) {
+		this._rewards = contract
+	}
+
+	@Mutation
+	setUri(uri: string) {
+		this._uri = uri
+	}
+
+	@Mutation
+	setNfts(nfts: Map<string, NftData>) {
+		this._nfts = nfts
+	}
+
+	@Action
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	async initContract(provider: any) {
+		console.debug('in initContract')
+		if (provider) {
+			// do not initialize contract if this was done earlier
+			if (!this._rewards) {
+				// eslint-disable-next-line @typescript-eslint/camelcase
+				const contract = WBANLPRewards__factory.connect(NftModule.NFT_REWARDS_CONTRACT, provider.getSigner())
+				this.context.commit('setRewardsContract', contract)
+			} else {
+				console.warn('Already initialized')
+			}
+			// at this point the contract should be initialized
+			if (!this._rewards) {
+				console.error('Smart-contract client not initialized')
+				return
+			}
+			// fetch metadata URI for images
+			this.context.commit('setUri', await this._rewards.uri(0))
+		}
+	}
+
+	@Action
+	async loadNFTs(request: LoadBalanceRequest) {
+		const { contract, account } = request
+		console.debug(`in loadNFTs for ${account}`)
+		// load NFT balances
+		const balances = await contract.balanceOfBatch(
+			[account, account, account, account, account, account, account, account, account, account, account, account],
+			NftModule.NFT_IDS
+		)
+		console.debug(`Balances of ${account} are ${balances}`)
+		// load NFT data
+		const uriTemplate = this._uri.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/')
+		const nfts: Map<string, NftData> = new Map()
+		for (let index = 0; index < NftModule.NFT_IDS.length; index++) {
+			const balance: number = balances[index].toNumber()
+			const nftId = NftModule.NFT_IDS[index].toString()
+			const metadataUri = uriTemplate.replace(
+				'{id}',
+				ethers.utils.hexZeroPad(`0x${NftModule.NFT_IDS[index].toString(16)}`, 32).substring(2)
+			)
+			//console.debug(`Metadata URI is: ${metadataUri}`)
+			const metadata = await fetchJson(metadataUri)
+			//console.debug(metadata)
+			const name = metadata.name
+			const description = metadata.description
+			const cid = metadata.image.substring('ipfs://'.length)
+			const uri = `https://cloudflare-ipfs.com/ipfs/${cid}`
+			nfts.set(nftId.toString(), {
+				id: nftId,
+				name,
+				description,
+				image: uri,
+				balance
+			})
+		}
+		this.context.commit('setNfts', nfts)
+	}
+
+	@Action
+	async claimGoldenNFT(request: ClaimGoldenRequest) {
+		const { contract, account, level } = request
+		const txn = await contract.claimGoldenNFT(level)
+		await txn.wait()
+		await this.loadNFTs({
+			contract,
+			account
+		})
+	}
+}
+
+export default getModule(NftModule)
+export const Contracts: BindingHelpers = namespace('nft')
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 54aface6..ce690640 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -10693,6 +10693,11 @@ watchpack@^1.7.4:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"
 
+wban-nfts@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/wban-nfts/-/wban-nfts-0.2.0.tgz#59726ffdcd3c133525c4f8d18fe47ead595527fa"
+  integrity sha512-tcz85CV/c/bQnj0GswZINXORwCybJZuqOWDp0GZRBbvBwVTGdoWB2Pg9LjGjMfe+wlQtnd06rH9tbU0vQ7TINw==
+
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.npm.taobao.org/wbuf/download/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"