pi-apps#57 finish search by asset code:

- now shows a list of matching assets - so for example: 'BTC' lists all BTC assets - new route /asset/<code> - added screenshots and README.md doc
wayudi208012 · Mar 14, 2018 · 3276902 · 3276902
1 parent 899f6af
commit 3276902
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -53,14 +53,15 @@ Local: http://localhost:3000
 
 ### Search
 
-| Resource          | URI                                                                                                                                                                    |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Federated address | [/search/steexp\*fed.network](https://steexp.com/search/steexp*fed.network)                                                                                            |
-| Public address    | [/search/GAREELUB43IRHWEASCFBLKHURCGMHE5IF6XSE7EXDLACYHGRHM43RFOX](https://steexp.com/search/GAREELUB43IRHWEASCFBLKHURCGMHE5IF6XSE7EXDLACYHGRHM43RFOX)                 |
-| Ledger            | [/search/10000000](https://steexp.com/search/10000000)                                                                                                                 |
-| Transaction       | [/search/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071](https://steexp.com/search/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071) |
-| Asset Code        | [/search/MOBI](https://steexp.com/search/MOBI)                                                                                                                         |
-| Anchor Name       | [/search/ripplefox](https://steexp.com/search/ripplefox)                                                                                                               |
+| Resource              | URI                                                                                                                                                                    |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Federated address     | [/search/steexp\*fed.network](https://steexp.com/search/steexp*fed.network)                                                                                            |
+| Public address        | [/search/GAREELUB43IRHWEASCFBLKHURCGMHE5IF6XSE7EXDLACYHGRHM43RFOX](https://steexp.com/search/GAREELUB43IRHWEASCFBLKHURCGMHE5IF6XSE7EXDLACYHGRHM43RFOX)                 |
+| Ledger                | [/search/10000000](https://steexp.com/search/10000000)                                                                                                                 |
+| Transaction           | [/search/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071](https://steexp.com/search/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071) |
+| Asset Code            | [/search/NGN](https://steexp.com/search/NGN)                                                                                                                           |
+| Anchor Name           | [/search/ripplefox](https://steexp.com/search/ripplefox)                                                                                                               |
+| Anchor Name (Partial) | [/search/fox](https://steexp.com/search/fox)                                                                                                                           |
 
 ### Misc
 
@@ -69,6 +70,7 @@ Local: http://localhost:3000
 | Transaction | [/tx/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071](https://steexp.com/tx/26a568681712a44a515b2c90dcfaadb3ed2c40dc60254638407937bee4767071) |
 | Ledger      | [/ledger/10000000](https://steexp.com/ledger/10000000)                                                                                                         |
 | Anchor      | [/anchor/apay.io](https://steexp.com/anchor/apay.io)                                                                                                           |
+| Asset       | [/asset/NGN](https://steexp.com/asset/NGN)                                                                                                                     |
 
 ## Exploring Private / Local Development Networks<a name="private-networks"></a>
 

diff --git a/screenshots/search_by_anchor.png b/screenshots/search_by_anchor.png
diff --git a/screenshots/search_by_asset.png b/screenshots/search_by_asset.png
diff --git a/src/App.js b/src/App.js
@@ -136,6 +136,7 @@ class App extends Component {
                 <Route path="/accounts" component={Accounts} />
                 <Route path="/account/:id" component={Account} />
                 <Route path="/assets" component={Assets} />
+                <Route path="/asset/:id" component={Assets} />
                 <Route path="/anchors" component={Anchors} />
                 <Route path="/anchor/:id" component={Anchor} />
                 <Route path="/effects" component={Effects} />

diff --git a/src/components/Assets.js b/src/components/Assets.js
@@ -5,6 +5,7 @@ import Row from 'react-bootstrap/lib/Row'
 import Table from 'react-bootstrap/lib/Table'
 import {FormattedMessage, injectIntl} from 'react-intl'
 import PropTypes from 'prop-types'
+import has from 'lodash/has'
 
 import AccountLink from './shared/AccountLink'
 import BackendResourceBadgeButton from './shared/BackendResourceBadgeButton'
@@ -30,14 +31,14 @@ const Asset = ({code, domain, issuer}) => {
       <td>
         <AccountLink account={issuer} hideKnown />
       </td>
-      <td className="stellarToml">
+      <td>
         <div>{anchor.name}</div>
         <div>
           <a href={anchor.website} target="_blank">
             {anchor.website}
           </a>
         </div>
-        <div>
+        <div className="stellarToml">
           <BackendResourceBadgeButton
             label="server.toml"
             url={`https://${domain}/.well-known/stellar.toml`}
@@ -55,12 +56,21 @@ Asset.propTypes = {
 
 class Assets extends React.Component {
   render() {
-    if (!assets) return null
     const {formatMessage} = this.props.intl
     const header = titleWithJSONButton(
       formatMessage({id: 'assets'}),
       METADATA_PATH
     )
+
+    // if we have a code from /asset/<code> then show only assets with code
+    // starting with <code>; otherwise show all assets (/assets)
+    const allAssetKeys = Object.keys(assets)
+    const assetKeys = has(this.props, 'match.params.id')
+      ? allAssetKeys.filter(k =>
+          k.startsWith(this.props.match.params.id.toUpperCase())
+        )
+      : allAssetKeys
+
     return (
       <Grid>
         <Row>
@@ -81,12 +91,10 @@ class Assets extends React.Component {
                 </tr>
               </thead>
               <tbody>
-                {Object.keys(assets)
-                  .sort()
-                  .map(key => {
-                    const asset = assets[key]
-                    return <Asset key={key} {...asset} />
-                  })}
+                {assetKeys.sort().map(key => {
+                  const asset = assets[key]
+                  return <Asset key={key} {...asset} />
+                })}
               </tbody>
             </Table>
           </Panel>

diff --git a/src/components/layout/SearchBox.js b/src/components/layout/SearchBox.js
@@ -73,14 +73,6 @@ const HelpModal = props => (
       </div>
       <div>
         <h5>Asset Code</h5>
-        Search by code will load the account page of the{' '}
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.stellar.org/developers/guides/concepts/assets.html#anchors-issuing-assets"
-        >
-          Asset Issuer
-        </a>.
         <img
           src={`${process.env.PUBLIC_URL}/search/search_asset.png`}
           alt="search by asset code"

diff --git a/src/lib/search.js b/src/lib/search.js
@@ -18,7 +18,7 @@ const lcIncludes = (str1, str2) =>
 
 const searchAssetCode = code =>
   Object.keys(assets)
-    .filter(key => lcEquals(assets[key].code, code))
+    .filter(key => lcEquals(assets[key].code, code.toUpperCase()))
     .map(key => assets[key])
 
 const searchAnchorName = name =>
@@ -44,7 +44,7 @@ const searchStrToPath = searchStr => {
   // search by asset code
   const codeMatch = searchAssetCode(str)
   if (codeMatch.length > 0) {
-    return `/account/${codeMatch[0].issuer}`
+    return `/asset/${str.toUpperCase()}`
   }
 
   // search by anchor name (exact or substring)