UI/new order

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"
 	}
-  }
-
+}

src/App.svelte

@@ -189,6 +189,24 @@
 		padding: 4px 10px;
 		width: 120px;
 	}
+	:global(button.primary, button.secondary) {
+		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(button.secondary) {
+		background-color: var(--secondary);
+		color: var(--secondary-darkest);
+	}
+	:global(.buttons) {
+		display: flex;
+		justify-content: space-around;
+	}
 
 </style>
 

src/api/markets.js

@@ -1,7 +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, CHAINDATA } from '../lib/config';
 
 export async function getMarketsWithPrices() {
 	const contract = getContract({name: 'Trade'});
@@ -26,4 +28,38 @@ 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 _chainId = get(chainId);
+		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: CHAINDATA[_chainId].chainlinkSchema,
+					contractAddress: contractAddress
+				}
+			})
+		});
+		const json = await response.json();
+		const price = json?.data
+		return price;
+	} catch (e) {
+		console.error('/getChainlinkPriceHistory', e);
+	}
 }