Use CC Proxy for Price Data (#20)

* new enpoint, attempt to use new format * Change date-time format * Remove extra console log * Fix xmr graph date-time formatting * Fix graph media queries * Rename variable & update type
MyCryptoHQ · Jun 4, 2018 · a67d235 · a67d235
1 parent 043e1da
commit a67d235
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 19 deletions.
diff --git a/src/app/details/block-details.tsx b/src/app/details/block-details.tsx
@@ -56,7 +56,9 @@ export class BlockDetailsClass extends React.Component<Props, State> {
             <div className="Details-header">
               <h1 className="Details-header-title">Block Details</h1>
               <div className="flex-spacer" />
-              <p className="Details-header-timestamp">{formatApiDateStrings(block.timestamp)}</p>
+              <p className="Details-header-timestamp">
+                {formatApiDateStrings(block.timestamp_utc)}
+              </p>
             </div>
             <div className="Details-body">
               <div className="Details-body-section">

diff --git a/src/app/details/details.scss b/src/app/details/details.scss
@@ -112,7 +112,7 @@
             font-size: 1.1rem;
             &:first-child {
               color: $blue-gray-light;
-              font-size: .9rem;
+              font-size: 0.9rem;
             }
           }
         }

diff --git a/src/app/details/tx-details.tsx b/src/app/details/tx-details.tsx
@@ -92,7 +92,7 @@ export class TxDetailsClass extends React.Component<Props, State> {
                 <Tag type="coinbase" text="COINBASE" />
               ) : null}
               <div className="Details-header-timestamp">
-                {formatApiDateStrings(transaction.timestamp)}
+                {formatApiDateStrings(transaction.timestamp_utc)}
               </div>
             </div>
             <div className="Details-body">

diff --git a/src/app/home/home.scss b/src/app/home/home.scss
@@ -37,7 +37,7 @@
     display: block;
     font-size: 1rem;
     font-weight: 500;
-    color: #72BAC4;
+    color: #72bac4;
   }
   &-graph {
     margin: 0.5rem 0;
@@ -47,7 +47,7 @@
     width: 133%;
   }
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: 1016px) {
     flex-wrap: wrap;
     flex-direction: column-reverse;
 

diff --git a/src/app/home/index.tsx b/src/app/home/index.tsx
@@ -23,8 +23,8 @@ export class Home extends React.Component {
     const clientWidth = document.documentElement.clientWidth;
     // take rem into account when adjusting width for padding
     const width =
-      clientWidth < 900 ? (clientWidth > 600 ? clientWidth - 32 : clientWidth - 26) : 400;
-    const height = clientWidth > 600 && clientWidth < 900 ? 150 : 100;
+      clientWidth <= 1016 ? (clientWidth > 600 ? clientWidth - 64 : clientWidth - 26) : 400;
+    const height = clientWidth > 600 && clientWidth <= 1016 ? 150 : 100;
     // adjust for border width
     this.setState({ width: width - 2, height });
   };

diff --git a/src/components/line-graph/index.tsx b/src/components/line-graph/index.tsx
@@ -149,7 +149,8 @@ export class LineGraph extends React.Component<Props, State> {
   );
 
   public getDate = (point: Point) => {
-    return moment(point[2]).format('MMM DD, LT');
+    const date = point[2];
+    return moment.unix(date).format('MMM DD, LT');
   };
 
   public render() {

diff --git a/src/components/line-graph/xmr/index.tsx b/src/components/line-graph/xmr/index.tsx
@@ -25,11 +25,11 @@ export class MoneroGraph extends React.Component<Props, State> {
 
   public fetchData = () => {
     this.setState({ fetchingData: true });
-    fetchAsync('https://coincap.io/history/1day/XMR')
+    fetchAsync('https://proxy.mycryptoapi.com/mv')
       .then((json: any) => {
         if (json) {
           this.setState({ fetchingData: false });
-          this.setState({ data: this.formatRawData(json.price) });
+          this.setState({ data: this.formatRawData(json.Data) });
         } else {
           throw new Error('Failed to fetch XMR data');
         }
@@ -41,8 +41,8 @@ export class MoneroGraph extends React.Component<Props, State> {
   };
 
   public formatRawData = (data: any) => {
-    return data.map((arr: number[], i: number) => {
-      return [i, arr[1], arr[0]];
+    return data.map((point: { [key: string]: number }, i: number) => {
+      return [i, point.close, point.time];
     });
   };
 
@@ -62,7 +62,7 @@ export class MoneroGraph extends React.Component<Props, State> {
         <div className="xmr-price-header">
           <p className="title">Monero Price</p>
           <div className="flex-spacer" />
-          <p className="time">24h</p>
+          <p className="time">7d</p>
         </div>
         <div className="xmr-price-data">
           <div className="left">
@@ -113,7 +113,7 @@ export class MoneroGraph extends React.Component<Props, State> {
         <div className="xmr-price-header">
           <p className="title">Monero Price</p>
           <div className="flex-spacer" />
-          <p className="time">24h</p>
+          <p className="time">7d</p>
         </div>
         <div className="xmr-price-data" aria-hidden={true}>
           <div className="left">

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -78,7 +78,7 @@ span {
     margin-bottom: 3rem;
   }
 
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: 1016px) {
     padding: 1rem 1.5rem;
   }
 }

diff --git a/src/utils/functions.ts b/src/utils/functions.ts
@@ -25,10 +25,7 @@ export const toKB = (bytes: number | string) => {
 };
 
 export const formatApiDateStrings = (str: string) => {
-  return moment
-    .unix(parseInt(str, 10))
-    .utc()
-    .format('YYYY / MM / DD – HH:MM UTC');
+  return moment(str).format('YYYY / MM / DD  HH:mm UTC');
 };
 
 export const createReducer = (initialState: any, handlers: any) => {