From 987848e32e990a508c9730e60fc1c9ef2682ae3b Mon Sep 17 00:00:00 2001
From: Sophia <littlejohn.sophia@gmail.com>
Date: Fri, 8 Dec 2023 09:54:57 -0500
Subject: [PATCH] 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
---
 .../Charts/PoolAssetReserveChart.tsx          |  12 +-
 .../src/components/Charts/PriceChart.tsx      | 105 +++++++
 .../src/components/Charts/PriceYieldChart.tsx |  13 +-
 .../Charts/ReserveCashDragChart.tsx           |  12 +-
 .../src/components/Charts/StackedBarChart.tsx |  12 +-
 .../{CustomChartElements.tsx => Tooltip.tsx}  |  32 +--
 centrifuge-app/src/components/Menu/index.tsx  |  25 +-
 .../components/Portfolio/AssetClassChart.tsx  |   2 +-
 .../src/components/Portfolio/CFGTransfer.tsx  | 269 ++++++++++++++++++
 .../{InvestedTokens.tsx => Holdings.tsx}      |  68 ++++-
 centrifuge-app/src/components/Tooltips.tsx    |   4 +
 centrifuge-app/src/pages/Portfolio/index.tsx  |   6 +-
 centrifuge-app/src/pages/Prime/Detail.tsx     |   4 +-
 centrifuge-app/src/utils/useCFGTokenPrice.ts  |  67 +++++
 .../src/utils/useTransactionFeeEstimate.ts    |  23 +-
 centrifuge-js/src/CentrifugeBase.ts           |   2 +-
 centrifuge-js/src/modules/tokens.ts           |   9 +-
 .../WalletProvider/WalletProvider.tsx         |   2 +-
 fabric/src/components/InputBox/index.tsx      |   2 +-
 fabric/src/theme/altairDark.ts                |   3 +-
 fabric/src/theme/altairLight.ts               |   3 +-
 fabric/src/theme/centrifugeDark.ts            |   3 +-
 fabric/src/theme/centrifugeLight.ts           |   3 +-
 fabric/src/theme/tokens/modeLight.ts          |   2 +-
 fabric/src/theme/types.ts                     |   1 +
 25 files changed, 594 insertions(+), 90 deletions(-)
 create mode 100644 centrifuge-app/src/components/Charts/PriceChart.tsx
 rename centrifuge-app/src/components/Charts/{CustomChartElements.tsx => Tooltip.tsx} (63%)
 create mode 100644 centrifuge-app/src/components/Portfolio/CFGTransfer.tsx
 rename centrifuge-app/src/components/Portfolio/{InvestedTokens.tsx => Holdings.tsx} (63%)
 create mode 100644 centrifuge-app/src/utils/useCFGTokenPrice.ts

