6970244998

Committed 23 Nov 2023 01:18PM UTC coverage: 43.312% (+2.4%) from 40.865%

Build # 6970244998

Build Type

Pull #2042

github

Committed by

juanmahidalgo

Commit Message

feat: add missing select token and chain events

Pull Request Pull Request #2042: feat: use squid to calculate route between two chains and tokens

Run Details

2626 of 7307 branches covered (0.0%)

Branch coverage included in aggregate %.

277 of 382 new or added lines in 20 files covered. (72.51%)

1 existing line in 1 file now uncovered.

4634 of 9455 relevant lines covered (49.01%)

23.67 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.0

/webapp/src/components/Modals/BuyWithCryptoModal/ChainAndTokenSelector/ChainAndTokenSelector.tsx

import { useMemo, useState } from 'react'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { ChainData, Token } from '../../../../lib/xchain'
import styles from './ChainAndTokenSelector.module.css'
import { ChainId } from '@dcl/schemas'
import { getNetwork } from '@dcl/schemas/dist/dapps/chain-id'
import { Close, Icon } from 'decentraland-ui'

export const CHAIN_AND_TOKEN_SELECTOR_DATA_TEST_ID = 'chain-and-token-selector'

type Props = {
  currentChain: ChainId
  chains?: ChainData[]
  tokens?: Token[]
  onSelect: (chain: ChainData | Token) => void
}

const ChainAndTokenSelector = (props: Props) => {
  const [search, setSearch] = useState('')
  const { currentChain, chains, tokens, onSelect } = props
  const title = useMemo(
    () =>
      t(
        `buy_with_crypto_modal.token_and_chain_selector.available_${
          !!chains ? 'chains' : 'tokens'
        }`,
        {
          chain: (
            <>
              {' '}
              <b> {getNetwork(currentChain)}</b>
            </>
          )
        }
      ),
    [chains, currentChain]
  )

  const filteredChains = useMemo(() => {
    return chains?.filter(chain =>
      chain.networkName.toLowerCase().includes(search.toLowerCase())
    )
  }, [chains, search])

  const filteredTokens = useMemo(() => {
    return tokens?.filter(
      token =>
        token.symbol.toLowerCase().includes(search.toLowerCase()) &&
        token.chainId === currentChain.toString()
    )
  }, [tokens, search, currentChain])

  return (
    <div
      className={styles.chainAndTokenSelector}
      data-testid={CHAIN_AND_TOKEN_SELECTOR_DATA_TEST_ID}
    >
      <div className={styles.searchContainer}>
        <Icon name="search" className={styles.searchIcon} />
        <input
          className={styles.searchInput}
          value={search}
          onChange={e => setSearch(e.target.value)}
          placeholder={t('global.search')}
        />
        {search ? <Close onClick={() => setSearch('')} /> : null}
      </div>
      <span className={styles.title}>{title}</span>
      <div className={styles.listContainer}>
        {filteredChains?.map(chain => (
          <div
            key={chain.chainId}
            className={styles.rowItem}
            onClick={() => onSelect(chain)}
          >
            <img src={chain.nativeCurrency.icon} alt={chain.networkName} />
            <span>{chain.networkName}</span>
          </div>
        ))}
        {filteredTokens?.map(token => (
          <div
            key={`${token.symbol}-${token.address}`}
            className={styles.rowItem}
            onClick={() => onSelect(token)}
          >
            <img src={token.logoURI} alt={token.symbol} />
            <span>{token.symbol}</span>
          </div>
        ))}
      </div>
      {!!search && !filteredChains?.length && !filteredTokens?.length ? (
        <span className={styles.noResults}>
          {t('buy_with_crypto_modal.token_and_chain_selector.no_matches', {
            search
          })}
        </span>
      ) : null}
    </div>
  )
}

export default ChainAndTokenSelector

1	import { useMemo, useState } from 'react'
2	import { t } from 'decentraland-dapps/dist/modules/translation/utils'
3	import { ChainData, Token } from '../../../../lib/xchain'
4	import styles from './ChainAndTokenSelector.module.css'
5	import { ChainId } from '@dcl/schemas'
6	import { getNetwork } from '@dcl/schemas/dist/dapps/chain-id'
7	import { Close, Icon } from 'decentraland-ui'
8
9	export const CHAIN_AND_TOKEN_SELECTOR_DATA_TEST_ID = 'chain-and-token-selector'	1✔
10
11	type Props = {
12	currentChain: ChainId
13	chains?: ChainData[]
14	tokens?: Token[]
15	onSelect: (chain: ChainData \| Token) => void
16	}
17
18	const ChainAndTokenSelector = (props: Props) => {	1✔
19	const [search, setSearch] = useState('')	24✔
20	const { currentChain, chains, tokens, onSelect } = props	24✔
21	const title = useMemo(	24✔
22	() =>
23	t(	24✔
24	`buy_with_crypto_modal.token_and_chain_selector.available_${
25	!!chains ? 'chains' : 'tokens'	24✔
26	}`,
27	{
28	chain: (
29	<>
30	{' '}
31	<b> {getNetwork(currentChain)}</b>
32	</>
33	)
34	}
35	),
36	[chains, currentChain]
37	)
38
39	const filteredChains = useMemo(() => {	24✔
40	return chains?.filter(chain =>	24✔
41	chain.networkName.toLowerCase().includes(search.toLowerCase())	16✔
42	)
43	}, [chains, search])
44
45	const filteredTokens = useMemo(() => {	24✔
46	return tokens?.filter(	24✔
47	token =>
48	token.symbol.toLowerCase().includes(search.toLowerCase()) &&	64✔
49	token.chainId === currentChain.toString()
50	)
51	}, [tokens, search, currentChain])
52
53	return (	24✔
54	<div
55	className={styles.chainAndTokenSelector}
56	data-testid={CHAIN_AND_TOKEN_SELECTOR_DATA_TEST_ID}
57	>
58	<div className={styles.searchContainer}>
59	<Icon name="search" className={styles.searchIcon} />
60	<input
61	className={styles.searchInput}
62	value={search}
NEW 63	onChange={e => setSearch(e.target.value)}	×
64	placeholder={t('global.search')}
65	/>
NEW 66	{search ? <Close onClick={() => setSearch('')} /> : null}	×
67	</div>
68	<span className={styles.title}>{title}</span>
69	<div className={styles.listContainer}>
70	{filteredChains?.map(chain => (
71	<div	16✔
72	key={chain.chainId}
73	className={styles.rowItem}
74	onClick={() => onSelect(chain)}	8✔
75	>
76	<img src={chain.nativeCurrency.icon} alt={chain.networkName} />
77	<span>{chain.networkName}</span>
78	</div>
79	))}
80	{filteredTokens?.map(token => (
81	<div	32✔
82	key={`${token.symbol}-${token.address}`}
83	className={styles.rowItem}
84	onClick={() => onSelect(token)}	16✔
85	>
86	<img src={token.logoURI} alt={token.symbol} />
87	<span>{token.symbol}</span>
88	</div>
89	))}
90	</div>
91	{!!search && !filteredChains?.length && !filteredTokens?.length ? (	48!
92	<span className={styles.noResults}>
93	{t('buy_with_crypto_modal.token_and_chain_selector.no_matches', {
94	search
95	})}
96	</span>
97	) : null}
98	</div>
99	)
100	}
101
102	export default ChainAndTokenSelector

decentraland / marketplace / 6970244998

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous