WIP: Payouts page - Clain

config/kusama.yml.sample

@@ -58,6 +58,7 @@ import-storage:
       - Bids
       - Candidates
       - Members
+      - Payouts
     Bids:
       - who: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY # Alice
         kind:
@@ -102,6 +103,15 @@ import-storage:
     ChallengeRoundCount: 6
     RoundCount: 6
     MemberCount: 2
-    Head: 5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
+    Head: 5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw # Eve
+    Payouts:
+      -
+        -
+          - 5CiPPseXPECbkjWCa6MnjNokrgYjMqmKndv2rSnekmSK2DjL # Ferdie
+        - paid: 0
+          payouts:
+            -
+              - 20000000
+              - 15000000000000
   ParasDisputes:
     $removePrefix: ['disputes'] # those can makes block building super slow

src/pages/explore/CandidatesPage/components/CandidatesList.tsx

@@ -12,7 +12,6 @@ import { useAccount } from '../../../../account/AccountContext'
 import { AccountIdentity } from '../../../../components/AccountIdentity'
 import { DataHeaderRow, DataRow } from '../../../../components/base'
 import { FormatBalance } from '../../../../components/FormatBalance'
-// import { truncate } from '../../../../helpers/truncate'
 import { Identicon } from '../../components/Identicon'
 import { toastByStatus } from '../../helpers'
 

src/pages/explore/PayoutsPage/components/PayoutsList.tsx

@@ -1,19 +1,22 @@
 import type { ApiPromise } from '@polkadot/api'
 import { WalletAccount } from '@talismn/connect-wallets'
 import { useState, useEffect } from 'react'
-import { Badge, Col } from 'react-bootstrap'
+import { Badge, Button, Col } from 'react-bootstrap'
 import styled from 'styled-components'
 import { DataHeaderRow, DataRow } from '../../../../components/base'
 import { FormatBalance } from '../../../../components/FormatBalance'
 import { useBlockTime } from '../../../../hooks/useBlockTime'
 import { Identicon } from '../../components/Identicon'
+import { payout } from '../helper'
 
 const StyledDataRow = styled(DataRow)`
   background-color: ${(props) => (props.$isDefender ? props.theme.colors.black : '')};
   border: ${(props) => (props.$isDefender ? `2px solid ${props.theme.colors.secondary}` : '')};
+
   &:hover {
     cursor: pointer;
   }
+
   @media (max-width: 992px) {
     padding-block: 12px;
     margin-inline: 2px;
@@ -27,7 +30,14 @@ type PayoutsListProps = {
   handleUpdate: () => void
 }
 
-const TimeRemaining = ({ block, latestBlock, api }: { block: number; latestBlock: number | null; api: ApiPromise }) => {
+type TimeRemainingProps = {
+  api: ApiPromise
+  block: number
+  latestBlock: number | null
+  onClainPayout: () => void
+}
+
+const TimeRemaining = ({ block, latestBlock, api, onClainPayout }: TimeRemainingProps) => {
   if (!latestBlock)
     return (
       <Badge pill bg="black" className="me-2 p-2">
@@ -47,9 +57,15 @@ const TimeRemaining = ({ block, latestBlock, api }: { block: number; latestBlock
 
   if (blocksLeft <= 0)
     return (
-      <Badge pill bg="primary" className="me-2 p-2">
-        Matured
-      </Badge>
+      <>
+        <Badge pill bg="primary" className="me-2 p-2">
+          Matured
+        </Badge>
+        {/* @TODO: Only show claim button if it's the current address */}
+        <Button variant="primary" onClick={onClainPayout}>
+          Claim Payout
+        </Button>
+      </>
     )
 
   return (
@@ -59,9 +75,11 @@ const TimeRemaining = ({ block, latestBlock, api }: { block: number; latestBlock
   )
 }
 
-const PayoutsList = ({ api, members }: PayoutsListProps): JSX.Element => {
+const PayoutsList = ({ api, members, activeAccount }: PayoutsListProps): JSX.Element => {
   const [latestBlock, setLatestBlock] = useState<number | null>(null)
 
+  const isMember = (member: ExtendedSocietyMember) => activeAccount?.address === member.accountId.toHuman()
+
   useEffect(() => {
     const fetchLatestBlock = async () => {
       const header = await api.rpc.chain.getHeader()
@@ -80,6 +98,16 @@ const PayoutsList = ({ api, members }: PayoutsListProps): JSX.Element => {
 
   if (members.length === 0) return <>No members</>
 
+  const onClainPayout = () => {
+    const tx = api.tx.society.payout()
+
+    const notReallySure = () => {
+      console.log('oiii ??????')
+    }
+
+    payout(tx, api, activeAccount, notReallySure)
+  }
+
   return (
     <>
       <DataHeaderRow className="d-none d-lg-flex text-center">
@@ -122,9 +150,12 @@ const PayoutsList = ({ api, members }: PayoutsListProps): JSX.Element => {
               </Badge>
             )}
             {member.hasPayouts && (
-              <>
-                <TimeRemaining block={member.extendedPayouts.block} latestBlock={latestBlock} api={api} />
-              </>
+              <TimeRemaining
+                block={member.extendedPayouts.block}
+                latestBlock={latestBlock}
+                api={api}
+                onClainPayout={onClainPayout}
+              />
             )}
             {member.extendedPayouts.pending == 0 && member.extendedPayouts.paid > 0 && (
               <Badge pill bg="black" className="me-2 p-2">
@@ -136,6 +167,12 @@ const PayoutsList = ({ api, members }: PayoutsListProps): JSX.Element => {
                 Paid before V2
               </Badge>
             )}
+
+            {isMember(member) && (
+              <Badge bg="primary" className="me-2 p-2">
+                You
+              </Badge>
+            )}
           </Col>
         </StyledDataRow>
       ))}

src/pages/explore/PayoutsPage/helper.ts

@@ -0,0 +1,17 @@
+import { ApiPromise } from '@polkadot/api'
+import { SubmittableExtrinsic } from '@polkadot/api/types'
+import { WalletAccount } from '@talismn/connect-wallets'
+import { doTx } from '../../../helpers/extrinsics'
+
+const waitingText = 'Request sent. Waiting for response...'
+
+export const payout = async (
+  tx: SubmittableExtrinsic<'promise', any>,
+  api: ApiPromise,
+  activeAccount: WalletAccount | undefined,
+  onStatusChange: any
+) => {
+  const finalizedText = 'Payout submitted successfully.'
+
+  await doTx(api, tx, finalizedText, waitingText, activeAccount, onStatusChange)
+}

src/pages/explore/components/NavigationBar.tsx

@@ -52,13 +52,13 @@ const NavigationBar = ({ totals }: { totals: Totals }) => {
           </Nav.Link>
         </StyledNavItem>
         <StyledNavItem>
-          <Nav.Link as={LinkWithQuery} to="/journey">
-            Journey
+          <Nav.Link as={LinkWithQuery} to="/explore/payouts">
+            Payouts
           </Nav.Link>
         </StyledNavItem>
         <StyledNavItem>
-          <Nav.Link as={LinkWithQuery} to="/explore/payouts">
-            Payouts
+          <Nav.Link as={LinkWithQuery} to="/journey">
+            Journey
           </Nav.Link>
         </StyledNavItem>
       </StyledNav>