feat: omni view partner swap

src/components/CurrencyInputPanel/index.tsx

@@ -248,14 +248,14 @@ export default function CurrencyInputPanel({
 }: CurrencyInputPanelProps) {
   const tight = Boolean(tightProp && !currency)
   const [modalOpen, setModalOpen] = useState(false)
-  const { chainId, account } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
 
-  const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined)
+  const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined, customChainId)
   const balanceRef = useRef(selectedCurrencyBalance?.toSignificant(10))
 
   useEffect(() => {
     balanceRef.current = undefined
-  }, [chainId])
+  }, [customChainId])
 
   // Keep previous value of balance if rpc node was down
   useEffect(() => {

src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx

@@ -162,10 +162,10 @@ export default function DraggableNetworkButton({
       customOnSelectNetwork(chainId)
     } else if (getChainType(chainId) === getChainType(chainId)) {
       changeNetwork(chainId, () => {
-        const { inputCurrency, outputCurrency, ...rest } = qs
+        // const { inputCurrency, outputCurrency, ...rest } = qs
         navigate(
           {
-            search: stringify(rest),
+            search: stringify(qs),
           },
           { replace: true },
         )

src/components/SwapForm/InputCurrencyPanel.tsx

@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { useEffect } from 'react'
 
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
@@ -16,6 +16,7 @@ type Props = {
   balanceIn: CurrencyAmount<Currency> | undefined
   onChangeCurrencyIn: (c: Currency) => void
   setTypedValue: (v: string) => void
+  customChainId?: ChainId
 }
 const InputCurrencyPanel: React.FC<Props> = ({
   wrapType,
@@ -25,6 +26,7 @@ const InputCurrencyPanel: React.FC<Props> = ({
   currencyOut,
   balanceIn,
   onChangeCurrencyIn,
+  customChainId,
 }) => {
   const { isSolana } = useActiveWeb3React()
 
@@ -64,6 +66,7 @@ const InputCurrencyPanel: React.FC<Props> = ({
       dataTestId="swap-currency-input"
       showCommonBases={true}
       estimatedUsd={trade?.amountInUsd ? `${formattedNum(trade.amountInUsd.toString(), true)}` : undefined}
+      customChainId={customChainId}
     />
   )
 }

src/components/SwapForm/OutputCurrencyPanel.tsx

@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import React from 'react'
 import { Text } from 'rebass'
@@ -27,6 +27,7 @@ type Props = {
   amountOutUsd: string | undefined
 
   onChangeCurrencyOut: (c: Currency) => void
+  customChainId?: ChainId
 }
 
 const OutputCurrencyPanel: React.FC<Props> = ({
@@ -37,8 +38,10 @@ const OutputCurrencyPanel: React.FC<Props> = ({
   currencyOut,
   amountOutUsd,
   onChangeCurrencyOut,
+  customChainId,
 }) => {
-  const { chainId } = useActiveWeb3React()
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
 
   // showWrap = true if this swap is either WRAP or UNWRAP
   const showWrap: boolean = wrapType !== WrapType.NOT_APPLICABLE
@@ -101,6 +104,7 @@ const OutputCurrencyPanel: React.FC<Props> = ({
         </Label>
       }
       positionLabel="in"
+      customChainId={customChainId}
     />
   )
 }

src/components/SwapForm/SwapActionButton/index.tsx

@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
@@ -14,10 +14,12 @@ import { BuildRouteResult } from 'components/SwapForm/hooks/useBuildRoute'
 import { SwapCallbackError } from 'components/swapv2/styleds'
 import { useActiveWeb3React } from 'hooks'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { PermitState, usePermit } from 'hooks/usePermit'
 import useTheme from 'hooks/useTheme'
 import { WrapType } from 'hooks/useWrapCallback'
+import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import ApprovalModal from 'pages/SwapV3/ApprovalModal'
 import { ApplicationModal } from 'state/application/actions'
 import { useToggleModal, useWalletModalToggle } from 'state/application/hooks'
@@ -57,6 +59,7 @@ type Props = {
   setProcessingSwap: React.Dispatch<React.SetStateAction<boolean>>
   onWrap: (() => Promise<string | undefined>) | undefined
   buildRoute: () => Promise<BuildRouteResult>
+  customChainId?: ChainId
 }
 
 const SwapActionButton: React.FC<Props> = ({
@@ -80,9 +83,11 @@ const SwapActionButton: React.FC<Props> = ({
   setProcessingSwap,
   onWrap,
   buildRoute,
+  customChainId,
 }) => {
   const theme = useTheme()
-  const { account, walletKey } = useActiveWeb3React()
+  const { changeNetwork } = useChangeNetwork()
+  const { account, walletKey, chainId } = useActiveWeb3React()
   const { mixpanelHandler } = useMixpanel()
   const [errorWhileSwap, setErrorWhileSwap] = useState('')
   const noRouteFound = routeSummary && !routeSummary.route
@@ -199,6 +204,14 @@ const SwapActionButton: React.FC<Props> = ({
       )
     }
 
+    if (customChainId && customChainId !== chainId) {
+      return (
+        <ButtonLight onClick={() => changeNetwork(customChainId)}>
+          <Trans>Swich to {NETWORKS_INFO[customChainId].name}</Trans>
+        </ButtonLight>
+      )
+    }
+
     if (wrapInputError) {
       return <CustomPrimaryButton disabled>{wrapInputError}</CustomPrimaryButton>
     }

src/components/SwapForm/index.tsx

@@ -1,15 +1,17 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Box, Flex, Text } from 'rebass'
 import { parseGetRouteResponse } from 'services/route/utils'
 import styled from 'styled-components'
 
+import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import AddressInputPanel from 'components/AddressInputPanel'
+import NetworkModal from 'components/Header/web3/NetworkModal'
 import { Clock } from 'components/Icons'
 import { AutoRow } from 'components/Row'
 import SlippageWarningNote from 'components/SlippageWarningNote'
@@ -28,6 +30,7 @@ import TradePrice from 'components/swapv2/TradePrice'
 import { Wrapper } from 'components/swapv2/styleds'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
@@ -59,6 +62,21 @@ const PriceAlertButton = styled.div`
   align-items: center;
   height: fit-content;
 `
+
+const SelectNetwork = styled.div`
+  border: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${({ theme }) => theme.subText};
+  background: ${({ theme }) => theme.buttonBlack};
+  border-radius: 999px;
+  cursor: pointer;
+`
+
 export type SwapFormProps = {
   hidden: boolean
 
@@ -79,6 +97,8 @@ export type SwapFormProps = {
   onChangeCurrencyIn: (c: Currency) => void
   onChangeCurrencyOut: (c: Currency) => void
   goToSettingsView: () => void
+  customChainId?: ChainId
+  omniView?: boolean
 }
 
 const SwapForm: React.FC<SwapFormProps> = props => {
@@ -97,9 +117,12 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     permit,
     onChangeCurrencyIn,
     onChangeCurrencyOut,
+    customChainId,
+    omniView,
   } = props
 
-  const { isEVM, isSolana, chainId } = useActiveWeb3React()
+  const { isEVM, isSolana, chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const navigate = useNavigate()
   const [isProcessingSwap, setProcessingSwap] = useState(false)
   const { typedValue } = useSwapState()
@@ -120,7 +143,11 @@ const SwapForm: React.FC<SwapFormProps> = props => {
   }, [onUserInput])
 
   const parsedAmount = useParsedAmount(currencyIn, typedValue)
-  const { wrapType, inputError: wrapInputError, execute: onWrap } = useWrapCallback(currencyIn, currencyOut, typedValue)
+  const {
+    wrapType,
+    inputError: wrapInputError,
+    execute: onWrap,
+  } = useWrapCallback(currencyIn, currencyOut, typedValue, false, customChainId)
   const isWrapOrUnwrap = wrapType !== WrapType.NOT_APPLICABLE
 
   const isStablePairSwap = useCheckStablePairSwap(currencyIn, currencyOut)
@@ -131,6 +158,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     isSaveGas,
     parsedAmount,
     isProcessingSwap,
+    customChain: chainId,
   })
 
   const { data: getRouteRawResponse, isFetching: isGettingRoute, error: getRouteError } = result
@@ -161,14 +189,6 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     parsedAmountFromTypedValue: parsedAmount,
   })
 
-  const handleChangeCurrencyIn = (c: Currency) => {
-    onChangeCurrencyIn(c)
-  }
-
-  const handleChangeCurrencyOut = (c: Currency) => {
-    onChangeCurrencyOut(c)
-  }
-
   const isSolanaUnwrap = isSolana && wrapType === WrapType.UNWRAP
   useEffect(() => {
     // reset value for unwrapping WSOL
@@ -181,6 +201,9 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     setRouteSummary(routeSummary)
   }, [routeSummary, setRouteSummary])
 
+  const [isOpenNetworkModal, setIsOpenNetworkModal] = useState(false)
+  const [searchParams, setSearchParams] = useSearchParams()
+
   return (
     <SwapFormContextProvider
       slippage={slippage}
@@ -191,17 +214,41 @@ const SwapForm: React.FC<SwapFormProps> = props => {
       isStablePairSwap={isStablePairSwap}
       isAdvancedMode={isDegenMode}
     >
+      <NetworkModal
+        selectedId={chainId}
+        customOnSelectNetwork={chain => {
+          searchParams.set('chainId', chain.toString())
+          setSearchParams(searchParams)
+        }}
+        isOpen={isOpenNetworkModal}
+        customToggleModal={() => setIsOpenNetworkModal(prev => !prev)}
+      />
+
       <Box sx={{ flexDirection: 'column', gap: '16px', display: hidden ? 'none' : 'flex' }}>
         <Wrapper id={TutorialIds.SWAP_FORM_CONTENT}>
           <Flex flexDirection="column" sx={{ gap: '0.75rem' }}>
+            {omniView ? (
+              <Flex justifyContent="space-between" alignItems="center">
+                <Text fontSize={12} fontWeight="500" color={theme.subText}>
+                  <Trans>Choose a chain</Trans>
+                </Text>
+
+                <SelectNetwork role="button" onClick={() => setIsOpenNetworkModal(true)}>
+                  <img src={NETWORKS_INFO[chainId].icon} alt="Network" style={{ height: '20px', width: '20px' }} />
+                  <Text>{NETWORKS_INFO[chainId].name}</Text>
+                  <DropdownSVG />
+                </SelectNetwork>
+              </Flex>
+            ) : null}
             <InputCurrencyPanel
               wrapType={wrapType}
               typedValue={typedValue}
               setTypedValue={onUserInput}
               currencyIn={currencyIn}
               currencyOut={currencyOut}
               balanceIn={balanceIn}
-              onChangeCurrencyIn={handleChangeCurrencyIn}
+              onChangeCurrencyIn={onChangeCurrencyIn}
+              customChainId={customChainId}
             />
 
             <AutoRow justify="space-between">
@@ -239,7 +286,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
                     )}
                   </PriceAlertButton>
                 )}
-                <ReverseTokenSelectionButton onClick={() => currencyIn && handleChangeCurrencyOut(currencyIn)} />
+                <ReverseTokenSelectionButton onClick={() => currencyIn && onChangeCurrencyOut(currencyIn)} />
               </Flex>
             </AutoRow>
 
@@ -250,7 +297,8 @@ const SwapForm: React.FC<SwapFormProps> = props => {
               currencyIn={currencyIn}
               currencyOut={currencyOut}
               amountOutUsd={routeSummary?.amountOutUsd}
-              onChangeCurrencyOut={handleChangeCurrencyOut}
+              onChangeCurrencyOut={onChangeCurrencyOut}
+              customChainId={customChainId}
             />
 
             {isDegenMode && isEVM && !isWrapOrUnwrap && (
@@ -284,6 +332,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
             onWrap={onWrap}
             buildRoute={buildRoute}
             swapInputError={swapInputError}
+            customChainId={customChainId}
           />
 
           {!isWrapOrUnwrap && <TradeSummary routeSummary={routeSummary} slippage={slippage} />}

src/components/TradeRouting/index.tsx

@@ -122,10 +122,20 @@ interface RoutingProps {
   currencyOut: Currency | undefined
   inputAmount: CurrencyAmount<Currency> | undefined
   outputAmount: CurrencyAmount<Currency> | undefined
+  customChainId?: ChainId
 }
 
-const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, currencyIn, currencyOut }: RoutingProps) => {
-  const { chainId } = useActiveWeb3React()
+const Routing = ({
+  customChainId,
+  tradeComposition,
+  maxHeight,
+  inputAmount,
+  outputAmount,
+  currencyIn,
+  currencyOut,
+}: RoutingProps) => {
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const shadowRef = useRef<HTMLDivElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -197,7 +207,7 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
 }
 
 const TokenRoute = ({ token }: { token: Token }) => {
-  const currency = useCurrencyV2(token.wrapped.address)
+  const currency = useCurrencyV2(token.wrapped.address, token.chainId)
   return (
     <StyledToken
       style={{ marginRight: 0 }}