feat: add pari page with charts & pair detail page & kashi token page

package.json

@@ -54,6 +54,7 @@
     "@walletconnect/jsonrpc-provider": "1.0.3"
   },
   "devDependencies": {
+    "@apollo/client": "^3.6.8",
     "@babel/preset-react": "^7.16.7",
     "@binance-chain/bsc-connector": "^1.0.0",
     "@builder.io/partytown": "^0.5.2",
@@ -115,6 +116,7 @@
     "@types/js-cookie": "^3.0.1",
     "@types/ms.macro": "^2.0.0",
     "@types/node": "^16.11.0",
+    "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.2",
     "@types/react-slider": "^1.3.1",
@@ -165,6 +167,8 @@
     "graphql": "^15.5.3",
     "graphql-request": "^3.5.0",
     "graphql-tag": "^2.12.5",
+    "highcharts": "^10.1.0",
+    "highcharts-react-official": "^3.1.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "ioredis": "^4.27.7",
@@ -178,14 +182,15 @@
     "lottie-react": "2.1.0",
     "madge": "^5.0.1",
     "millify": "^4.0.0",
+    "moment": "^2.29.3",
     "ms.macro": "^2.0.0",
     "next": "^12.1.5",
     "next-pwa": "5.4.7",
     "next-seo": "^5.1.0",
     "next-unused": "^0.0.6",
     "ngrok": "^4.3.1",
     "node-vibrant": "3.1.6",
-    "numeral": "^2.0.0",
+    "numeral": "^2.0.6",
     "polished": "^4.1.0",
     "postcss": "^8.4.0",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -198,6 +203,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^12.0.4",
     "react-feather": "^2.0.9",
+    "react-icons": "^4.4.0",
     "react-hook-form": "7.29.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-popper": "^2.2.5",

src/components/Header/useMenu.tsx

@@ -275,6 +275,16 @@ const useMenu: UseMenu = () => {
           title: 'Pools',
           link: `/analytics/pools`,
         },
+        {
+          key: 'kashi',
+          title: 'Kashi Pairs',
+          link: `/analytics/kashi/pairs`,
+        },
+        {
+          key: 'kashi',
+          title: 'Kashi Tokens',
+          link: `/analytics/kashi/tokens`,
+        },
       ],
     }
 

src/features/analytics/kashi/components/KashiPairTotalCardEx.tsx

