fix token logo placeholder

ui/home/indicators/ChainIndicatorChart.tsx

@@ -15,7 +15,6 @@ interface Props {
   caption?: string;
 }
 
-const COLOR = '#439AE2';
 const CHART_MARGIN = { bottom: 0, left: 10, right: 10, top: 0 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
@@ -37,7 +36,7 @@ const ChainIndicatorChart = ({ data }: Props) => {
       <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ width ? 1 : 0 }>
         <ChartArea
           data={ data[0].items }
-          color={ COLOR }
+          color={ data[0].color }
           xScale={ xScale }
           yScale={ yScale }
         />

ui/home/indicators/utils/indicators.tsx

@@ -9,7 +9,8 @@ import globeIcon from 'icons/globe.svg';
 import txIcon from 'icons/transactions.svg';
 import { shortenNumberWithLetter } from 'lib/formatters';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
-const COLOR = '#439AE2';
+import TokenLogo from 'ui/shared/TokenLogo';
+const CHART_COLOR = '#439AE2';
 
 const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
   id: 'daily_txs',
@@ -25,7 +26,7 @@ const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
         .sort(sortByDateDesc),
       name: 'Tx/day',
-      color: COLOR,
+      color: CHART_COLOR,
       valueFormatter: (x) => shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 2 }),
     } ]),
   },
@@ -35,9 +36,8 @@ const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
   id: 'coin_price',
   title: `${ appConfig.network.currency.symbol } price`,
   value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  // todo_tom change to TokenLogo after token-transfers branch merge
-  icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
-  hint: `${ appConfig.network.currency.symbol } daily price in USD.`,
+  icon: <TokenLogo hash={ appConfig.network.nativeTokenAddress || '' } name={ appConfig.network.currency.name } boxSize={ 6 }/>,
+  hint: `${ appConfig.network.currency.symbol } token daily price in USD.`,
   api: {
     queryName: QueryKeys.chartsMarket,
     path: '/node-api/stats/charts/market',
@@ -46,7 +46,7 @@ const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
         .sort(sortByDateDesc),
       name: `${ appConfig.network.currency.symbol } price`,
-      color: COLOR,
+      color: CHART_COLOR,
       valueFormatter: (x) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
     } ]),
   },
@@ -67,7 +67,7 @@ const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
         .sort(sortByDateDesc),
       name: 'Market cap',
-      color: COLOR,
+      color: CHART_COLOR,
       valueFormatter: (x) => '$' + shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 0 }),
     } ]),
   },

ui/pages/Home.tsx

@@ -53,7 +53,6 @@ const Home = () => {
         <PageTitle text={
           `Home Page for ${ appConfig.network.name } network`
         }/>
-        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
         <ChainIndicators/>
         { /* will be deleted when we move to new CI */ }
         { isFormVisible && (
@@ -72,6 +71,7 @@ const Home = () => {
             <Button onClick={ handleSetTokenClick }>Set cookie</Button>
           </>
         ) }
+        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
       </VStack>
     </Page>
   );