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/package.json | 1 + 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 ++ .../src/components/erc20_token_selector.tsx | 15 ++++-- packages/instant/src/data/asset_meta_data_map.ts | 4 +- packages/instant/webpack.config.js | 4 ++ yarn.lock | 63 +++++++++++++++++++++- 35 files changed, 223 insertions(+), 10 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 diff --git a/packages/instant/package.json b/packages/instant/package.json index 6caa3902b..669272cb1 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -89,6 +89,7 @@ "npm-run-all": "^4.1.2", "nyc": "^11.0.1", "shx": "^0.2.2", + "svg-react-loader": "^0.4.6", "ts-jest": "^23.10.3", "tslint": "5.11.0", "typedoc": "0.13.0", 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', }, diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index 3129e13a6..3c5cafc1d 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -20,6 +20,10 @@ const config = { test: /\.(ts|tsx)$/, loader: 'awesome-typescript-loader', }, + { + test: /\.svg$/, + loader: 'svg-react-loader', + }, ], }, devServer: { diff --git a/yarn.lock b/yarn.lock index e4304acd5..a7a55a7b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2292,6 +2292,10 @@ atob@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc" +atob@^2.1.1: + version "2.1.2" + resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" + autoprefixer@^6.3.1: version "6.7.7" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" @@ -4647,6 +4651,15 @@ css-what@2.1: version "2.1.0" resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" +css@2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" + dependencies: + inherits "^2.0.3" + source-map "^0.6.1" + source-map-resolve "^0.5.2" + urix "^0.1.0" + cssesc@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" @@ -9509,7 +9522,7 @@ loader-runner@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" -loader-utils@^1.1.0: +loader-utils@1.1.0, loader-utils@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" dependencies: @@ -9769,7 +9782,7 @@ lodash@^3.3.1, lodash@^3.6.0, lodash@^3.7.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.13.1, lodash@^4.15.0: +lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0: version "4.17.11" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" @@ -12335,6 +12348,10 @@ railroad-diagrams@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e" +ramda@0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" + randexp@0.4.6: version "0.4.6" resolved "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3" @@ -13391,6 +13408,10 @@ rx-lite@*, rx-lite@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444" +rx@4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782" + rx@^2.4.3: version "2.5.3" resolved "https://registry.yarnpkg.com/rx/-/rx-2.5.3.tgz#21adc7d80f02002af50dae97fd9dbf248755f566" @@ -14012,6 +14033,16 @@ source-map-resolve@^0.5.0: source-map-url "^0.4.0" urix "^0.1.0" +source-map-resolve@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259" + dependencies: + atob "^2.1.1" + decode-uri-component "^0.2.0" + resolve-url "^0.2.1" + source-map-url "^0.4.0" + urix "^0.1.0" + source-map-support@0.5.6, source-map-support@^0.5.6: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13" @@ -14503,6 +14534,17 @@ supports-color@^5.5.0: dependencies: has-flag "^3.0.0" +svg-react-loader@^0.4.6: + version "0.4.6" + resolved "https://registry.yarnpkg.com/svg-react-loader/-/svg-react-loader-0.4.6.tgz#b263efb3e3d2fff4c682a729351aba5f185051a1" + dependencies: + css "2.2.4" + loader-utils "1.1.0" + ramda "0.21.0" + rx "4.1.0" + traverse "0.6.6" + xml2js "0.4.17" + svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" @@ -14989,6 +15031,10 @@ traverse-chain@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1" +traverse@0.6.6: + version "0.6.6" + resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" + treeify@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.1.0.tgz#4e31c6a463accd0943879f30667c4fdaff411bb8" @@ -16512,6 +16558,13 @@ xml-name-validator@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" +xml2js@0.4.17: + version "0.4.17" + resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868" + dependencies: + sax ">=0.6.0" + xmlbuilder "^4.1.0" + xml2js@0.4.19: version "0.4.19" resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7" @@ -16519,6 +16572,12 @@ xml2js@0.4.19: sax ">=0.6.0" xmlbuilder "~9.0.1" +xmlbuilder@^4.1.0: + version "4.2.1" + resolved "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5" + dependencies: + lodash "^4.0.0" + xmlbuilder@~9.0.1: version "9.0.7" resolved "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d" -- cgit v1.2.3