From 68d9a32b5cb3b011b720f83c46405b3ad21c1c4a Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Thu, 11 Jul 2024 00:50:54 -0400
Subject: [PATCH] separb beta

---
 .env-arbsep                    |  1 +
 src/blockchain/contract.js     |  5 +-
 src/blockchain/wallet.js       | 18 -------
 src/charts/jBars.js            |  2 +-
 src/components/Faucet.vue      |  5 +-
 src/components/NeedsSigner.vue | 88 +++++++++++-----------------------
 src/components/Vault.vue       | 78 +++++++++++++-----------------
 src/corp/AppBtn.vue            |  2 +-
 src/corp/MenuBar.vue           |  2 +-
 src/layouts/default/AppBar.vue |  2 +-
 src/store/store.js             |  1 -
 11 files changed, 74 insertions(+), 130 deletions(-)
 create mode 100644 .env-arbsep

diff --git a/.env-arbsep b/.env-arbsep
new file mode 100644
index 0000000..b3f4a15
--- /dev/null
+++ b/.env-arbsep
@@ -0,0 +1 @@
+VITE_WS_URL=wss://ws.beta.dexorder.trade
diff --git a/src/blockchain/contract.js b/src/blockchain/contract.js
index 7dac57a..b304090 100644
--- a/src/blockchain/contract.js
+++ b/src/blockchain/contract.js
@@ -1,5 +1,6 @@
 import {ethers} from "ethers";
 import {AbiURLCache} from "../common.js";
+import {provider as walletProvider} from "@/blockchain/wallet.js";
 
 export const abiCache = new AbiURLCache('/contract/out/')
 
@@ -39,6 +40,8 @@ export async function erc20Contract(addr, provider) {
 }
 
 
