feat(CapacityInfo): expand staker deals info (#143)

* feat(CapacityInfo): expand staker deals info

* feat(DealsTable): remove max period

* feat(DealInfo): fix DealInfo

* feat(ts-deal-client): bump version

Author: MixailE

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fluencelabs/deal-ts-clients": "0.24.0",
+    "@fluencelabs/deal-ts-clients": "0.24.1",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/typescript": "^4.1.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",

src/pages/capacity/CapacityInfo.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react'
 import styled from '@emotion/styled'
+import { RewardsStatistics } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
 import { useParams } from 'wouter'
 
 import { InfoOutlineIcon } from '../../assets/icons'
@@ -83,6 +84,60 @@ const Rewards: React.FC<{
   )
 }
 
+const StakerRewards: React.FC<{
+  title: string
+  symbol?: string
+  decimals?: number
+
+  total: RewardsStatistics
+  deals: RewardsStatistics
+  capacityCommitments: RewardsStatistics
+}> = ({
+  title: mainTitle,
+  symbol,
+  total,
+  deals,
+  capacityCommitments,
+  decimals,
+}) => {
+  return (
+    <div>
+      <Text size={24}>{mainTitle}</Text>
+      <Space height="24px" />
+      <ParametersStakerRewards>
+        {[
+          { record: capacityCommitments, title: 'CCs' },
+          { record: deals, title: 'Deals' },
+          { record: total, title: 'Total' },
+        ].map((group) => (
+          <div key={group.title}>
+            <Record
+              title={`In vesting / ${group.title}`}
+              balance={group.record.inVesting}
+              symbol={symbol}
+              decimals={decimals}
+            />
+            <Space height="32px" />
+            <Record
+              title={`Available to claim / ${group.title}`}
+              balance={group.record.availableToClaim}
+              symbol={symbol}
+              decimals={decimals}
+            />
+            <Space height="32px" />
+            <Record
+              title={`Total claimed / ${group.title}`}
+              balance={group.record.claimed}
+              symbol={symbol}
+              decimals={decimals}
+            />
+          </div>
+        ))}
+      </ParametersStakerRewards>
+    </div>
+  )
+}
+
 export const CapacityInfo: React.FC = () => {
   const params = useParams()
 
@@ -323,7 +378,7 @@ export const CapacityInfo: React.FC = () => {
             </Parameter>
           </ParametersRow>
           <Space height="40px" />
-          <ParametersRow>
+          <ParametersRewards>
             <Rewards
               title="Provider"
               symbol={capacity.collateralToken.symbol}
@@ -332,15 +387,13 @@ export const CapacityInfo: React.FC = () => {
               claimed={capacity.rewards.provider.claimed}
               decimals={Number(capacity.collateralToken.decimals)}
             />
-            <Rewards
+            <StakerRewards
               title="Staker"
               symbol={capacity.collateralToken.symbol}
-              inVesting={capacity.rewards.staker.inVesting}
-              availableToClaim={capacity.rewards.staker.availableToClaim}
-              claimed={capacity.rewards.staker.claimed}
               decimals={Number(capacity.collateralToken.decimals)}
+              {...capacity.rewards.staker}
             />
-          </ParametersRow>
+          </ParametersRewards>
           <Space height="80px" />
           <ListComputeUnitsTable capacityCommitmentId={id} />
           <Space height="30px" />
@@ -396,6 +449,18 @@ const ParametersRow = styled.div`
   gap: 120px;
 `
 
+const ParametersRewards = styled.div`
+  display: grid;
+  grid-template-columns: 200px 600px;
+  gap: 120px;
+`
+
+const ParametersStakerRewards = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 60px;
+`
+
 const Parameter = styled.div`
   display: flex;
   flex-direction: column;

src/pages/deal/DealInfo.tsx

@@ -148,7 +148,29 @@ export const DealInfo: React.FC = () => {
               <TextWithBadge>
                 <Text size={12}>
                   {formatTokenValue(
-                    deal.totalEarnings,
+                    deal.rewards?.provider.total ?? BigInt(0),
+                    Number(deal.paymentToken.decimals),
+                  )}
+                </Text>
+                <TokenBadge bg="grey200">
+                  <Text size={10} weight={800} color="grey500">
+                    {deal.paymentToken.symbol}
+                  </Text>
+                </TokenBadge>
+              </TextWithBadge>
+            </Info>
+          </InfoRow>
+          <Space height="32px" />
+          <InfoRow>
+            <Info></Info>
+            <Info>
+              <Text size={10} weight={700} uppercase color="grey400">
+                Total staker earnings
+              </Text>
+              <TextWithBadge>
+                <Text size={12}>
+                  {formatTokenValue(
+                    deal.rewards?.staker.total ?? BigInt(0),
                     Number(deal.paymentToken.decimals),
                   )}
                 </Text>

src/pages/deals/DealsTable.tsx

@@ -43,7 +43,6 @@ const template = [
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
-  'minmax(10px, 1fr)',
 ]
 
 export const DEALS_PER_PAGE = 5
@@ -104,7 +103,6 @@ export const DealsTable: React.FC<DealsTableProps> = ({
           >
             Created At
           </TableColumnTitleWithSort>
-          <TableColumnTitle>Max renting period</TableColumnTitle>
           <TableColumnTitle>Client</TableColumnTitle>
           <TableColumnTitle>Balance</TableColumnTitle>
           <TableColumnTitle>Status</TableColumnTitle>
@@ -152,10 +150,6 @@ const DealRow: React.FC<DealRowProps> = ({ deal }) => {
   }
 
   const createdAt = formatUnixTimestamp(deal.createdAt)
-  const rentingPeriodAt =
-    deal.minRentingPeriodEndAt === null
-      ? null
-      : formatUnixTimestamp(deal.minRentingPeriodEndAt)
 
   return (
     <RowBlock>
@@ -169,16 +163,6 @@ const DealRow: React.FC<DealRowProps> = ({ deal }) => {
               <Text size={12}>{createdAt.date}</Text>
               <Text size={12}>{createdAt.time}</Text>
             </Cell>
-            <Cell flexDirection="column" alignItems="flex-start">
-              {rentingPeriodAt ? (
-                <>
-                  <Text size={12}>{rentingPeriodAt.date}</Text>
-                  <Text size={12}>{rentingPeriodAt.time}</Text>
-                </>
-              ) : (
-                '-'
-              )}
-            </Cell>
             <Cell
               onMouseOver={() => setCopyshown(true)}
               onMouseLeave={() => setCopyshown(false)}

yarn.lock

@@ -1439,9 +1439,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fluencelabs/deal-ts-clients@npm:0.24.0":
-  version: 0.24.0
-  resolution: "@fluencelabs/deal-ts-clients@npm:0.24.0"
+"@fluencelabs/deal-ts-clients@npm:0.24.1":
+  version: 0.24.1
+  resolution: "@fluencelabs/deal-ts-clients@npm:0.24.1"
   dependencies:
     "@graphql-typed-document-node/core": "npm:^3.2.0"
     debug: "npm:^4.3.4"
@@ -1453,7 +1453,7 @@ __metadata:
     graphql-tag: "npm:^2.12.6"
     ipfs-http-client: "npm:^60.0.1"
     multiformats: "npm:^13.0.1"
-  checksum: 10c0/910cadcffff89f5aba2e98d55b3c8541bb59e93365f905cfcf0e1e07ff611f4fb359fa3b75501780b53cf3b5628eaa63d01165c710cf2073e738e1ac4354cd97
+  checksum: 10c0/ca40d8bbc5ad31051545c4e2d6aef2ba746dfc6b7deaa43826f8980508b2ddc1c97f9e888b828ab3b0655af4c7c7aa7f0ada50a9901c4e8a3a917a750f516633
   languageName: node
   linkType: hard
 
@@ -8144,7 +8144,7 @@ __metadata:
     "@emotion/babel-plugin": "npm:^11.11.0"
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
-    "@fluencelabs/deal-ts-clients": "npm:0.24.0"
+    "@fluencelabs/deal-ts-clients": "npm:0.24.1"
     "@graphql-codegen/cli": "npm:^5.0.3"
     "@graphql-codegen/typescript": "npm:^4.1.0"
     "@graphql-codegen/typescript-graphql-request": "npm:^6.2.0"