refactor: migrate nft (#1714)

package.json

@@ -144,22 +144,22 @@
       "default": "./esm/identity/index.js"
     },
     "./nft": {
-      "types": "./esm/nft/index.d.ts",
-      "module": "./esm/nft/index.js",
-      "import": "./esm/nft/index.js",
-      "default": "./esm/nft/index.js"
+      "types": "./esm/ui/react/nft/index.d.ts",
+      "module": "./esm/ui/react/nft/index.js",
+      "import": "./esm/ui/react/nft/index.js",
+      "default": "./esm/ui/react/nft/index.js"
     },
     "./nft/view": {
-      "types": "./esm/nft/components/view/index.d.ts",
-      "module": "./esm/nft/components/view/index.js",
-      "import": "./esm/nft/components/view/index.js",
-      "default": "./esm/nft/components/view/index.js"
+      "types": "./esm/ui/react/nft/view/index.d.ts",
+      "module": "./esm/ui/react/nft/view/index.js",
+      "import": "./esm/ui/react/nft/view/index.js",
+      "default": "./esm/ui/react/nft/view/index.js"
     },
     "./nft/mint": {
-      "types": "./esm/nft/components/mint/index.d.ts",
-      "module": "./esm/nft/components/mint/index.js",
-      "import": "./esm/nft/components/mint/index.js",
-      "default": "./esm/nft/components/mint/index.js"
+      "types": "./esm/ui/react/nft/mint/index.d.ts",
+      "module": "./esm/ui/react/nft/mint/index.js",
+      "import": "./esm/ui/react/nft/mint/index.js",
+      "default": "./esm/ui/react/nft/mint/index.js"
     },
     "./swap": {
       "types": "./esm/swap/index.d.ts",

playground/nextjs-app-router/onchainkit/package.json

@@ -144,22 +144,22 @@
       "default": "./esm/identity/index.js"
     },
     "./nft": {
-      "types": "./esm/nft/index.d.ts",
-      "module": "./esm/nft/index.js",
-      "import": "./esm/nft/index.js",
-      "default": "./esm/nft/index.js"
+      "types": "./esm/ui/react/nft/index.d.ts",
+      "module": "./esm/ui/react/nft/index.js",
+      "import": "./esm/ui/react/nft/index.js",
+      "default": "./esm/ui/react/nft/index.js"
     },
     "./nft/view": {
-      "types": "./esm/nft/components/view/index.d.ts",
-      "module": "./esm/nft/components/view/index.js",
-      "import": "./esm/nft/components/view/index.js",
-      "default": "./esm/nft/components/view/index.js"
+      "types": "./esm/ui/react/nft/view/index.d.ts",
+      "module": "./esm/ui/react/nft/view/index.js",
+      "import": "./esm/ui/react/nft/view/index.js",
+      "default": "./esm/ui/react/nft/view/index.js"
     },
     "./nft/mint": {
-      "types": "./esm/nft/components/mint/index.d.ts",
-      "module": "./esm/nft/components/mint/index.js",
-      "import": "./esm/nft/components/mint/index.js",
-      "default": "./esm/nft/components/mint/index.js"
+      "types": "./esm/ui/react/nft/mint/index.d.ts",
+      "module": "./esm/ui/react/nft/mint/index.js",
+      "import": "./esm/ui/react/nft/mint/index.js",
+      "default": "./esm/ui/react/nft/mint/index.js"
     },
     "./swap": {
       "types": "./esm/swap/index.d.ts",

src/nft/hooks/useMintData.test.ts → src/core-react/nft/hooks/useMintData.test.ts

@@ -9,11 +9,11 @@ import {
   vi,
 } from 'vitest';
 import { useAccount } from 'wagmi';
-import { useNFTLifecycleContext } from '../components/NFTLifecycleProvider';
+import { useNFTLifecycleContext } from '../providers/NFTLifecycleProvider';
 import { useMintData } from './useMintData';
 import { useMintDetails } from './useMintDetails';
 
-vi.mock('../components/NFTLifecycleProvider');
+vi.mock('../providers/NFTLifecycleProvider');
 vi.mock('./useMintDetails');
 vi.mock('wagmi');
 

src/nft/hooks/useMintData.ts → src/core-react/nft/hooks/useMintData.ts

@@ -1,8 +1,9 @@
+import type { NFTError } from '@/core/api/types';
+import { convertIpfsToHttps } from '@/core/nft/utils/ipfs';
 import { useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
-import { useNFTLifecycleContext } from '../components/NFTLifecycleProvider';
-import type { NFTData, NFTError } from '../types';
-import { convertIpfsToHttps } from '../utils/ipfs';
+import { useNFTLifecycleContext } from '../providers/NFTLifecycleProvider';
+import type { NFTData } from '../types';
 import { useMintDetails } from './useMintDetails';
 
 export function useMintData(

src/nft/hooks/useMintDetails.test.ts → src/core-react/nft/hooks/useMintDetails.test.ts

@@ -1,10 +1,10 @@
+import { getMintDetails } from '@/core/api/getMintDetails';
 import { renderHook, waitFor } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
-import { getMintDetails } from '../../core/api/getMintDetails';
-import { getNewReactQueryTestProvider } from '../../identity/hooks/getNewReactQueryTestProvider';
+import { getNewReactQueryTestProvider } from '../../../identity/hooks/getNewReactQueryTestProvider';
 import { useMintDetails } from './useMintDetails';
 
-vi.mock('../../core/api/getMintDetails');
+vi.mock('@/core/api/getMintDetails');
 
 describe('useMintDetails', () => {
   beforeEach(() => {

src/nft/hooks/useMintDetails.ts → src/core-react/nft/hooks/useMintDetails.ts

@@ -1,7 +1,7 @@
+import { getMintDetails } from '@/core/api/getMintDetails';
+import type { GetMintDetailsParams, MintDetails } from '@/core/api/types';
+import { isNFTError } from '@/core/nft/utils/isNFTError';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-import { getMintDetails } from '../../core/api/getMintDetails';
-import type { GetMintDetailsParams, MintDetails } from '../../core/api/types';
-import { isNFTError } from '../utils/isNFTError';
 
 export function useMintDetails({
   contractAddress,

src/nft/hooks/useNFTData.test.ts → src/core-react/nft/hooks/useNFTData.test.ts

@@ -8,12 +8,12 @@ import {
   it,
   vi,
 } from 'vitest';
-import { useNFTLifecycleContext } from '../components/NFTLifecycleProvider';
+import { useNFTLifecycleContext } from '../providers/NFTLifecycleProvider';
 import { useNFTData } from './useNFTData';
 import { useTokenDetails } from './useTokenDetails';
 
 vi.mock('./useTokenDetails');
-vi.mock('../components/NFTLifecycleProvider');
+vi.mock('../providers/NFTLifecycleProvider');
 
 describe('useNFTData', () => {
   const mockUpdateLifecycleStatus = vi.fn();

src/nft/hooks/useNFTData.ts → src/core-react/nft/hooks/useNFTData.ts

@@ -1,7 +1,8 @@
+import type { ContractType, NFTError } from '@/core/api/types';
+import { convertIpfsToHttps } from '@/core/nft/utils/ipfs';
 import { useEffect, useState } from 'react';
-import { useNFTLifecycleContext } from '../components/NFTLifecycleProvider';
-import type { ContractType, NFTData, NFTError } from '../types';
-import { convertIpfsToHttps } from '../utils/ipfs';
+import { useNFTLifecycleContext } from '../providers/NFTLifecycleProvider';
+import type { NFTData } from '../types';
 import { useTokenDetails } from './useTokenDetails';
 
 export function useNFTData(

src/nft/hooks/useTokenDetails.test.ts → src/core-react/nft/hooks/useTokenDetails.test.ts

@@ -1,10 +1,10 @@
+import { getTokenDetails } from '@/core/api/getTokenDetails';
 import { renderHook, waitFor } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
-import { getTokenDetails } from '../../core/api/getTokenDetails';
-import { getNewReactQueryTestProvider } from '../../identity/hooks/getNewReactQueryTestProvider';
+import { getNewReactQueryTestProvider } from '../../../identity/hooks/getNewReactQueryTestProvider';
 import { useTokenDetails } from './useTokenDetails';
 
-vi.mock('../../core/api/getTokenDetails');
+vi.mock('@/core/api/getTokenDetails');
 
 describe('useTokenDetails', () => {
   beforeEach(() => {

src/nft/hooks/useTokenDetails.ts → src/core-react/nft/hooks/useTokenDetails.ts

@@ -1,7 +1,7 @@
+import { getTokenDetails } from '@/core/api/getTokenDetails';
+import type { GetTokenDetailsParams, TokenDetails } from '@/core/api/types';
+import { isNFTError } from '@/core/nft/utils/isNFTError';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-import { getTokenDetails } from '../../core/api/getTokenDetails';
-import type { GetTokenDetailsParams, TokenDetails } from '../../core/api/types';
-import { isNFTError } from '../utils/isNFTError';
 
 export function useTokenDetails({
   contractAddress,

src/nft/components/NFTLifecycleProvider.test.tsx → src/core-react/nft/providers/NFTLifecycleProvider.test.tsx

@@ -1,13 +1,9 @@
 import '@testing-library/jest-dom';
+import type { NFTError } from '@/core/api/types';
 import { fireEvent, render } from '@testing-library/react';
 import type { TransactionReceipt } from 'viem';
 import { describe, expect, it, vi } from 'vitest';
-import {
-  type LifecycleStatus,
-  LifecycleType,
-  MediaType,
-  type NFTError,
-} from '../types';
+import { type LifecycleStatus, LifecycleType, MediaType } from '../types';
 import {
   NFTLifecycleProvider,
   useNFTLifecycleContext,

src/nft/components/NFTLifecycleProvider.tsx → src/core-react/nft/providers/NFTLifecycleProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect } from 'react';
-import { useValue } from '../../core-react/internal/hooks/useValue';
+import { useValue } from '../../internal/hooks/useValue';
 import { useLifecycleStatus } from '../hooks/useLifecycleStatus';
 import type {
   NFTLifecycleContextType,

src/nft/components/NFTProvider.tsx → src/core-react/nft/providers/NFTProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext, useState } from 'react';
-import { useValue } from '../../core-react/internal/hooks/useValue';
+import { useValue } from '../../internal/hooks/useValue';
 import type { NFTContextType, NFTProviderReact } from '../types';
 
 const emptyContext = {} as NFTContextType;

src/nft/types.ts → src/core-react/nft/types.ts

@@ -1,8 +1,7 @@
+import type { ContractType, NFTError, NFTPrice } from '@/core/api/types';
 import type { ReactNode } from 'react';
 import type { Address, Hex, TransactionReceipt } from 'viem';
-import type { Call, TransactionError } from '../transaction/types';
-
-export type ContractType = 'ERC721' | 'ERC1155';
+import type { Call } from '../../transaction/types';
 
 export enum MediaType {
   Image = 'image',
@@ -52,12 +51,6 @@ export type NFTProviderReact = {
   buildMintTransaction?: BuildMintTransaction;
 };
 
-export type NFTPrice = {
-  amount?: string; // Amount in Currency
-  currency?: string; // Currency
-  amountUSD?: string; // Amount in USD
-};
-
 /**
  * Note: exported as public Type
  */
@@ -160,18 +153,6 @@ export type NFTMintCardReact = {
  */
 export type NFTMintCardDefaultReact = Omit<NFTMintCardReact, 'children'>;
 
-/**
-/**
- * Note: exported as public Type
- */
-export type NFTError =
-  | {
-      code: string; // The error code representing the type of nft error.
-      error: string; // The error message providing details about the nft error.
-      message: string; // The error message providing details about the nft error.
-    }
-  | TransactionError;
-
 export type LifecycleStatus =
   | {
       statusName: 'init';

src/core/api/types.ts

@@ -1,5 +1,4 @@
 import type { Address } from 'viem';
-import type { ContractType, NFTPrice } from '../../nft/types';
 import type {
   Fee,
   QuoteWarning,
@@ -19,6 +18,17 @@ export type APIError = {
   message: string; // The Error short message
 };
 
+/**
+ * Note: exported as public Type
+ */
+export type TransactionError = APIError;
+
+/**
+/**
+ * Note: exported as public Type
+ */
+export type NFTError = APIError | TransactionError;
+
 /**
  * Note: exported as public Type
  */
@@ -150,6 +160,14 @@ export type RawTransactionData = {
 
 export type SwapAPIParams = GetQuoteAPIParams | GetSwapAPIParams;
 
+export type ContractType = 'ERC721' | 'ERC1155';
+
+export type NFTPrice = {
+  amount?: string; // Amount in Currency
+  currency?: string; // Currency
+  amountUSD?: string; // Amount in USD
+};
+
 /**
  * Note: exported as public Type
  */

src/nft/utils/buildMintTransactionData.test.ts → src/core/nft/utils/buildMintTransactionData.test.ts

@@ -1,9 +1,9 @@
 import type { Address } from 'viem';
 import { type Mock, describe, expect, it, vi } from 'vitest';
-import { buildMintTransaction as buildMintTransationApi } from '../../core/api/buildMintTransaction';
+import { buildMintTransaction as buildMintTransationApi } from '../../api/buildMintTransaction';
 import { buildMintTransactionData } from './buildMintTransactionData';
 
-vi.mock('../../core/api/buildMintTransaction');
+vi.mock('../../api/buildMintTransaction');
 
 describe('buildMintTransactionData', () => {
   const mockBuildMintTransaction = buildMintTransationApi as Mock;

src/nft/utils/buildMintTransactionData.ts → src/core/nft/utils/buildMintTransactionData.ts

@@ -1,7 +1,7 @@
 import type { Address } from 'viem';
-import { buildMintTransaction as buildMintTransactionApi } from '../../core/api/buildMintTransaction';
-import type { BuildMintTransactionParams } from '../../core/api/types';
-import type { Call } from '../../transaction/types';
+import type { Call } from '../../../transaction/types';
+import { buildMintTransaction as buildMintTransactionApi } from '../../api/buildMintTransaction';
+import type { BuildMintTransactionParams } from '../../api/types';
 
 async function getMintTransaction({
   mintAddress,

src/nft/utils/isNFTError.ts → src/core/nft/utils/isNFTError.ts

@@ -1,4 +1,4 @@
-import type { NFTError } from '../types';
+import type { NFTError } from '@/core/api/types';
 
 export function isNFTError(response: unknown): response is NFTError {
   return (

src/transaction/index.ts

@@ -13,7 +13,6 @@ export { TransactionToastLabel } from './components/TransactionToastLabel';
 export type {
   LifecycleStatus,
   TransactionButtonReact,
-  TransactionError,
   TransactionReact,
   TransactionResponse,
   TransactionSponsorReact,
@@ -26,3 +25,4 @@ export type {
   TransactionToastLabelReact,
   WalletCapabilities,
 } from './types';
+export type { TransactionError } from '@/core/api/types';

src/transaction/types.ts

@@ -1,4 +1,5 @@
 // 🌲☀🌲
+import type { TransactionError } from '@/core/api/types';
 import type { ReactNode } from 'react';
 import type {
   Address,
@@ -120,15 +121,6 @@ export type TransactionDefaultReact = {
   disabled?: boolean;
 } & Omit<TransactionReact, 'children'>;
 
-/**
- * Note: exported as public Type
- */
-export type TransactionError = {
-  code: string; // The error code representing the type of transaction error.
-  error: string; // The error message providing details about the transaction error.
-  message: string; // The error message providing details about the transaction error.
-};
-
 export type Calls = Call[] | Promise<Call[]> | (() => Promise<Call[]>);
 export type Contracts =
   | ContractFunctionParameters[]

src/nft/components/NFTCard.test.tsx → src/ui/react/nft/NFTCard.test.tsx

@@ -1,4 +1,6 @@
 import '@testing-library/jest-dom';
+import { useIsMounted } from '@/core-react/internal/hooks/useIsMounted';
+import { NFTProvider } from '@/core-react/nft/providers/NFTProvider';
 import { render } from '@testing-library/react';
 import {
   type Mock,
@@ -10,18 +12,16 @@ import {
   vi,
 } from 'vitest';
 import { useAccount } from 'wagmi';
-import { useIsMounted } from '../../core-react/internal/hooks/useIsMounted';
 import { NFTCard } from './NFTCard';
-import { NFTProvider } from './NFTProvider';
 
 vi.mock('wagmi', () => ({
   useAccount: vi.fn(),
 }));
-vi.mock('../../core-react/internal/hooks/useTheme', () => ({
+vi.mock('@/core-react/internal/hooks/useTheme', () => ({
   useTheme: vi.fn(() => 'default-light'),
 }));
-vi.mock('../../core-react/internal/hooks/useIsMounted');
-vi.mock('./NFTProvider', () => ({
+vi.mock('@/core-react/internal/hooks/useIsMounted');
+vi.mock('@/core-react/nft/providers/NFTProvider', () => ({
   NFTProvider: vi.fn(({ children }) => <div>{children}</div>),
 }));