Centrifuge App: transfer CFG to EVM address (#1720)

* Add cfg row to table

* Rename to holdings and install drawer

* Add heading and label value stacks

* Add subscan as block explorer for evm on cent chain

* Add send cfg form

* Add receive cfg component

* Fetch wrapped CFG token price

* Add CFG Price chart

* Get price chart data

* Adjust receive tab for substrate connected wallets

* Update order of nav bar components

* Adapt some colors pre input update

* Enable drawer on prime but hide send/receive

* Add hook to fetch historical token prices

* Use most current price for label

* Add filters and price difference in percent

* Move chart to be reused and fix decimal errors in input

* Correct USDT to USD in holdings table

* Fix evm to cent trasnfers and tx toast

* Fix currency in toast

* Fix x axis ticks on charts

* Add tooltip

* Clean up address conversion

* Show native currency only on native network

* Remove addressToHex

* Change address fetching

* Update styles and copy

* Subtract txFee from max send

* Update tx fee hook

* Remove extended evm address to avoid confusion

* Memoize Price chart

* Improve x axis on price chart

centrifuge-app/src/components/Charts/PoolAssetReserveChart.tsx

@@ -7,7 +7,7 @@ import { daysBetween } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { Tooltips } from '../Tooltips'
-import { CustomizedTooltip, CustomizedXAxisTick } from './CustomChartElements'
+import { CustomizedTooltip } from './Tooltip'
 
 type ChartData = {
   day: Date
@@ -56,9 +56,15 @@ const PoolAssetReserveChart: React.VFC = () => {
             <ComposedChart data={chartData} margin={{ left: -16 }} reverseStackOrder>
               <XAxis
                 dataKey="day"
-                tick={<CustomizedXAxisTick variant={chartData.length > 30 ? 'months' : 'days'} />}
                 tickLine={false}
-                interval={chartData.length < 18 || chartData.length > 30 ? 0 : 1}
+                type="category"
+                tickFormatter={(tick: number) => {
+                  if (data.length > 180) {
+                    return new Date(tick).toLocaleString('en-US', { month: 'short' })
+                  }
+                  return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
+                }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
               />
               <YAxis
                 tickLine={false}

centrifuge-app/src/components/Charts/PriceChart.tsx

@@ -0,0 +1,105 @@
+import { Box, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
+import React from 'react'
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { useTheme } from 'styled-components'
+import { Dec } from '../../utils/Decimal'
+import { CustomizedTooltip } from './Tooltip'
+
+export type FilterOptions = 'YTD' | '30days' | '90days'
+
+type PriceChartProps = {
+  data: { day: Date; price: number }[]
+  currency: string
+  filter?: FilterOptions
+  setFilter?: React.Dispatch<React.SetStateAction<FilterOptions>>
+}
+
+export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProps) => {
+  const theme = useTheme()
+  const currentPrice = data.at(-1)?.price
+
+  const priceDifference = React.useMemo(() => {
+    return Dec(data.at(0)?.price || 1).div(currentPrice || 1)
+  }, [data, filter])
+
+  return (
+    <Stack gap={0}>
+      <Shelf gap={1} justifyContent="space-between">
+        <Shelf gap={1}>
+          {currentPrice && (
+            <Text variant="body3">
+              {currency} - {currentPrice.toFixed(4)} USD
+            </Text>
+          )}
+          <Text variant="body3" color={priceDifference.gte(0) ? 'statusOk' : 'statusError'}>
+            {' '}
+            {priceDifference.gte(0) ? '+' : '-'} {priceDifference.mul(100).toFixed(2)}%
+          </Text>
+        </Shelf>
+        {filter && setFilter && (
+          <Box alignSelf="flex-end" justifySelf="flex-end">
+            <Select
+              options={[
+                { label: 'YTD', value: 'YTD' },
+                { label: '30 days', value: '30days' },
+                { label: '90 days', value: '90days' },
+              ]}
+              onChange={(option) => setFilter(option.target.value as FilterOptions)}
+            />
+          </Box>
+        )}
+      </Shelf>
+      <ResponsiveContainer width="100%" height="100%" minHeight="200px">
+        <AreaChart data={data || []} margin={{ top: 18, left: -30 }}>
+          <defs>
+            <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={'#626262'} stopOpacity={0.4} />
+              <stop offset="95%" stopColor={'#908f8f'} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <XAxis
+            dataKey="day"
+            type="category"
+            tickFormatter={(tick: number) => {
+              if (data.length > 180) {
+                return new Date(tick).toLocaleString('en-US', { month: 'short' })
+              }
+              return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
+            }}
+            interval={(function interval() {
+              if (filter === '30days') return 5
+              if (filter === '90days') return 14
+              if (filter === 'YTD' && data.length < 180) return 30
+              return 45
+            })()}
+            style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
+            tickLine={false}
+            allowDuplicatedCategory={false}
+          />
+          <YAxis
+            tickCount={6}
+            dataKey="price"
+            tickLine={false}
+            style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
+            tickFormatter={(tick: number) => {
+              return tick.toFixed(2)
+            }}
+            interval={'preserveStartEnd'}
+          />
+          <CartesianGrid stroke={theme.colors.borderSecondary} />
+          <Tooltip content={<CustomizedTooltip currency={currency} precision={4} />} />
+          <Area
+            type="monotone"
+            dataKey="price"
+            strokeWidth={1}
+            fillOpacity={1}
+            fill="url(#colorPrice)"
+            name="Price"
+            activeDot={{ fill: '#908f8f' }}
+            stroke="#908f8f"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </Stack>
+  )
+}

centrifuge-app/src/components/Charts/PriceYieldChart.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
 import { formatBalance } from '../../utils/formatting'
 import { useDailyTrancheStates, usePool } from '../../utils/usePools'
 import { Spinner } from '../Spinner'
-import { CustomizedTooltip, CustomizedXAxisTick } from './CustomChartElements'
+import { CustomizedTooltip } from './Tooltip'
 
 type ChartData = {
   day: Date
@@ -48,9 +48,16 @@ const PriceYieldChart: React.FC<{
           <ComposedChart data={data} margin={{ left: -30, top: 2 }} reverseStackOrder>
             <XAxis
               dataKey="day"
-              tick={<CustomizedXAxisTick variant={data.length > 30 ? 'months' : 'days'} />}
+              type="category"
+              tickFormatter={(tick: number) => {
+                if (data.length > 180) {
+                  return new Date(tick).toLocaleString('en-US', { month: 'short' })
+                }
+                return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
+              }}
+              style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
               tickLine={false}
-              interval={data.length < 18 || data.length > 30 ? 0 : 1}
+              allowDuplicatedCategory={false}
             />
             <YAxis
               tickLine={false}

centrifuge-app/src/components/Charts/ReserveCashDragChart.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { Tooltips } from '../Tooltips'
-import { CustomizedTooltip, CustomizedXAxisTick } from './CustomChartElements'
+import { CustomizedTooltip } from './Tooltip'
 
 type ChartData = {
   day: Date
@@ -51,9 +51,15 @@ export default function ReserveCashDragChart() {
             <ComposedChart data={chartData} margin={{ left: -16 }}>
               <XAxis
                 dataKey="day"
-                tick={<CustomizedXAxisTick variant={chartData.length > 30 ? 'months' : 'days'} />}
                 tickLine={false}
-                interval={chartData.length < 18 || chartData.length > 30 ? 0 : 1}
+                type="category"
+                tickFormatter={(tick: number) => {
+                  if (data.length > 180) {
+                    return new Date(tick).toLocaleString('en-US', { month: 'short' })
+                  }
+                  return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
+                }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
               />
               <YAxis
                 yAxisId="left"

centrifuge-app/src/components/Charts/StackedBarChart.tsx

@@ -15,7 +15,7 @@ import { useTheme } from 'styled-components'
 import { PropsOf } from '../../../helpers'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
-import { TooltipContainer, TooltipEntry, TooltipTitle } from './CustomChartElements'
+import { TooltipContainer, TooltipEntry, TooltipTitle } from './Tooltip'
 
 export type StackedBarChartProps = {
   data: {
@@ -49,10 +49,16 @@ export function StackedBarChart({ data, names, colors, currency }: StackedBarCha
             style={axisStyle}
             tickLine={false}
             axisLine={false}
-            interval={0}
             tickMargin={10}
             angle={45}
-            tickFormatter={(tick: number) => formatDate(tick, { year: undefined })}
+            type="category"
+            tickFormatter={(tick: number) => {
+              if (data.length > 180) {
+                return new Date(tick).toLocaleString('en-US', { month: 'short' })
+              }
+              return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
+            }}
+            allowDuplicatedCategory={false}
           />
 
           <YAxis

centrifuge-app/src/components/Charts/CustomChartElements.tsx → centrifuge-app/src/components/Charts/Tooltip.tsx

@@ -1,40 +1,12 @@
 import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { AreaProps, TooltipProps } from 'recharts'
-import { useTheme } from 'styled-components'
+import { TooltipProps } from 'recharts'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
 
-type CustomizedXAxisTickProps = {
-  payload?: { value: Date }
-  variant: 'months' | 'days'
-} & Pick<AreaProps, 'x'> &
-  Pick<AreaProps, 'y'>
-
-export const CustomizedXAxisTick: React.VFC<CustomizedXAxisTickProps> = ({ payload, x, y, variant }) => {
-  const theme = useTheme()
-  let tick
-  if (variant === 'months') {
-    const formatter = new Intl.DateTimeFormat('en', { month: 'short' })
-    // show month tick only on the first of every month
-    tick = payload?.value && new Date(payload.value).getDate() === 1 ? formatter.format(payload?.value) : null
-  } else {
-    const formatter = new Intl.DateTimeFormat('en', { day: 'numeric', month: 'short' })
-    tick = formatter.format(payload?.value)
-  }
-
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} fontSize="10px" fill={theme.colors.textSecondary} textAnchor="center">
-        {tick}
-      </text>
-    </g>
-  )
-}
-
 type CustomizedTooltipProps = TooltipProps<any, any> & { currency: string; precision?: number }
 
-export const CustomizedTooltip: React.VFC<CustomizedTooltipProps> = ({ payload, currency, precision }) => {
+export const CustomizedTooltip: React.FC<CustomizedTooltipProps> = ({ payload, currency, precision }) => {
   if (payload && payload?.length > 0) {
     return (
       <TooltipContainer>

centrifuge-app/src/components/Menu/index.tsx

@@ -41,27 +41,19 @@ export function Menu() {
         Pools
       </PageLink>
 
-      {config.network !== 'centrifuge' && (
-        <PageLink to="/nfts" stacked={!isLarge}>
-          <IconNft />
-          NFTs
+      {showPrime && (
+        <PageLink to="/prime" stacked={!isLarge}>
+          <IconGlobe />
+          Prime
         </PageLink>
       )}
 
-      <GovernanceMenu />
-
       {showPortfolio && address && (
         <PageLink to="/portfolio" stacked={!isLarge}>
           <IconPieChart />
           Portfolio
         </PageLink>
       )}
-      {showPrime && (
-        <PageLink to="/prime" stacked={!isLarge}>
-          <IconGlobe />
-          Prime
-        </PageLink>
-      )}
 
       {showPortfolio && address && (
         <PageLink to="/history" stacked={!isLarge}>
@@ -70,6 +62,15 @@ export function Menu() {
         </PageLink>
       )}
 
+      {config.network !== 'centrifuge' && (
+        <PageLink to="/nfts" stacked={!isLarge}>
+          <IconNft />
+          NFTs
+        </PageLink>
+      )}
+
+      <GovernanceMenu />
+
       {(pools.length > 0 || config.poolCreationType === 'immediate') && (
         <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
           {isLarge ? (

centrifuge-app/src/components/Portfolio/AssetClassChart.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Cell, Pie, PieChart as RechartsPieChart, Tooltip, TooltipProps } from 'recharts'
 import { formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
-import { TooltipContainer, TooltipEntry, TooltipTitle } from '../Charts/CustomChartElements'
+import { TooltipContainer, TooltipEntry, TooltipTitle } from '../Charts/Tooltip'
 
 type PieChartProps = {
   data: { name: string; value: number; color?: string }[]