Portfolio access (#475)

* feat: view other users portfolio

* fix: remove intro for unconnected users

* fix: added empty wallet to prevent infinite pause

* fix: changed useAccounts to have fallbackData

src/components/Account/AccountFund/AccountFundFullPage.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 
 import AccountFundContent from 'components/Account/AccountFund/AccountFundContent'
 import Card from 'components/Card'
+import { CircularProgress } from 'components/CircularProgress'
 import FullOverlayContent from 'components/FullOverlayContent'
 import useAccounts from 'hooks/useAccounts'
 import useCurrentAccount from 'hooks/useCurrentAccount'
@@ -12,7 +13,7 @@ export default function AccountFundFullPage() {
   const address = useStore((s) => s.address)
   const { accountId } = useParams()
 
-  const { data: accounts } = useAccounts(address)
+  const { data: accounts, isLoading } = useAccounts(address)
   const currentAccount = useCurrentAccount()
   const [selectedAccountId, setSelectedAccountId] = useState<null | string>(null)
 
@@ -29,14 +30,18 @@ export default function AccountFundFullPage() {
       copy='In order to start using this account, you need to deposit funds.'
       docs='fund'
     >
-      <Card className='w-full p-6 bg-white/5'>
-        <AccountFundContent
-          account={currentAccount}
-          address={address}
-          accountId={selectedAccountId}
-          isFullPage
-        />
-      </Card>
+      {isLoading ? (
+        <CircularProgress size={40} />
+      ) : (
+        <Card className='w-full p-6 bg-white/5'>
+          <AccountFundContent
+            account={currentAccount}
+            address={address}
+            accountId={selectedAccountId}
+            isFullPage
+          />
+        </Card>
+      )}
     </FullOverlayContent>
   )
 }

src/components/Account/AccountMenu.tsx

@@ -7,7 +7,8 @@ import useStore from 'store'
 
 function Content() {
   const address = useStore((s) => s.address)
-  const { data: accounts } = useAccounts(address)
+  const { data: accounts, isLoading } = useAccounts(address)
+  if (isLoading) return <Loading className='h-8 w-35' />
   if (!accounts) return null
   return <AccountMenuContent accounts={accounts} />
 }

src/components/Account/AccountOverview.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { Suspense, useCallback, useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 
 import AccountBalancesTable from 'components/Account/AccountBalancesTable'
 import AccountComposition from 'components/Account/AccountComposition'
@@ -11,6 +12,7 @@ import Loading from 'components/Loading'
 import Text from 'components/Text'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import WalletConnectButton from 'components/Wallet/WalletConnectButton'
+import useAccounts from 'hooks/useAccounts'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
@@ -18,9 +20,25 @@ import useStore from 'store'
 import { defaultFee } from 'utils/constants'
 import { BN } from 'utils/helpers'
 
+function ConnectInfo() {
+  return (
+    <Card
+      className='w-full h-fit bg-white/5'
+      title='Portfolio'
+      contentClassName='px-4 py-6 flex justify-center flex-wrap'
+    >
+      <Text size='sm' className='w-full text-center'>
+        You need to be connected to view the porfolio page.
+      </Text>
+      <WalletConnectButton className='mt-4' />
+    </Card>
+  )
+}
+
 function Content() {
-  const address = useStore((s) => s.address)
-  const accounts = useStore((s) => s.accounts)
+  const { address: urlAddress } = useParams()
+  const { data: accounts, isLoading } = useAccounts(urlAddress ?? '')
+  const walletAddress = useStore((s) => s.address)
   const baseCurrency = useStore((s) => s.baseCurrency)
   const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
     useBorrowMarketAssetsTableData()
@@ -52,19 +70,9 @@ function Content() {
     useStore.setState({ focusComponent: { component: <AccountCreateFirst /> } })
   }, [checkHasFunds])
 
-  if (!address)
-    return (
-      <Card
-        className='w-full h-fit bg-white/5'
-        title='Portfolio'
-        contentClassName='px-4 py-6 flex justify-center flex-wrap'
-      >
-        <Text size='sm' className='w-full text-center'>
-          You need to be connected to view the porfolio page.
-        </Text>
-        <WalletConnectButton className='mt-4' />
-      </Card>
-    )
+  if (isLoading) return <Fallback />
+
+  if (!walletAddress && !urlAddress) return <ConnectInfo />
 
   if (!accounts || accounts.length === 0)
     return (
@@ -111,7 +119,9 @@ function Content() {
 }
 
 function Fallback() {
+  const { address } = useParams()
   const cardCount = 3
+  if (!address) return <ConnectInfo />
   return (
     <div
       className={classNames('grid w-full grid-cols-1 gap-4', 'md:grid-cols-2', 'lg:grid-cols-3')}

src/components/Portfolio/PortfolioIntro.tsx

@@ -1,13 +1,27 @@
+import { useParams } from 'react-router-dom'
+
 import Intro from 'components/Intro'
+import useStore from 'store'
 
 export default function PortfolioIntro() {
+  const { address } = useParams()
+  const walletAddress = useStore((s) => s.address)
+
   return (
     <Intro
       text={
-        <>
-          This is your <span className='text-white'>Portfolio</span>. Use it to get an overview
-          about all your Credit Accounts and their balances.
-        </>
+        address && !walletAddress ? (
+          <>
+            This is the <span className='text-white'>Portfolio</span> of the address{' '}
+            <span className='text-white'>{address}</span>. You can see all Credit Accounts of this
+            address, but you can&apos;t interact with them.
+          </>
+        ) : (
+          <>
+            This is your <span className='text-white'>Portfolio</span>. Use it to get an overview
+            about all your Credit Accounts and their balances.
+          </>
+        )
       }
     ></Intro>
   )

src/components/Wallet/WalletFetchBalancesAndAccounts.tsx

@@ -29,8 +29,8 @@ function Content() {
   const address = useStore((s) => s.address)
   const navigate = useNavigate()
   const { pathname } = useLocation()
-  const { data: accounts } = useAccounts(address)
-  const { data: walletBalances, isLoading } = useWalletBalances(address)
+  const { data: accounts, isLoading: isLoadingAccounts } = useAccounts(address)
+  const { data: walletBalances, isLoading: isLoadingBalances } = useWalletBalances(address)
   const baseAsset = getBaseAsset()
 
   const baseBalance = useMemo(
@@ -48,7 +48,7 @@ function Content() {
     }
   }, [accounts, baseBalance, navigate, pathname, address, walletBalances])
 
-  if (isLoading) return <FetchLoading />
+  if (isLoadingAccounts || isLoadingBalances) return <FetchLoading />
   if (BN(baseBalance).isLessThan(defaultFee.amount[0].amount)) return <WalletBridges />
   if (accounts.length === 0) return <AccountCreateFirst />
   return null

src/hooks/useAccounts.tsx

@@ -5,7 +5,7 @@ import getAccounts from 'api/wallets/getAccounts'
 export default function useAccounts(address?: string) {
   return useSWR(`accounts${address}`, () => getAccounts(address || ''), {
     suspense: true,
-    isPaused: () => !address,
+    fallbackData: [],
     revalidateOnFocus: false,
   })
 }