native coin handling

src/components/NativeRow.vue

@@ -0,0 +1,46 @@
+<!-- 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>