add icon

interface/src/lib/components/admin/rebalance/deposit/mixinDepositCard.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { qr } from '@svelte-put/qr/img';
-  import colors from "tailwindcss/colors";
   import { onMount } from 'svelte';
-  import emptyToken from '$lib/images/empty-token.svg';
   import { createQrSvgString } from "@svelte-put/qr";
   import { copyToClipboard, findCoinIconBySymbol } from "$lib/helpers/helpers";
 
   export let assetSymbol: string;
+  export let assetIcon: string;
   export let chainSymbol: string;
+  export let chainIcon: string;
   export let depositAddress: string;
   export let depositMemo: string;
   export let miniumDepositAmount: string;
@@ -43,7 +42,7 @@
       <span class="text-base font-bold text-base-content">{assetSymbol}</span>
     </div>
 
-    <img src={findCoinIconBySymbol(assetSymbol)} alt='' class="size-8" />
+    <img src={assetIcon} alt='' class="size-8" />
   </div>
 
   {#if chainSymbol != assetSymbol}
@@ -54,7 +53,7 @@
         <span class="text-base font-bold text-base-content">{chainSymbol}</span>
       </div>
 
-      <img src={findCoinIconBySymbol(chainSymbol)} alt='' class="size-8" />
+      <img src={chainIcon} alt='' class="size-8" />
     </div>
   {/if}
 
@@ -93,7 +92,7 @@
     <div class="flex flex-row justify-center items-center w-full">
       <div class="relative rounded-2xl border p-1">
         <div class="absolute inset-0 flex items-center justify-center">
-          <img src={findCoinIconBySymbol(assetSymbol)} alt='' class="size-8" />
+          <img src={assetIcon} alt='' class="size-8" />
         </div>
         {@html memoQrSrc}
       </div>
@@ -134,7 +133,7 @@
   <div class="flex flex-row justify-center items-center w-full">
     <div class="relative rounded-2xl border p-1">
       <div class="absolute inset-0 flex items-center justify-center">
-        <img src={findCoinIconBySymbol(assetSymbol)} alt='' class="size-8" />
+        <img src={assetIcon} alt='' class="size-8" />
       </div>
       {@html addressQrSrc}
     </div>

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

@@ -45,7 +45,7 @@
     </div>
 
     <div class="mx-8 mb-4">
-      <input type="text" class="input input-bordered w-full" placeholder={$_("search")}
+      <input type="text" class="input input-bordered w-full focus:outline-none rounded-lg" placeholder={$_("search")}
         bind:value={search} on:keyup={async () => { 
           if (filteredAssets.length === 0) { 
             searchingAsset = true;
@@ -58,15 +58,15 @@
     </div>
 
     {#if filteredAssets.length > 0}
-      <div class="flex flew-row flex-wrap gap-4 p-8 pt-2">
+      <div class="flex flew-row flex-wrap gap-5 p-8 pt-2">
         {#each filteredAssets as asset}
-            <button class="flex flex-row items-center justify-center gap-4 p-4 bg-base-100 rounded-lg shadow-md" 
+            <button class="flex flex-row items-center justify-center gap-2 px-4 py-2 bg-base-100 rounded-full shadow-md"
               on:click={() => {
                 goto(`/manage/rebalance/deposit/mixin/${asset.asset_id}`);
               }}>
               <AssetIcon assetIcon={asset.icon_url} chainIcon={findChainIcon(asset.chain_id)} clazz="size-8" />
               <div class="flex flex-col items-start justify-center">
-                <span class="text-lg font-bold text-center">{asset.symbol}</span>
+                <span class="text-base font-bold text-center">{asset.symbol}</span>
                 <span class="text-xs text-center opacity-60">{asset.name}</span>
               </div>
             </button>
@@ -78,15 +78,15 @@
           <Loading />
         </div>
       {:else if searchAssets.length > 0}
-        <div class="flex flex-wrap gap-4 p-8 pt-2">
+        <div class="flex flew-row flex-wrap gap-5 p-8 pt-2">
           {#each searchAssets as asset}
-              <button class="flex flex-row items-center justify-center gap-4 p-4 bg-base-100 rounded-lg shadow-md" 
+              <button class="flex flex-row items-center justify-center gap-2 px-4 py-2 bg-base-100 rounded-full shadow-md" 
                 on:click={() => {
-                  goto(`/manage/rebalance/deposit/${asset.asset_id}`);
+                  goto(`/manage/rebalance/deposit/mixin/${asset.asset_id}`);
                 }}>
                 <AssetIcon assetIcon={asset.icon_url} chainIcon={findChainIcon(asset.chain_id)} clazz="size-8" />
                 <div class="flex flex-col items-start justify-center">
-                  <span class="text-lg font-bold text-center">{asset.symbol}</span>
+                  <span class="text-base font-bold text-center">{asset.symbol}</span>
                   <span class="text-xs text-center opacity-60">{asset.name}</span>
                 </div>
               </button>

interface/src/routes/(bottomNav)/(admin)/manage/rebalance/deposit/mixin/[id]/+page.svelte

@@ -2,9 +2,9 @@
   import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
   import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
   import { getMixinDepositAddress } from "$lib/helpers/hufi/admin/rebalance";
   import MixinDepositCard from "$lib/components/admin/rebalance/deposit/mixinDepositCard.svelte";
-    import { goto } from "$app/navigation";
 
   let asset;
   let chain;
@@ -17,20 +17,19 @@
   let failure = false;
   asset = $page.data.asset;
   chain = $page.data.chain;
-  console.log(asset);
-  console.log(chain);
 
   onMount(async () => {
-    console.log(asset);
-    console.log(chain);
     const token = localStorage.getItem('admin-access-token');
     if (!token) {
       return;
     }
     loading = true;
     try {
       const result = await getMixinDepositAddress(asset.asset_id, token);
-      console.log('getMixinDepositAddress', result.data);
+      if (result.code === 500) {
+        failure = true;
+        console.error(result.message);
+      }
       const data = result.data;
       if (data) {
         depositAddress = data.address;
@@ -75,7 +74,9 @@
   {:else if loaded}
     <MixinDepositCard
       assetSymbol={asset.symbol}
+      assetIcon={asset.icon_url}
       chainSymbol={chain.symbol}
+      chainIcon={chain.icon_url}
       depositAddress={depositAddress}
       depositMemo={depositMemo}
       miniumDepositAmount={minDepositAmount}