feat: Integration of Discord and Farcaster for Authentication

.github/workflows/client.yaml

@@ -28,6 +28,7 @@ jobs:
         env:
           VITE_TWITTER_SERVERLESS_API: ${{secrets.VITE_TWITTER_SERVERLESS_API}}
           VITE_ENCLAVE_API: ${{secrets.VITE_ENCLAVE_API}}
+          VITE_DYNAMIC_ENV_ID: ${{secrets.VITE_DYNAMIC_ENV_ID}}
       - name: Deploy to GitHub Pages
         uses: JamesIves/[email protected]
         with:

packages/client/.env.example

@@ -1,2 +1,3 @@
 VITE_ENCLAVE_API=http://127.0.0.1:4000
 VITE_TWITTER_SERVERLESS_API=
+VITE_DYNAMIC_ENV_ID=

packages/client/package.json

@@ -17,6 +17,7 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "@dynamic-labs/sdk-react-core": "^2.2.8",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@phosphor-icons/react": "^2.1.4",
@@ -28,6 +29,7 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
     "react-syntax-highlighter": "^15.5.0",
+    "viem": "^2.17.0",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-tsconfig-paths": "^4.3.2"
   },

packages/client/src/components/NavMenu.tsx

@@ -2,9 +2,9 @@
 import React, { useEffect, useRef, useState } from 'react'
 import LogoutIcon from '@/assets/icons/logout.svg'
 import { useNavigate } from 'react-router-dom'
-import { useVoteManagementContext } from '@/context/voteManagement'
 //Icons
 import { CaretRight, CalendarCheck, CheckFat, Notebook } from '@phosphor-icons/react'
+import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
 
 interface NavMenuProps {}
 
