BAN withdrawal.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

frontend/src/components/ChainInfo.vue

@@ -22,7 +22,7 @@
 						</q-btn>
 					</div>
 					<div class="col-3">
-						<q-btn color="primary" stack>
+						<q-btn @click="withdrawBAN" :disable="withdrawalDisabled" color="primary" stack>
 							<q-icon name="img:ban-withdraw.svg" size="3em" />
 							<div class="text-button">Withdraw BAN</div>
 							<q-tooltip content-class="bg-positive">Withdraw BAN back to your wallet</q-tooltip>
@@ -106,12 +106,15 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
+import { openURL } from 'quasar'
 import SwapInput from '@/components/SwapInput.vue'
 import { bnToStringFilter } from '@/utils/filters.ts'
 import ban from '@/store/modules/ban'
 import accounts from '@/store/modules/accounts'
 import contracts from '@/store/modules/contracts'
 import backend from '@/store/modules/backend'
+import WithdrawRequest from '@/models/WithdrawRequest'
+import WithdrawResponse from '@/models/WithdrawResponse'
 import { WBANToken } from '../../../artifacts/typechain/WBANToken'
 import { BigNumber, ethers } from 'ethers'
 import { getAddress } from '@ethersproject/address'
@@ -173,10 +176,46 @@ export default class ChainInfo extends Vue {
 		}
 	}
 
+	get withdrawalDisabled() {
+		return !this.banBalance.gt(BigNumber.from(0))
+	}
+
 	async depositBAN() {
 		this.promptForBanDeposit = true
 	}
 
+	async withdrawBAN() {
+		console.log('Should withdraw ban')
+		if (accounts.activeAccount) {
+			// this.bar.start()
+
+			const resp: WithdrawResponse = await backend.withdrawBAN({
+				amount: Number.parseInt(ethers.utils.formatEther(this.banBalance)),
+				banAddress: ban.banAddress,
+				bscAddress: accounts.activeAccount,
+				provider: accounts.providerEthers
+			} as WithdrawRequest)
+			this.$q.notify({
+				type: 'positive',
+				html: true,
+				message: `View transaction on <a href="https://creeper.banano.cc/explorer/block/${resp.transaction}">Banano Explorer</a>`,
+				caption: `Transaction ${resp.transaction}`,
+				actions: [
+					{
+						label: 'View',
+						color: 'white',
+						handler: () => {
+							openURL(`https://creeper.banano.cc/explorer/block/${resp.transaction}`)
+						}
+					}
+				]
+			})
+
+			this.$emit('withdrawal')
+			// this.bar.stop()
+		}
+	}
+
 	async depositBNB() {
 		console.log('in depositBNB')
 		const contract: WBANToken | null = contracts.wbanContract
@@ -254,6 +293,7 @@ export default class ChainInfo extends Vue {
 			console.error(err)
 		}
 		document.addEventListener('deposit-ban', this.depositBAN)
+		document.addEventListener('withdraw-ban', this.withdrawBAN)
 		document.addEventListener('deposit-bnb', this.depositBNB)
 		document.addEventListener('reload-balances', this.reloadBalances)
 	}

frontend/src/layouts/MainLayout.vue

@@ -72,7 +72,7 @@
 					<q-separator vertical inset />
 					<q-item-section>Deposit BAN</q-item-section>
 				</q-item>
-				<q-item clickable v-ripple>
+				<q-item clickable v-ripple @click="withdrawBAN">
 					<q-item-section avatar>
 						<q-icon name="img:ban-withdraw.svg" size="3em" />
 					</q-item-section>
@@ -193,6 +193,11 @@ export default class MainLayout extends Vue {
 		this.drawerOpened = false
 	}
 
+	withdrawBAN() {
+		document.dispatchEvent(new CustomEvent('withdraw-ban'))
+		this.drawerOpened = false
+	}
+
 	depositBNB() {
 		document.dispatchEvent(new CustomEvent('deposit-bnb'))
 		this.drawerOpened = false

frontend/src/models/WithdrawRequest.ts

@@ -0,0 +1,10 @@
+import { BigNumber } from "ethers"
+
+type WithdrawRequest = {
+	amount: number,
+	banAddress: string,
+	bscAddress: string,
+	provider: any
+}
+
+export default WithdrawRequest

frontend/src/models/WithdrawResponse.ts

@@ -0,0 +1,7 @@
+type WithdrawResponse = {
+	message: string,
+	transaction: string
+	link: string
+}
+
+export default WithdrawResponse

frontend/src/store/modules/backend.ts

@@ -5,6 +5,8 @@ import { BigNumber } from 'ethers'
 import ClaimRequest from '@/models/ClaimRequest'
 import SwapRequest from '@/models/SwapRequest'
 import SwapResponse from '@/models/SwapResponse'
+import WithdrawRequest from '@/models/WithdrawRequest'
+import WithdrawResponse from '@/models/WithdrawResponse'
 import { ClaimResponse } from '@/models/ClaimResponse'
 
 @Module({
@@ -236,6 +238,54 @@ class BackendModule extends VuexModule {
 			link: ''
 		}
 	}
+
+	@Action
+	async withdrawBAN(withdrawRequest: WithdrawRequest): Promise<WithdrawResponse> {
+		const { amount, banAddress, bscAddress, provider } = withdrawRequest
+		console.info(`Should withdraw ${amount} BAN to ${banAddress}...`)
+		if (provider && amount && bscAddress) {
+			const sig = await provider.getSigner().signMessage(`Withdraw ${amount} BAN to my wallet "${banAddress}"`)
+			// call the backend for the swap
+			try {
+				const resp = await axios.post(`${BackendModule.BACKEND_URL}/withdrawals/ban`, {
+					ban: banAddress,
+					bsc: bscAddress,
+					amount: amount,
+					sig: sig
+				})
+				const result: SwapResponse = resp.data
+				this.context.commit('setInError', false)
+				this.context.commit('setErrorMessage', '')
+				this.context.commit('setErrorLink', '')
+				return result
+			} catch (err) {
+				this.context.commit('setInError', true)
+				if (err.response) {
+					const response: AxiosResponse = err.response
+					const error = response.data
+					switch (response.status) {
+						case 409:
+							this.context.commit('setErrorMessage', error.error)
+							this.context.commit('setErrorLink', error.link)
+							break
+						default:
+							this.context.commit('setErrorMessage', err)
+							this.context.commit('setErrorLink', '')
+							break
+					}
+				} else {
+					this.context.commit('setErrorMessage', err)
+					this.context.commit('setErrorLink', '')
+				}
+				throw err
+			}
+		}
+		return {
+			message: '',
+			transaction: '',
+			link: ''
+		}
+	}
 }
 
 export default getModule(BackendModule)