From 05eb457e114b441fe86fc1b2ae13f0ea147bfc01 Mon Sep 17 00:00:00 2001
From: 0xZensh <txr1883@gmail.com>
Date: Tue, 10 Sep 2024 18:57:37 +0800
Subject: [PATCH] chore: improve message app

---
 .../components/messages/ChannelDetail.svelte  | 23 ++++++--
 .../messages/ChannelMessages.svelte           | 29 +++++-----
 .../components/messages/ChannelSetting.svelte |  7 +--
 .../src/lib/components/messages/Chat.svelte   |  4 +-
 .../src/lib/components/messages/Home.svelte   | 10 +---
 .../src/lib/components/messages/Index.svelte  |  7 ++-
 .../components/messages/PasswordModel.svelte  |  6 +--
 .../components/messages/ProfileDetail.svelte  | 17 +++---
 .../messages/UserRegisterModel.svelte         | 22 ++++++--
 .../messages/UserSelectModel.svelte           | 21 ++++++--
 src/ic_panda_frontend/src/lib/constants.ts    |  1 +
 .../src/lib/stores/message.ts                 | 54 +++++++++++++------
 src/ic_panda_frontend/src/lib/utils/token.ts  | 11 ++--
 13 files changed, 140 insertions(+), 72 deletions(-)

diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
index edd6fb0..e77d315 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
@@ -11,6 +11,7 @@
     type ChannelInfoEx,
     type MyMessageState
   } from '$src/lib/stores/message'
+  import { sleep } from '$src/lib/utils/helper'
   import { Avatar, getToastStore } from '@skeletonlabs/skeleton'
   import { onMount } from 'svelte'
   import { type Readable } from 'svelte/store'
@@ -20,20 +21,31 @@
   export let channelId: string
 
   const toastStore = getToastStore()
+  const { canister, id } = ChannelAPI.parseChannelParam(channelId)
 
   let myState: MyMessageState
   let myInfo: Readable<UserInfo>
   let channelInfo: Readable<ChannelInfoEx>
 
   let openSettings = false
