Implement QuoteSteps

Author: neikop

apps/kyberswap-interface/.env.production

@@ -50,4 +50,4 @@ VITE_AFFILIATE_SERVICE=https://affiliate-service.kyberswap.com/api
 VITE_SOLANA_RPC=https://solana.kyberengineering.io
 
 VITE_SMART_EXIT_API_URL=https://conditional-order.kyberswap.com/api
-VITE_CROSSCHAIN_AGGREGATOR_API=https://crosschain-aggregator.kyberswap.com
+VITE_CROSSCHAIN_AGGREGATOR_API=https://pre-crosschain-aggregator.kyberengineering.io

apps/kyberswap-interface/src/assets/images/kyberswap.ico

@@ -9,7 +9,7 @@ import { Text } from 'rebass'
 import { useGetListOrdersQuery } from 'services/limitOrder'
 import styled from 'styled-components'
 
-import { ReactComponent as NoDataIcon } from 'assets/svg/no-data.svg'
+import { ReactComponent as NoDataIcon } from 'assets/svg/no_data.svg'
 import { ButtonLight } from 'components/Button'
 import Column from 'components/Column'
 import LocalLoader from 'components/LocalLoader'

…wap-interface/src/assets/svg/no-data.svg …wap-interface/src/assets/svg/no_data.svgapps/kyberswap-interface/src/assets/svg/no-data.svg renamed to apps/kyberswap-interface/src/assets/svg/no_data.svg apps/kyberswap-interface/src/assets/svg/no-data.svg renamed to apps/kyberswap-interface/src/assets/svg/no_data.svg

@@ -8,7 +8,7 @@ import { Text } from 'rebass'
 import { useGetOrdersByTokenPairQuery } from 'services/limitOrder'
 import styled, { CSSProperties } from 'styled-components'
 
-import { ReactComponent as NoDataIcon } from 'assets/svg/no-data.svg'
+import { ReactComponent as NoDataIcon } from 'assets/svg/no_data.svg'
 import LocalLoader from 'components/LocalLoader'
 import RefreshLoading from 'components/RefreshLoading'
 import { useActiveWeb3React } from 'hooks'

apps/kyberswap-interface/src/assets/svg/no_transaction.svg

