@uniswap/token-lists#diffTokenLists TypeScript Examples
The following examples show how to use
@uniswap/token-lists#diffTokenLists.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ListUpdatePopup.tsx From cheeseswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
ReactGA.event({
category: 'Lists',
action: 'Update List from Popup',
label: listUrl
})
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<TYPE.body fontWeight={700}>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</TYPE.body>
) : (
<>
<div>
<Text>
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<ButtonSecondary onClick={handleAcceptUpdate}>Accept update</ButtonSecondary>
</div>
<div style={{ flexGrow: 1 }}>
<ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #2
| Source File: ListUpdatePopup.tsx From dyp with Do What The F*ck You Want To Public License | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
ReactGA.event({
category: 'Lists',
action: 'Update List from Popup',
label: listUrl
})
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<TYPE.body fontWeight={500}>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</TYPE.body>
) : (
<>
<div>
<Text>
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<ButtonSecondary onClick={handleAcceptUpdate}>Accept update</ButtonSecondary>
</div>
<div style={{ flexGrow: 1 }}>
<ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #3
| Source File: ListUpdatePopup.tsx From goose-frontend-amm with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto,
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<Body fontWeight={500}>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</Body>
) : (
<>
<div>
<Text fontSize="14px">
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<Button onClick={handleAcceptUpdate}>Accept update</Button>
</div>
<div style={{ flexGrow: 1 }}>
<Button onClick={removeThisPopup}>Dismiss</Button>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #4
| Source File: ListUpdatePopup.tsx From mozartfinance-swap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto,
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<Text>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</Text>
) : (
<>
<div>
<Text fontSize="14px">
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<Button onClick={handleAcceptUpdate}>Accept update</Button>
</div>
<div style={{ flexGrow: 1 }}>
<Button onClick={removeThisPopup}>Dismiss</Button>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #5
| Source File: ListUpdatePopup.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto,
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<Text>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</Text>
) : (
<>
<div>
<Text fontSize="14px">
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<Button onClick={handleAcceptUpdate}>Accept update</Button>
</div>
<div style={{ flexGrow: 1 }}>
<Button onClick={removeThisPopup}>Dismiss</Button>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #6
| Source File: ListUpdatePopup.tsx From pancake-swap-testnet with MIT License | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto,
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<Text>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</Text>
) : (
<>
<div>
<Text fontSize="14px">
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<Button onClick={handleAcceptUpdate}>Accept update</Button>
</div>
<div style={{ flexGrow: 1 }}>
<Button onClick={removeThisPopup}>Dismiss</Button>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #7
| Source File: ListUpdatePopup.tsx From panther-frontend-dex with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto,
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<Body fontWeight={500}>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</Body>
) : (
<>
<div>
<Text fontSize="14px">
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ul>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ul>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<Button onClick={handleAcceptUpdate}>Accept update</Button>
</div>
<div style={{ flexGrow: 1 }}>
<Button onClick={removeThisPopup}>Dismiss</Button>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
Example #8
| Source File: ListUpdatePopup.tsx From forward.swaps with GNU General Public License v3.0 | 4 votes |
|
export default function ListUpdatePopup({
popKey,
listUrl,
oldList,
newList,
auto
}: {
popKey: string
listUrl: string
oldList: TokenList
newList: TokenList
auto: boolean
}) {
const removePopup = useRemovePopup()
const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
const dispatch = useDispatch<AppDispatch>()
const handleAcceptUpdate = useCallback(() => {
if (auto) return
ReactGA.event({
category: 'Lists',
action: 'Update List from Popup',
label: listUrl
})
dispatch(acceptListUpdate(listUrl))
removeThisPopup()
}, [auto, dispatch, listUrl, removeThisPopup])
const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
return diffTokenLists(oldList.tokens, newList.tokens)
}, [newList.tokens, oldList.tokens])
const numTokensChanged = useMemo(
() =>
Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
[tokensChanged]
)
return (
<AutoRow>
<AutoColumn style={{ flex: '1' }} gap="8px">
{auto ? (
<TYPE.body fontWeight={500}>
The token list "{oldList.name}" has been updated to{' '}
<strong>{listVersionLabel(newList.version)}</strong>.
</TYPE.body>
) : (
<>
<div>
<Text>
An update is available for the token list "{oldList.name}" (
{listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
</Text>
<ChangesList>
{tokensAdded.length > 0 ? (
<li>
{tokensAdded.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensAdded.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
added
</li>
) : null}
{tokensRemoved.length > 0 ? (
<li>
{tokensRemoved.map((token, i) => (
<React.Fragment key={`${token.chainId}-${token.address}`}>
<strong title={token.address}>{token.symbol}</strong>
{i === tokensRemoved.length - 1 ? null : ', '}
</React.Fragment>
))}{' '}
removed
</li>
) : null}
{numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
</ChangesList>
</div>
<AutoRow>
<div style={{ flexGrow: 1, marginRight: 12 }}>
<ButtonSecondary onClick={handleAcceptUpdate}>Accept update</ButtonSecondary>
</div>
<div style={{ flexGrow: 1 }}>
<ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>
</div>
</AutoRow>
</>
)}
</AutoColumn>
</AutoRow>
)
}
