Skip to content

Commit

Permalink
feat(Deals): add resource information (#132)
Browse files Browse the repository at this point in the history 
* feat(Deals): add resource information

* fix(Deals): remove effectors

* fix(deals): update version ts-client

* feat(deal): show rended resources

* fix(subgraph): update SUBGRAPH_URL link

* fix(DealsTable): add column's header for max renting period

* fix(DealInfo): fix DealInfo

* fix(deal-ts-clients): update deal-ts-clients

* fix(DealInfo): remove dwiced component

* fix(DealInfo): fix display details

* fix(Deals): update UI for deals/dealinfo page

* fix(DealInfo): fix table

* feat(ts-client): bump version

* fix(deals): refactor deals and add getResourceName

* fix(ResourceTable): refactor

* fix(getResourceName): Update src/utils/getResourceName.ts

Co-authored-by: shamsartem <[email protected]>

* fix(WorkersTable): refactor

---------

Co-authored-by: shamsartem <[email protected]>
  • Loading branch information
@MixailE @shamsartem
MixailE and shamsartem authored Jan 8, 2025
1 parent 094bb54 commit 63111c5
Show file tree
Hide file tree
Showing 8 changed files with 496 additions and 257 deletions.
291 changes: 94 additions & 197 deletions src/pages/deal/DealInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react'
import React, { useMemo } from 'react'
import styled from '@emotion/styled'
import { useParams } from 'wouter'

import { A } from '../../components/A'
import { Breadcrumbs } from '../../components/Breadcrumbs'
import { Copyable } from '../../components/Copyable'
import { DealStatus } from '../../components/DealStatus'
Expand All @@ -10,16 +11,15 @@ import { NotFound } from '../../components/NotFound'
import { Space } from '../../components/Space'
import { Text } from '../../components/Text'
import { TokenBadge } from '../../components/TokenBadge'
import { Tooltip } from '../../components/Tooltip'
import { useApiQuery } from '../../hooks'
import { formatUSDcTokenValue } from '../../utils'

import { ROUTES } from '../../constants'
import { colors } from '../../constants/colors'
import { BLOCKSCOUT_URL } from '../../constants/config'

import { MatchingTable } from './MatchingTable'
import { RequiredEffectorsTable } from './RequiredEffectorsTable'
import { ResourceTable } from './ResourceTable'
import { WorkersTable } from './WorkersTable'

export const DealInfo: React.FC = () => {
const params = useParams()
Expand All @@ -30,6 +30,12 @@ export const DealInfo: React.FC = () => {
client.getDeal(id ?? ''),
)

const providerAddress = useMemo(() => {
if (!deal || !deal.joinedWorkers || deal.joinedWorkers.length === 0)
return null
return deal.joinedWorkers[0].peer.provider
}, [deal])

if (isLoading) {
return <InfoLoader />
}
Expand All @@ -44,23 +50,6 @@ export const DealInfo: React.FC = () => {
)
}

const renderProviderList = (list: string[]) => {
if (!list.length)
return (
<EmptyParameterValue>
<Text size={12} color="grey500">
No information
</Text>
</EmptyParameterValue>
)

return list.map((address) => (
<Text size={12} key={address}>
{address}
</Text>
))
}

return (
<>
<Breadcrumbs
Expand Down Expand Up @@ -140,7 +129,7 @@ export const DealInfo: React.FC = () => {
</Info>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Earnings
Total provider earnings
</Text>
<TextWithBadge>
<Text size={12}>
Expand All @@ -155,150 +144,95 @@ export const DealInfo: React.FC = () => {
</Info>
</InfoRow>
<Space height="56px" />
<Text size={20}>Matching parameters</Text>
<Space height="30px" />
<ParametersRow>
<Parameter>
<Row>
<Text size={10} weight={700} uppercase color="grey400">
Min Workers
</Text>
<Tooltip>
<Text color="grey600" weight={600} size={12}>
The minimum number of workers required for a Deal to be
active and serviced by the subnet.
{providerAddress && (
<>
<Text size={20}>Matching result</Text>
<Space height="24px" />
<InfoRow>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Provider
</Text>
</Tooltip>
</Row>
<ParameterValue>
<Text size={20}>{deal.minWorkers}</Text>
</ParameterValue>
</Parameter>
<Parameter>
<Row>
<Text size={10} weight={700} uppercase color="grey400">
Target Workers
</Text>
<Tooltip>
<Text color="grey600" weight={600} size={12}>
The maximum number of workers that can be involved in
servicing the Deal.
<TextWithIcon>
<Text size={12}>{providerAddress}</Text>
{providerAddress && <Copyable value={providerAddress} />}
</TextWithIcon>
</Info>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Payment token
</Text>
</Tooltip>
</Row>
<ParameterValue>
<Text size={20}>{deal.targetWorkers}</Text>
</ParameterValue>
</Parameter>
<Parameter>
<Row>
<Text size={10} weight={700} uppercase color="grey400">
Max Workers Per Provider
</Text>
<Tooltip>
<Text color="grey600" weight={600} size={12}>
The maximum number of workers from the same provider that
can participate in a Deal.
<A
href={`${BLOCKSCOUT_URL}/address/${deal.paymentToken.address}`}
>
<Text size={20}>{deal.paymentToken.symbol}</Text>
</A>
</Info>
</InfoRow>
<Space height="32px" />
<InfoRow>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Datacenter
</Text>
</Tooltip>
</Row>
<ParameterValue>
<Text size={20}>{deal.maxWorkersPerProvider}</Text>
</ParameterValue>
</Parameter>
</ParametersRow>
<Space height="48px" />
<ParametersRow>
<Parameter>
<Text size={10} weight={700} uppercase color="grey400">
Payment Token
</Text>
<ParameterValue>
<Text size={20}>{deal.paymentToken.symbol}</Text>
</ParameterValue>
</Parameter>
<Parameter>
<Text size={10} weight={700} uppercase color="grey400">
Price Per CU Per Epoch
</Text>
<ParameterValue>
<Text size={20}>
{formatUSDcTokenValue(deal.pricePerCuPerEpoch)}
</Text>
<TokenBadge bg="grey200">
<Text size={10} weight={800} color="grey500">
{deal.paymentToken.symbol}
<TextWithIcon>
<Text size={20}>-</Text>
</TextWithIcon>
</Info>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Price Per Epoch
</Text>
</TokenBadge>
</ParameterValue>
</Parameter>
</ParametersRow>
<Space height="40px" />
<ParametersRowSingle>
<ParameterSmall>
<Text size={10} weight={700} uppercase color="grey400">
Providers Whitelist
</Text>
{renderProviderList(deal.whitelist)}
</ParameterSmall>
</ParametersRowSingle>
<Space height="32px" />
<ParametersRowSingle>
<ParameterSmall>
<Text size={10} weight={700} uppercase color="grey400">
Providers Blacklist
</Text>
{renderProviderList(deal.blacklist)}
</ParameterSmall>
</ParametersRowSingle>
<Space height="60px" />
<Text size={20}>Required effectors</Text>
<Space height="24px" />
<RequiredEffectorsTableWrapper>
<RequiredEffectorsTable effectors={deal.effectors} />
</RequiredEffectorsTableWrapper>
<Space height="59px" />
<Text size={20}>Matching result</Text>
<Space height="30px" />
<ParametersRow>
<Parameter>
<Row>
<Text size={10} weight={700} uppercase color="grey400">
Min, Matched / Target
</Text>
<Tooltip>
<Text color="grey600" weight={600} size={12}>
Minimum Workers Required for the Deal, Current Matched
Workers / Maximum Workers.
<TextWithIcon>
<Text size={20}>
{formatUSDcTokenValue(deal.pricePerEpoch)}
</Text>
<TokenBadge bg="grey200">
<Text size={10} weight={800} color="grey500">
{deal.paymentToken.symbol}
</Text>
</TokenBadge>
</TextWithIcon>
</Info>
</InfoRow>
<Space height="32px" />
<InfoRow>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
Country
</Text>
</Tooltip>
</Row>
<ParameterValue>
<Text size={20}>
{deal.minWorkers}, {deal.matchedWorkers}/{deal.targetWorkers}
</Text>
</ParameterValue>
</Parameter>
<Parameter>
<Row>
<Text size={10} weight={700} uppercase color="grey400">
Registered / Matched
</Text>
<Tooltip>
<Text color="grey600" weight={600} size={12}>
The number of workers registered in the deal after matching.
<TextWithIcon>
<Text size={20}>-</Text>
</TextWithIcon>
</Info>
</InfoRow>
<Space height="32px" />
<InfoRow>
<Info>
<Text size={10} weight={700} uppercase color="grey400">
City
</Text>
</Tooltip>
</Row>
<ParameterValue>
<Text size={20}>
{deal.registeredWorkers}/{deal.matchedWorkers}
</Text>
</ParameterValue>
</Parameter>
</ParametersRow>
<TextWithIcon>
<Text size={20}>-</Text>
</TextWithIcon>
</Info>
</InfoRow>
</>
)}
<Space height="30px" />
{!deal.joinedWorkers ||
(deal.joinedWorkers.length === 0 && (
<>
<Space height="40px" />
<ResourceTable resources={deal.resources} />
</>
))}
<Space height="40px" />
<MatchingTable dealId={id} />
<WorkersTable
dealId={deal.id}
workers={deal.joinedWorkers}
resources={deal.resources}
/>
</Right>
</Content>
</>
Expand Down Expand Up @@ -341,34 +275,7 @@ const TextWithIcon = styled.div`
gap: 4px;
`

const ParametersRow = styled.div`
display: grid;
grid-template-columns: 200px 200px 200px;
`

const ParametersRowSingle = styled(ParametersRow)`
grid-template-columns: 70%;
`

const Parameter = styled.div`
display: flex;
flex-direction: column;
gap: 32px;
`

const ParameterSmall = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
`

const ParameterValue = styled.div`
display: flex;
align-items: center;
gap: 8px;
`

const EmptyParameterValue = styled.div`
export const EmptyParameterValue = styled.div`
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -378,22 +285,12 @@ const EmptyParameterValue = styled.div`
border-radius: 8px;
`

const RequiredEffectorsTableWrapper = styled.div`
width: 70%;
`

const TextWithBadge = styled.div`
display: flex;
align-items: center;
gap: 4px;
`

const Row = styled.div`
display: flex;
align-items: center;
gap: 4px;
`

const StyledA = styled.a`
display: flex;
align-items: center;
Expand Down
Loading

0 comments on commit 63111c5

Please sign in to comment.