separb beta

src/components/Vault.vue

@@ -1,27 +1,4 @@
 <template>
-  <!-- todo we can use something like this for ethereum where the vault creation is too expensive to subsidize
-    <PhoneCard v-if="s.vault===null || s.vault.length === 0">
-      <v-card-title><v-icon color="warning" icon="mdi-safe-square-outline"/>&nbsp;Setup&nbsp;Vault</v-card-title>
-      <v-card-subtitle>Create Your Own Personal Dexorder Vault</v-card-subtitle>
-      <v-card-text>
-        Dexorder never has access to your tokens. Instead, you create a personal
-        vault which acts like your Dexorder account.
-        Create your own personal asset vault to get started with Dexorder. This vault
-        acts like your Dexorder account. For security, only <i>you</i> can deposit
-        or withdraw tokens from your vault, and no token approvals are ever given to
-        Dexorder. Instead, Dexorder sends trade requests to your vault at the right
-        times, then your vault checks the validity of those trade requests before
-        trading directly from your vault to the dex liquidity pool. Dexorder never
-        has any access to the funds in your vault.
-      </v-card-text>
-      <v-card-text>
-        Creating your personal vault is a one-time setup operation. Your vault address
-        is unique to you and never changes. You may deposit or withdraw funds in your
-        vault at any time, and you may save your vault address in your wallet for
-        easy access.
-      </v-card-text>
-    </PhoneCard>
-  -->
   <div>
     <div v-if="!hasVault">
       <v-card-title>
@@ -29,35 +6,26 @@
         <v-icon icon="mdi-safe-square" size="small" color="grey-darken-1" style="vertical-align: baseline"/>
       </v-card-title>
       <v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
-      <!-- todo restore the vault-on-order approach for public beta
-            <v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
-            <v-card-actions><v-btn prepend-icon="mdi-plus" text="Create Order" @click="$router.push('/twap')"/></v-card-actions>
-      -->
-      <!--  User-actioned but dexorder executed
-            <v-card-text v-if="num===0">
-              Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
-              conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
-              asking your vault to the order. Your vault then checks that order against the
-              current blockchain time and pool price, and only trades if everything looks good.
-
-              Start placing dexorders by clicking the button below to create your own personal Vault!
-            </v-card-text>
-            <v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
-      -->
       <v-card-text v-if="num===0">
         Please wait while your vault is being created. This should only take a few seconds...
       </v-card-text>
     </div>
-    <div v-if="hasVault" :class="empty?'maxw':''">
+    <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;-->
 
-<!-- todo re-enable deposit address
-      <v-card-subtitle v-if="exists" class="overflow-x-hidden">
+      <!-- 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">
         <!--
                 <p>
@@ -97,12 +65,13 @@
 
 <script setup>
 import {useStore} from "@/store/store.js";
-import {computed, defineAsyncComponent, ref} from "vue";
-import {vaultAddress} from "@/blockchain/contract.js";
-import {ensureVault} from "@/blockchain/wallet.js";
+import {computed, defineAsyncComponent, ref, watchEffect} from "vue";
+import {newContract, vaultAddress, vaultContract} 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";
 
 const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
 const s = useStore()
@@ -128,13 +97,30 @@ async function onWithdraw(addr) {
 }
 
 
+// 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 nativeBalance = computed(()=>{
+  if (!s.account) return -1n
+  getNativeBalance(s.account)
+  return _bal.value
+})
+
+
 function checkVault() {
   console.log('checkVault', props.num, s.account, s.vault)
   if(props.num===0 && s.account && !s.vault)
     ensureVault()
 }
 
-setTimeout(checkVault, 0)
+watchEffect(checkVault)
+checkVault()
 
 </script>