feat: Create Community Pools

packages/app/src/App.tsx

@@ -23,6 +23,8 @@ import { Colors } from './utils/colors';
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
 import { useCreateSubgraphApolloClient, useCreateMongoDbApolloClient } from './hooks/apollo';
 import { MongoDbApolloProvider } from './components/providers/MongoDbApolloProvider';
+import CreateGoodCollectivePage from './pages/CreateGoodCollectivePage';
+import { CreatePoolProvider } from './hooks/useCreatePool';
 
 const queryClient = new QueryClient();
 const projectId = 'b1b7664bfba2f6ad5538aa7fa9a2404f';
@@ -67,6 +69,14 @@ function App(): JSX.Element {
                   <Routing.Routes>
                     <Routing.Route path="/" element={<HomePage />} />
                     <Routing.Route path="/about" element={<AboutPage />} />
+                    <Routing.Route
+                      path="/create"
+                      element={
+                        <CreatePoolProvider>
+                          <CreateGoodCollectivePage />
+                        </CreatePoolProvider>
+                      }
+                    />
                     <Routing.Route path="/collective/:id" element={<ViewCollectivePage />} />
                     <Routing.Route path="/collective/:id/stewards" element={<ViewStewardsPage />} />
                     <Routing.Route path="/collective/:id/donors" element={<ViewDonorsPage />} />

packages/app/src/assets/index.ts

@@ -54,3 +54,17 @@ export { default as Woman } from './Woman.svg';
 export { default as chevronDown } from './chevron-down.svg';
 export { default as chevronRight } from './chevron-right.svg';
 export { default as empty } from './empty.svg';
+export { default as CommunityFundsIcon } from './CommunityFundsIcon.png';
+export { default as ResultsBasedIcon } from './ResultsBasedIcon.png';
+export { default as SegmentedAidIcon } from './SegmentedAidIcon.png';
+export { default as CreateCollectiveLogo } from './CreateCollectiveLogo.png';
+export { default as UploadIcon } from './UploadIcon.png';
+export { default as RocketLaunchIcon } from './RocketLaunchIcon.svg';
+export { default as EditIcon } from './EditIcon.svg';
+export { default as Mask } from './Mask.png';
+export { default as SuccessIcon } from './SuccessIcon.png';
+export { default as SuccessGuyIcon } from './SuccessGuyIcon.svg';
+export { default as SettingsIcon } from './SettingsIcon.svg';
+export { default as DefaultIcon } from './DefaultIcon.svg';
+export { default as DiscordIcon } from './DiscordIcon.svg';
+export { default as WebsiteIcon } from './WebsiteIcon.svg';

packages/app/src/components/ActionButton.tsx

@@ -1,13 +1,15 @@
 import { Box, Link, Pressable, Text, useBreakpointValue } from 'native-base';
+import { ReactNode } from 'react';
 
 import { InterSemiBold } from '../utils/webFonts';
 
 type ActionButtonProps = {
   href?: string;
-  text: string;
+  text: string | ReactNode;
   bg: string;
   textColor: string;
   onPress?: any;
+  width?: string;
 };
 
 export const buttonStyles = {
@@ -38,7 +40,7 @@ export const buttonStyles = {
   },
 };
 
-const ActionButton = ({ href, text, bg, textColor, onPress }: ActionButtonProps) => {
+const ActionButton = ({ href, text, bg, textColor, onPress, width = '100%' }: ActionButtonProps) => {
   const responsiveStyles = useBreakpointValue({
     base: {
       button: {
@@ -53,7 +55,7 @@ const ActionButton = ({ href, text, bg, textColor, onPress }: ActionButtonProps)
       },
       buttonContainer: {
         ...buttonStyles.buttonContainer,
-        width: '100%',
+        width,
       },
     },
     lg: buttonStyles,

packages/app/src/components/FileUpload.tsx

@@ -0,0 +1,43 @@
+import { useRef, useState } from 'react';
+import { Box, Center, Pressable, Text } from 'native-base';
+
+import { UploadIcon } from '../assets';
+
+const FileUpload = ({ style, onUpload }: { style: Object | {}; onUpload: Function }) => {
+  const uploader = useRef(null);
+  const [fileName, setFileName] = useState<string>('');
+
+  return (
+    <Pressable onPress={() => (uploader.current as unknown as HTMLInputElement)?.click()}>
+      <Box
+        style={style as {}}
+        borderWidth={2}
+        borderRadius={8}
+        borderStyle="dotted"
+        borderColor="gray.300"
+        backgroundColor="white"
+        mt={2}
+        padding={6}>
+        <Center>
+          <img src={UploadIcon} alt="" />
+          {!fileName && <Text>Click to upload</Text>}
+          <Text overflow="hidden">{fileName}</Text>
+        </Center>
+      </Box>
+      <input
+        style={{ display: 'none' }}
+        ref={uploader}
+        type="file"
+        name="myImage"
+        accept="image/svg+xml,image/png,image/jpeg,image/gif"
+        onChange={(event) => {
+          if (!event.target.files) return;
+          setFileName(event.target.files[0].name);
+          onUpload(event.target.files[0]);
+        }}
+      />
+    </Pressable>
+  );
+};
+
+export default FileUpload;

packages/app/src/components/WarningBox.tsx

@@ -0,0 +1,45 @@
+import { Text, Image, HStack, Link, VStack } from 'native-base';
+import { InfoIconOrange } from '../assets';
+
+const WarningBox = ({ content, explanationProps = {} }: any) => {
+  const Explanation = content.Explanation;
+
+  return (
+    <HStack space={2} backgroundColor="goodOrange.200" maxWidth="343" paddingY={3} paddingX={2}>
+      <Image source={{ uri: InfoIconOrange }} style={{ width: 16, height: 16 }} />
+      <VStack space={4} maxWidth="100%">
+        <VStack space={1}>
+          <Text variant="bold" color="goodOrange.500">
+            {content.title}
+          </Text>
+
+          {Explanation ? <Explanation {...explanationProps} /> : null}
+        </VStack>
+        {content.suggestion ? (
+          <VStack space={2}>
+            <Text variant="bold" color="goodOrange.500">
+              You may:
+            </Text>
+            <VStack space={0}>
+              <Text color="goodOrange.500" flexDir="column" display="flex">
+                {content.suggestion.map((suggestion: string, index: number) => (
+                  <Text key={index}>
+                    {index + 1}. {suggestion}
+                  </Text>
+                ))}
+                {content.href && (
+                  <Link color="goodOrange.500" href={content.href} isExternal>
+                    <Text>{content.suggestion.length + 1}. </Text>
+                    <Text textDecorationLine="underline">Purchase and use GoodDollar</Text>
+                  </Link>
+                )}
+              </Text>
+            </VStack>
+          </VStack>
+        ) : null}
+      </VStack>
+    </HStack>
+  );
+};
+
+export default WarningBox;