@@ -28,11 +28,19 @@ const NAV_MENU_OPTIONS = [
 
 const NavMenu: React.FC<NavMenuProps> = () => {
   const navigate = useNavigate()
-  const { user, logout } = useVoteManagementContext()
+  const { user: userProfile, handleLogOut } = useDynamicContext()
   const menuRef = useRef<HTMLDivElement>(null)
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
+  const user =
+    userProfile &&
+    userProfile.verifiedCredentials.find((credential) => {
+      if (credential.format === 'oauth') {
+        return credential
+      }
+    })
+
   const handleClickOutside = (event: MouseEvent) => {
     if (
       isOpen &&
@@ -66,7 +74,7 @@ const NavMenu: React.FC<NavMenuProps> = () => {
 
   const handleLogout = () => {
     navigate('/')
-    logout()
+    handleLogOut()
     return setIsOpen(!isOpen)
   }
 
@@ -77,8 +85,8 @@ const NavMenu: React.FC<NavMenuProps> = () => {
         onClick={toggleMenu}
         className='flex items-center justify-between space-x-1 rounded-lg border-2 bg-white/60 px-2 py-1 duration-300 ease-in-out hover:bg-white'
       >
-        <img src={user.avatar} className='h-[20px] w-[20px] rounded-full' />
-        <p className='text-xs font-bold'>@{user.username}</p>
+        <img src={user.oauthAccountPhotos?.length ? user.oauthAccountPhotos[0] : ''} className='h-[20px] w-[20px] rounded-full' />
+        <p className='text-xs font-bold'>{user.publicIdentifier}</p>
         <CaretRight className={isOpen ? '-rotate-90 transition-transform duration-200' : ''} />
       </button>
 

packages/client/src/main.tsx

@@ -5,15 +5,23 @@ import './globals.css'
 import { HashRouter } from 'react-router-dom'
 import { VoteManagementProvider } from '@/context/voteManagement/index.ts'
 import { NotificationAlertProvider } from './context/NotificationAlert/NotificationAlert.context.tsx'
+import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.Fragment>
     <HashRouter>
-      <NotificationAlertProvider>
-        <VoteManagementProvider>
-          <App />
-        </VoteManagementProvider>
-      </NotificationAlertProvider>
+      <DynamicContextProvider
+        settings={{
+          environmentId: import.meta.env.VITE_DYNAMIC_ENV_ID,
+          debugError: true,
+        }}
+      >
+        <NotificationAlertProvider>
+          <VoteManagementProvider>
+            <App />
+          </VoteManagementProvider>
+        </NotificationAlertProvider>
+      </DynamicContextProvider>
     </HashRouter>
   </React.Fragment>,
 )

packages/client/src/pages/DailyPoll/DailyPoll.tsx

@@ -5,15 +5,23 @@ import { useVoteManagementContext } from '@/context/voteManagement'
 import { useNotificationAlertContext } from '@/context/NotificationAlert'
 import { useNavigate } from 'react-router-dom'
 import { convertTimestampToDate } from '@/utils/methods'
+import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
 
 const DailyPoll: React.FC = () => {
   const navigate = useNavigate()
   const { showToast } = useNotificationAlertContext()
-  const { encryptVote, broadcastVote, getRoundStateLite, existNewRound, setTxUrl, votingRound, roundState, user } =
-    useVoteManagementContext()
+  const { encryptVote, broadcastVote, getRoundStateLite, existNewRound, setTxUrl, votingRound, roundState } = useVoteManagementContext()
+  const { user: userProfile } = useDynamicContext()
   const [loading, setLoading] = useState<boolean>(false)
   const [newRoundLoading, setNewRoundLoading] = useState<boolean>(false)
   const endTime = roundState && convertTimestampToDate(roundState?.start_time, roundState?.poll_length)
+  const user =
+    userProfile &&
+    userProfile.verifiedCredentials.find((credential) => {
+      if (credential.format === 'oauth') {
+        return credential
+      }
+    })
 
   useEffect(() => {
     const checkRound = async () => {
@@ -43,7 +51,7 @@ const DailyPoll: React.FC = () => {
       return broadcastVote({
         round_id: votingRound.round_id,
         enc_vote_bytes: Array.from(voteEncrypted),
-        postId: user.token,
+        postId: user.id,
       })
     },
     [broadcastVote, user, votingRound],

packages/client/src/pages/Landing/components/DailyPoll.tsx

@@ -8,6 +8,7 @@ import { useVoteManagementContext } from '@/context/voteManagement'
 import LoadingAnimation from '@/components/LoadingAnimation'
 import { hasPollEnded } from '@/utils/methods'
 import CountdownTimer from '@/components/CountdownTime'
+import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
 
 type DailyPollSectionProps = {
   onVoted?: (vote: Poll) => void
@@ -16,14 +17,15 @@ type DailyPollSectionProps = {
 }
 
 const DailyPollSection: React.FC<DailyPollSectionProps> = ({ onVoted, loading, endTime }) => {
-  const { user, pollOptions, setPollOptions, roundState } = useVoteManagementContext()
+  const { setShowAuthFlow, isAuthenticated, user } = useDynamicContext()
+
+  const { pollOptions, setPollOptions, roundState } = useVoteManagementContext()
   const isEnded = roundState ? hasPollEnded(roundState?.poll_length, roundState?.start_time) : false
   const status = roundState?.status
   const [pollSelected, setPollSelected] = useState<Poll | null>(null)
   const [noPollSelected, setNoPollSelected] = useState<boolean>(true)
   const [modalOpen, setModalOpen] = useState(false)
 
-  const openModal = () => setModalOpen(true)
   const closeModal = () => {
     setModalOpen(false)
   }
@@ -39,7 +41,7 @@ const DailyPollSection: React.FC<DailyPollSectionProps> = ({ onVoted, loading, e
   }
 
   const castVote = () => {
-    if (!user) return openModal()
+    if (!isAuthenticated && !user) return setShowAuthFlow(true)
     if (pollSelected && onVoted) {
       onVoted(pollSelected)
     }

packages/client/src/pages/Landing/components/Hero.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 import { Keyhole, ListMagnifyingGlass, ShieldCheck } from '@phosphor-icons/react'
 
 const HeroSection: React.FC = () => {
+
   return (
     <div className='relative flex w-full flex-1 items-center justify-center px-6'>
       <div className='absolute bottom-0 right-0 grid w-full grid-cols-2 gap-2 max-md:opacity-50 md:w-[70vh]'>