Update history and bridge preview design

packages/widget-react/src/components/Image.tsx

@@ -23,6 +23,7 @@ const Image = ({ src, alt, placeholder, classNames, circle, ...attrs }: Props) =
     <Img
       {...attrs}
       className={clsx(attrs.className, { [styles.circle]: circle })}
+      style={{ width, height }}
       src={src}
       alt={alt}
       unloader={unloader}

packages/widget-react/src/components/Images.module.css

@@ -0,0 +1,13 @@
+.images {
+  flex: none;
+  position: relative;
+
+  .chain {
+    position: absolute;
+    bottom: 0;
+    right: -6px;
+
+    border-radius: 50%;
+    border: 1px solid var(--bg);
+  }
+}

packages/widget-react/src/components/Images.tsx

@@ -0,0 +1,18 @@
+import Image from "./Image"
+import styles from "./Images.module.css"
+
+interface Props {
+  assetLogoUrl?: string
+  chainLogoUrl?: string
+}
+
+const Images = ({ assetLogoUrl, chainLogoUrl }: Props) => {
+  return (
+    <div className={styles.images}>
+      <Image src={assetLogoUrl} width={36} height={36} />
+      <Image src={chainLogoUrl} width={18} height={18} className={styles.chain} />
+    </div>
+  )
+}
+
+export default Images

packages/widget-react/src/components/form/AssetOnChainButton.module.css

@@ -15,20 +15,6 @@
   overflow: hidden;
 }
 