diff --git a/centrifuge-app/src/components/Charts/PoolAssetReserveChart.tsx b/centrifuge-app/src/components/Charts/PoolAssetReserveChart.tsx
index fa19d43d59..63a2314b0d 100644
--- a/centrifuge-app/src/components/Charts/PoolAssetReserveChart.tsx
+++ b/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}
diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
new file mode 100644
index 0000000000..0290b78601
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/centrifuge-app/src/components/Charts/PriceYieldChart.tsx b/centrifuge-app/src/components/Charts/PriceYieldChart.tsx
index 73b8b42a76..e8171c6d4b 100644
--- a/centrifuge-app/src/components/Charts/PriceYieldChart.tsx
+++ b/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}
diff --git a/centrifuge-app/src/components/Charts/ReserveCashDragChart.tsx b/centrifuge-app/src/components/Charts/ReserveCashDragChart.tsx
index 80f266713c..1ccd676c29 100644
--- a/centrifuge-app/src/components/Charts/ReserveCashDragChart.tsx
+++ b/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"
diff --git a/centrifuge-app/src/components/Charts/StackedBarChart.tsx b/centrifuge-app/src/components/Charts/StackedBarChart.tsx
index d26ac8f887..d47a510c9b 100644
--- a/centrifuge-app/src/components/Charts/StackedBarChart.tsx
+++ b/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
diff --git a/centrifuge-app/src/components/Charts/CustomChartElements.tsx b/centrifuge-app/src/components/Charts/Tooltip.tsx
similarity index 63%
rename from centrifuge-app/src/components/Charts/CustomChartElements.tsx
rename to centrifuge-app/src/components/Charts/Tooltip.tsx
index 9d7eab0e88..68743eaaac 100644
--- a/centrifuge-app/src/components/Charts/CustomChartElements.tsx
+++ b/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>
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
index 4c9a345e64..0d317cc4c7 100644
--- a/centrifuge-app/src/components/Menu/index.tsx
+++ b/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 ? (
diff --git a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx
index b8188ffc78..7bc82bfe25 100644
--- a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx
+++ b/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 }[]
diff --git a/centrifuge-app/src/components/Portfolio/CFGTransfer.tsx b/centrifuge-app/src/components/Portfolio/CFGTransfer.tsx
new file mode 100644
index 0000000000..aa6ba71d9a
--- /dev/null
+++ b/centrifuge-app/src/components/Portfolio/CFGTransfer.tsx
@@ -0,0 +1,269 @@
+import { CurrencyBalance } from '@centrifuge/centrifuge-js'
+import { useBalances, useCentrifugeTransaction, useCentrifugeUtils } from '@centrifuge/centrifuge-react'
+import {
+  Box,
+  Button,
+  CurrencyInput,
+  IconButton,
+  IconCopy,
+  Shelf,
+  Stack,
+  Tabs,
+  TabsItem,
+  Text,
+  TextInput,
+  truncate,
+} from '@centrifuge/fabric'
+import { isAddress as isEvmAddress } from '@ethersproject/address'
+import { isAddress } from '@polkadot/util-crypto'
+import Decimal from 'decimal.js-light'
+import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
+import React, { useMemo } from 'react'
+import { useQuery } from 'react-query'
+import { useRouteMatch } from 'react-router'
+import styled from 'styled-components'
+import centrifugeLogo from '../../assets/images/logoCentrifuge.svg'
+import { copyToClipboard } from '../../utils/copyToClipboard'
+import { Dec } from '../../utils/Decimal'
+import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
+import { useCFGTokenPrice, useDailyCFGPrice } from '../../utils/useCFGTokenPrice'
+import { useTransactionFeeEstimate } from '../../utils/useTransactionFeeEstimate'
+import { FilterOptions, PriceChart } from '../Charts/PriceChart'
+import { LabelValueStack } from '../LabelValueStack'
+import { Tooltips } from '../Tooltips'
+
+type CFGHoldingsProps = {
+  address: string
+}
+
+export const CFGTransfer = ({ address }: CFGHoldingsProps) => {
+  const centBalances = useBalances(address)
+  const [activeTab, setActiveTab] = React.useState(0)
+  const utils = useCentrifugeUtils()
+  const CFGPrice = useCFGTokenPrice()
+  const isPortfolioPage = useRouteMatch('/portfolio')
+
+  return (
+    <Stack gap={3}>
+      <Text textAlign="center" variant="heading2">
+        {centBalances?.native.currency.symbol || 'CFG'} Holdings
+      </Text>
+      <Shelf gap={3} alignItems="flex-start" justifyContent="flex-start">
+        <LabelValueStack
+          label="Position"
+          value={formatBalanceAbbreviated(centBalances?.native.balance || 0, centBalances?.native.currency.symbol, 2)}
+        />
+        <LabelValueStack
+          label="Value"
+          value={formatBalanceAbbreviated(centBalances?.native.balance.toDecimal().mul(CFGPrice || 0) || 0, 'USD', 2)}
+        />
+        <LabelValueStack
+          label={<Tooltips type="cfgPrice" label={`${centBalances?.native.currency.symbol || 'CFG'} Price`} />}
+          value={formatBalance(CFGPrice || 0, 'USD', 4)}
+        />
+      </Shelf>
+      {isPortfolioPage && (
+        <Stack>
+          <Tabs selectedIndex={activeTab} onChange={setActiveTab}>
+            <TabsItem>Send</TabsItem>
+            <TabsItem>Receive</TabsItem>
+          </Tabs>
+          {activeTab === 0 ? <SendCFG address={address} /> : <ReceiveCFG address={address} />}
+        </Stack>
+      )}
+      <Stack gap={12}>
+        <Text variant="heading6" color="textPrimary" fontWeight={600}>
+          Price
+        </Text>
+        <Box borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="2px" p="6px">
+          <CFGPriceChart />
+        </Box>
+      </Stack>
+    </Stack>
+  )
+}
+
+type SendReceiveProps = { address: string }
+
+const SendCFG = ({ address }: SendReceiveProps) => {
+  const centBalances = useBalances(address)
+  const utils = useCentrifugeUtils()
+
+  const { execute: transferCFG, isLoading } = useCentrifugeTransaction(
+    `Send ${centBalances?.native.currency.symbol || 'CFG'}`,
+    (cent) => cent.tokens.transfer,
+    {
+      onSuccess: () => form.resetForm(),
+    }
+  )
+
+  const { txFee, execute: estimatedTxFee } = useTransactionFeeEstimate((cent) => cent.tokens.transfer)
+  useQuery(
+    ['paymentInfo', address],
+    async () => {
+      await estimatedTxFee([
+        address,
+        'Native',
+        CurrencyBalance.fromFloat(centBalances?.native.balance.toDecimal() || 1, 18),
+      ])
+    },
+    {
+      enabled: !!address,
+    }
+  )
+
+  const form = useFormik<{ amount: Decimal | undefined; recipientAddress: string }>({
+    initialValues: {
+      amount: undefined,
+      recipientAddress: '',
+    },
+    validate(values) {
+      const errors: Partial<{ amount: string; recipientAddress: string }> = {}
+      if (values.amount && Dec(values.amount).gt(centBalances?.native.balance.toDecimal() || Dec(0))) {
+        errors.amount = 'Amount exceeds wallet balance'
+      }
+      if (!values.amount || Dec(values.amount).lte(0)) {
+        errors.amount = 'Amount must be greater than 0'
+      }
+      if (!(isAddress(values.recipientAddress) || isEvmAddress(values.recipientAddress))) {
+        errors.recipientAddress = 'Invalid address format'
+      }
+
+      return errors
+    },
+    onSubmit: (values, actions) => {
+      if (typeof values.amount === 'undefined') {
+        actions.setErrors({ amount: 'Amount must be greater than 0' })
+      } else {
+        if (isEvmAddress(values.recipientAddress)) {
+          values.recipientAddress = utils.evmToSubstrateAddress(values.recipientAddress, 2000)
+        }
+        transferCFG([
+          values.recipientAddress,
+          'Native',
+          CurrencyBalance.fromFloat(values.amount.toString(), centBalances?.native.currency.decimals || 18),
+        ])
+      }
+      actions.setSubmitting(false)
+    },
+  })
+
+  return (
+    <Stack px={2} py={4} backgroundColor="backgroundTertiary">
+      <FormikProvider value={form}>
+        <Form>
+          <Stack gap="2">
+            <Field name="recipientAddress">
+              {({ field, meta }: FieldProps) => (
+                <TextInput
+                  {...field}
+                  label="Recipient address"
+                  errorMessage={meta.touched ? meta.error : undefined}
+                  disabled={isLoading}
+                  placeholder="0x0A4..."
+                  required
+                />
+              )}
+            </Field>
+            <Field name="amount">
+              {({ field, meta, form }: FieldProps) => (
+                <CurrencyInput
+                  {...field}
+                  variant="small"
+                  size={0}
+                  placeholder="0.00"
+                  label="Amount"
+                  onSetMax={async () =>
+                    form.setFieldValue('amount', centBalances?.native.balance.toDecimal().sub(txFee || 0))
+                  }
+                  initialValue={form.values.amount || undefined}
+                  errorMessage={meta.touched ? meta.error : undefined}
+                  disabled={isLoading}
+                  currency={centBalances?.native?.currency.symbol}
+                  onChange={(value) => form.setFieldValue('amount', value)}
+                  required
+                />
+              )}
+            </Field>
+            <Shelf pl={1}>
+              <Text variant="label2">
+                Wallet balance:{' '}
+                {formatBalance(centBalances?.native.balance || 0, centBalances?.native.currency.symbol, 2)}
+              </Text>
+            </Shelf>
+            <Shelf>
+              <Button variant="primary" type="submit" loading={isLoading} loadingMessage={'Confirming'}>
+                Send
+              </Button>
+            </Shelf>
+          </Stack>
+        </Form>
+      </FormikProvider>
+    </Stack>
+  )
+}
+
+const ReceiveCFG = ({ address }: SendReceiveProps) => {
+  const utils = useCentrifugeUtils()
+  const centAddress = useMemo(
+    () => (address && address.startsWith('0x') ? utils.formatAddress(address) : address),
+    [address]
+  )
+
+  return (
+    <Stack gap={2} px={1} py={2} backgroundColor="backgroundTertiary">
+      <Stack gap={3}>
+        <Text variant="interactive2" color="textSecondary">
+          Your address on Centrifuge Chain
+        </Text>
+        <Shelf gap={1}>
+          <Container>
+            <Box as="img" src={centrifugeLogo} width="100%" height="100%" alt="" />
+          </Container>
+          <Text variant="label2" color="textSecondary">
+            Centrifuge native address:{' '}
+          </Text>
+          <Text variant="label1" fontSize="12px" textDecoration="underline" color="textPrimary">
+            {truncate(centAddress)}
+          </Text>
+          <IconButton onClick={() => copyToClipboard(centAddress)} title="Copy address to clipboard">
+            <IconCopy />
+          </IconButton>
+        </Shelf>
+      </Stack>
+    </Stack>
+  )
+}
+
+const Container = styled(Shelf)`
+  position: relative;
+  filter: ${({ theme }) => (theme.scheme === 'dark' ? 'invert()' : undefined)};
+  img {
+    object-fit: contain;
+  }
+  height: 16px;
+  width: 16px;
+`
+
+const CFGPriceChart = React.memo(function CFGPriceChart() {
+  const [filter, setFilter] = React.useState<FilterOptions>('YTD')
+  const { data: tokenDayData } = useDailyCFGPrice(filter)
+  const currentCFGPrice = useCFGTokenPrice()
+
+  const data = React.useMemo(() => {
+    const tokenData =
+      (tokenDayData?.data?.tokenDayDatas as { date: number; priceUSD: string }[])?.map((entry) => {
+        return {
+          day: new Date(entry.date * 1000),
+          price: parseFloat(entry.priceUSD),
+        }
+      }) || []
+    tokenData.push({
+      day: new Date(),
+      price: currentCFGPrice || 0,
+    })
+    return tokenData
+  }, [tokenDayData, filter])
+
+  return <PriceChart data={data} currency="USD" filter={filter} setFilter={setFilter} />
+})
diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/Holdings.tsx
similarity index 63%
rename from centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
rename to centrifuge-app/src/components/Portfolio/Holdings.tsx
index 692b2fdcac..d62aff89e2 100644
--- a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
+++ b/centrifuge-app/src/components/Portfolio/Holdings.tsx
@@ -1,9 +1,10 @@
-import { Price, Token, TokenBalance } from '@centrifuge/centrifuge-js'
-import { formatBalance, useCentrifuge } from '@centrifuge/centrifuge-react'
+import { Token, TokenBalance } from '@centrifuge/centrifuge-js'
+import { formatBalance, useBalances, useCentrifuge, useWallet } from '@centrifuge/centrifuge-react'
 import {
   AnchorButton,
   Box,
   Button,
+  Drawer,
   Grid,
   IconExternalLink,
   IconMinus,
@@ -13,12 +14,17 @@ import {
   Text,
   Thumbnail,
 } from '@centrifuge/fabric'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { Dec } from '../../utils/Decimal'
+import { formatBalanceAbbreviated } from '../../utils/formatting'
 import { useTinlakeBalances } from '../../utils/tinlake/useTinlakeBalances'
+import { useCFGTokenPrice } from '../../utils/useCFGTokenPrice'
 import { usePool, usePoolMetadata, usePools } from '../../utils/usePools'
 import { Column, DataTable, SortableTableHeader } from '../DataTable'
 import { Eththumbnail } from '../EthThumbnail'
+import { Tooltips } from '../Tooltips'
+import { CFGTransfer } from './CFGTransfer'
 import { usePortfolioTokens } from './usePortfolio'
 
 type Row = {
@@ -41,11 +47,11 @@ const columns: Column[] = [
     },
   },
   {
-    header: 'Token price',
+    header: <Tooltips type="cfgPrice" label="Token price" />,
     cell: ({ tokenPrice }: Row) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
-          {formatBalance(tokenPrice.toDecimal() || 1, 'USDT', 4)}
+          {formatBalance(tokenPrice || 1, 'USD', 4)}
         </Text>
       )
     },
