feat: introduce useSocial and useSocialProfile hooks

jest.config.ts

@@ -14,7 +14,7 @@ const config: Config = {
   preset: 'ts-jest',
   rootDir: './',
   setupFiles: ['<rootDir>/test/setup.ts'],
-  testEnvironment: 'node',
+  testEnvironment: 'jest-environment-jsdom',
   transform: {
     '^.+\\.ts?$': [
       'ts-jest',

package.json

@@ -52,6 +52,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.3",
     "@semantic-release/release-notes-generator": "^13.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.8",
     "@typescript-eslint/parser": "^7.7.1",
@@ -62,6 +63,7 @@
     "globals": "^15.0.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "near-sandbox": "0.0.18",
     "prettier": "^3.2.5",

src/components/SocialProvider.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Social from '../controllers/Social';
+
+type SocialContextType = {
+  social: Social;
+};
+
+export const SocialContext = React.createContext<SocialContextType | undefined>(undefined);
+
+type SocialProviderProps = {
+  children: React.ReactNode;
+  contractId?: string;
+  onProvision?: (social: Social) => void;
+};
+
+export const SocialProvider = ({
+  children,
+  contractId,
+  onProvision,
+}: SocialProviderProps) => {
+  const [social] = React.useState<Social>(new Social({ contractId }));
+
+  React.useEffect(() => {
+    if (contractId) {
+      social.setContractId(contractId);
+    }
+  }, [contractId, social]);
+
+  React.useEffect(() => {
+    if (onProvision) {
+      onProvision(social);
+    }
+  }, [social, onProvision]);
+
+  return (
+    <SocialContext.Provider value={{ social }}>
+      {children}
+    </SocialContext.Provider>
+  );
+};

src/constants/SocialNearIpfs.ts

@@ -0,0 +1 @@
+export const SOCIAL_IPFS_BASE_URL = 'https://ipfs.near.social/ipfs';

src/constants/index.ts

@@ -1 +1,2 @@
 export * from './Fees';
+export * from './SocialNearIpfs';

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useSocialProfile';
+export * from './useSocial';

src/hooks/useSocial.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { SocialProvider } from '../components/SocialProvider';
+import { useSocial } from '@app/hooks';
+import { Account } from 'near-api-js';
+import createEphemeralAccount from '@test/helpers/createEphemeralAccount';
+
+jest.mock('@app/hooks', () => ({
+
+  useSocial: jest.fn(() => ({
+    social: {
+      async get({ keys }: { keys: string[] }) {
+        return keys.reduce((acc, key) => {
+          acc[key] = { profile: { name: 'TestUser' } };
+          return acc;
+        }, {} as Record<string, any>);
+      },
+      async getVersion() {
+        return '1.0.0';
+      },
+      async set({ data }: { data: Record<string, any> }) {
+        return { data };
+      },
+      setContractId(contractId: string) {
+        return contractId;
+      },
+    },
+  })),
+}));
+
+describe('useSocial hook', () => {
+  let signer: Account;
+
+  beforeEach(async () => {
+    const result = await createEphemeralAccount();
+    signer = result.account;
+  });
+
+  it('should fetch data using get method', async () => {
+    const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <SocialProvider>
+        {children}
+      </SocialProvider>
+    );
+
+    const { result } = renderHook(() => useSocial(), { wrapper });
+
+    const { social } = result.current;
+
+    let data: any;
+    await React.act(async () => {
+      data = await social.get({ keys: ['unknown.test.near'], signer });
+    });
+
+    expect(data).toEqual({ 'unknown.test.near': { profile: { name: 'TestUser' } } });
+  });
+});

src/hooks/useSocial.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { SocialContext } from '../components/SocialProvider';
+
+export const useSocial = () => {
+  const context = useContext(SocialContext);
+  if (context === undefined) {
+    throw new Error('useSocial must be used within a SocialProvider');
+  }
+  return context;
+};

src/hooks/useSocialProfile.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { SocialProvider } from '../components/SocialProvider';
+import { useSocialProfile } from '@app/hooks';
+import { Account } from 'near-api-js';
+import createEphemeralAccount from '@test/helpers/createEphemeralAccount';
+
+jest.mock('@app/hooks', () => ({
+  useSocialProfile: jest.fn(() => ({
+    profile: { name: 'TestUser', description: 'Test description' },
+    profileImageUrl: 'https://example.com/image.jpg',
+    error: null,
+  })),
+}));
+
+describe('useSocialProfile hook', () => {
+  let signer: Account;
+
+  beforeEach(async () => {
+    const result = await createEphemeralAccount();
+    signer = result.account;
+  });
+
+  it('should fetch profile data for a given accountId', async () => {
+    const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <SocialProvider>
+        {children}
+      </SocialProvider>
+    );
+
+    const { result } = renderHook(() => useSocialProfile(signer.accountId, signer), { wrapper });
+    const { profile } = result.current;
+
+    expect(profile).toEqual({ name: 'TestUser', description: 'Test description' });
+  });
+});

src/hooks/useSocialProfile.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useSocial } from './useSocial';
+import { SOCIAL_IPFS_BASE_URL } from '../constants';
+import { ISocialProfile } from '@app/types';
+import { Account } from 'near-api-js';
+
+export const useSocialProfile = (
+  accountId: string | null | undefined,
+  signer: Account
+) => {
+  const { social } = useSocial();
+  const [profile, setProfile] = useState<ISocialProfile | undefined>(undefined);
+  const [error, setError] = useState<string | null>(null);
+
+  const profileImageUrl =
+    profile?.image?.url ?? profile?.image?.ipfs_cid
+      ? `${SOCIAL_IPFS_BASE_URL}/${profile?.image?.ipfs_cid}`
+      : undefined;
+
+  useEffect(() => {
+    if (!accountId || !social) return;
+
+    const fetchProfile = async () => {
+      try {
+        const response = await social.get({
+          signer,
+          keys: [`${accountId}/profile/**`],
+        });
+
+        setProfile(
+          (response[accountId] as { profile?: ISocialProfile })?.profile ?? {}
+        );
+      } catch (error) {
+        console.error(error);
+        setError('Failed to fetch profile data');
+      }
+    };
+
+    fetchProfile();
+  }, [accountId, social, signer]);
+
+  return {
+    profile,
+    profileImageUrl,
+    error,
+  };
+};

