Skip to content

Commit 6320193

Browse files
neikopneikop
committed
Add QuoteProviderName
1 parent f1ac7d9 commit 6320193

File tree

4 files changed

+82
-60
lines changed

4 files changed

+82
-60
lines changed

‎apps/kyberswap-interface/src/pages/CrossChainSwap/components/ConfirmationPopup.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,17 @@ import { useBitcoinWallet } from 'components/Web3Provider/BitcoinProvider'
2121
import { NETWORKS_INFO } from 'constants/networks'
2222
import { CROSS_CHAIN_MIXPANEL_TYPE, useCrossChainMixpanel } from 'hooks/useMixpanel'
2323
import useTheme from 'hooks/useTheme'
24+
import { Chain, Currency, NonEvmChain, NonEvmChainInfo } from 'pages/CrossChainSwap/adapters'
25+
import { PiWarning } from 'pages/CrossChainSwap/components/PiWarning'
26+
import { QuoteProviderName } from 'pages/CrossChainSwap/components/QuoteProviderName'
27+
import { Summary } from 'pages/CrossChainSwap/components/Summary'
28+
import { useCrossChainSwap } from 'pages/CrossChainSwap/hooks/useCrossChainSwap'
29+
import { getChainName } from 'pages/CrossChainSwap/utils'
2430
import { useCrossChainTransactions } from 'state/crossChainSwap'
2531
import { ExternalLink } from 'theme'
2632
import { getEtherscanLink, isEvmChain, shortenHash } from 'utils'
2733
import { formatDisplayNumber } from 'utils/numbers'
2834

