.

src/views/HomeView.vue

@@ -3,26 +3,49 @@
         <ElCard shadow="never">
             <div class="text-sm flex flex-col items-center">
                 <div class="flex items-center">
-                    ETH
+                    Mainnet
                     <ElIcon class="ml-2 mr-2">
                         <ArrowNarrowRight />
                     </ElIcon>
-                    zkSync
-                    <ElInput class="ml-2 !w-20" size="small" v-model="depositeAmount" />
-                    <ElButton type="primary" class="ml-2" @click="zkDeposite" :loading="depositing">官方</ElButton>
+                    zkSync Era
+                    <ElInput class="ml-2 !w-20" v-model="depositAmount" />
+                    <ElButton type="primary" class="ml-2" @click="zkDeposit" :loading="depositing">官方</ElButton>
                     <ElButton type="primary" class="ml-2" :loading="depositing">Orbiter</ElButton>
                 </div>
 
                 <div class="flex items-center mt-4">
-                    zkSync
+                    zkSync Era
                     <ElIcon class="ml-2 mr-2">
                         <ArrowNarrowRight />
                     </ElIcon>
-                    ETH
-                    <ElInput class="ml-2 !w-20" size="small" v-model="widthdrawAmount" />
+                    Mainnet
+                    <ElInput class="ml-2 !w-20" v-model="widthdrawAmount" />
                     <ElButton type="primary" class="ml-2" @click="zkWidthdraw" :loading="widthdrawing">官方</ElButton>
                     <ElButton type="primary" class="ml-2" :loading="widthdrawing">Orbiter</ElButton>
                 </div>
+                <div class="flex items-center mt-4">
+                    ETH
+                    <ElIcon class="ml-2 mr-2">
+                        <ArrowsRightLeft />
+                    </ElIcon>
+                    USDC
+                    <ElInput class="ml-2 !w-20" v-model="liquidityAmount" />
+                    <ElButton class="ml-2" type="primary" @click="addLiquidity" :loading="addingLiquidity">
+                        增加流动性
+                    </ElButton>
+                    <ElButton class="ml-2" type="primary" @click="removeLiquidity" :loading="addingLiquidity">
+                        移除流动性
+                    </ElButton>
+                </div>
+                <div class="flex items-center mt-4">
+                    ETH
+                    <ElIcon class="ml-2 mr-2">
+                        <ArrowNarrowRight />
+                    </ElIcon>
+                    <ElInput class="!w-20 mr-2" v-model="exactOutAmount" />
+                    USDC
+                    <ElButton class="ml-2" type="primary" @click="swapExactOut" :loading="swaping"> SWAP </ElButton>
+                </div>
             </div>
         </ElCard>
 
@@ -73,7 +96,7 @@ import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { http } from '@/plugins/http'
 import { ethers, Wallet } from 'ethers'
-import { Copy, ArrowNarrowRight } from '@vicons/tabler'
+import { Copy, ArrowNarrowRight, ArrowsRightLeft } from '@vicons/tabler'
 import { useClipboard, useFileDialog } from '@vueuse/core'
 
 const accounts = ref([])
@@ -194,24 +217,24 @@ async function deleteAccount(account) {
         if ('cancel' !== error) ElMessage.error(error.message)
     }
 }
-const depositeAmount = ref('')
+const depositAmount = ref('')
 const widthdrawAmount = ref('')
 const depositing = ref(false)
 const widthdrawing = ref(false)
-async function zkDeposite() {
+async function zkDeposit() {
     if (table.value.getSelectionRows().length === 0) {
         ElMessage.error('请选择账号')
         return
     }
-    if (!depositeAmount.value) {
+    if (!depositAmount.value) {
         ElMessage.error('请输入金额')
         return
     }
     depositing.value = true
     try {
         console.log(table.value.getSelectionRows())
-        await http.post('/web3/zk-deposite', {
-            amount: depositeAmount.value,
+        await http.post('/web3/zk-deposit', {
+            amount: depositAmount.value,
             accountId: table.value.getSelectionRows()[0].id
         })
         ElMessage.success('成功')
@@ -244,4 +267,74 @@ async function zkWidthdraw() {
         ElMessage.error(error.message)
     }
 }
+const addingLiquidity = ref(false)
+const liquidityAmount = ref('')
+async function addLiquidity() {
+    if (table.value.getSelectionRows().length === 0) {
+        ElMessage.error('请选择账号')
+        return
+    }
+    if (!liquidityAmount.value) {
+        ElMessage.error('请输入金额')
+        return
+    }
+    addingLiquidity.value = true
+    try {
+        console.log(table.value.getSelectionRows())
+        await http.post('/web3/add-liquidity', {
+            accountId: table.value.getSelectionRows()[0].id,
+            amount: liquidityAmount.value
+        })
+        ElMessage.success('成功')
+        addingLiquidity.value = false
+    } catch (error) {
+        addingLiquidity.value = false
+        ElMessage.error(error.message)
+    }
+}
+
+async function removeLiquidity() {
+    if (table.value.getSelectionRows().length === 0) {
+        ElMessage.error('请选择账号')
+        return
+    }
+    addingLiquidity.value = true
+    try {
+        console.log(table.value.getSelectionRows())
+        await http.post('/web3/remove-liquidity', {
+            accountId: table.value.getSelectionRows()[0].id
+        })
+        ElMessage.success('成功')
+        addingLiquidity.value = false
+    } catch (error) {
+        addingLiquidity.value = false
+        ElMessage.error(error.message)
+    }
+}
+
+const exactOutAmount = ref('')
+const swaping = ref(false)
+function swapExactOut() {
+    if (table.value.getSelectionRows().length === 0) {
+        ElMessage.error('请选择账号')
+        return
+    }
+    if (!exactOutAmount.value) {
+        ElMessage.error('请输入金额')
+        return
+    }
+    swaping.value = true
+    http.post('/web3/swap-exact-out', {
+        accountId: table.value.getSelectionRows()[0].id,
+        amount: exactOutAmount.value
+    })
+        .then(() => {
+            ElMessage.success('成功')
+            swaping.value = false
+        })
+        .catch((e) => {
+            swaping.value = false
+            ElMessage.error(e.message)
+        })
+}
 </script>