From ff0e294c15da537b377a2a41196a05f05c75e19e Mon Sep 17 00:00:00 2001 From: Kapper Date: Sat, 17 Dec 2022 13:50:45 -0800 Subject: [PATCH 01/15] improved buttons ui --- src/App.svelte | 14 ++++++++ src/components/modals/Deposit.svelte | 2 +- src/components/trade/account/Account.svelte | 36 +++++++++++++++++---- 3 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index ce4108b..3816296 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -189,6 +189,20 @@ padding: 4px 10px; width: 120px; } + :global(button.primary) { + padding: 0 var(--base-padding); + height: 42px; + border-radius: var(--base-radius); + font-weight: 600; + color: var(--primary-darkest); + background-color: var(--primary); + white-space: nowrap; + font-size: 95%; + } + :global(.buttons) { + display: flex; + justify-content: space-around; + } diff --git a/src/components/modals/Deposit.svelte b/src/components/modals/Deposit.svelte index e817302..654a089 100644 --- a/src/components/modals/Deposit.svelte +++ b/src/components/modals/Deposit.svelte @@ -44,7 +44,7 @@ {#if $allowance * 1 <= amount * 1} - +
+ +
\ No newline at end of file From ff0d0d219310f92d66265daf1e35a73a7a92f745 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sat, 17 Dec 2022 19:08:47 -0800 Subject: [PATCH 02/15] created custom chart using data fetched from chainlink --- package-lock.json | 143 ++++++++++++++++++ package.json | 55 ++++--- src/api/markets.js | 34 +++++ src/components/trade/Chart/Chart.svelte | 109 +++++++++++++ src/components/trade/Trade.svelte | 2 +- .../trade/new-order/NewOrder.svelte | 62 +++++++- src/lib/config.js | 4 +- 7 files changed, 377 insertions(+), 32 deletions(-) create mode 100644 src/components/trade/Chart/Chart.svelte diff --git a/package-lock.json b/package-lock.json index f6da2b7..20fdd62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "alchemy-sdk": "^2.2.3", + "d3-scale": "^4.0.2", "lightweight-charts": "^3.8.0", "sirv-cli": "^2.0.2" }, @@ -1250,6 +1251,81 @@ "type": "^1.0.1" } }, + "node_modules/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -1637,6 +1713,14 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -3343,6 +3427,60 @@ "type": "^1.0.1" } }, + "d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==", + "requires": { + "internmap": "1 - 2" + } + }, + "d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==" + }, + "d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==" + }, + "d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "requires": { + "d3-color": "1 - 3" + } + }, + "d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "requires": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + } + }, + "d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "requires": { + "d3-array": "2 - 3" + } + }, + "d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "requires": { + "d3-time": "1 - 3" + } + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -3657,6 +3795,11 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" + }, "is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", diff --git a/package.json b/package.json index 095d0c0..4c39b5e 100644 --- a/package.json +++ b/package.json @@ -4,43 +4,42 @@ "description": "CAP UI Client", "main": "index.js", "scripts": { - "build": "rollup -c", - "dev": "rollup -c -w", - "start": "sirv build --single", - "deploy-ipfs": "npm run build && npx ipfs-deploy build" + "build": "rollup -c", + "dev": "rollup -c -w", + "start": "sirv build --single", + "deploy-ipfs": "npm run build && npx ipfs-deploy build" }, "repository": { - "type": "git", - "url": "git+https://github.com/capofficial/ui.git" + "type": "git", + "url": "git+https://github.com/capofficial/ui.git" }, "author": "", "license": "ISC", "bugs": { - "url": "https://github.com/capofficial/ui/issues" + "url": "https://github.com/capofficial/ui/issues" }, "homepage": "https://github.com/capofficial/ui#readme", "devDependencies": { - "@rollup/plugin-alias": "^3.1.9", - "@rollup/plugin-commonjs": "^22.0.2", - "@rollup/plugin-node-resolve": "^14.1.0", - "@rollup/plugin-replace": "^4.0.0", - "chart.js": "^3.9.1", - "ethers": "^5.7.1", - "rollup": "^2.79.0", - "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-css-only": "^3.1.0", - "rollup-plugin-gzip": "^3.0.1", - "rollup-plugin-livereload": "^2.0.5", - "rollup-plugin-svelte": "^7.1.0", - "rollup-plugin-terser": "^7.0.2", - "svelte": "^3.50.1", - "svelte-drag": "^3.1.0", - "tippy.js": "^6.3.7" + "@rollup/plugin-alias": "^3.1.9", + "@rollup/plugin-commonjs": "^22.0.2", + "@rollup/plugin-node-resolve": "^14.1.0", + "@rollup/plugin-replace": "^4.0.0", + "chart.js": "^3.9.1", + "ethers": "^5.7.1", + "rollup": "^2.79.0", + "rollup-plugin-copy": "^3.4.0", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-gzip": "^3.0.1", + "rollup-plugin-livereload": "^2.0.5", + "rollup-plugin-svelte": "^7.1.0", + "rollup-plugin-terser": "^7.0.2", + "svelte": "^3.50.1", + "svelte-drag": "^3.1.0", + "tippy.js": "^6.3.7" }, "dependencies": { - "alchemy-sdk": "^2.2.3", - "lightweight-charts": "^3.8.0", - "sirv-cli": "^2.0.2" + "alchemy-sdk": "^2.2.3", + "d3-scale": "^4.0.2", + "sirv-cli": "^2.0.2" } - } - \ No newline at end of file +} diff --git a/src/api/markets.js b/src/api/markets.js index 115a9df..d5b3efa 100644 --- a/src/api/markets.js +++ b/src/api/markets.js @@ -2,6 +2,7 @@ import { BPS_DIVIDER } from '@lib/config' import { getContract } from '@lib/contracts' import { markets, fundingRate, OILong, OIShort } from '@lib/stores' import { formatUnits } from '@lib/formatters' +import { CHAINLINK_URL, CHAINLINK_SCHEMA_NAME } from '../lib/config'; export async function getMarketsWithPrices() { const contract = getContract({name: 'Trade'}); @@ -26,4 +27,37 @@ export async function getOI(market) { const contract = getContract({name: 'Store'}); OILong.set(formatUnits(await contract.getOILong(market))); OIShort.set(formatUnits(await contract.getOIShort(market))); +} + +export async function getChainlinkPriceHistory(contractAddress) { + try { + const response = await fetch(CHAINLINK_URL, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query: ` + query PriceHistoryQuery($schemaName: String!, $contractAddress: String!) { + priceHistory(schemaName: $schemaName, contractAddress: $contractAddress) { + nodes { + id + latestAnswer + blockNumber + } + } + } + `, + variables: { + schemaName: CHAINLINK_SCHEMA_NAME, + contractAddress: contractAddress + } + }) + }); + const json = await response.json(); + const price = json?.data + return price; + } catch (e) { + console.error('/getChainlinkPriceHistory', e); + } } \ No newline at end of file diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte new file mode 100644 index 0000000..7366d3e --- /dev/null +++ b/src/components/trade/Chart/Chart.svelte @@ -0,0 +1,109 @@ + + + + + {#each pointsY as yPoint, i} + + {/each} + + + {#each yTicks as tick} + + {formatForDisplay(tick)} + + {/each} + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/trade/Trade.svelte b/src/components/trade/Trade.svelte index bbb8e55..46a7761 100644 --- a/src/components/trade/Trade.svelte +++ b/src/components/trade/Trade.svelte @@ -43,7 +43,7 @@
-
+
\ No newline at end of file diff --git a/src/components/trade/new-order/NewOrder.svelte b/src/components/trade/new-order/NewOrder.svelte index 4813d61..569511a 100644 --- a/src/components/trade/new-order/NewOrder.svelte +++ b/src/components/trade/new-order/NewOrder.svelte @@ -1,5 +1,9 @@ -new order \ No newline at end of file +
+
+
+ {$selectedMarketInfo.symbol} + +
+ showModal("MarketInfo", $selectedMarketInfo)} + > + {@html INFO_ICON_CIRCLE} +
+
+
{$selectedMarketInfo.price}
+
+
+
+ +
+
+
+ + diff --git a/src/lib/config.js b/src/lib/config.js index 07f86b6..14f82a2 100644 --- a/src/lib/config.js +++ b/src/lib/config.js @@ -46,4 +46,6 @@ export const CHAINDATA = { wsNetwork: 'arb-mainnet' } } -} \ No newline at end of file +} +export const CHAINLINK_URL = "https://atlas-postgraphile.public.main.prod.cldev.sh/graphql" +export const CHAINLINK_SCHEMA_NAME = "ethereum-mainnet-arbitrum-1"; \ No newline at end of file From 29ac4bd0c6d250100baeb34a2581800de62bac76 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sat, 17 Dec 2022 19:11:42 -0800 Subject: [PATCH 03/15] changed chart data to btc-usd --- src/components/trade/Chart/Chart.svelte | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 7366d3e..3582c7f 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -4,7 +4,7 @@ import { scaleLinear } from "d3-scale"; import {formatForDisplay} from '@lib/formatters' - const leftOffset = 45; + const leftOffset = 50; const bottomOffset = 10; let length; let pointsY = []; @@ -20,7 +20,8 @@ let points = []; try { let priceHistory = await getChainlinkPriceHistory( - "0x3607e46698d218b3a5cae44bf381475c0a5e2ca7" + // "0x3607e46698d218b3a5cae44bf381475c0a5e2ca7" + "0x942d00008d658dbb40745bbec89a93c253f9b882" ); priceHistory = priceHistory.priceHistory.nodes; priceHistory.reverse() @@ -66,7 +67,7 @@ {#each yTicks as tick} - {formatForDisplay(tick)} + {formatForDisplay(tick)} {/each} From 39ddc2b48bb7512cab25853f82e180bf530ce199 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 01:53:47 -0800 Subject: [PATCH 04/15] removed axis and added gradient below line --- src/components/trade/Chart/Chart.svelte | 78 +++++++------------------ 1 file changed, 21 insertions(+), 57 deletions(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 3582c7f..03ea417 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -2,13 +2,11 @@ import { getChainlinkPriceHistory } from "@api/markets"; import { onMount } from "svelte"; import { scaleLinear } from "d3-scale"; - import {formatForDisplay} from '@lib/formatters' - const leftOffset = 50; - const bottomOffset = 10; + const leftOffset = 0; + const bottomOffset = 0; let length; let pointsY = []; - let pointsX = []; let height = 0, width = 0; let minY let maxY @@ -26,14 +24,7 @@ priceHistory = priceHistory.priceHistory.nodes; priceHistory.reverse() length = priceHistory.length; - priceHistory = priceHistory.forEach((i) => { - points.push({ - blockNumber: Number(i.blockNumber), - value: Math.ceil(Number(i.latestAnswer) / 10 ** 6) / 10 ** 2, - }); - pointsY.push(Math.ceil(Number(i.latestAnswer) / 10 ** 6) / 10 ** 2); - pointsX.push(Number(i.blockNumber)); - }); + pointsY = priceHistory.map((i) => Math.ceil(Number(i.latestAnswer) / 10 ** 6) / 10 ** 2); maxY = Math.max(...pointsY); minY = Math.min(...pointsY); loading = false; @@ -46,49 +37,21 @@ $: yScale = scaleLinear() .domain([minY, maxY]) .range([height - bottomOffset - 20, 0]); - - $: xTicks = xScale.ticks(3) - $: yTicks = yScale.ticks(8) + $: linePath = `M${pointsY + .map((p, i) => `${xScale(i).toFixed(2)},${yScale(p).toFixed(2)}`) + .join('L')}`; + $: areaPath = `${linePath}L${xScale(length)},${yScale(minY)}L${xScale(0)},${yScale(minY)}Z`; - {#each pointsY as yPoint, i} - - {/each} - - - {#each yTicks as tick} - - {formatForDisplay(tick)} - - {/each} - - - - - - - - - + + + + + + \ No newline at end of file From ab7478791a46ec3b83b3dec18ed9745cb53ae82b Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 02:37:50 -0800 Subject: [PATCH 05/15] added price tooltip on chart --- src/components/trade/Chart/Chart.svelte | 39 ++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 03ea417..737e76b 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -10,6 +10,7 @@ let height = 0, width = 0; let minY let maxY + let activeIndex = null; // hovered timestamp onMount(async () => { const dimensions = document.getElementById("chart").getBoundingClientRect(); @@ -32,6 +33,15 @@ console.log(err); } }); + + const onMouseMove = (e) => { + const rect = e.currentTarget.getBoundingClientRect(); + const x = e.clientX - rect.left; + if (activeIndex > length) activeIndex = null; + if (activeIndex < 0) activeIndex = null; + activeIndex = Math.floor(+xScale.invert(x)) + } + let loading = true; $: xScale = scaleLinear().domain([0, length]).range([leftOffset, width]); $: yScale = scaleLinear() @@ -41,13 +51,27 @@ .map((p, i) => `${xScale(i).toFixed(2)},${yScale(p).toFixed(2)}`) .join('L')}`; $: areaPath = `${linePath}L${xScale(length)},${yScale(minY)}L${xScale(0)},${yScale(minY)}Z`; + + $: toolTipCoords = () => { + let x = xScale(activeIndex) + let y = yScale(pointsY[activeIndex]) - 30 + if (x < leftOffset + 50) x = 50 + if (x > width - 60) x = width - 60 + if (y < 0) y = 20 + return [x, y] + } - + + {#if activeIndex > 0} + + + ${pointsY[activeIndex].toFixed(2)} + {/if} @@ -70,5 +94,18 @@ fill: url(#chart-line); opacity: 0.1; } + .active-circle { + fill: var(--primary); + } + rect { + width: 100px; + height: 20px; + fill: white; + opacity: 1 + } + text { + fill: var(--layer25); + } + \ No newline at end of file From 5a83a6fef0d2377db6363b5494a8720ce46075c7 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 02:59:10 -0800 Subject: [PATCH 06/15] hid tooltip after 2 secs --- src/components/trade/Chart/Chart.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 737e76b..9dffc57 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -40,6 +40,7 @@ if (activeIndex > length) activeIndex = null; if (activeIndex < 0) activeIndex = null; activeIndex = Math.floor(+xScale.invert(x)) + setTimeout(() => activeIndex = null, 2000) } let loading = true; From 455348b81312344784dab9245a5226b6ba8c64c7 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 15:39:54 -0800 Subject: [PATCH 07/15] cleared timeout --- src/components/trade/Chart/Chart.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 9dffc57..99f1053 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -11,6 +11,7 @@ let minY let maxY let activeIndex = null; // hovered timestamp + let tooltipTimer; onMount(async () => { const dimensions = document.getElementById("chart").getBoundingClientRect(); @@ -40,7 +41,8 @@ if (activeIndex > length) activeIndex = null; if (activeIndex < 0) activeIndex = null; activeIndex = Math.floor(+xScale.invert(x)) - setTimeout(() => activeIndex = null, 2000) + clearTimeout(tooltipTimer); + tooltipTimer = setTimeout(() => activeIndex = null, 2000) } let loading = true; From 1ebde61a0fca7c45e8196c8082aa998269d4cee6 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 19:56:31 -0800 Subject: [PATCH 08/15] hid tooltip onmouseleave, removed timeout --- src/components/trade/Chart/Chart.svelte | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index 99f1053..b72ff7e 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -11,7 +11,6 @@ let minY let maxY let activeIndex = null; // hovered timestamp - let tooltipTimer; onMount(async () => { const dimensions = document.getElementById("chart").getBoundingClientRect(); @@ -41,8 +40,6 @@ if (activeIndex > length) activeIndex = null; if (activeIndex < 0) activeIndex = null; activeIndex = Math.floor(+xScale.invert(x)) - clearTimeout(tooltipTimer); - tooltipTimer = setTimeout(() => activeIndex = null, 2000) } let loading = true; @@ -65,7 +62,7 @@ } - + activeIndex = null}> From d17e69759c1c97474f2720db352202866dd6deb1 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sun, 18 Dec 2022 19:58:11 -0800 Subject: [PATCH 09/15] moved chainlinkSchema to chaindata --- src/api/markets.js | 8 +++++--- src/lib/config.js | 9 +++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/api/markets.js b/src/api/markets.js index d5b3efa..3a80413 100644 --- a/src/api/markets.js +++ b/src/api/markets.js @@ -1,8 +1,9 @@ +import {get} from 'svelte/store' import { BPS_DIVIDER } from '@lib/config' import { getContract } from '@lib/contracts' -import { markets, fundingRate, OILong, OIShort } from '@lib/stores' +import { markets, fundingRate, OILong, OIShort, chainId } from '@lib/stores' import { formatUnits } from '@lib/formatters' -import { CHAINLINK_URL, CHAINLINK_SCHEMA_NAME } from '../lib/config'; +import { CHAINLINK_URL, CHAINDATA } from '../lib/config'; export async function getMarketsWithPrices() { const contract = getContract({name: 'Trade'}); @@ -31,6 +32,7 @@ export async function getOI(market) { export async function getChainlinkPriceHistory(contractAddress) { try { + const _chainId = get(chainId); const response = await fetch(CHAINLINK_URL, { method: 'POST', headers: { @@ -49,7 +51,7 @@ export async function getChainlinkPriceHistory(contractAddress) { } `, variables: { - schemaName: CHAINLINK_SCHEMA_NAME, + schemaName: CHAINDATA[_chainId].chainlinkSchema, contractAddress: contractAddress } }) diff --git a/src/lib/config.js b/src/lib/config.js index 14f82a2..c1196d2 100644 --- a/src/lib/config.js +++ b/src/lib/config.js @@ -26,7 +26,8 @@ export const CHAINDATA = { key: 'gDY8gANK8VJAg508BzJbdCpmZ4N43IZP', network: 'arbitrum', wsNetwork: 'arb-mainnet' - } + }, + chainlinkSchema: "ethereum-mainnet-arbitrum-1" }, 42161: { label: 'arbitrum', @@ -44,8 +45,8 @@ export const CHAINDATA = { key: 'gDY8gANK8VJAg508BzJbdCpmZ4N43IZP', network: 'arbitrum', wsNetwork: 'arb-mainnet' - } + }, + chainlinkSchema: "ethereum-mainnet-arbitrum-1" } } -export const CHAINLINK_URL = "https://atlas-postgraphile.public.main.prod.cldev.sh/graphql" -export const CHAINLINK_SCHEMA_NAME = "ethereum-mainnet-arbitrum-1"; \ No newline at end of file +export const CHAINLINK_URL = "https://atlas-postgraphile.public.main.prod.cldev.sh/graphql" \ No newline at end of file From c68814c2e0a424516630e8d36dfb95ac1c8c0f97 Mon Sep 17 00:00:00 2001 From: Kapper Date: Mon, 19 Dec 2022 23:04:53 -0800 Subject: [PATCH 10/15] fixed chart activeIndex bug --- src/components/trade/Chart/Chart.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index b72ff7e..ae885bc 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -37,13 +37,13 @@ const onMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; - if (activeIndex > length) activeIndex = null; - if (activeIndex < 0) activeIndex = null; activeIndex = Math.floor(+xScale.invert(x)) + if (activeIndex >= length) activeIndex = null; + if (activeIndex < 0) activeIndex = null; } let loading = true; - $: xScale = scaleLinear().domain([0, length]).range([leftOffset, width]); + $: xScale = scaleLinear().domain([1, length + 1]).range([leftOffset, width]); $: yScale = scaleLinear() .domain([minY, maxY]) .range([height - bottomOffset - 20, 0]); @@ -70,7 +70,7 @@ {#if activeIndex > 0} - ${pointsY[activeIndex].toFixed(2)} + ${(pointsY[activeIndex] || 0).toFixed(2)} {/if} From 64b3e3fc8074e2b2d5a471b8bd428479c3ff6082 Mon Sep 17 00:00:00 2001 From: Kapper Date: Mon, 19 Dec 2022 23:37:13 -0800 Subject: [PATCH 11/15] added CreateNewOrder component --- src/App.svelte | 6 +- src/components/layout/Input.svelte | 263 +++++++++++------- src/components/trade/Trade.svelte | 2 +- .../trade/new-order/CreateNewOrder.svelte | 146 ++++++++++ .../trade/new-order/NewOrder.svelte | 19 +- 5 files changed, 323 insertions(+), 113 deletions(-) create mode 100644 src/components/trade/new-order/CreateNewOrder.svelte diff --git a/src/App.svelte b/src/App.svelte index 3816296..d476eaf 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -189,7 +189,7 @@ padding: 4px 10px; width: 120px; } - :global(button.primary) { + :global(button.primary, button.secondary) { padding: 0 var(--base-padding); height: 42px; border-radius: var(--base-radius); @@ -199,6 +199,10 @@ white-space: nowrap; font-size: 95%; } + :global(button.secondary) { + background-color: var(--secondary); + color: var(--secondary-darkest); + } :global(.buttons) { display: flex; justify-content: space-around; diff --git a/src/components/layout/Input.svelte b/src/components/layout/Input.svelte index 1f02ff7..69ebad9 100644 --- a/src/components/layout/Input.svelte +++ b/src/components/layout/Input.svelte @@ -1,112 +1,167 @@ - + -
+
+
+ {label} +
+ {#if !!onMaxButtonPress} +
+ Max +
+ {/if} +
+ +
- input { - height: 100%; - width: 100%; - box-sizing: border-box; - text-align: right; - padding-right: 14px; - border-radius: 6px; - background-color: var(--layer50); - border: 1px solid var(--layer200); - caret-color: var(--primary); - font-size: inherit; - font-weight: 600; - /*transition: padding 200ms ease-in-out;*/ - } - input:hover { - border-color: var(--layer300); - } - input:focus, input.highlighted { - border-color: var(--primary); - } - input:disabled { - color: var(--text200); - } - input.secondaryColor:focus, input.secondaryColor.highlighted { - border-color: var(--secondary); - caret-color: var(--secondary); - } - .invalid input { - border-color: var(--secondary); - } + - -
- - -
\ No newline at end of file diff --git a/src/components/trade/Trade.svelte b/src/components/trade/Trade.svelte index 46a7761..bbb8e55 100644 --- a/src/components/trade/Trade.svelte +++ b/src/components/trade/Trade.svelte @@ -43,7 +43,7 @@
-
+
\ No newline at end of file diff --git a/src/components/trade/new-order/CreateNewOrder.svelte b/src/components/trade/new-order/CreateNewOrder.svelte new file mode 100644 index 0000000..63c3108 --- /dev/null +++ b/src/components/trade/new-order/CreateNewOrder.svelte @@ -0,0 +1,146 @@ + + + +
+
+
+
setOrderType("market")} + > + Market +
+
setOrderType("limit")} + > + Limit +
+
setOrderType("stop")} + > + Stop +
+
+
+ + +
+
+
+ (size.set($balance))}/> +
+
+ + +
+ {#if orderType !== 'market'} +
+ +
+ {/if} +
+ + +
+
+
+
Margin
+
{formatForDisplay($size)} {$currencyName}
+
+
+
Fee (0.1%)
+
{formatForDisplay($size * 0.001)} {$currencyName}
+
+
+
+ + diff --git a/src/components/trade/new-order/NewOrder.svelte b/src/components/trade/new-order/NewOrder.svelte index 569511a..d57e81d 100644 --- a/src/components/trade/new-order/NewOrder.svelte +++ b/src/components/trade/new-order/NewOrder.svelte @@ -2,7 +2,8 @@ import { selectedMarketInfo } from "@lib/stores"; import { showModal } from "@lib/ui"; import { INFO_ICON_CIRCLE } from "@lib/icons"; - import Chart from '../Chart/Chart.svelte' + import Chart from "../Chart/Chart.svelte"; + import CreateNewOrder from "./CreateNewOrder.svelte"; /* TODO - For a boilerplate, see Account.svelte - Should have a header with the the selectedMarket and latest price (spaced between), as well as the funding rate @@ -36,11 +37,14 @@
{$selectedMarketInfo.price}
-
-
- -
-
+
+
+ +
+
+
+ +
From 5067c58756da98c328b5c69cb75da0b5f9fd63ff Mon Sep 17 00:00:00 2001 From: Kapper Date: Fri, 23 Dec 2022 01:06:17 -0800 Subject: [PATCH 12/15] completed markets component --- src/components/layout/table/Cell.svelte | 41 ++++++++ src/components/layout/table/Row.svelte | 15 +++ src/components/layout/table/Table.svelte | 102 +++++++++++++++++++ src/components/modals/MarketInfo.svelte | 41 +++----- src/components/trade/Trade.svelte | 1 - src/components/trade/markets/Markets.svelte | 106 ++++++++++++++++++-- src/lib/formatters.js | 12 +-- 7 files changed, 278 insertions(+), 40 deletions(-) create mode 100644 src/components/layout/table/Cell.svelte create mode 100644 src/components/layout/table/Row.svelte create mode 100644 src/components/layout/table/Table.svelte diff --git a/src/components/layout/table/Cell.svelte b/src/components/layout/table/Cell.svelte new file mode 100644 index 0000000..b9038d2 --- /dev/null +++ b/src/components/layout/table/Cell.svelte @@ -0,0 +1,41 @@ + + +
+ +
+ + diff --git a/src/components/layout/table/Row.svelte b/src/components/layout/table/Row.svelte new file mode 100644 index 0000000..76defcc --- /dev/null +++ b/src/components/layout/table/Row.svelte @@ -0,0 +1,15 @@ + + +
+ + diff --git a/src/components/layout/table/Table.svelte b/src/components/layout/table/Table.svelte new file mode 100644 index 0000000..151f356 --- /dev/null +++ b/src/components/layout/table/Table.svelte @@ -0,0 +1,102 @@ + + +
+
+ {#each columns as column} + {#if column.key == "tools"} +
+ {:else} +
+ {getLabelForKey(column.key)} +
+ {/if} + {/each} +
+ +
+ {#if isLoading} +
{@html LOADING_ICON}
+ {:else if isEmpty} +
Nothing to show.
+ {:else} + + {/if} +
+
+ + diff --git a/src/components/modals/MarketInfo.svelte b/src/components/modals/MarketInfo.svelte index fef4524..3842466 100644 --- a/src/components/modals/MarketInfo.svelte +++ b/src/components/modals/MarketInfo.svelte @@ -1,30 +1,19 @@ - - - - + + diff --git a/src/components/trade/Trade.svelte b/src/components/trade/Trade.svelte index bbb8e55..29cce5d 100644 --- a/src/components/trade/Trade.svelte +++ b/src/components/trade/Trade.svelte @@ -19,7 +19,6 @@ background-color: var(--layerDark); max-width: 1280px; margin: 0 auto; - margin-top: 25px; border: 1px solid var(--layerDark); } diff --git a/src/components/trade/markets/Markets.svelte b/src/components/trade/markets/Markets.svelte index b055406..f51c342 100644 --- a/src/components/trade/markets/Markets.svelte +++ b/src/components/trade/markets/Markets.svelte @@ -1,10 +1,102 @@ -markets \ No newline at end of file +
Markets
+
+
+ + {#each Object.keys($markets) as marketKey} + + + {@html formatMarketName($markets[marketKey].symbol, true)} + {#if $markets[$markets[marketKey].market]?.isClosed} +
+ {@html MOON_CIRCLE} +
+ {:else} + + {/if} + + + + {/each} +
+
+
+ + diff --git a/src/lib/formatters.js b/src/lib/formatters.js index 9ce30c4..dc67c4f 100644 --- a/src/lib/formatters.js +++ b/src/lib/formatters.js @@ -152,15 +152,15 @@ export function formatMarket(market) { if (!market) return; return { - 'Name': market.name, - 'Category': market.category, + 'Name': market.symbol, + 'Category': 'Crypto', 'Chainlink Execution Allowed': market.allowChainlinkExecution ? 'Yes' : 'No', 'Fee': `${formatForDisplay(100 * market.fee / BPS_DIVIDER)}%`, - 'Is Closed': market.isClosed ? 'Yes' : 'No', - 'Liquidation Threshold': `${formatForDisplay(100 * market.liqThreshold / BPS_DIVIDER)}%`, - 'Max Deviation vs Chainlink': `${formatForDisplay(100 * market.maxDeviation / BPS_DIVIDER)}%`, + // 'Is Closed': market.isClosed ? 'Yes' : 'No', + // 'Liquidation Threshold': `${formatForDisplay(100 * market.liqThreshold / BPS_DIVIDER)}%`, + // 'Max Deviation vs Chainlink': `${formatForDisplay(100 * market.maxDeviation / BPS_DIVIDER)}%`, 'Max Leverage': market.maxLeverage, - 'Only Reduce-Only Allowed': market.isReduceOnly ? 'Yes' : 'No' + // 'Only Reduce-Only Allowed': market.isReduceOnly ? 'Yes' : 'No' } } From eaf5a30e57dd7009448cf5785692a482e1f6b82f Mon Sep 17 00:00:00 2001 From: Kapper Date: Fri, 23 Dec 2022 01:09:45 -0800 Subject: [PATCH 13/15] made chart display data of selected asset, resized chart upon resizing window --- src/components/trade/Chart/Chart.svelte | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/trade/Chart/Chart.svelte b/src/components/trade/Chart/Chart.svelte index ae885bc..ded0cc0 100644 --- a/src/components/trade/Chart/Chart.svelte +++ b/src/components/trade/Chart/Chart.svelte @@ -2,6 +2,8 @@ import { getChainlinkPriceHistory } from "@api/markets"; import { onMount } from "svelte"; import { scaleLinear } from "d3-scale"; + import { selectedMarket } from '@lib/stores' + import {CHAINLINK_CONTRACT_ADDRESSES as Address} from '@lib/config' const leftOffset = 0; const bottomOffset = 0; @@ -13,14 +15,21 @@ let activeIndex = null; // hovered timestamp onMount(async () => { + setChartDimensions() + window.addEventListener('resize', setChartDimensions); + return () => window.removeEventListener('resize', setChartDimensions); + }); + + function setChartDimensions() { const dimensions = document.getElementById("chart").getBoundingClientRect(); height = dimensions.height width = dimensions.width - let points = []; + } + + async function getPriceHistory(market) { try { let priceHistory = await getChainlinkPriceHistory( - // "0x3607e46698d218b3a5cae44bf381475c0a5e2ca7" - "0x942d00008d658dbb40745bbec89a93c253f9b882" + market == 'BTC-USD' ? Address.BTC_USD : Address.ETH_USD ); priceHistory = priceHistory.priceHistory.nodes; priceHistory.reverse() @@ -32,7 +41,9 @@ } catch (err) { console.log(err); } - }); + } + + $: getPriceHistory($selectedMarket) const onMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); From d08631e13f8f291294088356a1b217bfdec43dc4 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sat, 24 Dec 2022 00:06:43 -0800 Subject: [PATCH 14/15] added chainlink addresses in config --- src/lib/config.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/config.js b/src/lib/config.js index c1196d2..62261e3 100644 --- a/src/lib/config.js +++ b/src/lib/config.js @@ -49,4 +49,8 @@ export const CHAINDATA = { chainlinkSchema: "ethereum-mainnet-arbitrum-1" } } -export const CHAINLINK_URL = "https://atlas-postgraphile.public.main.prod.cldev.sh/graphql" \ No newline at end of file +export const CHAINLINK_URL = "https://atlas-postgraphile.public.main.prod.cldev.sh/graphql" +export const CHAINLINK_CONTRACT_ADDRESSES = { + BTC_USD: "0x942d00008d658dbb40745bbec89a93c253f9b882", + ETH_USD: "0x3607e46698d218b3a5cae44bf381475c0a5e2ca7" +} \ No newline at end of file From 470c1f5c6e4df997273710d3ff392cdef1426ed5 Mon Sep 17 00:00:00 2001 From: Kapper Date: Sat, 24 Dec 2022 00:10:58 -0800 Subject: [PATCH 15/15] set ordertype if not in localstorage on first site visit --- src/components/trade/new-order/CreateNewOrder.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/trade/new-order/CreateNewOrder.svelte b/src/components/trade/new-order/CreateNewOrder.svelte index 63c3108..af510ac 100644 --- a/src/components/trade/new-order/CreateNewOrder.svelte +++ b/src/components/trade/new-order/CreateNewOrder.svelte @@ -11,9 +11,9 @@ let orderType; let sizeHighlighted; - console.log($balance) onMount(() => { orderType = getUserSetting("orderType"); + if (!orderType) setOrderType('market') getUserBalance() price.set() });