@@ -56,7 +62,7 @@ const columns: Column[] = [
     cell: ({ currency, position }: Row) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
-          {formatBalance(position, currency.symbol)}
+          {formatBalanceAbbreviated(position || 0, currency.symbol, 2)}
         </Text>
       )
     },
@@ -68,7 +74,7 @@ const columns: Column[] = [
     cell: ({ marketValue }: Row) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
-          {formatBalance(marketValue, 'USDT', 4)}
+          {formatBalanceAbbreviated(marketValue || 0, 'USD', 2)}
         </Text>
       )
     },
@@ -111,14 +117,23 @@ const columns: Column[] = [
 ]
 
 // TODO: change canInvestRedeem to default to true once the drawer is implemented
-export function InvestedTokens({ canInvestRedeem = false, address }: { canInvestRedeem?: boolean; address: string }) {
+export function Holdings({ canInvestRedeem = false, address }: { canInvestRedeem?: boolean; address: string }) {
+  const centBalances = useBalances(address)
+  const wallet = useWallet()
   const { data: tinlakeBalances } = useTinlakeBalances()
   const pools = usePools()
   const portfolioTokens = usePortfolioTokens(address)
+  const { search, pathname } = useLocation()
+  const history = useHistory()
+  const params = new URLSearchParams(search)
+  const openDrawer = params.get('transfer') === 'cfg'
+
+  const CFGPrice = useCFGTokenPrice()
 
   const tokens = [
     ...portfolioTokens.map((token) => ({
       ...token,
+      tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
       canInvestRedeem,
     })),
     ...(tinlakeBalances?.tranches.filter((tranche) => !tranche.balance.isZero) || []).map((balance) => {
@@ -127,21 +142,50 @@ export function InvestedTokens({ canInvestRedeem = false, address }: { canInvest
       return {
         position: balance.balance,
         marketValue: tranche?.tokenPrice ? balance.balance.toDecimal().mul(tranche?.tokenPrice.toDecimal()) : Dec(0),
-        tokenPrice: tranche?.tokenPrice || new Price(0),
+        tokenPrice: tranche?.tokenPrice?.toDecimal() || Dec(0),
         trancheId: balance.trancheId,
         poolId: balance.poolId,
         currency: tranche?.currency,
         canInvestRedeem,
       }
     }),
+    ...(wallet.connectedNetworkName === 'Centrifuge'
+      ? [
+          {
+            currency: {
+              ...centBalances?.native.currency,
+              name: centBalances?.native.currency.symbol,
+              key: 'centrifuge',
+              isPoolCurrency: false,
+              isPermissioned: false,
+            },
+            poolId: '',
+            trancheId: '',
+            position: centBalances?.native.balance,
+            tokenPrice: CFGPrice ? Dec(CFGPrice) : Dec(0),
+            marketValue: CFGPrice ? centBalances?.native.balance.toDecimal().mul(CFGPrice) : Dec(0),
+            canInvestRedeem: false,
+          },
+        ]
+      : []),
   ]
 
   return tokens.length ? (
     <Stack as="article" gap={2}>
+      <Drawer isOpen={openDrawer} onClose={() => history.replace(pathname)}>
+        <CFGTransfer address={address} />
+      </Drawer>
       <Text as="h2" variant="heading2">
         Holdings
       </Text>
-      <DataTable columns={columns} data={tokens} defaultSortKey="position" />
+      <DataTable
+        columns={columns}
+        data={tokens}
+        defaultSortKey="position"
+        onRowClicked={(row) =>
+          row.currency?.symbol === centBalances?.native.currency.symbol ? `${pathname}?transfer=cfg` : pathname
+        }
+      />
     </Stack>
   ) : null
 }
@@ -151,7 +195,11 @@ const TokenWithIcon = ({ poolId, currency }: Row) => {
   const { data: metadata } = usePoolMetadata(pool)
   const cent = useCentrifuge()
   const { sizes } = useTheme()
-  const icon = metadata?.pool?.icon?.uri ? cent.metadata.parseMetadataUrl(metadata.pool.icon.uri) : null
+  const icon = metadata?.pool?.icon?.uri
+    ? cent.metadata.parseMetadataUrl(metadata.pool.icon.uri)
+    : !poolId
+    ? cent.metadata.parseMetadataUrl('ipfs://Qmbo43MdtokiRQ5fTLT8FoYZo6kJrW56vUqXjqYQY6Fg9f')
+    : null
   return (
     <Grid as="header" gridTemplateColumns={`${sizes.iconMedium}px 1fr`} alignItems="center" gap={2}>
       <Eththumbnail show={!!poolId.startsWith('0x')}>
diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
index 02855717c8..e39e5fa662 100644
--- a/centrifuge-app/src/components/Tooltips.tsx
+++ b/centrifuge-app/src/components/Tooltips.tsx
@@ -254,6 +254,10 @@ export const tooltipText = {
     label: 'Notional value',
     body: 'The notional value is the total value of the underlying asset.',
   },
+  cfgPrice: {
+    label: 'CFG price',
+    body: 'CFG price sourced externally from Uniswap.',
+  },
 }
 
 export type TooltipsProps = {
diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx
index bbd8b8f618..fbc672a852 100644
--- a/centrifuge-app/src/pages/Portfolio/index.tsx
+++ b/centrifuge-app/src/pages/Portfolio/index.tsx
@@ -5,7 +5,7 @@ import { LayoutBase } from '../../components/LayoutBase'
 import { BasePadding, BASE_PADDING } from '../../components/LayoutBase/BasePadding'
 import { AssetAllocation } from '../../components/Portfolio/AssetAllocation'
 import { CardPortfolioValue } from '../../components/Portfolio/CardPortfolioValue'
-import { InvestedTokens } from '../../components/Portfolio/InvestedTokens'
+import { Holdings } from '../../components/Portfolio/Holdings'
 import { Transactions } from '../../components/Portfolio/Transactions'
 import { useAddress } from '../../utils/useAddress'
 
@@ -18,7 +18,7 @@ export default function PortfolioPage() {
 }
 
 function Portfolio() {
-  const address = useAddress('substrate')
+  const address = useAddress()
   const theme = useTheme()
 
   if (!address) {
@@ -43,7 +43,7 @@ function Portfolio() {
           <CardPortfolioValue />
         </BasePadding>
         <Box pt={1} px={BASE_PADDING}>
-          <InvestedTokens address={address} />
+          <Holdings address={address} />
         </Box>
         <BasePadding gap={3}>
           <Transactions onlyMostRecent address={address} />
diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx
index a21e8b4e33..61a4914adb 100644
--- a/centrifuge-app/src/pages/Prime/Detail.tsx
+++ b/centrifuge-app/src/pages/Prime/Detail.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router'
 import { LayoutBase } from '../../components/LayoutBase'
 import { BasePadding } from '../../components/LayoutBase/BasePadding'
 import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
-import { InvestedTokens } from '../../components/Portfolio/InvestedTokens'
+import { Holdings } from '../../components/Portfolio/Holdings'
 import { Transactions } from '../../components/Portfolio/Transactions'
 import { Resolutions } from '../../components/Resolutions'
 import { RouterTextLink } from '../../components/TextLink'
@@ -44,7 +44,7 @@ function PrimeDetail() {
         </Shelf>
       </LayoutSection>
       <BasePadding gap={3}>
-        <InvestedTokens address={centAddress} />
+        <Holdings address={centAddress} />
         <Transactions onlyMostRecent address={centAddress} />
         <Resolutions />
       </BasePadding>
diff --git a/centrifuge-app/src/utils/useCFGTokenPrice.ts b/centrifuge-app/src/utils/useCFGTokenPrice.ts
new file mode 100644
index 0000000000..d06f4176ef
--- /dev/null
+++ b/centrifuge-app/src/utils/useCFGTokenPrice.ts
@@ -0,0 +1,67 @@
+import { ethers } from 'ethers'
+import { useQuery } from 'react-query'
+import { Dec } from './Decimal'
+
+async function getWCFGPrice() {
+  const usdcWcfgPool = '0x7270233cCAE676e776a659AFfc35219e6FCfbB10'
+  const uniswapPoolAbi = ['function observe(uint32[] secondsAgos) external view returns (int56[], uint160[])']
+  const provider2 = new ethers.providers.InfuraProvider()
+  const poolContract = new ethers.Contract(usdcWcfgPool, uniswapPoolAbi, provider2)
+  const observations = (await poolContract.observe([0, 1]))[0]
+  const first = Dec(observations[0].toString())
+  const second = Dec(observations[1].toString())
+  const price = Dec(1.0001).toPower(second.sub(first)).times(Dec(10).toPower(12)).toNumber()
+  return price
+}
+
+export const useCFGTokenPrice = () => {
+  const { data: CFGPrice } = useQuery('wCFGPrice', () => getWCFGPrice())
+  return CFGPrice
+}
+
+export const useDailyCFGPrice = (filter: 'YTD' | '30days' | '90days') => {
+  return useQuery(['dailyCFGPrice', filter], async () => {
+    let dateGt: number = 0
+    const currentYear = new Date().getFullYear()
+    if (filter === 'YTD') {
+      const januaryFirst = new Date(currentYear, 0, 1)
+      const unixTimestampJanuaryFirst = Math.floor(januaryFirst.getTime() / 1000)
+      dateGt = unixTimestampJanuaryFirst
+    }
+    if (filter === '30days') {
+      const thirtyDaysAgo = new Date()
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+      const unixTimestampThirtyDaysAgo = Math.floor(thirtyDaysAgo.getTime() / 1000)
+      dateGt = unixTimestampThirtyDaysAgo
+    }
+    if (filter === '90days') {
+      const ninetyDaysAgo = new Date()
+      ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90)
+      const unixTimestampNinetyDaysAgo = Math.floor(ninetyDaysAgo.getTime() / 1000)
+      dateGt = unixTimestampNinetyDaysAgo
+    }
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+          query DailyTokenPrice($dateGt: Int!) {
+            tokenDayDatas(where: { token: "0xc221b7e65ffc80de234bbb6667abdd46593d34f0",  date_gt: $dateGt}, first: 365 ) {
+              date
+              priceUSD
+            }
+          }
+        `,
+        variables: {
+          dateGt,
+        },
+      }),
+    }
+
+    const res = await fetch('https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3', options)
+    return res.json()
+  })
+}
diff --git a/centrifuge-app/src/utils/useTransactionFeeEstimate.ts b/centrifuge-app/src/utils/useTransactionFeeEstimate.ts
index 6e63178f55..148511b87e 100644
--- a/centrifuge-app/src/utils/useTransactionFeeEstimate.ts
+++ b/centrifuge-app/src/utils/useTransactionFeeEstimate.ts
@@ -1,8 +1,9 @@
 import Centrifuge, { TransactionOptions } from '@centrifuge/centrifuge-js'
-import { useCentrifuge, useWallet } from '@centrifuge/centrifuge-react'
-import { WalletAccount } from '@subwallet/wallet-connect/types'
+import { useCentrifuge, useEvmProvider, useWallet } from '@centrifuge/centrifuge-react'
+import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { lastValueFrom, Observable } from 'rxjs'
+import { useAddress } from './useAddress'
 
 type TxOptions = Pick<TransactionOptions, 'paymentInfo'>
 
@@ -10,17 +11,19 @@ export function useTransactionFeeEstimate<T extends Array<any>>(
   transactionCallback: (centrifuge: Centrifuge) => (args: T, options: TransactionOptions) => Observable<any>
 ) {
   const { selectedAccount } = useWallet().substrate
+  const address = useAddress()
+  const provider = useEvmProvider()
   const cent = useCentrifuge()
-  const [txFee, setTxFee] = React.useState<number | undefined>(undefined)
+  const [txFee, setTxFee] = React.useState<Decimal | undefined>(undefined)
 
-  const doTransaction = React.useCallback(async (selectedAccount: WalletAccount, args: T, txOptions?: TxOptions) => {
+  const doTransaction = React.useCallback(async (address: string, signer: any, args: T, txOptions?: TxOptions) => {
     try {
-      const connectedCent = cent.connect(selectedAccount?.address, selectedAccount?.signer as any)
+      const connectedCent = cent.connect(address, signer as any)
       const transaction = transactionCallback(connectedCent)
 
       const lastResult = await lastValueFrom(
         transaction(args, {
-          paymentInfo: selectedAccount.address,
+          paymentInfo: address,
           ...txOptions,
         })
       )
@@ -34,12 +37,14 @@ export function useTransactionFeeEstimate<T extends Array<any>>(
 
   const execute = React.useCallback(
     async (args: T, options?: TxOptions) => {
-      if (!selectedAccount) {
+      if (!address) {
+        console.error('No wallet')
         return
       }
-      await doTransaction(selectedAccount, args, options)
+      const signer = selectedAccount?.signer || provider
+      await doTransaction(address, signer, args, options)
     },
-    [doTransaction, selectedAccount]
+    [doTransaction, selectedAccount, address]
   )
 
   return {
diff --git a/centrifuge-js/src/CentrifugeBase.ts b/centrifuge-js/src/CentrifugeBase.ts
index 17a9b7aebe..181823f23d 100644
--- a/centrifuge-js/src/CentrifugeBase.ts
+++ b/centrifuge-js/src/CentrifugeBase.ts
@@ -36,7 +36,7 @@ import { getPolkadotApi } from './utils/web3'
 type ProxyType = string
 
 const EVM_DISPATCH_PRECOMPILE = '0x0000000000000000000000000000000000000401'
-const EVM_DISPATCH_OVERHEAD_GAS = 50_000
+const EVM_DISPATCH_OVERHEAD_GAS = 100_000
 
 export type Config = {
   network: 'altair' | 'centrifuge'
diff --git a/centrifuge-js/src/modules/tokens.ts b/centrifuge-js/src/modules/tokens.ts
index 61986161c8..6e80ff7541 100644
--- a/centrifuge-js/src/modules/tokens.ts
+++ b/centrifuge-js/src/modules/tokens.ts
@@ -1,14 +1,17 @@
 import { switchMap } from 'rxjs'
-import { CurrencyBalance } from '..'
+import { CurrencyBalance, TransactionOptions } from '..'
 import { CentrifugeBase } from '../CentrifugeBase'
 
 export function getTokensModule(inst: CentrifugeBase) {
-  function transfer(args: [destination: string, currencyId: any, amount: CurrencyBalance]) {
+  function transfer(
+    args: [destination: string, currencyId: any, amount: CurrencyBalance],
+    options?: TransactionOptions
+  ) {
     const $api = inst.getApi()
     return $api.pipe(
       switchMap((api) => {
         const submittable = api.tx.tokens.transfer(...args)
-        return inst.wrapSignAndSend(api, submittable)
+        return inst.wrapSignAndSend(api, submittable, options)
       })
     )
   }
diff --git a/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx b/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx
index 485dd0694b..8f5a1d1534 100644
--- a/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx
+++ b/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx
@@ -172,7 +172,7 @@ export function WalletProvider({
           symbol: consts.chainSymbol,
           decimals: consts.chainDecimals,
         },
-        blockExplorerUrl: 'https://etherscan.io/',
+        blockExplorerUrl: 'https://centrifuge.subscan.io/',
       }
     }
     return chains
diff --git a/fabric/src/components/InputBox/index.tsx b/fabric/src/components/InputBox/index.tsx
index 248e686b9e..b87b0651e5 100644
--- a/fabric/src/components/InputBox/index.tsx
+++ b/fabric/src/components/InputBox/index.tsx
@@ -22,7 +22,7 @@ const InputWrapper = styled(Stack)<{ $active?: boolean; $disabled?: boolean }>`
   border-radius: 10px;
   background: ${({ theme, $disabled }) => ($disabled ? theme.colors.backgroundPage : theme.colors.backgroundInput)};
   border-color: ${({ theme, $disabled, $active }) =>
-    $disabled ? theme.colors.backgroundSecondary : $active ? theme.colors.textSelected : 'transparent'};
+    $disabled ? theme.colors.backgroundSecondary : $active ? theme.colors.textSelected : theme.colors.grayScale[300]};
   &:focus,
   &:focus-within {
     border-color: var(--fabric-color-focus);
diff --git a/fabric/src/theme/altairDark.ts b/fabric/src/theme/altairDark.ts
index 91d41709f7..6e58411fc6 100644
--- a/fabric/src/theme/altairDark.ts
+++ b/fabric/src/theme/altairDark.ts
@@ -1,6 +1,6 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandAltair } from './tokens/brandAltair'
-import { blueScale, yellowScale } from './tokens/colors'
+import { blueScale, grayScale, yellowScale } from './tokens/colors'
 import { modeDark } from './tokens/modeDark'
 import { FabricTheme } from './types'
 
@@ -20,6 +20,7 @@ export const altairDark: FabricTheme = {
     accentScale: blueScale,
     blueScale,
     yellowScale,
+    grayScale,
   },
   shadows: {
     ...baseTheme.shadows,
diff --git a/fabric/src/theme/altairLight.ts b/fabric/src/theme/altairLight.ts
index 45dd1d77dc..b1198c1e0c 100644
--- a/fabric/src/theme/altairLight.ts
+++ b/fabric/src/theme/altairLight.ts
@@ -1,6 +1,6 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandAltair } from './tokens/brandAltair'
-import { blueScale, yellowScale } from './tokens/colors'
+import { blueScale, grayScale, yellowScale } from './tokens/colors'
 import { modeLight } from './tokens/modeLight'
 import { FabricTheme } from './types'
 
@@ -20,6 +20,7 @@ export const altairLight: FabricTheme = {
     accentScale: blueScale,
     blueScale,
     yellowScale,
+    grayScale,
   },
 }
 
diff --git a/fabric/src/theme/centrifugeDark.ts b/fabric/src/theme/centrifugeDark.ts
index 0858239468..b0ec213a58 100644
--- a/fabric/src/theme/centrifugeDark.ts
+++ b/fabric/src/theme/centrifugeDark.ts
@@ -1,6 +1,6 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandCentrifuge } from './tokens/brandCentrifuge'
-import { blueScale, yellowScale } from './tokens/colors'
+import { blueScale, grayScale, yellowScale } from './tokens/colors'
 import { modeDark } from './tokens/modeDark'
 import { FabricTheme } from './types'
 
@@ -20,6 +20,7 @@ export const centrifugeDark: FabricTheme = {
     accentScale: blueScale,
     blueScale,
     yellowScale,
+    grayScale,
   },
   shadows: {
     ...baseTheme.shadows,
diff --git a/fabric/src/theme/centrifugeLight.ts b/fabric/src/theme/centrifugeLight.ts
index 6c8cac08d7..3de1e0447c 100644
--- a/fabric/src/theme/centrifugeLight.ts
+++ b/fabric/src/theme/centrifugeLight.ts
@@ -1,6 +1,6 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandCentrifuge } from './tokens/brandCentrifuge'
-import { blueScale, yellowScale } from './tokens/colors'
+import { blueScale, grayScale, yellowScale } from './tokens/colors'
 import { modeLight } from './tokens/modeLight'
 import { FabricTheme } from './types'
 
@@ -20,6 +20,7 @@ export const centrifugeLight: FabricTheme = {
     accentScale: blueScale,
     blueScale,
     yellowScale,
+    grayScale,
   },
 }
 
diff --git a/fabric/src/theme/tokens/modeLight.ts b/fabric/src/theme/tokens/modeLight.ts
index 72b30cc630..b4ce1d3f49 100644
--- a/fabric/src/theme/tokens/modeLight.ts
+++ b/fabric/src/theme/tokens/modeLight.ts
@@ -22,7 +22,7 @@ const lightColors = {
   backgroundSecondary: grayScale[100],
   backgroundTertiary: grayScale[50],
   backgroundPage: 'white',
-  backgroundInput: grayScale[50],
+  backgroundInput: 'white',
   backgroundThumbnail: grayScale[600],
   backgroundInverted: grayScale[900],
 
diff --git a/fabric/src/theme/types.ts b/fabric/src/theme/types.ts
index 84786c7433..0332cc7853 100644
--- a/fabric/src/theme/types.ts
+++ b/fabric/src/theme/types.ts
@@ -43,6 +43,7 @@ type ThemeColors = {
   accentScale: Record<number, string>
   yellowScale: Record<number, string>
   blueScale: Record<number, string>
+  grayScale: Record<number, string>
 }
 
 // Lengths