Centrifuge App: Code splitting and cleaning up unused files (#1660)

centrifuge-app/package.json

@@ -29,20 +29,14 @@
     "@ethersproject/bignumber": "^5.7.0",
     "@ethersproject/contracts": "^5.6.0",
     "@ethersproject/providers": "^5.6.0",
-    "@ethersproject/units": "^5.6.0",
     "@makerdao/multicall": "^0.12.0",
-    "@polkadot/extension-dapp": "~0.45.5",
     "@polkadot/react-identicon": "~3.1.4",
-    "@stablelib/blake2b": "^1.0.1",
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@subwallet/wallet-connect": "^0.2.3",
     "@web3modal/standalone": "^2.4.2",
-    "axios": "^0.24.0",
     "bn.js": "^5.2.1",
-    "form-data": "^4.0.0",
     "formik": "^2.2.9",
-    "jw3t": "^1.0.10",
     "merkletreejs": "^0.3.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

centrifuge-app/src/components/CardTotalValueLocked.tsx

@@ -6,9 +6,11 @@ import { formatDate } from '../utils/date'
 import { Dec } from '../utils/Decimal'
 import { formatBalance } from '../utils/formatting'
 import { useListedPools } from '../utils/useListedPools'
-import { DataPoint, TotalValueLocked } from './Charts/TotalValueLocked'
+import type { DataPoint } from './Charts/TotalValueLocked'
 import { tooltipText } from './Tooltips'
 
+const TotalValueLocked = React.lazy(() => import('./Charts/TotalValueLocked'))
+
 export function CardTotalValueLocked() {
   const { colors } = useTheme()
   const [hovered, setHovered] = React.useState<DataPoint | undefined>(undefined)

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

@@ -15,7 +15,7 @@ type TotalValueLockedProps = {
   setHovered: (entry: DataPoint | undefined) => void
 }
 
-export function TotalValueLocked({ chainTVL, setHovered }: TotalValueLockedProps) {
+export default function TotalValueLocked({ chainTVL, setHovered }: TotalValueLockedProps) {
   const centrifugeTVL = useDailyTVL()
   const tinlakeTVL = useDailyTinlakeTVL()
   const chartColor = '#ff8c00'

centrifuge-app/src/components/PDFViewer.tsx → centrifuge-app/src/components/PDFViewer/PDFViewer.tsx

@@ -3,10 +3,10 @@ import * as React from 'react'
 import { Document, Page, pdfjs } from 'react-pdf'
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
 import 'react-pdf/dist/esm/Page/TextLayer.css'
-import { Spinner } from './Spinner'
+import { Spinner } from '../Spinner'
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
 
-export const PDFViewer = ({ file }: { file: string }) => {
+export default function PDFViewerInternal({ file }: { file: string }) {
   const [numPages, setNumPages] = React.useState(0)
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }) {

centrifuge-app/src/components/PDFViewer/index.ts

@@ -0,0 +1,3 @@
+import * as React from 'react'
+
+export const PDFViewer = React.lazy(() => import('./PDFViewer'))

centrifuge-app/src/components/Root.tsx

@@ -14,26 +14,7 @@ import { HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
 import { config, ethConfig } from '../config'
-import { AccountNFTsPage } from '../pages/AccountNFTs'
-import { CollectionPage } from '../pages/Collection'
-import { CollectionsPage } from '../pages/Collections'
-import { InvestmentDisclaimerPage } from '../pages/InvestmentDisclaimer'
-import { IssuerCreatePoolPage } from '../pages/IssuerCreatePool'
-import { IssuerPoolPage } from '../pages/IssuerPool'
-import { IssuerCreateLoanPage } from '../pages/IssuerPool/Assets/CreateLoan'
-import { LoanPage } from '../pages/Loan'
-import { MintNFTPage } from '../pages/MintNFT'
-import { MultisigApprovalPage } from '../pages/MultisigApproval'
-import { NFTPage } from '../pages/NFT'
-import { NotFoundPage } from '../pages/NotFound'
-import { OnboardingPage } from '../pages/Onboarding'
-import { EmailVerified } from '../pages/Onboarding/EmailVerified'
-import { UpdateInvestorStatus } from '../pages/Onboarding/UpdateInvestorStatus'
-import { PoolDetailPage } from '../pages/Pool'
-import { PoolsPage } from '../pages/Pools'
-import { PortfolioPage } from '../pages/Portfolio'
-import { TransactionsPage } from '../pages/Portfolio/Transactions'
-import { TokenOverviewPage } from '../pages/Tokens'
+import PoolsPage from '../pages/Pools'
 import { pinToApi } from '../utils/pinToApi'
 import { DebugFlags, initialFlagsState } from './DebugFlags'
 import { DemoBanner } from './DemoBanner'
@@ -169,6 +150,26 @@ export function Root() {
   )
 }
 
+const AccountNFTsPage = React.lazy(() => import('../pages/AccountNFTs'))
+const CollectionPage = React.lazy(() => import('../pages/Collection'))
+const CollectionsPage = React.lazy(() => import('../pages/Collections'))
+const InvestmentDisclaimerPage = React.lazy(() => import('../pages/InvestmentDisclaimer'))
+const IssuerCreatePoolPage = React.lazy(() => import('../pages/IssuerCreatePool'))
+const IssuerPoolPage = React.lazy(() => import('../pages/IssuerPool'))
+const IssuerCreateLoanPage = React.lazy(() => import('../pages/IssuerPool/Assets/CreateLoan'))
+const LoanPage = React.lazy(() => import('../pages/Loan'))
+const MintNFTPage = React.lazy(() => import('../pages/MintNFT'))
+const MultisigApprovalPage = React.lazy(() => import('../pages/MultisigApproval'))
+const NFTPage = React.lazy(() => import('../pages/NFT'))
+const NotFoundPage = React.lazy(() => import('../pages/NotFound'))
+const OnboardingPage = React.lazy(() => import('../pages/Onboarding'))
+const EmailVerified = React.lazy(() => import('../pages/Onboarding/EmailVerified'))
+const UpdateInvestorStatus = React.lazy(() => import('../pages/Onboarding/UpdateInvestorStatus'))
+const PoolDetailPage = React.lazy(() => import('../pages/Pool'))
+const PortfolioPage = React.lazy(() => import('../pages/Portfolio'))
+const TransactionsPage = React.lazy(() => import('../pages/Portfolio/Transactions'))
+const TokenOverviewPage = React.lazy(() => import('../pages/Tokens'))
+
 function Routes() {
   return (
     <Switch>

centrifuge-app/src/pages/AccountNFTs.tsx

@@ -11,7 +11,7 @@ import { useAddress } from '../utils/useAddress'
 import { useCollections } from '../utils/useCollections'
 import { useAccountNfts } from '../utils/useNFTs'
 
-export const AccountNFTsPage: React.FC = () => {
+export default function AccountNFTsPage() {
   return (
     <PageWithSideBar>
       <AccountNFTs />

centrifuge-app/src/pages/Collection.tsx

@@ -17,7 +17,7 @@ import { useMetadata } from '../utils/useMetadata'
 import { useNFTs } from '../utils/useNFTs'
 import { useSuitableAccounts } from '../utils/usePermissions'
 
-export const CollectionPage: React.FC = () => {
+export default function CollectionPage() {
   return (
     <PageWithSideBar>
       <Collection />

centrifuge-app/src/pages/Collections.tsx

@@ -15,7 +15,7 @@ import { useMetadata } from '../utils/useMetadata'
 import { useAccountNfts } from '../utils/useNFTs'
 import { isSameAddress, isWhitelistedAccount } from '../utils/web3'
 
-export const CollectionsPage: React.FC = () => {
+export default function CollectionsPage() {
   return (
     <PageWithSideBar>
       <Collections />

centrifuge-app/src/pages/InvestmentDisclaimer.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router'
 import { InvestmentDisclaimerDialog } from '../components/Dialogs/InvestmentDisclaimerDialog'
 import { PageWithSideBar } from '../components/PageWithSideBar'
 
-export const InvestmentDisclaimerPage: React.FC = () => {
+export default function InvestmentDisclaimerPage() {
   const [isOpen, setIsOpen] = React.useState(true)
   const history = useHistory()
   return (

centrifuge-app/src/pages/IssuerCreatePool/index.tsx

@@ -60,7 +60,7 @@ const ASSET_CLASSES = Object.keys(config.assetClasses).map((key) => ({
   value: key,
 }))
 
-export const IssuerCreatePoolPage: React.FC = () => {
+export default function IssuerCreatePoolPage() {
   return (
     <PageWithSideBar>
       <CreatePoolForm />

centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx

@@ -43,7 +43,7 @@ import { combine, max, maxLength, min, positiveNumber, required } from '../../..
 import { validate } from '../../IssuerCreatePool/validate'
 import { PricingInput } from './PricingInput'
 
-export const IssuerCreateLoanPage: React.FC = () => {
+export default function IssuerCreateLoanPage() {
   return (
     <PageWithSideBar>
       <IssuerCreateLoan />