native coin handling

src/components/Vault.vue

@@ -11,20 +11,15 @@
       </v-card-text>
     </div>
     <div v-if="hasVault">
-<!--      <v-card-title>-->
-<!--        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}-->
-<!--      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;-->
+<!--
+      <v-card-title>
+        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}
+      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;
+-->
 
-      <!-- todo re-enable Deposit address
       <v-card-subtitle class="overflow-x-hidden">
         <copy-button :text="addr">Deposit {{addr}}</copy-button>
       </v-card-subtitle>
-      -->
-
-      <v-alert v-if="s.chainId===421614 && nativeBalance===0n" type="warning" icon="mdi-alert"
-               text="Your wallet needs Sepolia ETH for gas to place orders. Use the Arbitrum-Sepolia faucet below."
-               rounded="0"
-      />
 
       <v-card-text v-if="empty">
         <!--
@@ -45,6 +40,10 @@
       <v-card-item v-if="!empty">
         <v-table>
           <tbody>
+          <suspense>
+            <native-row :chain-id="s.chainId" :addr="s.vault" :amount="nativeBalance"
+                        :on-withdraw="onWithdrawNative" :on-wrap="()=>wrapShow=true"/>
+          </suspense>
           <suspense v-for="(amount,addr) of balances">
             <token-row :chain-id="s.chainId" :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
           </suspense>
@@ -53,6 +52,8 @@
       </v-card-item>
     </div>
     <withdraw :vault="addr" :token="withdrawToken" v-model="withdrawShow"/>
+    <withdraw-native :vault="addr" v-model="withdrawNativeShow" :balance="nativeBalance"/>
+    <native-wrap :vault="addr" v-model="wrapShow" :max-amount="nativeBalance"/>
   </div>
 <!--
     <div>
@@ -65,13 +66,15 @@
 
 <script setup>
 import {useStore} from "@/store/store.js";
-import {computed, defineAsyncComponent, ref, watchEffect} from "vue";
-import {newContract, vaultAddress, vaultContract} from "@/blockchain/contract.js";
+import {computed, defineAsyncComponent, onUnmounted, ref, watchEffect} from "vue";
+import {vaultAddress} from "@/blockchain/contract.js";
 import {ensureVault, provider} from "@/blockchain/wallet.js";
 import CopyButton from "@/components/CopyButton.vue";
 import Withdraw from "@/components/Withdraw.vue";
 import {getToken} from "@/blockchain/token.js";
-import {ethers} from "ethers";
+import NativeRow from "@/components/NativeRow.vue";
+import NativeWrap from "@/components/NativeWrap.vue";
+import WithdrawNative from "@/components/WithdrawNative.vue";
 
 const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
 const s = useStore()
@@ -84,7 +87,7 @@ const balances = computed(()=>{
   console.log('balances', addr.value, s.vaultBalances, bs)
   return bs || {}
 })
-const empty = computed(()=>Object.values(balances.value).length===0)
+const empty = computed(()=>Object.values(balances.value).length===0 && nativeBalance.value===0)
 const hasVault = computed(()=>s.vault!==null)
 
 const withdrawToken = ref(null)
@@ -96,21 +99,33 @@ async function onWithdraw(addr) {
   withdrawShow.value = true
 }
 
-
-// todo use balance from server
-const _bal = ref(-1n)
-async function getNativeBalance(addr) {
-  console.log('native balance of', addr)
-  const balance = await provider.getBalance(addr);
-  console.log('native balance', balance)
-  if (s.account===addr) // check that we haven't switched vaults
-    _bal.value = balance
+const withdrawNativeShow = ref(false)
+async function onWithdrawNative() {
+  withdrawNativeShow.value = true
 }
-const nativeBalance = computed(()=>{
-  if (!s.account) return -1n
-  getNativeBalance(s.account)
-  return _bal.value
-})
+
+const wrapShow = ref(false)
+
+const nativeBalance = ref(null)
+
+async function updateNativeBalance() {
+  // unfortunately there is no better way than polling, unless we start tracking in the backend. i assume the wallets
+  // cache this data anyway and are not actually polling their backends
+  if (provider) {
+    const s = useStore();
+    const vault = s.vault;
+    if (vault) {
+      const balance = await provider.getBalance(vault)
+      console.log('native balance', vault, balance)
+      if (s.vault===vault) // could have changed during async
+        nativeBalance.value = balance
+    }
+  }
+}
+
+updateNativeBalance()
+const timeout = setInterval(updateNativeBalance, 5000)
+onUnmounted(()=>clearInterval(timeout))
 
 
 function checkVault() {
@@ -122,6 +137,8 @@ function checkVault() {
 watchEffect(checkVault)
 checkVault()
 
+
+
 </script>
 
 <style scoped lang="scss">