integration pass 4

od41 · Mar 10, 2024 · a99b4ca · a99b4ca
1 parent 6759d75
commit a99b4ca
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 59 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -36,10 +36,12 @@ export default function HomePage() {
         {/* Title */}
         <HomePageTitle />
 
-        <div className="flex">
-          <ConnectButton />
+        <div className="flex h-full gap-12">
+          <div className="w-[45%]">
+            <ConnectButton />
+          </div>
 
-          <div className="mt-12 flex min-w-[25rem] flex-col items-start justify-center gap-4">
+          <div className="flex w-[55%] min-w-[25rem] flex-col items-start justify-center gap-4">
             <ChatMessages />
           </div>
         </div>

diff --git a/frontend/src/components/web3/chat-messages.tsx b/frontend/src/components/web3/chat-messages.tsx
@@ -15,22 +15,21 @@ import { SendMessage } from './send-message'
 
 export const ChatMessages: FC = () => {
   const { activeChain } = useInkathon()
-  const { isChatroomLoading, isChatroomActive, messages, isMessagesLoading } =
+  const { isChatroomLoading, isChatroomActive, messages, chatroomId, isMessagesLoading } =
     useContext(AppContext)
-  console.log('ischatroomactive', isChatroomActive)
 
   // Connection Loading Indicator
   if (isChatroomLoading)
     return (
-      <div className="my-8 flex w-full flex-col items-center justify-center space-y-3 text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
+      <div className="flex h-full w-full flex-col items-center justify-center space-y-3 rounded-md border text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
         <Spinner />
         <div>Connecting to chatrooms</div>
       </div>
     )
   if (!isChatroomLoading && !isChatroomActive)
     // No chatroom found
     return (
-      <div className="my-8 flex w-full flex-col items-center justify-center space-y-3 text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
+      <div className=" flex h-full w-full flex-col items-center justify-center space-y-3 rounded-md border text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
         <BsChatSquareQuote />
         <div>No chatroom found</div>
       </div>
@@ -39,7 +38,9 @@ export const ChatMessages: FC = () => {
   return (
     <>
       <div className="flex w-full grow flex-col gap-4">
-        <h2 className="text-center font-mono text-gray-400">Chatroom</h2>
+        <h2 className="text-center font-mono text-gray-400">
+          Chatroom ID: <span className="truncate"> {chatroomId} </span>
+        </h2>
 
         <Card>
           <CardContent className="p-4">

diff --git a/frontend/src/components/web3/connect-button.tsx b/frontend/src/components/web3/connect-button.tsx
@@ -35,6 +35,7 @@ import {
 import { env } from '@/config/environment'
 import { truncateHash } from '@/utils/truncate-hash'
 
+import { Input } from '../ui/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import NewChatRoomButton from './new-chatroom-button'
 
@@ -116,18 +117,18 @@ export const ConnectButton: FC<ConnectButtonProps> = () => {
   // Account Menu & Disconnect Button
   return (
     <div>
-      <div className="flex select-none flex-wrap items-stretch justify-center gap-4">
+      <div className="flex select-none flex-wrap items-stretch justify-between gap-2">
         {/* Account Name, Address, and AZERO.ID-Domain (if assigned) */}
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
             className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
           >
-            <Button className="min-w-[14rem] border" translate="no">
+            <Button className="w-[52%] min-w-[8rem] border" translate="no">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex flex-col items-center justify-center">
                   <AccountName account={activeAccount} />
-                  <span className="text-xs font-normal">
+                  <span className="text-[10px] font-normal">
                     {truncateHash(
                       encodeAddress(activeAccount.address, activeChain?.ss58Prefix || 42),
                       8,
@@ -203,7 +204,7 @@ export const ConnectButton: FC<ConnectButtonProps> = () => {
 
         {/* Account Balance */}
         {reducibleBalanceFormatted !== undefined && (
-          <div className="flex min-w-[10rem] items-center justify-center gap-2 rounded-2xl border bg-gray-900 px-4 py-3 font-mono text-sm font-bold text-foreground">
+          <div className="flex w-[30%] min-w-[8rem] items-center justify-center gap-2 rounded-2xl border bg-gray-900 px-4 py-3 font-mono text-sm font-bold text-foreground">
             {reducibleBalanceFormatted}
             {(!reducibleBalance || reducibleBalance?.isZero()) && (
               <Tooltip>

diff --git a/frontend/src/components/web3/new-chatroom-button.tsx b/frontend/src/components/web3/new-chatroom-button.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react'
 
 import { AppContext } from '@/context/app-context'
-import { useInkathon, useRegisteredContract } from '@scio-labs/use-inkathon'
+import { useInkathon } from '@scio-labs/use-inkathon'
 import { FiChevronDown } from 'react-icons/fi'
 
 import { env } from '@/config/environment'
@@ -18,7 +18,9 @@ import { Input } from '../ui/input'
 const NewChatRoomButton = () => {
   const { activeAccount } = useInkathon()
   const [participantId, setParticipantId] = useState<string>()
-  const { isChatroomActive, createChatroom, deleteChatroom, inviteFriends } = useContext(AppContext)
+  const [joinChatroomId, setJoinChatroomId] = useState<string>()
+  const { isChatroomActive, createChatroom, deleteChatroom, inviteFriends, joinChatroom } =
+    useContext(AppContext)
 
   const handleCreateChat = async (chain: any) => {
     if (chain.name == 'Aleph Zero') {
@@ -38,66 +40,96 @@ const NewChatRoomButton = () => {
     await inviteFriends([participantId])
   }
 
+  const handleJoinChatroom = async () => {
+    if (!joinChatroomId) return
+
+    await joinChatroom(joinChatroomId)
+  }
+
   return (
     <div className="mt-8 w-full">
-      {activeAccount && isChatroomActive ? ( //
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            asChild
-            className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
-          >
+      {activeAccount && !isChatroomActive ? ( //
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              asChild
+              className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
+            >
+              <Button
+                className="h-12 w-full min-w-[14rem] gap-2 rounded-2xl border border-white/10 bg-primary px-4 py-3 font-bold text-foreground"
+                translate="no"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex flex-col items-center justify-center">
+                    <span className="text-xs font-normal">New Chatroom</span>
+                  </div>
+                  <FiChevronDown className="shrink-0" size={22} aria-hidden="true" />
+                </div>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="no-scrollbar max-h-[40vh] w-full min-w-[20rem] overflow-scroll rounded-2xl"
+            >
+              {/* Deploy chatroom to a supported chain */}
+              {env.chatroomChains.map((chain) => (
+                <DropdownMenuItem
+                  key={`network-${chain.name}`}
+                  className="cursor-pointer"
+                  onClick={async () => await handleCreateChat(chain)}
+                >
+                  <div className="flex w-full flex-col items-center justify-start gap-2">
+                    <p>{chain.name}</p>
+                  </div>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Join chatroom form */}
+          <div className="mt-5 flex w-full gap-4">
+            <Input
+              placeholder="Chatroom ID"
+              type="text"
+              className="w-[65%]"
+              onChange={(e) => setJoinChatroomId(String(e.target.value))}
+            />
+
             <Button
-              className="h-12 w-full min-w-[14rem] gap-2 rounded-2xl border border-white/10 bg-primary px-4 py-3 font-bold text-foreground"
+              onClick={handleJoinChatroom}
+              disabled={joinChatroomId?.length == 0}
+              variant="secondary"
+              className="w-[35%] min-w-[6rem] border"
               translate="no"
             >
-              <div className="flex items-center justify-between gap-2">
-                <div className="flex flex-col items-center justify-center">
-                  <span className="text-xs font-normal">New Group Chat</span>
-                </div>
-                <FiChevronDown className="shrink-0" size={22} aria-hidden="true" />
-              </div>
+              Join Chatroom
             </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="no-scrollbar max-h-[40vh] w-full min-w-[20rem] overflow-scroll rounded-2xl"
-          >
-            {/* Supported Chains */}
-            {env.chatroomChains.map((chain) => (
-              <DropdownMenuItem
-                key={`network-${chain.name}`}
-                className="cursor-pointer"
-                onClick={async () => await handleCreateChat(chain)}
-              >
-                <div className="flex w-full flex-col items-center justify-start gap-2">
-                  <p>{chain.name}</p>
-                </div>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </div>
+        </>
       ) : (
         <div className="flex select-none flex-wrap items-stretch justify-center gap-4">
-          <div className="flex w-full">
+          {/* Invite friends form */}
+          <div className="flex w-full gap-4">
             <Input
               placeholder="Account ID"
               type="text"
+              className="w-[65%]"
               onChange={(e) => setParticipantId(String(e.target.value))}
             />
 
             <Button
               onClick={handleInviteFriends}
-              variant="outline"
-              className="min-w-[14rem] border"
+              variant="secondary"
+              className="w-[35%] min-w-[6rem] border"
               translate="no"
             >
               Invite friends
             </Button>
           </div>
           <Button
             onClick={handleDeleteChatroom}
-            variant="destructive"
-            className="min-w-[10rem] border"
+            variant="ghost"
+            className="w-full min-w-[10rem] border"
             translate="no"
           >
             Delete chatroom

diff --git a/frontend/src/components/web3/send-message.tsx b/frontend/src/components/web3/send-message.tsx
@@ -30,8 +30,8 @@ export const SendMessage: FC = () => {
 
   // send a message
   const handleSendMessage: SubmitHandler<z.infer<typeof formSchema>> = async ({ newMessage }) => {
-    toast.error('Please type a message')
     if (newMessage == '') {
+      toast.error('Please type a message')
       return
     }
     await sendMessage(newMessage)
@@ -63,7 +63,7 @@ export const SendMessage: FC = () => {
                   <Button
                     type="submit"
                     className="bg-primary font-bold"
-                    disabled={form.formState.isSubmitting}
+                    disabled={form.formState.isSubmitting || !form.formState.isValid}
                     isLoading={form.formState.isSubmitting}
                   >
                     Send