29-
import { Chain, Currency, NonEvmChain, NonEvmChainInfo } from '../adapters'
30-
import { useCrossChainSwap } from '../hooks/useCrossChainSwap'
31-
import { getChainName } from '../utils'
32-
import { PiWarning } from './PiWarning'
33-
import { Tag } from './QuoteSelector'
34-
import { Summary } from './Summary'
35-
3635
const Wrapper = styled.div`
3736
padding: 1rem;
3837
display: flex;
@@ -407,8 +406,10 @@ export const ConfirmationPopup = ({ isOpen, onDismiss }: { isOpen: boolean; onDi
407406
<PiWarning />
408407

409408
<Text marginY="1rem" fontStyle="italic" color={'#737373'} fontSize={12} display="flex" alignItems="center">
410-
<Trans>Routed via {selectedQuote.adapter.getName()}</Trans>
411-
{selectedQuote.adapter.getName() === 'Optimex' && <Tag>{t`Beta`}</Tag>}
409+
<Text as="span" mr="4px">
410+
<Trans>Routed via</Trans>
411+
</Text>
412+
<QuoteProviderName quote={selectedQuote} />
412413
</Text>
413414

414415
<ButtonPrimary onClick={handleSwap}>{t`Confirm Swap`}</ButtonPrimary>

‎apps/kyberswap-interface/src/pages/CrossChainSwap/components/QuoteProviderName.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { t } from '@lingui/macro'
2+
import React from 'react'
3+
import { Text } from 'rebass'
4+
import styled from 'styled-components'
5+
6+
import { SwapProvider } from 'pages/CrossChainSwap/adapters'
7+
import { registry } from 'pages/CrossChainSwap/hooks/useCrossChainSwap'
8+
import { Quote } from 'pages/CrossChainSwap/registry'
9+
10+
const Tag = styled.div`
11+
background-color: ${({ theme }) => theme.subText + '33'};
12+
color: ${({ theme }) => theme.text};
13+
border-radius: 999px;
14+
margin-left: 4px;
15+
font-size: 10px;
16+
padding: 2px 6px;
17+
`
18+
19+
const getStepProviders = (quote: Quote): SwapProvider[] => {
20+
if (quote.adapter.getName().toLowerCase() !== 'kyberacross') return []
21+
22+
const steps = quote.quote.rawQuote?.steps
23+
if (!Array.isArray(steps)) return []
24+
25+
return steps
26+
.map(step => {
27+
const providerName = typeof step?.provider === 'string' ? step.provider : null
28+
const providerAdapter = registry.getAdapter(providerName)
29+
return providerAdapter
30+
})
31+
.filter(Boolean) as SwapProvider[]
32+
}
33+
34+
export const QuoteProviderName = ({ quote }: { quote: Quote }) => {
35+
const stepProviders = getStepProviders(quote)
36+
const adapter = quote.adapter
37+
38+
if (stepProviders.length > 0) {
39+
return (
40+
<>
41+
{stepProviders.map((provider, index) => (
42+
<React.Fragment key={provider.getName()}>
43+
{index > 0 && <Text mx="4px">+</Text>}
44+
<img src={provider.getIcon()} alt={provider.getName()} width={14} height={14} />
45+
<Text ml="4px">{provider.getName()}</Text>
46+
</React.Fragment>
47+
))}
48+
</>
49+
)
50+
}
51+
52+
const adapterName = adapter.getName()
53+
const isBeta = adapterName === 'Optimex'
54+
55+
return (
56+
<>
57+
<img src={adapter.getIcon()} alt={adapterName} width={14} height={14} />
58+
<Text ml="4px">{adapterName}</Text>
59+
{isBeta && <Tag>{t`Beta`}</Tag>}
60+
</>
61+
)
62+
}

‎apps/kyberswap-interface/src/pages/CrossChainSwap/components/QuoteSelector.tsx‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,15 @@ import { MouseoverTooltip } from 'components/Tooltip'
1515
import useTheme from 'hooks/useTheme'
1616
import { CampaignType, campaignConfig } from 'pages/Campaign/constants'
1717
// import { GasStation } from 'components/Icons'
18-
import { Currency, SwapProvider } from 'pages/CrossChainSwap/adapters'
18+
import { Currency } from 'pages/CrossChainSwap/adapters'
19+
import { QuoteProviderName } from 'pages/CrossChainSwap/components/QuoteProviderName'
1920
import { formatTime } from 'pages/CrossChainSwap/components/Summary'
2021
import { TokenLogoWithChain } from 'pages/CrossChainSwap/components/TokenLogoWithChain'
2122
import { registry, useCrossChainSwap } from 'pages/CrossChainSwap/hooks/useCrossChainSwap'
2223
import { Quote } from 'pages/CrossChainSwap/registry'
2324
import { MEDIA_WIDTHS } from 'theme'
2425
import { formatDisplayNumber } from 'utils/numbers'
2526

26-
export const Tag = styled.div`
27-
background-color: ${({ theme }) => theme.subText + '33'};
28-
color: ${({ theme }) => theme.text};
29-
border-radius: 999px;
30-
margin-left: 4px;
31-
font-size: 10px;
32-
padding: 2px 6px;
33-
`
34-
35-
const getStepProviders = (quote: Quote): SwapProvider[] => {
36-
if (quote.adapter.getName().toLowerCase() !== 'kyberacross') return []
37-
38-
const steps = quote.quote.rawQuote?.steps
39-
if (!Array.isArray(steps)) return []
40-
41-
return steps
42-
.map(step => {
43-
const providerName = typeof step?.provider === 'string' ? step.provider : null
44-
const providerAdapter = registry.getAdapter(providerName)
45-
return providerAdapter
46-
})
47-
.filter((provider): provider is SwapProvider => Boolean(provider))
48-
}
49-
5027
const Wrapper = styled.div`
5128
display: flex;
5229
flex-direction: column;
@@ -129,7 +106,6 @@ export const QuoteSelector = ({
129106
<ListRoute data-open="true" showArrow>
130107
{quotes.map((quote, index) => {
131108
const ongoingTag = nearIntentCampaignOnGoing && quote.adapter.getName() === 'Near Intents'
132-
const stepProviders = getStepProviders(quote)
133109
return (
134110
<Row
135111
key={quote.adapter.getName()}
@@ -198,23 +174,7 @@ export const QuoteSelector = ({
198174
)}
199175
</Flex>
200176
<Flex marginTop="8px" alignItems="center" color={theme.subText} fontSize="14px">
201-
{stepProviders.length > 0 ? (
202-
<>
203-
{stepProviders.map((provider, index) => (
204-
<React.Fragment key={provider.getName()}>
205-
{index > 0 && <Text mx="4px">+</Text>}
206-
<img src={provider.getIcon()} alt={provider.getName()} width={14} height={14} />
207-
<Text ml="4px">{provider.getName()}</Text>
208-
</React.Fragment>
209-
))}
210-
</>
211-
) : (
212-
<>
213-
<img src={quote.adapter.getIcon()} alt={quote.adapter.getName()} width={14} height={14} />
214-
<Text ml="4px">{quote.adapter.getName()}</Text>
215-
{quote.adapter.getName() === 'Optimex' && <Tag>{t`Beta`}</Tag>}
216-
</>
217-
)}
177+
<QuoteProviderName quote={quote} />
218178
<Text mx="8px">|</Text>
219179
<Clock size={14} />
220180
<Text ml="4px" mr="8px">

‎apps/kyberswap-interface/src/pages/CrossChainSwap/index.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import useTheme from 'hooks/useTheme'
2020
import { NonEvmChain } from 'pages/CrossChainSwap/adapters'
2121
import { BitcoinConnectModal } from 'pages/CrossChainSwap/components/BitcoinConnectModal'
2222
import { PiWarning } from 'pages/CrossChainSwap/components/PiWarning'
23-
import { QuoteSelector, Tag } from 'pages/CrossChainSwap/components/QuoteSelector'
23+
import { QuoteProviderName } from 'pages/CrossChainSwap/components/QuoteProviderName'
24+
import { QuoteSelector } from 'pages/CrossChainSwap/components/QuoteSelector'
2425
import { Summary } from 'pages/CrossChainSwap/components/Summary'
2526
import { SwapAction } from 'pages/CrossChainSwap/components/SwapAction'
2627
import { TokenLogoWithChain } from 'pages/CrossChainSwap/components/TokenLogoWithChain'
@@ -341,13 +342,11 @@ export function CrossChainSwap({ onQuoteChange }: CrossChainSwapProps) {
341342
<Summary quote={selectedQuote || undefined} tokenOut={currencyOut} />
342343

343344
{selectedQuote && (
344-
<Text fontStyle="italic" color={'#737373'} fontSize={12} display="flex">
345-
<Trans>Routed via {selectedQuote.adapter.getName()}</Trans>
346-
{selectedQuote.adapter.getName() === 'Optimex' && (
347-
<Tag>
348-
<Trans>Beta</Trans>
349-
</Tag>
350-
)}
345+
<Text fontStyle="italic" color={'#737373'} fontSize={12} display="flex" alignItems="center">
346+
<Text as="span" mr="4px">
347+
<Trans>Routed via</Trans>
348+
</Text>
349+
<QuoteProviderName quote={selectedQuote} />
351350
</Text>
352351
)}
353352

0 commit comments

Comments
 (0)