Merge pull request #305 from Gateway-DAO/develop

Release - Jan/22

.gitignore

@@ -38,7 +38,9 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-
 .env
+
 # Sentry
 .sentryclirc
+
+prisma/schema.prisma

.graphqlrc.ts

@@ -1,7 +1,16 @@
 import { IGraphQLProjects, IGraphQLConfig } from 'graphql-config';
-
+import * as prismaEnumsBase from "@prisma/client";
 require('dotenv').config();
 
+const prismaEnums = Object.keys(prismaEnumsBase)
+// Remove non-objects and uppercased keys
+.filter(key => typeof prismaEnumsBase[key] === 'object' && key[0] !== key[0].toUpperCase())
+// Transform object to union type
+.reduce((acc,curr) => ({
+  ...acc,
+  [curr]: Object.keys(prismaEnumsBase[curr]).map(el => `"${el}"`).join(" | "),
+}), {} as Record<keyof typeof prismaEnumsBase, string>)
+
 const generateConfig = {
   plugins: [
     'typescript',
@@ -12,6 +21,11 @@ const generateConfig = {
   config: {
     scalars: {
       _text: 'string',
+      // TODO: Fix all type errors on build when enabling next line
+      // ...prismaEnums,
+      manual_task_event_type: prismaEnums.manual_task_event_type,
+      task_type: prismaEnums.task_type,
+      key_status: prismaEnums.key_status
     },
     defaultMapper: 'Partial<{T}>',
     avoidOptionals: {
@@ -30,12 +44,12 @@ const config: IGraphQLConfig = {
   extensions: {
     codegen: {
       generates: {
-        './apps/website/services-cyberconnect/types.generated.ts': {
+        './apps/website/services/cyberconnect/types.ts': {
           ...generateConfig,
           schema: process.env.CYBERCONNECT_ENDPOINT as string,
-          documents: ['apps/website/services-cyberconnect/**/*.gql'],
+          documents: ['apps/website/services/cyberconnect/**/*.gql'],
         },
-        './apps/website/services/graphql/types.generated.ts': {
+        './apps/website/services/hasura/types.ts': {
           ...generateConfig,
           schema: {
             [`${process.env.HASURA_ENDPOINT}`]: {
@@ -44,7 +58,7 @@ const config: IGraphQLConfig = {
               },
             },
           },
-          documents: ['apps/website/services/**/*.gql'],
+          documents: ['apps/website/services/hasura/**/*.gql'],
         }
       },
     },

apps/website/.gitignore

@@ -1,4 +1,4 @@
-**/*.generated.*
+services/**/types.ts
 
 # Sentry
 .sentryclirc

apps/website/components/atoms/avatar-file.tsx

@@ -3,7 +3,7 @@ import { PartialDeep } from 'type-fest';
 import { Avatar, AvatarProps } from '@mui/material';
 
 import { useFile } from '../../hooks/use-file';
-import { Files } from '../../services/graphql/types.generated';
+import { Files } from '../../services/hasura/types';
 
 type AvatarFileProps<
   Component extends React.ElementType = 'div',

apps/website/components/atoms/follow-button-user/follow-button-user.tsx

@@ -3,7 +3,7 @@ import useTranslation from 'next-translate/useTranslation';
 import { Button } from '@mui/material';
 
 import { useAuth } from '../../../providers/auth';
-import { BiConnState } from '../../../services-cyberconnect/types.generated';
+import { BiConnState } from '../../../services/cyberconnect/types';
 import { FollowUserButton } from './follow-user';
 import { FriendReceivedPendingButton } from './pending-received';
 import { FriendSentPendingButton } from './pending-sent';

apps/website/components/atoms/follow-button-user/utils.tsx

@@ -1,6 +1,6 @@
 import { useAuth } from '../../../providers/auth';
 import { useCyberConnect } from '../../../providers/cyberconnect';
-import { BiConnState } from '../../../services-cyberconnect/types.generated';
+import { BiConnState } from '../../../services/cyberconnect/types';
 
 export const useFollowStatus = (
   wallet: string

apps/website/components/atoms/mint-button.tsx

@@ -7,7 +7,7 @@ import { Button, Stack } from '@mui/material';
 
 import { TokenFilled } from '../../components/molecules/mint-card/assets/token-filled';
 import { useBiconomy } from '../../providers/biconomy';
-import { Credentials } from '../../services/graphql/types.generated';
+import { Credentials } from '../../services/hasura/types';
 import { LoadingButton } from './loading-button';
 
 export type Props = {
@@ -39,7 +39,9 @@ const MintedButton = (props) => (
 );
 
 export const MintCredentialButton = ({ credential }: Props) => {
-  const [status, setStatus] = useState<'to_mint' | 'minted'>(credential.status);
+  const [status, setStatus] = useState<'to_mint' | 'minted'>(
+    credential.status as 'to_mint' | 'minted'
+  );
   const [transactionUrl, setTransactionUrl] = useState<string | null>(
     credential.transaction_url
   );

apps/website/components/atoms/task-icon/index.ts

@@ -1,2 +1 @@
 export * from './task-icon';
-export * from './types';

apps/website/components/atoms/task-icon/task-icon.tsx

@@ -1,57 +1,65 @@
-import { PhotoCameraBack } from '@mui/icons-material';
+import { useMemo } from 'react';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import InsertLinkIcon from '@mui/icons-material/InsertLink';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import NumbersIcon from '@mui/icons-material/Numbers';
+import PhotoCameraBackIcon from '@mui/icons-material/PhotoCameraBack';
 import QuizIcon from '@mui/icons-material/Quiz';
-import StarIcon from '@mui/icons-material/Star';
 import Twitter from '@mui/icons-material/Twitter';
-import Box from '@mui/material/Box';
+import KeyIcon from '@mui/icons-material/Key';
 import { SvgIcon, SvgIconProps } from '@mui/material';
-import { useMemo } from 'react';
 import { SxProps } from '@mui/material';
-import { TaskType } from './types';
+import Box from '@mui/material/Box';
 
-export function TaskIcon({ type, sx }: { type: TaskType; sx?: SxProps }) {
-  const iconBgColor =
-    {
-      self_verify: '#9A53FF',
-      quiz: '#9A53FF',
-      token_hold: '#9A53FF',
-      nft_hold: '#9A53FF',
-      meeting_code: '#9A53FF',
-      twitter_follow: '#0094FF',
-      twitter_retweet: '#0094FF',
-      twitter_tweet: '#0094FF',
-      github_contribute: '#4A4F57',
-      github_prs: '#4A4F57',
-      snapshot: '#F3B04E',
-    } ?? '#9A53FF';
+import { TaskType } from '../../../types/tasks';
 
-  const iconComponent = useMemo(() => {
-    const types = {
-      self_verify: InsertLinkIcon,
-      quiz: QuizIcon,
-      token_hold: MonetizationOnIcon,
-      nft_hold: PhotoCameraBack,
-      meeting_code: NumbersIcon,
-      twitter_follow: Twitter,
-      twitter_retweet: Twitter,
-      twitter_tweet: Twitter,
-      github_contribute: GitHubIcon,
-      github_prs: GitHubIcon,
-      snapshot: ElectricBoltIcon,
-    };
+const iconBgColor: Record<TaskType, string> = {
+  self_verify: '#9A53FF',
+  quiz: '#9A53FF',
+  token_hold: '#9A53FF',
+  nft_hold: '#9A53FF',
+  meeting_code: '#9A53FF',
+  twitter_follow: '#0094FF',
+  twitter_retweet: '#0094FF',
+  twitter_tweet: '#0094FF',
+  github_contribute: '#4A4F57',
+  github_prs: '#4A4F57',
+  snapshot: '#F3B04E',
+  manual: '#9A53FF',
+  recaptcha: '#9A53FF',
+  contract_interaction: null,
+};
+const typeIcons: Record<TaskType, SvgIconComponent> = {
+  self_verify: InsertLinkIcon,
+  quiz: QuizIcon,
+  token_hold: MonetizationOnIcon,
+  nft_hold: PhotoCameraBackIcon,
+  meeting_code: NumbersIcon,
+  twitter_follow: Twitter,
+  twitter_retweet: Twitter,
+  twitter_tweet: Twitter,
+  github_contribute: GitHubIcon,
+  github_prs: GitHubIcon,
+  snapshot: ElectricBoltIcon,
+  manual: CheckCircleIcon,
+  recaptcha: KeyIcon,
+  contract_interaction: null,
+};
 
-    return types[type] || null;
+export function TaskIcon({ type, sx }: { type: TaskType; sx?: SxProps }) {
+  const iconComponent = useMemo(() => {
+    return typeIcons[type] || null;
   }, [type]);
 
   return (
     <Box
       display="flex"
       component="span"
-      bgcolor={iconBgColor[type]}
+      bgcolor={iconBgColor[type] ?? '#9A53FF'}
       padding={1.5}
       borderRadius={1}
       color={'#ffffff'}

apps/website/components/molecules/add-task/add-task-button.tsx

@@ -1,6 +1,8 @@
 import { Stack, Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { TaskIcon, TaskType } from '../../atoms/task-icon';
+
+import { TaskType } from '../../../types/tasks';
+import { TaskIcon } from '../../atoms/task-icon';
 
 type AddTaskButtonProps = {
   type: TaskType;
@@ -30,7 +32,7 @@ const AddTaskButton = ({
         borderColor: 'rgba(255, 255, 255, 0.1)',
         borderRadius: '10px',
         alignItems: 'center',
-
+        height: '100%',
         flexDirection: 'row',
         columnGap: '10px',
         padding: '20px',

apps/website/components/molecules/add-task/add-task-card.tsx

@@ -1,85 +1,82 @@
-import { Grid, IconButton, Paper, Stack, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
+import { Grid, IconButton, Paper, Stack, Typography } from '@mui/material';
 import { Box } from '@mui/material';
-import AddTaskButton from './add-task-button';
 
-type taskTypes =
-  | 'self_verify'
-  | 'quiz'
-  | 'token_hold'
-  | 'nft_hold'
-  | 'meeting_code'
-  | 'twitter_follow'
-  | 'twitter_retweet'
-  | 'twitter_tweet'
-  | 'github_contribute'
-  | 'github_prs'
-  | 'snapshot';
+import { TaskType } from '../../../types/tasks';
+import AddTaskButton from './add-task-button';
 
 type taskStructure = {
-  type: taskTypes;
+  type: TaskType;
   title: string;
   description: string;
 };
 
-const AddTaskCard = ({ numberOfTasks, addTask }) => {
+const AddTaskCard = ({ tasks, addTask }) => {
+  // Rules
+  const hasManualTask = !!tasks?.some((task) => task.task_type === 'manual');
+
   const Tasks: taskStructure[] = [
     {
-      type: 'self_verify',
+      type: 'self_verify' as TaskType,
       title: 'Open Links',
       description: 'Ask users to access a link address',
     },
     {
-      type: 'quiz',
+      type: 'quiz' as TaskType,
       title: 'Take Quiz',
       description: 'Ask questions with multiple or single answer choices',
     },
     {
-      type: 'token_hold',
+      type: 'token_hold' as TaskType,
       title: 'Verify Token',
       description: 'Check if the users hold a token',
     },
     {
-      type: 'nft_hold',
+      type: 'manual' as TaskType,
+      title: 'Manual Submission',
+      description: 'Submit links as proof of work',
+    },
+    {
+      type: 'nft_hold' as TaskType,
       title: 'Verify NFT',
       description: 'Check if the users hold a token',
     },
     {
-      type: 'meeting_code',
+      type: 'meeting_code' as TaskType,
       title: 'Verify Code',
       description: 'Ask users to put a code',
     },
     {
-      type: 'twitter_follow',
+      type: 'twitter_follow' as TaskType,
       title: 'Follow Profile',
       description: 'Ask users to follow a profile on Twitter',
     },
     {
-      type: 'twitter_retweet',
+      type: 'twitter_retweet' as TaskType,
       title: 'Retweet Post',
       description: 'Ask users to retweet a post on Twitter',
     },
     {
-      type: 'twitter_tweet',
+      type: 'twitter_tweet' as TaskType,
       title: 'Post Tweet',
       description: 'Ask users to post a tweet on Twitter',
     },
     {
-      type: 'github_contribute',
+      type: 'github_contribute' as TaskType,
       title: 'Contribute to repository',
       description: 'Check if users contribute to the repository',
     },
     {
-      type: 'github_prs',
+      type: 'github_prs' as TaskType,
       title: 'Verify Pull Requests',
       description: 'Check the number of pull requests',
     },
     {
-      type: 'snapshot',
+      type: 'snapshot' as TaskType,
       title: 'Verify Proposal',
       description: 'Check if the user created or voted on a proposal',
     },
-  ];
+  ].filter((task) => !hasManualTask || task.type !== 'manual');
   return (
     <Stack
       sx={{
@@ -122,8 +119,8 @@ const AddTaskCard = ({ numberOfTasks, addTask }) => {
         columns={{ xs: 4, sm: 8, md: 8 }}
       >
         {Tasks.map((task, index) => (
-          <Grid item xs={2} sm={4} md={4}>
-            <Paper>
+          <Grid item xs={2} sm={4} md={4} key={task.type}>
+            <Paper sx={{ height: '100%' }}>
               <AddTaskButton
                 type={task.type}
                 title={task.title}