Merge pull request #777 from geyserfund/staging

Production Push : Added profile tabs, layout update

src/components/molecules/AuthModal.tsx

@@ -14,8 +14,7 @@ import { useAuthContext } from '../../context'
 import { ConnectWithLightning } from '../../pages/auth/ConnectWithLightning'
 import { ConnectWithNostr } from '../../pages/auth/ConnectWithNostr'
 import { ConnectWithTwitter } from '../../pages/auth/ConnectWithTwitter'
-import { hasTwitterAccount } from '../../utils'
-import { hasNostrAccount } from '../../utils/validations/hasNostrAccount'
+import { hasNostrAccount, hasTwitterAccount } from '../../utils'
 import { Caption } from '../typography'
 import { ButtonComponent } from '../ui'
 

src/components/molecules/TabComponent.tsx

@@ -0,0 +1,90 @@
+import {
+  Box,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  TabProps,
+  Tabs,
+} from '@chakra-ui/react'
+
+import { dimensions, ID } from '../../constants'
+import { useMobileMode } from '../../utils'
+import { StickToTop } from '../layouts'
+
+interface TabComponentProps {
+  tabs: RenderTab[]
+}
+
+export type RenderTab = {
+  title: string
+  sub?: string | number
+  Component: () => JSX.Element
+}
+
+export const TabComponent = ({ tabs }: TabComponentProps) => {
+  const isMobile = useMobileMode()
+  return (
+    <Tabs
+      id={ID.profile.tabs}
+      display="flex"
+      flexDirection="column"
+      h="full"
+      variant="unstyled"
+      size="sm"
+      w="full"
+    >
+      <StickToTop
+        id={ID.profile.tabList}
+        width="100%"
+        offset={dimensions.topNavBar.desktop.height}
+        backgroundColor="brand.bgGrey4"
+        disable={!isMobile}
+        _onStick={{ width: `calc(100% - 20px)` }}
+      >
+        <TabList w="100%" paddingY="10px">
+          {tabs.map(({ title, sub }) => {
+            return (
+              <Tab key={title} {...tabButtonStyles}>
+                {title}
+                {sub && (
+                  <Box
+                    as="span"
+                    ml="5px"
+                    paddingX="7px"
+                    backgroundColor="neutral.200"
+                    borderRadius="4px"
+                  >
+                    {sub}
+                  </Box>
+                )}
+              </Tab>
+            )
+          })}
+        </TabList>
+      </StickToTop>
+
+      <TabPanels
+        height={{ base: '100%', md: `calc(100% - 74px)` }}
+        flex="1"
+        marginTop="22px"
+      >
+        {tabs.map(({ title, Component }) => {
+          return (
+            <TabPanel h="full" key={title} padding="0px">
+              <Component />
+            </TabPanel>
+          )
+        })}
+      </TabPanels>
+    </Tabs>
+  )
+}
+
+const tabButtonStyles: TabProps = {
+  borderRadius: '8px',
+  fontSize: '16px',
+  fontWeight: 400,
+  flex: 1,
+  _selected: { backgroundColor: 'neutral.100', fontWeight: 500 },
+}

src/components/molecules/index.ts

@@ -12,4 +12,5 @@ export * from './projectActivity'
 export * from './ProjectDetailsMobileMenu'
 export * from './projectDisplay'
 export * from './ProjectSectionBar'
+export * from './TabComponent'
 export * from './TitleWithProgressBar'

src/components/molecules/projectActivity/ExternalAccountLinkIcon.tsx

