Preview fix

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;
 `