withdrawls

src/components/TokenRow.vue

@@ -1,10 +1,24 @@
 <template>
   <tr>
-    <td><v-img v-if="imageSrc" :src="imageSrc"/></td>
-    <td>{{token.symbol}}</td>
-    <td class="d-none d-sm-table-cell">{{token.name||''}}</td>
-    <td>{{fixed}}</td>
-    <td><!-- todo actions --></td>
+    <td>
+      <v-avatar v-if="imageSrc" :image="imageSrc"/>
+    </td>
+    <td class="d-none d-sm-table-cell">{{ token.name || '' }}</td>
+    <td class="text-right">{{ fixed }}</td>
+    <td class="text-left">{{ token.symbol }}</td>
+    <!-- todo price and value columns -->
+    <td>
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn variant="plain" v-bind="props" icon="mdi-menu"/> <!-- mdi-dots-vertical -->
+        </template>
+        <v-list>
+          <v-list-subheader :title="token.symbol"/>
+          <v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold"
+          @click="()=>onWithdraw(token.address)"/>
+        </v-list>
+      </v-menu>
+    </td>
   </tr>
 </template>
 
@@ -12,13 +26,17 @@
 import {useStore} from "@/store/store";
 import {getToken} from "@/blockchain/token.js";
 import {FixedNumber} from "ethers";
-import {computed} from "vue";
+import {computed, ref} from "vue";
+
 const s = useStore()
-const props = defineProps(['addr','amount'])
+const props = defineProps(['addr', 'amount', 'onWithdraw'])
 const token = await getToken(props.addr)
-console.log('token', props.addr, token)
-const fixed = computed(()=>FixedNumber.fromValue(props.amount, token.decimals, {width:256, decimals: token.decimals}))
-const imageSrc = computed(()=>null )
+const fixed = computed(() => FixedNumber.fromValue(props.amount, token.decimals, {
+  width: 256,
+  decimals: token.decimals
+}))
+const imageSrc = computed(() => null)
+const withdrawing = ref(false)
 </script>
 
 <style scoped lang="scss">