b5c097d661
* upgrade to next 13 * WIP: adjust to app dir * add docker + wallet connector * fix: update the wallet connect component * tidy: format * wip: make the wallet balance fetcher work * fix balance retrieval * MP-2258: added estimateFee hook (#94) * Mp 2259 queries to api (#96) * update next config for build errors * Convert queries to API + remove config * tidy: save some bytes by adding constants/env.ts * tidy: added URL_ prefix to REST, RPC and GQL --------- Co-authored-by: Linkie Link <linkielink.dev@gmail.com> * MP-2261: created useBroadcast hook for transactions (#95) * tidy: remove unneeded wallet images * Mp 2264 convert store (#97) * Merge stores into 1 * refactor codebase to use new store * fiex build and rename whitelisted to marketassets * tidy: import refactor * updated account navigation basics * feat: added loading component and fixed the disconnect button * fix: format * update new routing system * update config and dependencies * feat: create and delete credit account are restored * tidy: format * fix: fixed the deployment * update route structure (#98) * fix: creditAccountDeposit works again * fix: bugfixes * add apis, remove allowedCoins, get basic borrow tables (#99) Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com> --------- Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com>
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import classNames from 'classnames'
|
|
|
|
import { Text } from 'components/Text'
|
|
import { FormattedNumber } from 'components/FormattedNumber'
|
|
|
|
interface Props {
|
|
title: string
|
|
data?: PositionsData[]
|
|
}
|
|
|
|
export const PositionsList = (props: Props) => {
|
|
if (!props?.data || props.data?.length === 0) return null
|
|
const arrayKeys = Object.keys(props.data[0])
|
|
|
|
return (
|
|
<div className='flex w-full flex-wrap'>
|
|
<Text uppercase className='w-full bg-black/20 px-4 py-2 text-white/40'>
|
|
{props.title}
|
|
</Text>
|
|
<div className='flex w-full flex-wrap'>
|
|
<>
|
|
<div className='mb-2 flex w-full border-b border-white/20 bg-black/20 px-4 py-2'>
|
|
{arrayKeys.map((label, index) => (
|
|
<Text key={index} size='xs' uppercase className='flex-1 text-white'>
|
|
{label}
|
|
</Text>
|
|
))}
|
|
</div>
|
|
{props.data &&
|
|
props.data.map((positionsData: PositionsData, index) => (
|
|
<div key={index} className='align-center flex w-full px-4 py-2'>
|
|
{arrayKeys.map((key, index) => {
|
|
if (index === 0)
|
|
return (
|
|
<Text
|
|
size='xs'
|
|
key={index}
|
|
className={classNames(
|
|
'flex-1 border-l-4 pl-2 text-white/60',
|
|
positionsData[key].type === 'debt' ? 'border-loss' : 'border-profit',
|
|
)}
|
|
>
|
|
{positionsData[key].amount}
|
|
</Text>
|
|
)
|
|
return (
|
|
<Text size='xs' key={index} className='flex-1 text-white/60'>
|
|
{positionsData[key].format && positionsData[key].format === 'number' ? (
|
|
<FormattedNumber animate {...positionsData[key]} />
|
|
) : (
|
|
positionsData[key]?.amount || ''
|
|
)}
|
|
</Text>
|
|
)
|
|
})}
|
|
</div>
|
|
))}
|
|
</>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|