frontend for twitter implemented

frontend/.astro/settings.json

@@ -1,6 +1,6 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1761559074026
+		"lastUpdateCheck": 1770638442880
 	},
 	"eslint.validate": [
 		"javascript",

frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx

@@ -30,6 +30,7 @@ const formSchema = z.object({
   name: z.string().min(2, { message: "Name must be at least 2 characters." }),
   description: z.string().optional(),
   githubLogin: z.string().optional(),
+  twitterHandle: z.string().optional(),
 });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -50,6 +51,7 @@ export function CreateProfileButton() {
         name: values.name,
         description: values.description || "",
         github_login: values.githubLogin || "",
+        twitter_handle: values.twitterHandle || "",
       },
     });
     await queryClient.invalidateQueries({ queryKey: ["profiles"] });
@@ -120,6 +122,22 @@ export function CreateProfileButton() {
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="twitterHandle"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Twitter/X Handle</FormLabel>
+                  <FormControl>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-gray-500">@</span>
+                      <Input placeholder="username" {...field} />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <div className="flex justify-end gap-2 pt-2">
               <DialogClose asChild>
                 <Button type="button" variant="secondary">

frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx

@@ -30,13 +30,15 @@ interface EditProfileDialogProps {
   name?: string;
   description?: string;
   githubLogin?: string;
+  twitterHandle?: string;
   children: React.ReactNode;
 }
 
 const formSchema = z.object({
   name: z.string().min(2, { message: "Name must be at least 2 characters." }),
   description: z.string().optional(),
   githubLogin: z.string().optional(),
+  twitterHandle: z.string().optional(),
 });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -46,6 +48,7 @@ export function EditProfileDialog({
   name,
   description,
   githubLogin,
+  twitterHandle,
   children,
 }: EditProfileDialogProps) {
   const [open, setOpen] = useState(false);
@@ -58,6 +61,7 @@ export function EditProfileDialog({
       name: name || "",
       description: description || "",
       githubLogin: githubLogin || "",
+      twitterHandle: twitterHandle || "",
     },
   });
 
@@ -67,9 +71,10 @@ export function EditProfileDialog({
         name: name || "",
         description: description || "",
         githubLogin: githubLogin || "",
+        twitterHandle: twitterHandle || "",
       });
     }
