ea614997a7
* feat: do not redirect to wallet on portfolio page * fix: use connected wallet for AccountMenu * fix: fixed ghost AccountDetails * feat: created ShareBar and share functionality * fix: don’t show shareBar if no address is present * fix: stupid 'next/navigation' * tidy: format * fix: fixed tests * ✨ routing and pages for HLS (#538) * 🐛 use useAccountIds * fix: fixed the tests * fix: accountIds is now a suspense --------- Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import classNames from 'classnames'
|
|
import { useCallback } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
|
|
import AccountCreateFirst from 'components/Account/AccountCreateFirst'
|
|
import Button from 'components/Button'
|
|
import Card from 'components/Card'
|
|
import { PlusCircled } from 'components/Icons'
|
|
import PortfolioCard from 'components/Portfolio/Card'
|
|
import ConnectInfo from 'components/Portfolio/Overview/ConnectInfo'
|
|
import Text from 'components/Text'
|
|
import WalletBridges from 'components/Wallet/WalletBridges'
|
|
import useAccountIds from 'hooks/useAccountIds'
|
|
import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
|
|
import useStore from 'store'
|
|
import { defaultFee } from 'utils/constants'
|
|
import { BN } from 'utils/helpers'
|
|
|
|
export default function AccountSummary() {
|
|
const { address: urlAddress } = useParams()
|
|
const walletAddress = useStore((s) => s.address)
|
|
const { data: accountIds, isLoading } = useAccountIds(urlAddress)
|
|
|
|
const baseCurrency = useStore((s) => s.baseCurrency)
|
|
const transactionFeeCoinBalance = useCurrentWalletBalance(baseCurrency.denom)
|
|
|
|
const checkHasFunds = useCallback(() => {
|
|
return (
|
|
transactionFeeCoinBalance &&
|
|
BN(transactionFeeCoinBalance.amount).isGreaterThan(defaultFee.amount[0].amount)
|
|
)
|
|
}, [transactionFeeCoinBalance])
|
|
|
|
const handleCreateAccountClick = useCallback(() => {
|
|
if (!checkHasFunds()) {
|
|
useStore.setState({ focusComponent: { component: <WalletBridges /> } })
|
|
return
|
|
}
|
|
|
|
useStore.setState({ focusComponent: { component: <AccountCreateFirst /> } })
|
|
}, [checkHasFunds])
|
|
|
|
if (!walletAddress && !urlAddress) return <ConnectInfo />
|
|
|
|
if (!isLoading && accountIds && accountIds.length === 0) {
|
|
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 create an Account first.
|
|
</Text>
|
|
<Button
|
|
className='mt-4'
|
|
onClick={handleCreateAccountClick}
|
|
leftIcon={<PlusCircled />}
|
|
color='primary'
|
|
>
|
|
Create Account
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className='w-full mt-4'>
|
|
<Text size='2xl' className='mb-8'>
|
|
Credit Accounts
|
|
</Text>
|
|
<div
|
|
className={classNames('grid w-full grid-cols-1 gap-6', 'md:grid-cols-2', 'lg:grid-cols-3')}
|
|
>
|
|
{accountIds?.map((accountId: string, index: number) => {
|
|
return <PortfolioCard key={accountId} accountId={accountId} />
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|