@@ -31,7 +31,7 @@ export const ExternalAccountLinkIcon = ({
 
   const getExternalAccount = (type: string) => {
     return funder.user?.externalAccounts.find(
-      (account) => account?.type === type,
+      (account) => account?.accountType === type,
     )?.externalUsername
   }
 

src/components/molecules/projectDisplay/RewardCard.tsx

@@ -73,7 +73,7 @@ export const RewardCard = ({
                 padding="2px 5px"
                 borderRadius="4px"
               >
-                <b>{reward.backers || 0}</b> collected
+                <b>{reward.sold || 0}</b> collected
               </Text>
             </VStack>
           </HStack>

src/config/PrivateRoute.tsx

@@ -5,8 +5,7 @@ import { AuthModal } from '../components/molecules'
 import { getPath, PathName } from '../constants'
 import { useAuthContext } from '../context'
 import { LoadingPage } from '../pages/loading'
-import { hasTwitterAccount } from '../utils'
-import { hasNostrAccount } from '../utils/validations/hasNostrAccount'
+import { hasNostrAccount, hasTwitterAccount } from '../utils'
 
 interface IPrivateRoute {
   children: React.ReactNode

src/constants/components/id.ts

@@ -25,4 +25,8 @@ export const ID = {
       milestones: 'project-main-milestones-container',
     },
   },
+  profile: {
+    tabs: 'user-profile-tab-container',
+    tabList: 'user-profile-tab-List',
+  },
 }

src/defaults/projectReward.ts

@@ -1,8 +1,4 @@
-import {
-  Project,
-  ProjectReward,
-  RewardCurrency,
-} from '../types/generated/graphql'
+import { Project, ProjectReward } from '../types/generated/graphql'
 
 export const defaultProjectReward: ProjectReward = {
   id: 0,
@@ -12,8 +8,6 @@ export const defaultProjectReward: ProjectReward = {
   image: '',
   deleted: false,
   stock: 0,
-  backers: 0,
   sold: 0,
-  costCurrency: RewardCurrency.Usdcent,
   project: {} as Project,
 }

src/graphql/mutations/user.ts

@@ -8,7 +8,7 @@ export const MUTATION_UNLINK_ACCOUNT = gql`
       imageUrl
       externalAccounts {
         id
-        type
+        accountType
         externalUsername
         externalId
         public

src/graphql/mutations/wallet.ts

@@ -17,3 +17,9 @@ export const MUTATION_UPDATE_WALLET = gql`
     }
   }
 `
+
+export const MUTATION_DELETE_WALLET = gql`
+  mutation WalletDelete($walletId: BigInt!) {
+    walletDelete(id: $walletId)
+  }
+`

src/graphql/queries/project.ts

@@ -48,7 +48,7 @@ export const QUERY_PROJECT_BY_NAME_OR_ID = gql`
         cost
         description
         name
-        backers
+        sold
         image
       }
       ambassadors {
@@ -301,7 +301,7 @@ export const QUERY_GET_PROJECT_FUNDERS = gql`
           externalId
           externalUsername
           id
-          type
+          accountType
         }
         imageUrl
       }

src/graphql/queries/user.ts

@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client'
 
+import { ProjectParametersForLandingPage } from '../../pages/landing/projects/projects.graphql'
+
 export const ME = gql`
   query Me {
     me {
@@ -9,7 +11,7 @@ export const ME = gql`
       email
       externalAccounts {
         id
-        type
+        accountType
         externalUsername
         externalId
         public
@@ -57,7 +59,7 @@ export const USER_PROFILE_QUERY = gql`
       }
       externalAccounts {
         id
-        type
+        accountType
         externalUsername
         externalId
         public
@@ -85,33 +87,29 @@ export const USER_PROFILE_QUERY = gql`
       ownerOf {
         project {
           id
-          title
-          name
-          description
-          balance
-          fundingGoal
-          createdAt
-          updatedAt
-          status
-          media
-          expiresAt
-          funders {
-            id
-          }
-          owners {
-            id
-            user {
-              imageUrl
-            }
-          }
         }
       }
-      entries {
+      projectFollows {
         id
       }
-      fundingTxs {
-        id
+    }
+  }
+`
+
+export const USER_PROFILE_PROJECTS = gql`
+  query User($where: UserGetInput!) {
+    user(where: $where) {
+      ownerOf {
+        project ${ProjectParametersForLandingPage}
       }
     }
   }
 `
+
+export const USER_FOLLOWED_PROJECTS = gql`
+  query User($where: UserGetInput!) {
+    user(where: $where) {
+      projectFollows ${ProjectParametersForLandingPage}
+    }
+  }
+`

src/hooks/useNostrBadges.tsx

@@ -9,7 +9,7 @@ import { VITE_APP_GEYSER_NOSTR_PUBKEY } from '../constants'
 import { MUTATION_USER_BADGE_AWARD } from '../graphql/mutations'
 import { MutationUserBadgeAwardArgs, UserBadge } from '../types'
 import { useNotification } from '../utils'
-import { signEvent } from '../utils/nostr/nip07'
+import { signEventToBeDeprecated } from '../utils/nostr/nip07'
 
 const relayUri = 'wss://relay.damus.io'
 
@@ -122,6 +122,7 @@ export const useNostrBadges = (pubKey: string) => {
       const eventToPublish = {
         kind: 30008,
         pubkey: pubKey,
+        // eslint-disable-next-line camelcase
         created_at: Math.floor(Date.now() / 1000),
         tags: [['d', 'profile_badges']],
         content: '',
@@ -137,7 +138,7 @@ export const useNostrBadges = (pubKey: string) => {
       }
 
       eventToPublish.id = getEventHash(eventToPublish)
-      eventToPublish.sig = await signEvent(eventToPublish) // this is where you sign with private key replaccing pubkey
+      eventToPublish.sig = await signEventToBeDeprecated(eventToPublish) // this is where you sign with private key replaccing pubkey
 
       const pub = relay.publish(eventToPublish) // this is where you sign with private key replaccing pubkey
 

src/hooks/useNostrExtensionLogin.tsx

@@ -1,9 +1,11 @@
+import { Buffer } from 'buffer'
+import { getEventHash } from 'nostr-tools'
 import { useState } from 'react'
 
 import { AUTH_SERVICE_ENDPOINT } from '../constants'
 import { useAuthContext } from '../context'
-import { sha256, useNotification } from '../utils'
-import { getPubkey, signMessage } from '../utils/nostr/nip07'
+import { useNotification } from '../utils'
+import { getPubkey, signEvent } from '../utils/nostr/nip07'
 
 export const useNostrExtensonLogin = () => {
   const { toast } = useNotification()
@@ -20,20 +22,26 @@ export const useNostrExtensonLogin = () => {
 
       const pubkey = await getPubkey()
 
-      const getSecret = await fetch(
-        `${AUTH_SERVICE_ENDPOINT}/nostr?pubkey=${pubkey}`,
-        {
-          credentials: 'include',
-          redirect: 'follow',
-        },
-      )
+      const getAuthEvent = await fetch(`${AUTH_SERVICE_ENDPOINT}/nostr`, {
+        credentials: 'include',
+        redirect: 'follow',
+      })
+
+      const { event } = await getAuthEvent.json()
+
+      event.pubkey = pubkey
+      event.id = getEventHash(event)
+
+      // TODO: refactor the utils sign event to return entire event
+      const signedEvent = await signEvent(event)
+      const serialisedEvent = JSON.stringify(signedEvent)
 
-      const { k1 } = await getSecret.json()
-      const hashedK1 = await sha256(k1)
-      const sig = await signMessage(hashedK1)
+      const nostrAuthToken = encodeURIComponent(
+        Buffer.from(serialisedEvent).toString('base64'),
+      ).replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16))
 
       const response = await fetch(
-        `${AUTH_SERVICE_ENDPOINT}/nostr?pubkey=${pubkey}&k1=${k1}&sig=${sig}`,
+        `${AUTH_SERVICE_ENDPOINT}/nostr?token=${nostrAuthToken}`,
         {
           credentials: 'include',
           redirect: 'follow',

src/hooks/useQueryWithPagination.tsx

@@ -1,4 +1,4 @@
-import { DocumentNode, OperationVariables, useQuery } from '@apollo/client'
+import { DocumentNode, QueryHookOptions, useQuery } from '@apollo/client'
 import { isDocumentNode } from '@apollo/client/utilities'
 
 import { PaginationHookReturn, QueryResponseData } from './types'
@@ -11,7 +11,7 @@ export type useQueryWithPaginationProps = {
   where?: any
   orderBy?: any
   resultMap?: (_: any[]) => any[]
-  options?: OperationVariables
+  options?: QueryHookOptions
 }
 
 export const useQueryWithPagination = <Type,>({