CFG token migration (#2663)

* Add migration page to transfer from eth to eth

* Fix some bugs and add design changes

* Remove some wording

* Add design changes to eth migration

* Add feeback

* wip: MIGRATION TABLE

* Hide banner if balance is undefined // zero or null

* Add feedback

* WIP - migration table

Author: kattylucy

centrifuge-app/.env-config/.env.demo

@@ -21,4 +21,4 @@ REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
 REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
-REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC

centrifuge-app/.env-config/.env.development

@@ -21,4 +21,4 @@ REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
 REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
-REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC

centrifuge-app/.env-config/.env.production

@@ -21,4 +21,4 @@ REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43
 REACT_APP_TREASURY=4dpEcgqJRyJK3J8Es6v8ZfVntV7c64Ysgcjd4hYwyGoFPWbg
 REACT_APP_PRIME_IPFS_HASH=QmfV1mYU6oLJn7HMvCrU3LAKwzW742Y1U7Tads3DnhVahf
 REACT_APP_ONFINALITY_KEY=84bb59f4-05cc-440b-8fd4-7917623a90c6
-REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC

centrifuge-app/src/components/AssetSummary.tsx

@@ -12,14 +12,15 @@ type Props = {
   children?: React.ReactNode
 }
 
-export function AssetSummary({ data, children }: Props) {
+export function AssetSummary({ data, children, ...props }: Props) {
   const theme = useTheme()
   return (
     <Stack
       bg={theme.colors.backgroundSecondary}
       border={`1px solid ${theme.colors.borderSecondary}`}
       borderRadius={10}
       padding={2}
+      {...props}
     >
       <Shelf gap={2}>
         {data?.map(({ label, value, heading, children }, index) => (

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

@@ -217,7 +217,7 @@ function PoolPerformanceChart() {
       <CustomLegend selectedTabIndex={selectedTabIndex} data={today} setRange={setRange} />
       <Shelf gap={4} width="100%" color="textSecondary" mt={4}>
         {chartData?.length ? (
-          <ResponsiveContainer width="100%" height={260} minHeight={260} maxHeight={260}>
+          <ResponsiveContainer width="100%" height={280} minHeight={280} maxHeight={280}>
             <ComposedChart data={chartData} margin={{ left: -36 }}>
               <defs>
                 <linearGradient id="colorPoolValue" x1="0" y1="0" x2="0" y2="1">
@@ -232,7 +232,7 @@ function PoolPerformanceChart() {
                 minTickGap={100000}
                 tickLine={false}
                 type="category"
-                tick={(props) => <CustomTick {...props} y={190} />}
+                tick={(props) => <CustomTick {...props} y={270} />}
                 ticks={getOneDayPerMonth(chartData, 'day')}
               />
               <YAxis

centrifuge-app/src/components/DebugFlags/config.ts

@@ -51,6 +51,7 @@ export type Key =
   | 'showGmp'
   | 'showReports'
   | 'showAPYGraph'
+  | 'showMigrationIndexer'
 
 export const flagsConfig = {
   address: {
@@ -146,6 +147,11 @@ export const flagsConfig = {
     default: false,
     type: 'checkbox',
   },
+  showMigrationIndexer: {
+    alwaysShow: true,
+    default: false,
+    type: 'checkbox',
+  },
 } satisfies Record<Key, DebugFlagConfig>
 
 export const genericFlagsConfig = flagsConfig as Record<string, DebugFlagConfig>

centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx

@@ -4,8 +4,8 @@ import PoolPerformanceChart from '../Charts/PoolPerformanceChart'
 import { Spinner } from '../Spinner'
 
 export const PoolPerformance = () => (
-  <React.Suspense fallback={<Spinner style={{ height: 420 }} />}>
-    <Card height={420}>
+  <React.Suspense fallback={<Spinner style={{ height: 480 }} />}>
+    <Card height={480}>
       <Stack gap={2}>
         <PoolPerformanceChart />
       </Stack>

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

@@ -6,6 +6,8 @@ import { useMatch, useNavigate } from 'react-router'
 import { useLocation } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { evmChains } from '../../../src/config'
+import { useTokenBalance } from '../../../src/pages/Portfolio/useTokenBalance'
+import { useAddress } from '../../../src/utils/useAddress'
 import daiLogo from '../../assets/images/dai-logo.svg'
 import ethLogo from '../../assets/images/ethereum.svg'
 import centLogo from '../../assets/images/logoCentrifuge.svg'
@@ -41,6 +43,7 @@ export type Holding = {
   unrealizedYield?: Rate | null
   connectedNetwork?: any
   hideCurrencyName?: boolean
+  showMigration?: boolean
 }
 
 const NetworkCell = ({ chainId }: { chainId: Holding['chainId'] }) => {
@@ -60,14 +63,29 @@ const NetworkCell = ({ chainId }: { chainId: Holding['chainId'] }) => {
   )
 }
 
+const MigrateButtonCell = () => {
+  const { evm, isEvmOnSubstrate } = useWallet()
+  const chainId = evm.chainId ?? undefined
+  const address = useAddress(chainId ? 'evm' : 'substrate')
+  return (
+    <RouterLinkButton
+      to={isEvmAddress(address) && !isEvmOnSubstrate ? 'migrate/eth' : 'migrate/cent'}
+      small
+      variant="inverted"
+    >
+      Migrate
+    </RouterLinkButton>
+  )
+}
+
 const columns: Column[] = [
   {
     align: 'left',
     header: 'Token',
     cell: (token: Holding) => {
       return <TokenWithIcon {...token} />
     },
-    width: '150px',
+    width: '180px',
   },
   {
     align: 'center',
@@ -138,9 +156,10 @@ const columns: Column[] = [
     align: 'right',
     header: '', // invest redeem buttons
     width: 'max-content',
-    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork }: Holding) => {
+    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork, address, showMigration }: Holding) => {
       return (
-        <Grid gap={1} justifySelf="end">
+        <Grid gap={1} display="flex" alignItems="flex-end">
+          {showMigration && <MigrateButtonCell address={address} />}
           {showActions ? (
             trancheId ? (
               <Shelf gap={1}>
@@ -221,6 +240,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
   const portfolioTokens = usePortfolioTokens(centAddress)
   const currencies = usePoolCurrencies()
   const CFGPrice = useCFGTokenPrice()
+  const tokenBalances = useTokenBalance(address)
 
   const tokens: Holding[] = [
     ...portfolioTokens.map((token) => ({
@@ -259,6 +279,30 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
         connectedNetwork: wallet.connectedNetworkName,
       }
     }),
+    tokenBalances.data?.legacy && {
+      position: Dec(tokenBalances.data?.legacy?.balance || 0),
+      marketValue: Dec(tokenBalances.data?.legacy?.balance || 0).mul(Dec(CFGPrice ?? 0)),
+      tokenPrice: Dec(CFGPrice ?? 0),
+      trancheId: '',
+      poolId: '',
+      currency: tokenBalances.data?.legacy?.currency,
+      showActions: false,
+      connectedNetwork: chainId,
+      showMigration: !tokenBalances.data?.legacy?.balance.isZero(),
+      chainId: 1,
+    },
+    tokenBalances.data?.new && {
+      position: Dec(tokenBalances.data?.new?.balance || 0),
+      marketValue: Dec(tokenBalances.data?.new?.balance || 0).mul(Dec(CFGPrice ?? 0)),
+      tokenPrice: Dec(CFGPrice ?? 0),
+      trancheId: '',
+      poolId: '',
+      currency: tokenBalances.data?.new?.currency,
+      showActions: false,
+      connectedNetwork: chainId,
+      showMigration: false,
+      chainId: 1,
+    },
     ...(centBalances?.currencies
       ?.filter((currency) => currency.balance.gtn(0))
       .map((currency) => {
@@ -275,7 +319,8 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
           connectedNetwork: wallet.connectedNetworkName,
         }
       }) || []),
-    ...((wallet.connectedNetwork === 'centrifuge' && showActions) || centBalances?.native.balance.gtn(0)
+    ...((wallet.connectedNetworkName?.toLowerCase() === 'centrifuge' && showActions) ||
+    centBalances?.native.balance.gtn(0)
       ? [
           {
             currency: {
@@ -286,7 +331,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
               key: 'Native',
               isPoolCurrency: false,
               isPermissioned: false,
-              displayName: centBalances?.native.currency.symbol ?? 'CFG',
+              displayName: 'Legacy CFG',
             },
             poolId: '',
             trancheId: '',
@@ -295,6 +340,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
             marketValue: CFGPrice ? centBalances?.native.balance.toDecimal().mul(CFGPrice) ?? Dec(0) : Dec(0),
             showActions: isPortfolioPage,
             connectedNetwork: wallet.connectedNetworkName,
+            showMigration: !centBalances?.native.balance.isZero(),
           },
         ]
       : []),
@@ -369,10 +415,15 @@ export const TokenWithIcon = ({ poolId, currency, hideCurrencyName = false }: Ho
   const cent = useCentrifuge()
   const { sizes } = useTheme()
 
+  const displayEthLogo =
+    currency?.name?.toLowerCase()?.includes('eth') ||
+    currency.name.toLowerCase() === 'cfg' ||
+    currency.symbol.toLowerCase().includes('wcfg')
+
   const getIcon = () => {
     if (metadata?.pool?.icon?.uri) {
       return cent.metadata.parseMetadataUrl(metadata.pool.icon.uri)
-    } else if (currency?.name?.toLowerCase()?.includes('eth')) {
+    } else if (displayEthLogo) {
       return ethLogo
     } else if (currency?.symbol?.toLowerCase() === 'dai') {
       return daiLogo

centrifuge-app/src/components/Root.tsx

@@ -79,6 +79,8 @@ const PoolTransactionsPage = React.lazy(() => import('../pages/PoolTransactions'
 const ConvertAddressPage = React.lazy(() => import('../pages/ConvertAddress'))
 const PoolsPage = React.lazy(() => import('../pages/Pools'))
 const DashboardPage = React.lazy(() => import('../pages/Dashboard'))
+const CFGTokenMigrationPage = React.lazy(() => import('../pages/Portfolio/CFGTokenMigration'))
+const CFGTokenMigrationCentPage = React.lazy(() => import('../pages/Portfolio/CFGTokenMigrationCent'))
 
 const router = createHashRouter([
   {
@@ -118,6 +120,16 @@ const router = createHashRouter([
         handle: { component: PoolTransactionsPage },
       },
       { path: '/portfolio', element: <PortfolioPage />, handle: { component: PortfolioPage } },
+      {
+        path: '/portfolio/migrate/eth',
+        element: <CFGTokenMigrationPage />,
+        handle: { component: CFGTokenMigrationPage },
+      },
+      {
+        path: '/portfolio/migrate/cent',
+        element: <CFGTokenMigrationCentPage />,
+        handle: { component: CFGTokenMigrationCentPage },
+      },
       { path: '/prime/:dao', element: <PrimeDetailPage />, handle: { component: PrimeDetailPage } },
       { path: '/prime', element: <PrimePage />, handle: { component: PrimePage } },
       { path: '/disclaimer', element: <InvestmentDisclaimerPage />, handle: { component: InvestmentDisclaimerPage } },

centrifuge-app/src/pages/Pool/Overview/HoldingsTable.tsx

@@ -2,14 +2,14 @@ import { PoolMetadata } from '@centrifuge/centrifuge-js'
 import { Stack, Text } from '@centrifuge/fabric'
 import { formatBalance } from '../../../../src/utils/formatting'
 import { DataTable, SortableTableHeader } from '../../../components/DataTable'
-import { formatDate } from '../../../utils/date'
+import { formatDate, isValidDate } from '../../../utils/date'
 
 export const HoldingsTable = ({ metadata }: { metadata: PoolMetadata | undefined }) => {
   const assetsData = metadata?.holdings
 
   const format = (value: any, header: string) => {
     if (header.includes('date') && !header.includes('quantity')) {
-      return formatDate(value)
+      return isValidDate(value) ? formatDate(value) : '-'
     }
     if (header.includes('%')) {
       return `${value}%`
@@ -20,7 +20,8 @@ export const HoldingsTable = ({ metadata }: { metadata: PoolMetadata | undefined
     if (header.includes('quantity')) {
       return formatBalance(value, '', 2)
     }
-    return value
+
+    return !value ? '-' : value
   }
 
   const columns = assetsData?.headers.map((header: string, index: number) => {