<template>
  <phone-card v-if="s.mockenv && s.vault" class="maxw">
    <v-card-title><v-icon icon="mdi-faucet"/>&nbsp;Testnet Faucet</v-card-title>
    <v-card-text>The Dexorder testnet faucet will send 1 TETH (Testnet ETH) to your account, plus 10 MEH (Mock Ethernet Hardfork) and 10,000 USXD (Joke Currency XD) to your vault.</v-card-text>
    <v-card-text>Click below to get free test tokens: </v-card-text>
    <v-card-item>
<!--
      <v-table plain>
        <tbody>
        <tr v-for="token of tokens">
          <td><v-btn prepend-icon='mdi-plus' :text="'Gib '+token.symbol" @click="gib(token)" class="my-3" variant="outlined"/></td>
          <td>{{token.name}}</td>
        </tr>
        </tbody>
      </v-table>
-->
      <btn icon='mdi-plus' color="green" :disabled="disabled" @click="gib">GIB!</btn>
    </v-card-item>
  </phone-card>
</template>

<script setup>
import {useStore} from "@/store/store";
import PhoneCard from "@/components/PhoneCard.vue";
import {ethers} from "ethers";
import {computed, ref} from "vue";
import {pendTransaction} from "@/blockchain/wallet.js";
import {mockErc20Abi} from "@/blockchain/abi.js";
import Btn from "@/components/Btn.vue";
import {socket} from "@/socket.js";

const s = useStore()

/*
function gib(token) {
  const tokenAddr = token.address
  const vault = s.vault
  const amount = 1_000_000n * 10n ** BigInt(token.decimals);
  async function send(signer) {
    return await new ethers.Contract(tokenAddr, mockErc20Abi, signer).mint(vault, amount);
  }
  pendTransaction(send)
}
*/

const disabled = ref(false)

function gib() {
  const s = useStore()
  if( s.account ) {
    disabled.value = true
    socket.emit('faucet', s.chainId.value, s.account)
    setTimeout(()=>disabled.value=false, 60*1000)
  }
}

const tokens = computed(()=>!s.mockCoins? [] : s.mockCoins.map((addr)=>s.tokens[addr]))

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;

</style>
