aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-20 02:12:40 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-20 02:12:40 +0800
commit9b725a645db423d20a4be1f1d5930f6ecb7ad682 (patch)
tree629f86641da48da7f0921e74e1852e306cfd7d5c /packages/instant/src
parent3d6711bd38c3cb801d00a73a6386c4bb16359811 (diff)
downloaddexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar.gz
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar.bz2
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar.lz
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar.xz
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.tar.zst
dexon-sol-tools-9b725a645db423d20a4be1f1d5930f6ecb7ad682.zip
feat(instant): support custom iconUrls
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx34
-rw-r--r--packages/instant/src/types.ts1
2 files changed, 26 insertions, 9 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 62dd52a4c..1b1921acb 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -78,8 +78,8 @@ interface TokenSelectorRowProps {
class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
public render(): React.ReactNode {
const { token } = this.props;
+ const circleColor = token.metaData.primaryColor || 'black';
const displaySymbol = assetUtils.bestNameForAsset(token);
- const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
return (
<Container
padding="12px 0px"
@@ -94,15 +94,9 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
<Container marginLeft="5px">
<Flex justify="flex-start">
<Container marginRight="10px">
- <Circle diameter={26} rawColor={token.metaData.primaryColor}>
+ <Circle diameter={26} rawColor={circleColor}>
<Flex height="100%" width="100%">
- {!_.isUndefined(TokenIcon) ? (
- <TokenIcon />
- ) : (
- <Text fontColor={ColorOption.white} fontSize="8px">
- {displaySymbol}
- </Text>
- )}
+ <TokenSelectorRowIcon token={token} />
</Flex>
</Circle>
</Container>
@@ -122,3 +116,25 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
this.props.onClick(this.props.token);
};
}
+
+interface TokenSelectorRowIconProps {
+ token: ERC20Asset;
+}
+
+const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
+ const { token } = props;
+ const iconUrlIfExists = token.metaData.iconUrl;
+ const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
+ const displaySymbol = assetUtils.bestNameForAsset(token);
+ if (!_.isUndefined(iconUrlIfExists)) {
+ return <img src={iconUrlIfExists} />;
+ } else if (!_.isUndefined(TokenIcon)) {
+ return <TokenIcon />;
+ } else {
+ return (
+ <Text fontColor={ColorOption.white} fontSize="8px">
+ {displaySymbol}
+ </Text>
+ );
+ }
+};
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 67f21a396..2d4a8a850 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -51,6 +51,7 @@ export interface ERC20AssetMetaData {
primaryColor?: string;
symbol: string;
name: string;
+ iconUrl?: string;
}
export interface ERC721AssetMetaData {