Merge branch 'master' into release/interlay/2.41.10

* master:
  chore: release v2.41.10
  HDX and BNC icons (#1655)
  api: add Vercel KV cache for storing market data (#1654)

.github/actions/setup/action.yml

@@ -1,22 +1,21 @@
 name: Setup
-description: Sets up a Node.js environment, installs the dependencies using Yarn, 
+description: Sets up a Node.js environment, installs the dependencies using Yarn,
              and caches the installed dependencies for faster future builds.
 runs:
   using: composite
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
-        node-version: 16
+        node-version: 18
         registry-url: https://registry.npmjs.org
         cache: yarn
 
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: install-cache
       with:
         path: node_modules/
         key: ${{ runner.os }}-install-${{ hashFiles('**/yarn.lock') }}
 
     - if: steps.install-cache.outputs.cache-hit != 'true'
       run: yarn install --frozen-lockfile --ignore-scripts --ignore-engines
-      shell: bash
+      shell: bash

.github/workflows/test.yml

@@ -21,13 +21,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: yarn lint
-  
+
   unit-tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: yarn test:ci

api/market_data.js

@@ -1,3 +1,5 @@
+import { kv } from "@vercel/kv";
+
 // Dia to Coingecko names
 const tickers = {
   "Tether USD": "tether",
@@ -42,13 +44,24 @@ const dia_xlsd = {
 
 // retrieve Dia XLSD fair prices
 const fetchDiaXLSD = async () => {
+  const cache_key = "diaxlsd"
+  const cached = await kv.get(cache_key)
+  if (cached) {
+    return JSON.parse(cached)
+  }
+
   const url = 'https://api.diadata.org/xlsd'
   const resp = await fetch(url, { headers: { "accept": "application/json" } })
   if (!resp.ok) {
     throw new Error(resp.status)
   }
   const json = await resp.json()
-  return new Map(json.map(x => [x.Token, x]))
+  const result = new Map(json.map(x => [x.Token, x]))
+
+  // cache the data for 120 seconds
+  await kv.set(cache_key, JSON.stringify(result), { ex: 120 })
+    .catch(err => console.error('Unable to cache Dia data', err))
+  return result;
 }
 
 const fetchDiaAsset = async (asset) => {
@@ -81,14 +94,19 @@ const fetchDiaAsset = async (asset) => {
       }
     }
   } catch (error) {
-    console.log(error)
+    console.warn('Dia API error for asset: ', asset, error)
     throw error;
   }
 }
 
 const dia = async (args) => {
-  const assets = args.ids.split(',')
+  const cache_key = "dia_" + args.ids
+  const cached = await kv.get(cache_key)
+  if (cached) {
+    return JSON.parse(cached)
+  }
 
+  const assets = args.ids.split(',')
   return Promise
     .all(assets.map(x => fetchDiaAsset(x)))
     .then(x => x.reduce((map, obj) => {
@@ -97,12 +115,34 @@ const dia = async (args) => {
       map[k] = obj[k]
       return map
     }, {}))
+    .then(async x => {
+      // cache the data for 120 seconds
+      kv.set(cache_key, JSON.stringify(x), { ex: 120 })
+        .catch(err => console.error('Unable to cache Dia data', err))
+      return x
+    })
 }
 
 const coingecko = async (args) => {
+  const cache_key = "coingecko_" + args.ids
+  const cached = await kv.get(cache_key)
+  if (cached) {
+    console.log('Cached', cache_key, cached)
+    return JSON.parse(cached)
+  }
+
   const url = 'https://api.coingecko.com/api/v3/simple/price?' + new URLSearchParams(args)
   const response = await fetch(url, { headers: { "accept": "application/json" } })
-  return await response.json()
+  const data = await response.json()
+  if (!response.ok) {
+    throw new Error(data)
+  }
+
+  // cache the data for 120 seconds
+  console.log('Caching', cache_key, JSON.stringify(data))
+  kv.set(cache_key, JSON.stringify(data), { ex: 120 })
+    .catch(err => console.error('Unable to cache coingecko data', err))
+  return data;
 }
 
 const fetchPrices = (priceSource, args) => {
@@ -111,23 +151,23 @@ const fetchPrices = (priceSource, args) => {
   } else if (priceSource === 'dia') {
     return dia(args)
   } else {
-    try {
-      return dia(args)
-    } catch (error) {
-      console.log(error)
-      return coingecko(args)
-    }
+    return dia(args).catch(() => coingecko(args))
   }
 }
 
 export default async function (request, response) {
   const args = request.query
   const priceSource = args['price-source']
 
-  const resp = await fetchPrices(priceSource, args)
-  return response
-    .status(200)
-    .setHeader("content-type", "application/json")
-    .setHeader("cache-control", "public, maxage=0, s-maxage=300")
-    .json(resp)
+  try {
+    const resp = await fetchPrices(priceSource, args)
+    return response
+      .status(200)
+      .setHeader("content-type", "application/json")
+      .setHeader("cache-control", "public, maxage=0, s-maxage=120")
+      .json(resp)
+  } catch (err) {
+    console.error('Unable to fetch prices', err)
+    return response.status(500);
+  }
 }

api/package.json

@@ -16,6 +16,7 @@
     "@interlay/interbtc-api": "2.6.0",
     "@interlay/monetary-js": "0.7.3",
     "@polkadot/util-crypto": "12.6.1",
+    "@vercel/kv": "^1.0.1",
     "big.js": "6.1.1",
     "pg": "^8.10.0"
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.41.9",
+  "version": "2.41.10",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",

src/component-library/CoinIcon/icons/BNC.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const BNC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>BNC</title>
+    <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M0 12C0 5.37259 5.37259 0 12 0C18.6274 0 24 5.37259 24 12C24 18.6274 18.6274 24 12 24C5.37259 24 0 18.6274 0 12Z'
+        fill='#F0F2F5'
+      />
+      <path d='M18.375 7.125H15.1875L5.625 16.5H12L18.375 7.125Z' fill='#363F4D' />
+    </svg>
+  </Icon>
+));
+
+BNC.displayName = 'BNC';
+
+export { BNC };

src/component-library/CoinIcon/icons/HDX.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const HDX = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>HDX</title>
+    <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g clipPath='url(#clip0_762_16392)'>
+        <mask
+          id='mask0_762_16392'
+          style={{ maskType: 'luminance' }}
+          maskUnits='userSpaceOnUse'
+          x='0'
+          y='0'
+          width='48'
+          height='48'
+        >
+          <path
+            d='M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24Z'
+            fill='white'
+          />
+        </mask>
+        <g mask='url(#mask0_762_16392)'>
+          <path
+            d='M0 14C0 6.26801 6.26801 0 14 0H34C41.732 0 48 6.26801 48 14V34C48 41.732 41.732 48 34 48H14C6.26801 48 0 41.732 0 34V14Z'
+            fill='#F6297C'
+          />
+          <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M4.75 24.0007L24.0068 4.75L43.25 24.0057L24.0068 43.25L4.75 24.0007ZM35.3779 18.2227C34.5779 19.1167 32.8333 21.3678 32.8333 24.0007C32.8333 26.6336 34.5779 28.8847 35.3779 29.7786C30.2384 29.5066 26.129 24.0007 26.129 24.0007C26.129 24.0007 30.2384 18.4947 35.3779 18.2227ZM12.6499 18.2227C17.7894 18.4947 21.8988 24.0007 21.8988 24.0007C21.8988 24.0007 17.7894 29.5066 12.6499 29.7786C13.4499 28.8847 15.1944 26.6336 15.1944 24.0007C15.1944 21.3678 13.4499 19.1167 12.6499 18.2227ZM11.8356 18.2568C11.0224 19.172 9.32048 21.4001 9.32048 24.0007C9.32048 26.6114 11.0358 28.8469 11.8451 29.7553L16.008 33.9216L16.0276 33.9024C17.6942 32.2727 20.4647 30.1308 23.6231 29.9677C22.8279 30.8542 21.0744 33.1083 21.0744 35.7461C21.0744 38.3839 22.8279 40.638 23.6231 41.5245L24.0068 41.9266L24.3904 41.5245C25.1856 40.638 26.9391 38.3839 26.9391 35.7461C26.9391 33.1083 25.1856 30.8542 24.3904 29.9677C27.5612 30.1315 30.341 32.2895 32.0055 33.9216L36.2666 29.657L36.2765 29.6457C37.1191 28.6775 38.7073 26.5129 38.7073 24.0007C38.7073 21.4787 37.1066 19.3069 36.2666 18.3444L32.0253 14.0997L32.0058 14.1189C30.3409 15.7507 27.5612 17.9087 24.3904 18.0725C25.1856 17.1859 26.9391 14.9319 26.9391 12.2941C26.9391 9.65627 25.1856 7.4022 24.3904 6.51568L24.0068 6.07479L23.6231 6.51568C22.8279 7.4022 21.0744 9.65627 21.0744 12.2941C21.0744 14.9319 22.8279 17.1859 23.6231 18.0725C20.4399 17.9081 17.6509 15.7338 15.9882 14.0997L11.8356 18.2568Z'
+            fill='white'
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='clip0_762_16392'>
+          <rect width='48' height='48' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  </Icon>
+));
+
+HDX.displayName = 'HDX';
+
+export { HDX };