-  function onCreateChannelHandler() {
+  let switching = false
+  async function onClickChannelSetting() {
+    if (!canister) return
+    switching = true
+    await Promise.all([
+      async () => {
+        // load latest channel info
+        channelInfo = await myState.loadChannelInfo(canister, id)
+      },
+      sleep(200)
+    ])
     openSettings = !openSettings
+    switching = false
   }
 
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
-      const { canister, id } = ChannelAPI.parseChannelParam(channelId)
-      if (canister && !signal.aborted) {
+      if (canister) {
         myState = await myMessageStateAsync()
         myInfo = myState.info as Readable<UserInfo>
         channelInfo = await myState.loadChannelInfo(canister, id)
@@ -78,7 +90,8 @@
       type="button"
       class="btn-icon"
       title="Channel settings"
-      on:click={onCreateChannelHandler}
+      disabled={switching}
+      on:click={onClickChannelSetting}
       ><span>
         {#if openSettings}
           <IconClose />
@@ -92,7 +105,7 @@
     {#if openSettings}
       <ChannelSetting {myState} {myInfo} channelInfo={$channelInfo} />
     {:else}
-      <ChannelMessages {myState} {myInfo} {channelInfo} />
+      <ChannelMessages {myState} {myInfo} channelInfo={$channelInfo} />
     {/if}
   {:else}
     <div class="m-auto size-24 rounded-full *:size-24">
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte
index 6465290..73e795b 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte
@@ -27,10 +27,10 @@
 
   export let myState: MyMessageState
   export let myInfo: Readable<UserInfo>
-  export let channelInfo: Readable<ChannelInfoEx>
+  export let channelInfo: ChannelInfoEx
 
   const toastStore = getToastStore()
-  const { canister, id } = $channelInfo
+  const { canister, id } = channelInfo
 
   let messageFeed: Writable<MessageInfo[]> = writable([])
   let latestMessage: Readable<MessageInfo | null>
@@ -117,29 +117,29 @@
 
   const debouncedUpdateMyLastRead = debounce(async () => {
     await myState.updateMyLastRead(canister, id, latestMessageId)
-  }, 10000)
+  }, 6000)
 
   async function loadMessages(canister: Principal, id: number) {
     channelAPI = await myState.api.channelAPI(canister)
-    dek = await myState.decryptChannelDEK($channelInfo)
-    latestMessage = await myState.loadLatestMessageStream(
-      canister,
-      id,
-      dek,
-      $channelInfo.latest_message_id
-    )
-
+    dek = await myState.decryptChannelDEK(channelInfo)
     const prevMessages = await myState.loadPrevMessages(
       canister,
       id,
       dek,
-      $channelInfo.latest_message_id
+      channelInfo.latest_message_id + 1
     )
 
     if (prevMessages.length > 0) {
       messageFeed.update((prev) => [...prevMessages, ...prev])
     }
 
+    latestMessage = await myState.loadLatestMessageStream(
+      canister,
+      id,
+      dek,
+      channelInfo.latest_message_id + 1
+    )
+
     await tick()
     debouncedUpdateMyLastRead()
     debouncedUpdateMyLastRead.trigger()
@@ -149,6 +149,9 @@
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
       if (!signal.aborted) {
+        if (!channelInfo._kek) {
+          channelInfo = await myState.refreshMyChannel(channelInfo)
+        }
         await loadMessages(canister, id)
       } else {
         goto('/_/messages')
@@ -174,7 +177,7 @@
 
 <div class="grid max-h-[calc(100dvh-140px)] grid-rows-[1fr_auto] bg-gray/5">
   <!-- Conversation -->
-  <section bind:this={elemChat} class="space-y-4 overflow-y-auto p-4 pb-40">
+  <section bind:this={elemChat} class="space-y-4 overflow-y-auto p-4 pb-20">
     {#each $messageFeed as msg (msg.id)}
       {#if msg.created_by.compareTo(myState.principal) !== 'eq'}
         <div
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte
index a0415c2..bfdcd99 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte
@@ -127,6 +127,8 @@
   function onClickAdminExchangeKeys() {
     adminExchangeKeysSubmitting = true
     toastRun(async (signal: AbortSignal) => {
+      // fetch the latest ECDH request
+      channelInfo = await myState.refreshMyChannel(channelInfo)
       await myState.adminExchangeKEK(channelInfo)
       channelInfo = await myState.refreshMyChannel(channelInfo)
       await loadMembers()
@@ -209,9 +211,8 @@
 
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
-      if (!signal.aborted) {
-        await loadMembers()
-      }
+      channelInfo = await myState.refreshMyChannel(channelInfo)
+      await loadMembers()
     }, toastStore)
 
     return abort
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
index e8592b8..43f134d 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { type UserInfo } from '$lib/canisters/message'
+  import { MyMessageState } from '$src/lib/stores/message'
   import { Avatar } from '@skeletonlabs/skeleton'
   import { type Readable } from 'svelte/store'
 
@@ -9,6 +10,7 @@
   import MyChannelList from './MyChannelList.svelte'
   import ProfileDetail from './ProfileDetail.svelte'
 
+  export let myState: MyMessageState // force reactivity when 'myState' updated
   export let myInfo: Readable<UserInfo>
 
   function onMeHandler() {
@@ -60,7 +62,7 @@
       <div
         class="grid-row-[1fr] grid max-h-[calc(100dvh-76px)] items-start gap-6 rounded-tr-2xl bg-white"
       >
-        <ProfileDetail userId={$myInfo.id} />
+        <ProfileDetail userId={myState.id} />
       </div>
     {/if}
   </div>
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Home.svelte b/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
index 286b117..c40fe70 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
@@ -7,7 +7,6 @@
     type MyMessageState
   } from '$src/lib/stores/message'
   import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'
-  import { getContext } from 'svelte'
   import { type Readable } from 'svelte/store'
   import UserRegisterModel from './UserRegisterModel.svelte'
 
@@ -16,7 +15,6 @@
 
   const toastStore = getToastStore()
   const modalStore = getModalStore()
-  const initState = getContext('InitState')
 
   function getStartedHandler() {
     toastRun(async () => {
@@ -29,9 +27,7 @@
             type: 'component',
             component: {
               ref: UserRegisterModel,
-              props: {
-                initState: initState || null
-              }
+              props: {}
             }
           })
         }
@@ -40,9 +36,7 @@
           type: 'component',
           component: {
             ref: UserRegisterModel,
-            props: {
-              initState: initState || null
-            }
+            props: {}
           }
         })
       }
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Index.svelte b/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
index f764208..c6d65af 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
@@ -7,7 +7,7 @@
     type MyMessageState
   } from '$src/lib/stores/message'
   import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'
-  import { onMount, setContext } from 'svelte'
+  import { onMount } from 'svelte'
   import { type Readable } from 'svelte/store'
   import Chat from './Chat.svelte'
   import Home from './Home.svelte'
@@ -22,6 +22,7 @@
 
   async function initState() {
     myState = await myMessageStateAsync()
+    await myState.refreshState()
     myInfo = myState.info
     myInfo_ = myInfo as Readable<UserInfo>
     if ($myInfo) {
@@ -41,8 +42,6 @@
     }
   }
 
-  setContext('InitState', initState)
-
   onMount(() => {
     const { abort } = toastRun(initState, toastStore)
     return abort
@@ -60,7 +59,7 @@
 </script>
 
 {#if $myInfo}
-  <Chat myInfo={myInfo_} />
+  <Chat {myState} myInfo={myInfo_} />
 {:else}
   <Home {myState} {myInfo} />
 {/if}
diff --git a/src/ic_panda_frontend/src/lib/components/messages/PasswordModel.svelte b/src/ic_panda_frontend/src/lib/components/messages/PasswordModel.svelte
index c6c864d..7d08a3f 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/PasswordModel.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/PasswordModel.svelte
@@ -15,7 +15,7 @@
 
   const toastStore = getToastStore()
   const keyId = encodeCBOR('ICPanda_Messages_Master_Key')
-  const PasswordExpire = 7 * 24 * 60 * 60 * 1000
+  const PasswordExpire = 14 * 24 * 60 * 60 * 1000
 
   let validating = false
   let submitting = false
@@ -51,7 +51,7 @@
           )
 
           if (masterKey.kind !== kind) {
-            processingTip = 'Migrate keys...'
+            processingTip = 'Migrate encrypted keys to ICP chain ...'
             await myState.migrateKeys()
           } else {
             await myState.initStaticECDHKey()
@@ -164,7 +164,7 @@
     {/if}
     <label class="mt-2 flex items-center">
       <input class="checkbox" type="checkbox" bind:checked={cachedPassword} />
-      <p class="ml-2 text-sm text-gray/50">Cache password for 7 days</p>
+      <p class="ml-2 text-sm text-gray/50">Cache password for 14 days</p>
     </label>
   </form>
   <footer class="m-auto !mt-4">
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte b/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
index 4b155f4..1a48c04 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
@@ -12,7 +12,7 @@
   } from '$src/lib/stores/message'
   import { Principal } from '@dfinity/principal'
   import { Avatar, getModalStore, getToastStore } from '@skeletonlabs/skeleton'
-  import { getContext, onMount } from 'svelte'
+  import { onMount } from 'svelte'
   import { type Readable } from 'svelte/store'
   import ProfileEditModel from './ProfileEditModel.svelte'
   import UserRegisterModel from './UserRegisterModel.svelte'
@@ -21,7 +21,6 @@
 
   const toastStore = getToastStore()
   const modalStore = getModalStore()
-  const initState = getContext('InitState')
 
   let myID: Principal
   let myState: MyMessageState
@@ -79,9 +78,7 @@
         type: 'component',
         component: {
           ref: UserRegisterModel,
-          props: {
-            initState: initState || null
-          }
+          props: {}
         }
       })
     }
@@ -95,14 +92,16 @@
     onfinally((info) => {
       if (!info) {
         setTimeout(() => goto('/_/messages'), 2000)
-      } else if (info.id.compareTo(myID) == 'eq' && info.username.length == 0) {
+      } else if (
+        info.id.compareTo(myID) == 'eq' &&
+        info.username.length == 0 &&
+        info.created_at < BigInt(Date.now() - 180 * 1000)
+      ) {
         modalStore.trigger({
           type: 'component',
           component: {
             ref: UserRegisterModel,
-            props: {
-              initState: initState || null
-            }
+            props: {}
           }
         })
       }
diff --git a/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte b/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
index c7d40f7..74825d7 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
@@ -16,11 +16,13 @@
     myMessageStateAsync,
     type MyMessageState
   } from '$src/lib/stores/message'
+  import { sleep } from '$src/lib/utils/helper'
   import { Principal } from '@dfinity/principal'
   import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'
   import debounce from 'debounce'
   import { onDestroy, onMount, type SvelteComponent } from 'svelte'
   import { type Readable } from 'svelte/store'
+  import PasswordModel from './PasswordModel.svelte'
 
   const usernameReg = /^[a-z0-9][a-z0-9_]{0,19}$/i
   const toastStore = getToastStore()
@@ -29,7 +31,6 @@
   // Props
   /** Exposes parent props to this component. */
   export let parent: SvelteComponent
-  export let initState: null | (() => Promise<void>) = null
 
   const messageCanisterPrincipal = Principal.fromText(MESSAGE_CANISTER_ID)
 
@@ -83,15 +84,28 @@
 
       if (!usernameInput) {
         result = await myState.api.update_my_name(nameInput)
+        await sleep(1000)
+        await myState.api.refreshMyInfo()
       } else {
         await tokenLedgerAPI.ensureAllowance(messageCanisterPrincipal, amount)
         result = await myState.api.register_username(usernameInput, nameInput)
+        await sleep(1000)
+        await myState.refreshState()
       }
 
-      await myState.api.refreshMyInfo()
-      if (initState) {
+      const mk = await myState.masterKey()
+      if (!mk || !mk.isOpened() || myState.masterKeyKind() !== mk.kind) {
         modalStore.close()
-        initState()
+        modalStore.trigger({
+          type: 'component',
+          component: {
+            ref: PasswordModel,
+            props: {
+              myState: myState,
+              masterKey: mk
+            }
+          }
+        })
       } else {
         setTimeout(async () => {
           modalStore.close()
diff --git a/src/ic_panda_frontend/src/lib/components/messages/UserSelectModel.svelte b/src/ic_panda_frontend/src/lib/components/messages/UserSelectModel.svelte
index 987a1ca..8f09a41 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/UserSelectModel.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/UserSelectModel.svelte
@@ -88,7 +88,7 @@
       console.error(err)
       // ignore
     }
-  }, 999)
+  }, 618)
 
   function onSearchUsername() {
     debouncedSearch()
@@ -116,9 +116,22 @@
   async function onSaveHandler() {
     submitting = true
     toastRun(async (signal: AbortSignal) => {
-      const users = $selectedUsers.map(
-        (user) => [user.src!.id, user.ecdhPub] as [Principal, Uint8Array | null]
-      )
+      const users: [Principal, Uint8Array | null][] = []
+      for (const info of $selectedUsers) {
+        if (!info.src!.id) {
+          continue
+        }
+
+        if (!info.ecdhPub) {
+          // try to fetch the latest ecdh public key
+          const ninfo = await myState.tryFetchProfile(info.src!.id)
+          if (ninfo) {
+            info.ecdhPub = unwrapOption(ninfo.ecdh_pub as [] | [Uint8Array])
+          }
+        }
+        users.push([info.src!.id, info.ecdhPub])
+      }
+
       if (users.length > 0) {
         await onSave(users)
       }
diff --git a/src/ic_panda_frontend/src/lib/constants.ts b/src/ic_panda_frontend/src/lib/constants.ts
index 0dc82d0..33373be 100644
--- a/src/ic_panda_frontend/src/lib/constants.ts
+++ b/src/ic_panda_frontend/src/lib/constants.ts
@@ -13,6 +13,7 @@ export const ICP_LEDGER_CANISTER_ID = 'ryjl3-tyaaa-aaaaa-aaaba-cai' // ic & loca
 export const TOKEN_LEDGER_CANISTER_ID = 'druyg-tyaaa-aaaaq-aactq-cai' // ic & local
 export const CKDOGE_MINTER_CANISTER_ID = 'bw4dl-smaaa-aaaaa-qaacq-cai' // local
 export const CKDOGE_CHAIN_CANISTER_ID = 'be2us-64aaa-aaaaa-qaabq-cai' // local
+export const CKDOGE_LEDGER_CANISTER_ID = 'b77ix-eeaaa-aaaaa-qaada-cai' // local
 
 export const MESSAGE_CANISTER_ID = 'ajuq4-ruaaa-aaaaa-qaaga-cai' // local
 
diff --git a/src/ic_panda_frontend/src/lib/stores/message.ts b/src/ic_panda_frontend/src/lib/stores/message.ts
index 9b7e61c..2795296 100644
--- a/src/ic_panda_frontend/src/lib/stores/message.ts
+++ b/src/ic_panda_frontend/src/lib/stores/message.ts
@@ -12,7 +12,6 @@ import {
   type Message
 } from '$lib/canisters/messagechannel'
 import {
-  ProfileAPI,
   type ProfileInfo,
   type UpdateProfileInput
 } from '$lib/canisters/messageprofile'
@@ -124,7 +123,6 @@ export class MyMessageState {
   readonly id: string
   readonly principal: Principal
   readonly api: MessageCanisterAPI
-  readonly profileAPI: ProfileAPI | null = null
   readonly info: Readable<UserInfo | null>
 
   private _coseAPI: CoseAPI | null = null
@@ -137,29 +135,23 @@ export class MyMessageState {
   static async with(identity: Identity): Promise<MyMessageState> {
     const api = await messageCanisterAPIAsync()
     let coseAPI: CoseAPI | null = null
-    let profileAPI: ProfileAPI | null = null
 
-    if (api.myInfo) {
-      profileAPI = await api.profileAPI(api.myInfo.profile_canister)
-      if (api.myInfo.cose_canister.length == 1) {
-        coseAPI = await api.coseAPI(api.myInfo.cose_canister[0])
-      }
+    if (api.myInfo?.cose_canister.length == 1) {
+      coseAPI = await api.coseAPI(api.myInfo.cose_canister[0])
     }
 
-    return new MyMessageState(identity.getPrincipal(), api, coseAPI, profileAPI)
+    return new MyMessageState(identity.getPrincipal(), api, coseAPI)
   }
 
   constructor(
     principal: Principal,
     api: MessageCanisterAPI,
-    coseAPI: CoseAPI | null,
-    profileAPI: ProfileAPI | null
+    coseAPI: CoseAPI | null
   ) {
     this.principal = principal
     this.id = principal.toText()
     this.api = api
     this._coseAPI = coseAPI
-    this.profileAPI = profileAPI
     this.info = derived(api.myInfoStore, ($info, set) => {
       if ($info) {
         this.setCacheUserInfo(Date.now(), $info)
@@ -178,6 +170,14 @@ export class MyMessageState {
     return this._coseAPI != null ? 'ECDH' : 'Local'
   }
 
+  async refreshState(): Promise<void> {
+    await Promise.all([this.api.refreshMyInfo(), this.api.refreshState()])
+    const myInfo = this.api.myInfo
+    if (myInfo?.cose_canister.length == 1) {
+      this._coseAPI = await this.api.coseAPI(myInfo.cose_canister[0])
+    }
+  }
+
   async masterKey(): Promise<MasterKey | null> {
     const mk = this._mks.at(-1)
     if (!mk || !mk.isUser(this.principal)) {
@@ -717,8 +717,10 @@ export class MyMessageState {
     ninfo._get_by = this.id
     await this.addMyChannel(ninfo)
     let kek = info._kek
-    if (kek) {
-      kek = await this.loadChannelKEK(info.canister, info.id)
+    if (!kek) {
+      try {
+        kek = await this.loadChannelKEK(info.canister, info.id)
+      } catch (e) {}
     }
 
     return {
@@ -907,6 +909,22 @@ export class MyMessageState {
     return null
   }
 
+  async tryFetchProfile(
+    id: Principal
+  ): Promise<(UserInfo & ProfileInfo) | null> {
+    try {
+      const now = Date.now()
+      const user = await this.api.get_user(id)
+      await this.setCacheUserInfo(now, user)
+      const api = await this.api.profileAPI(user.profile_canister)
+      const profile = await api.get_profile(user.id)
+      await KVS.set<ProfileInfo>('Profiles', profile)
+
+      return { ...user, ...profile }
+    } catch (err) {}
+    return null
+  }
+
   async updateProfile(
     profile_canister: Principal,
     input: UpdateProfileInput
@@ -961,7 +979,7 @@ export class MyMessageState {
       }
     }
 
-    let kek = null
+    let kek: Uint8Array | null = null
     try {
       kek = await this.loadChannelKEK(info.canister, info.id)
     } catch (err) {}
@@ -978,6 +996,12 @@ export class MyMessageState {
             .get_channel_if_update(id, info.updated_at)
             .then(async (channel) => {
               if (channel) {
+                if (!kek) {
+                  try {
+                    kek = await this.loadChannelKEK(info.canister, info.id)
+                  } catch (err) {}
+                }
+
                 await this.addMyChannel(channel)
                 set({
                   ...channel,
diff --git a/src/ic_panda_frontend/src/lib/utils/token.ts b/src/ic_panda_frontend/src/lib/utils/token.ts
index 185d59b..6179492 100644
--- a/src/ic_panda_frontend/src/lib/utils/token.ts
+++ b/src/ic_panda_frontend/src/lib/utils/token.ts
@@ -1,3 +1,8 @@
+import {
+  CKDOGE_LEDGER_CANISTER_ID,
+  ICP_LEDGER_CANISTER_ID,
+  TOKEN_LEDGER_CANISTER_ID
+} from '$lib/constants'
 import { TokenAmountV2 as TokenAmount, type Token } from '@dfinity/utils'
 
 export { TokenAmountV2 as TokenAmount } from '@dfinity/utils'
@@ -16,7 +21,7 @@ export const ICPToken: TokenInfo = {
   decimals: 8,
   fee: 10000n,
   one: 100000000n,
-  canisterId: 'ryjl3-tyaaa-aaaaa-aaaba-cai' // ic & local
+  canisterId: ICP_LEDGER_CANISTER_ID
 }
 
 export const PANDAToken: TokenInfo = {
@@ -25,7 +30,7 @@ export const PANDAToken: TokenInfo = {
   decimals: 8,
   fee: 10000n,
   one: 100000000n,
-  canisterId: 'druyg-tyaaa-aaaaq-aactq-cai' // ic & local
+  canisterId: TOKEN_LEDGER_CANISTER_ID
 }
 
 export const ckDOGEToken: TokenInfo = {
@@ -34,7 +39,7 @@ export const ckDOGEToken: TokenInfo = {
   decimals: 8,
   fee: 100000n,
   one: 100000000n,
-  canisterId: 'b77ix-eeaaa-aaaaa-qaada-cai' // local
+  canisterId: CKDOGE_LEDGER_CANISTER_ID
 }
 
 export const DOGEToken: TokenInfo = {