transaction placement dialog

src/layouts/chart/ChartLayout.vue

@@ -1,12 +1,95 @@
 <template>
   <v-app>
     <main-view/>
+    <v-dialog v-model="showTransactionDialog" max-width="300">
+      <v-card :title="title">
+        <v-card-text v-if="description!==null">{{description}}</v-card-text>
+        <v-card-text>Confirm this {{noun}} in your wallet.</v-card-text>
+      </v-card>
+    </v-dialog>
   </v-app>
 </template>
 
 <script setup>
 import MainView from './MainView.vue'
 import {useStore} from "@/store/store.js";
+import {computed} from "vue";
+import {useWalletStore} from "@/blockchain/wallet.js";
+import {TransactionType} from "@/blockchain/transaction.js";
+import {FixedNumber} from "ethers";
 
 const s = useStore()
+const ws = useWalletStore()
+const showTransactionDialog = computed(()=>ws.transaction!==null)
+const title = computed(()=>{
+  switch (ws.transaction?.type) {
+    case TransactionType.PlaceOrder:
+      return "Placing Order"
+    case TransactionType.CancelOrder:
+      return "Canceling Order"
+    case TransactionType.CancelAll:
+      return "Cancel All Orders"
+    case TransactionType.Wrap:
+      return "Wrap"
+    case TransactionType.Unwrap:
+      return "Unwrap"
+    case TransactionType.WithdrawNative:
+    case TransactionType.Withdraw:
+      return "Withdraw"
+    default:
+      return null
+  }
+})
+
+const description = computed(()=>{
+  const tx = ws.transaction
+  switch (tx?.type) {
+    case TransactionType.PlaceOrder:
+      return describeOrder(tx.order)
+    case TransactionType.CancelOrder:
+      return null // todo fetch the order status and describe it
+    case TransactionType.CancelAll:
+      return null
+    case TransactionType.Wrap:
+      return `Wrap ${FixedNumber.fromValue(tx.amount,18)} ETH` // todo native token symbol and decimals
+    case TransactionType.Unwrap:
+      return `Unwrap ${FixedNumber.fromValue(tx.amount,18)} WETH` // todo wrapped token symbol and decimals
+    case TransactionType.WithdrawNative:
+      return `Withdraw ${FixedNumber.fromValue(tx.amount,18)} ETH` // todo native token symbol and decimals
+    case TransactionType.Withdraw:
+      return `Withdraw ${FixedNumber.fromValue(tx.amount,tx.token.d)} ${tx.token.s}`
+    default:
+      return null
+  }
+})
+
+
+const noun = computed(()=>{
+  const tx = ws.transaction
+  switch (tx?.type) {
+    case TransactionType.PlaceOrder:
+      return 'order'
+    case TransactionType.CancelOrder:
+      return 'cancelation'
+    case TransactionType.CancelAll:
+      return 'cancelation'
+    case TransactionType.Wrap:
+      return 'wrapping'
+    case TransactionType.Unwrap:
+      return 'unwrapping'
+    case TransactionType.WithdrawNative:
+      return 'withdrawal'
+    case TransactionType.Withdraw:
+      return 'withdrawal'
+    default:
+      return null
+  }
+})
+
+
+function describeOrder(order) {
+  return null // todo
+}
+
+
 </script>