-  }, [open, name, description, githubLogin, form]);
+  }, [open, name, description, githubLogin, twitterHandle, form]);
 
   const onSubmit = async (values: FormValues) => {
     try {
@@ -78,6 +83,7 @@ export function EditProfileDialog({
           name: values.name,
           description: values.description || "",
           github_login: values.githubLogin || "",
+          twitter_handle: values.twitterHandle || "",
         },
       });
       await queryClient.invalidateQueries({ queryKey: ["profiles"] });
@@ -145,6 +151,22 @@ export function EditProfileDialog({
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="twitterHandle"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Twitter/X Handle</FormLabel>
+                  <FormControl>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-gray-500">@</span>
+                      <Input placeholder="username" {...field} />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <div className="flex justify-end gap-2 pt-2">
               <DialogClose asChild>
                 <Button type="button" variant="secondary">

frontend/src/components/profiles/list/ProfileCard.tsx

@@ -20,6 +20,7 @@ interface ProfileCardProps {
   description?: string;
   avatar?: string;
   githubLogin?: string;
+  twitterHandle?: string;
   attestationCount: number;
   attestations: Array<{
     id: string;
@@ -35,6 +36,7 @@ export function ProfileCard({
   description,
   avatar,
   githubLogin,
+  twitterHandle,
   attestationCount,
   attestations,
 }: ProfileCardProps) {
@@ -96,6 +98,7 @@ export function ProfileCard({
             name={name}
             description={description}
             githubLogin={githubLogin}
+            twitterHandle={twitterHandle}
           >
             <Button
               variant="ghost"

frontend/src/components/profiles/list/ProfilesList.tsx

@@ -22,6 +22,7 @@ export function ProfilesList() {
           name: p.name || "",
           description: p.description || "",
           githubLogin: p.github_login,
+          twitterHandle: p.twitter_handle,
           attestationCount: 0,
           attestations: [],
         }))
@@ -116,6 +117,7 @@ export function ProfilesList() {
                 name={profile.name}
                 description={profile.description}
                 githubLogin={profile.githubLogin}
+                twitterHandle={profile.twitterHandle}
                 attestationCount={profile.attestationCount}
                 attestations={profile.attestations}
               />

frontend/src/components/profiles/profile-page/ProfileActions.tsx

@@ -10,11 +10,13 @@ export function ProfileActions({
   name,
   description,
   githubLogin,
+  twitterHandle,
 }: {
   address?: string;
   name?: string;
   description?: string;
   githubLogin?: string;
+  twitterHandle?: string;
 }) {
   const { address: connectedAddress } = useAccount();
   const isOwner =
@@ -30,6 +32,7 @@ export function ProfileActions({
           name={name}
           description={description}
           githubLogin={githubLogin}
+          twitterHandle={twitterHandle}
         >
           <Button variant="outline" className="flex items-center gap-2">
             <Edit className="h-4 w-4" /> Edit Profile

frontend/src/components/profiles/profile-page/ProfileHeader.tsx

@@ -3,18 +3,21 @@ import { useAccount } from "wagmi";
 import AddressTokenBalance from "@/components/AddressTokenBalance";
 import CopyAddressToClipboard from "@/components/CopyAddressToClipboard";
 import { GithubIcon } from "@/components/ui/GithubIcon";
+import { XIcon } from "@/components/ui/XIcon";
 
 interface ProfileHeaderProps {
   address: string;
   name?: string;
   description?: string;
   githubLogin?: string;
+  twitterHandle?: string;
 }
 
 export function ProfileHeader({
   address,
   name,
   githubLogin,
+  twitterHandle,
 }: ProfileHeaderProps) {
   const displayName = name || (address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "Profile");
   const displayAddress = address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "";
@@ -60,6 +63,19 @@ export function ProfileHeader({
             </a>
           </div>
         )}
+        {twitterHandle && (
+          <div className="flex items-center gap-1.5 mt-1">
+            <XIcon className="h-4 w-4 text-gray-500" />
+            <a
+              href={`https://x.com/${twitterHandle}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-gray-700 hover:text-indigo-600 hover:underline"
+            >
+              @{twitterHandle}
+            </a>
+          </div>
+        )}
         <AddressTokenBalance address={address as `0x${string}`} />
       </div>
     </header>

frontend/src/components/profiles/profile-page/ProfileMain.tsx

@@ -24,13 +24,15 @@ export function ProfileMain({ address }: { address: string }) {
         name={profile?.name}
         description={profile?.description}
         githubLogin={profile?.github_login}
+        twitterHandle={profile?.twitter_handle}
       />
       <div className="mt-6">
         <ProfileActions
           address={address}
           name={profile?.name}
           description={profile?.description}
           githubLogin={profile?.github_login}
+          twitterHandle={profile?.twitter_handle}
         />
       </div>
       <ProfileDescription description={profile?.description} />

frontend/src/components/ui/XIcon.tsx

@@ -0,0 +1,16 @@
+interface XIconProps {
+  className?: string;
+}
+
+export function XIcon({ className = "h-4 w-4" }: XIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}

frontend/src/lib/constants/profileConstants.ts

@@ -6,6 +6,7 @@ export const PROFILES: Profile[] = [
     name: "Alice Developer",
     description: "Full-stack developer passionate about Web3 and Rust",
     githubLogin: "alice-dev",
+    twitterHandle: "alice_dev",
     attestationCount: 5,
     attestations: [
       {
@@ -33,6 +34,7 @@ export const PROFILES: Profile[] = [
     name: "Bob Builder",
     description: "Smart contract developer and DeFi enthusiast",
     githubLogin: "bob-builder",
+    twitterHandle: "bob_builder",
     attestationCount: 3,
     attestations: [
       {
@@ -53,7 +55,8 @@ export const PROFILES: Profile[] = [
     address: "0x5555...7777",
     name: "", 
     description: "", 
-    githubLogin: undefined, 
+    githubLogin: undefined,
+    twitterHandle: undefined, 
     attestationCount: 2,
     attestations: [
       {

frontend/src/lib/types/api.d.ts

@@ -3,13 +3,15 @@ export type CreateProfileInput = {
   description?: string;
   avatar_url?: string;
   github_login?: string;
+  twitter_handle?: string;
 };
 
 export type UpdateProfileInput = {
   name?: string;
   description?: string;
   avatar_url?: string;
   github_login?: string;
+  twitter_handle?: string;
 };
 
 export type UpdateProfileResponse = unknown;

frontend/src/lib/types/profiles.d.ts

@@ -10,6 +10,7 @@ export type Profile = {
   name: string;
   description: string;
   githubLogin?: string;
+  twitterHandle?: string;
   attestationCount: number;
   attestations: ProfileAttestation[];
 };
@@ -20,6 +21,7 @@ export type ProfileFromAPI = {
   description?: string;
   avatar_url?: string;
   github_login?: string;
+  twitter_handle?: string;
   created_at?: string;
   updated_at?: string;
 };