navigate('/projects')}
51 | hasMore
52 | selectOrderByField={orderByField => {
53 | setLimit(2)
54 | setOrderByField(orderByField)
55 | }}
56 | />
57 | )
58 | }
59 |
60 | export default HomeTopProjects
61 |
--------------------------------------------------------------------------------
/src/components/torus/loginButton.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { useWallet } from '../../contextProvider/WalletProvider'
3 | import { Text, Button, jsx } from 'theme-ui'
4 | import { wallets } from '../../wallets'
5 | import LoginModal from './loginModal'
6 | import { useState } from 'react'
7 |
8 | const LoginButton = props => {
9 | const [showOptions, setShowOptions] = useState(false)
10 | const [isComponentVisible, setIsComponentVisible] = useState(false)
11 |
12 | // const {
13 | // ref,
14 | // isComponentVisible,
15 | // setIsComponentVisible
16 | // } = useComponentVisible(false)
17 | const { login, ethEnabled } = useWallet()
18 | return (
19 |
20 |
25 | ethEnabled
26 | ? setIsComponentVisible(!isComponentVisible)
27 | : login({ walletProvider: 'torus' })
28 | }
29 | >
30 | Sign in
31 |
32 | {
33 | //
34 | // Object.keys(wallets).map((walletProvider, index) => {
35 | // return (
36 | // login({ walletProvider })}
47 | // >
48 | // {walletProvider}
49 | //
50 | // )
51 | // })
52 | //
53 | }
54 | {isComponentVisible && wallets ? (
55 |
setIsComponentVisible(false)}
57 | isOpen={isComponentVisible}
58 | />
59 | ) : null}
60 |
57 |
60 |
70 | Giveth
71 |
72 |
73 |
74 | {children}
75 |
76 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/giveth2-full-stack.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "extensions": {
3 | "recommendations": [
4 | //Prettier is needed to conveniently format on save
5 | "esbenp.prettier-vscode",
6 | //And even better correctly lint everything according to standardJS
7 | "numso.prettier-standard-vscode",
8 | //To see our status with StandardJS we can use problem highlighting - in hindsight, properly configured this could be all we need
9 | "chenxsan.vscode-standardjs",
10 | //to get SVG previews
11 | "simonsiefke.svg-preview"
12 | ]
13 | },
14 | "folders": [
15 | {
16 | "path": "."
17 | },
18 | {
19 | "path": "../impact-graph"
20 | }
21 | ],
22 | "settings": {
23 | // Differentiate our giveth2 workspace from other open VSCode windows
24 | "workbench.colorCustomizations": {
25 | "titleBar.activeBackground": "#c2449f",
26 | "statusBar.background": "#c2449f",
27 | "statusBar.foreground": "#e7e7e7",
28 | "statusBarItem.hoverBackground": "#cf6ab3",
29 | "titleBar.activeForeground": "#e7e7e7",
30 | "titleBar.inactiveBackground": "#c2449f99",
31 | "titleBar.inactiveForeground": "#e7e7e799"
32 | },
33 | // "workbench.colorCustomizations": {
34 | // "statusBar.background": "#c2449f",
35 | // "statusBarItem.hoverBackground": "#cf6ab3",
36 | // "titleBar.activeBackground": "#c2449f",
37 | // "titleBar.inactiveBackground": "#c2449f99",
38 | // "statusBar.foreground": "#e7e7e7",
39 | // "titleBar.activeForeground": "#e7e7e7",
40 | // "titleBar.inactiveForeground": "#e7e7e799",
41 | // "activityBar.activeBackground": "#cf6ab3",
42 | // "activityBar.activeBorder": "#4e601f",
43 | // "activityBar.background": "#cf6ab3",
44 | // "activityBar.foreground": "#15202b",
45 | // "activityBar.inactiveForeground": "#15202b99",
46 | // "activityBarBadge.background": "#4e601f",
47 | // "activityBarBadge.foreground": "#e7e7e7"
48 | // },
49 | "peacock.color": "#C2449F"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/my-account/projects.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Text, Flex, Box } from 'theme-ui'
3 | import React from 'react'
4 | import AccountTop from '../../components/account/AccountTop'
5 | import AccountNav from '../../components/account/AccountNavSimple'
6 | import AccountBody from '../../components/account/AccountBody'
7 | import Layout from '../../components/layout'
8 | import MyProjects from '../../components/account/myProjects'
9 | import { FETCH_USER_PROJECTS } from '../../apollo/gql/projects'
10 | import { useWallet } from '../../contextProvider/WalletProvider'
11 | import { useQuery } from '@apollo/client'
12 |
13 | const ProjectListing = props => {
14 | const { user, isLoggedIn } = useWallet()
15 | // console.log(`user in ProjectListing : ${JSON.stringify(user, null, 2)}`)
16 | console.log(`user in ProjectListing :`)
17 |
18 | //Render
19 | // const { data: userProjects } = useQuery(FETCH_USER_PROJECTS, {
20 | // variables: { admin: parseFloat(1 || -1) }
21 | // })
22 | // const projectsList = userProjects?.projects
23 | return null
24 | return
29 |
37 |
48 |
50 | {/*
59 |
60 | )
61 | }
62 |
63 | export default AccountPage
64 |
--------------------------------------------------------------------------------
/src/components/create-project-form/modals/CloseModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'gatsby'
3 | import { Button, Flex, Text } from 'theme-ui'
4 |
5 | export const CloseModal = ({ showModal, setShowModal }) => (
6 |
21 | setShowModal(false)}
24 | aria-label='close'
25 | sx={{
26 | position: 'absolute',
27 | top: '32px',
28 | right: '32px',
29 | fontSize: '3',
30 | fontFamily: 'body',
31 | color: 'secondary',
32 | background: 'unset',
33 | cursor: 'pointer'
34 | }}
35 | >
36 | Close
37 |
38 |
41 | Are you sure?
42 |
43 |
51 |
62 |
66 | setShowModal(false)}
70 | variant='nofill'
71 | sx={{
72 | color: 'secondary',
73 | width: '140px',
74 | height: '52px',
75 | border: '2px solid #AAAFCA'
76 | }}
77 | >
78 | No
79 |
80 |
81 |
82 | )
83 |
--------------------------------------------------------------------------------
/src/components/account/AccountBody.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Text, Flex, Box } from 'theme-ui'
3 | import React from 'react'
4 | import { Link } from 'gatsby'
5 | import { BsArrowLeft } from 'react-icons/bs'
6 | import styled from '@emotion/styled'
7 | import MyProjects from './myProjects'
8 | const MyAccount = React.lazy(() => import('../../components/account/myAccount'))
9 | const MyDonations = React.lazy(() =>
10 | import('../../components/account/myDonations')
11 | )
12 | const UserSpan = styled.span`
13 | position: relative;
14 | display: grid;
15 | grid-template-columns: repeat(4, auto);
16 | align-items: center;
17 | justify-self: end;
18 | @media (max-width: 1030px) {
19 | grid-row: 1;
20 | grid-column: 3;
21 | }
22 | `
23 | const SetView = props => {
24 | const { query, projectsList, isSSR, userDonations } = props
25 | const { view, data } = query
26 | switch (view) {
27 | case 'projects':
28 | switch (data) {
29 | case 'all':
30 | return
67 |
74 | )
75 | }
76 | export default AccountBody
77 |
--------------------------------------------------------------------------------
/src/components/create-project-form/inputs/ProjectNameInput.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Label, Input, Text, Button } from 'theme-ui'
3 | import { animated } from 'react-spring'
4 |
5 | export const ProjectNameInput = ({
6 | register,
7 | currentValue,
8 | animationStyle
9 | }) => {
10 | const [characterLength, setCharacterLength] = useState(
11 | currentValue ? currentValue.length : 0
12 | )
13 | return (
14 |
15 |
22 | What's the name of your project?
23 |
24 |
25 |
50 | {characterLength}/55
51 |
52 |
53 |
64 |
73 | NEXT
74 |
75 |
76 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/confirmationModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Flex, Text } from 'theme-ui'
3 |
4 | const ConfirmationModal = ({
5 | showModal,
6 | setShowModal,
7 | title,
8 | confirmation,
9 | noMsg
10 | }) => (
11 |
26 | setShowModal(false)}
29 | aria-label='close'
30 | sx={{
31 | position: 'absolute',
32 | top: '32px',
33 | right: '32px',
34 | fontSize: '3',
35 | fontFamily: 'body',
36 | color: 'secondary',
37 | background: 'unset',
38 | cursor: 'pointer'
39 | }}
40 | >
41 | Close
42 |
43 |
46 | {title}
47 |
48 |
56 | confirmation?.do()}
67 | >
68 | {confirmation?.title}
69 |
70 | setShowModal(false)}
74 | variant='nofill'
75 | sx={{
76 | color: 'secondary',
77 | width: '140px',
78 | height: '52px',
79 | border: '2px solid #AAAFCA'
80 | }}
81 | >
82 | No
83 |
84 |
85 |
86 | )
87 |
88 | export default ConfirmationModal
89 |
--------------------------------------------------------------------------------
/src/images/icon-question-mark.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/components/account/projectEdition/confirmationModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Flex, Text } from 'theme-ui'
3 |
4 | const ConfirmationModal = ({
5 | showModal,
6 | setShowModal,
7 | title,
8 | confirmation,
9 | secondary,
10 | noMsg
11 | }) => (
12 |
28 | setShowModal(false)}
31 | aria-label='close'
32 | sx={{
33 | position: 'absolute',
34 | top: '32px',
35 | right: '32px',
36 | fontSize: '3',
37 | fontFamily: 'body',
38 | color: 'secondary',
39 | background: 'unset',
40 | cursor: 'pointer'
41 | }}
42 | >
43 | Close
44 |
45 |
48 | {title}
49 |
50 |
58 | confirmation?.do()}
69 | >
70 | {confirmation?.title}
71 |
72 | secondary?.do()}
76 | variant='nofill'
77 | sx={{
78 | color: 'secondary',
79 | width: '140px',
80 | height: '52px',
81 | border: '2px solid #AAAFCA'
82 | }}
83 | >
84 | {secondary?.title}
85 |
86 |
87 |
88 | )
89 |
90 | export default ConfirmationModal
91 |
--------------------------------------------------------------------------------
/src/components/content/JoinPageHero.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { Link } from 'gatsby'
3 | import { useMediaQuery } from 'react-responsive'
4 | import { Grid, Heading, Text, jsx } from 'theme-ui'
5 | import styled from '@emotion/styled'
6 |
7 | // import decorative graphics
8 | import heroImage from '../../images/people-highfive.svg'
9 |
10 | const HeroSection = styled(Grid)`
11 | grid-template-columns: 1fr auto;
12 | align-items: end;
13 | @media (max-width: 850px) {
14 | grid-template-columns: 1fr;
15 | }
16 | `
17 |
18 | const HeroImage = styled.img`
19 | padding-right: 3rem;
20 | `
21 |
22 | const HeroText = styled(Grid)`
23 | grid-template-rows: auto;
24 | justify-self: center;
25 | @media (max-width: 850px) {
26 | }
27 | `
28 |
29 | const Hero = () => {
30 | const isMobile = useMediaQuery({ query: '(max-width: 850px)' })
31 | return (
32 |
33 |
37 | {' '}
38 |
47 | Join our Community{' '}
48 |
49 |
57 | Community of Makers, Building the Future of Giving
58 |
59 |
60 | Giveth is first and foremost a community. We are people working to
61 | build and give well the future we made together. Our project is
62 | open-source, decentralized, altruistic, and community-led. As you've
63 | made it this far, you are probably a Giver and a Maker too.
64 |
69 |
70 | {isMobile ? null :
72 | )
73 | }
74 |
75 | export default Hero
76 |
--------------------------------------------------------------------------------
/src/components/toast.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Flex, Text, Spinner } from 'theme-ui'
3 | import { Slide, toast } from 'react-toastify'
4 | import {
5 | IoMdWarning,
6 | IoIosCheckmarkCircle,
7 | IoIosInformationCircle,
8 | IoIosAlert
9 | } from 'react-icons/io'
10 | import 'react-toastify/dist/ReactToastify.css'
11 | import theme from '../gatsby-plugin-theme-ui/index'
12 | import styled from '@emotion/styled'
13 |
14 | export default function Toast({
15 | content = 'default msg',
16 | type,
17 | noAutoClose,
18 | isLoading,
19 | customPosition
20 | }) {
21 | const config = {
22 | position: customPosition || 'top-right',
23 | autoClose: noAutoClose ? false : 5000,
24 | hideProgressBar: false,
25 | closeOnClick: true,
26 | pauseOnHover: true,
27 | draggable: true,
28 | progress: undefined,
29 | transition: Slide
30 | }
31 | const Content = () => {
32 | let icon = null
33 | const size = '32px'
34 | switch (type) {
35 | case 'error':
36 | icon =
66 | {icon}
67 |
73 | {content}
74 |
75 |
76 | )
77 | }
78 | if (type) {
79 | return toast[type](
2 |
3 |
5 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/components/donate/onlyCrypto_old.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { useState, useEffect } from 'react'
3 | import { Box, Button, Text, jsx } from 'theme-ui'
4 | import styled from '@emotion/styled'
5 | import QRCode from 'qrcode.react'
6 |
7 | const Content = styled.div`
8 | max-width: 41.25rem;
9 | word-wrap: break-word;
10 | `
11 |
12 | const QRSection = styled.div`
13 | margin: 1.3rem 0 0 0;
14 | @media (max-width: 800px) {
15 | display: flex;
16 | flex-direction: column;
17 | justify-content: center;
18 | align-items: center;
19 | text-align: center;
20 | }
21 | `
22 |
23 | const QRContainer = styled(Box)`
24 | max-width: 13rem;
25 | border-radius: 12px;
26 | margin: 1rem 0 0 0;
27 | `
28 |
29 | const AddressContainer = styled.div`
30 | margin: 2rem 0;
31 | @media (max-width: 800px) {
32 | align-self: center;
33 | text-align: center;
34 | }
35 | `
36 |
37 | const CopyButton = styled(Button)`
38 | width: 100%;
39 | max-width: 20rem;
40 | @media (max-width: 800px) {
41 | width: 70%;
42 | }
43 | `
44 |
45 | const OnlyCrypto = props => {
46 | const { project, address } = props
47 | const [copyMsg, setCopyMsg] = useState('COPY ADDRESS')
48 |
49 | function copyAddress() {
50 | navigator.clipboard.writeText(address)
51 | setCopyMsg('Address Copied!')
52 | }
53 |
54 | useEffect(() => {
55 | const timer = setTimeout(() => {
56 | setCopyMsg('COPY ADDRESS')
57 | }, 5000)
58 | // Clear timeout if the component is unmounted
59 | return () => timer
60 | }, [copyMsg])
61 |
62 | return (
63 |
64 |
65 |
66 | Send ETH or any ERC20 to this address.
67 |
68 |
69 | 100% of donations go directly to the project.
70 |
71 |
72 |
74 |
75 |
76 |
80 | {address}
81 |
82 |
87 | {copyMsg}
88 |
89 |
90 |
91 | )
92 | }
93 |
94 | export default OnlyCrypto
95 |
--------------------------------------------------------------------------------
/src/images/svg/donation/qr.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/apollo/gql/auth.js:
--------------------------------------------------------------------------------
1 | import { gql } from '@apollo/client'
2 |
3 | const VALIDATE_TOKEN = gql`
4 | mutation ValidateToken($token: String!) {
5 | validateToken(token: $token)
6 | }
7 | `
8 |
9 | const DO_LOGIN = gql`
10 | mutation DoLoginWallet(
11 | $walletAddress: String!
12 | $signature: String!
13 | $email: String
14 | $avatar: String
15 | $name: String
16 | $hostname: String!
17 | $isXDAI: Boolean
18 | ) {
19 | loginWallet(
20 | walletAddress: $walletAddress
21 | signature: $signature
22 | email: $email
23 | avatar: $avatar
24 | name: $name
25 | hostname: $hostname
26 | isXDAI: $isXDAI
27 | ) {
28 | token
29 | user {
30 | id
31 | firstName
32 | lastName
33 | name
34 | email
35 | avatar
36 | url
37 | location
38 | }
39 | }
40 | }
41 | `
42 |
43 | const GET_USER = gql`
44 | query User($userId: Int!) {
45 | user(userId: $userId) {
46 | id
47 | firstName
48 | lastName
49 | name
50 | email
51 | avatar
52 | walletAddress
53 | url
54 | location
55 | }
56 | }
57 | `
58 |
59 | const GET_USER_BY_ADDRESS = gql`
60 | query UserByAddress($address: String!) {
61 | userByAddress(address: $address) {
62 | id
63 | firstName
64 | lastName
65 | name
66 | email
67 | avatar
68 | walletAddress
69 | url
70 | location
71 | }
72 | }
73 | `
74 |
75 | const DO_REGISTER = gql`
76 | mutation DoRegister($name: String!, $email: String!, $password: String!) {
77 | register(
78 | data: {
79 | firstName: $name
80 | lastName: ""
81 | email: $email
82 | password: $password
83 | }
84 | ) {
85 | firstName
86 | email
87 | lastName
88 | }
89 | }
90 | `
91 |
92 | const UPDATE_USER = gql`
93 | mutation UpdateUser(
94 | $url: String
95 | $name: String
96 | $location: String
97 | $email: String
98 | $lastName: String
99 | $firstName: String
100 | ) {
101 | updateUser(
102 | url: $url
103 | name: $name
104 | location: $location
105 | email: $email
106 | firstName: $firstName
107 | lastName: $lastName
108 | )
109 | }
110 | `
111 |
112 | export {
113 | DO_LOGIN,
114 | DO_REGISTER,
115 | GET_USER,
116 | UPDATE_USER,
117 | GET_USER_BY_ADDRESS,
118 | VALIDATE_TOKEN
119 | }
120 |
--------------------------------------------------------------------------------
/src/components/account/AccountTop.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Text, Flex, Box } from 'theme-ui'
3 | import { Link } from 'gatsby'
4 | import { BsArrowLeft } from 'react-icons/bs'
5 | import styled from '@emotion/styled'
6 | import iconVerticalLine from '../../images/icon-vertical-line.svg'
7 | import { useMediaQuery } from 'react-responsive'
8 | import theme from '../../gatsby-plugin-theme-ui/index'
9 |
10 | const UserSpan = styled.span`
11 | position: relative;
12 | display: grid;
13 | grid-template-columns: repeat(4, auto);
14 | align-items: center;
15 | justify-self: end;
16 | `
17 | const CreateLink = styled(Link)`
18 | text-decoration: none;
19 | font-family: 'Red Hat Display', sans-serif;
20 | text-transform: uppercase;
21 | font-weight: 700;
22 | color: ${theme.colors.primary};
23 | align-self: center;
24 | :hover {
25 | color: ${theme.colors.accent};
26 | }
27 | `
28 | const AccountTop = props => {
29 | const isDonation = (props?.query?.view || '') === 'donations'
30 | const isMobile = useMediaQuery({ query: '(max-width: 825px)' })
31 | return (
32 |
40 |
57 | Giveth
58 |
59 |
60 |
61 |
62 | {isMobile ? null : (
63 |
64 |
65 |
73 | {isDonation ? 'Donate' : 'Create a project'}
74 |
75 |
76 |
77 | )}
78 |
81 |
82 |
83 | )
84 | }
85 | export default AccountTop
86 |
--------------------------------------------------------------------------------
/src/components/notification.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Flex, Text } from 'theme-ui'
3 | import { Slide, toast } from 'react-toastify'
4 | import {
5 | IoMdWarning,
6 | IoIosCheckmarkCircle,
7 | IoIosInformationCircle,
8 | IoIosAlert
9 | } from 'react-icons/io'
10 | import 'react-toastify/dist/ReactToastify.css'
11 | import theme from '../gatsby-plugin-theme-ui/index'
12 | import styled from '@emotion/styled'
13 |
14 | export default function Toast({ content = 'default msg', type, action }) {
15 | const Content = () => {
16 | let icon, bgColor, borderColor
17 | const size = '32px'
18 | switch (type) {
19 | case 'error':
20 | bgColor = theme.colors.red
21 | borderColor = 'secondary'
22 | icon =
52 |
53 | {icon}
54 |
55 | {content}
56 |
57 |
58 | {action && (
59 |
60 | action?.do()}
62 | sx={{
63 | cursor: 'pointer',
64 | wordBreak: 'break-word',
65 | fontWeight: 'bold',
66 | color: borderColor
67 | }}
68 | >
69 | {action?.title}
70 |
71 |
72 | )}
73 |
74 | )
75 | }
76 | return
2 |
15 |
--------------------------------------------------------------------------------
/src/images/giveth-side-image.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/src/pages/project/[slug].js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import React, { useEffect, useState } from 'react'
3 | import { useApolloClient } from '@apollo/client'
4 | import { jsx, Flex, Text, Spinner } from 'theme-ui'
5 | import { Router } from '@reach/router'
6 | import { FETCH_PROJECT_BY_SLUG } from '../../apollo/gql/projects'
7 | import { ProjectDonatorView } from '../../components/project'
8 | import Layout from '../../components/layout'
9 | import Seo from '../../components/seo'
10 | import { useWallet } from '../../contextProvider/WalletProvider'
11 |
12 | const ShowComponents = ({ projectStatus, slugProject }) => {
13 | const { user } = useWallet()
14 | const isAdmin = slugProject?.admin === user?.id
15 | return (
16 | <>
17 | {projectStatus && projectStatus !== '5' && !isAdmin ? (
18 |
19 |
20 | Project Not Available
21 |
22 |
23 | ) : slugProject ? (
24 |
62 |
72 |
74 | ) : (
75 |
81 | )
82 | }
83 |
84 | export default Project
85 |
--------------------------------------------------------------------------------
/src/images/svg/create/projectImageGallery4.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
15 |
16 |
--------------------------------------------------------------------------------
/static/assets/create/projectImageGallery4.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
15 |
16 |
--------------------------------------------------------------------------------
/src/apollo/gql/donations.js:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 | const SAVE_DONATION = gql`
3 | mutation(
4 | $chainId: Float!
5 | $fromAddress: String!
6 | $toAddress: String!
7 | $transactionId: String!
8 | $transactionNetworkId: Float!
9 | $amount: Float!
10 | $token: String!
11 | $projectId: Float!
12 | ) {
13 | saveDonation(
14 | chainId: $chainId
15 | fromAddress: $fromAddress
16 | toAddress: $toAddress
17 | transactionId: $transactionId
18 | transactionNetworkId: $transactionNetworkId
19 | amount: $amount
20 | token: $token
21 | projectId: $projectId
22 | )
23 | }
24 | `
25 | const SAVE_DONATION_TRANSACTION = gql`
26 | mutation($transactionId: String!, $donationId: Float!) {
27 | saveDonationTransaction(
28 | transactionId: $transactionId
29 | donationId: $donationId
30 | )
31 | }
32 | `
33 | const WALLET_DONATIONS = gql`
34 | query donationsFromWallets($fromWalletAddresses: [String!]!) {
35 | donationsFromWallets(fromWalletAddresses: $fromWalletAddresses) {
36 | transactionId
37 | transactionNetworkId
38 | toWalletAddress
39 | fromWalletAddress
40 | anonymous
41 | amount
42 | valueUsd
43 | valueEth
44 | priceEth
45 | priceUsd
46 | user {
47 | id
48 | firstName
49 | lastName
50 | }
51 | project {
52 | title
53 | }
54 | createdAt
55 | currency
56 | }
57 | }
58 | `
59 |
60 | const PROJECT_DONATIONS = gql`
61 | query donationsToWallets($toWalletAddresses: [String!]!) {
62 | donationsToWallets(toWalletAddresses: $toWalletAddresses) {
63 | transactionId
64 | transactionNetworkId
65 | toWalletAddress
66 | fromWalletAddress
67 | anonymous
68 | amount
69 | valueUsd
70 | valueEth
71 | priceEth
72 | priceUsd
73 | user {
74 | id
75 | name
76 | walletAddress
77 | firstName
78 | lastName
79 | }
80 | project {
81 | title
82 | }
83 | createdAt
84 | currency
85 | }
86 | }
87 | `
88 |
89 | const USERS_DONATIONS = gql`
90 | query {
91 | donationsByDonor {
92 | transactionId
93 | transactionNetworkId
94 | toWalletAddress
95 | fromWalletAddress
96 | anonymous
97 | amount
98 | valueUsd
99 | user {
100 | id
101 | firstName
102 | lastName
103 | }
104 | project {
105 | title
106 | slug
107 | }
108 | createdAt
109 | currency
110 | }
111 | }
112 | `
113 | export {
114 | SAVE_DONATION,
115 | USERS_DONATIONS,
116 | WALLET_DONATIONS,
117 | PROJECT_DONATIONS,
118 | SAVE_DONATION_TRANSACTION
119 | }
120 |
--------------------------------------------------------------------------------
/src/components/create-project-form/modals/DescriptionInstructionModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'gatsby'
3 | import { Button, Text } from 'theme-ui'
4 |
5 | export const DescriptionInstructionModal = ({ showModal, setShowModal }) => (
6 |
20 |
setShowModal(false)}
23 | aria-label='close'
24 | sx={{
25 | position: 'absolute',
26 | top: '32px',
27 | right: '32px',
28 | fontSize: '3',
29 | fontFamily: 'body',
30 | color: 'secondary',
31 | background: 'unset',
32 | cursor: 'pointer'
33 | }}
34 | >
35 | Close
36 |
37 |
40 | How to write a great project description
41 |
42 |
45 | Try to use this structure as a guide when writing the description:
46 |
47 |
48 | {['who', 'what', 'why', 'where', 'how', 'when'].map(item => {
49 | return (
50 |
51 |
58 | {`${item}?`}
59 |
60 |
61 | )
62 | })}
63 |
64 |
67 | See how others have done it:{' '}
68 |
69 | Browse examples.
70 |
71 |
72 |
75 | Read this blog post tutorial:
81 |
82 | "How to write a fundraising project description to increase donations"
83 |
84 |
85 |
86 |
68 |
71 |
73 | ) : user ? (
74 |
81 |
82 | No user found
83 |
84 |
85 | )}
86 |
87 | )
88 | }
89 |
90 | export default User
91 |
--------------------------------------------------------------------------------
/src/components/project/updatesTab.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import {
3 | GET_PROJECT_UPDATES,
4 | ADD_PROJECT_UPDATE
5 | } from '../../apollo/gql/projects'
6 | import { useMutation, useQuery } from '@apollo/client'
7 | import { ProjectContext } from '../../contextProvider/projectProvider'
8 | import LoadingModal from '../loadingModal'
9 | import Toast from '../toast'
10 | import Timeline from './timeline'
11 |
12 | const UpdatesTab = ({ showModal, setShowModal, project, isOwner }) => {
13 | const [addUpdateMutation] = useMutation(ADD_PROJECT_UPDATE)
14 | const [loading, setLoading] = useState(false)
15 | const { currentProjectView, setCurrentProjectView } = React.useContext(
16 | ProjectContext
17 | )
18 |
19 | const { data, error } = useQuery(GET_PROJECT_UPDATES, {
20 | variables: {
21 | projectId: parseFloat(project?.id),
22 | take: 100,
23 | skip: 0
24 | },
25 | fetchPolicy: 'network-only'
26 | })
27 |
28 | useEffect(() => {
29 | if (data) {
30 | setCurrentProjectView({
31 | ...currentProjectView,
32 | updates: data?.getProjectUpdates
33 | })
34 | }
35 | }, [data])
36 |
37 | const addUpdate = async ({ title, content }) => {
38 | try {
39 | if (!title || !content)
40 | return Toast({ content: 'Fields should not be empty', type: 'error' })
41 | // check if file is too large, avg 4Mb
42 | const contentSize = encodeURI(content).split(/%..|./).length - 1
43 | console.log({ contentSize })
44 | if (contentSize > 4000000) {
45 | Toast({
46 | content: `Content is too heavy, it shouldn't exceed 4Mb`,
47 | type: 'error'
48 | })
49 | return false
50 | }
51 | setLoading(true)
52 | const { data } = await addUpdateMutation({
53 | variables: {
54 | projectId: parseFloat(project?.id),
55 | title,
56 | content
57 | },
58 | refetchQueries: [
59 | {
60 | query: GET_PROJECT_UPDATES,
61 | variables: {
62 | projectId: parseFloat(project?.id),
63 | take: 100,
64 | skip: 0
65 | }
66 | }
67 | ]
68 | })
69 | console.log({ data })
70 | setLoading(false)
71 | return data
72 | } catch (error) {
73 | setLoading(false)
74 | console.error('addUpdate')
75 | console.log({ error })
76 | alert(JSON.stringify(error?.message))
77 | return false
78 | }
79 | }
80 |
81 | return (
82 | <>
83 | {loading &&
76 |
90 |
91 | )
92 | }
93 |
94 | export default AccountPage
95 |
--------------------------------------------------------------------------------
/src/components/tooltip.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Text } from 'theme-ui'
3 | import styled from '@emotion/styled'
4 | import TooltipImg from '../images/svg/general/decorators/tooltip.svg'
5 |
6 | const Tooltip = styled.div`
7 | margin: 0 0.5rem;
8 | position: relative;
9 |
10 | .tooltip-text {
11 | visibility: hidden;
12 | width: 180px;
13 | background-color: white;
14 | color: black;
15 | text-align: center;
16 | border-radius: 6px;
17 | padding: 1rem;
18 | margin: 0 0 0 5px;
19 |
20 | text-align: left;
21 |
22 | /* Position the tooltip */
23 | position: absolute;
24 | margin-top: 5px;
25 | z-index: 1;
26 | }
27 |
28 | .tooltip-arrow {
29 | visibility: hidden;
30 | width: 0;
31 | height: 0;
32 | border-style: solid;
33 | position: absolute;
34 | margin: 5px;
35 | border-color: transparent;
36 | z-index: 1;
37 | }
38 |
39 | &:hover {
40 | .tooltip-text {
41 | visibility: visible;
42 | }
43 | .tooltip-arrow {
44 | visibility: visible;
45 | }
46 | }
47 | @media (max-width: 600px) {
48 | .tooltip-text {
49 | margin: 10% 0 0 0;
50 | left: 10%;
51 | }
52 | }
53 |
54 | &.right .tooltip-text {
55 | top: -40px;
56 | margin-left: 10px;
57 | }
58 |
59 | &.left .tooltip-text {
60 | top: -40px;
61 | right: 32px;
62 | }
63 |
64 | &.top .tooltip-text {
65 | bottom: 34px;
66 | left: -81px;
67 | }
68 |
69 | &.bottom .tooltip-text {
70 | top: 25px;
71 | left: -81px;
72 | }
73 |
74 | &.top .tooltip-arrow {
75 | top: -14px;
76 | border-width: 5px 5px 0;
77 | border-top-color: #af9bd3;
78 | }
79 |
80 | &.right .tooltip-arrow {
81 | top: 0px;
82 | left: auto;
83 | margin-left: 23px;
84 | border-width: 5px 5px 5px 0;
85 | border-right-color: #af9bd3;
86 | }
87 |
88 | &.bottom .tooltip-arrow {
89 | top: 20px;
90 | border-width: 0 5px 5px;
91 | border-bottom-color: #af9bd3;
92 | }
93 |
94 | &.left .tooltip-arrow {
95 | top: 0px;
96 | right: 22px;
97 | border-width: 5px 0 5px 5px;
98 | border-left-color: #af9bd3;
99 | }
100 | `
101 |
102 | export default function ToolTip ({
103 | content,
104 | contentStyle,
105 | textStyle,
106 | isArrow,
107 | placement
108 | }) {
109 | return (
110 |
118 |
}
120 |
121 |
122 | {content}
123 |
124 |
125 |
126 | )
127 | }
128 |
--------------------------------------------------------------------------------
/src/images/icon-streamline-gas.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/components/signInMetamaskModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Flex, Text } from 'theme-ui'
3 | import Modal from 'react-modal'
4 |
5 | import decoratorClouds from '../images/decorator-clouds.svg'
6 | import metamaskLogo from '../images/logos/metamask-fox.svg'
7 |
8 | const customStyles = {
9 | overlay: {
10 | position: 'fixed',
11 | zIndex: 4,
12 | top: 0,
13 | left: 0,
14 | right: 0,
15 | bottom: 0,
16 | backgroundColor: 'rgba(0, 0, 0, 0.25)',
17 | backdropFilter: 'blur(2px)',
18 | '-webkit-backdrop-filter': 'blur(2px)'
19 | },
20 | content: {
21 | top: '50%',
22 | left: '50%',
23 | right: 'auto',
24 | bottom: 'auto',
25 | borderRadius: '12px',
26 | borderColor: 'transparent',
27 | marginRight: '-50%',
28 | transform: 'translate(-50%, -50%)'
29 | }
30 | }
31 |
32 | function LoginModal (props) {
33 | React.useEffect(() => {
34 | Modal.setAppElement('body')
35 | })
36 | return (
37 |
38 |
props.close()}
41 | style={customStyles}
42 | contentLabel='Sign In Metamask Modal'
43 | >
44 |
51 | {
65 | e.preventDefault()
66 | props.close()
67 | }}
68 | >
69 | Close
70 |
71 |
79 |
80 | Connecting to Metamask
81 |
82 |
83 | Please confirm sign in through your MetaMask popup window.
84 |
85 |
95 |
96 |
97 |
54 |
56 |
57 |
59 |
60 |
62 |
63 |
65 |
66 | )
67 | }
68 | return (
69 |
70 |
71 |
72 |
74 |
75 |
77 |
78 |
80 |
81 |
83 |
84 |
86 |
87 |
89 |
90 |
92 |
93 |
95 |
96 |
97 | )
98 | }
99 |
100 | export default SocialNetworks
101 |
--------------------------------------------------------------------------------
/src/components/create-project-form/inputs/ProjectAdminInput.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Label, Input, Flex, Text, Button } from 'theme-ui'
3 | import { animated } from 'react-spring'
4 |
5 | export const ProjectAdminInput = ({
6 | register,
7 | currentValue,
8 | animationStyle,
9 | goBack
10 | }) => {
11 | const [characterLength, setCharacterLength] = useState(
12 | currentValue ? currentValue.length : 0
13 | )
14 | return (
15 |
16 |
23 | What's the name of the organization or administrator of the project?
24 |
25 |
26 |
51 | {characterLength}/55
52 |
53 |
54 |
61 |
72 |
81 | NEXT
82 |
83 |
84 |
95 |
103 | Back
104 |
105 |
106 |
107 |
108 | )
109 | }
110 |
--------------------------------------------------------------------------------
/src/components/donate/inProgressModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'gatsby'
3 | import { Button, Flex, Text, Spinner } from 'theme-ui'
4 | import { getEtherscanPrefix } from '../../utils'
5 | import { useWallet } from '../../contextProvider/WalletProvider'
6 | import theme from '../../gatsby-plugin-theme-ui/index'
7 |
8 | const etherscanPrefix = getEtherscanPrefix()
9 | const InProgressModal = ({ showModal, setShowModal, txHash }) => {
10 | const { isLoggedIn } = useWallet()
11 | if (!showModal) return null
12 | return (
13 |
30 | {
33 | setShowModal(false)
34 | }}
35 | aria-label='close'
36 | sx={{
37 | position: 'absolute',
38 | top: '32px',
39 | right: '32px',
40 | fontSize: '3',
41 | fontFamily: 'body',
42 | color: 'secondary',
43 | background: 'unset',
44 | cursor: 'pointer'
45 | }}
46 | >
47 | Close
48 |
49 |
51 | Donation is still in progress...
52 |
53 |
62 | Transaction has been submitted and is waiting for confirmation.
63 |
71 |
72 | You can safely close this window and return to Homepage.{' '}
73 | {isLoggedIn &&
74 | `Your
75 | transaction will show in ${' '}`}
76 | {isLoggedIn && (
77 |
85 |
86 | (window.location.href = '/')}
97 | >
98 | GO TO HOMEPAGE
99 |
100 |
101 | )
102 | }
103 |
104 | export default InProgressModal
105 |
--------------------------------------------------------------------------------
/src/components/user/profileHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Avatar from '../avatar'
3 | import { Text, Box, Link, Flex } from 'theme-ui'
4 | import { getEtherscanPrefix } from '../../utils'
5 |
6 | export const ProfileHeader = props => {
7 | const { user, donations, projects } = props
8 | const etherscanPrefix = getEtherscanPrefix()
9 | const TitleBox = ({ title, content }) => {
10 | return (
11 |
20 |
28 | {title}
29 |
30 | {content}
31 |
32 | )
33 | }
34 |
35 | return (
36 |
44 |
54 |
60 | {user?.name}
61 |
73 | {user?.walletAddress}
74 |
75 |
76 |
93 | {user?.url}
94 |
95 |
96 |
97 |
98 |
104 |
107 |
108 | )
109 | }
110 |
--------------------------------------------------------------------------------
/src/images/decorator-circles.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/richTextInput.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import ReactQuill, { Quill } from 'react-quill'
3 |
4 | import * as Emoji from 'quill-emoji'
5 |
6 | import 'react-quill/dist/quill.snow.css'
7 | import 'quill-emoji/dist/quill-emoji.css'
8 | import QuillImageDropAndPaste from 'quill-image-drop-and-paste'
9 |
10 | window.Quill = Quill
11 |
12 | const ImageResize = require('quill-image-resize-module').default
13 |
14 | Quill.register('modules/emoji', Emoji)
15 | Quill.register('modules/ImageResize', ImageResize)
16 | Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste)
17 |
18 | const QuillVideo = Quill.import('formats/video')
19 | const BlockEmbed = Quill.import('blots/block/embed')
20 |
21 | const VIDEO_ATTRIBUTES = ['height', 'width']
22 |
23 | // provides a custom div wrapper around the default Video blot
24 | class Video extends BlockEmbed {
25 | static create(value) {
26 | const iframeNode = QuillVideo.create(value)
27 | const node = super.create()
28 | node.appendChild(iframeNode)
29 | return node
30 | }
31 |
32 | static formats(domNode) {
33 | const iframe = domNode.getElementsByTagName('iframe')[0]
34 | return VIDEO_ATTRIBUTES.reduce(function (formats, attribute) {
35 | if (iframe.hasAttribute(attribute)) {
36 | formats[attribute] = iframe.getAttribute(attribute)
37 | }
38 | return formats
39 | }, {})
40 | }
41 |
42 | static value(domNode) {
43 | return domNode.getElementsByTagName('iframe')[0].getAttribute('src')
44 | }
45 |
46 | format(name, value) {
47 | if (VIDEO_ATTRIBUTES.indexOf(name) > -1) {
48 | if (value) {
49 | this.domNode.setAttribute(name, value)
50 | } else {
51 | this.domNode.removeAttribute(name)
52 | }
53 | } else {
54 | super.format(name, value)
55 | }
56 | }
57 | }
58 |
59 | Video.blotName = 'video'
60 | Video.className = 'ql-video-wrapper'
61 | Video.tagName = 'DIV'
62 |
63 | Quill.register(Video, true)
64 |
65 | const modules = {
66 | toolbar: [
67 | [{ header: '1' }, { header: '2' }],
68 | [{ size: [] }],
69 | ['bold', 'italic', 'underline', 'strike', 'blockquote'],
70 | [
71 | { list: 'ordered' },
72 | { list: 'bullet' },
73 | { indent: '-1' },
74 | { indent: '+1' }
75 | ],
76 | ['link', 'image', 'video'],
77 | // ['emoji'],
78 | ['clean']
79 | ],
80 | 'emoji-toolbar': true,
81 | 'emoji-textarea': false,
82 | 'emoji-shortname': true,
83 | clipboard: {
84 | // toggle to add extra line breaks when pasting HTML:
85 | matchVisual: false
86 | },
87 | imageDropAndPaste: {},
88 | ImageResize: {}
89 | }
90 |
91 | const formats = [
92 | 'header',
93 | 'font',
94 | 'size',
95 | 'bold',
96 | 'italic',
97 | 'underline',
98 | 'strike',
99 | 'blockquote',
100 | 'list',
101 | 'bullet',
102 | 'indent',
103 | 'link',
104 | 'image',
105 | 'video'
106 | ]
107 |
108 | function TextRichWithQuill(props) {
109 | // console.log({ value })
110 | return (
111 |
14 |
21 | Please select a category
22 |
23 |
32 | You can select multiple categories
33 |
34 |
41 | {categoryList?.map(category => {
42 | return (
43 |
47 | {category.value}
61 |
62 | )
63 | })}
64 |
65 |
72 |
82 |
91 | NEXT
92 |
93 |
94 |
106 |
114 | Back
115 |
116 |
117 |
118 |
119 | )
120 | }
121 |
--------------------------------------------------------------------------------
/src/entities/user.ts:
--------------------------------------------------------------------------------
1 |
2 | import { ProjectNameInput } from '../components/create-project-form/inputs/ProjectNameInput';
3 | import { isAddressENS } from '../services/wallet';
4 | import { Location } from '@reach/router';
5 | import {
6 | getLocalStorageUserLabel,
7 | getLocalStorageTokenLabel
8 | } from '../services/auth'
9 |
10 | const gatsbyUser = getLocalStorageUserLabel()
11 | const tokenLabel = getLocalStorageTokenLabel()
12 |
13 | export default class User {
14 | id: number
15 | token: string
16 | activeWalletIndex: number
17 | walletAddresses: string[]
18 | activeWallet: string
19 | email?: string
20 | firstName?: string
21 | lastName?: string
22 | name?: string
23 | password?: string
24 | avatar?: string
25 | url?: string
26 | location?: string
27 | loginType: string
28 | confirmed: boolean
29 | walletType: string
30 |
31 | constructor(walletType, initUser) {
32 | this.walletType = walletType
33 | this.walletAddresses = []
34 |
35 | if(initUser) {
36 | this.parseInitUser(initUser)
37 | }
38 | }
39 |
40 | parseInitUser(initUser) {
41 | if(this.walletType === 'torus') {
42 | this.parseTorusUser(initUser)
43 | } else {
44 | this.walletType = initUser.walletType
45 | this.walletAddresses = initUser.walletAddresses
46 | this.id = initUser.id
47 | this.token = initUser.token
48 | this.parseDbUser(initUser)
49 | }
50 | }
51 |
52 | /**
53 | * From the database
54 | * @param initUser
55 | */
56 | parseDbUser(dbUser) {
57 | this.avatar = dbUser.avatar
58 | this.email = dbUser.email
59 | this.id = dbUser.id
60 | this.firstName = dbUser.firstName
61 | this.lastName = dbUser.lastName
62 | this.location = dbUser.location
63 | this.name = dbUser.name
64 | this.url = dbUser.url
65 | }
66 |
67 | setUserId(userId) {
68 | this.id = userId
69 | }
70 |
71 | setToken(token) {
72 | this.token = token
73 |
74 | localStorage.setItem(tokenLabel, token)
75 | }
76 |
77 | addWalletAddress(address, activeWallet) {
78 | this.walletAddresses.push(address)
79 |
80 | if(activeWallet) {
81 | this.activeWalletIndex = this.walletAddresses.indexOf(address)
82 | }
83 |
84 |
85 | }
86 |
87 | getAuthObject() {
88 | return {
89 | addresses: this.walletAddresses
90 | }
91 | }
92 |
93 | getName() {
94 | function truncAddress (address) {
95 | return `${address.substring(0, 5)}...${address.substring(
96 | address.length - 4,
97 | address.length
98 | )}`
99 | }
100 |
101 | return this.name ? this.name.toUpperCase() : truncAddress(this.getWalletAddress())
102 | // return /(.+)@(.+){2,}\.(.+){2,}/.test(this.name)
103 | // ? this.name?.toUpperCase()
104 | // : this.name
105 | }
106 | getWalletAddress() {
107 | return this.walletAddresses && this.walletAddresses.length > 0 ? this.walletAddresses[0] : ''
108 | }
109 | // organisations: Organisation[]
110 |
111 | parseTorusUser(torusUser) {
112 | if(this.walletType !== 'torus') throw Error ('Only valid for Torus wallets')
113 | this.avatar = torusUser.profileImage || torusUser.avatar
114 | this.name = torusUser.name
115 | this.email = torusUser.email
116 | this.id = torusUser.id
117 | // this.addWalletAddress(walletAddress, true)
118 | torusUser.walletAddresses.forEach(address => {
119 | this.addWalletAddress(address, true)
120 | })
121 | }
122 | }
--------------------------------------------------------------------------------
56 | 
94 |