From 419f2c04b7b2fd96d7507c4b2cb61280819e55ab Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Fri, 15 Sep 2023 10:43:58 +0200 Subject: [PATCH] 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 --- .../AccountFund/AccountFundFullPage.tsx | 23 ++++++----- src/components/Account/AccountMenu.tsx | 3 +- src/components/Account/AccountOverview.tsx | 40 ++++++++++++------- src/components/Portfolio/PortfolioIntro.tsx | 22 ++++++++-- .../Wallet/WalletFetchBalancesAndAccounts.tsx | 6 +-- src/hooks/useAccounts.tsx | 2 +- 6 files changed, 63 insertions(+), 33 deletions(-) diff --git a/src/components/Account/AccountFund/AccountFundFullPage.tsx b/src/components/Account/AccountFund/AccountFundFullPage.tsx index 7fe19a0a..312e56d8 100644 --- a/src/components/Account/AccountFund/AccountFundFullPage.tsx +++ b/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) @@ -29,14 +30,18 @@ export default function AccountFundFullPage() { copy='In order to start using this account, you need to deposit funds.' docs='fund' > - - - + {isLoading ? ( + + ) : ( + + + + )} ) } diff --git a/src/components/Account/AccountMenu.tsx b/src/components/Account/AccountMenu.tsx index 7516a2a7..45d6f25a 100644 --- a/src/components/Account/AccountMenu.tsx +++ b/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 if (!accounts) return null return } diff --git a/src/components/Account/AccountOverview.tsx b/src/components/Account/AccountOverview.tsx index fe8936aa..c5a20eb6 100644 --- a/src/components/Account/AccountOverview.tsx +++ b/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 ( + + + You need to be connected to view the porfolio page. + + + + ) +} + 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: } }) }, [checkHasFunds]) - if (!address) - return ( - - - You need to be connected to view the porfolio page. - - - - ) + if (isLoading) return + + if (!walletAddress && !urlAddress) return if (!accounts || accounts.length === 0) return ( @@ -111,7 +119,9 @@ function Content() { } function Fallback() { + const { address } = useParams() const cardCount = 3 + if (!address) return return (
s.address) + return ( - This is your Portfolio. Use it to get an overview - about all your Credit Accounts and their balances. - + address && !walletAddress ? ( + <> + This is the Portfolio of the address{' '} + {address}. You can see all Credit Accounts of this + address, but you can't interact with them. + + ) : ( + <> + This is your Portfolio. Use it to get an overview + about all your Credit Accounts and their balances. + + ) } > ) diff --git a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx b/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx index 1d66dc97..4bf51956 100644 --- a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx +++ b/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 + if (isLoadingAccounts || isLoadingBalances) return if (BN(baseBalance).isLessThan(defaultFee.amount[0].amount)) return if (accounts.length === 0) return return null diff --git a/src/hooks/useAccounts.tsx b/src/hooks/useAccounts.tsx index 7cca41de..23fd8cb3 100644 --- a/src/hooks/useAccounts.tsx +++ b/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, }) }