Feat: crosschain lp

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "jpoissonnier.vscode-styled-components"]
+  "recommendations": ["dbaeumer.vscode-eslint", "jpoissonnier.vscode-styled-components"]
 }

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

@@ -7,8 +7,8 @@ import useElapsedTime from '@/hooks/useElapsedTime';
 import { cn } from '@/lib/utils';
 import { formatRelativeTime } from '@/utils';
 import { formatBalance } from '@/utils/formatter';
-import { getNetworkDisplayName, getTrackerLink } from '@balancednetwork/xwagmi';
-import { XTransaction, XTransactionStatus, XTransactionType } from '@balancednetwork/xwagmi';
+import { getNetworkDisplayName, getTrackerLink, isIconTransaction } from '@balancednetwork/xwagmi';
+import { XTransaction, XTransactionStatus } from '@balancednetwork/xwagmi';
 import { xMessageActions } from '@balancednetwork/xwagmi';
 import { CheckIcon, ExternalLink, Loader2Icon } from 'lucide-react';
 
@@ -54,7 +54,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

@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
 
-import { Percent } from '@balancednetwork/sdk-core';
-import { useXCallFee } from '@balancednetwork/xwagmi';
-import { XTransactionType } from '@balancednetwork/xwagmi';
-import { Trans } from '@lingui/macro';
-import BigNumber from 'bignumber.js';
-
 import SlippageSetting from '@/app/components/SlippageSetting';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { PRICE_IMPACT_WARNING_THRESHOLD } from '@/constants/misc';
 import { useSetSlippageTolerance, useSwapSlippageTolerance } from '@/store/application/hooks';
 import { useDerivedSwapInfo } from '@/store/swap/hooks';
 import { Field } from '@/store/swap/reducer';
 import { formatPercent } from '@/utils';
+import { Percent } from '@balancednetwork/sdk-core';
+import { isIconTransaction, useXCallFee } from '@balancednetwork/xwagmi';
+import { Trans } from '@lingui/macro';
+import BigNumber from 'bignumber.js';
 
 import { ChevronDownGradientIcon, ChevronUpGradientIcon } from '@/app/components/Icons';
 import { cn } from '@/lib/utils';
