Integrate Tokens table data from Coingecko

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Set output of cache
         id: yarn-cache
@@ -67,7 +67,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -98,7 +98,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -132,7 +132,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules

package.json

@@ -5,7 +5,7 @@
   "main": "src/index.js",
   "sideEffects": false,
   "engines": {
-    "node": "12"
+    "node": "16"
   },
   "scripts": {
     "start": "npm run start:explorer",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.12",
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/cow-sdk": "^0.0.9",
+    "@cowprotocol/cow-sdk": "^0.0.12",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -83,7 +83,7 @@
     "eth-json-rpc-middleware": "^4.4.1",
     "ethers": "^5.0.26",
     "flexsearch": "^0.7.21",
-    "graphql": "^15.3.0",
+    "graphql": "^16.5.0",
     "inter-ui": "^3.15.0",
     "joi": "^17.2.0",
     "json-rpc-engine": "5.3.0",
@@ -130,6 +130,7 @@
     "@types/bn.js": "^4.11.6",
     "@types/combine-reducers": "^1.0.0",
     "@types/cytoscape": "^3.19.4",
+    "@types/cytoscape-popper": "^2.0.0",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/flexsearch": "^0.7.3",
@@ -144,7 +145,6 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/styled-components": "^5.0.1",
     "@types/webpack-env": "^1.15.2",
-    "@types/cytoscape-popper": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "babel-jest": "^26.1.0",
@@ -168,7 +168,7 @@
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-utils": ">=2.1.0",
-    "favicons-webpack-plugin": "^3.0.1",
+    "favicons-webpack-plugin": "^4.0.0",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "frontmatter-markdown-loader": "^3.2.1",

src/api/coingecko/index.ts

@@ -0,0 +1,87 @@
+import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
+
+function getApiUrl(): string {
+  return 'https://api.coingecko.com/api'
+}
+
+// https://api.coingecko.com/api/v3/simple/token_price/ethereum?contract_addresses=0x33e18a092a93ff21ad04746c7da12e35d34dc7c4&vs_currencies=usd
+// Defaults
+const API_NAME = 'Coingecko'
+
+const API_BASE_URL = getApiUrl()
+const API_VERSION = 'v3'
+const DEFAULT_HEADERS = {
+  'Content-Type': 'application/json',
+}
+
+function _getApiBaseUrl(chainId: ChainId): string {
+  const baseUrl = API_BASE_URL
+
+  if (!baseUrl) {
+    throw new Error(`Unsupported Network. The ${API_NAME} API is not deployed in the Network ${chainId}`)
+  } else {
+    return baseUrl + '/' + API_VERSION
+  }
+}
+
+function _getCoinGeckoAssetPlatform(chainId: ChainId): 'ethereum' | 'xdai' | null {
+  switch (chainId) {
+    // Use of asset platforms - supports ethereum and xdai
+    // https://api.coingecko.com/api/v3/asset_platforms
+    case ChainId.MAINNET:
+      return 'ethereum'
+    case ChainId.GNOSIS_CHAIN:
+      return 'xdai'
+    case ChainId.RINKEBY:
+      return null
+    default:
+      return null
+  }
+}
+
+function _fetch(chainId: ChainId, url: string, method: 'GET' | 'POST' | 'DELETE', data?: any): Promise<Response> {
+  const baseUrl = _getApiBaseUrl(chainId)
+  return fetch(baseUrl + url, {
+    headers: DEFAULT_HEADERS,
+    method,
+    body: data !== undefined ? JSON.stringify(data) : data,
+  })
+}
+
+// TODO: consider making these _get/_delete/_post etc reusable across apis
+function _get(chainId: ChainId, url: string): Promise<Response> {
+  return _fetch(chainId, url, 'GET')
+}
+
+export interface CoinGeckoHistoricalDataParams {
+  chainId: ChainId
+  tokenAddress: string
+  days: number
+}
+
+export interface HistoricalDataResponse {
+  market_caps: Array<[timestamp: number, value: number]>
+  prices: Array<[timestamp: number, value: number]>
+  total_volumes: Array<[timestamp: number, value: number]>
+}
+
+export async function getHistoricalData(params: CoinGeckoHistoricalDataParams): Promise<HistoricalDataResponse | null> {
+  const { chainId, tokenAddress, days } = params
+  // ethereum/xdai (chains)
+  const assetPlatform = _getCoinGeckoAssetPlatform(chainId)
+  if (assetPlatform == null) {
+    // Unsupported
+    return null
+  }
+
+  console.log(`[api:${API_NAME}] Get Historical Data from ${API_NAME}`, params)
+  const response = await _get(
+    chainId,
+    `/coins/${assetPlatform}/contract/${tokenAddress}/market_chart/?vs_currency=usd&days=${days}`,
+  ).catch((error) => {
+    console.error(`Error getting ${API_NAME} Historical Data:`, error)
+    throw new Error(error)
+  })
+
+  return response.json()
+}

src/api/operator/types.ts

@@ -84,24 +84,6 @@ export type Trade = Pick<RawTrade, 'blockNumber' | 'logIndex' | 'owner' | 'txHas
   surplusPercentage?: BigNumber
 }
 
-export type Token = {
-  id: number
-  name: string
-  symbol: string
-  totalVolumeUsd: string
-  firstTradeTimestamp: string
-  priceEth: string
-  priceUsd: string
-  last24hours: number
-  sevenDays: number
-  last7Days: {
-    currentVolume: number
-    changedVolume: number
-    values: Array<{ time: string; value: number }>
-  }
-  lastDayVolume: string
-} & TokenErc20
-
 export type WithNetworkId = { networkId: Network }
 
 export type GetOrderParams = WithNetworkId & {

src/apps/explorer/components/SummaryCardsWidget/VolumeChart/useGetVolumeData.ts

@@ -7,7 +7,7 @@ import { VolumePeriod } from './VolumeChartWidget'
 import { VolumeDataResponse } from './VolumeChart'
 
 type RawVolumeItem = {
-  timestamp: string
+  timestamp: number
   volumeUsd: string
 }