-.logo {
-  flex: none;
-  position: relative;
-
-  .chain {
-    position: absolute;
-    bottom: 0;
-    right: -6px;
-
-    border-radius: 50%;
-    border: 1px solid var(--bg);
-  }
-}
-
 .details {
   flex: 1;
   overflow: hidden;

packages/widget-react/src/components/form/AssetOnChainButton.tsx

@@ -1,5 +1,5 @@
 import { IconChevronDown } from "@initia/icons-react"
-import Image from "../Image"
+import Images from "../Images"
 import type { BaseAsset, BaseChain } from "./types"
 import styles from "./AssetOnChainButton.module.css"
 
@@ -12,10 +12,7 @@ interface Props {
 const AssetOnChainButton = ({ asset, chain, readOnly }: Props) => {
   const content = (
     <div className={styles.content}>
-      <div className={styles.logo}>
-        <Image src={asset.logoUrl} width={36} height={36} />
-        <Image src={chain.logoUrl} width={18} height={18} className={styles.chain} />
-      </div>
+      <Images assetLogoUrl={asset.logoUrl} chainLogoUrl={chain.logoUrl} />
 
       <div className={styles.details}>
         <div className={styles.symbol}>{asset.symbol}</div>

packages/widget-react/src/pages/bridge/BridgeHistoryItem.module.css

@@ -3,7 +3,6 @@
 
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 20px;
 
   color: inherit;
@@ -20,8 +19,12 @@
 }
 
 .header {
-  display: grid;
-  gap: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-size: 12px;
+  font-weight: 500;
 
   .title {
     display: flex;
@@ -37,36 +40,16 @@
     color: var(--error);
   }
 
-  .badge {
-    background-color: var(--gray-6);
-    border-radius: 4px;
-    color: var(--gray-0);
-    font-size: 11px;
-    font-weight: 600;
-    padding: 2px 8px;
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 12px;
-
+  .date {
     color: var(--gray-2);
-    font-size: 12px;
-    font-weight: 500;
-    white-space: nowrap;
   }
 
-  .item {
+  .explorer {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
 
-    :last-of-type {
-      color: var(--gray-1);
-      font-family: var(--monospace);
-    }
+    color: var(--gray-3);
   }
 
   .divider {
@@ -76,6 +59,24 @@
   }
 }
 
+.fees {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  font-size: 12px;
+  font-weight: 500;
+
+  .label {
+    color: var(--gray-2);
+  }
+
+  .content {
+    color: var(--gray-1);
+    font-family: var(--monospace);
+  }
+}
+
 .route {
   display: grid;
   gap: 4px;
@@ -84,7 +85,7 @@
 .row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 
 .asset {
@@ -101,9 +102,19 @@
 }
 
 .chain {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
   color: var(--gray-2);
   font-size: 12px;
   font-weight: 500;
+
+  .account {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .arrow {

packages/widget-react/src/pages/bridge/BridgeHistoryItem.tsx

@@ -1,10 +1,18 @@
+import { useAccount } from "wagmi"
 import { intlFormatDistance } from "date-fns"
-import { useEffect, useMemo } from "react"
+import { useEffect, useMemo, type ReactNode } from "react"
 import type { StatusResponseJson } from "@skip-go/client"
-import { IconArrowDown, IconCheckCircleFilled, IconWarningFilled } from "@initia/icons-react"
-import { formatAmount, truncate } from "@/public/utils"
+import {
+  IconArrowDown,
+  IconCheckCircleFilled,
+  IconExternalLink,
+  IconWallet,
+  IconWarningFilled,
+} from "@initia/icons-react"
+import { AddressUtils, formatAmount, truncate } from "@/public/utils"
 import Loader from "@/components/Loader"
 import Image from "@/components/Image"
+import Images from "@/components/Images"
 import ExplorerLink from "@/components/ExplorerLink"
 import { formatFees } from "./data/format"
 import type { RouterChainJson } from "./data/chains"
@@ -14,6 +22,7 @@ import { useSkipAsset } from "./data/assets"
 import { BridgeType, getBridgeType, useTrackTxQuery, useTxStatusQuery } from "./data/tx"
 import type { TxIdentifier } from "./data/history"
 import { useBridgeHistoryDetails } from "./data/history"
+import { useCosmosWallets } from "./data/cosmos"
 import styles from "./BridgeHistoryItem.module.css"
 
 const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
@@ -28,6 +37,9 @@ const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
   const { data: txStatus } = useTxStatusQuery({ ...details, txHash: trackedTxHash })
   const state = details.state ?? getState(txStatus)
 
+  const { address: connectedAddress = "", connector } = useAccount()
+  const { find } = useCosmosWallets()
+
   useEffect(() => {
     if (trackedTxHash) {
       setDetails((prev) => {
@@ -74,7 +86,6 @@ const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
     source_asset_denom: srcDenom,
     dest_asset_chain_id: dstChainId,
     dest_asset_denom: dstDenom,
-    operations,
     estimated_fees = [],
   } = route
 
@@ -83,82 +94,101 @@ const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
   const srcAsset = useSkipAsset(srcDenom, srcChainId)
   const dstAsset = useSkipAsset(dstDenom, dstChainId)
 
+  const getWalletIcon = (address: string, image?: string) => {
+    if (image) {
+      return <Image src={image} width={12} height={12} />
+    }
+
+    if (AddressUtils.equals(address, connectedAddress)) {
+      return <Image src={connector?.icon} width={12} height={12} />
+    }
+
+    return <IconWallet size={12} />
+  }
+
   const renderRow = (
     amount: string,
     { symbol, decimals, logo_uri }: RouterAsset,
-    { chain_name, pretty_name }: RouterChainJson,
+    { chain_name, pretty_name, ...chain }: RouterChainJson,
     address: string,
+    walletIcon: ReactNode,
   ) => {
     return (
       <div className={styles.row}>
-        <Image src={logo_uri} width={32} height={32} />
+        <Images assetLogoUrl={logo_uri} chainLogoUrl={chain.logo_uri ?? undefined} />
         <div>
           <div className={styles.asset}>
             <span className={styles.amount}>{formatAmount(amount, { decimals })}</span>
             <span>{symbol}</span>
           </div>
           <div className={styles.chain}>
-            on {pretty_name || chain_name} <span className="monospace">({truncate(address)})</span>
+            <span>on {pretty_name || chain_name}</span>
+            <div className={styles.account}>
+              {walletIcon}
+              <span className="monospace">{truncate(address)}</span>
+            </div>
           </div>
         </div>
       </div>
     )
   }
 
   const type = getBridgeType(route)
+  const linkLabel = useMemo(() => {
+    switch (type) {
+      case BridgeType.SKIP:
+        return "Skip Explorer"
+      case BridgeType.OP_WITHDRAW:
+        return "Initia Scan"
+    }
+  }, [type])
 
   const content = (
     <>
       <header className={styles.header}>
         <div className={styles.title}>
           {renderIcon()}
-          <span className={styles.badge}>{type}</span>
+          <div className={styles.date}>
+            {intlFormatDistance(new Date(timestamp), new Date(), { locale: "en-US" })}
+          </div>
         </div>
-        <div className={styles.meta}>
-          <div>{intlFormatDistance(new Date(timestamp), new Date(), { locale: "en-US" })}</div>
-          {estimated_fees.length > 0 && (
-            <>
-              <div className={styles.divider} />
-              <div className={styles.item}>
-                <span>Fees</span>
-                <span>{formatFees(estimated_fees)}</span>
-              </div>
-            </>
-          )}
-          {operations.some((operation) => "swap" in operation) && (
-            <>
-              <div className={styles.divider} />
-              <div className={styles.item}>
-                <span>Slippage</span>
-                <span>{values.slippagePercent}%</span>
-              </div>
-            </>
-          )}
+        <div className={styles.explorer}>
+          <span>{linkLabel}</span>
+          <IconExternalLink size={12} />
         </div>
       </header>
 
       <div className={styles.route}>
-        {renderRow(amount_in, srcAsset, srcChain, values.sender)}
+        {renderRow(
+          amount_in,
+          srcAsset,
+          srcChain,
+          values.sender,
+          getWalletIcon(values.sender, find(values.cosmosWalletName)?.image),
+        )}
+
         <div className={styles.arrow}>
           <IconArrowDown size={12} />
         </div>
-        {renderRow(amount_out, dstAsset, dstChain, values.recipient)}
+
+        {renderRow(
+          amount_out,
+          dstAsset,
+          dstChain,
+          values.recipient,
+          getWalletIcon(values.recipient),
+        )}
       </div>
+
+      {estimated_fees.length > 0 && (
+        <div className={styles.fees}>
+          <span className={styles.label}>Fees</span>
+          <span className={styles.content}>{formatFees(estimated_fees)}</span>
+        </div>
+      )}
     </>
   )
 
-  const explorerLink = useMemo(() => {
-    switch (type) {
-      case BridgeType.LZ: {
-        return new URL(`/tx/${txHash.toLowerCase()}`, "https://layerzeroscan.com").toString()
-      }
-      case BridgeType.SKIP: {
-        const searchParams = new URLSearchParams({ tx_hash: txHash, chain_id: chainId })
-        return new URL(`?${searchParams.toString()}`, "https://explorer.skip.build").toString()
-      }
-    }
-  }, [chainId, txHash, type])
-
   if (type === BridgeType.OP_WITHDRAW) {
     return (
       <ExplorerLink chainId={chainId} txHash={txHash} className={styles.link}>
@@ -167,8 +197,11 @@ const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
     )
   }
 
+  const searchParams = new URLSearchParams({ tx_hash: txHash, chain_id: chainId })
+  const skipExplorerUrl = new URL(`?${searchParams.toString()}`, "https://explorer.skip.build")
+
   return (
-    <a href={explorerLink} className={styles.link} target="_blank">
+    <a href={skipExplorerUrl.toString()} className={styles.link} target="_blank">
       {content}
     </a>
   )