1
1
import { Spinner } from "@chakra-ui/react" ;
2
+ import { BaseDonorValues , useDataLayer } from "data-layer" ;
2
3
import { useEffect , useState } from "react" ;
3
4
import { useSelector } from "react-redux" ;
4
5
import { useParams } from "react-router-dom" ;
5
6
import { RootState } from "../../../reducers" ;
6
7
import { ProjectStats } from "../../../reducers/projects" ;
7
8
import RoundDetailsCard from "./RoundDetailsCard" ;
8
9
import StatCard from "./StatCard" ;
10
+ import { allChains } from "../../../utils/wagmi" ;
9
11
10
12
export const slugify = ( input : string ) : string =>
11
13
input
@@ -19,9 +21,12 @@ export default function RoundStats() {
19
21
const NAText = "N/A" ;
20
22
21
23
const params = useParams ( ) ;
24
+ const dataLayer = useDataLayer ( ) ;
22
25
const [ details , setDetails ] = useState < any > ( [ ] ) ;
23
26
const [ allTimeStats , setAllTimeStats ] = useState < any > ( {
24
27
allTimeReceived : 0 ,
28
+ totalCrowdFunding : 0 ,
29
+ totalDirectDonations : 0 ,
25
30
allTimeContributions : 0 ,
26
31
roundsLength : 0 ,
27
32
} ) ;
@@ -41,57 +46,93 @@ export default function RoundStats() {
41
46
} ) ;
42
47
43
48
useEffect ( ( ) => {
44
- const detailsTmp : any [ ] = [ ] ;
45
- let allTime = {
46
- allTimeReceived : 0 ,
47
- allTimeContributions : 0 ,
48
- roundsLength : 0 ,
49
- } ;
49
+ const fetch = async ( ) => {
50
+ const detailsTmp : any [ ] = [ ] ;
51
+ let allTime = {
52
+ allTimeReceived : 0 ,
53
+ totalCrowdFunding : 0 ,
54
+ totalDirectDonations : 0 ,
55
+ allTimeContributions : 0 ,
56
+ roundsLength : 0 ,
57
+ } ;
58
+
59
+ let totalDirectDonations = 0 ;
60
+ let totalDirectDonationCount = 0 ;
61
+
62
+ const directDonations : BaseDonorValues [ ] =
63
+ await dataLayer . getDirectDonationsByProjectId ( {
64
+ projectId : props . projectID ,
65
+ chainIds : allChains . map ( ( chain ) => chain . id ) ,
66
+ } ) ;
50
67
51
- if ( props . stats ?. length > 0 ) {
52
- props . stats . forEach ( ( stat ) => {
53
- allTime = {
54
- allTimeReceived :
55
- allTime . allTimeReceived + ( stat . success ? stat . fundingReceived : 0 ) ,
56
- allTimeContributions :
57
- allTime . allTimeContributions +
58
- ( stat . success ? stat . totalContributions : 0 ) ,
59
- roundsLength : props . stats . length ,
60
- } ;
61
-
62
- const newStat = { ...stat } ;
63
- if ( newStat . uniqueContributors > 0 || newStat . totalContributions > 0 ) {
64
- if ( newStat . fundingReceived === 0 ) newStat . fundingReceived = NA ;
65
- if ( newStat . avgContribution === 0 ) newStat . avgContribution = NA ;
66
- }
67
-
68
- if ( props . rounds [ stat . roundId ] ?. round ?. programName ) {
69
- detailsTmp . push ( {
70
- round : props . rounds [ stat . roundId ] . round ,
71
- stats : { ...newStat } ,
72
- } ) ;
73
- }
68
+ directDonations . forEach ( ( donation ) => {
69
+ totalDirectDonations += donation . totalAmountDonatedInUsd ;
70
+ totalDirectDonationCount += donation . totalDonationsCount ;
74
71
} ) ;
75
- }
76
72
77
- setAllTimeStats ( allTime ) ;
78
- setDetails ( detailsTmp ) ;
79
- } , [ props . stats , props . rounds ] ) ;
73
+ if ( props . stats ?. length > 0 ) {
74
+ props . stats . forEach ( ( stat ) => {
75
+ allTime = {
76
+ ...allTime ,
77
+ totalCrowdFunding :
78
+ allTime . totalCrowdFunding +
79
+ ( stat . success ? stat . fundingReceived : 0 ) ,
80
+ allTimeContributions :
81
+ allTime . allTimeContributions +
82
+ ( stat . success ? stat . totalContributions : 0 ) ,
83
+ roundsLength : props . stats . length ,
84
+ } ;
85
+
86
+ const newStat = { ...stat } ;
87
+ if (
88
+ newStat . uniqueContributors > 0 ||
89
+ newStat . totalContributions > 0
90
+ ) {
91
+ if ( newStat . fundingReceived === 0 ) newStat . fundingReceived = NA ;
92
+ if ( newStat . avgContribution === 0 ) newStat . avgContribution = NA ;
93
+ }
94
+
95
+ if ( props . rounds [ stat . roundId ] ?. round ?. programName ) {
96
+ detailsTmp . push ( {
97
+ round : props . rounds [ stat . roundId ] . round ,
98
+ stats : { ...newStat } ,
99
+ } ) ;
100
+ }
101
+ } ) ;
102
+ }
103
+
104
+ allTime . totalDirectDonations = totalDirectDonations ;
105
+ allTime . allTimeReceived =
106
+ allTime . totalCrowdFunding + totalDirectDonations ;
107
+ allTime . allTimeContributions += totalDirectDonationCount ;
108
+
109
+ setAllTimeStats ( allTime ) ;
110
+ setDetails ( detailsTmp ) ;
111
+ } ;
112
+ if ( props . projectID ) fetch ( ) ;
113
+ } , [ props . stats , props . rounds , props . projectID , dataLayer ] ) ;
80
114
81
115
const section = (
82
116
description : any ,
83
117
container : any ,
84
118
pt : boolean ,
85
- key : string
119
+ key : string ,
120
+ spaceBetween ?: boolean
86
121
) => (
87
122
< div
88
123
key = { key }
89
- className = { `grid md:grid-cols-7 sm:grid-cols-1 border-b border-gitcoin-grey-100 pb-10 ${
90
- pt && "pt-10 "
91
- } `}
124
+ className = { `grid ${
125
+ spaceBetween ? "md:grid-cols-8" : "md:grid-cols-7 "
126
+ } sm:grid-cols-1 border-b border-gitcoin-grey-100 pb-10 ${ pt && "pt-10" } `}
92
127
>
93
- < div className = "md:col-span-2" > { description } </ div >
94
- < div className = "md:col-span-4 sm:col-span-1 md:flex space-between" >
128
+ < div className = { `${ spaceBetween ? "md:col-span-2" : "md:col-span-1" } ` } >
129
+ { description }
130
+ </ div >
131
+ < div
132
+ className = { `${
133
+ spaceBetween ? "md:col-span-5" : "md:col-span-6"
134
+ } sm:col-span-1 md:flex space-between`}
135
+ >
95
136
{ container }
96
137
</ div >
97
138
< div className = "md:col-span-1 sm:col-span-1" />
@@ -131,6 +172,18 @@ export default function RoundStats() {
131
172
bg = "gitcoin-violet-100"
132
173
tooltip = "The estimated funding received by this project. This number is not final and may change based on updated data."
133
174
/>
175
+ < StatCard
176
+ heading = "Est. Crowdfunding Received"
177
+ value = { `$${ allTimeStats . totalCrowdFunding . toFixed ( 2 ) } ` }
178
+ bg = "gitcoin-violet-100"
179
+ tooltip = "The number of rounds this project has participated in."
180
+ />
181
+ < StatCard
182
+ heading = "Total Direct Donations"
183
+ value = { `$${ allTimeStats . totalDirectDonations . toFixed ( 2 ) } ` }
184
+ bg = "gitcoin-violet-100"
185
+ tooltip = "The number of contributions this project has received."
186
+ />
134
187
< StatCard
135
188
heading = "No. of Contributions"
136
189
value = { allTimeStats . allTimeContributions }
@@ -193,7 +246,8 @@ export default function RoundStats() {
193
246
/>
194
247
</ > ,
195
248
true ,
196
- `details-${ index } `
249
+ `details-${ index } ` ,
250
+ true
197
251
)
198
252
) }
199
253
</ >
0 commit comments