{"version":3,"sources":["components/Dashboard.js","utils.js","formatmacd.js","App.js","index.js"],"names":["Dashboard","price","data","className","options","tooltips","intersect","mode","responsive","maintainAspectRatio","formatData","finalData","labels","datasets","label","backgroundColor","borderColor","fill","dates","map","val","ts","date","Date","hour","getHours","minute","getMinutes","second","getSeconds","milliseconds","getMilliseconds","day","getDate","month","getMonth","year","getFullYear","priceArr","reverse","formatmacdData","macd","signal","App","useState","currencies","setcurrencies","pair","setpair","setprice","pastData","setpastData","ws","useRef","macdarray","macdarray2","setmacd2","macdarray3","setmacd3","first","url","useEffect","current","WebSocket","pairs","a","fetch","then","res","json","filtered","filter","quote_currency","sort","b","base_currency","apiCall","msg","type","product_ids","channels","jsonMsg","JSON","stringify","send","historicalDataURL","dataArr","formattedData","col2","i","length","push","MACD","require","macdInput","values","fastPeriod","slowPeriod","signalPeriod","SimpleMAOscillator","SimpleMASignal","calculate","final","console","log","fetchHistoricalData","onmessage","e","parse","product_id","csv","Object","keys","name","value","onChange","unsubMsg","unsub","target","cur","idx","id","display_name","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.1ac677ff.chunk.js","sourcesContent":["import React, { useRef } from \"react\";\nimport { Line } from \"react-chartjs-2\";\n\nfunction Dashboard({ price, data }) {\n  const opts = {\n    tooltips: {\n      intersect: true,\n      mode: \"index\"\n    },\n    responsive: true,\n    maintainAspectRatio: false\n  };\n  if (price === \"0.00\") {\n    return <h2>please select a currency pair</h2>;\n  }\n  return (\n    <div className=\"dashboard\">\n      <h2>{`$${price}`}</h2>\n\n      <div className=\"chart-container\">\n        <Line data={data} options={opts} />\n      </div>\n    </div>\n  );\n}\n\nexport default Dashboard;","export const formatData = (data) => {\n    let finalData = {\n      labels: [],\n      datasets: [\n        {\n          label: \"Price\",\n          data: [],\n          backgroundColor: \"rgb(10, 10, 10)\",\n          borderColor: \"rgba(200, 200, 200)\",\n          fill: false\n        }\n      ]\n    };\n  \n    let dates = data.map((val) => {\n      const ts = val[0];\n      let date = new Date(ts * 1000);\n\n      let hour = date.getHours();\n      let minute = date.getMinutes();\n      let second = date.getSeconds();\n      let milliseconds = date.getMilliseconds();\n\n      let day = date.getDate();\n      let month = date.getMonth() + 1;\n      let year = date.getFullYear();\n  \n      let final = `${hour}:${minute}:${second}:${milliseconds}__${day}-${month}-${year}`;\n      return final;\n    });\n  \n    let priceArr = data.map((val) => {\n      return val[4];\n    });\n  \n    priceArr.reverse();\n    dates.reverse();\n    finalData.labels = dates;\n    finalData.datasets[0].data = priceArr;\n\n    return finalData;\n  };\n  ","export const formatmacdData = (data) => {\n    let finalData = {\n      labels: [],\n      datasets: [\n        {\n          label: \"MacD\",\n          data: [],\n          backgroundColor: \"rgb(255, 0, 0)\",\n          borderColor: \"rgba(255, 0, 0)\",\n          fill: false\n        },\n        {\n          label: \"Signal\",\n          data: [],\n          backgroundColor: \"rgb(0, 255,0)\",\n          borderColor: \"rgba(0,255, 0)\",\n          fill: false\n        }\n      ]\n    };\n  \n    let dates = data.map((val) => {\n      let final = val[\"date\"];\n      return final;\n    });\n  \n    let macd = data.map((val) => {\n      return val[\"MACD\"];\n    });\n    let signal = data.map((val) => {\n      return val[\"signal\"];\n    });\n    macd.reverse();\n    dates.reverse();\n    finalData.labels = dates;\n    finalData.datasets[0].data = macd;\n    finalData.datasets[1].data = signal;\n    return finalData;\n  };\n  ","import 'devextreme/dist/css/dx.common.css';\nimport 'devextreme/dist/css/dx.light.css';\nimport React, { useState, useEffect, useRef } from \"react\";\nimport Dashboard from \"./components/Dashboard\";\nimport { formatData } from \"./utils\";\nimport { formatmacdData } from \"./formatmacd\";\nimport \"./styles.css\";\nimport 'devextreme/dist/css/dx.light.css';\nimport { CSVLink, CSVDownload } from \"react-csv\";\nimport { macd, sma } from \"technicalindicators\";\n\nexport default function App() {\n  const [currencies, setcurrencies] = useState([]);\n  const [pair, setpair] = useState(\"\");\n  const [price, setprice] = useState(\"0.00\");\n  //var [priceSMA, setpriceSMA] = useState(\"\");\n  const [priceOBV, setpriceOBV] = useState({});\n  const [pastData, setpastData] = useState({});\n  const [csvdata, setcsvdata] = useState({});\n  const ws = useRef(null);\n  var printarray=[];\n  var ssma=useState([]);\n  var macdarray=[];\n  const [macdarray2, setmacd2] = useState({});\n  const [macdarray3, setmacd3] = useState({});\n  const opts = {\n    tooltips: {\n      intersect: true,\n      mode: \"index\"\n    },\n    responsive: true,\n    maintainAspectRatio: false\n  };\n\n  let first = useRef(false);\n  const url = \"https://api.pro.coinbase.com\";\n\n  useEffect(() => {\n    ws.current = new WebSocket(\"wss://ws-feed.pro.coinbase.com\");\n\n    let pairs = [];\n\n    const apiCall = async () => {\n      await fetch(url + \"/products\")\n        .then((res) => res.json())\n        .then((data) => (pairs = data));\n      \n      let filtered = pairs.filter((pair) => {\n        if (pair.quote_currency === \"USD\") {\n          return pair;\n        }\n      });\n\n      filtered = filtered.sort((a, b) => {\n        if (a.base_currency < b.base_currency) {\n          return -1;\n        }\n        if (a.base_currency > b.base_currency) {\n          return 1;\n        }\n        return 0;\n      });\n\n      \n      setcurrencies(filtered);\n\n      first.current = true;\n    };\n\n    apiCall();\n  }, []);\n\n  useEffect(() => {\n    if (!first.current) {\n      \n      return;\n    }\n\n    \n    let msg = {\n      type: \"subscribe\",\n      product_ids: [pair],\n      channels: [\"ticker\"]\n    };\n    let jsonMsg = JSON.stringify(msg);\n    ws.current.send(jsonMsg);\n\n\n\n\n    \n    let historicalDataURL = `${url}/products/${pair}/candles?granularity=60`;\n    const fetchHistoricalData = async () => {\n      let dataArr = [];\n      await fetch(historicalDataURL)\n        .then((res) => res.json())\n        .then((data) => (dataArr = data));\n      \n      let formattedData = formatData(dataArr);\n      \n      setpastData(formattedData);\n     // setpriceSMA(sma(pastData))\n     // setpriceOBV(macd(pastData))\n      \n     let col2 = [];\n     for (let i=0;i<dataArr.length;i++){\n      let val = dataArr[i][2];\n      col2.push(val);\n    }\n      \n      var MACD = require('technicalindicators').MACD;\n      var macdInput = {\n      values            : col2,\n      fastPeriod        : 12,\n      slowPeriod        : 26,\n      signalPeriod      :  9,\n      SimpleMAOscillator: false,\n      SimpleMASignal    : false\n    }\n\nmacdarray=MACD.calculate(macdInput);\n\n\n\nfor (let i=0;i<macdarray.length;i++){\n  let date = new Date(dataArr[i][0] * 1000);\n\n  let hour = date.getHours();\n  let minute = date.getMinutes();\n  let second = date.getSeconds();\n  let milliseconds = date.getMilliseconds();\n\n  let day = date.getDate();\n  let month = date.getMonth() + 1;\n  let year = date.getFullYear();\n\n  let final = `${hour}:${minute}:${second}:${milliseconds}__${day}-${month}-${year}`;\n  macdarray[i][\"date\"]=final;\n  macdarray[i][\"closing\"]=dataArr[i][2];\n}\nconsole.log(\"done\");\nlet macd=formatmacdData(macdarray);\nsetmacd3(macd)\nsetmacd2(macdarray)\n\n\n \n    };\n\nfetchHistoricalData();\n\n    ws.current.onmessage = (e) => {\n      let data = JSON.parse(e.data);\n      if (data.type !== \"ticker\") {\n        return;\n      }\n\n      if (data.product_id === pair) {\n        setprice(data.price);\n      }\n    };\n  }, [pair]);\n\n  const handleSelect = (e) => {\n    let unsubMsg = {\n      type: \"unsubscribe\",\n      product_ids: [pair],\n      channels: [\"ticker\"]\n    };\n    let unsub = JSON.stringify(unsubMsg);\n\n    ws.current.send(unsub);\n\n    setpair(e.target.value);\n  };\n  \n  \n  let csv=[];\n  if(Object.keys(macdarray2).length>0){\n    csv.push(<CSVLink data={macdarray2}>Download CSV</CSVLink>);\n  }\n\n\n\n  return (\n    <div className=\"container\">\n      {\n        <select name=\"currency\" value={pair} onChange={handleSelect}>\n          {currencies.map((cur, idx) => {\n            return (\n              <option key={idx} value={cur.id}>\n                {cur.display_name}\n              </option>\n            );\n          })}\n        </select>\n      }\n      {csv}\n      <Dashboard price={price} data={pastData} />\n      <Dashboard price={price} data={macdarray3} />\n\n\n\n      obv macd crossing \n      slippage indicators\n      \n\n    </div>\n  );\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}