-
Notifications
You must be signed in to change notification settings - Fork 5.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lists): allow selecting and adding token lists (#1023)
* more list stuff Use the selected list instead of the default list, but also use the default list start list selection code * move token warning to a modal, fix the install issue * add/remove/enter key * handle enter on currency select for ETHER * change slippage tolerance to be a slider * make ui closer to the mocks * commit slider changes * back to tabs * copy changes * bump list version * some styling for the list select * bump uniswap default list version * use contract calls to get ens names and addresses * show list logo * fix failing integration test * .eth.link * list introduction screen * remove showSendWithSwap * fix integration and unit tests * resolve ENS names * logos from ens * fix the lint errors * some refactoring to better support using a the library provider from the user for resolving ENS names * load list info from the list url for the introduction page * make it slightly harder to remove a list * minor clean up, some help text and links * remove icon from list update popup * show added/removed tokens * add GA everywhere, don't debounce contenthash lookups * show tags * fix tag key * tag display, list rendering, needs optimization * fix list fetching in firefox, style issue in safari * sort the lists, clean up styling * use client provider when possible * show token warning for url loaded tokens * improve the warning modal * some refactoring to fix the list fetching on networks other than mainnet * fix tests * some minor improvements * increase timeout to maybe fix integration tests which pass locally * build for tests using the dev network url * reset the lists if we deleted the other two copies * improve how we handle updating the default list of lists * fix integration test * Update token list selection styles * fix external links, reuse the on click outside code, show add errors * show the list origin instead of the full url * fix update list link * show host instead of hostname do not automatically dismiss major version upgrades for lists * fix link to tokenlists.org * add uma * clean up styling in list rows * bump token list version * bump token list version again * hover symbol to see currency name * bump version * add cmc lists, dharma list Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>
- Loading branch information
1 parent
09b5457
commit 7cf25ac
Showing
84 changed files
with
3,797 additions
and
1,075 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| describe('Swap', () => { | ||
| beforeEach(() => cy.visit('/swap')) | ||
|
|
||
| it('list selection persists', () => { | ||
| cy.get('#swap-currency-output .open-currency-select-button').click() | ||
| cy.get('#select-default-uniswap-list .select-button').click() | ||
| cy.reload() | ||
| cy.get('#swap-currency-output .open-currency-select-button').click() | ||
| cy.get('#select-default-uniswap-list').should('not.exist') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,54 @@ | ||
| import { Currency, ETHER, Token } from '@uniswap/sdk' | ||
| import React, { useState } from 'react' | ||
| import React, { useMemo } from 'react' | ||
| import styled from 'styled-components' | ||
|
|
||
| import EthereumLogo from '../../assets/images/ethereum-logo.png' | ||
| import useHttpLocations from '../../hooks/useHttpLocations' | ||
| import { WrappedTokenInfo } from '../../state/lists/hooks' | ||
| import uriToHttp from '../../utils/uriToHttp' | ||
| import Logo from '../Logo' | ||
|
|
||
| const getTokenLogoURL = address => | ||
| const getTokenLogoURL = (address: string) => | ||
| `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png` | ||
| const BAD_URIS: { [tokenAddress: string]: true } = {} | ||
|
|
||
| const Image = styled.img<{ size: string }>` | ||
| const StyledEthereumLogo = styled.img<{ size: string }>` | ||
| width: ${({ size }) => size}; | ||
| height: ${({ size }) => size}; | ||
| background-color: white; | ||
| border-radius: 1rem; | ||
| box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075); | ||
| border-radius: 24px; | ||
| ` | ||
|
|
||
| const Emoji = styled.span<{ size?: string }>` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: ${({ size }) => size}; | ||
| width: ${({ size }) => size}; | ||
| height: ${({ size }) => size}; | ||
| margin-bottom: -4px; | ||
| ` | ||
|
|
||
| const StyledEthereumLogo = styled.img<{ size: string }>` | ||
| const StyledLogo = styled(Logo)<{ size: string }>` | ||
| width: ${({ size }) => size}; | ||
| height: ${({ size }) => size}; | ||
| box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075); | ||
| border-radius: 24px; | ||
| ` | ||
|
|
||
| export default function CurrencyLogo({ | ||
| currency, | ||
| size = '24px', | ||
| ...rest | ||
| style | ||
| }: { | ||
| currency?: Currency | ||
| size?: string | ||
| style?: React.CSSProperties | ||
| }) { | ||
| const [, refresh] = useState<number>(0) | ||
|
|
||
| if (currency === ETHER) { | ||
| return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} /> | ||
| } | ||
| const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined) | ||
|
|
||
| if (currency instanceof Token) { | ||
| let uri: string | undefined | ||
| const srcs: string[] = useMemo(() => { | ||
| if (currency === ETHER) return [] | ||
|
|
||
| if (currency instanceof WrappedTokenInfo) { | ||
| if (currency.logoURI && !BAD_URIS[currency.logoURI]) { | ||
| uri = uriToHttp(currency.logoURI).filter(s => !BAD_URIS[s])[0] | ||
| if (currency instanceof Token) { | ||
| if (currency instanceof WrappedTokenInfo) { | ||
| return [...uriLocations, getTokenLogoURL(currency.address)] | ||
| } | ||
| } | ||
|
|
||
| if (!uri) { | ||
| const defaultUri = getTokenLogoURL(currency.address) | ||
| if (!BAD_URIS[defaultUri]) { | ||
| uri = defaultUri | ||
| } | ||
| return [getTokenLogoURL(currency.address)] | ||
| } | ||
| return [] | ||
| }, [currency, uriLocations]) | ||
|
|
||
| if (uri) { | ||
| return ( | ||
| <Image | ||
| {...rest} | ||
| alt={`${currency.name} Logo`} | ||
| src={uri} | ||
| size={size} | ||
| onError={() => { | ||
| if (currency instanceof Token) { | ||
| BAD_URIS[uri] = true | ||
| } | ||
| refresh(i => i + 1) | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
| if (currency === ETHER) { | ||
| return <StyledEthereumLogo src={EthereumLogo} size={size} style={style} /> | ||
| } | ||
|
|
||
| return ( | ||
| <Emoji {...rest} size={size}> | ||
| <span role="img" aria-label="Thinking"> | ||
| 🤔 | ||
| </span> | ||
| </Emoji> | ||
| ) | ||
| return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import useHttpLocations from '../../hooks/useHttpLocations' | ||
|
|
||
| import Logo from '../Logo' | ||
|
|
||
| const StyledListLogo = styled(Logo)<{ size: string }>` | ||
| width: ${({ size }) => size}; | ||
| height: ${({ size }) => size}; | ||
| ` | ||
|
|
||
| export default function ListLogo({ | ||
| logoURI, | ||
| style, | ||
| size = '24px', | ||
| alt | ||
| }: { | ||
| logoURI: string | ||
| size?: string | ||
| style?: React.CSSProperties | ||
| alt?: string | ||
| }) { | ||
| const srcs: string[] = useHttpLocations(logoURI) | ||
|
|
||
| return <StyledListLogo alt={alt} size={size} srcs={srcs} style={style} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React, { useState } from 'react' | ||
| import { AlertTriangle } from 'react-feather' | ||
| import { ImageProps } from 'rebass' | ||
|
|
||
| const BAD_SRCS: { [tokenAddress: string]: true } = {} | ||
|
|
||
| export interface LogoProps extends Pick<ImageProps, 'style' | 'alt' | 'className'> { | ||
| srcs: string[] | ||
| } | ||
|
|
||
| /** | ||
| * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert | ||
| */ | ||
| export default function Logo({ srcs, alt, ...rest }: LogoProps) { | ||
| const [, refresh] = useState<number>(0) | ||
|
|
||
| const src: string | undefined = srcs.find(src => !BAD_SRCS[src]) | ||
|
|
||
| if (src) { | ||
| return ( | ||
| <img | ||
| {...rest} | ||
| alt={alt} | ||
| src={src} | ||
| onError={() => { | ||
| if (src) BAD_SRCS[src] = true | ||
| refresh(i => i + 1) | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return <AlertTriangle {...rest} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
7cf25acThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: