<!-- like TokenRow but for native currency -->
<template>
  <tr>
    <td>
      <v-avatar image="/media/ethereum-eth-logo-diamond-purple-64.png" size="x-small"/>
    </td>
    <td class="d-none d-sm-table-cell">Ether
      <small v-if="amount!==0n">
        <v-icon icon="mdi-alert" color="warning" size="x-small"/>
        Must <a @click="onWrap" class="clickable">wrap</a> before trading
        <v-icon icon="mdi-alert" color="warning" size="x-small"/>
      </small>
    </td>
    <td class="text-right">{{ fixed }}</td>
    <td class="text-left">ETH</td>
    <!-- todo price and value columns -->
    <td>
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
        </template>
        <v-list>
          <v-list-subheader title="ETH"/>
          <v-list-item title="Wrap" key="wrap" value="wrap" prepend-icon="mdi-location-enter" @click="onWrap"/>
          <v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold"
                       @click="onWithdraw"/>
        </v-list>
      </v-menu>
    </td>
  </tr>
</template>

<script setup>
import {useStore} from "@/store/store";
import {FixedNumber} from "ethers";
import {computed} from "vue";

const s = useStore()
const props = defineProps(['chainId', 'addr', 'amount', 'onWithdraw', 'onWrap'])
const fixed = computed(() => props.amount===null ? '…' : FixedNumber.fromValue(props.amount, 18, {width: 256, decimals: 18}))
</script>

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

</style>
