Merge pull request #1297 from tapexyz/signup

feat: tape signup contracts

.deepsource.toml

@@ -16,7 +16,3 @@ enabled = true
 
   [analyzers.meta]
   plugins = ["react"]
-
-[[transformers]]
-name = "prettier"
-enabled = true

apps/web/src/components/Bangers/New.tsx

@@ -187,9 +187,8 @@ const New: FC<Props> = ({ refetch }) => {
     if (!activeProfile) {
       return toast.error(SIGN_IN_REQUIRED)
     }
-    if (handleWrongNetwork()) {
-      return
-    }
+    await handleWrongNetwork()
+
     setLoading(true)
     const linkText = trimify(getValues('link'))
     const attributes: MetadataAttribute[] = [

apps/web/src/components/Common/MirrorPublication.tsx

@@ -187,9 +187,7 @@ const MirrorPublication: FC<Props> = ({
     if (!activeProfile?.id) {
       return toast.error(SIGN_IN_REQUIRED)
     }
-    if (handleWrongNetwork()) {
-      return
-    }
+    await handleWrongNetwork()
 
     if (video.momoka?.proof && !activeProfile?.sponsor) {
       return toast.error(

apps/web/src/components/Common/Providers/index.tsx

@@ -13,7 +13,6 @@ import ThemeProvider from './ThemeProvider'
 const SubscriptionProvider = dynamic(() => import('./SubscriptionProvider'))
 const TogglesProvider = dynamic(() => import('./TogglesProvider'))
 const Web3Provider = dynamic(() => import('./Web3Provider'))
-const GlobalDialogs = dynamic(() => import('../GlobalDialogs'))
 const Layout = dynamic(() => import('../Layout'))
 
 const NO_TOP_NAV_PATHS = ['/login']
@@ -47,7 +46,6 @@ const Providers = ({ children }: { children: ReactNode }) => {
             <ThemeProvider>
               <SubscriptionProvider />
               <TogglesProvider />
-              <GlobalDialogs />
               <LivepeerConfig client={livepeerClient} theme={videoPlayerTheme}>
                 <Layout
                   skipNav={NO_TOP_NAV_PATHS.includes(pathname)}

apps/web/src/components/Common/Publication/PublicationOptions.tsx

@@ -110,13 +110,12 @@ const PublicationOptions: FC<Props> = ({ publication, children }) => {
     setShowConfirm(false)
   }
 
-  const onClickReport = () => {
+  const onClickReport = async () => {
     if (!activeProfile?.id) {
       return toast.error(SIGN_IN_REQUIRED)
     }
-    if (handleWrongNetwork()) {
-      return
-    }
+    await handleWrongNetwork()
+
     setShowReportModal(true)
   }
 
@@ -206,9 +205,7 @@ const PublicationOptions: FC<Props> = ({ publication, children }) => {
     if (!activeProfile) {
       return toast.error(SIGN_IN_REQUIRED)
     }
-    if (handleWrongNetwork()) {
-      return
-    }
+    await handleWrongNetwork()
 
     try {
       toast.loading(`Pinning video...`)
@@ -395,7 +392,6 @@ const PublicationOptions: FC<Props> = ({ publication, children }) => {
               e.preventDefault()
               setShowShareModal(true)
             }}
-            className="flex items-center justify-start space-x-2 rounded-md px-3 py-1.5 hover:bg-gray-500/20"
           >
             <div className="flex items-center gap-2">
               <ShareOutline className="size-3.5" />
@@ -469,7 +465,6 @@ const PublicationOptions: FC<Props> = ({ publication, children }) => {
                 />
               </Modal>
               <DropdownMenuItem
-                className="!cursor-default rounded-md px-3 py-1.5 hover:bg-gray-500/20 disabled:opacity-40 disabled:hover:bg-inherit"
                 onClick={(e) => {
                   e.preventDefault()
                   onClickReport()

apps/web/src/components/Create/DropZone.tsx

@@ -1,3 +1,4 @@
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
 import useAppStore from '@lib/store'
 import useProfileStore from '@lib/store/idb/profile'
 import { tw, useDragAndDrop } from '@tape.xyz/browser'
@@ -15,6 +16,7 @@ import toast from 'react-hot-toast'
 const DropZone = () => {
   const setUploadedMedia = useAppStore((state) => state.setUploadedMedia)
   const activeProfile = useProfileStore((state) => state.activeProfile)
+  const handleWrongNetwork = useHandleWrongNetwork()
 
   const {
     setDragOver,
@@ -24,7 +26,9 @@ const DropZone = () => {
     setFileDropError
   } = useDragAndDrop()
 
-  const handleUploadedMedia = (file: File) => {
+  const handleUploadedMedia = async (file: File) => {
+    await handleWrongNetwork()
+
     try {
       if (file) {
         const preview = URL.createObjectURL(file)

apps/web/src/components/Create/index.tsx

@@ -1,5 +1,4 @@
 import MetaTags from '@components/Common/MetaTags'
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
 import type {
   AudioOptions,
   MediaAudioMimeType,
@@ -90,7 +89,6 @@ const CreateSteps = () => {
   const router = useRouter()
   const { data: walletClient } = useWalletClient()
 
-  const handleWrongNetwork = useHandleWrongNetwork()
   const { canUseLensManager, canBroadcast } =
     checkLensManagerPermissions(activeProfile)
 
@@ -143,12 +141,6 @@ const CreateSteps = () => {
     Tower.track(EVENTS.PAGEVIEW, { page: EVENTS.PAGE_VIEW.UPLOAD })
   }, [])
 
-  useEffect(() => {
-    if (handleWrongNetwork()) {
-      return
-    }
-  }, [handleWrongNetwork])
-
   const stopLoading = () => {
     setUploadedMedia({
       buttonText: 'Post Now',

apps/web/src/components/Login/Authenticate.tsx

@@ -1,12 +1,13 @@
 import ButtonShimmer from '@components/Shimmers/ButtonShimmer'
 import { signIn, signOut } from '@lib/store/auth'
 import useProfileStore from '@lib/store/idb/profile'
-import { ERROR_MESSAGE } from '@tape.xyz/constants'
+import { ERROR_MESSAGE, IS_MAINNET } from '@tape.xyz/constants'
 import {
   EVENTS,
   getProfile,
   getProfilePicture,
   logger,
+  shortenAddress,
   Tower
 } from '@tape.xyz/generic'
 import type { Profile } from '@tape.xyz/lens'
@@ -17,7 +18,13 @@ import {
   useProfilesManagedQuery
 } from '@tape.xyz/lens'
 import { useApolloClient } from '@tape.xyz/lens/apollo'
-import { Button, Select, SelectItem } from '@tape.xyz/ui'
+import {
+  Button,
+  Callout,
+  Select,
+  SelectItem,
+  WarningOutline
+} from '@tape.xyz/ui'
 import { useRouter } from 'next/router'
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
@@ -31,6 +38,7 @@ const Authenticate = () => {
   } = useRouter()
 
   const [loading, setLoading] = useState(false)
+  const [showSignup, setShowSignup] = useState(false)
   const [selectedProfileId, setSelectedProfileId] = useState<string>('')
   const { activeProfile, setActiveProfile } = useProfileStore()
 
@@ -55,8 +63,11 @@ const Authenticate = () => {
     onCompleted: (data) => {
       const profiles = data?.profilesManaged.items
       if (profiles?.length) {
+        setShowSignup(false)
         const profile = [...profiles].reverse()[0]
         setSelectedProfileId(as || profile.id)
+      } else {
+        setShowSignup(true)
       }
     }
   })
@@ -164,39 +175,71 @@ const Authenticate = () => {
   }
 
   return (
-    <div className="text-left">
-      {profile ? (
+    <div className="space-y-4 text-left">
+      {!IS_MAINNET && showSignup ? (
+        <Signup
+          onSuccess={() => refetch()}
+          setShowSignup={setShowSignup}
+          showLogin={Boolean(profile)}
+        />
+      ) : (
         <div className="flex flex-col gap-2">
-          <Select
-            size="lg"
-            defaultValue={as ?? profile?.id}
-            value={selectedProfileId}
-            onValueChange={(value) => setSelectedProfileId(value)}
-          >
-            {reversedProfilesManaged?.map((profile) => (
-              <SelectItem size="lg" key={profile.id} value={profile.id}>
-                <div className="flex items-center space-x-2">
-                  <img
-                    src={getProfilePicture(profile, 'AVATAR')}
-                    className="size-4 rounded-full"
-                    alt={getProfile(profile)?.displayName}
-                  />
-                  <span>{getProfile(profile).slugWithPrefix}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </Select>
-          <Button
-            size="md"
-            loading={loading}
-            onClick={handleSign}
-            disabled={loading || !selectedProfileId}
-          >
-            Login
-          </Button>
+          {profile ? (
+            <>
+              <Select
+                size="lg"
+                defaultValue={as ?? profile?.id}
+                value={selectedProfileId}
+                onValueChange={(value) => setSelectedProfileId(value)}
+              >
+                {reversedProfilesManaged?.map((profile) => (
+                  <SelectItem size="lg" key={profile.id} value={profile.id}>
+                    <div className="flex items-center space-x-2">
+                      <img
+                        src={getProfilePicture(profile, 'AVATAR')}
+                        className="size-4 rounded-full"
+                        alt={getProfile(profile)?.displayName}
+                      />
+                      <span>{getProfile(profile).slugWithPrefix}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </Select>
+              <Button
+                size="md"
+                loading={loading}
+                onClick={handleSign}
+                disabled={loading || !selectedProfileId}
+              >
+                Login
+              </Button>
+            </>
+          ) : (
+            <Callout
+              variant="danger"
+              icon={<WarningOutline className="size-4" />}
+            >
+              We couldn't find any profiles linked to the connected address. (
+              {shortenAddress(address as string)})
+            </Callout>
+          )}
+          {!IS_MAINNET && (
+            <div className="flex items-center justify-center space-x-2 pt-3 text-sm">
+              {profile ? (
+                <span>Need new account?</span>
+              ) : (
+                <span>Don't have an account?</span>
+              )}
+              <button
+                type="button"
+                className="text-brand-500 font-bold"
+                onClick={() => setShowSignup(true)}
+              >
+                Sign up
+              </button>
+            </div>
+          )}
         </div>
-      ) : (
-        <Signup onSuccess={() => refetch()} />
       )}
     </div>
   )

apps/web/src/components/Login/Connectors.tsx

@@ -1,4 +1,6 @@
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
 import useProfileStore from '@lib/store/idb/profile'
+import { EVENTS, Tower } from '@tape.xyz/generic'
 import { Button, Callout, CheckOutline, WarningOutline } from '@tape.xyz/ui'
 import React, { memo, useMemo } from 'react'
 import type { Connector } from 'wagmi'
@@ -10,11 +12,14 @@ const Connectors = () => {
   const { activeProfile } = useProfileStore()
 
   const { connector: connected } = useAccount()
+  const handleWrongNetwork = useHandleWrongNetwork()
   const { connectors, connectAsync, isPending, error } = useConnect()
 
   const onChooseConnector = async (connector: Connector) => {
     try {
+      await handleWrongNetwork()
       await connectAsync({ connector })
+      Tower.track(EVENTS.AUTH.CONNECT_WALLET, { connector: connector.id })
     } catch {}
   }