From 98e78b6805e192918fb44d42815685e741cf2278 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 13 Feb 2026 13:29:41 -0800
Subject: account ui

---
 src/components/Account.svelte              | 13 +++++++++++--
 src/locales/en.json                        |  3 ++-
 src/routes/(app)/account/[id]/+page.svelte | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 4e60d73f..df2c51ea 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -134,7 +134,7 @@
 >
   <div class="flex items-start justify-between gap-4">
     <div>
-      <div class="text-sm text-gray-500">{displayName}</div>
+      <div class="text-lg text-gray-400">{displayName}</div>
       <Balance {balance} {user} {rate} {id} />
       {#if pending}
         <div class="text-lg text-gray-600">
@@ -142,7 +142,16 @@
         </div>
       {/if}
     </div>
-    <div class="flex items-center gap-4 shrink-0 text-gray-600">
+    <div class="flex items-start gap-4 shrink-0 text-gray-600">
+      <div class="flex items-center justify-center w-8 h-8 leading-[0]">
+        {#if isArk}
+          <img src="/images/ark.png" class="w-8 h-8 rounded-full object-cover" alt="Ark" />
+        {:else if seed || (user.seed && fingerprint)}
+          <iconify-icon noobserver icon="cryptocurrency-color:btc" width="32"></iconify-icon>
+        {:else}
+          <img src="/images/icon.png" class="w-8 h-8" alt="Coinos" />
+        {/if}
+      </div>
       <a
         href="/payments"
         class="hover:text-gray-800"
diff --git a/src/locales/en.json b/src/locales/en.json
index 4fa11904..93fe95a8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -69,7 +69,8 @@
     "ark": "Ark",
     "bitcoin": "Bitcoin",
     "custodial": "Custodial",
-    "submit": "Submit"
+    "submit": "Submit",
+    "type": "Type"
   },
   "404": {
     "404": "404",
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index c5e11ad1..05add104 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -79,12 +79,24 @@
       <div class="space-y-1">
         <label for="name" class="font-bold block">{$t("accounts.name")}</label>
         <label
-          class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2"
+          class="input input-bordered border-primary input-lg flex items-center gap-2"
         >
           <input type="text" name="name" class="clean" bind:value={name} />
         </label>
       </div>
 
+      <div class="flex items-center gap-2 text-lg">
+        <span class="font-bold">{$t("accounts.type")}:</span>
+        {#if account.type === "ark"}
+          <img src="/images/ark.png" class="w-6 h-6 rounded-full object-cover" alt="Ark" />
+        {:else if seed}
+          <iconify-icon noobserver icon="cryptocurrency-color:btc" width="24"></iconify-icon>
+        {:else}
+          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300" width="24"></iconify-icon>
+        {/if}
+        {displayType}
+      </div>
+
       <div class="space-y-2">
         {#if mnemonic}
           <Mnemonic {mnemonic} />
-- 
cgit v1.2.3