remove api key process done

interface/src/lib/components/admin/exchanges/add/create.svelte

@@ -6,7 +6,7 @@
   import type { ExchangeAPIKeysConfig } from "$lib/types/hufi/exchanges";
 
   let loading = false;
-  let items: { key: keyof ExchangeAPIKeysConfig, value: string, info: string }[] = [
+  let items = [
     { key: 'name', value: '', info: $_('name_info') },
     { key: 'exchange', value: '', info: $_('exchange_info') },
     { key: 'api_key', value: '', info: $_('api_key_info') },
@@ -43,8 +43,9 @@
     } catch (e: any) {
       toast.error(`${e.message}`);
       loading = false;
+    } finally {
+      loading = false;
     }
-    return;
   }
 </script>
 
@@ -67,12 +68,21 @@
           <span class="text-sm"> {key} </span>
           <!-- <span class="text-xs text-gray-500"> {info} </span> -->
         </div>
-        <input
-          type="text"
-          placeholder={info}
-          bind:value={items[index].value}
-          class="input input-bordered w-full max-w-xs focus:outline-none"
-        />
+        {#if key === 'api_secret' || key === 'api_extra'}
+          <input
+            type="password"
+            placeholder={info}
+            bind:value={items[index].value}
+            class="input input-bordered w-full max-w-xs focus:outline-none"
+          />
+        {:else}
+          <input
+            type="text"
+            placeholder={info}
+            bind:value={items[index].value}
+            class="input input-bordered w-full max-w-xs focus:outline-none"
+          />
+        {/if}
       </div>
     {/each}
 

interface/src/lib/components/admin/exchanges/singleAPIKey.svelte

@@ -3,7 +3,7 @@
   import toast from "svelte-french-toast";
   import type { AdminSingleKey } from "$lib/types/hufi/admin";
   import { findExchangeIconByIdentifier } from "$lib/helpers/helpers";
-  import { removeExchangeApiKey } from "$lib/helpers/hufi/admin/exchange";
+  import { loadExchangeApiKeys, removeExchangeApiKey } from "$lib/helpers/hufi/admin/exchange";
   
   export let key: AdminSingleKey;
   let loading = false;
@@ -29,7 +29,9 @@
       loading = false;
       deleteConfirm = false;
     }
-    return;
+    setTimeout(async () => {
+      await loadExchangeApiKeys();
+    }, 500);
   }
 </script>
 
@@ -64,7 +66,7 @@
             </svg>
           </button>
 
-          <button class="flex items-center justify-center rounded-full p-0 h-5 w-5" on:click={()=>deleteAPIKey(key.key_id)}>
+          <button class="flex items-center justify-center rounded-full p-0 h-5 w-5" on:click={()=>deleteAPIKey(key.key_id.toString())}>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
             </svg>

interface/src/lib/helpers/hufi/admin/exchange.ts

@@ -1,7 +1,27 @@
+import toast from "svelte-french-toast";
 import { HUFI_BACKEND_URL } from "$lib/helpers/constants";
 import { getHeaders, handleApiResponse } from "$lib/helpers/hufi/common";
+import { exchangeApiKeys, exchangeApiKeysLoading } from "$lib/stores/admin";
 import type { ExchangeAPIKeysConfig } from "$lib/types/hufi/exchanges";
 
+// Wrapper
+export const loadExchangeApiKeys = async () => {
+  exchangeApiKeysLoading.set(true);
+  const token = localStorage.getItem('admin-access-token');
+  if (!token) {
+    exchangeApiKeysLoading.set(false);
+    return;
+  }
+  const res = await getAllAPIKeys(token);
+  if (!res || !res.data) {
+    toast.error('Failed to load all api keys');
+    exchangeApiKeysLoading.set(false);
+    return;
+  }
+  exchangeApiKeys.set(res.data);
+  exchangeApiKeysLoading.set(false);
+}
+
 // Get all API keys
 export const getAllAPIKeys = async (token: string): Promise<unknown> => {
   try {

interface/src/lib/stores/admin.ts

@@ -1,3 +1,4 @@
+import type { AdminSingleKey } from "$lib/types/hufi/admin";
 import { writable } from "svelte/store";
 
 export const submitted = writable(false);
@@ -9,3 +10,6 @@ export const loginLoading = writable(false);
 export const balances = writable()
 export const balancesLoading = writable(false)
 export const balancesLoaded = writable(false)
+
+export const exchangeApiKeys = writable<AdminSingleKey[]>([])
+export const exchangeApiKeysLoading = writable(true)

interface/src/routes/(bottomNav)/(admin)/manage/exchanges/+page.svelte

@@ -2,51 +2,36 @@
   import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import toast from "svelte-french-toast";
   import Loading from "$lib/components/common/loading.svelte";
-  import { getAllAPIKeys } from "$lib/helpers/hufi/admin/exchange";
+  import { loadExchangeApiKeys } from "$lib/helpers/hufi/admin/exchange";
 
   import Actions from "$lib/components/admin/exchanges/actions.svelte";
   import KeyList from "$lib/components/admin/exchanges/keyList.svelte";
   import ExchangeStats from "$lib/components/admin/exchanges/exchangeStats.svelte";
   import ExchangeBalances from "$lib/components/admin/exchanges/exchangeBalances.svelte";
-
-  let keys: any[] = [];
-  let loading = true;
+  import { exchangeApiKeys, exchangeApiKeysLoading } from "$lib/stores/admin";
 
   onMount(async () => {
-    const token = localStorage.getItem('admin-access-token');
-    if (!token) {
-      loading = false;
-      return;
-    }
-    const res = await getAllAPIKeys(token);
-    if (!res || !res.data) {
-      toast.error('Failed to load all api keys');
-      loading = false;
-      return;
-    }
-    keys = res.data;
-    loading = false;
+    await loadExchangeApiKeys();
   });
 </script>
 
 <div class="p-8 flex flex-col space-y-6">
-  {#if loading}
+  {#if $exchangeApiKeysLoading}
     <div class="flex justify-center items-center h-[calc(100vh-10rem)]">
       <Loading />
     </div>
-  {:else if keys.length === 0}
+  {:else if $exchangeApiKeys.length === 0}
     <div class="flex flex-col justify-center items-center h-[calc(100vh-10rem)]">
       <p>{$_("no_exchange_api_key_added")}</p>
       <button class="btn btn-base-100 mt-4" on:click={() => {
         goto('/manage/exchanges/add');
       }}>{$_("add_api_key")}</button>
     </div>
   {:else}
-    <ExchangeStats keys={keys} />
+    <ExchangeStats keys={$exchangeApiKeys} />
     <Actions />
     <ExchangeBalances />
-    <KeyList keys={keys} />
+    <KeyList keys={$exchangeApiKeys} />
   {/if}
 </div>