[{"/home/giulio/dev/gkaching/websrc/src/components/App.tsx":"1","/home/giulio/dev/gkaching/websrc/src/components/Cards.tsx":"2","/home/giulio/dev/gkaching/websrc/src/components/Overlays.tsx":"3","/home/giulio/dev/gkaching/websrc/src/index.tsx":"4"},{"size":4418,"mtime":1609331626715,"results":"5","hashOfConfig":"6"},{"size":5688,"mtime":1609331022076,"results":"7","hashOfConfig":"6"},{"size":5235,"mtime":1609331232067,"results":"8","hashOfConfig":"6"},{"size":321,"mtime":1609332875579,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"12"},"1ev2e5",{"filePath":"13","messages":"14","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"15"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"18"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/giulio/dev/gkaching/websrc/src/components/App.tsx",["21"],"import React, { Component } from \"react\";\nimport {\n    Balance,\n    CurrencyPair,\n    EventName,\n    EventProp,\n    FirstConnectMessage,\n    NewEventMessage,\n    NewTickMessage,\n    PositionProp\n} from \"../types\";\nimport { socket } from \"../index\";\nimport { symbolToPair } from \"../utils\";\nimport { Helmet } from \"react-helmet\";\nimport { Navbar, Sidebar } from \"./Navbars\";\nimport { Statusbar } from \"./Statusbar\";\nimport { PositionsTable } from \"./Tables\";\nimport RPlot from \"./RPlot\";\n\ntype AppState = {\n    current_price: number,\n    current_tick: number,\n    last_update: Date,\n    positions: Array<PositionProp>,\n    events: Array<EventProp>,\n    active_pair: CurrencyPair,\n    available_pairs: Array<CurrencyPair>,\n    balances: Array<Balance>\n}\n\nclass App extends Component<{}, AppState> {\n    event_id = 0;\n\n    state = {\n        current_price: 0,\n        current_tick: 0,\n        last_update: new Date(),\n        positions: [],\n        events: [],\n        balances: [],\n        active_pair: symbolToPair(\"tBTCUSD\"),\n        available_pairs: []\n    }\n\n    constructor(props: {}) {\n        super(props)\n    }\n\n    componentDidMount() {\n        socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => {\n            this.setState({\n                current_price: data.prices[data.prices.length - 1],\n                current_tick: data.ticks[data.ticks.length - 1],\n                last_update: new Date(),\n                positions: data.positions,\n                balances: data.balances\n            })\n        })\n\n        socket.on(EventName.NewTick, (data: NewTickMessage) => {\n            this.setState({\n                current_price: data.price,\n                current_tick: data.tick,\n                last_update: new Date(),\n                positions: data.positions,\n                balances: data.balances\n            })\n        })\n\n        socket.on(EventName.NewEvent, (data: NewEventMessage) => {\n            // ignore new tick\n            if (!data.kind.toLowerCase().includes(\"new_tick\")) {\n                const new_event: EventProp = {\n                    id: this.event_id,\n                    name: data.kind,\n                    tick: data.tick\n                }\n\n                this.event_id += 1\n\n                this.setState((state) => ({\n                    events: [...state.events, new_event]\n                }))\n            }\n        })\n    }\n\n    render() {\n        return (\n            <>\n                <Helmet>\n                    <title> Rustico\n                        - {String(this.state.current_price.toLocaleString())} {String(this.state.active_pair.base) + \"/\" + String(this.state.active_pair.quote)} </title>\n                </Helmet>\n                <div className=\"bg-gray-800\">\n                    <div className=\"h-screen max-w-screen flex mx-auto\">\n                        <Navbar />\n\n                        <main\n                            className=\"my-1 py-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*\n                    transition duration-500 ease-in-out overflow-y-auto flex flex-col\">\n                            <div className=\"flex justify-center text-2xl my-2\">\n                                <Statusbar balances={this.state.balances} positions={this.state.positions}\n                                    price={this.state.current_price}\n                                    tick={this.state.current_tick} />\n                            </div>\n\n                            <div className=\"flex flex-col flex-grow my-8 shadow-md hover:shadow-lg\">\n                                <div\n                                    className=\"py-2 flex-grow bg-white min-width dark:bg-gray-600 rounded-lg overflow-hidden\">\n                                    <RPlot />\n                                </div>\n                            </div>\n\n                            {this.state.positions.length > 0 ?\n                                <PositionsTable positions={this.state.positions} /> : null}\n\n                            <footer className=\"flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300\">\n                                <span className=\"my-1 mx-1\">Made with ❤️ by the Peperone in a scantinato</span>\n                            </footer>\n                        </main>\n\n                        <Sidebar />\n                    </div>\n                </div>\n            </>\n        )\n    }\n}\n\nexport default App;","/home/giulio/dev/gkaching/websrc/src/components/Cards.tsx",["22","23","24","25"],"import React, { Component } from 'react';\nimport { Balance, EventName, FirstConnectMessage, NewTickMessage } from \"../types\";\nimport { socket } from \"../index\";\n\nexport type CoinBalanceProps = {\n    name: string,\n    amount: number,\n    percentage: number,\n    quote_equivalent: number,\n    quote_symbol: string,\n}\n\nclass CoinBalance extends Component<CoinBalanceProps> {\n    constructor(props: CoinBalanceProps) {\n        super(props);\n    }\n\n    render() {\n        // do not print equivalent if this element is the quote itself\n        const quoteBlock = this.props.name != this.props.quote_symbol ? this.props.quote_symbol.concat(\" \").concat(this.props.quote_equivalent.toLocaleString()) : null\n\n        // const accessory = SymbolAccessories.filter((accessory) => {\n        //     return accessory.name == this.props.name\n        // })\n        //\n        // const icon = accessory.length > 0 ? accessory.pop().icon : null\n\n        return (\n            <div className=\"flex-grow flex px-6 py-3 text-gray-800 items-center border-b -mx-4 align-middle\">\n                <div className={\"w-1/8\"}>\n                    {/*{icon}*/}\n                </div>\n                <div className=\"w-2/5 xl:w-1/4 px-4 flex items-center\">\n                    <span className=\"text-lg\">{this.props.name}</span>\n                </div>\n                <div className=\"hidden md:flex lg:hidden xl:flex w-1/4 px-1 flex-col\">\n                    <div className={\"italic w-full text-center\"}>\n                        {Math.trunc(this.props.percentage)}%\n                    </div>\n                    <div className=\"w-full bg-transparent mt-2\">\n                        <div className={\"bg-blue-400 rounded-lg text-xs leading-none py-1 text-center text-white\"}\n                            style={{ width: this.props.percentage.toString().concat(\"%\") }} />\n                    </div>\n                </div>\n                <div className=\"flex w-3/5 md:w/12\">\n                    <div className=\"w-1/2 px-4\">\n                        <div className=\"text-right\">\n                            {this.props.amount.toFixed(5)} {this.props.name}\n                        </div>\n                    </div>\n                    <div className=\"w-1/2 px-4 my-auto\">\n                        <div\n                            className={\"px-2 inline-flex text-center text-xs leading-5 font-semibold rounded-full bg-gray-200 text-gray-800\"}>\n                            {quoteBlock}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        )\n    }\n\n}\n\nexport type WalletCardProps = {\n    quote: string,\n}\n\nexport class WalletCard extends Component\n    <{}, { balances: Array<Balance> }> {\n    // constructor(props) {\n    //     super(props);\n    // }\n\n    state =\n        {\n            balances: []\n        }\n\n    totalQuoteBalance() {\n        let total = 0\n\n        this.state.balances.forEach((balance: Balance) => {\n            if (balance.currency == balance.quote) {\n                total += balance.amount\n            } else {\n                total += balance.quote_equivalent\n            }\n        })\n\n        return total\n    }\n\n    renderCoinBalances() {\n        return (\n            this.state.balances.map((balance: Balance) => {\n                const percentage_amount = balance.quote == balance.currency ? balance.amount : balance.quote_equivalent;\n\n                return (\n                    <CoinBalance key={balance.currency.concat(balance.kind)} name={balance.currency}\n                        amount={balance.amount} quote_equivalent={balance.quote_equivalent}\n                        percentage={percentage_amount / this.totalQuoteBalance() * 100}\n                        quote_symbol={balance.quote} />\n                )\n            })\n        )\n    }\n\n    componentDidMount() {\n        socket.on(EventName.NewTick, (data: NewTickMessage) => {\n            this.setState({\n                balances: data.balances\n            })\n        })\n\n        socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => {\n            this.setState({\n                balances: data.balances\n            })\n        })\n    }\n\n    render() {\n        return (\n            <div className=\"w-full mb-6 lg:mb-0 px-4 flex flex-col\">\n                <div\n                    className=\"flex-grow flex bg-white flex-col border-t border-b sm:rounded-lg sm:border shadow overflow-hidden\">\n                    <div className=\"border-b bg-gray-50\">\n                        <div className=\"flex justify-between px-6 -mb-px\">\n                            <h3 className=\"text-blue-700 py-4 font-normal text-lg\">Your Wallets</h3>\n                            <div className=\"flex\">\n                                <button type=\"button\"\n                                    className=\"appearance-none py-4 text-blue-700 border-b border-blue-dark mr-3\">\n                                    Margin\n                                </button>\n                                <button type=\"button\"\n                                    className=\"appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark\">\n                                    Chart\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n\n                    {this.renderCoinBalances()}\n\n                    <div className=\"px-6 py-4\">\n                        <div className=\"text-center text-gray-400\">\n                            Total Balance &asymp; USD {this.totalQuoteBalance().toLocaleString()}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}","/home/giulio/dev/gkaching/websrc/src/components/Overlays.tsx",["26"],"import React, {Component} from \"react\";\nimport {socket} from \"../index\";\nimport {EventName} from \"../types\";\n\nexport type ModalProps = {\n    show: boolean,\n    positionId: number,\n    toggleConfirmation: any\n}\n\nexport class ClosePositionModal extends Component<ModalProps, any> {\n    constructor(props: ModalProps) {\n        super(props);\n    }\n\n    render() {\n        if (!this.props.show) {\n            return null\n        }\n\n        return (\n            <div className=\"fixed z-10 inset-0 overflow-y-auto\">\n                <div className=\"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0\">\n                    <div className=\"fixed inset-0 transition-opacity\" aria-hidden=\"true\">\n                        <div className=\"absolute inset-0 bg-gray-500 opacity-75\"/>\n                    </div>\n\n                    {/*This element is to trick the browser into centering the modal contents. -->*/}\n                    <span className=\"hidden sm:inline-block sm:align-middle sm:h-screen\"\n                          aria-hidden=\"true\">&#8203;</span>\n\n                      {/*Modal panel, show/hide based on modal state.*/}\n\n                      {/*Entering: \"ease-out duration-300\"*/}\n                      {/*  From: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"*/}\n                      {/*  To: \"opacity-100 translate-y-0 sm:scale-100\"*/}\n                      {/*Leaving: \"ease-in duration-200\"*/}\n                      {/*  From: \"opacity-100 translate-y-0 sm:scale-100\"*/}\n                      {/*  To: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"*/}\n\n                    <div\n                        className=\"inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full\"\n                        role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-headline\">\n                        <div className=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n                            <div className=\"sm:flex sm:items-start\">\n                                <div\n                                    className=\"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10\">\n                                     {/*Heroicon name: exclamation -->*/}\n                                    <svg className=\"h-6 w-6 text-red-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                         viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\"\n                                              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"/>\n                                    </svg>\n                                </div>\n                                <div className=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n                                    <h3 className=\"text-lg leading-6 font-medium text-gray-900\" id=\"modal-headline\">\n                                        Close position\n                                    </h3>\n                                    <div className=\"mt-2\">\n                                        <p className=\"text-sm text-gray-500\">\n                                            Are you sure you want to close the position? This action cannot be undone.\n                                        </p>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse\">\n                            <button type=\"button\"\n                                    className=\"w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm\"\n                                    onClick={event => {\n                                        socket.emit(EventName.ClosePosition, {\n                                            position_id: this.props.positionId\n                                        })\n\n                                        this.props.toggleConfirmation()\n                                    }}>\n                                Close\n                            </button>\n                            <button type=\"button\"\n                                    className=\"mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\"\n                                    onClick={() => this.props.toggleConfirmation()}>\n                                Cancel\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}","/home/giulio/dev/gkaching/websrc/src/index.tsx",[],{"ruleId":"27","severity":1,"message":"28","line":45,"column":5,"nodeType":"29","messageId":"30","endLine":47,"endColumn":6},{"ruleId":"27","severity":1,"message":"28","line":14,"column":5,"nodeType":"29","messageId":"30","endLine":16,"endColumn":6},{"ruleId":"31","severity":1,"message":"32","line":20,"column":44,"nodeType":"33","messageId":"34","endLine":20,"endColumn":46},{"ruleId":"31","severity":1,"message":"35","line":83,"column":34,"nodeType":"33","messageId":"34","endLine":83,"endColumn":36},{"ruleId":"31","severity":1,"message":"35","line":96,"column":57,"nodeType":"33","messageId":"34","endLine":96,"endColumn":59},{"ruleId":"27","severity":1,"message":"28","line":12,"column":5,"nodeType":"29","messageId":"30","endLine":14,"endColumn":6},"@typescript-eslint/no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","eqeqeq","Expected '!==' and instead saw '!='.","BinaryExpression","unexpected","Expected '===' and instead saw '=='."]