Merge branch 'master' into rui/refactor-staking-page

interlay · Nov 6, 2023 · 57e9883 · 57e9883
2 parents 7e849c0 + aa12f6c
commit 57e9883
Show file tree

Hide file tree

Showing 40 changed files with 3,131 additions and 812 deletions.
diff --git a/api/market_data.js b/api/market_data.js
@@ -0,0 +1,106 @@
+// Dia to Coingecko names
+const tickers = {
+  "Tether USD": "tether",
+  "Acala USD": "acala-dollar",
+  "BNB": "binancecoin",
+  "Wrapped BTC": "wrapped-bitcoin",
+  "Dai Stablecoin": "dai",
+  "Ether": "ethereum",
+  "USD Coin": "usd-coin",
+  "tBTC v2": "tbtc",
+  "Voucher Dot": "voucher-dot",
+  "Voucher KSM": "voucher-ksm"
+}
+
+// Coingecko to Dia asset ids
+const dia_assets = {
+  "bitcoin": "/Bitcoin/0x0000000000000000000000000000000000000000",
+  "ethereum": "/Ethereum/0x0000000000000000000000000000000000000000",
+  "interlay": "/Interlay/0x0000000000000000000000000000000000000000",
+  "polkadot": "/Polkadot/0x0000000000000000000000000000000000000000",
+  "kusama": "/Kusama/0x0000000000000000000000000000000000000000",
+  "kintsugi": "/Kintsugi/Token:KINT",
+  "acala-dollar": "/Acala/Token:AUSD",
+  "karura": "/Bifrost/518",
+  "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7",
+  "voucher-dot": "/Bifrost-polkadot/2304",
+  "voucher-ksm": "/Bifrost/260",
+  "binancecoin": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52",
+  "bnb": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52",
+  "tbtc": "/Ethereum/0x18084fbA666a33d37592fA2633fD49a74DD93a88",
+  "dai": "/Ethereum/0x6B175474E89094C44Da98b954EedeAC495271d0F",
+  "moonbeam": "/Moonbeam/0x0000000000000000000000000000000000000000",
+  "usd-coin": "/Ethereum/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+  "wrapped-bitcoin": "/Ethereum/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
+}
+
+const fetchDiaAsset = async (asset) => {
+  try {
+    if (!dia_assets[asset]) {
+      console.log('Missing DIA asset: ', asset)
+      return coingecko({ ids: [asset], vs_currencies: ["usd"] })
+    }
+    const url = 'https://api.diadata.org/v1/assetQuotation' + dia_assets[asset]
+    const response = await fetch(url, { headers: { "accept": "application/json" } })
+    if (!response.ok) {
+      throw new Error(response.status)
+    }
+    const json = await response.json()
+
+    // optionally rename the ticker
+    const name = (tickers[json.Name] ?? json.Name).toLowerCase()
+    return {
+      [name]: {
+        'usd': json.Price
+      }
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const dia = async (args) => {
+  const assets = args.ids.split(',')
+
+  return Promise
+    .all(assets.map(x => fetchDiaAsset(x)))
+    .then(x => x.reduce((map, obj) => {
+      // we need to convert the list to an object
+      const k = Object.keys(obj)[0]
+      map[k] = obj[k]
+      return map
+    }, {}))
+}
+
+const coingecko = async (args) => {
+  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 fetchPrices = (priceSource, args) => {
+  if (priceSource === 'coingecko') {
+    return coingecko(args)
+  } else if (priceSource === 'dia') {
+    return dia(args)
+  } else {
+    try {
+      return dia(args)
+    } catch (error) {
+      console.log(error)
+      return 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)
+}
diff --git a/api/market_data.py b/api/market_data.py
diff --git a/package.json b/package.json
@@ -1,18 +1,18 @@
 {
   "name": "interbtc-ui",
-  "version": "2.38.1",
+  "version": "2.39.1",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.18",
-    "@interlay/bridge": "^0.3.13",
-    "@interlay/interbtc-api": "2.4.3",
+    "@interlay/bridge": "^0.4.0",
+    "@interlay/interbtc-api": "2.5.1",
     "@interlay/monetary-js": "0.7.3",
-    "@polkadot/api": "9.14.2",
-    "@polkadot/extension-dapp": "0.44.1",
-    "@polkadot/react-identicon": "^2.11.1",
-    "@polkadot/ui-keyring": "^2.9.7",
+    "@polkadot/api": "10.9.1",
+    "@polkadot/extension-dapp": "^0.46.5",
+    "@polkadot/react-identicon": "^3.6.2",
+    "@polkadot/ui-keyring": "^3.6.2",
     "@reach/tooltip": "^0.16.0",
     "@react-aria/accordion": "^3.0.0-alpha.14",
     "@react-aria/breadcrumbs": "^3.5.3",
@@ -91,7 +91,7 @@
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
     "@open-wc/webpack-import-meta-loader": "^0.4.7",
-    "@polkadot/types": "9.14.2",
+    "@polkadot/types": "10.9.1",
     "@react-types/grid": "^3.1.2",
     "@react-types/shared": "^3.14.0",
     "@storybook/addon-actions": "^6.5.9",
@@ -135,27 +135,12 @@
     "webpack-bundle-analyzer": "^4.4.0"
   },
   "resolutions": {
+    "@acala-network/api": "5.1.2-7",
+    "@acala-network/eth-providers": "2.6.10",
     "babel-loader": "8.1.0",
     "bn.js": "4.12.0",
     "react-error-overlay": "6.0.9",
-    "styled-components": "^5",
-    "@types/history": "^4.7.1",
-    "@polkadot/api": "^9.14.2",
-    "@polkadot/api-augment": "^9.14.2",
-    "@polkadot/api-base": "^9.14.2",
-    "@polkadot/api-contract": "^9.14.2",
-    "@polkadot/api-derive": "^9.14.2",
-    "@polkadot/rpc-augment": "^9.14.2",
-    "@polkadot/rpc-core": "^9.14.2",
-    "@polkadot/rpc-provider": "^9.14.2",
-    "@polkadot/types": "^9.14.2",
-    "@polkadot/types-augment": "^9.14.2",
-    "@polkadot/types-codec": "^9.14.2",
-    "@polkadot/types-create": "^9.14.2",
-    "@polkadot/types-known": "^9.14.2",
-    "@polkadot/types-support": "^9.14.2",
-    "@polkadot/util": "^10.2.4",
-    "@polkadot/util-crypto": "^10.2.4"
+    "@types/history": "^4.7.1"
   },
   "scripts": {
     "start": "NODE_OPTIONS=--openssl-legacy-provider craco start",

diff --git a/src/component-library/CoinIcon/CoinIcon.tsx b/src/component-library/CoinIcon/CoinIcon.tsx
@@ -17,15 +17,22 @@ type CoinIconProps = Props & NativeAttrs;
 
 const CoinIcon = forwardRef<SVGSVGElement, CoinIconProps>(
   ({ ticker, tickers, ...props }, ref): JSX.Element => {
+    // TODO: The change to support wormhole assets means that some tickers include a `.wh` suffix.
+    // Our code assumes tickers only include letters. The proper fix is to support tickers with a suffix,
+    // so this is a temporary fix until we find time to do that work. For now the only ticker formats we
+    // have are XXXX and XXXX.wh so splitting and using the first substring will work.
+    const tickerSubstring = ticker.split('.')[0];
+
     // Only want to render multi-token if has more than 1 ticker
     if (tickers && tickers?.length > 1) {
-      return <LPCoinIcon ref={ref} tickers={tickers} ticker={ticker} {...props} />;
+      const tickersSubstrings = tickers.map((ticker) => ticker.split('.')[0]);
+      return <LPCoinIcon ref={ref} tickers={tickersSubstrings} ticker={tickerSubstring} {...props} />;
     }
 
-    const CoinIcon = coins[ticker];
+    const CoinIcon = coins[tickerSubstring];
 
     if (!CoinIcon) {
-      return <FallbackIcon ref={ref} ticker={ticker} {...props} />;
+      return <FallbackIcon ref={ref} ticker={tickerSubstring} {...props} />;
     }
 
     return <CoinIcon ref={ref} {...props} />;

diff --git a/src/component-library/CoinIcon/icons/DAI.tsx b/src/component-library/CoinIcon/icons/DAI.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const DAI = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>DAI</title>
+    <g clipPath='url(#dai-a)'>
+      <path
+        fill='#F5AC37'
+        d='M12 0c6.628 0 12 5.373 12 12 0 6.628-5.372 12-12 12-6.627 0-12-5.372-12-12C0 5.373 5.373 0 12 0Z'
+      />
+      <path
+        fill='#FEFEFD'
+        d='M12.442 12.847h4.56c.097 0 .143 0 .15-.127a8.73 8.73 0 0 0 0-1.395c0-.09-.045-.127-.142-.127H7.935c-.112 0-.143.037-.143.142v1.335c0 .172 0 .172.18.172h4.47Zm4.201-3.21a.147.147 0 0 0 0-.104 2.975 2.975 0 0 0-.271-.473 3.83 3.83 0 0 0-.555-.697 1.84 1.84 0 0 0-.345-.338 5.391 5.391 0 0 0-2.25-1.14 5.594 5.594 0 0 0-1.275-.135H7.919c-.112 0-.127.045-.127.143v2.662c0 .112 0 .142.142.142h8.655s.075-.015.09-.06h-.037.001Zm0 4.77a1.743 1.743 0 0 0-.383 0H7.942c-.112 0-.15 0-.15.15v2.603c0 .12 0 .15.15.15h3.84c.184.015.368.002.547-.037a5.72 5.72 0 0 0 1.628-.36c.19-.066.374-.152.547-.255h.053a4.872 4.872 0 0 0 2.092-2.107s.053-.113-.006-.143ZM6.285 18.66v-4.147c0-.098 0-.113-.12-.113H4.538c-.09 0-.128 0-.128-.12v-1.425h1.74c.097 0 .135 0 .135-.127v-1.41c0-.09 0-.112-.12-.112H4.538c-.09 0-.128 0-.128-.12v-1.32c0-.083 0-.105.12-.105h1.613c.112 0 .142 0 .142-.142V5.476c0-.12 0-.15.15-.15h5.625c.408.016.814.061 1.215.135a7.33 7.33 0 0 1 2.347.87c.482.284.925.626 1.32 1.02.297.308.565.642.803.997.236.36.432.746.585 1.148.02.105.12.175.225.158h1.342c.172 0 .172 0 .18.165v1.23c0 .12-.045.15-.165.15h-1.036c-.104 0-.135 0-.127.135.041.457.041.915 0 1.372 0 .128 0 .143.143.143h1.184c.053.067 0 .135 0 .203.008.087.008.175 0 .262v.908c0 .127-.037.165-.15.165H18.51a.188.188 0 0 0-.218.142 5.998 5.998 0 0 1-1.575 2.295c-.255.23-.523.446-.803.645-.3.173-.592.353-.9.495a8.104 8.104 0 0 1-1.77.563 9.227 9.227 0 0 1-1.755.142H6.283v-.008l.002-.001Z'
+      />
+    </g>
+    <defs>
+      <clipPath id='dai-a'>
+        <path fill='#fff' d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  </Icon>
+));
+
+DAI.displayName = 'DAI';
+
+export { DAI };
diff --git a/src/component-library/CoinIcon/icons/GLMR.tsx b/src/component-library/CoinIcon/icons/GLMR.tsx
@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const GLMR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>GLMR</title>
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'>
+      <g clipPath='url(#glmr-a)'>
+        <circle cx='12' cy='12' r='11.5' fill='#171717' stroke='#EC1C79' />
+        <g clipPath='url(#glmr-b)'>
+          <path
+            fill='#5FC0C1'
+            d='M15.234 5.44c1.816.772 3.064 2.645 2.95 4.518H8.426c0-1.212.453-2.534 1.361-3.416C11.035 5 13.418 4.56 15.234 5.441Z'
+          />
+          <path
+            fill='#E1177C'
+            d='M15.007 17.45c.227 0 .34.11.34.22s-.113.22-.34.22h-5.22c-.227 0-.34-.11-.34-.22s.113-.22.34-.22h5.22ZM8.652 18c.227 0 .34-.11.34-.33 0-.22-.113-.331-.34-.331-.226 0-.34.11-.34.33 0 .22.114.331.34.331ZM11.83 16.678c.227 0 .34-.11.34-.33 0-.22-.113-.331-.34-.331-.227 0-.34.11-.34.33 0 .22.113.331.34.331ZM17.957 16.017c.227 0 .34.11.34.33 0 .22-.113.331-.34.331h-5.106c-.227 0-.34-.11-.34-.33 0-.22.113-.331.34-.331h5.106ZM5.021 15.356c.227 0 .34-.11.34-.33 0-.22-.113-.331-.34-.331-.227 0-.34.11-.34.33 0 .22.227.33.34.33ZM10.128 14.695c.227 0 .34.11.34.33 0 .22-.113.33-.34.33H5.929c-.227 0-.34-.11-.34-.33 0-.22.113-.33.34-.33h4.199ZM19.66 14.695c.227 0 .34.11.34.33 0 .22-.113.33-.34.33h-8.398c-.226 0-.34-.11-.34-.33 0-.22.114-.33.34-.33h8.398ZM18.07 13.373c.228 0 .341.11.341.33 0 .22-.113.33-.34.33H7.745c-.114.111-.34-.11-.34-.33 0-.22.113-.33.34-.33H18.07ZM6.61 14.144c.227 0 .34-.11.34-.33 0-.22-.113-.441-.34-.441-.227 0-.34.22-.34.33 0 .11.113.441.34.441ZM15.915 12.161c.227 0 .34.11.34.33 0 .22-.113.331-.34.331H5.589c-.114 0-.34-.11-.34-.33 0-.22.113-.331.34-.331h10.326ZM4.34 12.822c.227 0 .34-.11.34-.33 0-.22-.113-.331-.34-.331-.227 0-.34.11-.34.33 0 .22.113.331.34.331ZM6.61 11.5c.227 0 .34-.11.34-.33 0-.22-.113-.331-.34-.331-.227 0-.34.22-.34.33 0 .22.113.331.34.331ZM19.092 10.839c.227 0 .34.11.34.33 0 .22-.113.331-.34.331H7.858c-.227 0-.34-.11-.34-.33 0-.22.113-.331.34-.331h11.234Z'
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='glmr-a'>
+          <path fill='#fff' d='M0 0h24v24H0z' />
+        </clipPath>
+        <clipPath id='glmr-b'>
+          <path fill='#fff' d='M4 5h16v13H4z' />
+        </clipPath>
+      </defs>
+    </svg>
+  </Icon>
+));
+
+GLMR.displayName = 'GLMR';
+
+export { GLMR };
diff --git a/src/component-library/CoinIcon/icons/TBTC.tsx b/src/component-library/CoinIcon/icons/TBTC.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const TBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <title>TBTC</title>
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'>
+      <path
+        fill='#000'
+        stroke='#000'
+        d='M22.5 12c0 5.799-4.701 10.5-10.5 10.5S1.5 17.799 1.5 12 6.201 1.5 12 1.5 22.5 6.201 22.5 12Z'
+      />
+      <path fill='#fff' d='M10.177 11.078H8.335v1.842h1.842v-1.842ZM8.334 9.236H6.492v1.842h1.842V9.236Z' />
+      <path
+        fill='#fff'
+        d='M6.493 11.078H4.65v1.842h1.842v-1.842ZM8.334 12.92H6.492v1.842h1.842V12.92ZM18.805 9.633c-.13-1.355-1.3-1.81-2.776-1.94v-.867h-1.143v.818c-.3 0-.608.006-.913.012v-.83H12.83v.867c-.248.004-1.768.003-1.768.003l-.004 1.008.954.005v6.608h-.954l-.008.994c.277 0 1.51.005 1.777.007v.856h1.143v-.836c.313.007.617.01.913.01v.826h1.144v-.852c1.923-.11 3.27-.594 3.437-2.399.135-1.454-.548-2.102-1.64-2.366.663-.34 1.077-.933.98-1.924Zm-1.602 4.063c0 1.42-2.432 1.258-3.208 1.258v-2.518c.776 0 3.207-.221 3.208 1.26Zm-.53-3.553c0 1.292-2.03 1.14-2.676 1.14V9c.647 0 2.676-.205 2.675 1.143Z'
+      />
+    </svg>
+  </Icon>
+));
+
+TBTC.displayName = 'TBTC';
+
+export { TBTC };