From 004e197863e4df942d21f9e4ed629c08eeadad56 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 14 Nov 2018 16:01:16 -0800 Subject: feat(instant): add icons to token selector --- packages/instant/src/assets/icons/ae.svg | 4 ++++ packages/instant/src/assets/icons/agi.svg | 5 +++++ packages/instant/src/assets/icons/ant.svg | 5 +++++ packages/instant/src/assets/icons/ast.svg | 4 ++++ packages/instant/src/assets/icons/bat.svg | 3 +++ packages/instant/src/assets/icons/cvc.svg | 4 ++++ packages/instant/src/assets/icons/dai.svg | 5 +++++ packages/instant/src/assets/icons/dgd.svg | 5 +++++ packages/instant/src/assets/icons/dgx.svg | 4 ++++ packages/instant/src/assets/icons/dnt.svg | 4 ++++ packages/instant/src/assets/icons/fun.svg | 4 ++++ packages/instant/src/assets/icons/gno.svg | 6 ++++++ packages/instant/src/assets/icons/gnt.svg | 3 +++ packages/instant/src/assets/icons/knc.svg | 6 ++++++ packages/instant/src/assets/icons/link.svg | 6 ++++++ packages/instant/src/assets/icons/lpt.svg | 8 ++++++++ packages/instant/src/assets/icons/mana.svg | 8 ++++++++ packages/instant/src/assets/icons/mkr.svg | 4 ++++ packages/instant/src/assets/icons/mln.svg | 4 ++++ packages/instant/src/assets/icons/omg.svg | 3 +++ packages/instant/src/assets/icons/powr.svg | 6 ++++++ packages/instant/src/assets/icons/ren.svg | 12 ++++++++++++ packages/instant/src/assets/icons/rep.svg | 7 +++++++ packages/instant/src/assets/icons/req.svg | 3 +++ packages/instant/src/assets/icons/salt.svg | 3 +++ packages/instant/src/assets/icons/snt.svg | 4 ++++ packages/instant/src/assets/icons/spank.svg | 6 ++++++ packages/instant/src/assets/icons/wax.svg | 4 ++++ packages/instant/src/assets/icons/zil.svg | 3 +++ packages/instant/src/assets/icons/zrx.svg | 3 +++ packages/instant/src/components/erc20_token_selector.tsx | 15 ++++++++++----- packages/instant/src/data/asset_meta_data_map.ts | 4 +--- 32 files changed, 157 insertions(+), 8 deletions(-) create mode 100644 packages/instant/src/assets/icons/ae.svg create mode 100644 packages/instant/src/assets/icons/agi.svg create mode 100644 packages/instant/src/assets/icons/ant.svg create mode 100644 packages/instant/src/assets/icons/ast.svg create mode 100644 packages/instant/src/assets/icons/bat.svg create mode 100644 packages/instant/src/assets/icons/cvc.svg create mode 100644 packages/instant/src/assets/icons/dai.svg create mode 100644 packages/instant/src/assets/icons/dgd.svg create mode 100644 packages/instant/src/assets/icons/dgx.svg create mode 100644 packages/instant/src/assets/icons/dnt.svg create mode 100644 packages/instant/src/assets/icons/fun.svg create mode 100644 packages/instant/src/assets/icons/gno.svg create mode 100644 packages/instant/src/assets/icons/gnt.svg create mode 100644 packages/instant/src/assets/icons/knc.svg create mode 100644 packages/instant/src/assets/icons/link.svg create mode 100644 packages/instant/src/assets/icons/lpt.svg create mode 100644 packages/instant/src/assets/icons/mana.svg create mode 100644 packages/instant/src/assets/icons/mkr.svg create mode 100644 packages/instant/src/assets/icons/mln.svg create mode 100644 packages/instant/src/assets/icons/omg.svg create mode 100644 packages/instant/src/assets/icons/powr.svg create mode 100644 packages/instant/src/assets/icons/ren.svg create mode 100644 packages/instant/src/assets/icons/rep.svg create mode 100644 packages/instant/src/assets/icons/req.svg create mode 100644 packages/instant/src/assets/icons/salt.svg create mode 100644 packages/instant/src/assets/icons/snt.svg create mode 100644 packages/instant/src/assets/icons/spank.svg create mode 100644 packages/instant/src/assets/icons/wax.svg create mode 100644 packages/instant/src/assets/icons/zil.svg create mode 100644 packages/instant/src/assets/icons/zrx.svg (limited to 'packages/instant/src') diff --git a/packages/instant/src/assets/icons/ae.svg b/packages/instant/src/assets/icons/ae.svg new file mode 100644 index 000000000..592400d1a --- /dev/null +++ b/packages/instant/src/assets/icons/ae.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/agi.svg b/packages/instant/src/assets/icons/agi.svg new file mode 100644 index 000000000..9ed9784a4 --- /dev/null +++ b/packages/instant/src/assets/icons/agi.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/instant/src/assets/icons/ant.svg b/packages/instant/src/assets/icons/ant.svg new file mode 100644 index 000000000..ed7e1491a --- /dev/null +++ b/packages/instant/src/assets/icons/ant.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/instant/src/assets/icons/ast.svg b/packages/instant/src/assets/icons/ast.svg new file mode 100644 index 000000000..8136fb688 --- /dev/null +++ b/packages/instant/src/assets/icons/ast.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/bat.svg b/packages/instant/src/assets/icons/bat.svg new file mode 100644 index 000000000..9b69ddf9d --- /dev/null +++ b/packages/instant/src/assets/icons/bat.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/cvc.svg b/packages/instant/src/assets/icons/cvc.svg new file mode 100644 index 000000000..bddc90e16 --- /dev/null +++ b/packages/instant/src/assets/icons/cvc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/dai.svg b/packages/instant/src/assets/icons/dai.svg new file mode 100644 index 000000000..901d522ca --- /dev/null +++ b/packages/instant/src/assets/icons/dai.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/instant/src/assets/icons/dgd.svg b/packages/instant/src/assets/icons/dgd.svg new file mode 100644 index 000000000..371f89584 --- /dev/null +++ b/packages/instant/src/assets/icons/dgd.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/instant/src/assets/icons/dgx.svg b/packages/instant/src/assets/icons/dgx.svg new file mode 100644 index 000000000..2e4a90a5d --- /dev/null +++ b/packages/instant/src/assets/icons/dgx.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/dnt.svg b/packages/instant/src/assets/icons/dnt.svg new file mode 100644 index 000000000..7d5459343 --- /dev/null +++ b/packages/instant/src/assets/icons/dnt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/fun.svg b/packages/instant/src/assets/icons/fun.svg new file mode 100644 index 000000000..bb4347df2 --- /dev/null +++ b/packages/instant/src/assets/icons/fun.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/gno.svg b/packages/instant/src/assets/icons/gno.svg new file mode 100644 index 000000000..ebf6290cf --- /dev/null +++ b/packages/instant/src/assets/icons/gno.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/instant/src/assets/icons/gnt.svg b/packages/instant/src/assets/icons/gnt.svg new file mode 100644 index 000000000..7315ce459 --- /dev/null +++ b/packages/instant/src/assets/icons/gnt.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/knc.svg b/packages/instant/src/assets/icons/knc.svg new file mode 100644 index 000000000..70d35bc2f --- /dev/null +++ b/packages/instant/src/assets/icons/knc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/instant/src/assets/icons/link.svg b/packages/instant/src/assets/icons/link.svg new file mode 100644 index 000000000..2fddf7ef1 --- /dev/null +++ b/packages/instant/src/assets/icons/link.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/instant/src/assets/icons/lpt.svg b/packages/instant/src/assets/icons/lpt.svg new file mode 100644 index 000000000..cbe4f2202 --- /dev/null +++ b/packages/instant/src/assets/icons/lpt.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/instant/src/assets/icons/mana.svg b/packages/instant/src/assets/icons/mana.svg new file mode 100644 index 000000000..45be622e4 --- /dev/null +++ b/packages/instant/src/assets/icons/mana.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/instant/src/assets/icons/mkr.svg b/packages/instant/src/assets/icons/mkr.svg new file mode 100644 index 000000000..e09d47444 --- /dev/null +++ b/packages/instant/src/assets/icons/mkr.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/mln.svg b/packages/instant/src/assets/icons/mln.svg new file mode 100644 index 000000000..a0b821c57 --- /dev/null +++ b/packages/instant/src/assets/icons/mln.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/omg.svg b/packages/instant/src/assets/icons/omg.svg new file mode 100644 index 000000000..a906509af --- /dev/null +++ b/packages/instant/src/assets/icons/omg.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/powr.svg b/packages/instant/src/assets/icons/powr.svg new file mode 100644 index 000000000..eb48342e1 --- /dev/null +++ b/packages/instant/src/assets/icons/powr.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/instant/src/assets/icons/ren.svg b/packages/instant/src/assets/icons/ren.svg new file mode 100644 index 000000000..fe563dee2 --- /dev/null +++ b/packages/instant/src/assets/icons/ren.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/instant/src/assets/icons/rep.svg b/packages/instant/src/assets/icons/rep.svg new file mode 100644 index 000000000..1be1a6a88 --- /dev/null +++ b/packages/instant/src/assets/icons/rep.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/instant/src/assets/icons/req.svg b/packages/instant/src/assets/icons/req.svg new file mode 100644 index 000000000..d9eb89634 --- /dev/null +++ b/packages/instant/src/assets/icons/req.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/salt.svg b/packages/instant/src/assets/icons/salt.svg new file mode 100644 index 000000000..f2892c981 --- /dev/null +++ b/packages/instant/src/assets/icons/salt.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/snt.svg b/packages/instant/src/assets/icons/snt.svg new file mode 100644 index 000000000..34b2c432b --- /dev/null +++ b/packages/instant/src/assets/icons/snt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/spank.svg b/packages/instant/src/assets/icons/spank.svg new file mode 100644 index 000000000..1d7320770 --- /dev/null +++ b/packages/instant/src/assets/icons/spank.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/instant/src/assets/icons/wax.svg b/packages/instant/src/assets/icons/wax.svg new file mode 100644 index 000000000..8bcb73015 --- /dev/null +++ b/packages/instant/src/assets/icons/wax.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/instant/src/assets/icons/zil.svg b/packages/instant/src/assets/icons/zil.svg new file mode 100644 index 000000000..1a9218201 --- /dev/null +++ b/packages/instant/src/assets/icons/zil.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/assets/icons/zrx.svg b/packages/instant/src/assets/icons/zrx.svg new file mode 100644 index 000000000..07518f551 --- /dev/null +++ b/packages/instant/src/assets/icons/zrx.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index e4d8749a9..62dd52a4c 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -79,6 +79,7 @@ class TokenSelectorRow extends React.Component { public render(): React.ReactNode { const { token } = this.props; const displaySymbol = assetUtils.bestNameForAsset(token); + const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`); return ( { - - - - {displaySymbol} - + + + {!_.isUndefined(TokenIcon) ? ( + + ) : ( + + {displaySymbol} + + )} diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts index 6ecb9af85..b24c9c83d 100644 --- a/packages/instant/src/data/asset_meta_data_map.ts +++ b/packages/instant/src/data/asset_meta_data_map.ts @@ -2,8 +2,6 @@ import { AssetProxyId, ObjectMap } from '@0x/types'; import { AssetMetaData } from '../types'; -// Map from assetData string to AssetMetaData object -// TODO: import this from somewhere else. export const assetMetaDataMap: ObjectMap = { '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498': { assetProxyId: AssetProxyId.ERC20, @@ -85,7 +83,7 @@ export const assetMetaDataMap: ObjectMap = { '0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': { assetProxyId: AssetProxyId.ERC20, decimals: 9, - primaryColor: '#BC9952', + primaryColor: '#DEB564', symbol: 'dgd', name: 'DigixDao', }, -- cgit From 9b725a645db423d20a4be1f1d5930f6ecb7ad682 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 19 Nov 2018 10:12:40 -0800 Subject: feat(instant): support custom iconUrls --- .../src/components/erc20_token_selector.tsx | 34 ++++++++++++++++------ packages/instant/src/types.ts | 1 + 2 files changed, 26 insertions(+), 9 deletions(-) (limited to 'packages/instant/src') 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 { 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 ( { - + - {!_.isUndefined(TokenIcon) ? ( - - ) : ( - - {displaySymbol} - - )} + @@ -122,3 +116,25 @@ class TokenSelectorRow extends React.Component { this.props.onClick(this.props.token); }; } + +interface TokenSelectorRowIconProps { + token: ERC20Asset; +} + +const TokenSelectorRowIcon: React.StatelessComponent = 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 ; + } else if (!_.isUndefined(TokenIcon)) { + return ; + } else { + return ( + + {displaySymbol} + + ); + } +}; 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 { -- cgit