src/component-library/CoinIcon/icons/index.ts

@@ -1,9 +1,11 @@
 export { AUSD } from './AUSD';
+export { BNC } from './BNC';
 export { BTC } from './BTC';
 export { DAI } from './DAI';
 export { DOT } from './DOT';
 export { ETH } from './ETH';
 export { GLMR } from './GLMR';
+export { HDX } from './HDX';
 export { IBTC } from './IBTC';
 export { INTR } from './INTR';
 export { KAR } from './KAR';

src/component-library/CoinIcon/utils.ts

@@ -1,10 +1,12 @@
 import {
   AUSD,
+  BNC,
   BTC,
   DAI,
   DOT,
   ETH,
   GLMR,
+  HDX,
   IBTC,
   INTR,
   KAR,
@@ -38,10 +40,12 @@ import { CoinComponent } from './types';
 export const coins: Record<string, CoinComponent> = {
   AUSD,
   BTC,
+  BNC,
   DAI,
   DOT,
   ETH,
   GLMR,
+  HDX,
   IBTC,
   INTR,
   KAR,

vercel.json

@@ -10,7 +10,7 @@
     },
     "api/market_data.js": {
       "memory": 128,
-      "maxDuration": 5
+      "maxDuration": 10
     },
     "api/tvl_dex.js": {
       "memory": 256,