@@ -579,7 +579,7 @@ export class KyberAcrossAdapter extends BaseSwapAdapter {
           })
 
           const approveTxHash = await walletClient.sendTransaction({
-            account: walletClient.account!,
+            account: walletClient.account || ('0x0' as Address),
             chain: originChain,
             to: swapAndDepositData.swapToken,
             data: approveCalldata,

apps/kyberswap-interface/src/components/swapv2/LimitOrder/ListOrder/index.tsx

@@ -3,13 +3,11 @@ import { getPublicClient } from '@wagmi/core'
 import routeApi from 'services/route'
 import { WalletClient, formatUnits } from 'viem'
 
+import kyberswapIcon from 'assets/images/kyberswap.ico'
 import { wagmiConfig } from 'components/Web3Provider'
 import { AGGREGATOR_API } from 'constants/env'
 import { AGGREGATOR_API_PATHS, ETHER_ADDRESS } from 'constants/index'
 import { MAINNET_NETWORKS, NETWORKS_INFO } from 'constants/networks'
-import store from 'state'
-
-import { Quote } from '../registry'
 import {
   BaseSwapAdapter,
   Chain,
@@ -18,7 +16,9 @@ import {
   NormalizedQuote,
   NormalizedTxResponse,
   SwapStatus,
-} from './BaseSwapAdapter'
+} from 'pages/CrossChainSwap/adapters/BaseSwapAdapter'
+import { Quote } from 'pages/CrossChainSwap/registry'
+import store from 'state'
 
 export class KyberSwapAdapter extends BaseSwapAdapter {
   constructor() {
@@ -29,7 +29,7 @@ export class KyberSwapAdapter extends BaseSwapAdapter {
     return 'KyberSwap'
   }
   getIcon(): string {
-    return 'https://kyberswap.com/favicon.ico'
+    return kyberswapIcon
   }
   getSupportedChains(): Chain[] {
     return [...MAINNET_NETWORKS].filter(item => !NOT_SUPPORTED_CHAINS_PRICE_SERVICE.includes(item))

apps/kyberswap-interface/src/components/swapv2/LimitOrder/OrderBook/index.tsx

@@ -22,18 +22,17 @@ import { ETHER_ADDRESS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
 import useTracking, { CROSS_CHAIN_MIXPANEL_TYPE, TRACKING_EVENT_TYPE, useCrossChainMixpanel } from 'hooks/useTracking'
+import { Chain, Currency, NonEvmChain, NonEvmChainInfo } from 'pages/CrossChainSwap/adapters'
+import { PiWarning } from 'pages/CrossChainSwap/components/PiWarning'
+import { QuoteProviderName } from 'pages/CrossChainSwap/components/QuoteProviderName'
+import { Summary } from 'pages/CrossChainSwap/components/Summary'
+import { useCrossChainSwap } from 'pages/CrossChainSwap/hooks/useCrossChainSwap'
+import { getChainName } from 'pages/CrossChainSwap/utils'
 import { useCrossChainTransactions } from 'state/crossChainSwap'
 import { ExternalLink } from 'theme'
 import { getEtherscanLink, isEvmChain, shortenHash } from 'utils'
 import { formatDisplayNumber } from 'utils/numbers'
 
-import { Chain, Currency, NonEvmChain, NonEvmChainInfo } from '../adapters'
-import { useCrossChainSwap } from '../hooks/useCrossChainSwap'
-import { getChainName } from '../utils'
-import { PiWarning } from './PiWarning'
-import { Tag } from './QuoteSelector'
-import { Summary } from './Summary'
-
 const Wrapper = styled.div`
   padding: 1rem;
   display: flex;
@@ -434,8 +433,10 @@ export const ConfirmationPopup = ({ isOpen, onDismiss }: { isOpen: boolean; onDi
             <PiWarning />
 
             <Text marginY="1rem" fontStyle="italic" color={'#737373'} fontSize={12} display="flex" alignItems="center">
-              <Trans>Routed via {selectedQuote.adapter.getName()}</Trans>
-              {selectedQuote.adapter.getName() === 'Optimex' && <Tag>{t`Beta`}</Tag>}
+              <Text as="span" mr="4px">
+                <Trans>Routed via</Trans>
+              </Text>
+              <QuoteProviderName quote={selectedQuote} />
             </Text>
 
             <ButtonPrimary onClick={handleSwap}>{t`Confirm Swap`}</ButtonPrimary>

apps/kyberswap-interface/src/pages/CrossChainSwap/adapters/KyberAcrossAdapter.ts

@@ -0,0 +1,62 @@
+import { t } from '@lingui/macro'
+import React from 'react'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+
+import { SwapProvider } from 'pages/CrossChainSwap/adapters'
+import { registry } from 'pages/CrossChainSwap/hooks/useCrossChainSwap'
+import { Quote } from 'pages/CrossChainSwap/registry'
+
+const Tag = styled.div`
+  background-color: ${({ theme }) => theme.subText + '33'};
+  color: ${({ theme }) => theme.text};
+  border-radius: 999px;
+  margin-left: 4px;
+  font-size: 10px;
+  padding: 2px 6px;
+`
+
+const getStepProviders = (quote: Quote): SwapProvider[] => {
+  if (quote.adapter.getName().toLowerCase() !== 'kyberacross') return []
+
+  const steps = quote.quote.rawQuote?.steps
+  if (!Array.isArray(steps)) return []
+
+  return steps
+    .map(step => {
+      const providerName = typeof step?.provider === 'string' ? step.provider : null
+      const providerAdapter = registry.getAdapter(providerName)
+      return providerAdapter
+    })
+    .filter(Boolean) as SwapProvider[]
+}
+
+export const QuoteProviderName = ({ quote }: { quote: Quote }) => {
+  const stepProviders = getStepProviders(quote)
+  const adapter = quote.adapter
+
+  if (stepProviders.length > 0) {
+    return (
+      <>
+        {stepProviders.map((provider, index) => (
+          <React.Fragment key={provider.getName()}>
+            {index > 0 && <Text mx="4px">+</Text>}
+            <img src={provider.getIcon()} alt={provider.getName()} width={14} height={14} />
+            <Text ml="4px">{provider.getName()}</Text>
+          </React.Fragment>
+        ))}
+      </>
+    )
+  }
+
+  const adapterName = adapter.getName()
+  const isBeta = adapterName === 'Optimex'
+
+  return (
+    <>
+      <img src={adapter.getIcon()} alt={adapterName} width={14} height={14} />
+      <Text ml="4px">{adapterName}</Text>
+      {isBeta && <Tag>{t`Beta`}</Tag>}
+    </>
+  )
+}