hooks/Tokens#useIsUserAddedToken TypeScript Examples
The following examples show how to use
hooks/Tokens#useIsUserAddedToken.
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: ImportRow.tsx From glide-frontend with GNU General Public License v3.0 | 5 votes |
|
export default function ImportRow({
token,
style,
dim,
showImportView,
setImportToken,
}: {
token: Token
style?: CSSProperties
dim?: boolean
showImportView: () => void
setImportToken: (token: Token) => void
}) {
// gloabls
const { chainId } = useActiveWeb3React()
const { t } = useTranslation()
// check if token comes from list
const inactiveTokenList = useCombinedInactiveList()
const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
// check if already active on list or local storage tokens
const isAdded = useIsUserAddedToken(token)
const isActive = useIsTokenActive(token)
return (
<TokenSection style={style}>
<CurrencyLogo currency={token} size="24px" style={{ opacity: dim ? '0.6' : '1' }} />
<AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
<AutoRow>
<Text>{token.symbol}</Text>
<Text color="textDisabled" ml="8px">
<NameOverflow title={token.name}>{token.name}</NameOverflow>
</Text>
</AutoRow>
{list && list.logoURI && (
<RowFixed>
<Text small mr="4px" color="textSubtle">
{t('via')} {list.name}
</Text>
<ListLogo logoURI={list.logoURI} size="12px" />
</RowFixed>
)}
</AutoColumn>
{!isActive && !isAdded ? (
<Button
width="fit-content"
onClick={() => {
if (setImportToken) {
setImportToken(token)
}
showImportView()
}}
>
{t('Import')}
</Button>
) : (
<RowFixed style={{ minWidth: 'fit-content' }}>
<CheckIcon />
<Text color="success">Active</Text>
</RowFixed>
)}
</TokenSection>
)
}
Example #2
| Source File: CurrencyList.tsx From glide-frontend with GNU General Public License v3.0 | 5 votes |
|
function CurrencyRow({
origin,
currency,
onSelect,
isSelected,
otherSelected,
style,
}: {
origin: number
currency: Currency
onSelect: () => void
isSelected: boolean
otherSelected: boolean
style: CSSProperties
}) {
const { t } = useTranslation()
const { account } = useActiveWeb3React()
const key = currencyKey(currency)
const selectedTokenList = useCombinedActiveList()
const isOnSelectedList = isTokenOnList(selectedTokenList, currency)
const customAdded = useIsUserAddedToken(currency)
const balance = useCurrencyBalance(account ?? undefined, currency)
const token = currency ? Object.prototype.hasOwnProperty.call(currency, 'address') : undefined
// only show add or remove buttons if not on selected list
return (
<MenuItem
style={style}
className={`token-item-${key}`}
onClick={() => (isSelected ? null : onSelect())}
disabled={isSelected}
selected={otherSelected}
>
<CurrencyLogo currency={currency} size="24px" style={{ marginRight: '8px' }} chain={origin} />
<Column>
{/* <Text bold>{token ? currency.symbol : currency.symbol === 'ELA' && chainId === 1 ? 'ETH' : currency.symbol === 'ELA' && chainId === 128 ? 'HT' : currency.symbol}</Text> */}
<Text bold>
{token
? currency.symbol
: origin === 20
? 'ELA'
: origin === 1
? 'ETH'
: origin === 128
? 'HT'
: origin === 56 && 'BNB'}
</Text>
{/* <Text color="textSubtle" small ellipsis maxWidth="200px">
{!isOnSelectedList && customAdded && 'Added by user •'} {token ? currency.name : currency.symbol === 'ELA' && chainId === 1 ? 'Ethereum' : currency.symbol === 'ELA' && chainId === 128 ? 'Huobi Token' : currency.symbol === 'ELA' && chainId === 20 ? 'Elastos' : currency.name }
</Text> */}
<Text color="textSubtle" small ellipsis maxWidth="200px">
{!isOnSelectedList && customAdded && t('Added by user')}
{'• '}
{token
? currency.name
: origin === 20
? 'Elastos'
: origin === 1
? 'Ethereum'
: origin === 128
? 'Huobi Token'
: origin === 56 && 'Binance Coin'}
</Text>
</Column>
<RowFixed style={{ justifySelf: 'flex-end' }}>
{balance ? <Balance balance={balance} /> : account ? <CircleLoader /> : null}
</RowFixed>
</MenuItem>
)
}
Example #3
| Source File: ImportRow.tsx From glide-frontend with GNU General Public License v3.0 | 5 votes |
|
export default function ImportRow({
token,
style,
dim,
showImportView,
setImportToken,
}: {
token: Token
style?: CSSProperties
dim?: boolean
showImportView: () => void
setImportToken: (token: Token) => void
}) {
const { chainId } = useActiveWeb3React()
const { t } = useTranslation()
// check if token comes from list
const inactiveTokenList = useCombinedInactiveList()
const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
// check if already active on list or local storage tokens
const isAdded = useIsUserAddedToken(token)
const isActive = useIsTokenActive(token)
return (
<TokenSection style={style}>
<CurrencyLogo currency={token} size="24px" style={{ opacity: dim ? '0.6' : '1' }} />
<AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
<AutoRow>
<Text>{token.symbol}</Text>
<Text color="textDisabled" ml="8px">
<NameOverflow title={token.name}>{token.name}</NameOverflow>
</Text>
</AutoRow>
{list && list.logoURI && (
<RowFixed>
<Text small mr="4px" color="textSubtle">
{t('via')} {list.name}
</Text>
<ListLogo logoURI={list.logoURI} size="12px" />
</RowFixed>
)}
</AutoColumn>
{!isActive && !isAdded ? (
<Button
width="fit-content"
onClick={() => {
if (setImportToken) {
setImportToken(token)
}
showImportView()
}}
>
{t('Import')}
</Button>
) : (
<RowFixed style={{ minWidth: 'fit-content' }}>
<CheckIcon />
<Text color="success">Active</Text>
</RowFixed>
)}
</TokenSection>
)
}
Example #4
| Source File: ImportRow.tsx From forward.swaps with GNU General Public License v3.0 | 5 votes |
|
export default function ImportRow({
token,
style,
dim,
showImportView,
setImportToken
}: {
token: Token
style?: CSSProperties
dim?: boolean
showImportView: () => void
setImportToken: (token: Token) => void
}) {
// gloabls
const { chainId } = useActiveWeb3React()
const theme = useTheme()
// check if token comes from list
const inactiveTokenList = useCombinedInactiveList()
const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
// check if already active on list or local storage tokens
const isAdded = useIsUserAddedToken(token)
const isActive = useIsTokenActive(token)
return (
<TokenSection style={style}>
<CurrencyLogo currency={token} size={'24px'} style={{ opacity: dim ? '0.6' : '1' }} />
<AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
<AutoRow>
<TYPE.body fontWeight={500}>{token.symbol}</TYPE.body>
<TYPE.darkGray ml="8px" fontWeight={300}>
<NameOverflow title={token.name}>{token.name}</NameOverflow>
</TYPE.darkGray>
</AutoRow>
{list && list.logoURI && (
<RowFixed>
<TYPE.small mr="4px" color={theme.text3}>
via {list.name}
</TYPE.small>
<ListLogo logoURI={list.logoURI} size="12px" />
</RowFixed>
)}
</AutoColumn>
{!isActive && !isAdded ? (
<ButtonPrimary
width="fit-content"
padding="6px 12px"
fontWeight={500}
fontSize="14px"
onClick={() => {
setImportToken && setImportToken(token)
showImportView()
}}
>
Import
</ButtonPrimary>
) : (
<RowFixed style={{ minWidth: 'fit-content' }}>
<CheckIcon />
<TYPE.main color={theme.green1}>Active</TYPE.main>
</RowFixed>
)}
{/* </RowBetween> */}
</TokenSection>
)
}
Example #5
| Source File: ImportRow.tsx From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
export default function ImportRow({
token,
style,
dim,
showImportView,
setImportToken,
}: {
token: Token
style?: CSSProperties
dim?: boolean
showImportView: () => void
setImportToken: (token: Token) => void
}) {
// globals
const { chainId } = useActiveWeb3React()
const { t } = useTranslation()
// check if token comes from list
const inactiveTokenList = useCombinedInactiveList()
const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
// check if already active on list or local storage tokens
const isAdded = useIsUserAddedToken(token)
const isActive = useIsTokenActive(token)
return (
<TokenSection style={style}>
<CurrencyLogo currency={token} size="24px" style={{ opacity: dim ? '0.6' : '1' }} />
<AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
<AutoRow>
<Text>{token.symbol}</Text>
<Text color="textDisabled" ml="8px">
<NameOverflow title={token.name}>{token.name}</NameOverflow>
</Text>
</AutoRow>
{list && list.logoURI && (
<RowFixed>
<Text small mr="4px" color="textSubtle">
{t('via')} {list.name}
</Text>
<ListLogo logoURI={list.logoURI} size="12px" />
</RowFixed>
)}
</AutoColumn>
{!isActive && !isAdded ? (
<Button
width="fit-content"
onClick={() => {
if (setImportToken) {
setImportToken(token)
}
showImportView()
}}
>
{t('Import')}
</Button>
) : (
<RowFixed style={{ minWidth: 'fit-content' }}>
<CheckIcon />
<Text color="success">Active</Text>
</RowFixed>
)}
</TokenSection>
)
}
Example #6
| Source File: CurrencyRow.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
CurrencyRow: React.FC<CurrenyRowProps> = ({
currency,
onSelect,
isSelected,
otherSelected,
style,
isOnSelectedList,
}) => {
const { ethereum } = window as any;
const classes = useStyles();
const { palette } = useTheme();
const { account, chainId } = useActiveWeb3React();
const key = currencyKey(currency);
const usdPrice = useUSDCPrice(currency);
const balance = useCurrencyBalance(account ?? undefined, currency);
const customAdded = useIsUserAddedToken(currency);
const removeToken = useRemoveUserAddedToken();
const addToken = useAddUserToken();
const isMetamask =
ethereum &&
ethereum.isMetaMask &&
Number(ethereum.chainId) === 137 &&
isOnSelectedList;
const addTokenToMetamask = (
tokenAddress: any,
tokenSymbol: any,
tokenDecimals: any,
tokenImage: any,
) => {
if (ethereum) {
ethereum
.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20', // Initially only supports ERC20, but eventually more!
options: {
address: tokenAddress, // The address that the token is at.
symbol: tokenSymbol, // A ticker symbol or shorthand, up to 5 chars.
decimals: tokenDecimals, // The number of decimals in the token
image: tokenImage, // A string url of the token logo
},
},
})
.catch((error: any) => {
if (error.code === 4001) {
// EIP-1193 userRejectedRequest error
console.log('We can encrypt anything without the key.');
} else {
console.error(error);
}
});
}
};
// only show add or remove buttons if not on selected list
return (
<ListItem
button
style={style}
key={key}
selected={otherSelected || isSelected}
onClick={() => {
if (!isSelected && !otherSelected) onSelect();
}}
>
<Box className={classes.currencyRow}>
{(otherSelected || isSelected) && <TokenSelectedIcon />}
<CurrencyLogo currency={currency} size={'32px'} />
<Box ml={1} height={32}>
<Box display='flex' alignItems='center'>
<Typography variant='body2' className={classes.currencySymbol}>
{currency.symbol}
</Typography>
{isMetamask && currency !== ETHER && (
<Box
style={{ cursor: 'pointer', marginLeft: 2 }}
onClick={(event: any) => {
addTokenToMetamask(
currency.address,
currency.symbol,
currency.decimals,
getTokenLogoURL(currency.address),
);
event.stopPropagation();
}}
>
<PlusHelper text='Add to metamask.' />
</Box>
)}
</Box>
{isOnSelectedList ? (
<Typography variant='caption' className={classes.currencyName}>
{currency.name}
</Typography>
) : (
<Box display='flex' alignItems='center'>
<Typography variant='caption'>
{customAdded ? 'Added by user' : 'Found by address'}
</Typography>
<Box
ml={0.5}
color={palette.primary.main}
onClick={(event) => {
event.stopPropagation();
if (customAdded) {
if (chainId && currency instanceof Token)
removeToken(chainId, currency.address);
} else {
if (currency instanceof Token) addToken(currency);
}
}}
>
<Typography variant='caption'>
{customAdded ? '(Remove)' : '(Add)'}
</Typography>
</Box>
</Box>
)}
</Box>
<Box flex={1}></Box>
<TokenTags currency={currency} />
<Box textAlign='right'>
{balance ? (
<>
<Balance balance={balance} />
<Typography
variant='caption'
style={{ color: palette.text.secondary }}
>
$
{(
Number(balance.toExact()) *
(usdPrice ? Number(usdPrice.toSignificant()) : 0)
).toLocaleString()}
</Typography>
</>
) : account ? (
<CircularProgress size={24} color='secondary' />
) : null}
</Box>
</Box>
</ListItem>
);
}