@@ -0,0 +1,125 @@
+import { useLingui } from '@lingui/react'
+import KashiMediumRiskLendingPair from 'app/features/kashi/KashiMediumRiskLendingPair'
+import { formatNumber } from 'app/functions'
+import classNames from 'classnames'
+
+import Progress from './Progress'
+
+type AttributesByBorrowType = {
+  progressColor: 'green' | 'pink' | 'blue'
+  title: string
+  users: string
+}
+
+type AttributesMapByBorrowType = {
+  borrow: AttributesByBorrowType
+  asset: AttributesByBorrowType
+  supply: AttributesByBorrowType
+}
+
+const KashiPairTotalCard = ({
+  containerClass = '',
+  data,
+  borrow = 'borrow',
+  loading = false,
+}: {
+  containerClass?: string
+  data: KashiMediumRiskLendingPair[]
+  borrow?: 'borrow' | 'asset' | 'supply'
+  loading?: boolean
+}) => {
+  const { i18n } = useLingui()
+  const AttributesMapByBorrow = {
+    borrow: {
+      progressColor: 'pink',
+      title: i18n._('Total Borrow'),
+    },
+    asset: {
+      progressColor: 'green',
+      title: i18n._('Total Available'),
+    },
+    supply: {
+      progressColor: 'blue',
+      title: i18n._('Total Supply'),
+    },
+  } as AttributesMapByBorrowType
+
+  const attributes = AttributesMapByBorrow[borrow]
+  const isLoading = loading || !data
+  const amount = data.reduce(
+    (
+      value: { totalAssetAmountUSD: number; currentAllAssetsUSD: number; currentBorrowAmountUSD: number },
+      market: KashiMediumRiskLendingPair
+    ) => {
+      value.currentAllAssetsUSD += Number(market.currentAllAssetsUSD?.toFixed(0)) || 0
+      value.currentBorrowAmountUSD += Number(market.currentBorrowAmountUSD?.toFixed(0)) || 0
+      value.totalAssetAmountUSD += Number(market.totalAssetAmountUSD?.toFixed(0)) || 0
+      return value
+    },
+    { totalAssetAmountUSD: 0, currentAllAssetsUSD: 0, currentBorrowAmountUSD: 0 }
+  )
+
+  const sortFunc = {
+    borrow: (a: KashiMediumRiskLendingPair, b: KashiMediumRiskLendingPair) =>
+      (Number(b.currentBorrowAmountUSD?.toFixed(0)) || 0) - (Number(a.currentBorrowAmountUSD?.toFixed(0)) || 0),
+    asset: (a: KashiMediumRiskLendingPair, b: KashiMediumRiskLendingPair) =>
+      (Number(b.totalAssetAmountUSD?.toFixed(0)) || 0) - (Number(a.totalAssetAmountUSD?.toFixed(0)) || 0),
+    supply: (a: KashiMediumRiskLendingPair, b: KashiMediumRiskLendingPair) =>
+      (Number(b.currentAllAssetsUSD?.toFixed(0)) || 0) - (Number(a.currentAllAssetsUSD?.toFixed(0)) || 0),
+  }
+  const top3 = data.length > 3 ? [...data].sort(sortFunc[borrow]).slice(0, 3) : [...data]
+
+  return (
+    <div
+      className={classNames({
+        [containerClass]: true,
+        'bg-dark-900 rounded shadow-md': true,
+      })}
+    >
+      <div className="px-8 py-6 font-semibold">{attributes.title}</div>
+      <div className="px-8 pb-4">
+        <div className="mb-4 text-xl font-medium">
+          {isLoading ? (
+            <div className="inline-block w-48 h-5 rounded bg-dark-700 animate-pulse"></div>
+          ) : (
+            formatNumber(
+              borrow === 'borrow'
+                ? amount.currentBorrowAmountUSD
+                : borrow === 'asset'
+                ? amount.totalAssetAmountUSD
+                : amount.currentAllAssetsUSD,
+              true
+            )
+          )}
+        </div>
+        <div className="mb-4 text-sm font-medium">Top 3 Markets</div>
+        {isLoading ? (
+          <>
+            <Progress loading={isLoading} containerClass="mb-4" />
+            <Progress loading={isLoading} containerClass="mb-4" />
+            <Progress loading={isLoading} containerClass="mb-4" />
+          </>
+        ) : (
+          top3.map((market) => (
+            <Progress
+              loading={loading}
+              key={market.address}
+              containerClass="mb-4"
+              title={`${market.asset.token.symbol}/${market.collateral.token.symbol}`}
+              color={attributes.progressColor}
+              progress={
+                borrow === 'borrow'
+                  ? (Number(market.currentBorrowAmountUSD?.toFixed(0)) || 0) / (amount.currentBorrowAmountUSD || 1)
+                  : borrow === 'asset'
+                  ? (Number(market.totalAssetAmountUSD?.toFixed(0)) || 0) / (amount.totalAssetAmountUSD || 1)
+                  : (Number(market.currentAllAssetsUSD?.toFixed(0)) || 0) / (amount.currentAllAssetsUSD || 1)
+              }
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default KashiPairTotalCard

src/features/analytics/kashi/components/KashiPairTotalDayDatasChart.tsx

@@ -0,0 +1,110 @@
+import { useLingui } from '@lingui/react'
+import TailwindConfig from 'app/features/analytics/kashi/config/tailwind'
+import { BigNumber } from 'ethers'
+import Highcharts from 'highcharts/highstock'
+import HighchartsReact from 'highcharts-react-official'
+import moment from 'moment'
+
+import { KashiPairDayDataMap } from '../types/KashiPairDayData'
+
+const KashiPairTotalDayDatasChart = ({ loading, data }: { loading: boolean; data: KashiPairDayDataMap[] }) => {
+  const { i18n } = useLingui()
+  const getSeries = () => {
+    let supplyData: any[] = []
+    let borrowData: any[] = []
+    data.forEach((item) => {
+      supplyData.push({
+        x: moment(item.date).valueOf(),
+        y: BigNumber.from(item.totalAsset).add(BigNumber.from(item.totalBorrow)).toNumber() / 100.0,
+      })
+      borrowData.push({
+        x: moment(item.date).valueOf(),
+        y: BigNumber.from(item.totalBorrow).toNumber() / 100.0,
+      })
+    })
+    return [
+      {
+        type: 'line',
+        color: TailwindConfig.theme.colors.green.DEFAULT,
+        name: i18n._('Supply'),
+        data: supplyData,
+        tooltip: {
+          pointFormat: i18n._('Supply') + '   ${point.y}',
+        },
+      },
+      {
+        type: 'line',
+        color: TailwindConfig.theme.colors.pink.DEFAULT,
+        name: i18n._('Borrow'),
+        data: borrowData,
+        tooltip: {
+          pointFormat: i18n._('Borrow') + '   ${point.y}',
+        },
+      },
+    ]
+  }
+
+  const options = {
+    title: {
+      style: {
+        height: '50px',
+        padding: '24px',
+        fontWeight: 'bold',
+        fontSize: '18px',
+      },
+    },
+    scrollbar: {
+      enabled: false,
+    },
+    series: getSeries(),
+    rangeSelector: {
+      buttons: [
+        {
+          type: 'week',
+          count: 1,
+          text: '1w',
+          title: i18n._('View 1 week'),
+        },
+        {
+          type: 'month',
+          count: 1,
+          text: '1m',
+          title: i18n._('View 1 month'),
+        },
+        {
+          type: 'month',
+          count: 3,
+          text: '3m',
+          title: i18n._('View 3 months'),
+        },
+        {
+          type: 'month',
+          count: 6,
+          text: '6m',
+          title: i18n._('View 6 months'),
+        },
+      ],
+      selected: 1,
+    },
+  }
+
+  return (
+    <div className="overflow-hidden rounded shadow-lg bg-dark-700">
+      <div className="pt-6 text-lg font-medium text-center">{i18n._('Total Supply & Total Borrow')}</div>
+      {loading || !data || data.length === 0 ? (
+        <div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+          <div className="mx-4 my-12 rounded animate-pulse" style={{ height: '1px' }}></div>
+        </div>
+      ) : (
+        <HighchartsReact highcharts={Highcharts} constructorType={'stockChart'} options={options} />
+      )}
+    </div>
+  )
+}
+
+export default KashiPairTotalDayDatasChart

src/features/analytics/kashi/components/PairCard.tsx

@@ -0,0 +1,87 @@
+import { i18n } from '@lingui/core'
+import classNames from 'classnames'
+import { BigNumber } from 'ethers'
+import numeral from 'numeral'
+
+import { KashiPair } from '../types/KashiPair'
+
+const PairCard = ({ containerClass = '', data }: { containerClass?: string; data?: KashiPair }) => {
+  return (
+    <div
+      className={classNames({
+        [containerClass]: true,
+        'bg-dark-900 border border-dark-800 rounded shadow-md': true,
+      })}
+    >
+      <div className="px-8 py-5 font-semibold border-b border-dark-700">{i18n._('Info')}</div>
+      <div className="grid grid-cols-1 gap-4 px-8 py-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        <div className="w-full">
+          <div className="font-medium">{i18n._('Supply')}</div>
+          {!data ? (
+            <div className="inline-block rounded loading h-7 w-36"></div>
+          ) : (
+            <div className="text-2xl font-medium">
+              {numeral(
+                BigNumber.from(data?.totalAsset).add(BigNumber.from(data.totalBorrow)).toNumber() / 100.0
+              ).format('($0,0.00)')}
+            </div>
+          )}
+        </div>
+        <div className="">
+          <div className="font-medium">{i18n._('Utilization')}</div>
+          {!data ? (
+            <div className="inline-block w-24 rounded loading h-7"></div>
+          ) : (
+            <div className="text-2xl font-medium">
+              {numeral(
+                BigNumber.from(data?.utilization).div(BigNumber.from('100000000000000')).toNumber() / 10000.0
+              ).format('(0,0.00%)')}
+            </div>
+          )}
+        </div>
+        <div className="">
+          <div className="font-medium">{i18n._('Available')}</div>
+          {!data ? (
+            <div className="inline-block rounded loading h-7 w-36"></div>
+          ) : (
+            <div className="text-2xl font-medium">{numeral(Number(data?.totalAsset) / 100.0).format('($0,0.00)')}</div>
+          )}
+        </div>
+        <div className="">
+          <div className="font-medium">{i18n._('Borrow')}&nbsp;</div>
+          {!data ? (
+            <div className="inline-block rounded loading h-7 w-36"></div>
+          ) : (
+            <div className="text-2xl font-medium">{numeral(Number(data?.totalBorrow) / 100.0).format('($0,0.00)')}</div>
+          )}
+        </div>
+        <div className="">
+          <div className="font-medium">{i18n._('Supply APY')}</div>
+          {!data ? (
+            <div className="inline-block w-20 rounded loading h-7"></div>
+          ) : (
+            <div className="text-2xl font-medium">
+              {numeral(BigNumber.from(data?.supplyAPR).div(BigNumber.from('1000000000000')).toNumber() / 100000).format(
+                '%0.00'
+              )}
+            </div>
+          )}
+        </div>
+        <div className="">
+          <div className="font-medium">{i18n._('Borrow APY')}</div>
+          {!data ? (
+            <div className="inline-block w-20 h-6 rounded loading"></div>
+          ) : (
+            <div className="text-2xl font-medium">
+              {numeral(BigNumber.from(data?.borrowAPR).div(BigNumber.from('1000000000000')).toNumber() / 100000).format(
+                '%0.00'
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PairCard