refactor: update new licensing methods

app/admin/CreateIpaBoundLicenseWriteAccordion.tsx

@@ -20,7 +20,7 @@ export default function CreateIpaBoundLicenseWriteAccordion({
   return (
     <div className="flex flex-col gap-2">
       <WriteAccordionInputForm
-        fcnName={'license.create (IPA-bound license)'}
+        fcnName={'license.create'}
         description={'To create an IP Asset within this IP Organization (IPO), the IPO must be configured to allow it.'}
         formSchema={createIpaBoundLicenseSchema}
         hook={useCreateLicense}

app/admin/CreateLicenseNftWriteAccordion.tsx

@@ -2,29 +2,25 @@
 import React from 'react';
 import * as z from 'zod';
 import WriteAccordionInputForm from './WriteAccordionInputForm';
-import { CreateLicenseNftRequest } from '@story-protocol/core-sdk';
+import { CreateLicenseRequest } from '@story-protocol/core-sdk';
 import useCreateLicense from '@/hooks/useCreateLicense';
-import { useAccount } from 'wagmi';
 
 export default function CreateLicenseNftWriteAccordion({
   defaultValues,
 }: {
-  defaultValues: Partial<CreateLicenseNftRequest>;
+  defaultValues: Partial<CreateLicenseRequest>;
 }) {
-  const { address } = useAccount();
   const createIpaBoundLicenseSchema = z.object({
     ipOrgId: z.string().min(1, {
       message: 'Required.',
     }),
   });
 
-  defaultValues.licensee = address;
-
   return (
     <div className="flex flex-col gap-2">
       <h1 className="font-semibold text-2xl">License</h1>
       <WriteAccordionInputForm
-        fcnName={'license.create (IPA-bound license)'}
+        fcnName={'license.create'}
         description={'To create an IP Asset within this IP Organization (IPO), the IPO must be configured to allow it.'}
         formSchema={createIpaBoundLicenseSchema}
         hook={useCreateLicense}

app/admin/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
         <ModuleReadAccordion />
         <HookReadAccordion />
       </section>
-      <h1 className="text-2xl pt-10 pb-4">Write from SDK</h1>
+      <h1 className="text-2xl pt-10 pb-4">Write to SDK</h1>
       <section className="flex flex-col gap-4">
         <IpOrgWriteAccordion />
         <IPAssetWriteAccordion />

app/ipa/[ipOrgId]/[ipAssetId]/page.tsx

@@ -10,7 +10,7 @@ import LicenseReadAccordion from '@/app/admin/LicenseReadAccordion';
 import AssetRelationshipTableWrapper from '@/components/views/Asset/AssetRelationshipTableWrapper';
 import IpOrgLicenseDataViewer from '@/components/views/Licenses';
 import CreateIpaBoundLicenseWriteAccordion from '@/app/admin/CreateIpaBoundLicenseWriteAccordion';
-import { CreateIpaBoundLicenseRequest } from '@story-protocol/core-sdk';
+import { CreateLicenseRequest } from '@story-protocol/core-sdk';
 import RelationshipWriteAccordion from '@/app/admin/RelationshipWriteAccordion';
 
 export default function AssetDetailPage({
@@ -30,12 +30,13 @@ export default function AssetDetailPage({
     srcTokenId: ipAssetId,
   };
 
-  const defaultCreateIpaBoundLicenseValues: CreateIpaBoundLicenseRequest = {
+  const defaultCreateIpaBoundLicenseValues: CreateLicenseRequest = {
     ...defaultIpAssetValues,
-    isCommercial: false, // Only support non-commercial terms for Alpha
-    ipaId: parseInt(ipAssetId),
-    preHooksCalldata: [],
-    postHooksCalldata: [],
+    ipaId: ipAssetId,
+    parentLicenseId: '',
+    params: [],
+    preHookData: [],
+    postHookData: [],
     txOptions: {
       waitForTransaction: true,
     },

app/ipo/[ipOrgId]/IPOrgStatsCard.tsx

@@ -1,7 +1,12 @@
 import storyClient from '@/lib/SP';
 import { Suspense } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ListIpAssetRequest, ListIpAssetResponse } from '@story-protocol/core-sdk';
+import {
+  ListIpAssetRequest,
+  ListIpAssetResponse,
+  ListLicenseRequest,
+  ListLicenseResponse,
+} from '@story-protocol/core-sdk';
 
 const CardWrapper = ({ children }: { children: React.ReactNode }) => (
   <div className="flex flex-col col-span-12 md:col-span-6 bg-white rounded-2xl shadow-lg">
@@ -20,17 +25,31 @@ const IPAStat = async ({ ipOrgId }: { ipOrgId: string }) => {
   const ipAssets = listRes.ipAssets;
   return <span className="text-5xl md:text-6xl font-light">{ipAssets.length}</span>;
 };
+const LicenseStat = async ({ ipOrgId }: { ipOrgId: string }) => {
+  const listReq: ListLicenseRequest = {
+    ipOrgId,
+  };
+  const listRes: ListLicenseResponse = await storyClient.license.list(listReq);
+  const licenses = listRes.licenses;
+  return <span className="text-5xl md:text-6xl font-light">{licenses.length}</span>;
+};
 
 export default function IPOrgStatsCard({ ipOrgId }: { ipOrgId: string }) {
   return (
     <CardWrapper>
-      <div className="flex h-full items-center justify-around w-full p-4">
+      <div className="flex flex-row h-full items-center justify-around w-full p-4">
         <div className="flex flex-col items-center gap-2 min-w-[6rem]">
           <Suspense fallback={<Skeleton className="h-12 mt-2 mb-1 w-16" />}>
             <IPAStat ipOrgId={ipOrgId} />
           </Suspense>
           <span className="md:text-lg font-light">IPAs</span>
         </div>
+        <div className="flex flex-col items-center gap-2 min-w-[6rem]">
+          <Suspense fallback={<Skeleton className="h-12 mt-2 mb-1 w-16" />}>
+            <LicenseStat ipOrgId={ipOrgId} />
+          </Suspense>
+          <span className="md:text-lg font-light">Licenses</span>
+        </div>
       </div>
     </CardWrapper>
   );

app/ipo/[ipOrgId]/createIpa/CreateIpaForm.tsx

@@ -56,6 +56,7 @@ export function CreateIpaForm({ ipOrgId }: CreateIpaFormProps) {
           name: form.watch('name'),
           typeIndex: 0,
           ipOrgId: ipOrgId,
+          licenseId: 0,
           mediaUrl: uri,
           txOptions: {
             waitForTransaction: true,

app/ipo/[ipOrgId]/page.tsx

@@ -16,7 +16,7 @@ import IpAssetWriteAccordion from '@/app/admin/IPAssetWriteAccordion';
 import Link from 'next/link';
 import HookTableWrapper from '@/components/views/Hook/HookTableWrapper';
 import ModuleTableWrapper from '@/components/views/Module/ModuleTableWrapper';
-import { CreateLicenseNftRequest, GetIPOrgRequest } from '@story-protocol/core-sdk';
+import { CreateLicenseRequest, GetIPOrgRequest } from '@story-protocol/core-sdk';
 import IpOrgLicenseDataViewer from '@/components/views/Licenses';
 import CreateLicenseNftWriteAccordion from '@/app/admin/CreateLicenseNftWriteAccordion';
 import RelationshipTypeWriteAccordion from '@/app/admin/RelationshipTypeWriteAccordion';
@@ -52,12 +52,13 @@ export default function IpOrgDetailPage({ params: { ipOrgId } }: { params: { ipO
     ipOrgId,
   };
 
-  const defaultCreateLicenseNftValues: CreateLicenseNftRequest = {
+  const defaultCreateLicenseNftValues: CreateLicenseRequest = {
     ...defaultIPOrgId,
-    isCommercial: false, // Only support non-commercial terms for Alpha
-    licensee: '',
-    preHooksCalldata: [],
-    postHooksCalldata: [],
+    ipaId: '',
+    params: [],
+    preHookData: [],
+    parentLicenseId: '',
+    postHookData: [],
     txOptions: {
       waitForTransaction: true,
     },
@@ -99,7 +100,7 @@ export default function IpOrgDetailPage({ params: { ipOrgId } }: { params: { ipO
                 <TabsTrigger value="tx">Transactions</TabsTrigger>
                 <TabsTrigger value="ipa">IPA</TabsTrigger>
                 <TabsTrigger value="licenses">Licenses</TabsTrigger>
-                <TabsTrigger value="modules">Modules</TabsTrigger>
+                {/* <TabsTrigger value="modules">Modules</TabsTrigger> */}
                 <TabsTrigger value="hooks">Hooks</TabsTrigger>
                 <TabsTrigger value="actions">Actions</TabsTrigger>
               </TabsList>

components/views/Licenses/IPOrgLicenseDataViewerComponent.tsx

@@ -3,50 +3,98 @@ import IPOrgCard from '@/components/cards/IPOrgCard';
 import BaseDataViewer from '../BaseDataViewer';
 import { ColumnDef } from '@tanstack/react-table';
 import { IPOrg } from '@story-protocol/core-sdk';
-import Link from 'next/link';
 import { shortenAddress } from '@/utils';
-import AddressComponent from '@/components/snippets/AddressComponent';
+// Create
+// id: number;
+//     isCommercial: boolean;
+//     status: number;
+//     licensor: string;
+//     revoker: string;
+//     ipOrgId: string;
+//     licenseeType: number;
+//     ipAssetId: string;
+//     parentLicenseId: string;
+//     termIds: string[];
+//     termsData: string[];
+//     createdAt: string;
+//     txHash: string;
 
 const columns: ColumnDef<IPOrg>[] = [
   {
     accessorKey: 'id',
     header: 'ID',
-    cell: ({ row }) => <span className="min-w-[200px] font-mono">{shortenAddress(row.getValue('id'), 4)}</span>,
+    cell: ({ row }) => <span className="min-w-[120px] font-mono">{shortenAddress(row.getValue('id'), 4)}</span>,
+  },
+
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => <span className="min-w-[150px]">{row.getValue('status')}</span>,
+  },
+  {
+    accessorKey: 'licensor',
+    header: 'Licensor',
+    cell: ({ row }) => <span className="min-w-[150px]">{shortenAddress(row.getValue('licensor'), 4)}</span>,
   },
   {
-    accessorKey: 'name',
-    header: 'IP Org Name',
-    cell: ({ row }) => <span className="min-w-[200px]">{row.getValue('name')}</span>,
+    accessorKey: 'revoker',
+    header: 'Revoker',
+    cell: ({ row }) => <span className="min-w-[150px]">{shortenAddress(row.getValue('revoker'), 4)}</span>,
   },
   {
-    accessorKey: 'owner',
-    header: 'Owner',
+    accessorKey: 'ipOrgId',
+    header: 'IP Org ID',
+    cell: ({ row }) => <span className="min-w-[150px]">{shortenAddress(row.getValue('ipOrgId'), 4)}</span>,
+  },
+  {
+    accessorKey: 'licenseeType',
+    header: 'Licensee Type',
+    cell: ({ row }) => <span className="min-w-[150px]">{row.getValue('licenseeType') ?? 'N/A'}</span>,
+  },
+  {
+    accessorKey: 'ipAssetId',
+    header: 'IPAsset ID',
+    cell: ({ row }) => <span className="min-w-[200px]">{row.getValue('ipAssetId')}</span>,
+  },
+  {
+    accessorKey: 'parentLicenseId',
+    header: 'Parent License ID',
+    cell: ({ row }) => <span className="min-w-[200px]">{row.getValue('parentLicenseId')}</span>,
+  },
+  {
+    accessorKey: 'ipOrgId',
+    header: 'IP Org ID',
+    cell: ({ row }) => <span className="min-w-[150px]">{row.getValue('ipOrgId')}</span>,
+  },
+  // {
+  //   accessorKey: 'termsData',
+  //   header: 'termsData',
+  //   cell: ({ row }) => <span className="min-w-[150px]">{row.getValue('termsData')}</span>,
+  // },
+  {
+    accessorKey: 'createdAt',
+    header: 'createdAt',
     cell: ({ row }) => {
-      const address = row.getValue('owner');
-      return <AddressComponent address={address as string} />;
+      const date = new Date(row.getValue('createdAt'));
+      const formattedDate = date.toLocaleDateString('en-US', {
+        year: '2-digit',
+        month: 'short',
+        day: 'numeric',
+      });
+      const formattedTime = date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        timeZoneName: 'short',
+      });
+      return <span className="min-w-[150px]">{`${formattedDate}, ${formattedTime}`}</span>;
     },
   },
   {
     accessorKey: 'txHash',
-    header: 'Transaction Hash',
-    cell: ({ row }) => (
-      <Link href={`/ipo/${row.getValue('id')}`} className="capitalize font-mono underline">
-        {shortenAddress(row.getValue('txHash'), 5)}
-      </Link>
-    ),
+    header: 'Tx Hash',
+    cell: ({ row }) => <span className="min-w-[150px]">{shortenAddress(row.getValue('txHash'), 3)}</span>,
   },
-  // {
-  //   accessorKey: 'tokenUri',
-  //   header: 'TokenURI',
-  //   cell: ({ row }) => {
-  //     const uri: string = row.getValue('tokenUri');
-  //     return (
-  //       <Link href={uri}>
-  //         <ExternalLinkIcon className="w-5 h-5" />
-  //       </Link>
-  //     );
-  //   },
-  // },
 ];
 
 export default function IPOrgLicenseDataViewerComponent({

components/views/Licenses/IPOrgLicenseDataViewerWrapper.tsx

@@ -1,13 +1,13 @@
 import storyClient from '@/lib/SP';
 import React from 'react';
-import IPOrgDataViewerComponent from '@/components/views/IPOrg/IPOrgDataViewerComponent';
 import { ListLicenseResponse } from '@story-protocol/core-sdk';
+import IPOrgLicenseDataViewerComponent from './IPOrgLicenseDataViewerComponent';
 
 export default async function IPOrgLicenseDataViewerWrapper({
   ipOrgId,
   ipAssetId,
-  tableOnly,
-  gridOnly,
+  // tableOnly,
+  // gridOnly,
   pageSize,
 }: {
   ipOrgId?: string;
@@ -21,13 +21,19 @@ export default async function IPOrgLicenseDataViewerWrapper({
     const licensesData = data?.licenses;
 
     if (licensesData.length === 0) {
-      if (ipAssetId && !ipOrgId) return <div>No licenses found for this IP Asset</div>;
-      if (!ipAssetId && ipOrgId) return <div>No licenses found for this IP Org</div>;
-      if (ipAssetId && ipOrgId) return <div>No licenses found</div>;
+      if (ipAssetId && !ipOrgId) return <div className="mx-8 mt-4">No licenses found for this IP Asset</div>;
+      if (!ipAssetId && ipOrgId) return <div className="mx-8 mt-4">No licenses found for this IP Org</div>;
+      if (ipAssetId && ipOrgId) return <div className="mx-8 mt-4">No licenses found</div>;
     }
 
     return (
-      <IPOrgDataViewerComponent data={licensesData} tableOnly={tableOnly} gridOnly={gridOnly} pageSize={pageSize} />
+      <IPOrgLicenseDataViewerComponent
+        data={licensesData}
+        tableOnly={true}
+        // tableOnly={tableOnly}
+        // gridOnly={gridOnly}
+        pageSize={pageSize}
+      />
     );
   } catch (e) {
     console.log('Error:', e);