Add loading state to CFL metrics

packages/website/ts/components/code_demo.tsx

@@ -148,7 +148,7 @@ export interface CodeDemoProps {
     children: string;
     language: string;
     fontSize: string;
-    hideCopy?: boolean;
+    shouldHideCopy?: boolean;
 }
 
 export interface CodeDemoState {
@@ -160,14 +160,14 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         didCopyCode: false,
     };
     public render(): React.ReactNode {
-        const { fontSize, hideCopy } = this.props;
+        const { fontSize, shouldHideCopy } = this.props;
         const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
         const hljs = { ...customStyle.hljs, fontSize };
         const style = { ...customStyle, hljs };
         return (
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
-                    {!hideCopy && (
+                    {!shouldHideCopy && (
                         <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
                             <StyledButton>{copyButtonText}</StyledButton>
                         </CopyToClipboard>

packages/website/ts/components/tabbed_code_demo.tsx

@@ -50,7 +50,7 @@ export const TabbedCodeDemo: React.FC<TabbedCodeDemoProps> = props => {
                     {tab.label}
                 </Tab>
             ))}
-            <CodeDemo language={language} fontSize="16px" hideCopy={true}>
+            <CodeDemo language={language} fontSize="16px" shouldHideCopy={true}>
                 {code}
             </CodeDemo>
         </TabbedWrapper>

packages/website/ts/pages/cfl/cfl_metrics.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { Icon } from 'ts/components/icon';
 import { Paragraph } from 'ts/components/text';
+import { defaultData } from 'ts/pages/cfl/default_data';
 import { Metrics, MetricValue } from 'ts/pages/cfl/metrics';
 import { backendClient } from 'ts/utils/backend_client';
 
@@ -56,7 +57,7 @@ const PairTab = styled.label<PairTabProps>`
 interface CFLMetricsProps {}
 
 interface CFLMetricsState {
-    cflMetricsData?: CFLMetricsPairData[];
+    cflMetricsData: CFLMetricsPairData[];
     didError: boolean;
     selectedIndex: number;
 }
@@ -65,6 +66,7 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
     public state: CFLMetricsState = {
         didError: false,
         selectedIndex: 0,
+        cflMetricsData: defaultData,
     };
     public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
@@ -72,7 +74,7 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
     }
     public render(): React.ReactNode {
         const { cflMetricsData, selectedIndex } = this.state;
-        if (!cflMetricsData) {
+        if (!cflMetricsData.length) {
             return null;
         }
         const baseTokenSymbol = this._getSelectedPairData().takerSymbol;
@@ -129,6 +131,9 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
     }
     private _getLastPrice(): string {
         const data = this._getSelectedPairData();
+        if (!data.lastTradePrice) {
+            return '—';
+        }
         const num = numeral(data.lastTradePrice);
         const formattedNum = num.format('0.00');
         const currency = data.makerSymbol;
@@ -136,11 +141,31 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
     }
     private _getVolume(): string {
         const data = this._getSelectedPairData();
+        if (!data.volumeUSD) {
+            return '—';
+        }
         const num = numeral(data.volumeUSD);
         return num.format('$0,0');
     }
     private _getSlippageMetrics(): MetricValue[] {
         const data = this._getSelectedPairData();
+        if (!data.exchangeAverageSlippagePercentage) {
+            const placeholder = '—';
+            return [
+                {
+                    label: <Icon name="small_0x_logo" size="natural" />,
+                    value: placeholder,
+                },
+                {
+                    label: <Icon name="small_kyber_logo" size="natural" />,
+                    value: placeholder,
+                },
+                {
+                    label: <Icon name="small_uniswap_logo" size="natural" />,
+                    value: placeholder,
+                },
+            ];
+        }
         const zeroExSlippage = data.exchangeAverageSlippagePercentage.find(
             exchangeSlippage => exchangeSlippage.exchange === 'Radar Relay',
         );

packages/website/ts/pages/cfl/default_data.ts

@@ -0,0 +1,19 @@
+import { CFLMetricsPairData } from 'ts/types';
+
+export const defaultData: CFLMetricsPairData[] = [
+    {
+        takerSymbol: 'ETH',
+        makerSymbol: 'DAI',
+        tradeAmount: 10000,
+    },
+    {
+        takerSymbol: 'ETH',
+        makerSymbol: 'USDC',
+        tradeAmount: 10000,
+    },
+    {
+        takerSymbol: 'DAI',
+        makerSymbol: 'USDC',
+        tradeAmount: 10000,
+    },
+];

packages/website/ts/types.ts

@@ -732,10 +732,10 @@ export interface CFLMetricsPairData {
     takerSymbol: string;
     makerSymbol: string;
     tradeAmount: number;
-    volumeUSD: number;
-    lastTradePrice: number;
-    lastTradeTime: string;
-    exchangeAverageSlippagePercentage: ExchangeSlippageData[];
+    volumeUSD?: number;
+    lastTradePrice?: number;
+    lastTradeTime?: string;
+    exchangeAverageSlippagePercentage?: ExchangeSlippageData[];
 }
 
 export type WebsiteBackendCFLMetricsData = CFLMetricsPairData[];