(Privy): initial privy changes

apps/web/package.json

@@ -19,6 +19,8 @@
     "@irys/sdk": "^0.1.16",
     "@lens-protocol/metadata": "^1.1.6",
     "@livepeer/react": "^3.1.9",
+    "@privy-io/react-auth": "^1.59.3",
+    "@privy-io/wagmi": "^0.2.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tanstack/react-query": "^5.28.4",
     "axios": "^1.6.7",

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

@@ -1,7 +1,12 @@
 import { getLivepeerClient, videoPlayerTheme } from '@dragverse/browser'
+// Import Privy and wagmi components and functions
+import { PRIVY_APP_ID } from '@dragverse/constants' // Ensure this is defined in your constants
 import { apolloClient, ApolloProvider } from '@dragverse/lens/apollo'
 import authLink from '@lib/authLink'
 import { LivepeerConfig } from '@livepeer/react'
+import { PrivyProvider } from '@privy-io/react-auth'
+// Import required chains for your wagmi configuration
+// import { mainnet } from '@privy-io/wagmi/chains' // Update these imports to match your desired chains
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
@@ -35,6 +40,16 @@ const reactQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false } }
 })
 
+// Build your wagmi config
+// const wagmiConfig = createConfig({
+// chains: mainnet.chains
+// connectors: [
+//   // Define your connectors here
+// ],
+// provider: mainnet.rpcUrls.default(), // Set up your provider, e.g., for mainnet
+// webSocketProvider: mainnet.rpcUrls.default(), // Set up your WebSocket provider, if applicable
+// })
+
 const Providers = ({ children }: { children: ReactNode }) => {
   const { pathname } = useRouter()
 
@@ -47,13 +62,17 @@ const Providers = ({ children }: { children: ReactNode }) => {
               <SubscriptionProvider />
               <TogglesProvider />
               <LivepeerConfig client={livepeerClient} theme={videoPlayerTheme}>
-                <Layout
-                  skipNav={NO_TOP_NAV_PATHS.includes(pathname)}
-                  skipBottomNav={NO_BOTTOM_NAV_PATHS.includes(pathname)}
-                  skipPadding={NO_PADDING_PATHS.includes(pathname)}
-                >
-                  {children}
-                </Layout>
+                <PrivyProvider appId={PRIVY_APP_ID} config={{}}>
+                  {/* <WagmiProvider config={wagmiConfig}> */}
+                  <Layout
+                    skipNav={NO_TOP_NAV_PATHS.includes(pathname)}
+                    skipBottomNav={NO_BOTTOM_NAV_PATHS.includes(pathname)}
+                    skipPadding={NO_PADDING_PATHS.includes(pathname)}
+                  >
+                    {children}
+                  </Layout>
+                  {/* </WagmiProvider> */}
+                </PrivyProvider>
               </LivepeerConfig>
             </ThemeProvider>
           </QueryClientProvider>

apps/web/src/components/Home/JoinWaitlist.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 const JoinWaitlist = () => {
   return (
-    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-[500px] flex-none overflow-hidden  md:w-[300px] sm:w-[300px]">
+    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-[500px] flex-none overflow-hidden  sm:w-[300px] md:w-[300px]">
       <div className="bg-brand-250 absolute inset-0 h-full w-full" />
       <div className="from-brand-250 absolute inset-0 h-full w-full bg-gradient-to-b to-transparent" />
       <img
@@ -15,13 +15,13 @@ const JoinWaitlist = () => {
       <div className="ultrawide:p-8 relative flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
         <div className="text-3xl font-bold">Don't have a Lens profile?</div>
         <p className="md:text-md max-w-2xl text-sm lg:text-lg">
-          In order to interact with the Dragverse, and other apps in the garden, you need a Lens profile. 🌱
-          Connect your wallet, and mint your handle:
+          In order to interact with the Dragverse, and other apps in the garden,
+          you need a Lens profile. 🌱 Connect your wallet, and mint your handle:
         </p>
         <div className="flex gap-3">
-        <Link href="/login?signup=true">
-          <Button>Get</Button>
-        </Link>
+          <Link href="/login?signup=true">
+            <Button>Get</Button>
+          </Link>
         </div>
       </div>
     </div>

apps/web/src/components/Home/TopSection.tsx

@@ -3,10 +3,10 @@ import useProfileStore from '@lib/store/idb/profile'
 import { useRef } from 'react'
 
 import GitcoinAlert from './GitcoinAlert'
+import JoinWaitlist from './JoinWaitlist'
 import LatestBytes from './LatestBytes'
 import LensManagerAlert from './LensManagerAlert'
 import WelcomeAlert from './WelcomeAlert'
-import JoinWaitlist from './JoinWaitlist'
 
 const TopSection = () => {
   const sectionRef = useRef<HTMLDivElement>(null)

apps/web/src/components/Home/WelcomeAlert.tsx

@@ -4,15 +4,15 @@ import Link from 'next/link'
 
 const WelcomeAlert = () => {
   return (
-    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-[500px] flex-none overflow-hidden  md:w-[400px] sm:w-[300px]">
+    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-[500px] flex-none overflow-hidden  sm:w-[300px] md:w-[400px]">
       <div className="bg-brand-950 absolute inset-0 h-full w-full" />
       <div className="from-brand-900 absolute inset-0 h-full w-full bg-gradient-to-b to-transparent" />
       <div className="ultrawide:p-8 relative flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
         <div className="text-3xl font-bold">Welcome to {TAPE_APP_NAME}</div>
         <p className="md:text-md max-w-2xl text-sm lg:text-lg">
           Purse first! 👛 Connect your wallet, confirm you have a Lens account,
-          🗝 and interact with content from the most fabulous community
-          on the intern3t!🌈✨.
+          🗝 and interact with content from the most fabulous community on the
+          intern3t!🌈✨.
         </p>
         <div className="flex gap-3">
           <Link href="/login">

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

@@ -115,7 +115,9 @@ const Signup: FC<Props> = ({ showLogin, onSuccess, setShowSignup }) => {
   const onMinted = (via: string) => {
     onSuccess()
     reset()
-    toast.success('Profile created. It might take a few minutes to register on the blockchain and let you use your new handle.')
+    toast.success(
+      'Profile created. It might take a few minutes to register on the blockchain and let you use your new handle.'
+    )
     duration: 10000
     setCreating(false)
     Tower.track(EVENTS.AUTH.SIGNUP_SUCCESS, {
@@ -381,13 +383,13 @@ const Signup: FC<Props> = ({ showLogin, onSuccess, setShowSignup }) => {
       </Button>
 
       <button
-       type="button"
-       className="ml-2 cursor-help p-1 text-xs flex items-center justify-center"
-       onClick={() => setShowModal(true)}
-     >
-       <InfoOutline className="size-4 mr-1" />
-      <span>Why do I have to pay?</span>
-</button>
+        type="button"
+        className="ml-2 flex cursor-help items-center justify-center p-1 text-xs"
+        onClick={() => setShowModal(true)}
+      >
+        <InfoOutline className="mr-1 size-4" />
+        <span>Why do I have to pay?</span>
+      </button>
 
       {showLogin && (
         <div className="flex items-center justify-center space-x-2 pt-3 text-sm">

apps/web/src/pages/login.tsx

@@ -32,7 +32,11 @@ const Login = () => {
           <CardBorders />
           <div className="mb-6">
             <h2 className="text-2xl font-bold">Welcome to Dragverse</h2>
-            <p>Connect your wallet and Lens account.👛 New to the scene? No worries! Grab your Lens account right here and let the magic begin.✨</p>
+            <p>
+              Connect your wallet and Lens account.👛 New to the scene? No
+              worries! Grab your Lens account right here and let the magic
+              begin.✨
+            </p>
           </div>
           <Connectors />
         </div>

packages/constants/general.ts

@@ -101,7 +101,7 @@ export const EVER_ENDPOINT = 'https://endpoint.4everland.co'
 export const EVER_REGION = 'us-west-2'
 
 // walletconnect
-export const WC_PROJECT_ID = 'bf790b6b57570b99567abd1677b7415d'
+export const WC_PROJECT_ID = '6c98e7b769b4ccd8dd7a5533cb65d34b'
 export const EXPLORER_RECOMMENDED_WALLET_IDS = [
   'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // metamask
   'ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18', // zerion
@@ -115,6 +115,11 @@ export const LIVEPEER_STUDIO_API_KEY = IS_PRODUCTION
   ? '6a7a905f-72d9-4303-adda-09679b3f5f8c'
   : 'cf2eb693-e25c-42fe-b5d9-a8ce29124ae6'
 
+// privy
+export const PRIVY_APP_ID = IS_PRODUCTION
+  ? 'clt93hfel08df9kmxfmnb7t3r'
+  : 'clt93hfel08df9kmxfmnb7t3r'
+
 // workers
 export const WORKER_LIVEPEER_VIEWS_URL = `${TAPE_API_URL}/views`
 export const WORKER_IRYS_METADATA_UPLOAD_URL = `${TAPE_API_URL}/metadata`