integrates near-social-js

NEARBuilders · Oct 6, 2024 · a7e214e · a7e214e
1 parent 3ea5901
commit a7e214e
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     ]
   },
   "dependencies": {
+    "@builddao/near-social-js": "^1.1.0",
     "@hookform/resolvers": "^3.3.4",
     "@near-js/providers": "^1.0.0",
     "@near-wallet-selector/core": "^8.9.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/shared/user-nav.tsx b/src/components/shared/user-nav.tsx
@@ -11,49 +11,78 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
 import { useWallet } from '@/hooks/use-wallet';
+import { getProfile } from '@/lib/social';
+import { useQuery } from '@tanstack/react-query';
+import { AlertCircle, Loader } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 export default function UserNav() {
   const { wallet, signedAccountId } = useWallet();
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['profile', signedAccountId],
+    queryFn: async () => getProfile(signedAccountId),
+    retry: 3
+  });
+
+  const renderAvatarContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-secondary">
+          <Loader className="h-6 w-6 animate-spin text-primary" />
+        </div>
+      );
+    }
+    if (isError) {
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-secondary">
+          <AlertCircle className="h-6 w-6 text-destructive" />
+        </div>
+      );
+    }
+    return (
+      <>
+        <AvatarImage
+          src={
+            `https://ipfs.near.social/ipfs/${data?.image?.ipfs_cid}` ||
+            'https://png.pngtree.com/png-clipart/20230927/original/pngtree-man-avatar-image-for-profile-png-image_13001882.png'
+          }
+          alt={`${data?.name}` || signedAccountId || ''}
+        />
+        <AvatarFallback>
+          {data?.name?.[0] || signedAccountId?.[0] || 'U'}
+        </AvatarFallback>
+      </>
+    );
+  };
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-14 w-14 rounded-full">
-          <Avatar className="h-14 w-14">
-            <AvatarImage
-              src={
-                'https://png.pngtree.com/png-clipart/20230927/original/pngtree-man-avatar-image-for-profile-png-image_13001882.png'
-              }
-              alt={''}
-            />
-            <AvatarFallback>hello</AvatarFallback>
-          </Avatar>
+          <Avatar className="h-14 w-14">{renderAvatarContent()}</Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">{'Admin'}</p>
+            <p className="text-sm font-medium leading-none">
+              {`${data?.name}` || 'User'}
+            </p>
             <p className="text-xs leading-none text-muted-foreground">
               {signedAccountId}
             </p>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem>
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>New Team</DropdownMenuItem>
+          <Link
+            to={`https://near.social/mob.near/widget/ProfilePage?accountId=${signedAccountId}`}
+          >
+            <DropdownMenuItem>
+              Profile
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </Link>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={() => wallet?.signOut()}>

diff --git a/src/lib/social.ts b/src/lib/social.ts
@@ -0,0 +1,37 @@
+import { Social } from '@builddao/near-social-js';
+import { NETWORK_ID } from './near';
+
+export type Profile = {
+  name: string;
+  description: string;
+  image: {
+    ipfs_cid: string;
+  };
+  backgroundImage: {
+    ipfs_cid: string;
+  };
+};
+
+const SOCIAL_CONTRACT = {
+  mainnet: 'social.near',
+  testnet: 'v1.social08.testnet'
+};
+
+const social = new Social({
+  contractId: SOCIAL_CONTRACT[NETWORK_ID],
+  network: NETWORK_ID
+});
+
+export async function getProfile(username: string): Promise<Profile | null> {
+  const response = await social.get({
+    keys: [`${username}/profile/**`]
+  });
+  if (!response) {
+    return null;
+  }
+  const { profile } = (response as Record<string, { profile: Profile }>)[
+    username
+  ];
+
+  return profile;
+}