Feat: crosschain lp

apps/hswap/src/app/components/WalletModal/HistoryItem.tsx

@@ -3,7 +3,7 @@ import { ExclamationIcon } from '@/app/components2/Icons';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 import { formatBalance } from '@/utils/formatter';
-import { getNetworkDisplayName, getTrackerLink } from '@balancednetwork/xwagmi';
+import { getNetworkDisplayName, getTrackerLink, isIconTransaction } from '@balancednetwork/xwagmi';
 import { XTransaction, XTransactionStatus, XTransactionType } from '@balancednetwork/xwagmi';
 import { xMessageActions } from '@balancednetwork/xwagmi';
 import { CheckIcon, ExternalLink, Loader2Icon, XIcon } from 'lucide-react';
@@ -89,7 +89,7 @@ const HistoryItem = ({ xTransaction }: HistoryItemProps) => {
           </div>
           <a
             href={
-              xTransaction.type === XTransactionType.SWAP_ON_ICON
+              isIconTransaction(xTransaction.sourceChainId, xTransaction.finalDestinationChainId)
                 ? getTrackerLink('0x1.icon', xTransaction.id.split('/')[1])
                 : `https://xcallscan.xyz/messages/search?value=${primaryMessage?.destinationTransactionHash || primaryMessage?.sourceTransactionHash}`
             }

apps/hswap/src/app/pages/trade/xswap/_components/AdvancedSwapDetails.tsx

@@ -11,7 +11,7 @@ import { useSetSlippageTolerance, useSwapSlippageTolerance } from '@/store/appli
 import { useDerivedSwapInfo } from '@/store/swap/hooks';
 import { Field } from '@/store/swap/reducer';
 import { formatPercent } from '@/utils';
-import { useXCallFee } from '@balancednetwork/xwagmi';
+import { isIconTransaction, useXCallFee } from '@balancednetwork/xwagmi';
 import BigNumber from 'bignumber.js';
 
 import CurrencyLogoWithNetwork from '@/app/components2/CurrencyLogoWithNetwork';
@@ -124,7 +124,7 @@ export default function AdvancedSwapDetails({ xTransactionInput }: { xTransactio
             </span>
           </div>
 
-          {xTransactionType !== XTransactionType.SWAP_ON_ICON && (
+          {!isIconTransaction(direction.from, direction.to) && (
             <div className="flex items-center justify-between">
               <span className="text-[#d4c5f9] text-sm font-medium flex items-center gap-1">
                 <Trans>Bridge Fee</Trans>

apps/hswap/src/app/pages/trade/xswap/_components/XSwapModal.tsx

@@ -11,7 +11,7 @@ import { ApprovalState } from '@/hooks/useApproveCallback';
 import { useEvmSwitchChain } from '@/hooks/useEvmSwitchChain';
 import { Field } from '@/store/swap/reducer';
 import { formatBigNumber } from '@/utils';
-import { xChainMap } from '@balancednetwork/xwagmi';
+import { isIconTransaction, xChainMap } from '@balancednetwork/xwagmi';
 import { XToken } from '@balancednetwork/xwagmi';
 import { useXCallFee } from '@balancednetwork/xwagmi';
 import { XTransactionInput, XTransactionStatus, XTransactionType } from '@balancednetwork/xwagmi';
@@ -164,7 +164,7 @@ const XSwapModal = ({
                   </span>
                 </div>
               )}
-              {xTransactionType !== XTransactionType.SWAP_ON_ICON && (
+              {!isIconTransaction(currentXTransaction?.sourceChainId, currentXTransaction?.finalDestinationChainId) && (
                 <div className="flex justify-between">
                   <span className="text-[#d4c5f9] text-sm font-medium">Bridge Fee</span>
                   <span className="text-white text-sm">{formattedXCallFee}</span>

apps/hswap/src/hooks/useSendXTransaction.ts

@@ -10,6 +10,7 @@ import {
   XTransactionType,
   allXTokens,
   getXWalletClient,
+  isIconTransaction,
   transactionActions,
   useSignTransaction,
   xChainHeightActions,
@@ -98,7 +99,7 @@ const sendXTransaction = async (xTransactionInput: XTransactionInput, options: a
   };
   xTransactionActions.add(xTransaction);
 
-  if (xTransactionInput.type !== XTransactionType.SWAP_ON_ICON) {
+  if (!isIconTransaction(sourceChainId, finalDestinationChainId)) {
     const xMessage: XMessage = {
       id: `${sourceChainId}/${sourceTransactionHash}`,
       xTransactionId: xTransaction.id,

apps/web/src/app/components/CurrencyInputPanel/index.tsx

@@ -179,10 +179,7 @@ export default function CurrencyInputPanel({
   const [xChainOptionsOpen, setXChainOptionsOpen] = React.useState(false);
   const xChains = useMemo(
     () =>
-      currencySelectionType === CurrencySelectionType.TRADE_MINT_BASE ||
-      currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE
-        ? []
-        : getSupportedXChainForToken(currency),
+      currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE ? [] : getSupportedXChainForToken(currency),
     [currency, currencySelectionType],
   );
 
@@ -192,10 +189,7 @@ export default function CurrencyInputPanel({
 
       if (setDefaultChain && currency?.symbol) {
         const xChains =
-          currencySelectionType === CurrencySelectionType.TRADE_MINT_BASE ||
-          currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE
-            ? []
-            : getSupportedXChainForToken(currency);
+          currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE ? [] : getSupportedXChainForToken(currency);
         const defaultXChainId = DEFAULT_TOKEN_CHAIN[currency.symbol];
         if (defaultXChainId && (xChains?.length ?? 0) > 1) {
           onChainSelect && onChainSelect(defaultXChainId);

apps/web/src/app/pages/trade/supply/_components/LPDescription.tsx

@@ -9,7 +9,7 @@ import { useMedia } from 'react-use';
 import { Box, Flex } from 'rebass/styled-components';
 
 import { Typography } from '@/app/theme';
-import { PairState, useBalance, useSuppliedTokens } from '@/hooks/useV2Pairs';
+import { PairState, useBalance, usePool, usePoolTokenAmounts, useSuppliedTokens } from '@/hooks/useV2Pairs';
 import { useAllPairsByName } from '@/queries/backendv2';
 import { useICXConversionFee, useRatesWithOracle } from '@/queries/reward';
 import { useBBalnAmount, useResponsivePoolRewardShare, useSources } from '@/store/bbaln/hooks';
@@ -24,16 +24,20 @@ import { formatBigNumber } from '@/utils';
 import QuestionHelper, { QuestionWrapper } from '@/app/components/QuestionHelper';
 import { MAX_BOOST } from '@/app/components/home/BBaln/utils';
 import { formatBalance } from '@/utils/formatter';
+import { getXChainType, useXAccount } from '@balancednetwork/xwagmi';
 
 export default function LPDescription() {
-  const { currencies, pair, pairState, dependentField, noLiquidity, parsedAmounts } = useDerivedMintInfo();
+  const { currencies, pair, pairState, dependentField, noLiquidity, parsedAmounts, lpXChainId } = useDerivedMintInfo();
+  const xAccount = useXAccount(getXChainType(lpXChainId));
+  const pool = usePool(pair?.poolId, `${lpXChainId}/${xAccount?.address}`);
+
   const { independentField, typedValue, otherTypedValue } = useMintState();
   const sources = useSources();
   const getResponsiveRewardShare = useResponsivePoolRewardShare();
   const { account } = useIconReact();
   const upSmall = useMedia('(min-width: 600px)');
   const { data: icxConversionFee } = useICXConversionFee();
-  const userPoolBalance = useLiquidityTokenBalance(account, pair);
+  const userPoolBalance = useLiquidityTokenBalance(`${lpXChainId}/${xAccount?.address}`, pair);
   const totalPoolTokens = pair?.totalSupply;
   const token0Deposited =
     !!pair &&
@@ -65,6 +69,7 @@ export default function LPDescription() {
     currencies[Field.CURRENCY_A],
     pair?.isQueue ? pair?.token1 : currencies[Field.CURRENCY_B],
   );
+  const [baseAmount, quoteAmount] = usePoolTokenAmounts(pool);
 
   const userPoolBalances = useBalance(pair?.poolId || -1);
 
@@ -105,10 +110,10 @@ export default function LPDescription() {
   }, []);
 
   const baseCurrencyTotalSupply = useMemo(
-    () => new BigNumber(totalSupply(baseValue, balances?.base)?.toFixed() || '0'),
-    [totalSupply, baseValue, balances?.base],
+    () => new BigNumber(totalSupply(baseValue, baseAmount)?.toFixed() || '0'),
+    [totalSupply, baseValue, baseAmount],
   );
-  const quoteCurrencyTotalSupply = new BigNumber(totalSupply(quoteValue, balances?.quote)?.toFixed() || '0');
+  const quoteCurrencyTotalSupply = new BigNumber(totalSupply(quoteValue, quoteAmount)?.toFixed() || '0');
 
   const responsiveRewardShare = useMemo(
     () =>

apps/web/src/app/pages/trade/supply/_components/LPPanel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useIconReact } from '@/packages/icon-react';
 import Nouislider from '@/packages/nouislider-react';
@@ -39,7 +39,18 @@ function subtract(
 ): CurrencyAmount<Currency> | undefined {
   if (!amountA) return undefined;
   if (!amountB) return amountA;
-  const diff = new Fraction(`${amountA.quotient}`).subtract(new Fraction(`${amountB.quotient}`));
+
+  let diff;
+  if (amountA.decimalScale !== amountB.decimalScale) {
+    // TODO: use the defined function in utils
+    const amountBConverted = CurrencyAmount.fromRawAmount(
+      amountA.currency,
+      new BigNumber(amountB.toFixed()).times((10n ** BigInt(amountA.currency.decimals)).toString()).toFixed(0),
+    );
+    diff = new Fraction(amountA.numerator).subtract(amountBConverted);
+  } else {
+    diff = new Fraction(`${amountA.quotient}`).subtract(new Fraction(`${amountB.quotient}`));
+  }
   return CurrencyAmount.fromRawAmount(amountA.currency, diff.quotient);
 }
 
@@ -134,8 +145,10 @@ export default function LPPanel() {
     pairState,
     liquidityMinted,
     mintableLiquidity,
+    lpXChainId,
   } = useDerivedMintInfo(crossChainCurrencyA, crossChainCurrencyB);
-  const { onFieldAInput, onFieldBInput, onSlide, onCurrencySelection } = useMintActionHandlers(noLiquidity);
+  const { onFieldAInput, onFieldBInput, onSlide, onCurrencySelection, onChainSelection } =
+    useMintActionHandlers(noLiquidity);
 
   const sliderInstance = React.useRef<any>(null);
 
@@ -177,7 +190,8 @@ export default function LPPanel() {
       if (balanceA && balanceB && pair && pair.reserve0 && pair.reserve1) {
         const p = new Percent(Math.floor(percent * 100), 10_000);
 
-        if (isNativeCurrency(currencies[Field.CURRENCY_A])) {
+        if (currencies[Field.CURRENCY_A]?.isNativeToken) {
+          // TODO: is ICX?
           onSlide(Field.CURRENCY_A, percent !== 0 ? balanceA.multiply(p).toFixed() : '');
         } else {
           const field = balanceA.multiply(pair?.reserve1).lessThan(balanceB.multiply(pair?.reserve0))
@@ -213,7 +227,7 @@ export default function LPPanel() {
     (accumulator, field) => {
       return {
         ...accumulator,
-        [field]: maxAmountSpend(currencyBalances[field]),
+        [field]: maxAmountSpend(currencyBalances[field], lpXChainId),
       };
     },
     {},
@@ -244,6 +258,13 @@ export default function LPPanel() {
 
   const isQueue = isNativeCurrency(currencies[Field.CURRENCY_A]);
 
+  const handleLPChainSelection = useCallback(
+    (xChainId: XChainId) => {
+      onChainSelection(Field.CURRENCY_A, xChainId);
+    },
+    [onChainSelection],
+  );
+
   return (
     <>
       <SectionPanel bg="bg2">
@@ -272,9 +293,10 @@ export default function LPPanel() {
                   onUserInput={handleTypeAInput}
                   onCurrencySelect={handleCurrencyASelect}
                   onPercentSelect={handlePercentSelect(Field.CURRENCY_A)}
-                  xChainId={'0x1.icon'}
+                  xChainId={currencies[Field.CURRENCY_A]?.xChainId}
+                  onChainSelect={handleLPChainSelection}
                   showCrossChainOptions={true}
-                  showCrossChainBreakdown={false}
+                  showCrossChainBreakdown={true}
                   selectorType={SelectorType.SUPPLY_BASE}
                 />
               </Flex>
@@ -290,7 +312,7 @@ export default function LPPanel() {
                   onUserInput={handleTypeBInput}
                   onCurrencySelect={handleCurrencyBSelect}
                   onPercentSelect={handlePercentSelect(Field.CURRENCY_B)}
-                  xChainId={'0x1.icon'}
+                  xChainId={currencies[Field.CURRENCY_B]?.xChainId}
                   showCrossChainOptions={true}
                   showCrossChainBreakdown={false}
                   selectorType={SelectorType.SUPPLY_QUOTE}
@@ -376,8 +398,6 @@ export default function LPPanel() {
         onClose={handleSupplyConfirmDismiss}
         parsedAmounts={amounts}
         currencies={currencies}
-        AChain={crossChainCurrencyA}
-        BChain={crossChainCurrencyB}
       />
     </>
   );