Display deducted and additional fees in separate fields

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

@@ -50,7 +50,6 @@
   .row {
     display: flex;
     justify-content: space-between;
-    align-items: center;
   }
 
   .title {
@@ -63,6 +62,10 @@
     gap: 4px;
 
     font-family: var(--monospace);
+
+    .icon {
+      color: var(--gray-2);
+    }
   }
 
   .edit {

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

@@ -2,7 +2,13 @@ import BigNumber from "bignumber.js"
 import { sentenceCase } from "change-case"
 import { useEffect, useMemo, useState } from "react"
 import { useDebounce, useLocalStorage } from "react-use"
-import { IconChevronDown, IconSettingFilled, IconWarningFilled } from "@initia/icons-react"
+import type { FeeJson } from "@skip-go/client"
+import {
+  IconChevronDown,
+  IconInfoFilled,
+  IconSettingFilled,
+  IconWarningFilled,
+} from "@initia/icons-react"
 import { useNavigate } from "@/lib/router"
 import { formatAmount, formatNumber, toQuantity } from "@/public/utils"
 import { useModal } from "@/public/app/ModalContext"
@@ -16,12 +22,18 @@ import ModalTrigger from "@/components/ModalTrigger"
 import FormHelp from "@/components/form/FormHelp"
 import PlainModalContent from "@/components/PlainModalContent"
 import AnimatedHeight from "@/components/AnimatedHeight"
+import WidgetTooltip from "@/components/WidgetTooltip"
 import { formatDuration, formatFees } from "./data/format"
 import type { FormValues } from "./data/form"
 import { FormValuesSchema, useBridgeForm } from "./data/form"
 import { useChainType, useSkipChain } from "./data/chains"
 import { useSkipAsset } from "./data/assets"
-import { useIsOpWithdrawable, useRouteErrorInfo, useRouteQuery } from "./data/simulate"
+import {
+  useIsOpWithdrawable,
+  useRouteErrorInfo,
+  useRouteQuery,
+  FeeBehaviorJson,
+} from "./data/simulate"
 import { useSkipBalance, useSkipBalancesQuery } from "./data/balance"
 import SelectedChainAsset from "./SelectedChainAsset"
 import BridgeAccount from "./BridgeAccount"
@@ -128,16 +140,33 @@ const BridgeFields = () => {
     navigate("/bridge/preview", { route, values })
   })
 
-  // disabled
+  // fees
+  const deductedFees = useMemo(() => {
+    return (
+      route?.estimated_fees?.filter(
+        ({ fee_behavior }) => fee_behavior === FeeBehaviorJson.FEE_BEHAVIOR_DEDUCTED,
+      ) ?? []
+    )
+  }, [route])
+
+  const additionalFees = useMemo(() => {
+    return (
+      route?.estimated_fees?.filter(
+        ({ fee_behavior }) => fee_behavior === FeeBehaviorJson.FEE_BEHAVIOR_ADDITIONAL,
+      ) ?? []
+    )
+  }, [route])
+
   const feeErrorMessage = useMemo(() => {
-    for (const fee of route?.estimated_fees ?? []) {
-      const balance = balances?.[fee.origin_asset.denom]?.amount
-      if (!balance || BigNumber(balance).lt(fee.amount ?? 0)) {
-        return `Insufficient ${fee.origin_asset.symbol} for fees`
-      }
+    for (const fee of additionalFees) {
+      const balance = balances?.[fee.origin_asset.denom]?.amount ?? "0"
+      const amount = route?.source_asset_denom === fee.origin_asset.denom ? route.amount_in : "0"
+      const insufficient = BigNumber(balance).lt(BigNumber(amount).plus(fee.amount ?? "0"))
+      if (insufficient) return `Insufficient ${fee.origin_asset.symbol} for fees`
     }
-  }, [balances, route])
+  }, [balances, route, additionalFees])
 
+  // disabled
   const disabledMessage = useMemo(() => {
     if (!values.sender) return "Connect wallet"
     if (!values.quantity) return "Enter amount"
@@ -147,8 +176,7 @@ const BridgeFields = () => {
     const result = FormValuesSchema.safeParse(values)
     if (!result.success) return `Invalid ${result.error.issues[0].path}`
     if (!route) return "Route not found"
-    // This should be enabled later when the fee behavior is defined by the backend
-    if (feeErrorMessage) return // feeErrorMessage
+    if (feeErrorMessage) return feeErrorMessage
   }, [debouncedQuantity, feeErrorMessage, formState, route, values])
 
   // render
@@ -158,6 +186,20 @@ const BridgeFields = () => {
     BigNumber(quantity).gt(0) &&
     BigNumber(quantity).isEqualTo(toQuantity(srcBalance?.amount, srcBalance?.decimals ?? 0))
 
+  const renderFees = (fees: FeeJson[], tooltip: string) => {
+    if (!fees.length) return null
+    return (
+      <div className={styles.description}>
+        {formatFees(fees)}
+        <WidgetTooltip label={tooltip}>
+          <span className={styles.icon}>
+            <IconInfoFilled size={12} />
+          </span>
+        </WidgetTooltip>
+      </div>
+    )
+  }
+
   return (
     <form className={styles.form} onSubmit={submit}>
       <ChainAssetQuantityLayout
@@ -237,10 +279,16 @@ const BridgeFields = () => {
             <AnimatedHeight>
               {route && (
                 <div className={styles.meta}>
-                  {formatFees(route.estimated_fees) && (
+                  {!!route.estimated_fees?.length && (
                     <div className={styles.row}>
-                      <span className={styles.title}>Estimated fees</span>
-                      <span className={styles.description}>{formatFees(route.estimated_fees)}</span>
+                      <span className={styles.title}>Fees</span>
+                      <div>
+                        {renderFees(deductedFees, "Fee deducted from the amount you receive")}
+                        {renderFees(
+                          additionalFees,
+                          "Fee charged in addition to the amount you enter",
+                        )}
+                      </div>
                     </div>
                   )}
 

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

@@ -120,7 +120,7 @@ const BridgeHistoryItem = ({ tx }: { tx: TxIdentifier }) => {
             <>
               <div className={styles.divider} />
               <div className={styles.item}>
-                <span>Fee</span>
+                <span>Fees</span>
                 <span>{formatFees(estimated_fees)}</span>
               </div>
             </>

packages/widget-react/src/pages/bridge/data/simulate.ts

@@ -109,3 +109,8 @@ export function useIsOpWithdrawable() {
       ?.metadata?.op_denoms?.includes(dstAsset.denom)
   )
 }
+
+export enum FeeBehaviorJson {
+  FEE_BEHAVIOR_DEDUCTED = "FEE_BEHAVIOR_DEDUCTED",
+  FEE_BEHAVIOR_ADDITIONAL = "FEE_BEHAVIOR_ADDITIONAL",
+}