docs(coin-app): Add crypto icons

Author: ntucker

examples/coin-app/src/pages/AssetDetail/index.tsx

@@ -11,7 +11,9 @@ export default function AssetDetail({ id }: { id: string }) {
   return (
     <>
       <header>
-        <h1>{currency.name}</h1>
+        <h1>
+          <img src={currency.icon} /> {currency.name}
+        </h1>
         <h2>
           <AssetPrice product_id={`${currency.id}-USD`} />
         </h2>

examples/coin-app/src/pages/Home/CurrencyList.tsx

@@ -22,6 +22,7 @@ export default function CurrencyList() {
     <table>
       <thead>
         <tr>
+          <th></th>
           <th align="left">Name</th>
           <th>Volume 30d</th>
           <th align="right">Price</th>
@@ -30,6 +31,11 @@ export default function CurrencyList() {
       <tbody>
         {currencies.slice(0, 25).map(currency => (
           <tr key={currency.pk()}>
+            <td>
+              {currency.icon && (
+                <img src={currency.icon} width="20" height="20" />
+              )}
+            </td>
             <td align="left">
               <Link name="AssetDetail" props={{ id: currency.id }}>
                 {currency.name}

examples/coin-app/src/resources/Currency.ts

@@ -1,5 +1,6 @@
 import { Entity, createResource, schema } from '@data-client/rest';
 
+import { iconTable } from './cryptoIconTable';
 import { Stats } from './Stats';
 
 export class Currency extends Entity {
@@ -31,6 +32,10 @@ export class Currency extends Entity {
   // faked for client-side join
   stats = Stats.fromJS();
 
+  get icon() {
+    return iconTable[this.id]?.img_url;
+  }
+
   pk(): string {
     return this.id;
   }

examples/coin-app/src/resources/cryptoIcon.json

@@ -0,0 +1,8 @@
+import cryptoIcon from './cryptoIcon.json';
+
+export const iconTable: Record<string, any> = {};
+cryptoIcon.forEach(crypto => {
+  if (!(crypto.symbol in iconTable)) {
+    iconTable[crypto.symbol] = crypto;
+  }
+});