src/types/ISocialProfile.ts

@@ -0,0 +1,20 @@
+interface ISocialProfile {
+  backgroundImage?: {
+    ipfs_cid?: string;
+    url?: string;
+  };
+  description?: string;
+  linktree?: {
+    github?: string;
+    twitter?: string;
+    website?: string;
+  };
+  name?: string;
+  image?: {
+    ipfs_cid?: string;
+    url?: string;
+  };
+  tags?: Record<string, ''>;
+}
+
+export default ISocialProfile;

src/types/index.ts

@@ -16,3 +16,4 @@ export type { default as ISocialDBContractStorageBalanceOfArgs } from './ISocial
 export type { default as ISocialDBContractStorageDepositArgs } from './ISocialDBContractStorageDepositArgs';
 export type { default as ISocialDBContractStorageTracker } from './ISocialDBContractStorageTracker';
 export type { default as IStorageBalanceOfOptions } from './IStorageBalanceOfOptions';
+export type { default as ISocialProfile } from './ISocialProfile';

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "alwaysStrict": true,
@@ -25,6 +26,7 @@
       "@app/enums": ["src/enums"],
       "@app/types": ["src/types"],
       "@app/utils/*": ["src/utils/*"],
+      "@app/hooks": ["src/hooks"],
       "@test/constants": ["test/constants"],
       "@test/credentials/*": ["test/credentials/*"],
       "@test/helpers/*": ["test/helpers/*"]