Funding request multiple recipient preview

packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx

@@ -228,6 +228,9 @@ export const FillWorkingGroupLeadOpening: Story = {
 export const FundingRequest: Story = {
  args: { type: 'FundingRequestProposalDetails' },
 }
+export const FundingRequestMultipleRecipients: Story = {
+ args: { type: 'FundingRequestMultipleRecipientsProposalDetails' },
+}
 export const RuntimeUpgrade: Story = {
  args: { type: 'RuntimeUpgradeProposalDetails', constitutionality: 2 },
  parameters: {

packages/ui/src/mocks/data/proposals.ts

@@ -56,6 +56,17 @@ const proposalDetails = {
  destinations: [{ __typename: 'FundingRequestDestination', amount: joy(200), account: membership.rootAccount }],
  },
  },
+ FundingRequestMultipleRecipientsProposalDetails: {
+ destinationsList: {
+ __typename: 'FundingRequestDestinationsList',
+ destinations: [
+ { __typename: 'FundingRequestDestination', amount: joy(200), account: membership.rootAccount },
+ { __typename: 'FundingRequestDestination', amount: joy(20), account: member('alice').rootAccount },
+ { __typename: 'FundingRequestDestination', amount: joy(1), account: member('bob').rootAccount },
+ { __typename: 'FundingRequestDestination', amount: joy(500), account: member('charlie').rootAccount },
+ ],
+ },
+ },
  RuntimeUpgradeProposalDetails: { newRuntimeBytecode: { __typename: 'RuntimeWasmBytecode', id: '0' } },
  SetCouncilBudgetIncrementProposalDetails: { newAmount: joy(200) },
  SetCouncilorRewardProposalDetails: { newRewardPerBlock: joy(200) },
@@ -79,10 +90,10 @@ const proposalDetails = {
  VetoProposalDetails: { proposal: { __typename: 'Proposal', id: '0', title: random.words(4) } },
 } as Record<string, RecursivePartial<ProposalWithDetailsFieldsFragment['details']>>
 
-export const proposalDetailsMap = mapValues(
- proposalDetails,
- (value, __typename) => Object.assign(value, { __typename }) as Partial<ProposalWithDetailsFieldsFragment['details']>
-)
+export const proposalDetailsMap = mapValues(proposalDetails, (value, key) => {
+ const __typename = key === 'FundingRequestMultipleRecipientsProposalDetails' ? 'FundingRequestProposalDetails' : key
+ return Object.assign(value, { __typename }) as Partial<ProposalWithDetailsFieldsFragment['details']>
+})
 
 export const proposalTypes = Object.keys(proposalDetailsMap) as ProposalDetailsType[]
 

packages/ui/src/mocks/helpers/proposalDetailsToConstantKey.ts

@@ -1,7 +1,9 @@
 import { Api } from '@/api'
 import { ProposalFieldsFragment } from '@/proposals/queries'
 
-export type ProposalDetailsType = ProposalFieldsFragment['details']['__typename']
+export type ProposalDetailsType =
+ | ProposalFieldsFragment['details']['__typename']
+ | 'FundingRequestMultipleRecipientsProposalDetails'
 
 export const proposalDetailsToConstantKey = (details: ProposalDetailsType) =>
  proposalDetailsToConstantKeyMap.get(details) as string
@@ -13,6 +15,7 @@ const proposalDetailsToConstantKeyMap = new Map<ProposalDetailsType, keyof Api['
  ['DecreaseWorkingGroupLeadStakeProposalDetails', 'decreaseWorkingGroupLeadStakeProposalParameters'],
  ['FillWorkingGroupLeadOpeningProposalDetails', 'fillWorkingGroupOpeningProposalParameters'],
  ['FundingRequestProposalDetails', 'fundingRequestProposalParameters'],
+ ['FundingRequestMultipleRecipientsProposalDetails', 'fundingRequestProposalParameters'],
  ['RuntimeUpgradeProposalDetails', 'runtimeUpgradeProposalParameters'],
  ['SetCouncilBudgetIncrementProposalDetails', 'setCouncilBudgetIncrementProposalParameters'],
  ['SetCouncilorRewardProposalDetails', 'setCouncilorRewardProposalParameters'],

packages/ui/src/proposals/components/ProposalDetails/ProposalDetails.tsx

@@ -15,6 +15,7 @@ import { useWorkingGroup } from '@/working-groups/hooks/useWorkingGroup'
 import {
  Address,
  Amount,
+ DestinationsPreview,
  Divider,
  Hash,
  Markdown,
@@ -49,6 +50,7 @@ const renderTypeMapper: Partial<Record<RenderType, ProposalDetailContent>> = {
  OpeningLink: OpeningLink,
  Percentage: Percentage,
  Hash: Hash,
+ DestinationsPreview: DestinationsPreview,
 }
 
 export const ProposalDetails = ({ proposalDetails }: Props) => {
@@ -78,6 +80,16 @@ export const ProposalDetails = ({ proposalDetails }: Props) => {
  ] as RenderNode[]
  }
 
+ if (proposalDetails?.type === 'fundingRequest') {
+ return [
+ {
+ renderType: 'Amount',
+ label: 'Current WG Budget',
+ value: group?.budget,
+ },
+ ] as RenderNode[]
+ }
+
  if (proposalDetails?.type === 'updateWorkingGroupBudget') {
  return [
  {

packages/ui/src/proposals/components/ProposalDetails/renderers/DestinationsPreview.tsx

@@ -0,0 +1,102 @@
+import BN from 'bn.js'
+import React, { useEffect, useState } from 'react'
+
+import { AccountInfo } from '@/accounts/components/AccountInfo'
+import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { accountOrNamed } from '@/accounts/model/accountOrNamed'
+import { AccountOption } from '@/accounts/types'
+import { CloseButton } from '@/common/components/buttons'
+import { ArrowRightIcon } from '@/common/components/icons'
+import {
+ BalanceInfoInRow,
+ InfoTitle,
+ InfoValue,
+ ModalFooter,
+ Row,
+ TransactionInfoContainer,
+} from '@/common/components/Modal'
+import { RowGapBlock } from '@/common/components/page/PageContent'
+import { SidePaneGlass, SidePaneTitle, SidePanelTop } from '@/common/components/SidePane'
+import { StatisticButton } from '@/common/components/statistics/StatisticButton'
+import { TransactionFee } from '@/common/components/TransactionFee'
+import { TextInlineBig, TokenValue } from '@/common/components/typography'
+import {
+ CustomAccountRow,
+ PreviewPanel,
+ PreviewPanelBody,
+ PreviewPanelHeader,
+} from '@/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate'
+
+interface Props {
+ label: string
+ value: { account: string; amount: BN }[]
+}
+export const DestinationsPreview = ({ label, value }: Props) => {
+ const [isDescriptionVisible, setDescriptionVisible] = useState(false)
+ const [totalAmount, setTotalAmount] = useState<BN>(new BN(0))
+ const { allAccounts } = useMyAccounts()
+ const accounts = allAccounts as AccountOption[]
+
+ const onBackgroundClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+ if (e.target === e.currentTarget) {
+ setDescriptionVisible(false)
+ }
+ }
+
+ useEffect(() => {
+ let total = new BN(0)
+ value?.map((item) => {
+ total = total.add(item.amount)
+ })
+ setTotalAmount(total)
+ }, [])
+ return (
+ <>
+ <StatisticButton
+ title="Payment Details"
+ onClick={() => {
+ setDescriptionVisible(true)
+ }}
+ icon={<ArrowRightIcon />}
+ >
+ <TextInlineBig bold value>
+ {label}
+ </TextInlineBig>
+ </StatisticButton>
+ {isDescriptionVisible && (
+ <SidePaneGlass onClick={onBackgroundClick}>
+ <PreviewPanel>
+ <PreviewPanelHeader>
+ <SidePanelTop>
+ <SidePaneTitle>{label}</SidePaneTitle>
+ <CloseButton onClick={() => setDescriptionVisible(false)} />
+ </SidePanelTop>
+ </PreviewPanelHeader>
+ <PreviewPanelBody>
+ <RowGapBlock gap={8}>
+ <Row>
+ {value?.map((previewAccount, i) => (
+ <CustomAccountRow key={i}>
+ <AccountInfo account={accountOrNamed(accounts, previewAccount.account, 'Unknown Member')} />
+ <BalanceInfoInRow>
+ <InfoTitle>Amount</InfoTitle>
+ <InfoValue>
+ <TokenValue value={previewAccount.amount} />
+ </InfoValue>
+ </BalanceInfoInRow>
+ </CustomAccountRow>
+ ))}
+ </Row>
+ </RowGapBlock>
+ </PreviewPanelBody>
+ <ModalFooter>
+ <TransactionInfoContainer>
+ <TransactionFee title={'Total amount'} value={totalAmount} />
+ </TransactionInfoContainer>
+ </ModalFooter>
+ </PreviewPanel>
+ </SidePaneGlass>
+ )}
+ </>
+ )
+}

packages/ui/src/proposals/components/ProposalDetails/renderers/index.ts

@@ -10,3 +10,4 @@ export * from './Numeric'
 export * from './ProposalLink'
 export * from './OpeningLink'
 export * from './Hash'
+export * from './DestinationsPreview'

packages/ui/src/proposals/helpers/getDetailsRenderStructure.ts

@@ -1,3 +1,4 @@
+import BN from 'bn.js'
 import { omit } from 'lodash'
 
 import { TooltipContentProp } from '@/common/components/Tooltip'
@@ -39,6 +40,7 @@ export type RenderType =
  | 'OpeningLink'
  | 'Percentage'
  | 'Hash'
+ | 'DestinationsPreview'
 
 export interface RenderNode {
  label: string
@@ -55,23 +57,41 @@ type Mapper<Detail, Key extends keyof Detail> = (
 const destinationsMapper: Mapper<DestinationsDetail, 'destinations'> = (value): RenderNode[] => {
  const result: RenderNode[] = []
 
- value.forEach((destination) => {
- result.push({
- label: 'amount',
- value: destination.amount,
- renderType: 'Amount',
+ if (value.length === 1) {
+ value.forEach((destination) => {
+ result.push({
+ label: 'amount',
+ value: destination.amount,
+ renderType: 'Amount',
+ })
+ result.push({
+ label: 'destination',
+ value: destination.account,
+ renderType: 'Address',
+ })
+ result.push({
+ label: '',
+ value: undefined,
+ renderType: 'Divider',
+ })
+ })
+ }
+ if (value.length > 1) {
+ let total = new BN(0)
+ value.forEach((destination) => {
+ total = total.add(destination.amount)
  })
  result.push({
- label: 'destination',
- value: destination.account,
- renderType: 'Address',
+ label: 'Total Payment',
+ value: total,
+ renderType: 'Amount',
  })
  result.push({
- label: '',
- value: undefined,
- renderType: 'Divider',
+ label: 'Payment Details',
+ value: value,
+ renderType: 'DestinationsPreview',
  })
- })
+ }
 
  return result
 }

packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate/PreviewAndValidateModal.tsx

@@ -174,7 +174,7 @@ export const PreviewAndValidateModal = ({ onClose }: PreviewAndValidateModalProp
  </SidePaneGlass>
  )
 }
-const CustomAccountRow = styled(AccountRow)`
+export const CustomAccountRow = styled(AccountRow)`
  margin-bottom: 4px;
  padding-right: 16px;
  &.error {
@@ -187,12 +187,12 @@ const CustomBalanceInfoInRow = styled(BalanceInfoInRow)`
  margin-left: auto;
  }
 `
-const PreviewPanel = styled(SidePane)`
+export const PreviewPanel = styled(SidePane)`
  grid-template-rows: auto 1fr auto;
 `
-const PreviewPanelHeader = styled(SidePaneHeader)`
+export const PreviewPanelHeader = styled(SidePaneHeader)`
  padding: 12px 24px;
 `
-const PreviewPanelBody = styled(SidePaneBody)`
+export const PreviewPanelBody = styled(SidePaneBody)`
  padding: 12px 24px;
 `

packages/ui/test/proposals/helpers/getDetailsRenderStructure.test.ts

@@ -60,49 +60,27 @@ describe('getDetailsRenderStructure()', () => {
  expect(structure).toEqual({
  structure: [
  {
- label: 'amount',
- value: new BN(20),
- renderType: 'Amount',
- },
- {
- label: 'destination',
- value: alice.address,
- renderType: 'Address',
- },
- {
- label: '',
- value: undefined,
- renderType: 'Divider',
- },
- {
- label: 'amount',
- value: new BN(30),
- renderType: 'Amount',
- },
- {
- label: 'destination',
- value: bob.address,
- renderType: 'Address',
- },
- {
- label: '',
- value: undefined,
- renderType: 'Divider',
- },
- {
- label: 'amount',
- value: new BN(10),
+ label: 'Total Payment',
+ value: new BN(60),
  renderType: 'Amount',
  },
  {
- label: 'destination',
- value: aliceStash.address,
- renderType: 'Address',
- },
- {
- label: '',
- value: undefined,
- renderType: 'Divider',
+ label: 'Payment Details',
+ value: [
+ {
+ account: alice.address,
+ amount: new BN(20),
+ },
+ {
+ account: bob.address,
+ amount: new BN(30),
+ },
+ {
+ account: aliceStash.address,
+ amount: new BN(10),
+ },
+ ],
+ renderType: 'DestinationsPreview',
  },
  ],
  })