Merge pull request #130 from rainlanguage/2024-01-23-gui-handle-withdraw

feat(tauri/ui): handle withdraw

crates/common/src/withdraw.rs

@@ -1,11 +1,11 @@
+use crate::{error::WritableTransactionExecuteError, transaction::TransactionArgs};
 use alloy_ethers_typecast::transaction::{WriteTransaction, WriteTransactionStatus};
 use alloy_primitives::{hex::FromHexError, Address, U256};
 use rain_orderbook_bindings::IOrderBookV3::withdrawCall;
+use serde::{Deserialize, Serialize};
 use std::convert::TryInto;
 
-use crate::{error::WritableTransactionExecuteError, transaction::TransactionArgs};
-
-#[derive(Clone)]
+#[derive(Clone, Deserialize, Serialize, Debug)]
 pub struct WithdrawArgs {
     pub token: String,
     pub vault_id: U256,

tauri-app/src-tauri/src/commands/vault.rs

@@ -1,6 +1,7 @@
 use crate::transaction_status::{SeriesPosition, TransactionStatusNoticeRwLock};
 use rain_orderbook_common::{
     deposit::DepositArgs, subgraph::SubgraphArgs, transaction::TransactionArgs,
+    withdraw::WithdrawArgs,
 };
 use rain_orderbook_subgraph_queries::types::{
     vault::TokenVault as VaultDetail, vaults::TokenVault as VaultsListItem,
@@ -54,7 +55,7 @@ pub async fn vault_deposit(
         })?;
 
     let tx_status_notice = TransactionStatusNoticeRwLock::new(
-        "Deposit tokens into Orderbook".into(),
+        "Deposit tokens into vault".into(),
         Some(SeriesPosition {
             position: 2,
             total: 2,
@@ -73,3 +74,25 @@ pub async fn vault_deposit(
 
     Ok(())
 }
+
+#[tauri::command]
+pub async fn vault_withdraw(
+    app_handle: AppHandle,
+    withdraw_args: WithdrawArgs,
+    transaction_args: TransactionArgs,
+) -> Result<(), String> {
+    let tx_status_notice =
+        TransactionStatusNoticeRwLock::new("Withdraw tokens from vault".into(), None);
+    withdraw_args
+        .execute(transaction_args.clone(), |status| {
+            tx_status_notice.update_status_and_emit(app_handle.clone(), status);
+        })
+        .await
+        .map_err(|e| {
+            let text = format!("{}", e);
+            tx_status_notice.set_failed_status_and_emit(app_handle.clone(), text.clone());
+            text
+        })?;
+
+    Ok(())
+}

tauri-app/src-tauri/src/main.rs

@@ -6,7 +6,7 @@ pub mod transaction_status;
 
 mod commands;
 use commands::chain::get_chainid;
-use commands::vault::{vault_deposit, vault_detail, vaults_list};
+use commands::vault::{vault_deposit, vault_detail, vault_withdraw, vaults_list};
 use commands::wallet::get_address_from_ledger;
 
 fn main() {
@@ -15,6 +15,7 @@ fn main() {
             vaults_list,
             vault_detail,
             vault_deposit,
+            vault_withdraw,
             get_address_from_ledger,
             get_chainid
         ])

tauri-app/src/lib/ModalVaultDeposit.svelte

@@ -2,7 +2,7 @@
   import { Button, Modal, Label, ButtonGroup, Spinner } from 'flowbite-svelte';
   import type { TokenVault } from '$lib/typeshare/vault';
   import InputTokenAmount from '$lib/InputTokenAmount.svelte';
-  import { vaultDeposit } from '$lib/stores/vaultDeposit';
+  import { vaultDeposit } from '$lib/utils/vaultDeposit';
 
   export let open = false;
   export let vault: TokenVault;
@@ -17,10 +17,10 @@
     open = false;
   }
 
-  async function deposit() {
+  async function execute() {
     isSubmitting = true;
     try {
-      await vaultDeposit.call(vault.vault.vault_id, vault.token.id, amountRaw);
+      await vaultDeposit(vault.vault.vault_id, vault.token.id, amountRaw);
       reset();
     } catch (e) {}
     isSubmitting = false;
@@ -84,7 +84,7 @@
   <svelte:fragment slot="footer">
     <div class="flex w-full justify-end space-x-4">
       <Button color="alternative" on:click={reset} disabled={isSubmitting}>Cancel</Button>
-      <Button on:click={deposit} disabled={!amountRaw || amountRaw === 0n || isSubmitting}>
+      <Button on:click={execute} disabled={!amountRaw || amountRaw === 0n || isSubmitting}>
         {#if isSubmitting}
           <Spinner class="mr-2 h-4 w-4" color="white" />
         {/if}

tauri-app/src/lib/ModalVaultWithdraw.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import { Button, Modal, Label, Helper } from 'flowbite-svelte';
+  import { Button, Modal, Label, Helper, Spinner } from 'flowbite-svelte';
   import type { TokenVault } from '$lib/typeshare/vault';
   import InputTokenAmount from './InputTokenAmount.svelte';
+  import { vaultWithdraw } from '$lib/utils/vaultWithdraw';
 
   export let open = false;
   export let vault: TokenVault;
   let amount: string = '';
   let amountRaw: bigint = 0n;
   let amountGTBalance: boolean;
+  let isSubmitting = false;
 
   $: {
     try {
@@ -18,6 +20,16 @@
   function reset() {
     amount = '';
     amountRaw = 0n;
+    open = false;
+  }
+
+  async function execute() {
+    isSubmitting = true;
+    try {
+      await vaultWithdraw(vault.vault.vault_id, vault.token.id, amountRaw);
+      reset();
+    } catch (e) {}
+    isSubmitting = false;
   }
 </script>
 
@@ -85,9 +97,14 @@
       <Button color="alternative" on:click={reset}>Cancel</Button>
 
       <Button
-        on:click={() => alert('Handle "success"')}
-        disabled={!amountRaw || amountRaw === 0n || amountGTBalance}>Make Withdrawal</Button
+        on:click={execute}
+        disabled={!amountRaw || amountRaw === 0n || amountGTBalance || isSubmitting}
       >
+        {#if isSubmitting}
+          <Spinner class="mr-2 h-4 w-4" color="white" />
+        {/if}
+        Make Withdrawal
+      </Button>
     </div>
   </svelte:fragment>
 </Modal>

tauri-app/src/lib/stores/vaultDeposit.ts → tauri-app/src/lib/utils/vaultDeposit.ts

@@ -1,10 +1,9 @@
 import { get } from 'svelte/store';
 import { invoke } from '@tauri-apps/api';
-import { rpcUrl, orderbookAddress, walletDerivationIndex } from './settings';
+import { rpcUrl, orderbookAddress, walletDerivationIndex } from '../stores/settings';
 import { chainId } from '$lib/stores/chain';
 
-function useVaultDepositStore() {
-  async function call(vaultId: bigint, token: string, amount: bigint) {
+export async function vaultDeposit(vaultId: bigint, token: string, amount: bigint) {
     await invoke("vault_deposit", { 
       depositArgs: { 
         vault_id: vaultId.toString(),
@@ -20,11 +19,4 @@ function useVaultDepositStore() {
         max_fee_per_gas: '400000000000',
       } 
     });
-  }
-
-  return {
-    call
-  }
-}
-
-export const vaultDeposit = useVaultDepositStore();
+  }

tauri-app/src/lib/utils/vaultWithdraw.ts

@@ -0,0 +1,22 @@
+import { get } from 'svelte/store';
+import { invoke } from '@tauri-apps/api';
+import { rpcUrl, orderbookAddress, walletDerivationIndex } from '../stores/settings';
+import { chainId } from '$lib/stores/chain';
+
+export async function vaultWithdraw(vaultId: bigint, token: string, targetAmount: bigint) {
+    await invoke("vault_withdraw", {
+      withdrawArgs: {
+        vault_id: vaultId.toString(),
+        token,
+        target_amount: targetAmount.toString(),
+      },
+      transactionArgs: {
+        rpc_url: get(rpcUrl),
+        orderbook_address: get(orderbookAddress),
+        derivation_index: get(walletDerivationIndex),
+        chain_id: get(chainId),
+        max_priority_fee_per_gas: '400000000000',
+        max_fee_per_gas: '400000000000',
+      }
+    });
+  };