Merge pull request #1071 from geyserfund/staging

PRODUCTION PUSH 🏗️  : Feature OTP, Fixes

CHANGELOG.md

@@ -1,3 +1,34 @@
+## [0.4.0](https://github.com/geyserfund/geyser-app/compare/v0.3.1...v0.4.0) (2023-07-25)
+
+
+### Features
+
+* add OTP after login and before project creation ([8854cea](https://github.com/geyserfund/geyser-app/commit/8854ceabb676708f422cdebe267c04d74c8c0bab))
+* login with email ([2b540c9](https://github.com/geyserfund/geyser-app/commit/2b540c9269d6ca4a216e910b9997ba287a149e7e))
+* login with email with OTP ([f9251ca](https://github.com/geyserfund/geyser-app/commit/f9251ca84a5b1b20ad2be034543479a31121b402))
+* use OTP to update wallet ([80d5f6c](https://github.com/geyserfund/geyser-app/commit/80d5f6cea05dc7f942954d15dd2304611f88b994))
+
+
+### Bug Fixes
+
+* add dividers to landing page default view ([d0415ba](https://github.com/geyserfund/geyser-app/commit/d0415baa0e6351a20af7a1304d3397d4074fb09c))
+* allow users to edit email if unverified ([115a1cd](https://github.com/geyserfund/geyser-app/commit/115a1cd2e60ebfb43840dcd0baad0418d960ca35))
+* chore cleanup ([01e92d9](https://github.com/geyserfund/geyser-app/commit/01e92d919175dedef44c576c674591febdc0e2fb))
+* layout so that the top sticks ([2373216](https://github.com/geyserfund/geyser-app/commit/2373216cf6e76dd53dfc38dc937849b3e7050d7a))
+* make fixes to OTP popup, resolves GEY-2991 ([41e503f](https://github.com/geyserfund/geyser-app/commit/41e503ff35e85edbdf18b8ab63aa34a5c299aa7e))
+* make sure the button is not clickable when authToken get failed ([92715bd](https://github.com/geyserfund/geyser-app/commit/92715bd4bafe13f7108f4876565c471e6ca898d4))
+* minor update in grant page project lists ([9bff44f](https://github.com/geyserfund/geyser-app/commit/9bff44f0c3a018a8f5a806a4bea4bdabb8a02c95))
+* remove Email button from connectedAccounts in profile, resolves GEY-2676 ([cf76cd0](https://github.com/geyserfund/geyser-app/commit/cf76cd05c6cf8f76eabf6ab7e15eaaaed73ce573))
+* remove login with email for now ([02eb57f](https://github.com/geyserfund/geyser-app/commit/02eb57f664ffcb19ff8cf9f3a259ed6affe7a59b))
+* remove worth of votes in mobile, resolves GEY-3016 ([d8af2ff](https://github.com/geyserfund/geyser-app/commit/d8af2ffca1f2805a3e9b27cac75c24266f346416))
+* skelton width, resolves GEY-2878 ([5c21fe5](https://github.com/geyserfund/geyser-app/commit/5c21fe5aff3864ad3e2c95cabc0b12cf1fc3cdb6))
+* update contribution view to not have lines in between ([60c1edc](https://github.com/geyserfund/geyser-app/commit/60c1edc79f5e92f9f2f40132948f03bf918d2811))
+* update grants page and project view ([a8ea147](https://github.com/geyserfund/geyser-app/commit/a8ea147f84665ea87c0427a75bc090334c70ec22))
+* update image to be more crispy ([ed33ed9](https://github.com/geyserfund/geyser-app/commit/ed33ed9b43d759d34432613150478f61b95af8cb))
+* update landing project pages ([cde8ea1](https://github.com/geyserfund/geyser-app/commit/cde8ea1f6ebc51a160bb8318069f8b6f4bcbb0cf))
+* update layout for profile pages ([d90c933](https://github.com/geyserfund/geyser-app/commit/d90c933e2639960b76d012b3f25a6a9a56344279))
+* view project button, resolves GEY-3015 ([71bf04f](https://github.com/geyserfund/geyser-app/commit/71bf04f8b08305ec18b425b82bf7537ae4fea7b9))
+
 ## [0.3.1](https://github.com/geyserfund/geyser-app/compare/v0.3.0...v0.3.1) (2023-07-20)
 
 

cypress/utils/auth.ts

@@ -39,7 +39,7 @@ export const loginWithNostr = () => {
               projects: [],
               projectFollows: [],
               badges: [],
-              isEmailVerified: false,
+              isEmailVerified: true,
             },
           },
         },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geyser-app",
   "private": true,
-  "version": "0.3.1",
+  "version": "0.4.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/App.tsx

@@ -7,6 +7,7 @@ import { client } from './config'
 import { Head } from './config/Head'
 import { AuthProvider, ChakraThemeProvider, NavProvider } from './context'
 import { BtcProvider } from './context/btc'
+import { DefaultEmailVerify } from './pages/otp'
 
 export const App = () => (
   <ChakraProvider>
@@ -18,6 +19,7 @@ export const App = () => (
               <BtcProvider>
                 <Head />
                 <AppLayout />
+                <DefaultEmailVerify />
               </BtcProvider>
             </NavProvider>
           </AuthProvider>

src/AppLayout.tsx

@@ -3,8 +3,7 @@ import { Fade } from '@chakra-ui/react'
 
 import { LandingNavBar, TopNavBar } from './components/nav'
 import { Router } from './config'
-import { dimensions } from './constants'
-import { ID } from './constants/components'
+import { dimensions, ID } from './constants'
 import { useAuthContext } from './context'
 import { LoadingPage } from './pages/loading'
 import { useMobileMode } from './utils'
@@ -27,7 +26,7 @@ export const AppLayout = () => {
           maxHeight="100%"
           flex="1"
           paddingTop={`${dimensions.topNavBar.desktop.height}px`}
-          backgroundColor="neutral.50"
+          backgroundColor={{ base: 'neutral.0', lg: 'neutral.50' }}
           overflowY={isMobile ? 'initial' : 'auto'}
         >
           <Router />

src/components/layouts/CardLayout.tsx

@@ -8,13 +8,17 @@ export interface CardLayoutProps
   extends StackProps,
     Partial<Pick<LinkProps, 'to'>> {
   noborder?: boolean
+  noMobileBorder?: boolean
   mobileDense?: boolean
   hover?: boolean
   click?: boolean
 }
 
 export const CardLayout = forwardRef<HTMLDivElement, CardLayoutProps>(
-  ({ mobileDense, children, noborder, click, hover, ...rest }, ref) => {
+  (
+    { noMobileBorder, mobileDense, children, noborder, click, hover, ...rest },
+    ref,
+  ) => {
     const isMobile = useMobileMode()
     const props = {
       ref,
@@ -26,7 +30,10 @@ export const CardLayout = forwardRef<HTMLDivElement, CardLayoutProps>(
       transition: 'border-color 0.5s',
       boxShadow: 'none',
       as: rest.to ? Link : undefined,
-      borderColor: noborder ? 'transparent' : 'neutral.200',
+      borderColor:
+        noborder || (isMobile && noMobileBorder)
+          ? 'transparent'
+          : 'neutral.200',
       _hover: hover ? { cursor: 'pointer', borderColor: 'neutral.400' } : {},
       _active: click ? { borderColor: 'primary.400' } : {},
       _focus: click ? { borderColor: 'primary.400' } : {},

src/components/layouts/CardsStackLayout.tsx

@@ -13,7 +13,7 @@ export const CardsStackLayout = ({ children, ...props }: Props) => {
           <StackDivider borderWidth="1px" color="neutral.200" />
         ) : undefined
       }
-      p={{ base: '0 0 75px 0', lg: '0 40px 70px 40px' }}
+      p={{ base: '0 0 60px 0', lg: '0 40px 70px 40px' }}
       spacing={{ base: 0, lg: 3 }}
       mt={{ base: 0, lg: 5 }}
       maxWidth="1000px"

src/components/layouts/Modal.tsx

@@ -11,19 +11,26 @@ import {
 } from '@chakra-ui/react'
 import { ReactNode } from 'react'
 
-interface Props extends ModalProps {
+export interface CustomModalProps extends ModalProps {
   title?: ReactNode
   contentProps?: ModalContentProps
+  noClose?: boolean
 }
 
-export const Modal = ({ children, title, contentProps, ...props }: Props) => {
+export const Modal = ({
+  children,
+  title,
+  contentProps,
+  noClose,
+  ...props
+}: CustomModalProps) => {
   return (
     <ChakraModal isCentered size="sm" {...props}>
       <ModalOverlay />
       <ModalContent bg="transparent" boxShadow={0} {...contentProps}>
         <Box borderRadius="8px" bg="neutral.0" pb={3}>
           {title && <ModalHeader pb={2}>{title}</ModalHeader>}
-          <ModalCloseButton />
+          {!noClose && <ModalCloseButton />}
           <ModalBody>{children}</ModalBody>
         </Box>
       </ModalContent>

src/components/molecules/AuthModal.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router'
 
 import { useAuthContext } from '../../context'
+// import { ConnectWithEmail } from '../../pages/auth/ConnectWithEmail'
 import { ConnectWithLightning } from '../../pages/auth/ConnectWithLightning'
 import { ConnectWithNostr } from '../../pages/auth/ConnectWithNostr'
 import { ConnectWithTwitter } from '../../pages/auth/ConnectWithTwitter'
@@ -53,6 +54,7 @@ const ConnectAccounts = ({
           <ConnectWithNostr onClose={onClose} />
         )}
         {showLightning && <ConnectWithLightning onClose={onClose} />}
+        {/* <ConnectWithEmail onClose={onClose} /> */}
       </Stack>
       <Caption paddingTop="5px">
         {t(

src/components/molecules/TabComponent.tsx

@@ -10,6 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 
 import { dimensions, ID } from '../../constants'
+import { MobileDivider } from '../../pages/grants/components'
 import { useMobileMode } from '../../utils'
 import { StickToTop } from '../layouts'
 
@@ -38,13 +39,14 @@ export const TabComponent = ({ tabs }: TabComponentProps) => {
     >
       <StickToTop
         id={ID.profile.tabList}
+        wrapperId={ID.profile.tabs}
         width="100%"
         offset={dimensions.topNavBar.desktop.height}
-        backgroundColor="neutral.50"
+        backgroundColor={isMobile ? 'neutral.0' : 'neutral.50'}
         disable={!isMobile}
-        _onStick={{ width: `calc(100% - 20px)` }}
       >
-        <TabList w="100%" paddingY="10px">
+        <MobileDivider mb={2} />
+        <TabList w="100%" paddingY="10px" px={'10px'}>
           {tabs.map(({ title, sub }) => {
             return (
               <Tab key={title} {...tabButtonStyles}>
@@ -64,6 +66,7 @@ export const TabComponent = ({ tabs }: TabComponentProps) => {
             )
           })}
         </TabList>
+        <MobileDivider mt={2} />
       </StickToTop>
 
       <TabPanels

src/config/GlobalStyles.tsx

@@ -42,14 +42,26 @@ export const GlobalStyles = () => (
         body {
             overflow: overlay;
         }
-
+        
         .chakra-ui-dark {
-          background: ${darkModeColors.neutral[50]}
+            background: ${darkModeColors.neutral[0]}
+          }
+  
+          .chakra-ui-light {
+            background: ${lightModeColors.neutral[0]}
+          }
+        
+        @media (min-width: 57em) {
+          .chakra-ui-dark {
+            background: ${darkModeColors.neutral[50]}
+          }
+  
+          .chakra-ui-light {
+            background: ${lightModeColors.neutral[50]}
+          }
         }
 
-        .chakra-ui-light {
-          background: ${lightModeColors.neutral[50]}
-        }
+        
 
         #project-scroll-container::-webkit-scrollbar {
             display: none

src/config/theme/theme.ts

@@ -188,6 +188,9 @@ export const theme = {
       },
     },
     Divider: {
+      baseStyle: {
+        boxSizing: 'border-box',
+      },
       variant: {
         lg: {
           borderBottomWidth: '2px',

src/constants/platform/url.ts

@@ -211,6 +211,9 @@ export const CannotConnectAccountUrl =
 export const LockedConnectAccountUrl =
   'https://storage.googleapis.com/geyser-projects-media/utils/connect-account-locked.png'
 
+export const VerifyEmailImageUrl =
+  'https://storage.googleapis.com/geyser-projects-media/utils/enter-otp.svg'
+
 // GRANTS
 
 export const Grant3AnnouncementImageUrl =

src/context/auth.tsx

@@ -16,7 +16,7 @@ import {
   useMeLazyQuery,
   useMeProjectFollowsLazyQuery,
   UserMeFragment,
-} from '../types/generated/graphql'
+} from '../types'
 
 const defaultContext: AuthContextProps = {
   isLoggedIn: false,
@@ -190,4 +190,4 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   )
 }
 
-export const useAuthContext = () => useContext(AuthContext)
+export const useAuthContext = (): AuthContextProps => useContext(AuthContext)

src/context/project.tsx

@@ -53,6 +53,7 @@ type ProjectContextProps = {
   }): void
   onMilestonesModalOpen(): void
   onCreatorModalOpen(): void
+  refetch: any
 }
 
 export const ProjectContext = createContext<ProjectContextProps | null>(null)
@@ -104,6 +105,7 @@ export const ProjectProvider = ({
     saveProject,
     isDirty,
     saving,
+    refetch,
   } = useProjectState(projectId, {
     fetchPolicy: 'network-only',
     onError() {
@@ -194,6 +196,7 @@ export const ProjectProvider = ({
         loading,
         fundForm,
         fundingFlow,
+        refetch,
         onCreatorModalOpen: creatorModal.onOpen,
         onRewardsModalOpen: rewardsModal.onOpen,
         onMilestonesModalOpen: milestonesModal.onOpen,

src/graphql/fragments/email.ts

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+export const FRAGMENT_EMAIL_UPDATE_USER = gql`
+  fragment EmailUpdateUser on User {
+    email
+    isEmailVerified
+    id
+  }
+`
+
+export const FRAGMENT_OTP_RESPONSE = gql`
+  fragment OTPResponse on OTPResponse {
+    otpVerificationToken
+    expiresAt
+  }
+`

src/graphql/fragments/user.ts

@@ -6,6 +6,7 @@ export const FRAGMENT_USER_ME = gql`
     username
     imageUrl
     email
+    isEmailVerified
     externalAccounts {
       id
       accountType

src/graphql/mutations/email.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client'
+
+import {
+  FRAGMENT_EMAIL_UPDATE_USER,
+  FRAGMENT_OTP_RESPONSE,
+} from '../fragments/email'
+
+export const MUTATION_SEND_OTP_BY_EMAIL = gql`
+  ${FRAGMENT_OTP_RESPONSE}
+  mutation SendOTPByEmail($input: SendOtpByEmailInput!) {
+    sendOTPByEmail(input: $input) {
+      ...OTPResponse
+    }
+  }
+`
+
+export const MUTATION_UPDATE_USER_EMAIL = gql`
+  ${FRAGMENT_EMAIL_UPDATE_USER}
+  mutation UserEmailUpdate($input: UserEmailUpdateInput!) {
+    userEmailUpdate(input: $input) {
+      ...EmailUpdateUser
+    }
+  }
+`
+export const MUTATION_VERIFY_USER_EMAIL = gql`
+  mutation UserEmailVerify($input: EmailVerifyInput!) {
+    userEmailVerify(input: $input)
+  }
+`

src/hooks/graphqlState/useProjectState.tsx

@@ -31,7 +31,7 @@ export const useProjectState = (
 
   const invalidId = idType === 'name' && String(projectId).length < 3
 
-  const { loading, error } = useProjectByNameOrIdQuery({
+  const { loading, error, refetch } = useProjectByNameOrIdQuery({
     variables: {
       where: {
         [idType]: type === 'name' ? projectId : toInt(projectId),
@@ -131,6 +131,7 @@ export const useProjectState = (
     project,
     updateProject,
     saveProject,
+    refetch,
     isDirty: isDiff,
   }
 }