-export async function vaultContract(addr, provider) {
+export async function vaultContract(addr, provider=null) {
+    if (provider===null)
+        provider = walletProvider
     return await newContract(addr, 'IVault', provider)
 }
diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js
index bee12a3..f7a3296 100644
--- a/src/blockchain/wallet.js
+++ b/src/blockchain/wallet.js
@@ -167,24 +167,6 @@ export async function switchChain(chainId) {
 }
 
 
-export async function addTestnet() {
-  const info = {
-    "chainId": "0x539",
-    "chainName": "Dexorder Alpha Testnet",
-    "rpcUrls": ["https://rpc.alpha.dexorder.trade"],
-    "nativeCurrency": {
-      "name": "Test Ethereum",
-      "symbol": "TETH",
-      "decimals": 18
-    }
-  };
-  await window.ethereum.request({
-    "method": "wallet_addEthereumChain",
-    "params": [info]
-  });
-}
-
-
 function discoverVaults(owner) {
   const s = useStore()
   console.log('discoverVaults', owner)
diff --git a/src/charts/jBars.js b/src/charts/jBars.js
index 2649e0a..e729bbc 100644
--- a/src/charts/jBars.js
+++ b/src/charts/jBars.js
@@ -85,7 +85,7 @@ export async function jBars (symbol, contract, from, to, res) {
             const mo = String(iDate.getUTCMonth()+1).padStart(2, '0'); // January is month 0 in Date object
             const date = is_daily_res ? String(iDate.getUTCDate()).padStart(2, '0') : "";
             const yrmo = !is_single_res ? `-${yr}${mo}` : "";
-            let baseURL = "https://alpha.dexorder.trade/ohlc/"
+            let baseURL = "https://beta.dexorder.trade/ohlc/"
 
             let chainId = useStore().chainId
 
diff --git a/src/components/Faucet.vue b/src/components/Faucet.vue
index 4150acc..c10f5f6 100644
--- a/src/components/Faucet.vue
+++ b/src/components/Faucet.vue
@@ -16,7 +16,10 @@
         </tbody>
       </v-table>
 -->
-  <btn icon='mdi-plus' color="green" :disabled="!s.vault||disabled" @click="gib" :text="text"/>
+  <div class="w-100">
+    <btn icon='mdi-plus' color="green" :disabled="!s.vault||disabled" @click="gib" :text="text"/>
+    <v-card-text v-if="s.chainId===421614">Get Sepolia ETH from the <a href="https://www.alchemy.com/faucets/arbitrum-sepolia" target="arbsep_faucet">Arbitrum-Sepolia Faucet <v-icon size="x-small" icon="mdi-open-in-new"/></a></v-card-text>
+  </div>
 <!--    </v-card-item>-->
 <!--  </div>-->
 </template>
diff --git a/src/components/NeedsSigner.vue b/src/components/NeedsSigner.vue
index 3c68620..7778989 100644
--- a/src/components/NeedsSigner.vue
+++ b/src/components/NeedsSigner.vue
@@ -1,17 +1,18 @@
 <template>
-  <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
-  <v-card v-if="!loggedIn" rounded="0">
+  <slot v-if="status===Status.OK" v-bind="$props"/>
+  <v-card v-if="status!==Status.OK" rounded="0">
     <v-card-title>
 <!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
       Welcome to Dexorder Beta!
     </v-card-title>
     <v-card-text>
-      This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
+      This beta test uses mock coins on the Arbitrum Sepolia testnet.
     </v-card-text>
     <v-card-text>
-      Play with the order builder by clicking on the <logo class="logo-small"/> logo or on the <v-icon icon="mdi-chart-timeline-variant"/> button.
+      Play with the order builder without an account by clicking on the <logo class="logo-small"/> logo or on
+      the <v-icon icon="mdi-chart-timeline-variant"/> button.
     </v-card-text>
-    <div v-if="!pluginOk">
+    <div v-if="status===Status.NEEDS_PLUGIN">
       <v-card-text>
         A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
         required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
@@ -22,65 +23,44 @@
       </v-card-actions>
     </div>
 
-    <v-card-actions>
+    <div v-if="status===Status.NEEDS_NETWORK">
+      <v-card-text>
+        Please connect your wallet to the Arbitrum-Sepolia test network to continue.
+      </v-card-text>
+    </div>
+
+    <v-card-actions v-if="status>Status.NEEDS_PLUGIN">
       <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
            @click="connect" :disabled="disabled" text="Connect Wallet"/>
     </v-card-actions>
-    <div v-if="needsNetwork">
-      <v-card-text>
-        <table id="manualsetup">
-          <thead>
-          <tr><th colspan="4">Manual Setup</th></tr>
-          </thead>
-          <tbody>
-          <tr><td><b>Network Name:</b></td><td><copy-button text="Dexorder Alpha Testnet"/></td></tr>
-          <tr><td><b>New RPC URL:</b></td><td><copy-button text="https://rpc.alpha.dexorder.trade"/></td></tr>
-          <tr><td><b>Chain ID:</b></td><td><copy-button text="1337"/></td></tr>
-          <tr><td><b>Currency Symbol:</b></td><td><copy-button text="TETH"/></td></tr>
-          </tbody>
-        </table>
-<!--
-        <ul class="ml-6">
-          <li> Dexorder Alpha Testnet</li>
-          <li><b>New RPC URL:</b> </li>
-          <li><b>Chain ID:</b> 1337</li>
-          <li><b>Currency Symbol:</b> TETH</li>
-        </ul>
-        <ol class="ml-6">
-          <li>Open Metamask</li>
-          <li>Click in the upper-left to choose a Network</li>
-          <li>Click the "Add Network" button</li>
-          <li>Choose "Add a Network Manually"</li>
-          <li>Enter the following information:
-          </li>
-          <li>
-            Save the private test network
-          </li>
-          <li>
-            Open Metamask again and select the "Dexorder Alpha" blockchain for use with this website.
-          </li>
-        </ol>
--->
-      </v-card-text>
-    </div>
+
   </v-card>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
-import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
+import {connectWallet, switchChain} from "@/blockchain/wallet.js";
 import Btn from "@/components/Btn.vue";
 import CopyButton from "@/components/CopyButton.vue";
 import Logo from "@/components/Logo.vue";
 
 const s = useStore()
-const ws = useWalletStore()
-const pluginOk = window.ethereum !== undefined
-const loggedIn = computed(()=>s.account!==null)
-const needsNetwork = ref(false)
 const disabled = ref(false)
 
+const Status = {
+  NEEDS_PLUGIN: -3,
+  NEEDS_NETWORK: -2,
+  NEEDS_ACCOUNT: -1,
+  OK: 0,
+}
+
+const pluginOk = window.ethereum !== undefined
+const status = computed(() =>
+    !pluginOk ? Status.NEEDS_PLUGIN :
+    !s.chainInfo ? Status.NEEDS_NETWORK :
+    !s.account ? Status.NEEDS_ACCOUNT : Status.OK)
+
 function reload() {
   window.location.reload()
 }
@@ -92,17 +72,7 @@ async function connect() {
       await switchChain(s.chainId)
     }
     catch (e) {
-      if (e.code===4902) {
-        try {
-          await addTestnet()
-          needsNetwork.value = false
-        }
-        catch (e) {
-          needsNetwork.value = true
-          return
-        }
-      }
-      else if (e.code===4001) {
+      if (e.code===4001) {
         // explicit user rejection
         return
       }
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index 44ad2e8..50b72e5 100644
--- a/src/components/Vault.vue
+++ b/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>
 
diff --git a/src/corp/AppBtn.vue b/src/corp/AppBtn.vue
index bdca0f4..8497036 100644
--- a/src/corp/AppBtn.vue
+++ b/src/corp/AppBtn.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 function openApp() {
-  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+  window.open('https://beta.dexorder.trade/', 'dexorderapp')
 }
 </script>
 
diff --git a/src/corp/MenuBar.vue b/src/corp/MenuBar.vue
index 6de7400..d3fca9d 100644
--- a/src/corp/MenuBar.vue
+++ b/src/corp/MenuBar.vue
@@ -20,7 +20,7 @@ import {nav} from "@/misc.js";
 const theme = useTheme().current
 
 function openApp() {
-  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+  window.open('https://beta.dexorder.trade/', 'dexorderapp')
 }
 </script>
 
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index f1e410d..46ac0dc 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -6,7 +6,7 @@
         <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
         <span class="clickable">dexorder</span>
       </span>
-      <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
+      <v-chip text="BETA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
 
     <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="route('Assets')"></v-btn>
diff --git a/src/store/store.js b/src/store/store.js
index c949280..153b733 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -82,7 +82,6 @@ export const useStore = defineStore('app', ()=> {
     set(v) {_chainInfo.value=v}
   })
   const chain = computed(() => !_chainId.value ? null : (_chainInfo.value[_chainId.value] || null))
-  // this provider is for the app's chainId not the wallet's chainId.
   const providerRef = ref(null)
   const provider = computed(()=>providerRef.value)
   const vaultInitCodeHash = computed(() => !chain.value ? null : chain.value.vaultInitCodeHash)