fix: fix issues

Author: zensh

Cargo.lock

@@ -10,7 +10,7 @@ opt-level = 's'
 
 [workspace.package]
 edition = "2024"
-version = "0.3.1"
+version = "0.3.2"
 repository = "https://github.com/ldclabs/ic-one-bridge"
 keywords = ["canister", "icp", "bridge", "erc20", "icrc"]
 categories = ["web-programming"]

Cargo.toml

@@ -11,7 +11,7 @@
     "test": "vitest run"
   },
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "dependencies": {
     "@dfinity/agent": "^3.3.0",
     "@dfinity/auth-client": "^3.3.0",

src/one_bridge_app/package.json

@@ -70,6 +70,24 @@ export class BridgeCanisterAPI {
     return this.#tokenDisplay
   }
 
+  getTokenUrl(chain: string): [string, string] {
+    if (!this.#state) return ['', '']
+    if (chain === 'ICP') {
+      const token = this.#state.token_ledger.toText()
+      return [token, `https://dashboard.internetcomputer.org/canister/${token}`]
+    }
+    const contract = this.#state.evm_token_contracts.find(
+      ([name, _]) => name === chain
+    )?.[1][0]
+    if (!contract) return ['', '']
+    switch (chain) {
+      case 'BNB':
+        return [contract, `https://bscscan.com/token/${contract}`]
+      default:
+        return ['', '']
+    }
+  }
+
   toIcpAmount(chain: string, evmBalance: bigint): bigint {
     if (!this.#state) return evmBalance
     const evmDecimals = this.#state.evm_token_contracts.find(
@@ -372,7 +390,7 @@ export class BridgingProgress {
     if (this.#log.error.length > 0) {
       return `${this.#log.error[0]}`
     }
-    if (this.#log.to_tx.length > 0) {
+    if (isFinalized(this.#log.from_tx)) {
       return `waiting for confirmation on ${getChainName(this.#log.to)}`
     }
     return `waiting for confirmation on ${getChainName(this.#log.from)}`

src/one_bridge_app/src/lib/canisters/bridge.svelte.ts

@@ -6,6 +6,7 @@
   } from '$lib/canisters/bridge.svelte'
   import ArrowLeftRightLine from '$lib/icons/arrow-left-right-line.svelte'
   import ArrowRightUpLine from '$lib/icons/arrow-right-up-line.svelte'
+  import RefreshLine from '$lib/icons/refresh-line.svelte'
   import { authStore } from '$lib/stores/auth.svelte'
   import { toastRun } from '$lib/stores/toast.svelte'
   import type { Chain } from '$lib/types/bridge'
@@ -16,6 +17,7 @@
   } from '$lib/utils/helper'
   import { type TokenInfo } from '$lib/utils/token'
   import { tick } from 'svelte'
+  import Spinner from '../ui/Spinner.svelte'
   import TextClipboardButton from '../ui/TextClipboardButton.svelte'
   import NetworkSelector from './ChainSelector.svelte'
   import PrimaryButton from './PrimaryButton.svelte'
@@ -145,6 +147,7 @@
     fromAmount = undefined
     error = null
     bridgingProgress = null
+    refreshMyTokenInfo()
   }
 
   function validateSendAmount(event: Event) {
@@ -210,7 +213,7 @@
     }
   }
 
-  async function refreshMyTokenInfo() {
+  async function refreshMyTokenInfo(all: boolean = false) {
     await tick()
 
     if (
@@ -229,6 +232,18 @@
 
     try {
       isLoading = true
+
+      if (all) {
+        await mainBridge.refreshState()
+        if (selectedBridge !== mainBridge) {
+          await selectedBridge.refreshState()
+        }
+
+        const subBridges = await mainBridge.loadSubBridges()
+        bridges = [mainBridge, ...subBridges]
+        supportTokens = bridges.map((b) => b.token!)
+      }
+
       const icp = await selectedBridge.loadICPTokenAPI()
       switch (fromChain.name) {
         case 'ICP':
@@ -269,6 +284,7 @@
     if (bridge) {
       selectedBridge = bridge
     }
+    refreshMyTokenInfo()
   }
 
   async function onSwapChains() {
@@ -329,6 +345,11 @@
         localStorage.setItem('defaultToken', selectedBridge.token.symbol)
         localStorage.setItem('defaultFrom', fromChain.name)
         localStorage.setItem('defaultTo', toChain.name)
+
+        refreshMyTokenInfo()
+        setTimeout(() => {
+          refreshMyTokenInfo()
+        }, 5000)
       } catch (err) {
         isBridging = false
         throw err
@@ -341,19 +362,37 @@
   class="space-y-6 rounded-xl border border-white/10 bg-[#131721]/80 p-6 pb-10 text-white/90 shadow-2xl backdrop-blur"
 >
   {#key bridgeCanister}
+    <button
+      title="Refresh state"
+      class="absolute top-2 right-4 rounded-full bg-white/10 p-1 text-white/60 hover:bg-white/20 hover:text-white/80"
+      onclick={() => refreshMyTokenInfo(true)}
+      disabled={isLoading}
+    >
+      {#if isLoading}
+        <Spinner class="size-5 text-white" />
+      {:else}
+        <span class=" *:size-5"><RefreshLine /></span>
+      {/if}
+    </button>
     {#if myIcpAddress && myEvmAddress}
-      <div class="mb-3 flex flex-col gap-1 text-sm text-white/90">
+      <div class="mb-3 flex flex-col gap-1 text-sm text-white/80">
         <p class="mb-1 text-white/60">Your address</p>
         <p class="flex items-center gap-1">
           {#key myIcpAddress}
             <span>ICP: {pruneAddress(myIcpAddress, true)}</span>
-            <TextClipboardButton value={myIcpAddress} class="*:size-5" />
+            <TextClipboardButton
+              value={myIcpAddress}
+              class="text-white/60 *:size-5 hover:text-white/80"
+            />
           {/key}
         </p>
         <p class="flex items-center gap-1">
           {#key myEvmAddress}
             <span>EVM: {pruneAddress(myEvmAddress, true)}</span>
-            <TextClipboardButton value={myEvmAddress} class="*:size-5" />
+            <TextClipboardButton
+              value={myEvmAddress}
+              class="text-white/60 *:size-5 hover:text-white/80"
+            />
           {/key}
         </p>
       </div>
@@ -367,14 +406,15 @@
           {onSelectToken}
           tokens={supportTokens}
         />
-        {#if selectedToken}
+        {#if selectedBridge}
           <a
             class="flex items-center gap-1 text-sm font-medium text-white/60"
             title="View token ledger canister"
-            href="https://dashboard.internetcomputer.org/canister/{selectedToken.canisterId}"
+            href="https://dashboard.internetcomputer.org/canister/{selectedBridge.canisterId.toText()}"
             target="_blank"
           >
-            <span>{pruneCanister(selectedToken.canisterId)}</span>
+            <span>Bridge</span>
+            <span>{pruneCanister(selectedBridge.canisterId.toText())}</span>
             <span class="*:size-4"><ArrowRightUpLine /></span>
           </a>
         {/if}
@@ -384,7 +424,25 @@
     <div class="grid grid-cols-[1fr_32px_1fr] items-center gap-0">
       <!-- From Section -->
       <div class="">
-        <p class="mb-1 text-sm text-white/60">From</p>
+        <p class="mb-1 flex items-center gap-2 text-sm text-white/60">
+          <span>From</span>
+          {#if selectedBridge && fromChain}
+            {@const [token, tokenUrl] = selectedBridge.getTokenUrl(
+              fromChain.name
+            )}
+            {#if token && tokenUrl}
+              <a
+                class="flex items-center gap-1 text-sm font-medium text-white/60"
+                title="View {token} info"
+                href={tokenUrl}
+                target="_blank"
+              >
+                <span>{pruneCanister(token, false)}</span>
+                <span class="*:size-4"><ArrowRightUpLine /></span>
+              </a>
+            {/if}
+          {/if}
+        </p>
         <NetworkSelector
           disabled={isLoading || isBridging}
           selectedChain={fromChain}
@@ -410,7 +468,25 @@
 
       <!-- To Section -->
       <div class="relative">
-        <p class="mb-1 text-sm text-white/60">To</p>
+        <p class="mb-1 flex items-center gap-2 text-sm text-white/60">
+          <span>To</span>
+          {#if selectedBridge && toChain}
+            {@const [token, tokenUrl] = selectedBridge.getTokenUrl(
+              toChain.name
+            )}
+            {#if token && tokenUrl}
+              <a
+                class="flex items-center gap-1 text-sm font-medium text-white/60"
+                title="View {token} info"
+                href={tokenUrl}
+                target="_blank"
+              >
+                <span>{pruneCanister(token, false)}</span>
+                <span class="*:size-4"><ArrowRightUpLine /></span>
+              </a>
+            {/if}
+          {/if}</p
+        >
         <NetworkSelector
           disabled={isLoading || isBridging}
           selectedChain={toChain}
@@ -440,7 +516,7 @@
         placeholder="0.0"
         data-1p-ignore
         autocomplete="off"
-        class="w-full flex-1 rounded-xl border border-white/10 bg-white/10 p-2 text-left font-mono text-xl leading-8 ring-0 transition-all duration-200 outline-none placeholder:text-gray-500 invalid:border-red-400 focus:bg-white/20"
+        class="w-full flex-1 rounded-xl border border-white/10 bg-white/10 p-2 text-left font-mono text-xl leading-8 ring-0 transition-all duration-200 outline-none placeholder:text-gray-500 invalid:border-red-400 focus:bg-white/20 disabled:cursor-not-allowed"
       />
       {#if selectedBridge}
         {@const token_bridge_fee = selectedBridge.state?.token_bridge_fee || 0n}
@@ -478,16 +554,28 @@
         placeholder={pruneAddress(toAddress) || '0x...'}
         data-1p-ignore
         autocomplete="off"
-        class="mb-1 w-full min-w-0 flex-1 rounded-xl border border-white/10 bg-white/10 p-2 text-left leading-8 ring-0 transition-all duration-200 outline-none placeholder:text-gray-500 invalid:border-red-400 focus:bg-white/20"
+        class="mb-1 w-full min-w-0 flex-1 rounded-xl border border-white/10 bg-white/10 p-2 text-left leading-8 ring-0 transition-all duration-200 outline-none placeholder:text-gray-500 invalid:border-red-400 focus:bg-white/20 disabled:cursor-not-allowed"
       />
+      {#if selectedBridge && !error && fromAmount! > 0}
+        {@const token_bridge_fee = selectedBridge.state?.token_bridge_fee || 0n}
+        {@const amount = selectedBridge.parseAmount(fromAmount!)}
+        <div class="mt-1 text-sm text-green-500">
+          <span
+            >You receive: {selectedBridge.displayAmount(
+              amount - token_bridge_fee
+            )}</span
+          >
+        </div>
+      {/if}
       {#if thirdAddress}
         <label
           class="flex items-center text-sm font-medium text-white/60 rtl:text-right"
           ><input
             type="checkbox"
             name="confirmAddress"
+            disabled={isLoading || isBridging}
             bind:checked={confirmAddress}
-            class="text-primary-600 me-2 size-4 flex-shrink-0 rounded-sm border-gray-300 bg-gray-100 ring-0"
+            class="text-primary-600 me-2 size-4 flex-shrink-0 rounded-sm border-gray-300 bg-gray-100 ring-0 disabled:cursor-not-allowed"
           />
           I confirmed the address is correct and not an exchange or contract address.
           Any tokens sent to an incorrect address will be unrecoverable.</label

src/one_bridge_app/src/lib/components/BridgeCard.svelte

@@ -50,7 +50,7 @@
   {disabled}
   {trigger}
   {containerClass}
-  triggerClass="grid w-full grid-cols-[1fr_24px] rounded-xl p-2 duration-200"
+  triggerClass="grid w-full grid-cols-[1fr_24px] rounded-xl p-2 duration-200 disabled:cursor-not-allowed disabled:bg-gray-500"
   menuClass="top-full z-20 mt-2 w-60 rounded-xl border border-white/20 bg-black shadow-lg"
 >
   <ul class="py-4">

src/one_bridge_app/src/lib/components/ChainSelector.svelte

@@ -51,7 +51,7 @@
   {disabled}
   {trigger}
   {containerClass}
-  triggerClass="px-0 py-2 duration-200 overflow-hidden"
+  triggerClass="px-0 py-2 duration-200 overflow-hidden disabled:cursor-not-allowed disabled:bg-gray-500"
   menuClass="top-full mt-2 w-60 rounded-xl border border-white/20 bg-black shadow-lg"
 >
   <ul class="py-4">
@@ -61,9 +61,7 @@
         <button
           onclick={() => handleSelect(token)}
           disabled={isDisabled}
-          class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm {isDisabled
-            ? 'cursor-not-allowed text-gray-500'
-            : 'text-white/80 hover:bg-white/20 hover:text-white'}"
+          class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-white/80 hover:bg-white/20 hover:text-white disabled:cursor-not-allowed disabled:bg-gray-500"
         >
           <img
             src={token.logo}