@@ -112,7 +110,7 @@ export default function AdvancedSwapDetails() {
             </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

@@ -14,7 +14,7 @@ import { Field } from '@/store/swap/reducer';
 import { formatBigNumber, formatElapsedTime } from '@/utils';
 import { Currency, TradeType } from '@balancednetwork/sdk-core';
 import { Trade } from '@balancednetwork/v1-sdk';
-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/store/lists/wrappedTokenInfo.ts

@@ -81,6 +81,10 @@ export class WrappedTokenInfo implements Token {
     return this;
   }
 
+  public get unwrapped(): Token {
+    return this;
+  }
+
   public get isNativeToken() {
     const nativeAddresses = [
       'cx0000000000000000000000000000000000000000',

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

@@ -17,7 +17,7 @@ import { DEFAULT_TOKEN_CHAIN, getSupportedXChainForSwapToken } from '@balancedne
 import { XChainId } from '@balancednetwork/xwagmi';
 import { isMobile } from 'react-device-detect';
 import { HorizontalList, Option } from '../List';
-import { CurrencySelectionType, SelectorType } from '../SearchModal/CurrencySearch';
+import { CurrencySelectionType } from '../SearchModal/CurrencySearch';
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal';
 import CrossChainOptions from '../trade/CrossChainOptions';
 import DollarValue from './DollarValue';
@@ -106,7 +106,6 @@ interface CurrencyInputPanelProps {
   className?: string;
   account?: string | null;
   showCommunityListControl?: boolean;
-  selectorType?: SelectorType;
   showDollarValue?: boolean;
   showWarning?: boolean;
 
@@ -134,7 +133,6 @@ export default function CurrencyInputPanel({
   className,
   account,
   showCommunityListControl = true,
-  selectorType,
   showDollarValue = true,
   showWarning = false,
 
@@ -178,10 +176,7 @@ export default function CurrencyInputPanel({
   const [xChainOptionsOpen, setXChainOptionsOpen] = React.useState(false);
   const xChains = useMemo(
     () =>
-      currencySelectionType === CurrencySelectionType.TRADE_MINT_BASE ||
-      currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE
-        ? []
-        : getSupportedXChainForSwapToken(currency),
+      currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE ? [] : getSupportedXChainForSwapToken(currency),
     [currency, currencySelectionType],
   );
 
@@ -190,19 +185,14 @@ export default function CurrencyInputPanel({
       onCurrencySelect && onCurrencySelect(currency);
 
       if (setDefaultChain && currency?.symbol) {
-        const xChains =
-          currencySelectionType === CurrencySelectionType.TRADE_MINT_BASE ||
-          currencySelectionType === CurrencySelectionType.TRADE_MINT_QUOTE
-            ? []
-            : getSupportedXChainForSwapToken(currency);
         const defaultXChainId = DEFAULT_TOKEN_CHAIN[currency.symbol];
         if (defaultXChainId && (xChains?.length ?? 0) > 1) {
           onChainSelect && onChainSelect(defaultXChainId);
           setTimeout(() => setXChainOptionsOpen(true), 100);
         }
       }
     },
-    [onCurrencySelect, onChainSelect, currencySelectionType],
+    [onCurrencySelect, onChainSelect, xChains],
   );
 
   return (
@@ -244,7 +234,6 @@ export default function CurrencyInputPanel({
                 showCommunityListControl={showCommunityListControl}
                 xChainId={xChainId}
                 showCrossChainBreakdown={showCrossChainBreakdown}
-                selectorType={selectorType}
               />
             )}
           </div>
@@ -303,6 +292,7 @@ export default function CurrencyInputPanel({
           width={width ? width + (!isMobile ? 40 : 0) : undefined}
           containerRef={ref.current}
           setManualAddress={setManualAddress}
+          showAddress={currencySelectionType !== CurrencySelectionType.TRADE_MINT_QUOTE}
         />
       )}
     </Box>

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

@@ -19,6 +19,7 @@ export const ModalContentWrapper = styled(Flex)`
 `;
 
 export default function ModalContent(props: Props) {
+  // TODO: deprecate
   const hasEnoughICX = useHasEnoughICX();
   const { noCurrencyBalanceErrorMessage, noMessages, children, ...rest } = props;
 

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

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { Currency, XChainId } from '@balancednetwork/sdk-core';
+import { Box } from 'rebass/styled-components';
+import styled, { css } from 'styled-components';
+
+import { xChainMap } from '@balancednetwork/xwagmi';
+import { ChainLogo } from '../ChainLogo';
+import CurrencyLogo from '../CurrencyLogo';
+
+const IconWrapper = styled(Box)<{ $respoVersion?: boolean }>`
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 1px solid rgb(12, 42, 77);
+  background-color: rgb(20, 74, 104);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ $respoVersion, theme }) =>
+    $respoVersion &&
+    css`
+      width: 30px;
+      height: 30px;
+
+      img {
+        width: 18px;
+        height: 18px;
+      }
+
+      ${theme.mediaWidth.upMedium`
+      width: 48px;
+      height: 48px;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    `}
+    `};
+`;
+
+const NetworkWrap = styled.div`
+  position: absolute;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  left: 50%;
+  bottom: 0;
+  margin-left: -7px;
+
+  background: #0c2a4d;
+  outline: 5px solid #0f395a;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`;
+
+export const PoolLogoWrapper = styled(Box)`
+position: relative;
+  display: flex;
+  min-width: 80px;
+`;
+
+function PoolLogoWithNetwork({
+  baseCurrency,
+  quoteCurrency,
+  respoVersion,
+  chainId,
+}: {
+  baseCurrency: Currency;
+  quoteCurrency: Currency;
+  respoVersion?: boolean;
+  chainId: XChainId;
+}) {
+  return (
+    <PoolLogoWrapper>
+      <IconWrapper $respoVersion={respoVersion}>
+        <CurrencyLogo currency={baseCurrency} />
+      </IconWrapper>
+      <IconWrapper ml={-2} $respoVersion={respoVersion}>
+        <CurrencyLogo currency={quoteCurrency} />
+      </IconWrapper>
+      <NetworkWrap>
+        <ChainLogo chain={xChainMap[chainId]} size="14px" />
+      </NetworkWrap>
+    </PoolLogoWrapper>
+  );
+}
+
+export default PoolLogoWithNetwork;

apps/web/src/app/components/RewardsDisplay/RewardsDisplay.tsx

@@ -7,6 +7,7 @@ import { PairData } from '@/queries/backendv2';
 import { useRatesWithOracle } from '@/queries/reward';
 import { Source } from '@/store/bbaln/hooks';
 import { formatValue } from '@/utils/formatter';
+import { XChainId } from '@balancednetwork/xwagmi';
 import { Trans } from '@lingui/macro';
 import BigNumber from 'bignumber.js';
 import React, { Fragment, useMemo } from 'react';
@@ -15,6 +16,7 @@ import styled from 'styled-components';
 
 type RewardsDisplayProps = {
   pair: PairData;
+  xChainId?: XChainId;
   boost?: {
     [x: string]: Source;
   };
@@ -79,9 +81,10 @@ const TooltipContent = ({
   </>
 );
 
-const RewardsDisplay: React.FC<RewardsDisplayProps> = ({ pair, boost }) => {
+const RewardsDisplay: React.FC<RewardsDisplayProps> = ({ pair, boost, xChainId }) => {
   const prices = useRatesWithOracle();
   const pairName = pair.name;
+  const isICON = xChainId === undefined || xChainId === '0x1.icon';
   const pairBoost = useMemo(() => {
     if (boost) {
       const pairBoostData = boost[pairName];
@@ -128,12 +131,14 @@ const RewardsDisplay: React.FC<RewardsDisplayProps> = ({ pair, boost }) => {
           <Typography color="#d5d7db" fontSize={14} marginRight={'5px'}>
             <Trans>BALN:</Trans>
           </Typography>
-          {pairBoost
-            ? `${formatValue((balnApy * pairBoost + externalApy).toFixed(4), false)}%`
-            : `${formatValue((balnApy + externalApy).toFixed(4), false)}% - ${formatValue(
-                (balnApy * 2.5 + externalApy).toFixed(4),
-                false,
-              )}%`}
+          {isICON
+            ? pairBoost
+              ? `${formatValue((balnApy * pairBoost + externalApy).toFixed(4), false)}%`
+              : `${formatValue((balnApy + externalApy).toFixed(4), false)}% - ${formatValue(
+                  (balnApy * 2.5 + externalApy).toFixed(4),
+                  false,
+                )}%`
+            : `${formatValue((balnApy + externalApy).toFixed(4), false)}%`}
         </APYItem>
       </Wrapper>
     );